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 !

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



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