|
TUTORIEL/PRATIQUE
Les classes conditionnelles en HTML
Publié le 20/12/2011
La solution classique (comprendre: à l'ancienne) est d'utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l'avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations, est d'utiliser les commentaires conditionnels. Nous allons voir dans cette article que l'utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnelsLes commentaires conditionnels se présentent comme des instructions dotées d'une condition (if) et qui peuvent se placer à n'importe quel endroit du document (X)HTML. Il s'agit d'un mécanisme propre à Internet Explorer Windows, né avec la version IE5, et qui permet d'inclure dans une page HTML, de manière valide, une portion de code qui ne sera lue et interprétée que par IE, ou par l'une ou l'autre de ses versions. Pour information, Internet Explorer 10 ne reconnaît plus les commentaires conditionnels, il ne peut donc plus être ciblé de cette manière. Dans notre quête de compatibilité maximale sur le navigateur de Microsoft, nous allons principalement nous servir de ce mécanisme pour faire un lien vers une feuille de styles corrective dédiée. Cette seconde feuille CSS, chargée à la suite du fichier de styles principal, aura pour but d'écraser et de rectifier au cas par cas les règles générales mal reconnues par IE, comme le montre l'illustration ci-dessous :
Cependant, dans la pratique, une feuille de style corrective pour Internet Explorer ne suffira pas. Vous serez souvent amenés à produire une feuille CSS spécifique à IE6 et 7, ainsi qu'une autre pour IE8. Ou pire : une feuille différente pour chacune des trois versions ! Au final, vous jonglerez avec au minimum trois feuilles de styles CSS :
Non seulement, nous avons à gérer plusieurs fichiers différents, mais nous ne pourrions toujours pas cibler les trois versions IE6 et IE7 et IE8 à la fois sans ajouter une nouvelle condition et feuille CSS supplémentaire. En 2008, le développeur américain Paul Irish s'est penché sur le mécanisme des commentaires conditionnels et en a listé ces quelques désagréments : Les navigateurs anciens tels que IE6, IE7 et IE8 doivent charger plusieurs fichiers CSS au lieu d'un. Ces requêtes HTTP supplémentaires, ont un impact sur la vitesse d'affichage des pages. Certains correctifs CSS s'appliquent à toutes les versions des navigateurs (IE6, IE7, IE8). Il faudra les écrire une fois dans chaque fichier de correctifs. A chaque modification opérée sur styles.css?201205041600'il n'y a pas également des changements à répercuter. La maintenance et l'évolution des styles CSS deviennent difficiles. L'emploi de commentaires conditionnels peut causer des problèmes pour les téléchargements parallèles. L'argument des baisses de performances est non négligeable sur les versions IE6 et IE7, car il s'agit justement de navigateurs vieillots nécessitant des optimisations constantes et nombreuses en vue de ne pas handicaper leurs temps de calcul et d'affichage. Une alternative ? Les classes conditionnellesLa solution proposée par Paul Irish a été initialement de créer un nom de classe spécifique à l'élément <body>, via un commentaire conditionnel et sans nécessiter d'appel vers une feuille de styles. Je préfère néanmoins l'appliquer directement à l'élément <html>, plus logique et plus souple à manipuler. Voici une version optimisée de classe conditionnelle :
Vous pouvez voir cette classe conditionnelle en action sur le site www.goetter.fr/livres/css-avancees/ Le principe et les explications sont simples : sur les versions inférieures ou égales à Internet Explorer 7, le corps du document s'écrira <html class="ie7 oldie" lang="fr"> ; sur IE8, ce sera <html class="ie8 oldie" lang="fr"> ; sur tous les autres navigateurs (IE9+ et le reste du monde), il s'agira simplement de <html lang="fr">. Il devient alors aisé d'appliquer une règle spécifique à IE6 et IE7 :
Et pour appliquer des styles à la fois sur IE6, IE7 et IE8 :
Bien que la syntaxe demeure un tantinet rebutante et qu'un ajout de codes HTML soit nécessaire, cette méthode commence à faire son chemin parmi les développeurs web aguerris (elle figure même dans le gabarit par défaut proposé par HTML5boilerplate) car ses avantages sont séduisants : Contrairement à ce que l'on pourrait croire, elle est parfaitement valide W3C / HTML et reconnue par tous les navigateurs, On cible en toute simplicité les versions d'Internet Explorer souhaitées avec .ie7, .ie8, .oldie par exemple, Pas de multiplication des requêtes, et des fichiers externes à vérifier et maintenir.
|
|||||||||||||||||||||||||||
Face aux bugs CSS sous Internet Explorer 6, 7 et 8, les classes conditionnelles offrent une solution plus efficace que les commentaires conditionnels. Décryptage.
| | En savoir plus | |
| | |
Cette astuce est un remède au blocage des fichiers externes, elle est vivement recommandée en cas d'usage de commentaires conditionnels et de classes conditionnelles en règle générale. Cependant, il a été montré (toujours sur HTML5 Boilerplate) que dans le cas d'une classe conditionnelle appliquée sur l'élément html (comme l'exemple précédent) ne pose aucun souci de performances et de blocages. Inutile par conséquent d'ajouter un commentaire vide dans ce cas très précis.
Encore un avantage supplémentaire pour ces classes conditionnelles !
Article réalisé par Raphael (Alsacreations) sous licence Creative Commons
Une classe conditionnelle pour IE 6 et 7
Comment gérer le cas d'Internet Explorer 7 quand modifier les styles appliqués à tous les navigateurs ne suffit pas ? Et comment aborder les multiples bugs d'IE6 ? Une piste de réponse. Lire
Ne cibler que les navigateurs modernes grâce aux sélecteurs avancés
L'amélioration progressive consiste à créer une mise en forme commune pour tous les navigateurs, puis une couche optionnelle pour ceux qui ne supportent pas encore CSS3 ou mal CSS2.1 Lire
Autour du même sujet
Classe conditionnelle : les limites - Classe conditionnelle pour IE 6 et 7 - DÉVELOPPEURS > Client Web
- Voir aussi :
- HTML
| JDN Développeur | Haut de page |
CHRONIQUES
Comment maximiser les bénéfices du testing dans un climat de rigueur ?
Par Natacha Pickaert, (Sogeti France) Lire
Devoxx France 2012 : quelques bonnes pratiques pour le développement Java mobile
Par Romain Guefveneu, (Netapsys) Lire
Contribuez vous aussi aux Chroniques
Toutes les chroniques
A VOIR EGALEMENT