Intersection des surlignages personnalisés CSS : maîtriser le chevauchement de sélections multiples

Le pseudo-élément ::highlight en CSS offre un contrôle puissant sur le style des sélections de texte. Bien que le surlignage de texte de base soit simple, la gestion de l'intersection de plusieurs sélections et la personnalisation de leurs zones de chevauchement nécessitent une compréhension plus approfondie. Cet article explore les techniques avancées pour maîtriser l'intersection des surlignages personnalisés CSS, en fournissant des exemples pratiques et des conseils concrets pour créer des interfaces utilisateur soignées et accessibles.

Comprendre les bases : le pseudo-élément ::highlight

Le pseudo-élément ::highlight vous permet de styliser le texte qui a été sélectionné par l'utilisateur. Cette capacité va au-delà des simples couleurs de fond et de texte ; elle permet aux développeurs d'appliquer une large gamme de propriétés CSS au texte sélectionné, y compris les bordures, les ombres et même les animations. Il s'agit d'une avancée significative par rapport à la dépendance exclusive au surlignage par défaut du navigateur, qui est souvent incohérent et ne correspond pas toujours au design d'un site web.

Syntaxe de base

La syntaxe de base pour utiliser ::highlight consiste à cibler des objets Selection spécifiques via des sélecteurs CSS ou via l'API CSS Custom Highlight.

Voici un exemple simple :

            ::highlight {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

Cet extrait de code changera la couleur de fond de tout texte sélectionné en jaune et la couleur du texte en noir. C'est un style global qui s'applique à toutes les sélections sur la page. Pour cibler des sélections spécifiques, vous devez utiliser l'API CSS Custom Highlight.

L'API CSS Custom Highlight : un contrôle affiné

L'API CSS Custom Highlight offre une manière plus granulaire de gérer et de styliser les sélections de texte. Elle vous permet de créer des surlignages nommés et de leur appliquer des styles spécifiques. C'est particulièrement utile lorsque vous devez différencier différents types de sélections ou lorsque vous traitez des sélections qui se chevauchent.

Créer et appliquer des surlignages nommés

Pour utiliser l'API CSS Custom Highlight, vous devrez utiliser JavaScript pour créer et appliquer des surlignages nommés. Voici un guide étape par étape :

1. Enregistrer un surlignage nommé : Utilisez CSS.registerProperty() pour enregistrer une propriété personnalisée qui sera utilisée pour styliser votre surlignage. Cela se fait généralement une seule fois au début de votre script.
2. Créer une plage (Range) : Définissez les points de début et de fin du texte que vous souhaitez surligner à l'aide d'objets Range.
3. Obtenir l'objet de sélection : Obtenez la sélection actuelle en utilisant window.getSelection().
4. Ajouter la plage à la sélection : Utilisez la méthode addRange() pour ajouter la plage à la sélection. Ceci est souvent associé à la suppression préalable de toutes les plages existantes à l'aide de removeAllRanges().
5. Appliquer les styles : Définissez le style pour le surlignage. Cela peut impliquer la définition de variables CSS.

Voici un exemple illustrant ce processus :

            // Enregistrer la propriété de surlignage (exécuter une fois)
CSS.registerProperty({
  name: '--my-highlight-color',
  syntax: '',
  inherits: false,
  initialValue: 'rgba(255, 165, 0, 0.5)' // Orange semi-transparent
});

// Fonction pour appliquer le surlignage
function applyHighlight(startNode, startOffset, endNode, endOffset, highlightName) {
  // 1. Créer un objet Range
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);

  // 2. Obtenir l'objet Selection
  const selection = window.getSelection();

  // 3. Effacer les sélections existantes et ajouter la nouvelle plage
  selection.removeAllRanges();
  selection.addRange(range);

  // 4. Appliquer le surlignage en utilisant ::highlight(nomDuSurlignage) en CSS
  //   Aucun JavaScript n'est nécessaire pour le style direct, le CSS s'occupe de l'apparence
}

// Exemple d'utilisation :
const myElement = document.getElementById('my-text-element');
// En supposant que monElement contient le texte que vous voulez surligner
applyHighlight(myElement.firstChild, 5, myElement.firstChild, 15, 'my-highlight');

            

              
                Copy
              
            
          

Et le CSS correspondant :

            ::highlight(my-highlight) {
  background-color: var(--my-highlight-color);
}

            

              
                Copy
              
            
          

Dans cet exemple, nous enregistrons la propriété personnalisée --my-highlight-color, puis nous surlignons le texte du caractère 5 au caractère 15 à l'intérieur de `my-text-element`. Le CSS utilise ensuite la propriété enregistrée pour définir la couleur de fond.

Considérations internationales pour les plages de texte

Lorsque vous travaillez avec des plages de texte dans différentes langues, il est crucial de prendre en compte l'Unicode et l'encodage des caractères. Les valeurs startOffset et endOffset représentent des indices de caractères, ce qui peut être problématique avec les langues qui utilisent des caractères multi-octets ou des groupes de graphèmes. Par exemple, dans certaines langues d'Asie de l'Est, un seul caractère peut être représenté par plusieurs octets. Vous pourriez avoir besoin d'utiliser des bibliothèques qui gèrent correctement l'Unicode pour vous assurer que vos surlignages sont appliqués avec précision dans différentes langues.

De plus, la direction du texte (de gauche à droite ou de droite à gauche) peut également affecter la manière dont les plages sont calculées et appliquées. Assurez-vous de tester votre implémentation de surlignage avec différentes langues et écritures pour garantir une fonctionnalité et un rendu corrects.

Gérer le chevauchement de sélections multiples

Le véritable défi se présente lorsqu'il s'agit de gérer plusieurs sélections qui se chevauchent. Le comportement par défaut du navigateur pour les sélections qui se chevauchent peut être imprévisible et ne fournit souvent pas l'effet visuel souhaité. L'API CSS Custom Highlight fournit des outils pour gérer ce chevauchement, vous permettant de contrôler comment les différents surlignages interagissent les uns avec les autres.

Comprendre le problème

Lorsque plusieurs sélections se chevauchent, le navigateur applique généralement les styles de la dernière sélection effectuée. Cela peut entraîner des incohérences visuelles et une expérience utilisateur déroutante. Par exemple, si vous avez deux surlignages qui se chevauchent, un vert et un bleu, la zone de chevauchement pourrait n'afficher que le surlignage bleu, masquant complètement le vert. Pour résoudre ce problème, vous devez mettre en œuvre une stratégie pour gérer le chevauchement.

Stratégies pour résoudre le chevauchement

Il existe plusieurs stratégies que vous pouvez utiliser pour résoudre le chevauchement des surlignages :

• Priorisation : Attribuez différentes priorités à différents types de surlignages. Le surlignage ayant la plus haute priorité prévaudra dans la zone de chevauchement.
• Mélange (Blending) : Mélangez les couleurs des surlignages qui se chevauchent pour créer une nouvelle couleur. Cela peut offrir un moyen visuellement attrayant d'indiquer la présence de plusieurs sélections.
• Superposition (Layering) : Utilisez des propriétés CSS comme z-index pour contrôler l'ordre de superposition des surlignages. Cela vous permet de créer un effet de couches, où un surlignage apparaît au-dessus d'un autre.
• Rendu personnalisé : Pour les scénarios complexes, vous pouvez utiliser JavaScript pour analyser les plages qui se chevauchent et effectuer le rendu d'éléments visuels personnalisés, tels que des bordures ou des icônes, pour indiquer la présence de sélections multiples.

Mise en œuvre de la priorisation

La priorisation consiste à attribuer un niveau de priorité à chaque surlignage et à s'assurer que le surlignage ayant la plus haute priorité est affiché dans la zone de chevauchement. Cela peut être réalisé en gérant soigneusement l'ordre dans lequel les surlignages sont appliqués et en utilisant CSS pour contrôler leur apparence.

Voici un exemple de la manière dont vous pourriez mettre en œuvre la priorisation en utilisant des variables CSS et JavaScript :

            // Définir les priorités des surlignages
const highlightPriorities = {
  'important-highlight': 2,
  'secondary-highlight': 1,
  'default-highlight': 0
};

// Fonction pour appliquer un surlignage avec une priorité spécifique
function applyHighlightWithPriority(startNode, startOffset, endNode, endOffset, highlightName) {
  // (Même logique de création de plage et de sélection que précédemment)
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // Appliquer le nom du surlignage à une propriété personnalisée sur la sélection.
  // Aucune manipulation CSS directe ici ; dépend du CSS ci-dessous.
  //  Cela nécessite un polyfill pour les navigateurs ne prenant pas en charge CSS.supports.
  //  De plus, soyez prudent avec les implications de sécurité liées à la définition
  //  de styles arbitraires via JavaScript et assurez-vous que seul du code de confiance peut le faire.
  let priority = highlightPriorities[highlightName] || 0;

  if (CSS.supports('selector(::highlight(' + highlightName + ''))')) {
      // Pas besoin de manipuler directement l'objet de style si CSS.supports est disponible
      // Le CSS s'occupera du reste en fonction de la sélection.
  }
  else {
      // Comportement de repli, appliquer les styles directement. Ce n'est PAS recommandé
      //  pour le code de production, car c'est difficile à gérer et à maintenir.
      //   Il est préférable d'utiliser l'API CSS Custom Highlight avec un polyfill, ou simplement
      //   de dégrader gracieusement la fonctionnalité de surlignage si le navigateur ne la prend pas en charge.
      console.warn("CSS.supports non pris en charge, une manipulation de style directe peut être nécessaire");
  }

}

            

              
                Copy
              
            
          

Et le CSS correspondant :

            ::highlight(default-highlight) {
  background-color: lightgray;
  z-index: 0; // Priorité la plus basse
}

::highlight(secondary-highlight) {
  background-color: lightblue;
  z-index: 1;
}

::highlight(important-highlight) {
  background-color: orange;
  z-index: 2; // Priorité la plus haute
}

/* À utiliser pour résoudre les problèmes de z-index dans certains navigateurs */
::highlight {
  position: relative;
}

            

              
                Copy
              
            
          

Dans cet exemple, chaque type de surlignage se voit attribuer une valeur z-index, où des valeurs plus élevées indiquent une priorité plus grande. La déclaration position: relative sur le pseudo-élément ::highlight peut être nécessaire pour garantir que z-index fonctionne correctement dans certains navigateurs.

Mise en œuvre du mélange

Le mélange consiste à combiner les couleurs des surlignages qui se chevauchent pour créer une nouvelle couleur. Cela peut être réalisé en utilisant les modes de fusion CSS (blend modes) ou en manipulant les couleurs de fond des surlignages avec JavaScript.

Voici un exemple de la manière dont vous pourriez mettre en œuvre le mélange en utilisant les modes de fusion CSS :

            ::highlight(highlight-1) {
  background-color: rgba(255, 0, 0, 0.5); /* Rouge avec 50% d'opacité */
  mix-blend-mode: multiply;
}

::highlight(highlight-2) {
  background-color: rgba(0, 0, 255, 0.5); /* Bleu avec 50% d'opacité */
  mix-blend-mode: multiply;
}

            

              
                Copy
              
            
          

Dans cet exemple, la propriété mix-blend-mode: multiply est utilisée pour mélanger les couleurs des surlignages qui se chevauchent. Lorsqu'un surlignage rouge chevauche un surlignage bleu, la couleur résultante dans la zone de chevauchement sera violette.

Mise en œuvre de la superposition

La superposition consiste à utiliser des propriétés CSS comme z-index pour contrôler l'ordre d'empilement des surlignages. Cela vous permet de créer un effet de couches, où un surlignage apparaît au-dessus d'un autre. Cette approche est similaire à la priorisation, mais elle offre plus de flexibilité en termes de style visuel.

L'exemple fourni dans la section sur la priorisation montre déjà comment mettre en œuvre la superposition en utilisant z-index.

Mise en œuvre du rendu personnalisé

Pour les scénarios complexes, vous pouvez utiliser JavaScript pour analyser les plages qui se chevauchent et effectuer le rendu d'éléments visuels personnalisés, tels que des bordures ou des icônes, pour indiquer la présence de sélections multiples. Cette approche offre le plus de flexibilité mais demande aussi le plus d'efforts à mettre en œuvre.

Voici un aperçu général de la manière dont vous pourriez mettre en œuvre un rendu personnalisé :

1. Analyser les plages qui se chevauchent : Utilisez JavaScript pour parcourir les sélections et identifier toutes les plages qui se chevauchent.
2. Créer des éléments personnalisés : Créez des éléments HTML, tels que <span> ou <div>, pour représenter les éléments visuels personnalisés.
3. Positionner les éléments : Positionnez les éléments personnalisés précisément sur les plages qui se chevauchent en utilisant JavaScript et CSS.
4. Styliser les éléments : Appliquez des styles personnalisés aux éléments pour créer l'effet visuel souhaité.
5. Insérer les éléments : Insérez les éléments personnalisés dans le DOM, en vous assurant qu'ils sont correctement positionnés par rapport au texte.

Cette approche peut être complexe et nécessite une attention particulière aux détails, mais elle offre un contrôle ultime sur l'apparence des surlignages qui se chevauchent. Il est important de gérer les cas particuliers, tels que le retour à la ligne du texte et les changements de taille de police, pour s'assurer que les éléments personnalisés restent correctement positionnés.

Considérations sur l'accessibilité

Lors de la personnalisation des surlignages de texte, il est crucial de prendre en compte l'accessibilité pour garantir que votre site web est utilisable par les personnes handicapées. Voici quelques considérations importantes :

• Contraste des couleurs : Assurez-vous que le contraste des couleurs entre la couleur de surlignage et la couleur du texte est suffisant pour les personnes malvoyantes. Utilisez un vérificateur de contraste de couleurs pour vérifier que le rapport de contraste respecte les directives d'accessibilité. Le vérificateur de contraste de WebAIM est une excellente ressource.
• Navigation au clavier : Assurez-vous que les utilisateurs peuvent naviguer et interagir avec le texte surligné à l'aide du clavier. Cela peut impliquer l'ajout d'attributs ARIA aux éléments surlignés pour fournir des informations sémantiques aux technologies d'assistance.
• Compatibilité avec les lecteurs d'écran : Testez votre implémentation de surlignage avec des lecteurs d'écran pour vous assurer que le texte surligné est correctement annoncé. Fournissez un texte descriptif pour les surlignages afin d'aider les utilisateurs à comprendre leur but et leur signification.
• Évitez de vous fier uniquement à la couleur : Ne vous fiez pas uniquement à la couleur pour transmettre une signification. Fournissez des indices visuels alternatifs, tels que des bordures ou des icônes, pour garantir que les surlignages sont accessibles aux personnes daltoniennes.

Exemples concrets et cas d'utilisation

L'intersection de surlignages personnalisés peut être utilisée dans divers scénarios concrets pour améliorer l'expérience utilisateur. Voici quelques exemples :

• Éditeurs de code : Les éditeurs de code peuvent utiliser des surlignages personnalisés pour indiquer les erreurs de syntaxe, les avertissements et d'autres informations importantes. Les surlignages qui se chevauchent peuvent être utilisés pour montrer plusieurs problèmes dans la même zone de code.
• Éditeurs de documents : Les éditeurs de documents peuvent utiliser des surlignages personnalisés pour indiquer les modifications suivies, les commentaires et les annotations. Les surlignages qui se chevauchent peuvent être utilisés pour montrer plusieurs révisions dans la même section de texte.
• Résultats de recherche : Les pages de résultats de recherche peuvent utiliser des surlignages personnalisés pour montrer les termes de recherche dans les résultats. Les surlignages qui se chevauchent peuvent être utilisés pour montrer plusieurs termes de recherche qui apparaissent dans la même zone de texte.
• Outils d'annotation : Les outils d'annotation peuvent utiliser des surlignages personnalisés pour permettre aux utilisateurs de surligner et d'annoter du texte. Les surlignages qui se chevauchent peuvent être utilisés pour montrer différents types d'annotations dans la même zone de texte.

Meilleures pratiques

Voici quelques meilleures pratiques à suivre lors de la mise en œuvre de l'intersection de surlignages personnalisés CSS :

• Utilisez l'API CSS Custom Highlight : L'API CSS Custom Highlight offre le moyen le plus flexible et efficace de gérer et de styliser les sélections de texte.
• Tenez compte de l'accessibilité : Tenez toujours compte de l'accessibilité lors de la personnalisation des surlignages de texte. Assurez-vous que les surlignages sont utilisables par les personnes handicapées.
• Testez minutieusement : Testez votre implémentation de surlignage de manière approfondie sur différents navigateurs, appareils et langues pour vous assurer qu'elle fonctionne correctement.
• Utilisez un style visuel cohérent : Utilisez un style visuel cohérent pour vos surlignages afin de fournir une expérience utilisateur claire et intuitive.
• Documentez votre code : Documentez votre code de manière claire et concise pour en faciliter la maintenance et la mise à jour.

Conclusion

L'intersection de surlignages personnalisés CSS est une technique puissante qui vous permet de créer des interfaces utilisateur visuellement attrayantes et informatives. En maîtrisant le pseudo-élément ::highlight et l'API CSS Custom Highlight, vous pouvez contrôler l'apparence des sélections de texte et gérer l'intersection de plusieurs sélections pour offrir une expérience utilisateur fluide et accessible. N'oubliez pas de prioriser l'accessibilité, de tester minutieusement et d'utiliser un style visuel cohérent pour garantir que votre implémentation de surlignage est efficace et conviviale.

Ressources supplémentaires

• MDN Web Docs : ::highlight
• MDN Web Docs : API CSS Custom Highlight
• Vérificateur de contraste de couleurs WebAIM