M

MLOG

Български

Отключете разширено стилизиране на селектиран текст с CSS Custom Highlight API. Научете се да персонализирате изживяването при селектиране за по-добро ангажиране на потребителите.

CSS Custom Highlight API: Овладяване на стилизирането при селектиране на текст

Скромният акт на селектиране на текст на уеб страница е нещо, което повечето потребители извършват без да се замислят. Като разработчици обаче, ние често се стремим да подобрим дори най-фините взаимодействия. CSS Custom Highlight API ни дава възможност да революционизираме изживяването при селектиране на текст, предлагайки безпрецедентен контрол върху начина, по който изглежда избраният текст. Тази способност надхвърля простите промени на цвета на фона и текста, позволявайки създаването на сложни и ангажиращи потребителски интерфейси.

Какво представлява CSS Custom Highlight API?

CSS Custom Highlight API е модерен уеб стандарт, който предоставя начин за стилизиране на външния вид на текстови селекции (и други маркирани диапазони) с помощта на CSS. Той въвежда псевдоелемента ::highlight(), който е насочен към конкретни текстови диапазони въз основа на критерии, дефинирани от разработчика. Този API преодолява ограниченията на традиционния псевдоелемент ::selection, който предлага много основни опции за стилизиране. С Custom Highlight API можете да създавате силно персонализирани и контекстуално зависими стилове за селектиране на текст.

Защо да използваме CSS Custom Highlight API?

Custom Highlight API предлага няколко предимства пред традиционните методи за стилизиране на текстови селекции:

Разбиране на ключовите концепции

Преди да се потопим в примери с код, е важно да разберем основните концепции на CSS Custom Highlight API:

1. Регистрация на маркиране (Highlight Registration)

Процесът започва с регистриране на персонализирано име за маркиране с помощта на JavaScript. Това име след това ще се използва в CSS за насочване към конкретни текстови селекции.

2. Диапазони на маркиране (Highlight Ranges)

Диапазоните на маркиране определят конкретните текстови участъци, които трябва да бъдат стилизирани. Тези диапазони се създават програмно с помощта на Highlight и StaticRange или Range API-та. Те указват началната и крайната точка на текста, който трябва да бъде маркиран.

3. Псевдоелементът ::highlight()

Този псевдоелемент се използва в CSS за прилагане на стилове към регистрирани имена за маркиране. Той действа като селектор, насочен към текстовите участъци, дефинирани от диапазоните на маркиране.

Практически примери: Внедряване на CSS Custom Highlight API

Нека разгледаме няколко практически примера, за да илюстрираме как да използваме CSS Custom Highlight API.

Пример 1: Основно стилизиране на селектиран текст

Този пример демонстрира как да промените цвета на фона и текста на избрания текст.

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;
}

Обяснение:

Пример 2: Маркиране на конкретни думи

Този пример демонстрира как да маркирате конкретни думи в рамките на параграф.

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;
}

Обяснение:

Пример 3: Динамично маркиране въз основа на въведеното от потребителя

Този пример демонстрира как динамично да се маркира текст въз основа на въведеното от потребителя в поле за търсене.

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;
}

Обяснение:

Пример 4: Персонализиране на външния вид на маркирането с ::highlight()

Силата на Custom Highlight API се крие в способността му да персонализира вида и усещането на маркирания текст. Ето как можете да прилагате сенки, градиенти и други визуални ефекти.

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;
}

Обяснение:

Съображения за достъпност

Макар подобряването на визуалния облик на текстовите селекции да е важно, достъпността винаги трябва да бъде основна грижа. Ето няколко насоки, за да се уверите, че вашите персонализирани стилове за маркиране са достъпни:

Съвместимост с браузъри

CSS Custom Highlight API е сравнително нов уеб стандарт и съвместимостта с браузъри може да варира. Към края на 2023 г./началото на 2024 г. поддръжката нараства, но не е универсално внедрена. Можете да проверите текущия статус на поддръжка от браузъри на уебсайтове като "Can I use...", за да сте информирани за актуализациите на съвместимостта.

Обмислете използването на feature detection, за да предоставите резервни стилове за браузъри, които все още не поддържат API.

if ('CSS' in window && 'highlights' in CSS) {
  // Използвайте Custom Highlight API
} else {
  // Предоставете резервни стилове с ::selection
}

Приложения в реалния свят

CSS Custom Highlight API има многобройни приложения в реалния свят, включително:

Най-добри практики и съвети

Напреднали техники

1. Комбиниране на множество маркирания

Можете да комбинирате множество маркирания, за да създадете по-сложни ефекти на стилизиране. Например, може да искате да маркирате както ключови думи, така и избран от потребителя текст с различни стилове.

2. Използване на събития за актуализиране на маркиранията

Можете да използвате JavaScript събития, като mouseover или click, за динамично актуализиране на диапазоните на маркиране въз основа на взаимодействията на потребителя.

3. Интеграция с библиотеки на трети страни

Можете да интегрирате Custom Highlight API с библиотеки на трети страни, за да създадете по-сложни решения за маркиране. Например, можете да използвате библиотека за обработка на естествен език (NLP), за да идентифицирате и маркирате автоматично ключови термини в документ.

Бъдещето на стилизирането при селектиране на текст

CSS Custom Highlight API представлява значителен напредък в стилизирането при селектиране на текст. Той дава възможност на разработчиците да създават по-ангажиращи, достъпни и контекстуално зависими потребителски интерфейси. С нарастващата поддръжка от страна на браузърите, Custom Highlight API е на път да се превърне в основен инструмент за уеб разработчиците по целия свят.

Заключение

CSS Custom Highlight API отключва свят от възможности за персонализиране на изживяването при селектиране на текст. Чрез разбиране на ключовите концепции, изследване на практически примери и съобразяване с насоките за достъпност, можете да използвате този мощен API, за да създадете наистина изключителни потребителски интерфейси. Възползвайте се от Custom Highlight API и издигнете вашите уеб проекти на ново ниво.

Експериментирайте с предоставените примери, адаптирайте ги към вашите специфични нужди и изследвайте пълния потенциал на CSS Custom Highlight API. Вашите потребители ще оценят вниманието към детайла и подобреното потребителско изживяване.