API CSS Custom Highlight : Maîtriser le style de la sélection de texte

Le simple fait de sélectionner du texte sur une page web est une action que la plupart des utilisateurs effectuent sans y penser. Cependant, en tant que développeurs, nous cherchons souvent à améliorer même les interactions les plus subtiles. L'API CSS Custom Highlight nous permet de révolutionner l'expérience de sélection de texte, offrant un contrôle sans précédent sur l'apparence du texte sélectionné. Cette capacité va au-delà des simples changements de couleur de fond et de texte, permettant des interfaces utilisateur complexes et attrayantes.

Qu'est-ce que l'API CSS Custom Highlight ?

L'API CSS Custom Highlight est un standard web moderne qui offre un moyen de styliser l'apparence des sélections de texte (et d'autres plages surlignées) en utilisant CSS. Elle introduit le pseudo-élément ::highlight(), qui cible des plages de texte spécifiques basées sur des critères définis par le développeur. Cette API surmonte les limitations du pseudo-élément traditionnel ::selection, qui n'offre que des options de style très basiques. Avec l'API Custom Highlight, vous pouvez créer des styles de sélection de texte hautement personnalisés et contextuels.

Pourquoi utiliser l'API CSS Custom Highlight ?

L'API Custom Highlight offre plusieurs avantages par rapport aux méthodes traditionnelles de stylisation des sélections de texte :

• Expérience Utilisateur Améliorée : Créez des sélections de texte visuellement attrayantes et informatives qui guident les utilisateurs et améliorent la lisibilité.
• Style Contextuel : Appliquez différents styles en fonction du contenu du texte sélectionné, comme la mise en évidence d'extraits de code ou la mise en valeur de termes clés.
• Accessibilité Améliorée : Fournissez des indices visuels clairs pour le texte sélectionné, ce qui facilite la navigation dans le contenu pour les utilisateurs ayant une déficience visuelle.
• Apparence Personnalisable : Allez au-delà des simples changements de couleur de fond et de texte pour créer des styles de sélection de texte uniques et attrayants.
• Style Dynamique : Modifiez l'apparence des sélections de texte en fonction des interactions de l'utilisateur ou de l'état de l'application.

Comprendre les Concepts Clés

Avant de plonger dans les exemples de code, il est essentiel de comprendre les concepts fondamentaux de l'API CSS Custom Highlight :

1. Enregistrement du surlignage (Highlight Registration)

Le processus commence par l'enregistrement d'un nom de surlignage personnalisé en JavaScript. Ce nom sera ensuite utilisé en CSS pour cibler des sélections de texte spécifiques.

2. Plages de surlignage (Highlight Ranges)

Les plages de surlignage définissent les portions de texte spécifiques à styliser. Ces plages sont créées par programmation à l'aide des API Highlight et StaticRange ou Range. Elles spécifient les points de début et de fin du texte à surligner.

3. Le pseudo-élément ::highlight()

Ce pseudo-élément est utilisé en CSS pour appliquer des styles aux noms de surlignage enregistrés. Il agit comme un sélecteur, ciblant les portions de texte définies par les plages de surlignage.

Exemples Pratiques : Mettre en œuvre l'API CSS Custom Highlight

Explorons plusieurs exemples pratiques pour illustrer comment utiliser l'API CSS Custom Highlight.

Exemple 1 : Style de sélection de texte de base

Cet exemple montre comment changer la couleur de fond et de texte du texte sélectionné.

HTML :

            <p id="myText">Ceci est un texte qui peut être sélectionné.</p>
            

              
                Copy
              
            
          

JavaScript :

            const myText = document.getElementById('myText');
const highlight = new Highlight();

// Sélectionne l'ensemble du paragraphe.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);
            

              
                Copy
              
            
          

CSS :

            ::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}
            

              
                Copy
              
            
          

Explication :

• Le code JavaScript crée un objet Highlight et ajoute une plage qui couvre tout le paragraphe avec l'ID myText.
• La méthode CSS.highlights.set() enregistre le surlignage avec le nom 'myHighlight'.
• Le code CSS utilise le pseudo-élément ::highlight(myHighlight) pour styliser le texte sélectionné avec un fond jaune et une couleur de texte noire.

Exemple 2 : Surligner des mots spécifiques

Cet exemple montre comment surligner des mots spécifiques dans un paragraphe.

HTML :

            <p id="myText">Ceci est un paragraphe avec le mot surligner que nous voulons surligner.</p>
            

              
                Copy
              
            
          

JavaScript :

            const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['surligner'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);
            

              
                Copy
              
            
          

CSS :

            ::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}
            

              
                Copy
              
            
          

Explication :

• Le code JavaScript parcourt les mots du paragraphe et identifie les indices du mot "surligner".
• Pour chaque occurrence, il crée un objet Range et l'ajoute à l'objet Highlight.
• Le code CSS stylise les mots surlignés avec un fond vert clair et une police en gras.

Exemple 3 : Surlignage dynamique basé sur l'entrée utilisateur

Cet exemple montre comment surligner dynamiquement du texte en fonction de la saisie de l'utilisateur dans un champ de recherche.

HTML :

            <input type="text" id="searchInput" placeholder="Entrez le texte à surligner">
<p id="myText">Ceci est un texte qui sera surligné dynamiquement en fonction de l'entrée de l'utilisateur.</p>
            

              
                Copy
              
            
          

JavaScript :

            const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Effacer les surlignages précédents

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});
            

              
                Copy
              
            
          

CSS :

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

              
                Copy
              
            
          

Explication :

• Le code JavaScript écoute les changements dans le champ de recherche.
• Il efface tous les surlignages existants puis recherche le texte saisi dans le paragraphe.
• Pour chaque occurrence, il crée un objet Range et l'ajoute à l'objet Highlight.
• Le code CSS stylise le texte surligné dynamiquement avec un fond jaune et une couleur de texte noire.

Exemple 4 : Personnaliser l'apparence du surlignage avec ::highlight()

La puissance de l'API Custom Highlight réside dans sa capacité à personnaliser l'aspect et la convivialité du texte surligné. Voici comment vous pouvez appliquer des ombres, des dégradés et d'autres effets visuels.

HTML :

            <p id="customText">Sélectionnez ce texte pour voir un effet de surlignage personnalisé.</p>
            

              
                Copy
              
            
          

JavaScript :

            const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);
            

              
                Copy
              
            
          

CSS :

            ::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}
            

              
                Copy
              
            
          

Explication :

• Cet exemple applique un arrière-plan en dégradé linéaire, un texte blanc, une ombre de texte, des coins arrondis et un remplissage (padding) au texte surligné.
• Cela montre comment vous pouvez utiliser des propriétés CSS standard dans le pseudo-élément ::highlight() pour obtenir des styles de sélection visuellement attrayants et uniques.

Considérations sur l'accessibilité

Bien que l'amélioration de l'apparence visuelle des sélections de texte soit importante, l'accessibilité doit toujours être une préoccupation majeure. Voici quelques directives pour vous assurer que vos styles de surlignage personnalisés sont accessibles :

• Contraste des couleurs : Assurez-vous d'un contraste suffisant entre la couleur de fond et la couleur du texte surligné. Utilisez des outils comme le WebAIM Contrast Checker pour vérifier la conformité avec les normes d'accessibilité (WCAG).
• Indices visuels : Fournissez des indices visuels clairs pour le texte sélectionné. Évitez les changements de couleur subtils qui pourraient être difficiles à percevoir pour les utilisateurs ayant une déficience visuelle.
• Navigation au clavier : Assurez-vous que les styles de surlignage personnalisés n'interfèrent pas avec la navigation au clavier. Les utilisateurs doivent pouvoir sélectionner et parcourir facilement le texte à l'aide du clavier.
• Compatibilité avec les lecteurs d'écran : Testez vos styles de surlignage personnalisés avec des lecteurs d'écran pour vous assurer que le texte sélectionné est correctement annoncé.

Compatibilité des navigateurs

L'API CSS Custom Highlight est un standard web relativement nouveau, et la compatibilité des navigateurs peut varier. Fin 2023/début 2024, le support est en croissance mais pas universellement implémenté. Vous pouvez vérifier l'état actuel du support des navigateurs sur des sites comme "Can I use..." pour rester informé des mises à jour de compatibilité.

Envisagez d'utiliser la détection de fonctionnalités pour fournir des styles de secours pour les navigateurs qui ne prennent pas encore en charge l'API.

            if ('CSS' in window && 'highlights' in CSS) {
  // Utiliser l'API Custom Highlight
} else {
  // Fournir des styles de secours avec ::selection
}
            

              
                Copy
              
            
          

Cas d'utilisation concrets

L'API CSS Custom Highlight a de nombreuses applications concrètes, notamment :

• Éditeurs de code : Surligner les éléments de syntaxe, les erreurs et les avertissements dans les éditeurs de code.
• Plateformes d'e-learning : Mettre en valeur les concepts clés et les définitions dans les supports pédagogiques.
• Visionneuses de documents : Permettre aux utilisateurs de surligner et d'annoter du texte dans des documents.
• Résultats de recherche : Surligner les termes de recherche dans les résultats.
• Visualisation de données : Mettre en évidence des points de données ou des tendances spécifiques dans les graphiques et les diagrammes.

Meilleures pratiques et conseils

• Utilisez des noms de surlignage descriptifs : Choisissez des noms de surlignage qui indiquent clairement le but du surlignage.
• Effacez les surlignages lorsque nécessaire : N'oubliez pas d'effacer les surlignages lorsqu'ils ne sont plus nécessaires pour éviter des problèmes de style inattendus.
• Optimisez les performances : Évitez de créer un nombre excessif de plages de surlignage, car cela peut avoir un impact sur les performances.
• Testez minutieusement : Testez vos styles de surlignage personnalisés sur différents navigateurs et appareils pour garantir la compatibilité et l'accessibilité.
• Envisagez des solutions de repli : Fournissez des styles de secours pour les navigateurs qui ne prennent pas encore en charge l'API Custom Highlight.

Techniques avancées

1. Combiner plusieurs surlignages

Vous pouvez combiner plusieurs surlignages pour créer des effets de style plus complexes. Par exemple, vous pourriez vouloir surligner à la fois des mots-clés et le texte sélectionné par l'utilisateur avec des styles différents.

2. Utiliser des événements pour mettre à jour les surlignages

Vous pouvez utiliser des événements JavaScript, tels que mouseover ou click, pour mettre à jour dynamiquement les plages de surlignage en fonction des interactions de l'utilisateur.

3. Intégration avec des bibliothèques tierces

Vous pouvez intégrer l'API Custom Highlight avec des bibliothèques tierces pour créer des solutions de surlignage plus sophistiquées. Par exemple, vous pourriez utiliser une bibliothèque de traitement du langage naturel (NLP) pour identifier et surligner automatiquement les termes clés dans un document.

L'avenir du style de sélection de texte

L'API CSS Custom Highlight représente une avancée significative dans le style de la sélection de texte. Elle permet aux développeurs de créer des interfaces utilisateur plus attrayantes, accessibles et contextuelles. À mesure que le support des navigateurs continue de croître, l'API Custom Highlight est en passe de devenir un outil essentiel pour les développeurs web du monde entier.

Conclusion

L'API CSS Custom Highlight ouvre un monde de possibilités pour personnaliser l'expérience de sélection de texte. En comprenant les concepts clés, en explorant des exemples pratiques et en tenant compte des directives d'accessibilité, vous pouvez tirer parti de cette puissante API pour créer des interfaces utilisateur vraiment exceptionnelles. Adoptez l'API Custom Highlight et élevez vos projets de développement web vers de nouveaux sommets.

Expérimentez avec les exemples fournis, adaptez-les à vos besoins spécifiques et explorez tout le potentiel de l'API CSS Custom Highlight. Vos utilisateurs apprécieront l'attention portée aux détails et l'expérience utilisateur améliorée.