::highlight() - Sélecteur CSS

::highlight()

Résumé des caractéristiques du sélecteur ::highlight()

Description rapide
Pseudo-élément qui cible le texte sélectionné à la suite d'une recherche dans le navigateur.
Statut
Standard
Module W3C
Module CSS - Pseudo-éléments
Références (W3C)
Statut du document: WD (document de travail)

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.

Colonne 1
Support par les navigateurs du pseudo-élément ::highlight qui cible les textes mis en valeur par Javascript.

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.
91%

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

Opéra

Safari

1

Safari sur IOS

1

Samsung Internet

Chrome

Edge

Firefox

2

Androïd Brower

Firefox pour Androïd

2

Chrome pour Androïd

KaiOS Browser

Opéra mini

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

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

Voir aussi...

    :autofill
    Pseudo-classe désignant les éléments de saisie dont le contenu a été renseigné automatiquement par le navigateur.
    ⚠
    :blank
    Pseudo classe désignant les zones de saisie vides.
    :checked
    Pseudo-classe désignant les cases à cocher (ou boutons radio) qui sont cochés, ainsi que les éléments de menu sélectionnés.
    ⚠
    :closed
    Pseudo-classe ciblant un élément pouvant être soit ouvert, soit fermé (comme un menu select), et qui se trouve dans l'état fermé.
    :default
    Pseudo-classe désignant les cases à cocher et boutons radio qui sont cochés par défaut.
    :disabled
    Pseudo-classe désignant les zones de saisie veerrouillées.
    :enabled
    Pseudo-classe désignant les zones de saisies non verrouillées.
    :in-range
    Pseudo-classe désignant les zones de saisie dont la valeur est dans la fourchette autorisée.
    :indeterminate
    Pseudo classe désignant les zones de saisie dont la valeur est indéterminée.
    :invalid
    Pseudo classe désignant les zones de saisie contenant une information invalide.
    ⚠
    :open
    Pseudo-classe ciblant les éléments pouvant être soit ouverts, soit fermés (comme select), et qui se trouvent dans l'état ouvert.
    :optional
    Pseudo élément désignant les zones de saisie non obligatoires.
    :out-of-range
    Pseudo-classe désignant les zones de saisie dont la valeur est en dehors de la plage autorisée.
    :placeholder-shown
    Pseudo-classe désignant les zones de saisie comportant un texte d'aide.
    :read-only
    Pseudo-classe désignant les zones de saisie en lecture seule.
    :read-write
    Pseudo-classe désignant les zones de saisie en lecture écriture.
    :required
    Pseudo-classe désignant les zones de saisie obligatoires.
    :user-invalid
    Pseudo-classe désignant les zones de saisie dont la valeur est invalide.
    :user-valid
    Pseudo-classe désignant les zones de saisie dont la valeur est valide.
    :valid
    Pseudo-classe désignant les zones de saisie contenant une information valide.