Modifications de l'héritage pour le style de sélection CSS

Stephen Chenney

Publié le 8 octobre 2024

À partir de Chrome 131, l'héritage de la mise en surbrillance CSS change pour les pseudo-classes ::selection et ::target-text. Il s'agit de créer un modèle d'héritage plus intuitif et de s'aligner sur les pseudo-classes ::highlight, ::spelling-error et ::grammar-error récemment ajoutées. Ce message explique le changement, qui ne devrait pas ont un impact visible sur la plupart des sites.

Style de sélection

Appliquer un style au texte sélectionné peut transmettre du sens aux utilisateurs, comme le l'objectif du contenu sélectionné ou l'impossibilité de le sélectionner. Par exemple, GitHub colore le code sélectionné différemment de la structure de répertoire sélectionnée.

Le CSS prend en charge le style de sélection avec la propriété ::selection pseudo-élément, qui fait partie d'un ensemble de pseudo-éléments appelés mettre en surbrillance les pseudo-éléments. Ces pseudo-éléments contrôlent la façon dont le texte apparaît sous différents utilisateurs, navigateur ou à des actions basées sur un script. En plus de la sélection, vous pouvez appliquer un style à l'orthographe erreurs (::spelling-error), erreurs grammaticales (::grammar-error), texte intégré à une URL cibles (::target-text) et les temps forts générés par le script (::highlight).

Comme pour toute collection de propriétés CSS, le comportement d'héritage est un élément important à prendre en compte lors de la conception d'un site. En général, les développeurs s'attendent à ce que les propriétés CSS soient héritées via l'arborescence des éléments DOM (par exemple, font) ou pas du tout (par exemple, background).

Modifications apportées au comportement de sélection dans Chrome 131

Prenons l'exemple suivant :

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

Les déclarations de style du fragment modifient la couleur du texte sélectionné. une règle correspondant à tous les éléments et une autre à ceux de la classe "blue". Lorsque cette option est sélectionnée dans Chrome 130 ou dans une version antérieure, le résultat est le suivant:

Lorsque cette option est sélectionnée dans Chrome 131, le résultat est le suivant :

Qu'est-ce qui a changé ? Le comportement d'héritage des propriétés de sélection a toujours été implémenté via l'héritage de l'élément d'origine, où la sélection utilise les propriétés d'un ::selection correspondant à l'élément sélectionné. Les versions 130 et antérieures de Chrome utilisent ce modèle, dans lequel le texte mis en avant n'a pas de ::selection correspondant, car .blue::selection ne correspond qu'aux éléments de la classe "blue", qui ne sont pas présents dans l'élément <em>.

Chrome 131 active un nouveau comportement selon lequel les éléments héritent du comportement de sélection de leurs parents. Dans l'exemple précédent, l'élément <em> n'a pas de ::selection correspondant à lui-même. Il hérite donc des couleurs de sélection de l'élément <p>. C'est C'est ce que l'on appelle l'héritage des mises en surbrillance CSS. Vous pouvez l'essayer précédemment versions de Chrome en activant les fonctionnalités expérimentales de la plate-forme Web dans chrome://flags

Les sites qui reposent sur des propriétés de sélection qui ne sont pas héritées verront probablement des changements dans l'apparence du texte sélectionné, mais les rapports de bugs suggèrent qu'il existe peu de cas d'utilisation pour ce comportement.

Les propriétés CSS personnalisées pour la sélection continuent de fonctionner

De nombreux sites simulent l'héritage des surlignages CSS à l'aide de propriétés CSS personnalisées. Les propriétés personnalisées sont héritées via l'arborescence des éléments, ce qui donne le résultat "hériter du parent" avec un extrait de code comme celui-ci :

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

Voici le résultat lorsque cette option est sélectionnée dans Chrome 130 et 131:

Ici, chaque élément hérite d'une valeur pour la propriété --selection-color via l'arborescence des éléments, et cette couleur est utilisée lorsque le texte est sélectionné. Les éléments de la classe .blue et leurs descendants sont bleus lorsqu'ils sont sélectionnés, et les autres éléments sont vert clair. De nombreux sites utilisent cette technique, qui est la méthode recommandée sur Stack Overflow.

Pour maintenir la compatibilité, le modèle d'héritage de la mise en surbrillance CSS spécifie que ::selection (et d'autres pseudo-éléments de mise en surbrillance CSS) héritent de la propriété personnalisée des valeurs de leur élément d'origine (l'élément auquel elles sont appliquées ). Les sites qui utilisent cette méthode ne devraient pas être affectés par les modifications apportées dans Chrome 131.

Les propriétés personnalisées définies sur le pseudo-élément ::selection lui-même sont ignorées. pour éviter des comportements d'héritage concurrents. Vous devez définir les propriétés sur l'élément lui-même, puis les référencer dans le pseudo-élément.

Sélecteurs universels pour ::selection : désactivation de l'héritage des surbrillances

Les sites qui n'utilisent pas de propriétés CSS personnalisées utilisaient peut-être un sélecteur universel pour définir la couleur du texte sélectionné. Par exemple, comme le code CSS suivant :

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Ce résultat est obtenu lorsque cette option est sélectionnée à la fois dans Chrome 130 (et versions antérieures) et dans Chrome 131 (et versions ultérieures):

L'héritage de la mise en surbrillance CSS n'entraîne pas l'héritage du bleu du parent par le deuxième texte mis en avant, car le sélecteur universel correspond à l'élément <em> et applique la couleur de surbrillance universelle, le vert clair.

Pour profiter des avantages de l'héritage de la mise en surbrillance CSS, modifiez le sélecteur universel pour correspondre uniquement à la racine, qui sera ensuite héritée par ses descendants:

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

Le résultat dans Chrome 131 se présente comme suit:

Si votre site modifie les couleurs de sélection mais n'utilise pas de propriétés personnalisées, il est vous disposez probablement d'un sélecteur universel pour le pseudo ::selection. Les bonnes est que ce changement n'affectera pas votre site, passer à côté de tout avantage ergonomique comme l'héritage de mise en évidence.

Le style de ::target-text change également

Tous les comportements et modifications décrits ici s'appliquent au pseudo-élément ::target-text comme à ::selection. Les cas d'utilisation de plusieurs la mise en forme du texte cible sur un seul site sont limitées et cette fonctionnalité est assez récente. Il est donc peu probable que votre site change de comportement en ::target-text.

Pourquoi ce changement ?

Lorsque les autres pseudo-éléments de surbrillance étaient en cours de développement, le groupe de travail CSS a décidé d'implémenter l'héritage avec le modèle d'héritage de surbrillance. C'était déjà la méthode dans la spécification du pseudo-élément ::selection, mais les navigateurs ne l'ont pas implémentée. Les pseudo-éléments de non-sélection utilisent l'héritage de la mise en surbrillance, où le pseudo-élément est hérité comme s'il s'agissait d'une propriété. Autrement dit, les éléments héritent des pseudo-éléments de surlignage de leur parent de document.

Pour assurer la cohérence entre tous les pseudos de mise en surbrillance, le CSS Le groupe a de nouveau pris en charge l'héritage de la mise en surbrillance pour ::selection. les navigateurs s'efforcent de lancer le nouveau comportement, tout en essayant de ne pas entraver des sites existants.

Essayer

Le CodePen suivant illustre les modifications. Essayez-le dans Chrome 131.