🍫 👨🏿‍🎨 👩🏿‍🤝‍👨🏼 Sélection et CSS 🕴️ 🏔️ 👩🏻‍⚕️

L'habileté de mettre en évidence du texte et d'autres objets a été formée parmi les utilisateurs d'ordinateurs il y a de nombreuses années. Nous mettons en évidence le contenu des pages Web pour diverses raisons. Peut-être que vous devez copier le texte et le citer quelque part, peut-être - il est tout simplement plus facile pour quelqu'un de lire le texte, en mettant en évidence ses fragments. Sur les appareils mobiles, cependant, mettre en évidence quelque chose de plus difficile. Par exemple, cela m'agace. Je n'aime pas mettre en évidence le contenu des pages Web sur le téléphone. Cette opération semble être en quelque sorte «fausse». Dans cet article, je vais parler de tout ce que vous devez savoir sur le style des sélections avec CSS. En particulier, nous parlerons du pseudo-élément et de la propriété

::selectionuser-select. Cet article vise à montrer à tous ceux qui souhaitent que CSS travaille avec des sélections et comment utiliser différentes méthodes pour travailler avec des sélections.

Les bases

Sur MDN, vous pouvez apprendre qu'un pseudo-élément vous ::selectionpermet d'appliquer des styles aux parties d'un document qui ont été sélectionnées par l'utilisateur (par exemple, à l'aide de la souris).

Pour l'utiliser, il ::selectionsuffit d'utiliser la construction suivante:

p::selection {
   color: #fff;
   background-color: #000; 
}

Texte sélectionné.

Voici un exemple avec lequel vous pouvez expérimenter.

Propriétés prises en charge :: sélection

Il convient de noter que le pseudo-élément ::selectionprend uniquement en charge les propriétés color, backgroundet text-shadow.

Personnalisez vos propres effets de sélection

Et si nous devons rendre la sélection spéciale? Par exemple, pour que la sélection ait une certaine hauteur ou un arrière-plan intéressant? Jetez un œil à la figure suivante.

Un exemple d'une sélection spéciale de sélection

Ceci est possible, même si cela nécessitera un certain effort. Voici comment s'effectue la sélection ci-dessus:

Un pseudo-élément est ajouté, avec le même texte que nous sélectionnons. Ensuite, le pseudo-élément est défini sur une propriété height: 50%et une couleur d'arrière-plan blanc.
Le pseudo-élément est situé au-dessus du texte source.

Si vous sélectionnez maintenant le texte, le pseudo-élément chevauchera 50% du texte verticalement. Cela nous permet de simuler l'effet dont nous avons besoin.

p {
  position: relative;
  color: #fff;
}

p:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #fff;
}

p::selection {
  background: rgba(76, 125, 225, 0.18);
}

J'ai découvert cette technique ici .

Une autre option pour cette sélection est présentée ci-dessous. Ici, au lieu d'une sélection solide, j'ai implémenté la sélection en tant que dégradé CSS. Le point ici est d'utiliser un dégradé blanc avec une hauteur de 50% et de remplir l'élément une fois avec l'image d'arrière-plan en utilisant la valeur no-repeatlors de la définition de la propriété background.

h1:after {
  content: attr(data-content);
  position: absolute;
  color: #000;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}

La figure suivante illustre cette technique.

Mise en œuvre de la mise en évidence des dégradés

J'espère que j'ai pu expliquer clairement cette idée. Voici un exemple de travail.

Animation de la sélection

En travaillant sur l'exemple précédent, j'ai posé la question suivante: "Est-il réaliste d'animer la sélection?". Par exemple, dans le processus de sélection de texte, la hauteur de la sélection est de 50%. Et lorsque le pointeur de la souris est déplacé sur le côté, la hauteur de la sélection augmente à 80%. Comment faire? Mais comme ça:

p {
    transition: background 0.3s ease-out;
}

p:hover:after {
  background-size: 100% 80%;
}

Texte dans le processus de sélection

Texte une fois la sélection terminée

Voici une vidéo qui montre la sélection animée.

Texte multiligne

La technique d'ajustement de sélection ci-dessus, malheureusement, n'est pas adaptée au texte multiligne. Pour, néanmoins, implémenter quelque chose de similaire pour un tel texte, vous devez recourir aux capacités de JavaScript et placer chaque mot dans un élément en ligne (en minuscules), par exemple, dans <span>. Après que chaque mot apparaisse dans son propre élément <span>, un pseudo-élément doit être ajouté à chacun de ces éléments. Et après cela, l'effet décrit ci-dessus peut être appliqué au texte multiligne.

Voici un script pour mettre chaque mot dans un <span>conteneur:

let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");

paragraph.innerHTML = "";

words.forEach(function (word) {
  let wordItem = document.createElement("span");
  wordItem.setAttribute("data-word", word);
  wordItem.innerHTML = word + " ";
  paragraph.appendChild(wordItem);
});

Après cela, les éléments <span>doivent être stylisés. Ensuite, à chacun d'eux, vous devez ajouter un pseudo-élément:

span {
    position: relative;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  span::after {
    content: attr(data-word);
    position: absolute;
    left: 0;
    right: 0;
    top: -0.28em;
    height: 75%;
    padding-top: 0.14em;
    background: #fff;
    pointer-events: none;
  }

  span::selection {
    background: rgba(#4C7DE1, 0.18);
  }

Si vous regardez cette conception dans la pratique, il s'avère que cela fonctionne, mais pas tout à fait comme vous pouvez vous y attendre. Un exemple de surlignage de texte sur plusieurs lignes est illustré ci-dessous. Vous remarquerez peut-être que la sélection semble inégale.

Sélection inhomogène

Je dirais qu'une telle sélection multi-lignes n'est pas très bonne et qu'elle ne doit pas être utilisée à l'échelle mondiale. Peut-être ne devrait-il être utilisé que, par exemple, pour organiser la sélection d'un paragraphe particulier.

Ici, avec une telle sélection, vous pouvez expérimenter.

Utilisation créative :: sélection et text-shadow

Étant donné que l'une des propriétés prises en charge par le pseudo-élément ::selectionest text-shadowque nous pouvons essayer d'obtenir des effets intéressants en utilisant quelques ombres du texte. Nous explorons les possibilités que cette idée ouvre devant nous.

▍ Mettez en surbrillance avec de longues ombres

Le texte sélectionné projette de longues ombres.

Voici comment implémenter cet effet:

p::selection {
    color: #444444;
    background: #ffffff;
    text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}

▍ Effet de texte de contour

Le texte sélectionné devient contour

Cette idée que j'ai trouvée dans cet article. Nous parlons du fait qu'en utilisant la propriété,text-shadowvous pouvez simuler l'effet du texte du plan.

p::selection {
    color: #fff;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

▍ Effet flou

Le texte sélectionné est flou.

Un autre effet intéressant qui peut être appliqué au texte sélectionné est de rendre le texte flou. L'essentiel est d'utiliser la propriété lors de la définition de la couleur du textecolor: transparent. Les ombres définies avec l'aidetext-shadowne disparaîtront nulle part, ce qui donnera l'effet souhaité.

p::selection {
  color: transparent;
  text-shadow: 0 0 3px #fff;
}

Je suis sûr que vous pourrez vous-même proposer de nombreux autres exemples de text-shadowsélections de style. Cette propriété nous offre des possibilités illimitées.

▍ Textes d'ombre et performance

Il n'est pas recommandé d'utiliser des styles trop complexes lors de la personnalisation text-shadow. Le fait est qu'un enthousiasme excessif pour cette propriété entraîne des problèmes de performances. Voici une vidéo montrant un exemple de ces problèmes.

Utilisation de styles très sophistiqués pour personnaliser la sélection de texte

L'effet néon présenté ici est très complexe. Veuillez noter que lorsque ce texte est sélectionné, il y a un délai notable entre le moment où le texte est sélectionné et le moment où la stylisation est appliquée. De plus, faites attention au fait que ce qui ne doit pas apparaître en haut et à gauche. Par conséquent, je vous demande de l'utilisertext-shadowavec prudence.

Les éléments du formulaire se distinguent-ils?

Une réponse courte à la question dans le titre de cette section sonnera «oui». Il me semble que c'est faux: vous sélectionnez la page, mais il s'avère que le contenu à l'intérieur des champs de saisie est également mis en évidence. Voici à quoi ça ressemble.

Le contenu à l'intérieur des champs de saisie est mis en surbrillance.

Ici, le texte à l'intérieur du bouton peut également être sélectionné. Dans la section consacrée àuser-select, nous parlerons de l'opportunité ou non de permettre aux utilisateurs de mettre en évidence les formes des éléments.

Voici un exemple.

Examen de la propriété de sélection par l'utilisateur

La propriété user-selectnous permet de définir la possibilité de sélectionner un texte spécifique par l'utilisateur. Cette propriété peut être utile pour désactiver la possibilité de sélectionner du texte, ce qui peut être utile pour limiter la capacité de l'utilisateur à sélectionner des matériaux situés les uns à côté des autres. Voici une norme qui décrit user-select.

Cette propriété peut prendre les valeurs suivantes: none, auto, text, contain, all.

Cas d'utilisation sélectionnés par l'utilisateur

▍Texte et icône

Si l'élément a du texte et une icône - sous la forme d'un symbole ou d'une icône tirée d'une police, cette icône sera mise en surbrillance lorsque le texte sera sélectionné. Considérez l'exemple illustré dans la figure suivante.

Bouton avec texte et icône

Voici le code de ce bouton:

<button>Our Services<span aria-hidden="true">▼</span></button>

Lorsque vous sélectionnez cet élément, il ressemble à celui illustré ci-dessous.

Bouton dédié

Ceci est totalement inutile. Veuillez noter que le balisage utilise un attributaria-hiddenqui masque l'icône aux lecteurs d'écran. Afin de résoudre le problème de la mise en évidence de ce que vous n'avez pas besoin de mettre en évidence, nous pouvons utiliser le style suivant:

button span[aria-hidden="true"] {
    user-select: none;
}

Cela vous permet d'interdire la sélection de l'icône. Et, en même temps, nous lions l'interdiction de sélection à l'attribut aria-hidden. En conséquence, tout ce qui ne devrait pas se démarquer, très probablement, ne devrait pas être visible pour les lecteurs d'écran.

▍ Drapeaux

Ce comportement des drapeaux me dérange lorsque, en activant ou désactivant un drapeau, je sélectionne accidentellement le texte de sa description. Voici à quoi ça ressemble.

Le texte de la description de l'indicateur est sélectionné de manière aléatoire. Vous pouvez

résoudre ce problème en stylisant l'élément<label>comme suit:

label {
    user-select: none;
}

▍ Mettez en surbrillance tout le texte

La valeur allqu'une propriété peut prendre user-selectvous permet d'obtenir un effet intéressant. Si l'élément parent a cette propriété avec une telle valeur, alors tout le texte contenu dans un tel élément peut être sélectionné en un seul clic. Cela peut être utile pour travailler avec du contenu texte, qui doit être mis en surbrillance dans son intégralité. Par exemple, pour mettre en évidence des fragments de code disponibles sur une page:

.embed-code {
    user-select: all;
}

Un fragment de texte conçu dans un tel style peut être sélectionné en un seul clic.

des applications Web

L'application Web doit être perçue par l'utilisateur comme une véritable application. Est-il possible de sélectionner le texte du bouton dans les applications normales? Non vous ne pouvez pas. Il est important que les applications Web reflètent les fonctionnalités familières des applications normales, même si elles sont conçues en utilisant HTML et CSS.

Prenons quelques exemples tirés de la vie.

▍Slack

Dans Slack, vous pouvez mettre en surbrillance les étiquettes et les champs de saisie. Cependant, les textes des boutons ne sont pas mis en surbrillance.

Les légendes des boutons ne sont pas mises en surbrillance.

Voici un autre exemple.

La signature dans la barre de titre de la fenêtre modale est mise en évidence

. La date du chat ne peut pas être mise en évidence.

La date ne peut pas être attribuée

En général - il me semble étrange que dans l'application, vous pouvez sélectionner certains textes qui, semble-t-il, ne devraient pas prendre en charge la sélection. Il y a des endroits dans l'interface Slack où elle est utiliséeuser-select: none, mais il y en a moins que vous ne le pensez. Par exemple, pour moi, en tant qu'utilisateur, il n'y a aucun avantage à mettre en évidence le titre d'une fenêtre modale.

▍Notion

L'approche de la sélection des éléments implémentée dans Notion, j'aime plus. Cette application Web ressemble plus à une application réelle qu'à un site Web dont n'importe quelle partie peut être mise en évidence.

Ce qui ne doit pas ressortir ne ressort pas.

Aucun fragment de texte n'est mis en évidence sur cette image. C'est exactement ce que vous pouvez attendre d'une application.

Ne pas utiliser la désactivation de la sélection globale

Il n'est pas recommandé de désactiver la sélection globalement. Lorsque vous utilisez la désactivation de la sélection, essayez de la désactiver uniquement pour les éléments pour lesquels cela n'a pas de sens. Pour ce faire, vous pouvez créer une classe d'assistance. Par exemple - ceci:

.disable-selection {
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

Mauvais modèle

Il y a un modèle UX que je n'aime pas vraiment. Il consiste à afficher un avertissement lors de la mise en évidence du texte. Cela agace et donne à l'utilisateur l'impression de vouloir contrôler son interaction avec le site. Un exemple de ce modèle est illustré ci-dessous.

Désactiver la mise en surbrillance avec l'affichage des notifications

Veuillez ne pas le faire.

Mettre en évidence les appareils mobiles

Il existe une propriété -webkit-touch-calloutpour iOS Safari qui devrait désactiver l'affichage de l'info-bulle standard affichée lorsque le texte est sélectionné. J'ai essayé d'utiliser cette propriété, mais cela ne fonctionne pas.

p {
    -webkit-touch-callout: none;
}

Les styles ::selectionne fonctionnent pas non plus.

Et la propriété user-select: nonefonctionne comme prévu.

J'ai essayé de trouver un véritable exemple illustrant ce problème. J'ai copié un morceau de texte de Wikipédia. En même temps, le texte qui m'était complètement inutile a été copié (listen). C'est énervant.

Avec le texte utile, il est copié et (écouter)

Au lieu de permettre à l'utilisateur de copier cette «écoute», il serait préférable d'ajouter un style à cet élémentuser-select: none. Par conséquent, lors de la copie de texte contenant cet élément, il ne sera pas copié.

Sommaire

Ici, nous avons examiné les méthodes de personnalisation de la mise en évidence des éléments de page Web à l'aide de CSS. Vous pourriez être intéressé à regarder ce matériel.

Chers lecteurs! Comment configurez-vous la sélection de texte dans vos projets?

Sélection et CSS