Navigateurs «modernes» vs «actuels»

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur 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;
}

Articles sur le même sujet

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.



4 commentaires pour “Navigateurs «modernes» vs «actuels»”

  1. Fred dit :

    Merci beaucoup pour la citation :)

  2. Laurent dit :

    Woaww, ca va faire beaucoup à lire tout ca ;-)

    Merci pour tous ces bons liens !

  3. C’est toujours un régal à lire ce petit journal ! Merci !

  4. Atalanta dit :

    Merci pour l’astuce de détection de navigateur moderne ;) Vivement le jour où nous n’en aurons plus besoin !



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site