M

MLOG

Čeština

Odemkněte pokročilé stylování výběru textu s CSS Custom Highlight API. Naučte se přizpůsobit zážitek z výběru pro lepší zapojení uživatelů.

CSS Custom Highlight API: Zvládnutí stylů pro výběr textu

Skromný akt výběru textu na webové stránce je něco, co většina uživatelů provádí bez zaváhání. Jako vývojáři se však často snažíme vylepšit i ty nejjemnější interakce. CSS Custom Highlight API nám umožňuje revolučně změnit zážitek z výběru textu a nabízí bezprecedentní kontrolu nad tím, jak vybraný text vypadá. Tato schopnost přesahuje jednoduché změny barvy pozadí a textu a umožňuje vytvářet složitá a poutavá uživatelská rozhraní.

Co je CSS Custom Highlight API?

CSS Custom Highlight API je moderní webový standard, který poskytuje způsob, jak pomocí CSS stylovat vzhled výběrů textu (a dalších zvýrazněných rozsahů). Zavádí pseudo-element ::highlight(), který cílí na specifické rozsahy textu na základě kritérií definovaných vývojářem. Toto API překonává omezení tradičního pseudo-elementu ::selection, který nabízí velmi základní možnosti stylingu. S Custom Highlight API můžete vytvářet vysoce přizpůsobené a kontextově závislé styly výběru textu.

Proč používat CSS Custom Highlight API?

Custom Highlight API nabízí několik výhod oproti tradičním metodám stylování výběru textu:

Pochopení klíčových konceptů

Než se ponoříme do příkladů kódu, je nezbytné porozumět základním konceptům CSS Custom Highlight API:

1. Registrace zvýraznění

Proces začíná registrací vlastního názvu zvýraznění pomocí JavaScriptu. Tento název se poté použije v CSS k cílení na specifické výběry textu.

2. Rozsahy zvýraznění

Rozsahy zvýraznění definují specifické úseky textu, které mají být nastylovány. Tyto rozsahy se vytvářejí programově pomocí API Highlight a StaticRange nebo Range. Specifikují počáteční a koncové body textu, který má být zvýrazněn.

3. Pseudo-element ::highlight()

Tento pseudo-element se používá v CSS k aplikaci stylů na registrované názvy zvýraznění. Funguje jako selektor, který cílí na úseky textu definované rozsahy zvýraznění.

Praktické příklady: Implementace CSS Custom Highlight API

Pojďme prozkoumat několik praktických příkladů, které ilustrují, jak používat CSS Custom Highlight API.

Příklad 1: Základní stylování výběru textu

Tento příklad ukazuje, jak změnit barvu pozadí a textu vybraného textu.

HTML:

<p id="myText">This is some text that can be selected.</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();

// Select the entire paragraph.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);

CSS:

::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}

Vysvětlení:

Příklad 2: Zvýraznění konkrétních slov

Tento příklad ukazuje, jak zvýraznit konkrétní slova v odstavci.

HTML:

<p id="myText">This is a paragraph with the word highlight that we want to highlight.</p>

JavaScript:

const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['highlight'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);

CSS:

::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}

Vysvětlení:

Příklad 3: Dynamické zvýraznění na základě vstupu uživatele

Tento příklad ukazuje, jak dynamicky zvýrazňovat text na základě vstupu uživatele do vyhledávacího pole.

HTML:

<input type="text" id="searchInput" placeholder="Enter text to highlight">
<p id="myText">This is some text that will be dynamically highlighted based on user input.</p>

JavaScript:

const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Clear previous highlights

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});

CSS:

::highlight(searchHighlight) {
  background-color: yellow;
  color: black;
}

Vysvětlení:

Příklad 4: Přizpůsobení vzhledu zvýraznění pomocí ::highlight()

Síla Custom Highlight API spočívá v jeho schopnosti přizpůsobit vzhled a dojem zvýrazněného textu. Zde je ukázka, jak můžete aplikovat stíny, přechody a další vizuální efekty.

HTML:

<p id="customText">Select this text to see a custom highlight effect.</p>

JavaScript:

const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);

CSS:

::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}

Vysvětlení:

Aspekty přístupnosti

Ačkoli je vylepšení vizuálního vzhledu výběru textu důležité, přístupnost by měla být vždy primárním zájmem. Zde je několik pokynů, jak zajistit, aby vaše vlastní styly zvýraznění byly přístupné:

Kompatibilita s prohlížeči

CSS Custom Highlight API je relativně nový webový standard a kompatibilita s prohlížeči se může lišit. Ke konci roku 2023 / začátku roku 2024 podpora roste, ale není univerzálně implementována. Aktuální stav podpory prohlížečů můžete zkontrolovat na webech jako „Can I use...“, abyste byli informováni o aktualizacích kompatibility.

Zvažte použití detekce funkcí k poskytnutí záložních stylů pro prohlížeče, které API ještě nepodporují.

if ('CSS' in window && 'highlights' in CSS) {
  // Použít Custom Highlight API
} else {
  // Poskytnout záložní styly pomocí ::selection
}

Případy použití v praxi

CSS Custom Highlight API má řadu reálných aplikací, včetně:

Osvědčené postupy a tipy

Pokročilé techniky

1. Kombinování více zvýraznění

Můžete kombinovat více zvýraznění a vytvářet tak složitější stylové efekty. Například můžete chtít zvýraznit klíčová slova i text vybraný uživatelem různými styly.

2. Použití událostí k aktualizaci zvýraznění

Můžete použít události JavaScriptu, jako je mouseover nebo click, k dynamické aktualizaci rozsahů zvýraznění na základě interakcí uživatele.

3. Integrace s knihovnami třetích stran

Můžete integrovat Custom Highlight API s knihovnami třetích stran a vytvářet tak sofistikovanější řešení pro zvýrazňování. Například byste mohli použít knihovnu pro zpracování přirozeného jazyka (NLP) k automatické identifikaci a zvýraznění klíčových termínů v dokumentu.

Budoucnost stylingu výběru textu

CSS Custom Highlight API představuje významný pokrok ve stylingu výběru textu. Umožňuje vývojářům vytvářet poutavější, přístupnější a kontextově závislá uživatelská rozhraní. S rostoucí podporou prohlížečů je Custom Highlight API připraveno stát se nezbytným nástrojem pro webové vývojáře po celém světě.

Závěr

CSS Custom Highlight API otevírá svět možností pro přizpůsobení zážitku z výběru textu. Porozuměním klíčovým konceptům, prozkoumáním praktických příkladů a zohledněním pokynů pro přístupnost můžete toto výkonné API využít k vytváření skutečně výjimečných uživatelských rozhraní. Osvojte si Custom Highlight API a posuňte své webové projekty na novou úroveň.

Experimentujte s poskytnutými příklady, přizpůsobte je svým specifickým potřebám a prozkoumejte plný potenciál CSS Custom Highlight API. Vaši uživatelé ocení pozornost věnovanou detailům a vylepšený uživatelský zážitek.