INFOS & ACTUALITÉS

Projets en cours, réalisations à découvrir, actualités webdesign ou mes petites news... Bienvenue sur le blog

::selection, la propriété css qui fait la diff

Dans Blog > Communication

15
Sept
2021

::selection, la propriété css qui fait la diff

La qualité réside souvent dans les détails, en webdesign la propriété CSS de selection en est un bon exemple (parmi d'autres évidemment)

Je ne sais pas si vous faîtes ça aussi, mais il m'arrive régulièrement de sélectionner des mots ou phrases sur les sites internet lorsque je navigue. Cela me permet de surligner un mot sur une page et de pouvoir y revenir si j'ai tourné la tête 30 secondes ou bien de faire des copier-coller de mots ou de phrases...

... et parfois je sélectionne des trucs au hasard pendant que je bug ou que je suis au téléphone, BREF.

Un jour j'ai découvert avec surkiffance que la phrase que je venais de sélectionner était dans une autre couleur que ce bleu habituel que l'on retrouve tout le temps sous windows !

En effet, j'ai été ravie de découvrir que l'on pouvait, lorsque l'on créé un site internet, définir cette fameuse couleur - ou même appliquer d'autres styles sur le texte - , grâce à la propriété :

::selection

Je vous invite à sélectionner du texte sur mon site - et ça marche aussi sur mobile -  pour voir en effet la couleur que j'ai choisie afin de garder une cohérence dans le design.

On est d'accord, c'est du détail, mais c'est chouette, non ?

-------------------

Et si vous êtes en train de créer un site et que vous voulez appliquer cet effet, je vous donne ci-dessous le code qui vous rendra heureux ;)

Pour l'utiliser, très simple, dans votre fichier css, vous pouvez utiliser  ceci :

::selection {
/* par exemple */
  background#0b818b;
  color#FFF;
}

Qui aura pour effet de déterminer ce qu'il se passera si l'on sélectionne du texte sur votre site.

Evidemment, à adapter avec des sélecteurs, si vous souhaitez des effets différents selon les sections du site :

.footer::selection {
  background#0b818b;
  color#FFF;
}

Il vous faudra éventuellement ajouter le préfixe -moz- pour une meilleure compatibilité sur les navigateurs :

::-moz-selection {
  background#0b818b;
  color#FFF;
}
.footer ::-moz-selection
{
  background#fff;
  color#0b818b;
}

 

En ce moment...

21
Oct
2021
Les avis clients, de la vitamine pour votre activité
Visibilité, référencement, (e-)réputation... Les avis clients, un essentiel pour la communication de votre entreprise
Lire l'article
05
Oct
2021
Utilisation de photos, droits d'auteur et copyright trolling... Faisons le point
Vos devoirs et vos droits en matière d'utilisation de photos sur votre site ou pour votre communication
Lire l'article
15
Sept
2021
::selection, la propriété css qui fait la diff
La qualité réside souvent dans les détails, en webdesign la propriété CSS de selection en est un bon exemple (parmi d'autres évidemment)
Lire l'article

VOIR TOUTES LES ACTUS

clarisse-b.net © 2021 - mentions légales