Выделение: свойство priority

Ограниченная доступность

Эта функция не является базовой, так как она не работает в некоторых из наиболее широко используемых браузеров.

Можно создавать Range объекты, которые перекрываются в документе.

При использовании перекрывающихся диапазонов несколькими разными объектами Highlight и при стилизации этих выделений с помощью псевдоэлементов ::highlight, это может привести к конфликтам стилей.

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

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

Свойство priority интерфейса Highlight является Number, используемым для изменения этого поведения по умолчанию и определения, стиль какого выделения должен использоваться для разрешения конфликтов стилей в перекрывающихся частях.

Обратите внимание, что все стили выделения применяются, и браузеру требуется разрешить конфликты только тогда, когда одни и те же свойства CSS используются несколькими перекрывающимися выделениями. Разрешение конфликтов стилей выделений также не зависит от порядка, в котором правила псевдоэлементов ::highlight появляются в исходном коде, или от того, помечены ли свойства CSS как !important.

Значение

Целое число.

Примеры

По умолчанию

HTML

<p>Time is an illusion. Lunchtime doubly so.</p>

CSS

::highlight(highlight-2) {
  color: blue;
}

::highlight(highlight-1) {
  color: white;
  background: orange;
}

JavaScript

const text = document.querySelector("p").firstChild;

// Create two overlapping highlights
const range1 = new Range();
range1.setStart(text, 5);
range1.setEnd(text, 25);

const range2 = new Range();
range2.setStart(text, 15);
range2.setEnd(text, 35);

const highlight1 = new Highlight(range1);
const highlight2 = new Highlight(range2);

CSS.highlights.set("highlight-1", highlight1);
CSS.highlights.set("highlight-2", highlight2);

Результат

Как видно ниже, по умолчанию часть текстового узла, где два зарегистрированных выделения перекрываются, отображается синим цветом, потому что highlight-2 зарегистрировано после highlight-1. Цвет фона, определенный highlight-1, включает весь диапазон range1, так как он не конфликтует с другим цветом фона.

Установление приоритета

HTML

<button id="prioritize-1" type="button">Prioritize 1</button>
<button id="prioritize-2" type="button">Prioritize 2</button>
<button id="reset" type="button">Reset</button>
<p>Time is an illusion. Lunchtime doubly so.</p>

CSS

::highlight(highlight-1) {
  background-color: blue;
  color: white;
}

::highlight(highlight-2) {
  background-color: orange;
}

JavaScript

const text = document.querySelector("p").firstChild;

// Create two overlapping highlights
const range1 = new Range();
range1.setStart(text, 5);
range1.setEnd(text, 25);

const range2 = new Range();
range2.setStart(text, 15);
range2.setEnd(text, 35);

const highlight1 = new Highlight(range1);
const highlight2 = new Highlight(range2);

CSS.highlights.set("highlight-1", highlight1);
CSS.highlights.set("highlight-2", highlight2);

// Add buttons to change the highlight priority.
const prioritize1 = document.querySelector("#prioritize-1");
const prioritize2 = document.querySelector("#prioritize-2");
const reset = document.querySelector("#reset");

prioritize1.addEventListener("click", () => {
  highlight1.priority = 1;
  highlight2.priority = 0;
});

prioritize2.addEventListener("click", () => {
  highlight1.priority = 0;
  highlight2.priority = 1;
});

reset.addEventListener("click", () => {
  highlight1.priority = 0;
  highlight2.priority = 0;
});

Результат

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

Спецификация
Модуль API пользовательского выделения CSS уровня 1 # dom-highlight-priority

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`priority`	105	105	предварительная версия	91	17.2	105	Нет	72	17.2	20.0	105

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Highlight/priority