Webdesign

Accueil Actualités Webdesign ::SELECTION, LA PROPRIÉTÉ CSS QUI FAIT LA DIFF

::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)

 ::SELECTION, LA PROPRIÉTÉ CSS QUI FAIT LA DIFF

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;
}

 

Publié le 15/09/2021

Voir aussi...

Réalisations & projets
Webdesign
Communication
Référencement
Développement
Sécurité
Mes p'tites news

Archives :

Dans la même rubrique

Dans toutes les actualités

clarisse-b.net © 2024 | Mentions légales