Концепции и использование

Стилизация диапазонов текста на веб-странице может быть очень полезной. Например, веб-приложения для редактирования текста выделяют орфографические или грамматические ошибки, а редакторы кода выделяют синтаксические ошибки.

CSS Custom Highlight API расширяет концепцию других псевдоэлементов для выделения, таких как ::selection, ::spelling-error, ::grammar-error и ::target-text, предоставляя способ создания и стилизации произвольных объектов Range, вместо ограничения браузером определенных диапазонов.

Используя CSS Custom Highlight API, вы можете программно создавать диапазоны текста и выделять их без влияния на структуру DOM на странице.

Существует четыре шага для стилизации диапазонов текста на веб-странице с помощью CSS Custom Highlight API:

1. Создание объектов Range.
2. Создание объектов Highlight для этих диапазонов.
3. Регистрация выделений с помощью HighlightRegistry.
4. Стилизация выделений с помощью псевдоэлемента ::highlight().

Создание диапазонов

Первый шаг - определить диапазоны текста, которые вы хотите стилизовать, создав объекты Range в JavaScript. Например:

const parentNode = document.getElementById("foo");

const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);

const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

Создание выделений

Второй шаг - создать объекты Highlight для ваших диапазонов текста.

Несколько диапазонов могут быть связаны с одним выделением. Если вы хотите выделить несколько частей текста одинаковым образом, вам нужно создать одно выделение и инициализировать его соответствующими диапазонами.

const highlight = new Highlight(range1, range2);

Но вы также можете создать столько выделений, сколько вам нужно. Например, если вы создаете совместный текстовый редактор, в котором каждый пользователь получает разный цвет текста, вы можете создать одно выделение на пользователя, как показано в приведенном ниже фрагменте кода:

const user1Highlight = new Highlight(user1Range1, user1Range2);
const user2Highlight = new Highlight(user2Range1, user2Range2, user2Range3);

Каждое выделение может быть стилизовано по-разному.

Регистрация выделений

После создания выделений, их необходимо зарегистрировать, используя HighlightRegistry, доступный как CSS.highlights.

Реестр - это объект, похожий на карту, используемый для регистрации выделений по именам, как показано ниже:

CSS.highlights.set("user-1-highlight", user1Highlight);
CSS.highlights.set("user-2-highlight", user2Highlight);

В приведенном выше фрагменте кода user-1-highlight и user-2-highlight - это пользовательские идентификаторы, которые можно использовать в CSS для применения стилей к зарегистрированным выделениям.

Вы можете зарегистрировать столько выделений, сколько вам нужно в реестре, а также удалить выделения и очистить весь реестр.

// Удаление одного выделения из реестра.
CSS.highlights.delete("user-1-highlight");

// Очистка реестра.
CSS.highlights.clear();

Стилизация выделений

Заключительный шаг - это оформление зарегистрированных основных элементов. Это делается с помощью псевдоэлемента ::highlight(). Например, для оформления пользовательского-1-выделения выделите, зарегистрированное на предыдущем шаге:

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

Заключение

Применение CSS Custom Highlight API позволяет легко выделить определенные участки текста на веб-странице, не затрагивая структуру DOM документа.

Однако, следует помнить, что CSS Custom Highlight API является экспериментальной технологией, и перед использованием в продакшене необходимо тщательно изучить таблицу совместимости браузеров, чтобы убедиться в корректной работе функционала на разных платформах.

Например, если вы разрабатываете онлайн-редактор кода, вы можете использовать CSS Custom Highlight API для выделения синтаксических ошибок, или если вы разрабатываете текстовый редактор, то можете использовать этот функционал для выделения грамматических или орфографических ошибок.