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:
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.
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">
@import url(styles/base.css);
@import url(styles/screen.css) screen;
</style>
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="styles/screen.css" /><![endif]-->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.
