CSS-свойство `interactivity`

CSS-свойство interactivity определяет, должны ли элемент и его дочерние узлы быть инертными.

Синтаксис

/* Keyword values */
interactivity: auto;
interactivity: inert;

/* Global values */
interactivity: inherit;
interactivity: initial;
interactivity: revert;
interactivity: revert-layer;
interactivity: unset;

Значения

Это свойство задаётся одним из следующих ключевых слов:

auto

Выбранные элементы находятся в состоянии инертности по умолчанию. Обычно это означает, что с ними можно взаимодействовать, но так бывает не всегда. Это значение по умолчанию.

inert

Выбранные элементы и их потомки инертны.

Формальное определение

Формальный синтаксис

interactivity = 
  auto |
  inert

Описание

Свойство interactivity позволяет указать, должны ли элемент и его потомки быть инертными. Подробное описание инертного состояния см. на странице справки по HTML-атрибуту inert.

Типичный вариант использования interactivity: inert — содержимое с постраничной навигацией, например карусели, когда взаимодействовать можно только с содержимым и элементами управления текущей видимой страницы. В таких случаях неожиданная установка фокуса на ссылку или кнопку за пределами экрана может испортить впечатление от использования.

Если инертное состояние элемента одновременно задано средствами HTML (атрибутом inert или автоматической настройкой браузера) и CSS (свойством interactive), CSS не окажет эффекта — он не может переопределить инертность, заданную средствами HTML.

Например, следующий HTML-элемент будет инертным:

<button inert>You can't press me</button>

Назначение ему значения interactive: auto не даст никакого эффекта.

Инертность по умолчанию

Большинство элементов по умолчанию интерактивны, но так бывает не всегда:

• Родительский элемент может быть переведён в инертное состояние с помощью свойства interactive или атрибута inert.
• Когда отображается модальный элемент <dialog>, остальная часть страницы автоматически переводится в инертное состояние.

Примеры

Основы использования interactivity

В этом примере есть два элемента <input>. Для второго с помощью класса задано значение interactivity: inert, поэтому в поддерживающих браузерах на него нельзя установить фокус или редактировать его.

<p>
  <label>
    This input is interactive:
    <input type="text" name="one" value="editable" />
  </label>
</p>
<p>
  <label>
    This input is not interactive:
    <input type="text" name="two" value="Not editable" class="inert" />
  </label>
</p>

.inert {
  interactivity: inert;
  background-color: lightpink;
}

Результат

Результат выглядит так:

Изучение эффектов инертности

В этом примере мы изучим эффекты свойства interactivity.

HTML

В разметке есть два элемента <p>, каждый из которых содержит ссылку. Второму абзацу также назначен класс inert, а его дочернему элементу <span> задан атрибут contenteditable, чтобы его можно было редактировать.

<p>
  This paragraph is not
  <a
    href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert"
    >inert</a
  >. You should be able to select the text content, search for it using
  in-browser search features, and focus and click the link. There is a
  <code>click</code> event handler set on the paragraph that changes the border
  color for a second when it is clicked anywhere.
  <span contenteditable>This sentence has <code>contenteditable</code> set on
  it, so it is editable</span>.
</p>

<p class="inert">
  This paragraph is
  <a
    href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert"
    >inert</a
  >. You won't be able to select the text content, search for it using
  in-browser search features, focus and click the link, or issue
  <code>click</code> events on it (the border color won't change when it is
  clicked).
  <span contenteditable
    >This sentence has <code>contenteditable</code> set on it, but it is not
    editable because it is inert</span
  >.
</p>

CSS

Для второго абзаца мы задаём свойству interactivity значение inert, делая его инертным. Это означает, что текст contenteditable в первом абзаце можно редактировать, а во втором — нет; кроме того, во втором абзаце нельзя искать или выделять текст и взаимодействовать со ссылкой.

.inert {
  interactivity: inert;
}

[contenteditable] {
  outline: 1px dashed lightblue;
}

.borderChanged {
  border-color: orange;
}

body {
  font: 1.2em / 1.5 system-ui;
}

p {
  border: 5px solid black;
  padding: 10px;
  width: 90%;
  margin: 20px auto;
}

JavaScript

Для каждого абзаца мы задаём обработчик события, который переключает имя класса при нажатии: добавляет имя класса, а через две секунды удаляет его.

const paras = document.querySelectorAll("p");

function tempBorderChange(e) {
  const targetPara = e.currentTarget;
  targetPara.classList.add("borderChanged");
  setTimeout(() => {
    targetPara.classList.remove("borderChanged");
  }, 2000);
}

for (para of paras) {
  para.addEventListener("click", tempBorderChange);
}

Результат

Обратите внимание: второй абзац инертен, поэтому он ведёт себя не так, как первый. Например, ссылку нельзя нажать или сфокусировать, текст нельзя выделить или найти, contenteditable <span> нельзя редактировать, а события click на нём не срабатывают.

Перевод элементов за пределами экрана в инертное состояние с помощью временной шкалы просмотра

В этом примере показано содержимое с горизонтальной прокруткой и постраничной навигацией: каждая страница фиксируется с помощью CSS Scroll Snap, а инертность управляется анимацией, управляемой прокруткой, в которой используется временная шкала прогресса просмотра. С содержимым, отображаемым в контейнере прокрутки, можно взаимодействовать; оно становится инертным, когда перемещается за пределы видимой области в переполняющее содержимое.

HTML

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

<h1>Pagination interactivity demo</h1>
<ul>
  <li>
    <h2>Page 1</h2>
    <p>This is the first page of content.</p>
    <p><a href="#">A demo link</a>.</p>
    <p><button>Press me</button></p>
  </li>
  <li>
    <h2>Page 2</h2>
    <p>This is the second page of content.</p>
    <p><a href="#">A demo link</a>.</p>
    <p><button>Press me</button></p>
  </li>
  <li>
    <h2>Page 3</h2>
    <p>This is the third page of content.</p>
    <p><a href="#">A demo link</a>.</p>
    <p><button>Press me</button></p>
  </li>
  <li>
    <h2>Page 4</h2>
    <p>This is the fourth page of content.</p>
    <p><a href="#">A demo link</a>.</p>
    <p><button>Press me</button></p>
  </li>
</ul>

CSS

Для ненумерованного списка задаётся width со значением 100vw, чтобы его ширина совпадала с шириной области просмотра. Мы задаём фиксированную height, добавляем немного padding и задаём для overflow-x значение scroll, чтобы можно было прокручивать переполняющее содержимое. Дочерние элементы списка располагаются по горизонтали с помощью display: flex. Для этого flex-контейнера задаётся значение scroll-snap-type x mandatory, превращающее его в контейнер с фиксацией прокрутки. Ключевое слово x приводит к горизонтальной фиксации целевых точек фиксации контейнера. Ключевое слово mandatory означает, что контейнер всегда будет фиксироваться на целевой точке по завершении прокрутки.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  text-align: center;
  margin: 0;
}

button {
  background-color: white;
}

ul {
  width: 100vw;
  height: 250px;
  padding: 1vw;
  overflow-x: scroll;
  display: flex;
  gap: 1vw;
  scroll-snap-type: x mandatory;
}

Для каждого элемента списка применяются следующие стили:

• Значение flex 0 0 98vw заставляет каждый элемент занимать всю ширину контейнера прокрутки за вычетом значения gap, заданного для списка (см. объявление gap в правиле ul, показанном ранее). Это также позволяет центрировать каждую страницу внутри контейнера прокрутки.
• Значение scroll-snap-align center заставляет контейнер прокрутки фиксироваться по центру каждой целевой точки фиксации.
• Значение view-timeline --inner-change inline объявляет элемент объектом временной шкалы прогресса просмотра --inner-change и задаёт её продвижение в строчном направлении по мере перемещения элемента в родительском контейнере прокрутки.
• Значение animation-timeline совпадает с именем view-timeline-name, заданным в сокращённом свойстве view-timeline. Это означает, что именованная временная шкала прогресса просмотра будет управлять ходом анимаций, применённых к элементу.
• Свойства animation-name и animation-fill-mode задают анимацию, применённую к этому элементу, и режим её заполнения. Значение both необходимо, потому что начальное состояние анимации должно применяться к элементу до начала анимации, а конечное — после её завершения. Если анимация не сохраняется, объявление interactivity: inert, применённое с помощью анимации, не будет применяться к элементам списка, находящимся за пределами контейнера прокрутки.

li {
  list-style-type: none;
  background-color: #eeeeee;
  border: 1px solid #dddddd;
  padding: 20px;

  flex: 0 0 98vw;

  scroll-snap-align: center;

  view-timeline: --inner-change inline;
  animation-timeline: --inner-change;
  animation-name: inert-change;
  animation-fill-mode: both;
}

Наконец, задаются правила анимации @keyframes. Значение interactivity: inert задаётся в точках entry 0% и exit 100% временной шкалы просмотра. В сочетании со значением animation-fill-mode: both это означает, что элементы списка будут инертны до начала и после окончания временной шкалы просмотра, то есть когда они находятся за пределами контейнера прокрутки. Между точками entry 1% и exit 99% для элементов списка задаётся значение interactivity: auto, поэтому с ними можно нормально взаимодействовать, когда они находятся внутри контейнера прокрутки.

@keyframes inert-change {
  entry 0%,
  exit 100% {
    interactivity: inert;
  }

  entry 1%,
  exit 99% {
    interactivity: auto;
  }
}

Объяснение значений позиций см. на странице справки по свойству animation-range.

Результат

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

Особенности доступности

При переводе элементов в инертное состояние внимательно учитывайте доступность. По умолчанию визуально определить, является ли элемент или его поддерево инертным, невозможно. Как веб-разработчик, вы должны чётко обозначать активные и инертные части содержимого.

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

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

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

См. также

• HTML-атрибут inert
• HTMLElement.inert