API CSS Custom Highlight: un premier regard

Le style de texte Web a toujours été au centre des développeurs. Ce qui est attendu, c'est l'émergence de l'API CSS Custom Highlight, qui révolutionnera le style de portée du texte Web.

Par exemple, des logiciels d'édition de texte tels que Google Docs, Word ou Dropbox Paper détecte des erreurs d'orthographe et grammaticales et affiche des lignes ondulées ci-dessous pour inviter l'utilisateur. Les éditeurs de code tels que VS Code utilisent également des méthodes similaires pour les erreurs de code.

Un autre cas d'utilisation courant pour la mise en surbrillance du texte est la fonction de recherche et de mise en surbrillance. Maintenant, vous pouvez essayer d'appuyer sur Ctrl / ⌘ F dans votre navigateur et entrer un peu de texte dans cet article.

Les navigateurs gèrent généralement ces styles automatiquement. Zone modifiable (par ex. ) affichera automatiquement les lignes ondulées mal orthographiées. La commande Find mettra automatiquement en surbrillance le texte trouvé.

Mais que se passe-t-il si nous voulons faire ce style nous-mêmes? Comment implémenter cela sur une page Web est depuis longtemps un problème commun, et il peut perdre beaucoup de temps pour de nombreuses personnes.

Ce n'est pas un simple puzzle. Nous n'utilisons pas seulement la classe<span></span> Les tags enveloppent du texte et appliquent quelques CSS. En fait, cela nécessite la capacité de mettre correctement en évidence plusieurs gammes de texte à travers n'importe quel arbre Dom complexe et éventuellement à travers les limites des éléments DOM.

Il existe deux façons courantes de résoudre ce problème:

1. Pseudo-éléments de gamme de texte stylisés, et
2. Créez votre propre système de mise en évidence de texte.

Prenons d'abord les deux approches, puis voyons comment l'API à venir CSS Custom Custom modifie tout cela.

Méthode 1: gamme de texte styléable

La gamme la plus célèbre de textes stylizables peut être choisi par l'utilisateur. Lorsque vous utilisez le pointage vers l'appareil pour sélectionner le texte sur la page Web, un objet de sélection est automatiquement créé. En fait, essayez maintenant de sélectionner le texte sur cette page, puis d'exécuter document.getSelection() dans la console Devtools. Vous devriez voir les informations de localisation du texte sélectionné.

Il s'avère que vous pouvez également créer des sélections de texte par programme via JavaScript. Voici un exemple:

 // Tout d'abord, créez un objet Range.
const Range = new Range ();

// et définir ses positions de début et de fin.
range.setStart (parentNode, startoffset);
range.setend (parentNode, endoffset);

// Ensuite, définissez la sélection actuelle sur cette plage.
Document.getSelection (). RemoveallRanges ();
document.getSelection (). AddRange (plage);

La dernière pièce du puzzle est de coiffer cette gamme. CSS a un pseudo-élément appelé ::selection qui fait cela, et il est pris en charge dans tous les navigateurs.

 :: Sélection {
  Color d'arrière-plan: # F06;
  Couleur: blanc;
}

Voici un exemple d'utilisation de cette technique pour mettre en évidence tous les mots de la page à tour de rôle:

En plus de ::selection il existe de nombreuses autres pseudo-éléments:

• ::target-text Sélectionnez le texte qui a été défilé dans le navigateur (navigateurs qui prennent en charge la fonction de défilement vers le texte). (MDN)
• ::spelling-error Sélectionnez le texte marqué du navigateur comme contenant la faute de frappe. (MDN)
• ::grammar-error marqué par le navigateur comme contenant des erreurs de syntaxe. (MDN)

Malheureusement, la prise en charge du navigateur ici n'est pas très bonne, et bien que ces portées elles-mêmes soient utiles, elles ne peuvent pas être utilisées pour styliser des extraits de texte personnalisés - uniquement des extraits de texte prédéfinis du navigateur.

Par conséquent, la sélection du texte de l'utilisateur est bonne car elle est relativement facile à implémenter et ne modifie pas le DOM de la page. En fait, un objet Range est essentiellement les coordonnées des paragraphes de la page, plutôt qu'un élément HTML qui doit être créé pour exister.

Cependant, un inconvénient majeur est que la création d'une sélection réinitialise tout ce que l'utilisateur a sélectionné manuellement. Essayez de sélectionner du texte dans la démo ci-dessus pour tester cela. Vous verrez que lorsque le code déplace la sélection vers un autre endroit, il disparaît.

Méthode 2: Système de mise en évidence personnalisé

Si vous n'utilisez pas d'objet de sélection pour répondre à vos besoins, une deuxième solution est presque la seule option. Cette solution tourne autour de tout faire par vous-même, en utilisant JavaScript pour insérer de nouveaux éléments HTML où vous voulez que le point culminant apparaisse.

Malheureusement, cela signifie que plus de code JavaScript doivent être écrits et maintenus, sans oublier qu'il oblige le navigateur à recréer la disposition de la page chaque fois que les modifications de surbrillance sont apportées. De plus, il existe des cas de bord complexes, comme lorsque vous souhaitez mettre en évidence un fragment de texte couvrant plusieurs éléments DOM.

Fait intéressant, Codemirror et Monaco (la bibliothèque de l'éditeur de texte JavaScript qui prend en charge vs code) ont leur propre logique de mise en évidence. Ils utilisent une approche légèrement différente, où la mise en évidence est contenue dans une partie distincte de l'arbre DOM. La ligne de texte et le paragraphe mis en évidence sont rendus à deux emplacements différents dans le DOM puis se positionnent les uns aux autres. Si vous vérifiez le sous-arbre DOM contenant du texte, il n'est pas mis en évidence. De cette façon, la mise en évidence peut être renvoyée sans affecter la ligne de texte et aucun nouvel éléments ne doit être introduit dans la ligne de texte.

Dans l'ensemble, il semble qu'une fonction de mise en évidence soutenue par le navigateur soit manquante. Certaines fonctionnalités peuvent aider à résoudre toutes ces lacunes (pas d'interférer avec la sélection du texte de l'utilisateur, la prise en charge de plusieurs sélections, un code simple) et sont plus rapides que les solutions personnalisées.

Heureusement, c'est ce que nous allons discuter ici!

API CSS Custom Sight Highlight

L'API CSS Custom Highlight est une nouvelle spécification W3C (actuellement dans l'état de projet de travail) qui permet à des gammes de texte arbitraires d'être stylisées à partir de JavaScript! La méthode ici est très similaire à la technique de sélection du texte utilisateur que nous avons examinée plus tôt. Il fournit aux développeurs un moyen de créer des lunettes arbitraires (à partir de JavaScript), puis de les style à l'aide de CSS.

Créer une gamme de texte

La première étape consiste à créer la plage de texte à mettre en surbrillance, ce qui peut être fait en utilisant la plage en JavaScript. Donc, comme nous le faisons lors de la définition de la sélection actuelle:

 const Range = new Range ();
range.setStart (parentNode, startoffset);
range.setend (parentNode, endoffset);

Il convient de noter que si le nœud est passé comme le premier paramètre est un nœud de texte ou non un nœud de texte, setStart et setEnd fonctionnent différemment. Pour les nœuds de texte, le décalage correspond au nombre de caractères dans le nœud. Pour d'autres nœuds, le décalage correspond au nombre d'enfants dans le nœud parent.

Il convient également de noter que setStart et setEnd ne sont pas les seuls moyens de décrire les positions de démarrage et de fin de la gamme. Consultez d'autres méthodes disponibles sur la classe de plage pour voir d'autres options.

Créer un point culminant

La deuxième étape consiste à créer un objet de surbrillance pour la portée créée à l'étape précédente. Un objet de surbrillance peut recevoir une ou plusieurs gammes. Donc, si vous souhaitez mettre en évidence de nombreux extraits de texte de la même manière, vous devriez probablement créer un objet en surbrillance et l'initialiser avec toutes les gammes correspondant à ces extraits de texte.

 const highlight = new Highlight (Range1, Range2, ..., Rangen);

Mais vous pouvez également créer autant d'objets en surbrillance que vous le souhaitez. Par exemple, si vous créez un éditeur de texte collaboratif où chaque utilisateur obtient une couleur de texte différente, vous pouvez créer un objet de surbrillance pour chaque utilisateur. Chaque objet peut ensuite être stylé différemment, comme nous le verrons ensuite.

Enregistrer le point culminant

Maintenant, l'objet de surbrillance lui-même ne fait rien. Ils doivent d'abord être enregistrés dans le soi-disant registre de mise en évidence. Cela se fait à l'aide de l'API CSS Highlights. Le registre est comme une carte où vous pouvez enregistrer de nouveaux faits saillants en spécifiant un nom pour le point culminant, ainsi que pour supprimer les points forts (ou même effacer l'intégralité du registre).

Voici comment enregistrer un seul point culminant.

 Css.highlight.set («my-custom-highlight», highlight);

Où my-custom-highlight est le nom que vous avez sélectionné et highlight est l'objet de surbrillance créé à l'étape précédente.

Mise en évidence du style

La dernière étape consiste à coiffer les faits saillants enregistrés. Cela se fait avec le nouveau pseudo-élément CSS ::highlight() , en utilisant le nom que vous avez sélectionné lors de l'enregistrement de l'objet Highlight ( my-custom-highlight dans notre exemple).

 :: Highlight (my-custom-highlight) {
  Color d'arrière-plan: jaune;
  Couleur: noir;
}

Il convient de noter que, tout comme ::selection , seule une partie des attributs CSS peut être utilisée avec ::highlight() :

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration (cela ne peut être pris en charge que dans la version 2 de la spécification)
• text-shadow

Mise à jour la mise en évidence

Il existe plusieurs façons de mettre à jour le texte en surbrillance sur la page.

Par exemple, vous pouvez utiliser CSS.highlights.clear() pour effacer complètement le registre de surbrillance et recommencer à zéro. Alternativement, vous pouvez également mettre à jour la portée sous-jacente sans recréer d'objets. Pour ce faire, utilisez encore une fois les méthodes range.setStart et range.setEnd .

Cependant, l'objet Highlight fonctionne de manière similaire à JavaScript Set, ce qui signifie que vous pouvez également ajouter un nouvel objet Range à un point culminant existant à l'aide highlight.add(newRange) , ou supprimer la plage à l'aide highlight.delete(existingRange) .

Troisièmement, vous pouvez également ajouter ou supprimer des objets de surbrillance spécifiques au registre CSS.Highlights. Étant donné que cette API fonctionne similaire à la carte JavaScript, vous pouvez utiliser set et delete pour mettre à jour les faits saillants actuellement enregistrés.

Support de navigateur

Les spécifications de l'API de surbrillance CSS Custom sont relativement nouvelles et leur implémentation dans le navigateur est toujours incomplète. Ainsi, même si ce sera un ajout très utile à la plate-forme Web, il ne convient pas encore tout à fait pour les environnements de production.

L'équipe Microsoft Edge implémente actuellement l'API CSS Custom Highlight dans Chromium. En fait, cette fonctionnalité est désormais disponible dans la version Canary en activant l'indicateur de fonctionnalité de plate-forme Web expérimentale (sous: Flags). Il n'y a pas de plans clairs pour le moment où la fonctionnalité sera publiée dans Chrome, Edge et d'autres navigateurs à base de chrome, mais il est déjà très proche.

Safari 99 prend également en charge cette API, mais après les drapeaux expérimentaux (développer → Fonctionnalités expérimentales → API de surbrillance), et l'interface est légèrement différente car elle utilise un objet statique au lieu d'un objet de plage.

Firefox ne prend pas encore en charge cette API, mais vous pouvez lire la position de Mozilla sur cette API pour plus d'informations.

Démo

En parlant de Microsoft Edge, ils ont mis en place une démo où vous pouvez essayer l'API CSS Custom Highlight. Mais avant d'essayer la démo, assurez-vous que vous utilisez Chrome ou Edge Canary avec l'indicateur de fonctionnalité de plate-forme Web expérimentale activé dans la page à propos: Flags.

/ Bouton Afficher la démo

Cette démonstration utilise l'API de surbrillance personnalisée pour mettre en évidence les plages de texte dans la page en fonction de ce que vous entrez dans le champ de recherche en haut de la page.

Une fois la page chargée, le code JavaScript récupère tous les nœuds de texte de la page (en utilisant TreeWalker) et lorsque l'utilisateur tape quelque chose dans le champ de recherche, le code itère sur ces nœuds jusqu'à ce qu'une correspondance soit trouvée. Ensuite, utilisez ces correspondances pour créer un objet Range et mettez-le en surbrillance à l'aide de l'API de surbrillance personnalisée.

Résumer

Alors, l'API de mise en évidence fournie par ce nouveau navigateur en vaut-elle la peine? Ça vaut vraiment le coup!

Tout d'abord, même si l'API CSS Custom Highlight semble un peu compliqué au début (par exemple, vous devez créer des lunettes, puis les mettre en surbrillance, puis les enregistrer et enfin les styliser), il est encore beaucoup plus simple que de créer de nouveaux éléments DOM et de les insérer au bon endroit.

Plus important encore, le moteur du navigateur peut coiffer ces gammes très, très rapidement.

La raison ne permet d'utiliser qu'une partie des attributs CSS avec ::highlight() est que cette partie des attributs ne contiennent que des propriétés que le navigateur peut appliquer très efficacement sans recréer la disposition de la page. Le moteur doit faire plus de travail en insérant de nouveaux éléments DOM autour de la page pour mettre en évidence la plage de texte.

Mais ne me croyez pas. Fernando Fiori a participé au développement de l'API et il a créé cette belle démonstration de comparaison des performances. Sur mon ordinateur, les performances de l'API CSS Custom Highlight sont en moyenne 5 fois plus rapides que la mise en évidence basée sur DOM.

Comme le chrome et le safari fournissent déjà un soutien expérimental, nous nous rapprochons de ce qui peut être utilisé dans les environnements de production. J'ai hâte de voir le navigateur prendre en charge systématiquement l'API de surbrillance personnalisée et de voir quelles fonctionnalités cela va débloquer!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!