Modifier la couleur de sélection du texte en CSS3
Sommaire
I. Présentation
Ça 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 seules 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 😉
Personnalisation avec CSS sur WordPress : comment faire ?
Que vous décidiez de développer votre site Internet vous-même ou à l'aide d'un CMS tel que WordPress, qui est le plus célèbre d'entre eux, l'utilisation des feuilles de style CSS est indispensable pour personnaliser l'apparence de son site. L'exemple évoqué dans cet article n'en est qu'un parmi tant d'autres puisque le CSS va permettre de modifier l'apparence du site dans son ensemble : le texte, les titres, mais aussi les blocs présents dans la page de manière générale.
Si vous utilisez WordPress, il est recommandé de passer par l'utilisation d'un thème enfant pour personnaliser les feuilles de style CSS. Cela permet de créer une déclinaison de votre thème source. L'avantage c'est qu'à chaque mise à jour du thème d'origine, vous ne perdez pas vos modifications : bon à savoir.
Pour obtenir plus d'informations sur la personnalisation d'un site WordPress ou le développement pur de fonctionnalités supplémentaires pour WordPress, il y a une solution : contacter une agence de développement spécialisée dans les sites WordPress. En voici un exemple : source
