Ne cibler que les navigateurs modernes grâce aux sélecteurs avancés — Astuce très intéressante de Raphaël Goetter pour cibler les navigateurs «modernes» ou les navigateurs «actuels». Les «modernes» sont les navigateurs qui prennent en charge les CSS3 ; les «actuels» (opposés à anciens) sont surtout Internet Explorer 7 et 8. Idéal pour mettre en oeuvre l’amélioration progressive sur votre site web.
J’étais sur la :root
Le pseudo-sélecteur :root permet de cibler les navigateurs modernes :
#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;
}
Ne gardez pas votre :lang() dans la poche
Pour cibler les navigateurs actuels :lang(fr) est notre amie. N’oubliez pas <html lang="fr"> pour que l’astuce fonctionne.
Exemple pour positionner un bloc à l’aide de table-cell :
#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;
}
Exemple pour positionner un bloc à l’aide de inline-block :
:lang(fr) #toto { /* Pour les navigateurs modernes et IE8 */
display: inline-block;
}
#toto { /* Pour IE6/IE7 et les anciens navigateurs */
display: inline;
zoom: 1;
}
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
Merci beaucoup pour la citation :)
Woaww, ca va faire beaucoup à lire tout ca ;-)
Merci pour tous ces bons liens !
C’est toujours un régal à lire ce petit journal ! Merci !
Merci pour l’astuce de détection de navigateur moderne ;) Vivement le jour où nous n’en aurons plus besoin !