Le hack a de l’avenir
… en tout cas c’est ce qui découle de cette table de compatibilité des différents browsers.
Bien évidemment, IE est en queue de peloton, 2% pour IE6 et à peine 20% pour IE9.
Mais les utilisateurs d’IE s’en fichent…
Safari est le meilleur élève, suivi de près par Firefox. Puis Chrome, puis Opéra.
Deux solutions : soit on se limite au plateau commun (enfin… à partir d’IE7, il est impossible de faire un site un tant soit peu graphique sans hack pour IE6), soit on multiplie les hacks. Tant qu’on en est à la feuille de style alternative, ce n’est pas trop grave.
En revanche, à partir du moment où il faut modifier le marquage uniquement pour un browser, il faut vraiment reconsidérer la question.
Personnellement, dans la mesure du possible, j’essaie d’éviter de le faire, quitte à dégrader légèrement le graphisme.
Le dernier exemple en date étant celui du séparateur, l’élément HR. Il se présente par défaut comme une simple ligne. On peut l’embellir, en lui mettant une image en arrière-plan. Oui mais pas dans IE ni Opéra. Où une bordure absolument inamovible apparait. Bordure qu’on ne peut pas remettre à zéro par le biais des css. La seule solution trouvée jusqu’à maintenant étant d’intégrer l’élément hr dans un div, et à faire disparaître les bordures du hr par le biais des marges du div conteneur.
Je ne comprends pas trop l’intérêt, dans ce cas, autant mettre directement un div, c’est plus léger comme marquage.
Bref, pour moi, ce sera image d’arrière plan, et simple ligne par le biais des CSS sur IE et Opéra.
Dans d’autres cas, le marquage est nettement plus complexe. C’est le cas de beaucoup des menus pur css de cssplay.co.uk
Je n’aime pas surcharger mon code par ce genre de marquage conditionnel. L’idée de repasser en cas de modification, ou de trainer pendant des années des div qui peuvent être devenus totalement inutiles – le jour où IE6 sera mort, par exemple – ne me plait pas trop.
La solution est de générer ce marquage par une fonction php. Au lieu d’intégrer directement l’élément dans votre code, vous l’appelez par un script. La modification en cas d’évolution du marquage sera donc centralisée.
Pour en revenir à mon hr, si je tenais absolument à mon image de fond dans tous les browsers, je ferais sans doute un script php monhr() qui créerait le marquage en fonction de browser. Ainsi, si IE8 a une façon différente de traiter le HR et le div conteneur, et nécessite encore un marquage différent, il suffit de rajouter un cas dans la fonction php, au lieu de remodifier l’ensemble des occurrences du hr dans le site.
Et 3 ans plus tard IE6 est encore utilisé, même si c’est pas le navigateur le plus utilisé, en 2012 et à 45 jours de 2013 des entreprises utilisateurs encore ça. Affligeant.