::highlight()
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Le pseudo-élément CSS ::highlight() applique des styles à une mise en évidence personnalisée.
Une mise en évidence personnalisée est une collection d'objets Range et est enregistrée sur une page Web à l'aide de HighlightRegistry.
Le pseudo-élément ::highlight() suit un modèle d'héritage spécial commun à tous les pseudo-éléments de mise en évidence. Pour plus de détails sur le fonctionnement de cet héritage, consultez la section Héritage des pseudo-éléments mise en évidence.
Propriétés autorisées
Seules certaines propriétés CSS peuvent être utilisées avec ::highlight() :
colorbackground-colortext-decorationet ses propriétés associéestext-shadow-webkit-text-stroke-color,-webkit-text-fill-coloret-webkit-text-stroke-width
En particulier, background-image est ignoré.
Syntaxe
css
::highlight(nom-de-mise-en-evidence-personnalisee) Exemples
Mise en évidence des caractères
HTML
html
<p id="rainbow-text"> API CSS personnalisée pour la mise en évidence arc-en-ciel </p> CSS
css
#rainbow-text { font-family: monospace; font-size: 1.5rem; } ::highlight(rainbow-color-1) { color: violet; text-decoration: underline; } ::highlight(rainbow-color-2) { color: purple; text-decoration: underline; } ::highlight(rainbow-color-3) { color: blue; text-decoration: underline; } ::highlight(rainbow-color-4) { color: green; text-decoration: underline; } ::highlight(rainbow-color-5) { color: yellow; text-decoration: underline; } ::highlight(rainbow-color-6) { color: orange; text-decoration: underline; } ::highlight(rainbow-color-7) { color: red; text-decoration: underline; } JavaScript
js
const textNode = document.getElementById("rainbow-text").firstChild; if (!CSS.highlights) { textNode.textContent = "L'API CSS Custom Highlight n'est pas prise en charge dans ce" + "navigateur !"; } // Créez et enregistrez des surlignages pour chaque couleur de l'arc-en-ciel. const highlights = []; for (let i = 0; i < 7; i++) { // Créez un nouveau surlignage pour cette couleur. const colorHighlight = new Highlight(); highlights.push(colorHighlight); // Enregistrez ce surlignage sous un nom personnalisé. CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight); } // Itérer sur le texte, caractère par caractère. for (let i = 0; i < textNode.textContent.length; i++) { // Créez un nouveau champ juste pour ce caractère. const range = new Range(); range.setStart(textNode, i); range.setEnd(textNode, i + 1); // Ajoutez le champ au surlignage disponible suivant, // en revenant au premier une fois que nous avons atteint le 7ème. highlights[i % 7].add(range); } Résultat
Spécifications
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # custom-highlight-pseudo |
| CSS Pseudo-Elements Module Level 4 # selectordef-highlight-custom-ident |
Compatibilité des navigateurs
Voir aussi
- Le module CSS de Mise en évidence personnalisée
- L'API CSS de mise en évidence personnalisée
- Le module de pseudo-éléments CSS