Hacks Navigateurs - Abel Poucet Webdesign

Accueil du site > tools > Hacks Navigateurs

pour isoler IE6, IE7, Opéra, Gecko (FF, Netscape, Camino ...) et WebKit (Safari ...) dans les CSS.

CSS

Attention, cela n’est que de la bidouille et peut donner du code non valide pour le W3C. À éviter si vous pouvez faire autrement, mais, personnellement, ces quelques petits hacks m’ont souvent sauvé la vie.

(MAJ : j’ai ajouté deux nouveaux hack valides CSS 3 pour cibler Safari 2 ou bien les récents WebKits)

only IE6 :

#bloc {border: green;}

*html #bloc {border: red;} /* only ie6 */

only IE7 :

#bloc {border: green;}

*+html #bloc {border: red;} /* only ie7 */

only Gecko (FireFox, Netscape) :

#bloc {border: green;}

html:not([lang*=""]) #bloc {border: red;} /* only gecko */

only Opéra :

#bloc {border: green;}

html:first-child  #bloc {border: red;} /* only opera */

only Safari (WebKit) :

#bloc {

color: green;

}

/*\*/

html*#bloc {

color:red;/*only safari*/

_color:green;/*only IE6 PC*/

}/**/

Avec la technique ci-dessus vous avez cependant besoin de repréciser le style pour IE6

Un deuxième hack plus simple pour cibler Safari 2 et valide CSS 3 :

body:last-child:not(:root:root) #bloc { 

color: red; }/* only Safari 2 */

et enfin son pendant pour Safari 3 et les nouvelles versions de Webkit (valide CSS3) :
(On doit utiliser un filtre @media)

@media all and (min-width: 0px) {

             body:not(:root:root) #bloc { 

color: red; }/* only webkit */

    }

Plus d’exemples : http://zonecss.free.fr/courscss/cou...
et : http://www.stormdetector.com/hacks/...
et ce très bon lien : http://thomas.tanreisoftware.com/?p=11

Vos réactions

Aucune réaction pour l'instant. Utilisez le formulaire ci-dessous pour réagir à l'article.

Réagir

(Vous pouvez laisser un message en remplissant les champs ci-dessous)

Navigation alternative :

Tools : derniers articles

Créa : derniers articles

Contact

14 bis, bd de l'Hôpital 75005 Paris
06 81 35 98 00