`::highlight()` псевдоэлемент CSS

::highlight() — это CSS псевдоэлемент, который применяет стили к пользовательской подсветке.

Пользовательская подсветка — это набор объектов AbstractRange, который регистрируется на веб-странице с помощью HighlightRegistry.

Псевдоэлемент ::highlight() использует специальную модель наследования, общую для всех псевдоэлементов подсветки. Подробнее о работе этой модели см. в разделе Наследование псевдоэлементов подсветки.

Допустимые свойства

С ::highlight() можно использовать только определённые свойства CSS:

• color
• background-color
• text-decoration и связанные с ним свойства
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color и -webkit-text-stroke-width

В частности, background-image игнорируется.

Синтаксис

::highlight(custom-highlight-name)

Примеры

Подсветка символов

HTML

<p id="rainbow-text">CSS Custom Highlight API rainbow</p>

CSS

#rainbow-text {
  font-family: monospace;
  font-size: 1.5rem;
}

::highlight(rainbow-color-1) {
  color: violet;
  text-decoration: underline;
}
::highlight(rainbow-color-2) {
  color: purple;
  text-decoration: underline;
}
::highlight(rainbow-color-3) {
  color: blue;
  text-decoration: underline;
}
::highlight(rainbow-color-4) {
  color: green;
  text-decoration: underline;
}
::highlight(rainbow-color-5) {
  color: yellow;
  text-decoration: underline;
}
::highlight(rainbow-color-6) {
  color: orange;
  text-decoration: underline;
}
::highlight(rainbow-color-7) {
  color: red;
  text-decoration: underline;
}

JavaScript

const textNode = document.getElementById("rainbow-text").firstChild;

if (!CSS.highlights) {
  textNode.textContent =
    "The CSS Custom Highlight API is not supported in this browser!";
}

// Create and register highlights for each color in the rainbow.
const highlights = [];
for (let i = 0; i < 7; i++) {
  // Create a new highlight for this color.
  const colorHighlight = new Highlight();
  highlights.push(colorHighlight);

  // Register this highlight under a custom name.
  CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}

// Iterate over the text, character by character.
for (let i = 0; i < textNode.textContent.length; i++) {
  // Create a new range just for this character.
  const range = new Range();
  range.setStart(textNode, i);
  range.setEnd(textNode, i + 1);

  // Add the range to the next available highlight,
  // looping back to the first one once we've reached the 7th.
  highlights[i % 7].add(range);
}

Результат

Спецификации

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

См. также

• модуль CSS Custom Highlight API
• CSS Custom Highlight API
• модуль псевдоэлементов CSS