Intégration web

Navigateurs «modernes» vs «actuels»

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;
}
Publié le par Bruno Bichet