CSS Custom Highlight API: Ein erster Blick

Das Webtextstyling stand schon immer im Mittelpunkt der Entwickler. Was erwartet wird, ist die Entstehung der CSS Custom Highlight -API, die das Webtexten -Umfang des Webtextes revolutionieren wird.

Beispielsweise erkennt Textbearbeitungssoftware wie Google DOCS, Word oder Dropbox Paper Rechtschreib- und Grammatikfehler und zeigt wellige Zeilen an, um den Benutzer aufzufordern. Code -Editoren wie VS -Code verwenden auch ähnliche Methoden für Codefehler.

Ein weiterer häufiger Anwendungsfall für das Hervorheben von Text ist die Such- und Hervorhebungsfunktion . Jetzt können Sie versuchen, Strg/⌘ F in Ihrem Browser zu drücken und einen Teil des Textes in diesem Artikel einzugeben.

Browser verarbeiten diese Stile normalerweise automatisch. Bearbeitbarer Bereich (z. ) wird automatisch falsch geschriebene Wellenlinien angezeigt. Der Befehl find unterstreicht automatisch den gefundenen Text.

Aber was ist, wenn wir das selbst machen wollen? So implementieren Sie dies auf einer Webseite seit langem ein häufiges Problem, und es kann viel Zeit für viele Menschen verschwenden.

Dies ist kein einfaches Puzzle. Wir verwenden nicht nur Klasse<span></span> Tags wickeln Text ein und wenden Sie einige CSS an. Tatsächlich erfordert dies die Fähigkeit, mehrere Textbereiche über einen komplexen DOM -Baum und möglicherweise über die Grenzen der DOM -Elemente hinweg korrekt hervorzuheben.

Es gibt zwei allgemeine Möglichkeiten, dieses Problem zu lösen:

1. Styled Text-Reichweite Pseudoelemente und
2. Erstellen Sie Ihr eigenes Text -Highlighting -System.

Lassen Sie uns zuerst beide Ansätze überprüfen und dann sehen, wie der bevorstehende CSS -Custom -Highlight -API all dies ändert.

Methode 1: Stilable Textbereich

Die berühmteste Auswahl an stilisierbaren Texten kann Benutzer ausgewählt sein. Wenn Sie auf das Gerät zeigen, um Text auf der Webseite auszuwählen, wird automatisch ein Auswahlobjekt erstellt. Versuchen Sie nun, den Text auf dieser Seite auszuwählen und dann document.getSelection() in der Devtools -Konsole auszuführen. Sie sollten die Standortinformationen für den ausgewählten Text sehen.

Es stellt sich heraus, dass Sie auch die Textauswahl über JavaScript programmgesteuert erstellen können. Hier ist ein Beispiel:

 // Erstellen Sie zunächst ein Bereichsobjekt.
const range = neuer Bereich ();

// und setzen Sie seine Start- und Endpositionen ein.
Bereich.SetStart (ParentNode, StartOffset);
Range.setend (ParentNode, EndOffset);

// Stellen Sie dann die aktuelle Auswahl auf diesen Bereich ein.
document.getSelection (). removeallranges ();
document.getSelection (). adrange (Bereich);

Das letzte Puzzleteil ist, diesen Bereich zu stylen. CSS hat eine Pseudoelement namens ::selection , die dies tut, und es wird in allen Browsern unterstützt.

 :: Auswahl {
  Hintergrundfarbe: #f06;
  Farbe: weiß;
}

Hier ist ein Beispiel für die Verwendung dieser Technik, um alle Wörter auf der Seite zu unterstreichen:

Zusätzlich zum ::selection -Pseudoelement gibt es viele andere Pseudoelemente:

• ::target-text Wählen Sie den Text aus, auf den im Browser gescrollt wurde (Browser, die das Scrollen zur Textfunktion unterstützen). (MDN)
• ::spelling-error Wählen Sie Text aus, der mit dem Browser als Tippfehler gekennzeichnet ist. (MDN)
• ::grammar-error Wählen Sie den vom Browser gekennzeichneten Text aus, der Syntaxfehler enthält. (MDN)

Leider ist die Browserunterstützung hier nicht sehr gut, und obwohl diese Bereiche selbst nützlich sind, können sie nicht verwendet werden, um benutzerdefinierte Textausschnitte zu stylen - nur vordefinierte Textausschnitte aus dem Browser.

Daher ist die Auswahl der Benutzertext gut, da sie relativ einfach zu implementieren ist und die DOM der Seite nicht ändert. Tatsächlich ist ein Bereichsobjekt im Wesentlichen die Koordinaten von Absätzen auf der Seite und nicht ein HTML -Element, das erstellt werden muss, um zu existieren.

Ein Hauptnachteil ist jedoch, dass das Erstellen einer Auswahl zurücksetzt, was der Benutzer manuell ausgewählt hat. Versuchen Sie, Text in der obigen Demo auszuwählen, um dies zu testen. Sie werden sehen, dass der Code die Auswahl an einen anderen Ort verschiebt, er verschwindet.

Methode 2: Benutzerdefiniertes Hervorhebungssystem

Wenn Sie kein Auswahlobjekt verwenden, um Ihren Anforderungen zu entsprechen, ist eine zweite Lösung fast die einzige Option. Diese Lösung dreht sich darum, alles selbst zu tun und JavaScript zu verwenden, um neue HTML -Elemente einzufügen, in denen das Highlight angezeigt werden soll.

Leider bedeutet dies, dass mehr JavaScript -Code geschrieben und aufrechterhalten werden muss, ganz zu schweigen davon, dass der Browser das Layout der Seite nachbleibt, wenn die Highlight -Änderungen vorgenommen werden. Darüber hinaus gibt es einige komplexe Randfälle, z.

Interessanterweise haben Codemirror und Monaco (die JavaScript -Texteditor -Bibliothek, die VS -Code unterstützt) eine eigene Hervorhebungslogik. Sie verwenden einen etwas anderen Ansatz, bei dem das Hervorheben in einem separaten Teil des Dombaums enthalten ist. Die Textzeile und der hervorgehobene Absatz werden an zwei verschiedenen Stellen im DOM gerendert und dann zueinander positioniert. Wenn Sie den DOM -Subtree mit Text überprüfen, wird er nicht hervorgehoben. Auf diese Weise kann hervorgehoben werden, ohne die Textzeile zu beeinflussen, und es müssen keine neuen Elemente in die Textzeile eingeführt werden.

Insgesamt fühlt es sich an, als würde eine Browser-unterstützte Hervorhebungsfunktion fehlen. Einige Funktionen können dazu beitragen, all diese Mängel zu lösen (keine Eingriffe in die Auswahl der Benutzertext, Unterstützung für mehrere Auswahl, einfacher Code) und sind schneller als benutzerdefinierte Lösungen.

Zum Glück werden wir hier diskutieren!

CSS Custom Highlight API

Die CSS Custom Highlight API ist eine neue W3C -Spezifikation (derzeit im Arbeitsstatus), mit dem willkürliche Textbereiche aus JavaScript gestaltet werden können! Die Methode hier ist der zuvor überprüften Benutzertext -Technik sehr ähnlich. Es bietet Entwicklern eine Möglichkeit, willkürliche Bereiche (aus JavaScript) zu erstellen und sie dann mit CSS zu stylen.

Textbereich erstellen

Der erste Schritt besteht darin, den Textbereich zu erstellen, der unter Verwendung von Reichweite in JavaScript durchgeführt werden kann. Also, wie wir es bei der Festlegung der aktuellen Auswahl tun:

 const range = neuer Bereich ();
Bereich.SetStart (ParentNode, StartOffset);
Range.setend (ParentNode, EndOffset);

Es ist erwähnenswert, dass setStart und setEnd -Methoden unterschiedlich funktionieren, wenn der Knoten als erster Parameter ein Textknoten oder kein Textknoten ist. Für Textknoten entspricht der Offset der Anzahl der Zeichen im Knoten. Für andere Knoten entspricht der Offset der Anzahl der Kinder im Elternknoten.

Es ist auch erwähnenswert, dass setStart und setEnd nicht die einzigen Möglichkeiten sind, die Start- und Endpositionen des Bereichs zu beschreiben. Schauen Sie sich andere Methoden an, die in der Range -Klasse verfügbar sind, um andere Optionen anzuzeigen.

Erstellen Sie ein Highlight

Der zweite Schritt besteht darin, ein Highlight -Objekt für den im vorherigen Schritt erstellten Bereich zu erstellen. Ein Highlight -Objekt kann ein oder mehrere Bereiche empfangen. Wenn Sie also viele Textausschnitte genauso hervorheben möchten, sollten Sie wahrscheinlich ein Highlight -Objekt erstellen und mit allen Bereichen initialisieren, die diesen Textausschnitten entsprechen.

 const highlight = neuer Highlight (Bereich1, Bereich2, ..., Rangen);

Sie können aber auch so viele Highlight -Objekte erstellen, wie Sie möchten. Wenn Sie beispielsweise einen kollaborativen Texteditor erstellen, in dem jeder Benutzer eine andere Textfarbe erhält, können Sie für jeden Benutzer ein Highlight -Objekt erstellen. Jedes Objekt kann dann anders gestylt werden, wie wir als nächstes sehen werden.

Register Highlight

Jetzt tut das Highlight -Objekt selbst nichts. Sie müssen zunächst in der sogenannten Hervorhebungsregistrierung registriert werden. Dies geschieht mit den CSS -Highlights API. Die Registrierung ist wie eine Karte, auf der Sie neue Highlights registrieren können, indem Sie einen Namen für das Highlight angeben und die Highlights löschen (oder sogar die gesamte Registrierung löschen).

Hier erfahren Sie, wie Sie ein einzelnes Highlight registrieren.

 Css.highlights.set ('my-kustom-highlight', highlight);

Wo my-custom-highlight der Name, den Sie ausgewählt haben, und highlight ist das im vorherige Schritt erstellte Highlight-Objekt.

Style Hervorhebung

Der letzte Schritt besteht darin, die registrierten Highlights tatsächlich zu stylen. Dies geschieht mit dem neuen CSS ::highlight() Pseudo-Element mit dem Namen, den Sie bei der Registrierung des Highlight-Objekts ausgewählt haben ( my-custom-highlight in unserem Beispiel).

 :: Highlight (My-Custom-Highlight) {
  Hintergrundfarbe: Gelb;
  Farbe: Schwarz;
}

Es ist erwähnenswert, dass nur ein Teil der CSS-Attribute mit ::highlight() Pseudo-Element genau wie ::selection verwendet werden kann:

• background-color
• caret-color
• color
• cursor
• fill
• stroke
• stroke-width
• text-decoration (dies kann nur in Version 2 der Spezifikation unterstützt werden)
• text-shadow

Update -Hervorhebung

Es gibt verschiedene Möglichkeiten, den hervorgehobenen Text auf der Seite zu aktualisieren.

Beispielsweise können Sie CSS.highlights.clear() verwenden, um die Highlight -Registrierung vollständig zu löschen und von vorne zu beginnen. Alternativ können Sie auch den zugrunde liegenden Bereich aktualisieren, ohne Objekte neu zu erstellen. Verwenden Sie range.setEnd erneut den range.setStart .

Das Highlight -Objekt funktioniert jedoch ähnlich wie JavaScript -Set. Dies bedeutet, dass Sie einem vorhandenen Highlight auch mit highlight.add(newRange) ein neues Bereich hinzufügen oder den Bereich mit highlight.delete(existingRange) löschen können.

Drittens können Sie auch spezifische Highlight -Objekte zur Registrierung von CSS.Highlights hinzufügen oder löschen. Da diese API ähnlich wie die JavaScript -Karte funktioniert, können Sie set und delete verwenden, um die aktuell registrierten Highlights zu aktualisieren.

Browserunterstützung

Die Spezifikationen der CSS Custom Highlight API sind relativ neu und ihre Implementierung im Browser ist noch unvollständig. Dies ist zwar eine sehr nützliche Ergänzung der Webplattform, ist jedoch noch nicht ganz für Produktionsumgebungen geeignet.

Das Microsoft Edge -Team implementiert derzeit die CSS Custom Highlight API in Chrom. Tatsächlich ist diese Funktion jetzt in der Canary -Version verfügbar, indem das Feature -Flag der experimentellen Webplattform aktiviert wird (unter etwa: Flags). Es gibt keine klaren Pläne, wenn die Funktion in Chrome, Edge und anderen Browsern auf Chrombasis veröffentlicht wird, aber es ist bereits sehr nahe.

Safari 99 unterstützt auch diese API, aber nach den experimentellen Flags (Entwickeln → experimentelle Merkmale → API hervorheben), und die Schnittstelle ist geringfügig unterschiedlich, da sie anstelle eines Bereichsobjekts ein StaticRange -Objekt verwendet.

Firefox unterstützt diese API noch nicht, aber Sie können Mozillas Position auf dieser API für weitere Informationen lesen.

Demo

Apropos Microsoft Edge, sie haben eine Demo eingerichtet, in der Sie die CSS -benutzerdefinierte Highlight -API ausprobieren können. Bevor Sie jedoch die Demo ausprobieren, stellen Sie sicher, dass Sie Chrome oder Edge Canary mit dem Feature -Flag der experimentellen Webplattform verwenden, das auf der Seite "About: Flags" aktiviert ist.

/Schaltfläche Zeigen Sie die Demo an

Diese Demonstration verwendet die benutzerdefinierte Highlight -API, um die Textbereiche auf der Seite zu markieren, basierend auf dem, was Sie in das Suchfeld oben auf der Seite eingeben.

Sobald die Seite geladen ist, ruft der JavaScript -Code alle Textknoten in der Seite (mit Treewalker) ab, und wenn der Benutzer im Suchfeld etwas tippt, wird der Code über diese Knoten iteriert, bis eine Übereinstimmung gefunden wird. Verwenden Sie dann diese Übereinstimmungen, um ein Bereichsobjekt zu erstellen und es mithilfe der benutzerdefinierten Highlight -API hervorzuheben.

Zusammenfassen

Lohnt sich die von diesem neue Browser bereitgestellte hervorgehobene API wirklich? Auf jeden Fall wert!

Selbst wenn die CSS Custom Highlight -API zunächst etwas kompliziert aussieht (z. B. müssen Sie Scopes erstellen, dann hervorheben und dann registrieren und schließlich stylen), ist sie immer noch viel einfacher, als neue DOM -Elemente zu erstellen und sie an den richtigen Ort einzuführen.

Noch wichtiger ist, dass der Browsermotor diese Bereiche sehr, sehr schnell stylen kann.

Der Grund ermöglicht es nur, dass ein Teil der CSS-Attribute mit ::highlight() pseudoelement verwendet werden, dass dieser Teil der Attribute nur Eigenschaften enthält, die der Browser sehr effektiv anwenden kann, ohne das Layout der Seite wiederherzustellen. Der Motor muss mehr Arbeit erledigen, indem sie neue DOM -Elemente auf der Seite einfügen, um den Textbereich hervorzuheben.

Aber glauben Sie mir nicht. Fernando Fiori war an der Entwicklung der API beteiligt und erstellte diese nette Leistungsvergleichsdemonstration. Auf meinem Computer ist die Leistung der CSS Custom Highlight API durchschnittlich fünfmal schneller als das DOM-basierte Hervorhebung.

Da Chrom und Safari bereits experimentelle Unterstützung bieten, nähern wir uns dem, was in Produktionsumgebungen verwendet werden kann. Ich kann es kaum erwarten, den Browser konsequent die benutzerdefinierte Highlight -API zu unterstützen und zu sehen, welche Funktionen dies entsperren wird!

Das obige ist der detaillierte Inhalt vonCSS Custom Highlight API: Ein erster Blick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!