- Rozhraní CSS Custom Highlight API umožňuje vývojářům upravovat styly specifických textových segmentů bez nutnosti změny struktury DOM.
- Kombinací objektů Range a Highlight s HighlightRegistry lze programově aplikovat vlastní vizuální značky.
- Pseudoelement ::highlight() poskytuje specializované CSS rozhraní pro nezávislé stylování registrovaných zvýraznění.
- Tento přístup optimalizuje výkon snížením hmotnosti DOM a zabraňuje posunům rozvržení spojeným s vkládáním obalových prvků.
Už jste někdy zažili frustraci z toho, že se snažíte zvýraznit konkrétní slova na stránce a uvědomujete si, že to musíte všechno zabalit do milionu textů? <span> or <mark> tagy? Je to naprostá noční můra, co se týče výkonu, a může to vážně narušit rozvržení CSS. No, přesně tam to... API pro vlastní zvýraznění CSS vstupuje do hry a funguje jako převratný krok pro každého, kdo potřebuje dynamicky zobrazovat text, aniž by se musel dotýkat samotné struktury HTML.
Toto API v podstatě rozšiřuje věci, které již známe, jako například ::selection or ::spelling-error, ale dává nám klíče k království. Místo spoléhání se na to, že prohlížeč rozhodne, co se zvýrazní, nyní můžete definovat libovolné rozsahy textu a upravte si je podle libosti. Je to mnohem přehlednější způsob, jak zvládat věci, jako jsou výsledky vyhledávání, kolaborativní úpravy nebo zvýrazňování syntaxe, aniž by se DOM zbytečně zatěžoval.
Proč se odklánět od prvku značky?
Po dlouhou dobu <mark> Značka tag byla oblíbeným nástrojem pro zdůraznění textu. I když je skvělá pro základní sémantiku, má i několik docela nepříjemných omezení. Zaprvé, Vkládání uzlů do DOMu může spustit nákladné přepočítávání rozvržení, což může způsobit, že váš web bude působit pomalu, zejména během animací. Skutečný problém ale začíná, když potřebujete zvýraznit text, který rozprostírá se přes více prvků HTMLProtože nemůžete nechat tag otevřený a zavřít ho uvnitř jiného elementu, aniž byste vytvořili neplatný HTML kód, jste nuceni rozdělit zvýraznění na několik malých částí, což je prostě neohrabané.
Základní koncepty API
Aby to fungovalo, musíte se seznámit s několika konkrétními objekty. Zaprvé je tu Objekt rozsahu, což je v podstatě ukazatel, který v dokumentu říká „začít zde a končit tam“. Pak máme Zvýraznit objekt, který sdružuje jeden nebo více těchto rozsahů dohromady, aby s nimi bylo možné zacházet jako s jednou stylistickou skupinou. Všechny tyto jsou spravovány ZvýraznitRegistr (přístupné přes CSS.highlights), která funguje jako mapa, kde si zaregistrujete svá zvýraznění pod jedinečným názvem.
Postupná implementace
Získání vlastního zvýraznění na obrazovce je jednoduchý čtyřkrokový tanec. Nejprve vy vytvořte si objekty Range v JavaScriptu. Toho lze dosáhnout identifikací textového uzlu a použitím metod jako setStart a setEnd přesně určit, na které znaky se chcete zaměřit. Pokud potřebujete pokrýt celý prvek, setStartBefore a setEndAfter jsou tvoji nejlepší přátelé.
Jakmile je rozsah nastaven, druhým krokem je vytvořit instanci nového objektu HighlightSkvělou funkcí je, že jedno zvýraznění může obsahovat více rozsahů. To je ideální pro funkci „nalezení na stránce“, kde chcete, aby všechny výskyty slova sdílely stejnou barvu. Poté… zaregistrujte zvýraznění použitím CSS.highlights.set('my-name', highlight)Díky tomu má váš zvýrazněný text vlastní identifikátor, který CSS engine skutečně vidí.
Posledním detailem je použití stylu. Použijete ::highlight(my-name) pseudoprvek ve vašem souboru CSS. Protože se nejedná o standardní prvek, máte omezený počet vlastností, ale můžete je snadno změnit barva pozadí nebo dekorace textu aby tyto rozsahy vynikly. Například byste mohli použít jasně žluté pozadí pro výsledky vyhledávání nebo přeškrtnutý smazaný text v editoru pro spolupráci.
Pokročilé výhody pro využití a výkon
Jedním z nejpůsobivějších případů použití je zvýrazňování syntaxe kódu . Tradičně knihovny jako Prism.js vkládaly tisíce rozpětí (spans) pro obarvení tokenů, což mohlo DOM neuvěřitelně zatížit. Pomocí Custom Highlight API můžete tokenizovat kód v JavaScriptu a aplikovat styly bez přidání jediného prvku na stránku . Díky tomu je DOM štíhlý a prohlížeč se nezahlcuje masivními dokumenty.
Pokud potřebujete za chodu změnit zvýrazněné položky, nemusíte začínat znovu. Protože objekt Highlight je propojen s objektem Range, jednoduše aktualizovat hranice pohoří automaticky aktualizuje vizuální zvýraznění na obrazovce. Pokud se ho chcete zbavit, můžete buď odstranit konkrétní oblast pomocí delete metoda na objektu Highlight nebo vymazat celou registraci použitím CSS.highlights.delete.
Podpora přístupnosti a prohlížečů
Je důležité si uvědomit, že tyto zvýraznění jsou čistě vizuální a neposkytují inherentní sémantický význam pro čtečky obrazovky. Pokud vytváříte něco, kde je přístupnost nejvyšší prioritou, měli byste použít type atribut rozhraní Highlight pro určení, zda je zvýraznění pravopisnou nebo gramatickou chybou, ačkoli podpora pro tuto možnost se liší. V případě pochybností doplňte své přednosti štítky ARIA nebo sémantické HTML je ta správná cesta.
Pokud jde o kompatibilitu, toto API v poslední době zaznamenalo obrovský nárůst. Je již spolehlivé v Chrome, Edge a Safari a Firefox se k němu přidal (od verze 140), což znamená, že je nyní použitelné ve většině produkčních prostředí. Abyste se vyhnuli pádům ve starších prohlížečích, je chytré před spuštěním kódu zkontrolovat, zda v objektu CSS existují „highlights“ .
Toto API zásadně mění způsob manipulace s textem oddělením vizuální prezentace od struktury HTML. Využitím objektů Range a Highlight mohou vývojáři implementovat složité funkce, jako je vyhledávání v reálném čase a barevné zvýraznění syntaxe, a zároveň zachovat nízkou hmotnost DOM a rychlý výkon, čímž efektivně obcházejí tradiční omezení obalových elementů.
