Jonathan Petitcolas

Tout développeur Web est un jour confronté à la dure réalité des différents navigateurs. En effet, que ce soit en Javascript ou en CSS, chacun se permet quelques libertés par rapport aux normes du W3C. Outre le fait que cela soit totalement aberrant (des normes ne sont-elle pas faîtes pour être suivies et faciliter l'interopérabilité ?), cela a de lourdes répercussions en terme de développement.

La solution pour pallier à tous ces problèmes de compatibilité en Javascript est l'utilisation d'un framework, qui a l'avantage d'être compatible avec de nombreux navigateurs et qui vous simplifie par la même occasion grandement le code. Nous pouvons par exemple citer le framework MooTools.

En CSS en revanche, les choses sont un peu plus difficiles. En effet, il n'existe pas réellement de framework (si ce n'est pour mettre grossièrement en page votre site). Et il arrive très souvent de déceler des écarts importants, des chevauchements inesthétiques, des couleurs qui varient (si, si, ça arrive !), etc. Comment faire ? Eh bien, il existe essentiellement 2 méthodes.

Hacks CSS

Cette technique consiste à jouer sur les différences d'interprétation des navigateurs. Ainsi, il sera possible de donner une règle pour un navigateur uniquement (par exemple IE7), sans que les autres n'arrivent à la comprendre. Ainsi, seul le navigateur concerné l'appliquera.

Souvent, les développeurs considèrent cette méthode comme "sale". Et pour cause, jouer avec les libertés très particulières offertes par rapport aux normes est plutôt dangereux. Imaginez une mise à jour qui modifie ce comportement. Outre le fait que vous ne serez pas forcément prévenu dès le départ (la veille technologique ayant ses limites), il va falloir répondre très rapidement à ce changement, afin que celui-ci soit le moins visible pour vos visiteurs.

Voici une liste de hacks pour les navigateurs les plus courants. Ici, on appliquera une couleur de fond différente pour chaque navigateur. Par défaut, elle est argentée.

body { background-color: silver; }

Hack IE6 :

Pour tous ceux qui développeraient encore sur navigateur déprécié (même par Microsoft), voici le très célèbre hack :

* html body { background-color: red; }

A noter que je ne développe plus, aussi bien à titre personnel que professionnel, pour ce navigateur. Il est temps d'évoluer un peu, sans quoi nous serions encore à réaliser des sites optimisés pour du 680x460. :o

Hack IE7 :

IE7 est relativement incontournable, étant donné qu'il s'agit de la version la plus répandue. On le CSS-hacke avec :

*+html body { background-color: green; }

Hack IE8 :

Pensons à l'avenir, et préparons immédiatement notre site pour IE8, qui commence tout doucement à être adopté.

body { background-color/*\**/: blue\9 }

Petite remarque ici : vous serez obligé de répéter le sélecteur autant de fois que d'attributs modifiés. Cela peut vite s'avérer relativement lourd, mais c'est, à ma connaissance, la seule solution.

Hack Firefox :

Un hack Firefox est une chose plutôt étrange, étant donné que ce navigateur est le plus répandu pour le développement Web, en raison notamment de son respect des normes et de la diversité de ses plug-ins. Il est donc logique de développer et d'optimiser pour ce navigateur, faisant de petites adaptations pour les autres. Mais, sait-on jamais, ce hack pourrait peut-être vous servir...

html>/**/body, x:-moz-any-link, x:default { background-color: yellow;}

Hack Safari / Chrome :

A présent, une propriété CSS que je ne connaissais même pas avant d'apprendre ce hack :

body:nth-of-type(1) { background-color: red; }

Je pense avoir fait le tour de tous les principaux navigateurs. A noter que, comme expliqué précédemment, ces morceaux de code sont susceptibles d'être rendus caducs par une mise à jour de ces navigateurs. A consommer avec modération donc. ;)

Quant à Opera, je ne l'ai pas oublié, mais n'ai pas réussi à lui trouver de hacks exclusifs. Si vous en avez, n'hésitez pas à les partager en commentaires. :)

Commentaires conditionnels

Les commentaires conditionnels sont une caractéristique spécifique à Internet Explorer. Cet écart par rapport aux normes permet aux intégrateurs CSS de se simplifier grandement la vie en jouant sur la propriété de cascade des feuilles de style : toute propriété définit une seconde (ou plus) fois écrase la valeur précédente.

Ainsi, le développeur mettra en place une feuille de style pour les navigateurs "normaux". Généralement, Firefox, les autres tels que Safari n'ayant pas de grandes différences d'interprétation par rapport au renard orange. Puis, il mettra en place d'autres feuilles de style venant surcharger les propriétés posant problèmes sous IE. Ces feuilles de style ne seront chargées QUE par le produit de la firme de Redmond.

Voici la syntaxe des commentaires conditionnels :

<!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /><![endif]-->

Mais, encore plus intéressant, nous pouvons choisir la bonne feuille de style en fonction de la version d'Internet Explorer. Par exemple :

[/xml]

Ainsi, pour chaque version, vous pourrez appliquer une feuille de style particulière. Je vous conseille vivement de respecter cet ordre : du navigateur respectant le plus les normes à celui qui les respectent le moins. Ainsi, on pourra procéder par ajustements successifs, s'éloignant petit à petit des normes.

Hacks et commentaires conditionnels : c'est quoi le mieux ?

Dans l'absolu, aucun des deux. Dans un monde parfait, il ne faudrait pas avoir à utiliser ce genre de contournement des normes. Si le W3C édicte des normes, ce n'est pas seulement pour 5 gus dans un garage (petite dédicace à Cricri !), mais bel et bien pour harmoniser tous ces comportements. Mais cela relèverait presque de la science-fiction.

Personellement, ma préférence se porte pour les hacks. Et ce pour la simple raison que le navigateur n'aura à récupérer qu'un seul fichier, et non pas plusieurs, ce qui optimisera légèrement (mais toute optimisation est bonne à prendre) le chargement de la page. Qui plus est, il sera plus facile de se repérer dans vos feuilles de style. Lire du code centralisé dans un seul fichier est toujours plus simple que de changer régulièrement de sources. ;)

Et enfin, pour se détendre un peu après cet article technique, une dernière explication CSS :

Qui a dit que le métier d'infographiste était pénible ? :p