::highlight() - Sélecteur CSS

Pseudo-élément ::highlight() - Description

::highlight() cible le texte mis en évidence par Javascript avec la librairie CSS Custom Highlight API. Cette librairie permet de sélectionner des parties de texte n'importe où sur la page.

L'opération nécessite plusieurs étapes :

• Créer un ou des objets Range qui délimitent chacun une portion de texte à mettre en évidence.
• Grouper ces objets dans un objet Highlight.
• Associer cet objet à un identifiant utilisable en CSS.
• Utiliser ::highlight() avec cet identifiant pour cibler les textes.

Peu de propriétés peuvent s'appliquer à ::highlight() :

• La couleur du texte.
• La couleur de l'arrière-plan.
• text-decoration et les propriétés détaillées. ⚠
• L'ombrage du texte (text-shadow). ⚠

L'exemple ci-dessous recherche le mot saisi parmi le texte de la section description de cette page. Il est d'bord recherché sans tenir compte de la casse (identifié en bleu clair), puis en tenant compte de cette dernière (identifié en bleu).
Par rapport à une recherche classique, cela présente l'avantage de ne rechercher que dans les endroits voulus, et pas dans la table des matières par exemple. Et d'autre part, comme la recherche est effectuée en Javascript, on a toute liberté pour faire ce qu'on veut, ici distinguer les textes qui respectent la casse de ceux qui ne la respectent pas.

Pseudo-élément ::highlight() - Compatibilité des navigateurs.

Relativement récent, le pseudo-élément ::highlight() est maintenant bien reconnu par les navigateurs, à quelques exceptions près.

Remarques :

(1) Le pseudo élément ::highlight ne peut pas être utilisé avec text-decoration et text-shadow.

(2) Le pseudo-élément ::highlight est ignoré lorsqu'il est combiné avec user-select:none.

1

Pseudo-élément
::highlight

Estimation de la prise en charge globale.

93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Opéra

Safari

1

Safari sur IOS

1

Firefox

2

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

2

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Pseudo-élément ::highlight() - Historique.

• Module CSS - Pseudo-éléments - Niveau 4

  Concernant ::highlight() Introduction de pseudo-élément ::highlight.
  

  15 Janvier 2015

  Document de travail.

  

  

  

Voir aussi...

Quelques pseudo-éléments ciblent le résultat d'une recherche. Voici les principaux :