Des livres incontournables pour tout maîtriser
| Auteur | |
|---|---|
| Florent V. | # 22 Oct 2008 - 14:14:09  |
 Administrateur 17128 Posts |
Bonjour à tous, J'ai récemment fait une intégration HTML/CSS «pour le plaisir», à savoir pour un site lancé (puis designé et templaté) par des gens d'02Sources sur une idée de votre serviteur. Le site en question est le suivant: http://www.ispoil.net (Le principe et un avertissement: le site est un blog participatif, il s'agit de raconter la fin d'une histoire -- film, roman, série... -- afin de gâcher le plaisir des lecteurs. La page d'accueil et les pages de rubrique ne dévoilent rien, seules les pages dédiées à chaque spoil dévoilent les intrigues.) Le design posait quelque difficultés pour IE6. Il y a notamment quelques superpositions de textures et éléments qui pouvaient être traitées simplement avec du PNG-32 ou du PNG-8 avec alpha. Deux solutions pour se rapprocher du design dans IE6: soit utiliser des images opaques (JPEG par exemple), ce qui fait perdre en souplesse; soit utiliser les images avec transparence alpha et dégrader en PNG-8 avec transparence binaire (ou GIF), voire pas d'image de fond du tout, pour IE6 uniquement. Pour un projet professionnel, j'aurais sans doute opté pour l'une ou l'autre solution (plutôt la deuxième). En plus de cela, je n'avais ni le temps ni l'envie de débuguer cette intégration sous IE6. (Il faut savoir que, pour ce type de design, ça peut représenter un tiers du boulot d'intégration!) J'ai donc décidé d'adresser les pages avec des styles très basiques uniquement pour IE6. Je vous laisse regarder ce que ça donne avec IE6 d'une part, et un navigateur plus récent (IE7, Firefox 2+, Safari 2+, Opera 9+...) d'autre part. La technique utilisée pour le filtrage est la suivante: <style type="text/css"> Le premier @import appelle une feuille de styles avec quelques styles basiques (une sorte d'anti-reset.css, auquel j'ai rajouté quelques styles spécifiques au design.) Tous les navigateurs le comprennent. Le deuxième @import précise un média d'application (styles pour le média screen). IE6 ne comprend pas cette syntaxe, et n'applique donc pas cette feuille de styles. Je pensais qu'IE7 corrige cette insuffisance, mais ça n'est pas le cas. Pour IE7 uniquement, donc, il faut rappeler à nouveau cette feuille de styles, via un commentaire conditionnel. Ce filtrage me semble assez robuste. Pour information, IE8 beta 2 comprend bien la syntaxe normale (deuxième @import). Voilà pour l'essentiel. Pour rappel, IE6 aujourd'hui c'est entre 20 et 25% des visiteurs (variable selon les sites, bien sûr). Et ces nombres sont bien entendu appelés à diminuer. |
  |
|
| 6l20 | # 22 Oct 2008 - 14:34:54 |
Les kiwis...quand je veux !  Modérateur 1987 Posts |
Pfff tu n'as qu'à déplacer ton sujet pendant que je répond si tu veux...  Hello Florent, Je suis allé jeter un oeil suite à ta remarque dans le sujet en question  Je ne suis pas super fan du design mais ce n'est pas la question Je trouve le rendu sous IE6 tout à fait acceptable et parfaitement justifié aux regards des "contraintes et de l'enjeu", well done Il me semble que c'est peu ou prou la même technique utilisée par Benjamin pour son site Deaxon, non ? Je ne me souvenais pas/plus qu'IE7 ne comprenait pas non plus la règle import lorsque le média d'application était spécifié, merci pour le rappel Bon allez, je vais allé décortiquer le design eut égard à ton travail et au fait que je suis très très à l'ouest avec ces histoires de png-32-24-8, la transparence ou la semi-transparence et que ça, c'est mal Bien à toi, Cdt, Sylvain Modifié par 6l20 (22 Oct 2008 - 15:34) XHTML: structure. CSS: présentation. Javascript: comportement. |
|
|
| Florent V. | # 22 Oct 2008 - 15:36:22 |
| Administrateur 17128 Posts |
Oui, c’est globalement la même technique que sur http://deaxon.com , à la différence qu’il n'y a strictement aucun styles pour IE6 sur ce dernier site, et quelques correctifs CSS pour IE7. Mais le même «filtre» est utilisé. |
| |
|
| Thanh | # 24 Oct 2008 - 00:36:57 |
Fais toi toi même  553 Posts |
Tiens il y a de la lumière ici. Non, plus sérieusement, superbe prouesse Florent  |
| |
|
| Noisequik | # 24 Oct 2008 - 09:14:59 |
| 373 Posts |
excellent ! Je pense me diriger de plus en plus vers des solutions pareils (professionnellement également) Pensez-vous que je pourrais facilement le justifier auprès des clients ? Je vais également commencer à utiliser "display: table-cell;" dans mes futurs développements et faire une version compatible mais sans doute légèrement dégradée pour IE7 |
| |
|
| Florent V. | # 24 Oct 2008 - 09:41:07 |
| Administrateur 17128 Posts |
Noisequik a écrit : Non. Lorsque le graphisme et surtout l'ergonomie d'un site sont travaillés, l'accès des utilisateurs à une interface pas ou peu dégradée a un impact sur le succès du site. Donc sur le retour sur investissement. On pourrait poser les choses ainsi: - support IE6 = +35% sur le cout de l'intégration (pour prendre un peu large, c'est parfois moins... mais il y a des cas où c'est plus); - IE6 = 20-25% des cibles potentielles. Alors certes, si on compare les deux chiffres le surcout à l'intégration est égal ou dépasse la proportion d'utilisateurs d'IE6. Sauf que... l'intégration n'est qu'un poste budgétaire parmi d'autres dans un projet web, et le surcout à l'intégration est finalement très faible par rapport à l'investissement global. Il n'y a que dans des cas extrême où la cible utilise très peu IE6 et où les couts de développement pour IE6 seraient énormes que c'est envisageable. |
| |
|
| Laurent Denis | # 24 Oct 2008 - 10:29:53 |
 7942 Posts |
Pourquoi ne pas franchir totalement le pas, et s'affranchir du STYLE et du (léger) détournement de media ? La même chose avec uniquement des éléments LINK (les commentaires conditionnels permettent de faire beaucoup de choses) Modifié par Laurent Denis (24 Oct 2008 - 10:30) Les alternatives à flash ou javascript sont des idées reçues. |
| |
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org
Nos partenaires : Editions Eyrolles
XHTML Best Effort ValidCSS 3 Might Become Valid
Telnet, tel chien
(Michel Drucker)
Suggérer une citation best-of
Alsacréations est une communauté dédiée à la conception de sites web de qualité, notamment grâce aux standards W3C, aux feuilles de styles CSS, aux langages HTML et XHTML, et à l'accessibilité (en savoir plus...)
http://www.alsacreations.com/
