Feuilles de style conditionnelles ou Hacks CSS ? Réponse : Ni l’une ni l’autre !
De ce que j’ai vu un bon nombre de développeurs ces jours-ci sont partagés entre des feuilles de style conditionnelles et des hacks css.
Vous avez l’habitude de voir ceci :
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" />< ![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->Mais probablement aussi beaucoup de choses comme :
div.infoBox { float: left; margin-left: 10px; _margin-left: 5px; }Les correctifs CSS pour cibler des navigateurs spécifiques restent là où se trouvent les autres styles, mais ils ne sont certainement pas validés. Depuis quelque temps, la communauté des normes s’est ralliée autour de feuilles de style conditionnelles pour résoudre le problème de validation.
Mais il y a quelques problèmes :
Les feuilles de style conditionnelles signifient 1 ou 2 demandes HTTP
HTTP
HyperText Transfer Protocol (info)
supplémentaires à télécharger.
Comme elles se trouvent dans le <head>, le rendu de la page attend jusqu’à ce qu’ils soient complètement chargés.
De plus, "Yahoo’s internal coding best practices" ne recommandent pas les feuilles de style conditionnelles.
Il peut séparer une seule règle CSS en plusieurs fichiers. J’ai passé beaucoup de temps à me demander "D’où vient cette règle !?" quand il s’est avéré qu’elle était cachée dans une feuille de style conditionnelle.
Voici ma solution :
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->En utilisant les mêmes commentaires conditionnels, nous ajoutons simplement conditionnellement une classe supplémentaire sur la balise html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) . Cela nous permet de conserver notre fichier css spécifique au navigateur dans le même fichier :
div.foo { color: inherit;}
.ie6 div.foo { color: #ff8000; }De plus, il valide totalement et fonctionne dans tous les navigateurs.
(Chapeau bas à Paul Hammond et Adam McIntyre pour s-m-r-t.)
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->Doug Avery de Viget soulignent qu’ils préfèrent utiliser cette technique sur la balise HTML HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) , libérant ainsi la balise body pour les classes dynamiques. Ça marche très bien. Plus tard, j’ai changé tous mes sites pour l’utiliser sur HTML HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) au lieu de body, en fait... De plus, c’est très bien combiné avec la technique Avoiding the FOUC v3.0 ainsi qu’avec Modernizr.
Quelque chose de différent ?
2010.05.20 : Il s’avère que les conditions IE autour des fichiers css pour IE6 peuvent ralentir le temps de chargement de votre page dans IE8 ! C’est fou, non ? La solution ici évite cela, tout comme le fait de forcer IE à rendre les bords.
2010.06.08 : Et puis... Rob Larsen souligne que lorsque ces classes conditionnelles sont appliquées à l’élément HTML HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) , elles ne bloquent pas. Aucun commentaire vide n’est nécessaire. Je pense que c’est un nouveau gagnant.
2010.09.07 : La mise à jour suit !
A mettre dans la balise html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte)
Voici la nouvelle recommandation, et celle qui est utilisée dans la boîte de dialogue HTML5.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->Pourquoi ?
Ceci corrige un problème de blocage de fichiers découvert par Stoyan Stefanov et Markus Leptien.
Il évite un commentaire vide qui corrige aussi le problème ci-dessus.
Les CMS
CMS
Content Management System. En français, SGC : Système de Gestion de Contenu.
comme Wordpress et Drupal utilisent la classe corporelle plus fortement. Cela simplifie l’intégration
Il ne validera pas en html4 mais il est correct en html5. Traitez-en.
Il joue bien avec une technique pour lancer votre JavaScript spécifique à la page en fonction de votre balisage.
Il utilise le même élément que Modernizr (et Dojo). Ça fait du bien.
J’ai laissé une classe vide là-dedans parce que vous allez probablement y mettre un no-js ou autre chose. Sinon, supprimez. Aussi, si les commentaires supplémentaires autour de cette dernière balise vous semblent bizarres, blâmez Dreamweaver, qui efface les commentaires conditionnels normaux !IE
Cette solution tend à encourager les développeurs à ignorer IE en grande partie pendant le développement, et à le hacker pour le soumettre à la fin. C’est en fait la pire chose que vous puissiez faire quand vous écrivez votre CSS, parce qu’elle vous forcera à utiliser des hacks ou des remèdes qui ne sont pas nécessaires. De nombreux piratages et contournements peuvent être évités en codant simplement des choses pour fonctionner dans IE dès le début. Si vous testez IE au début du développement, vous devriez faire de votre mieux pour utiliser un code conforme aux normes qui est optimisé pour les performances et la maintenance future. La forge de style crée du code qui est moins optimisé dans ces deux domaines. Bien qu’IE puisse souvent être difficile à travailler avec, il est possible de le faire fonctionner dans la plupart des circonstances en utilisant un bon code - il suffit juste de prévoir.
C’est très intelligent.
En réponse à son billet, j’ai dit..
Lorsque vous vous attaquez aux incohérences d’IE, essayez d’abord de les corriger sans mettre en relief l’IE en particulier. Dans de nombreux cas, il s’agit d’ajouter une largeur ou une hauteur. ou un débordement:caché. En général, être plus explicite sur l’apparence de l’élément aide IE6 et IE7 grandement.
Quelque chose à garder à l’esprit. :)
2011.04.11 : La communauté HTML5 Boilerplate a creusé ceci et a trouvé beaucoup plus de détails sur la syntaxe. Espérons que j’aurai l’occasion de mettre à jour ce billet avec ceux qui apprennent, mais jusqu’à ce moment-là.. cliquez sur !
2011.05.18 : Mise à jour de l’extrait principal pour correspondre aux astuces de syntaxe que nous avons utilisées dans h5bp. Voir le lien ci-dessus pour plus de détails fous.
Classes conditionnelles, portées
- Dans Thesis (php) sorta, utilise l’UA sniffer. :
- en slim (rails) par helloluis
- avec Jade (mode) par kmiyashiro & monokrome
- en HAML (rails) par gf3
- thème par scott nix
An earlier presentation of the idea that this page builds on, can be found at Big John’s classic IE hacking web site positioniseverything.net, in a guest article from February 2007 by Hiroki Chalfant entitled “#IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet”.
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->Publié par Paul Irish le 20 octobre 2008
C’est quoi un réseau social libre et décentralisé ?
