I. Présentation

Ca fait bien longtemps que je n’avais pas fait de tutoriels en rapport avec le web, et encore plus longtemps pour vous parler de CSS. Mais comme c’est aussi un domaine qui me plaît, je me dois de partager des petites astuces avec vous.

Par l’intermédiaire de CSS3, vous pouvez personnaliser la couleur de sélection du texte pour votre site web, pour remplacer la couleur par défaut du navigateur. Ceci s’effectue par l’intermédiaire du sélecteur ::selection que nous allons découvrir ensemble.

II. CSS3 et ::selection

En fait, le sélecteur ::selection n’est pas le seul qui peut-être utilisé puisque ça dépend du moteur de rendu intégré à votre navigateur. Comme bien souvent en CSS, pour une même modification il faudra utiliser plusieurs sélecteurs pour que ce soit aussi joli sur un navigateur que sur un autre.

Dans tous les cas, et ils se sont au moins mis d’accord sur ça, les deux seuls propriétés supportées sont « color » et « background » pour gérer la couleur du texte lorsque l’on effectue une sélection ainsi que l’arrière-plan, qui sera la couleur de surlignage du texte.

Voici un exemple de code…

– Pour WebKit (utilisé par Chrome et Safari, par exemple) :

::selection {
 color: #fff;
 background: #0091C7;
 }

– Pour Gecko (utilisé par Mozilla Firefox, par exemple) :

::-moz-selection {
 color: #fff;
 background: #0091C7;
 }

Ce qui permettra d’obtenir un résultat comme ceci lorsque l’on sélectionne du texte sur la page concernée par ce style CSS :

A vous de jouer maintenant