CSS Custom Highlight API

В конце июня вышел Firefox 140 и теперь CSS Custom Highlight API стал доступен во всех браузерах.

Что это такое?

Иногда нам нужно что-то выделить визуально в тексте. Например, подсветить ошибку или раскрасить выделенный пользователем текст.

В этом нам могли помочь псевдоэлементы ::selection, ::inactive-selection, ::spelling-error и ::grammar-error.

Если задача была посложней — например, подсветка синтаксиса в коде либо визуализация кастомных ошибок — то приходилось оборачивать нужные фрагменты текста в span’ы и добавлять им соответствующие CSS-классы.

Это могло быть не очень удобным, плюс могло аффектить перформанс страницы.

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

Как с ним работать?

Для начала нужно создать объект Range, который будет хранить информацию о выделенном тексте:

const text = document.getElementById('text');

const range = new Range();
// указываем начало выделяемого текста
range.setStart(text, 10);
// указываем конец выделяемого текста
range.setEnd(text, 20);

Далее создаём объект Highlight. Он представляет коллекцию наших рэнжей — обращаясь к хайлайту, мы сможем разом раскрасить все рэнжи:

// в примере передаём один рэнж,
// но можно передать сколько угодно range объектов через запятую
const highlight = new Highlight(range);

Регистрируем хайлайт:

CSS.highlights.set('my-highlight', highlight);

И, напоследок, стилизуем:

::highlight(my-highlight) {
  background-color: pink;
  color: black;
}

Где использовать?

Custom Highlight API может пригодиться для:

• реализации поиска текста на странице — например, как тут;
• подсветки кастомных ошибок в тексте, если вы делаете что-то наподобие Grammarly;
• подсветки синтаксиса кода — Брамус написал подробную статью о том, как подружить Prism и Custom Highlight API, а Андре Руфферт на её основе собрал веб-компонент для подсветки синтаксиса.