Stylisation de texte avec l'API CSS Custom Highlight

L’API CSS Custom Highlight résout un problème fondamental : comment surligner des plages de texte par programmation sans encombrer le DOM avec des éléments d’encapsulation. Que vous développiez des interfaces de recherche, des éditeurs de texte ou des applications éducatives, cette API offre une approche plus propre et plus performante que les méthodes traditionnelles basées sur <mark> ou des spans.

Ce qui rend l’API CSS Custom Highlight différente

Le surlignage de texte traditionnel nécessite de modifier la structure du DOM. L’utilisation d’éléments <mark> ou de spans implique l’insertion de nœuds, déclenchant des recalculs de mise en page et la gestion d’un HTML complexe lorsque les surlignes s’étendent sur plusieurs éléments. L’API CSS Custom Highlight élimine ces problèmes en travaillant avec des plages JavaScript et le pseudo-élément ::highlight, gardant votre DOM intact.

L’API se compose de trois composants principaux :

• Les objets Range qui définissent les limites du texte
• Les objets Highlight qui regroupent les plages
• Le registre CSS.highlights qui connecte les surlignes aux styles

Création et stylisation des plages de texte

Construction de votre première surligne

Commencez par créer un objet Range pour définir quel texte surligner :

const range = new Range();
const textNode = document.querySelector('p').firstChild;
range.setStart(textNode, 0);
range.setEnd(textNode, 20);

Ensuite, créez un objet Highlight et enregistrez-le :

const highlight = new Highlight(range);
CSS.highlights.set('my-highlight', highlight);

Enfin, stylisez-le avec le pseudo-élément ::highlight :

::highlight(my-highlight) {
  background-color: yellow;
  color: black;
}

Implémentation du surlignage des résultats de recherche

Voici un exemple pratique pour surligner les résultats de recherche dans votre document :

function highlightSearchResults(searchTerm) {
  // Effacer les surlignes existantes
  CSS.highlights.delete('search-results');
  
  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT
  );
  
  const ranges = [];
  let node;
  
  while (node = walker.nextNode()) {
    const text = node.textContent;
    const regex = new RegExp(searchTerm, 'gi');
    let match;
    
    while (match = regex.exec(text)) {
      const range = new Range();
      range.setStart(node, match.index);
      range.setEnd(node, match.index + searchTerm.length);
      ranges.push(range);
    }
  }
  
  if (ranges.length > 0) {
    const searchHighlight = new Highlight(...ranges);
    CSS.highlights.set('search-results', searchHighlight);
  }
}

Modèles avancés : Surlignes multi-plages

La véritable puissance émerge lors du travail avec plusieurs plages de texte non contiguës. Un seul objet Highlight peut contenir plusieurs objets Range :

// Surligner plusieurs paragraphes séparés
const range1 = new Range();
range1.selectNodeContents(document.querySelector('#intro'));

const range2 = new Range();
range2.selectNodeContents(document.querySelector('#conclusion'));

const highlight = new Highlight(range1, range2);
CSS.highlights.set('important-sections', highlight);

Vous pouvez également gérer plusieurs groupes de surlignes simultanément :

// Différents types de surlignes avec des styles distincts
CSS.highlights.set('errors', new Highlight(...errorRanges));
CSS.highlights.set('warnings', new Highlight(...warningRanges));
CSS.highlights.set('info', new Highlight(...infoRanges));

::highlight(errors) {
  background-color: #fee;
  text-decoration: wavy underline red;
}

::highlight(warnings) {
  background-color: #ffa;
}

::highlight(info) {
  background-color: #e6f3ff;
}

Avantages en termes de performances et support navigateur

L’API CSS Custom Highlight excelle dans les scénarios critiques en termes de performances. Contrairement à la manipulation du DOM, les surlignes ne déclenchent pas de recalculs de mise en page ni ne créent de surcharge mémoire à partir d’éléments supplémentaires. Le moteur de rendu du navigateur gère les surlignes au niveau de la couche de peinture, rendant les mises à jour remarquablement rapides.

En 2025, Chrome, Edge et Safari prennent en charge l’API, avec le support Firefox en cours de développement. Pour les navigateurs plus anciens, implémentez une solution de repli avec détection de fonctionnalité :

if ('CSS' in window && 'highlights' in CSS) {
  // Utiliser l'API Custom Highlight
  const highlight = new Highlight(range);
  CSS.highlights.set('fallback-safe', highlight);
} else {
  // Solution de repli vers l'approche traditionnelle
  const span = document.createElement('span');
  span.className = 'highlight';
  range.surroundContents(span);
}

Conseils d’implémentation pratiques

Lors de l’implémentation du surlignage de texte en production :

1. Nettoyez les surlignes inutilisées pour éviter les fuites mémoire :

   CSS.highlights.delete('old-highlight');

2. Gérez le contenu dynamique en mettant à jour les plages lorsque le DOM change :

   highlight.add(newRange);
   highlight.delete(oldRange);

3. Utilisez des noms de surlignes significatifs qui décrivent leur objectif (par exemple, ‘search-results’, ‘spell-check’, ‘user-annotations’)

Conclusion

L’API CSS Custom Highlight transforme notre approche du surlignage de texte sur le web. En séparant la logique de surlignage de la structure DOM, elle offre de meilleures performances, un code plus propre et plus de flexibilité que les méthodes traditionnelles. Commencez à expérimenter avec le surlignage de plages de texte dans votre prochain projet—vos utilisateurs (et votre DOM) vous en remercieront.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..