Sunfox

Le journal de Sunny Ripert


CSS de Sélection

Encore une nouveautée sur sunfox, celle du CSS de Sélection.

En effet, un petit morceau de CSS permet de définir, dans certains navigateurs, l’aspect qu’aura le texte surligné sur la page !

Allez-y vous pouvez essayer de surligner cette phrase dans firefox ou Safari. Et là, merveille, ce n’est plus la couleur par défaut de fond et de texte de votre OS, mais du blanc sur rouge…

Le Code

J’ai rencontré ce code css par une agréable surprise sur le site de Anne Van Kesteren. Voici celui que j’utilise sur cette page :

::-moz-selection {
  background: red}
::selection {
  background: red}

Certes c’est redondant mais on en est pas encore à l’époque des navigateurs tous compliants au CSS3, non ?

Vous pouvez insérer celui-ci dans la feuille de style de votre site bien sûr, ou bien encore, pour les navigateurs qui le permettent, l’insérer dans votre feuille de style personnelle et l’appliquer à tous les sites par défaut !

Articles probablement reliés

6 Commentaires

  1. 1 hima :

    c’est joli, mais pas autant que ta nouvelle favicon :D

  2. 2 Sunny :

    Ce renard là ? :p

  3. 3 docLegi :

    Intéressant, ça m’a intrigué donc j’ai fait une petite recherche :
    ::selection fait partie de CSS 3, et ne fait donc pas encore partie des recommendations du W3C (le module Selectors est au rang de Candidate Recommendation). Il n’y a donc encore aucun navigateur qui ne le supporte.
    Ce joli effet ne fonctionne donc que sous mozilla, grâce au sélecteur propriétaire ::-moz-selection (toute propriété commençant par un tiret (-) sera ignoré par un navigateur ne le connaissant pas (et donc par le validateur), permettant ainsi les « petits plus » dans les navigateurs, sans problèmes de compatibilité). Chouette effet donc, dans la lignée de MOSe :))

  4. 4 Sunny :

    C’est donc interessant ici d’inserer du CSS 3 tout de même car celui sera ammené à être supporté, et peut-être pas dans si longtemps que ça !

    Ça apporte son côté « officiel » et non pas centré sur mozilla (bien que le résultat soit le même).

  5. 5 docLegi :

    oui c’est clair, c’était juste pour la petite histoire ;)

  6. 6 Sunny :

    Il semblerait que Safari 1.0, OmniWeb 4.5, MSN Mac OS X et Konqueror supportent le ::selection du CSS3.
    Quelqu’un peut confirmer ?

Commenter


Vous pouvez avoir une jolie icône vous aussi en créant un gravatar.

Vous pouvez y saupoudrer de l'HTML5 avec les balises et suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>.


:D Sunny Ripert

est un développeur web vivant à Paris.

CV, me contacter


Textes et contenus sous licence Creative Commons.
Site crée par mes soins et propulsé par WordPress.