Ne cibler que les navigateurs modernes grâce aux sélecteurs avancés Quelques exemples pratiques

Expérimenter le modèle de boîte flexible CSS3 :

 

 #toto {  /* Pour tout le monde */ 
 display: block; 
 float: left; 
}  
:root #toto {  /* Pour les navigateurs modernes (CSS3 uniquement) */  
 display : -moz-box; 
 display : -webkit-box; 
 display : box; 
 float: none; 

 

Positionner à l'aide de table-cell :

Note : ce cas de figure est à méditer, car il pourrait être plus judicieux d'utiliser un commentaire conditionnel ciblant IE7 et inférieur.

 

 #toto { /* Pour tout le monde, dont IE6/IE7 */ 
 float: left; 
 width: 300px; 

:lang(fr) #toto { /* Pour les navigateurs modernes et IE8 */ 
 display: table-cell; 
 float: none; 
 width: auto; 

 

Positionner à l'aide de inline-block :

Note : ce cas de figure est à méditer, car il pourrait être plus judicieux d'utiliser un commentaire conditionnel ciblant IE8 et inférieur

 

:lang(fr) #toto { /* Pour les navigateurs modernes et IE8 */ 
 display: inline-block; 

#toto { /* Pour IE6/IE7 et les anciens navigateurs */ 
 display: inline; 
 zoom: 1;

 

Autour du même sujet