Les hacks CSS (memento)

Voici un petit article qui peu servir à beaucoup de monde, même si l’abandon d’IE à apporté une bouffée d’oxygène à la création web, il reste des moments où des différences d’affichage se font sentir entre Firefox IE et WebKit (Safari, Chrome et bientôt Opéra).

Voici des éléments à ajouter à votre feuille de style CSS pour appliquer des rendu spécifiques à certain moteurs.

On commence par WebKit avec par exemple une marge de 10 px :

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    #monId {
        margin : 10px;
    }
}

Pour Firefox :

@-moz-document url-prefix()
{
     #monId {
        margin : 10px;
    }
}

Le plus Courant, un Hack pour IE :

<!--[if lt IE 8]>
<br />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%23monId%20%7B%0A%20%20%20%20%20margin%20%3A%2010px%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
<p>
< ![endif]-->