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!