Journal du Net > Développeurs > Contributions > Votre astuce CSS ?
Contribution précédente Contribution suivante

APPEL
A CONTRIBUTION

Vous manipulez le langage CSS au quotidien pour concevoir des pages Web ? Vous avez certainement une astuce à partager ! Cet espace est pour vous.
Dossier Rubrique Client Web
Participez

 Rappel des hacks CSS  

Julien Lafont , Montpellier

Quel est en 3 lignes l'objectif de votre astuce ?

Voici un simple résumé des différents hacks CSS existants. Ils ont pour but de ne formater une balise que pour certains navigateurs.

Décrivez votre astuce en détail. N'hésitez-pas à inclure des portions de codes.

Remarque : pour les différentes versions de IE n'hésitez pas à utiliser les commentaires conditionnels !

/* ************** Rappel des hacks css ***************

- ie 6 et inférieurs
* html
- ie 7 et inférieurs
*+html, * html
- ie 7 seulement
*+html
- ie 7 et navigateurs modernes seulement
html-body
- Navigateurs modernes seulement (ie 7 non inclus)
html-/#**#/body ( supprimer les 2 # )
- Opera 9 et inférieurs
html : first-child
- Chrome et Safari
body : nth-of-type(1)
- Opera
:; xxxx { } ou Vu seulement par Operaou html:first-child
- Firefox 1 et 2
body:empty { }
- Firefox
@-moz-document url-prefix() { #foo { } }
- Safari
@media screen and (-webkit-min-device-pixel-ratio:0) { #foo { } }
- Opera
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #foo { } }

**************************************************** */.

Publié le 19 février 2009

Sébastien
Les hack CSS sont à éviter car ce n'est pas standard et par conséquent invalide W3C. Il est tout à fait possible de faire sans, tout en restant compatible avec les différents navigateurs du marché. L'utilisation des hacks révèle la plupart du temps une mauvaise connaissance de CSS
Julien Lafont
Petit ajout concernant Firefox: /* Firefox 2 */. Foo, x: -moz-any-link { } /* Firefox 3 */. Foo, x: -moz-any-link, x: default { } /* Firefox 3 seulement */ html>/**/body. Foo, x: -moz-any-link, x: default { }
Contribution précédente Contribution suivante
20 contributions : 1 2 3 4 5 6 7 8 9 10 11 12 13 ... 20
 




 

RECHERCHE