Hacks CSS pour IE, Firefox, Safari et Opera

Tous les browsers n’affichent pas un site web de la même manière et même si l’ensemble a tendance à s’unifier, il reste toujours des points de détail qui sont mal interprétés par l’un ou l’autre.

La difficulté, c’est que Firefox, Opera et Safari n’ont pas de méthode permettant d’attribuer une feuille de style indépendante, à l’instar d’Internet Explorer, avec ses commentaires spécifiques.

Il faut croire que les développeurs d’IE étaient parfaitement conscients que leur navigateur n’était pas au point quand ils l’ont codé et qu’ils ont mis à disposition des intégrateurs, une méthode pour palier à ces faiblesses et pouvoir afficher quelque chose de convenable.

Quoi qu’il en soit, même si redéfinir une feuille de style uniquement pour IE est parfois un calvaire, il faut bien avouer que la manipulation est simple et efficace.

Pour les autres, plutôt que de passer par une méthode javascript, comme le fameux CSS Browser Selector, nous allons cibler chaque navigateur uniquement via le CSS.

La base

Prenons un exemple basique: un paragraphe avec du texte.

<p id="some-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Puis appliquons une règle CSS sur ce texte.

#some-text {
    display: none;
}

Commentaires conditionnels IE

La méthode la plus simple pour cibler IE est d’utiliser les commentaires conditionnels:

<!--[if IE 7]>
<style type="text/css">
#some-text {
    display: block;
}
</style>
<![endif]-->

Il y a une autre méthode, moins propre, mais qui permet de faire quelques corrections assez rapidement:

/*--IE 7--*/
html > body #some-text {
    *display: block;
}

/*--IE 6--*/
body #some-text {
    _display: block;
}

Ciblage Firefox

Selon la version de Firefox, 2 solutions s’offrent à nous.

/*--FF 1 & 2--*/
body:empty #some-text {
    display: block;
}

/*--FF toutes versions--*/
@-moz-document url-prefix()
{
    #some-text {
        display: block;
    }
}

Ciblage Safari

Très similaire au hack Firefox, le ciblage Safari s’effectue à l’aide du préfixe -webkit.

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #some-text {
        display: block;
    }
}

Ciblage Opera

Ce hack est assez peu recommandé. D’une part, il fonctionne par élimination des cibles et d’autre part, parce qu’il ne faudra plus longtemps pour que ce hack s’applique également à Firefox.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
    #some-text {
        display: block;
    }
}

En appliquant ces règles, nous pouvons cibler précisément les navigateurs sur lesquels il nous faut intervenir et y apporter les corrections voulues.