interactivity

Syntax

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

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

Werte

auto

Ausgewählte Elemente befinden sich in ihrem Standardzustand hinsichtlich der Inertheit. Dies bedeutet in der Regel, dass sie interaktiv sind, aber das ist nicht immer der Fall. Dies ist der Standardwert.

inert

Ausgewählte Elemente und deren Nachkommen sind inert.

Offizielle Definition

Formale Syntax

interactivity = 
  auto   |
  inert  

Beschreibung

Die interactivity-Eigenschaft kann verwendet werden, um festzulegen, ob ein Element und seine Nachkommen inert sind. Siehe die HTML-Referenzseite zum inert-Attribut für eine detaillierte Beschreibung des Inertheitszustands.

Ein typischer Anwendungsfall für interactivity: inert ist bei paginiertem Inhalt, wie Karussellen, wenn Sie nur den derzeit sichtbaren Inhalt und die Steuerelemente interaktiv machen möchten. In solchen Fällen könnte ein unerwartetes Fokussieren auf eine außerhalb des Bildschirms befindliche Verknüpfung oder Schaltfläche das Erlebnis beeinträchtigen.

Wenn der Inertheitszustand eines Elements sowohl durch HTML (das inert-Attribut oder eine automatische Browsereinstellung) als auch durch CSS (die interactive-Eigenschaft) gleichzeitig festgelegt wird, hat CSS keinen Effekt — es kann die Inertheit des HTML nicht überschreiben.

Zum Beispiel wird das folgende HTML-Element inert sein:

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

Das Festlegen von interactive: auto darauf wird keinen Effekt haben.

Standard-Inertheit

Die meisten Elemente sind standardmäßig interaktiv, aber das ist nicht immer der Fall:

• Ein Vorfahr-Element kann so eingestellt sein, dass es sich in einem inerten Zustand befindet, entweder durch die interactive-Eigenschaft oder durch das inert-Attribut.
• Während ein modales <dialog> angezeigt wird, befindet sich der Rest der Seite automatisch in einem inerten Zustand.

Beispiele

Grundlegende Verwendung von interactivity

In diesem Beispiel haben wir zwei <input>-Elemente. Das zweite hat interactivity: inert über eine Klasse gesetzt, und ist daher in unterstützenden Browsern nicht fokussierbar oder bearbeitbar.

<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;
}

Ergebnis

Die Ausgabe sieht so aus:

Erkundung der Auswirkungen von Inertheit

In diesem Beispiel erkunden wir die Auswirkungen der interactivity-Eigenschaft.

HTML

Das Markup enthält zwei <p>-Elemente, von denen jedes einen Link enthält. Der zweite Absatz hat ebenfalls eine Klasse inert gesetzt und ein untergeordnetes <span>-Element mit contenteditable, um es bearbeitbar zu machen.

<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

Wir setzen die interactivity-Eigenschaft auf den zweiten Absatz auf einen Wert von inert, was ihn inert macht. Das bedeutet, dass Sie den contenteditable-Text im ersten Absatz bearbeiten können sollten, aber nicht im zweiten, und Sie sollten nicht nach Text suchen, Text auswählen oder mit dem Link im zweiten Absatz interagieren können.

.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

Wir setzen einen Event-Handler auf jeden Absatz, der bei einem Klick einen Klassennamen umschaltet, den Klassennamen hinzufügt und die Klasse nach zwei Sekunden entfernt.

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);
}

Ergebnis

Beachten Sie, wie der zweite Absatz inert ist; er verhält sich daher nicht wie der erste Absatz. Zum Beispiel kann der Link nicht geklickt oder fokussiert werden, der Text kann nicht ausgewählt oder durchsucht werden, das contenteditable <span> ist nicht bearbeitbar, und click-Ereignisse werden darauf nicht registriert.

Festlegen von außerhalb des Bildschirms befindlichen Elementen als inert mit einer View-Timeline

Dieses Beispiel zeigt horizontal scrollbaren paginierten Inhalt, bei dem jede Seite mit CSS Scroll Snap einrastet, und die Inertheit über eine scroll-gesteuerte Animation gesteuert wird, die eine View Progress Timeline verwendet. Das im Scroll-Container angezeigte Inhalt ist interaktiv; er wird inert, wenn er in den überlaufenden Inhalt übergeht.

HTML

Das HTML besteht aus einer Überschrift auf höchster Ebene und einer ungeordneten Liste mit vier Listenelementen, die jeweils den Inhalt einer separaten Seite enthalten.

<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

Eine width von 100vw wird auf die ungeordnete Liste gesetzt, um sie so breit wie das Ansichtsfenster zu machen. Wir fügen eine feste height, etwas padding und einen overflow-x-Wert von scroll hinzu, sodass überlaufender Inhalt gescrollt wird. Die Kind-Listenelemente werden horizontal mit display: flex angeordnet. Dieser Flex-Container erhält einen scroll-snap-type-Wert von x mandatory, um ihn in einen Scroll Snap Container zu verwandeln. Das Schlüsselwort x bewirkt, dass die Snap-Ziele des Containers horizontal einrasten. Das Schlüsselwort mandatory bedeutet, dass der Container immer an einem Snap-Ziel am Ende einer Scroll-Aktion einrastet.

* {
  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;
}

Auf jedes Listenelement werden die folgenden Stile angewendet:

• Ein flex-Wert von 0 0 98vw, der jedes Element dazu zwingt, so groß zu sein wie der Scroll-Container minus der auf die Liste gesetzten gap (siehe die gap-Deklaration in der zuvor gezeigten ul-Regel). Dies hat auch den Effekt, dass jede Seite im Scroll-Container zentriert wird.
• Ein scroll-snap-align-Wert von center, um den Scroll-Container dazu zu bringen, an der Mitte jedes Snap-Ziels einzurasten.
• Ein view-timeline-Wert von --inner-change inline, um das Element als Subjekt der --inner-change View Progress Timeline zu erklären und diese Timeline so einzustellen, dass sie im Inline-Richtung fortschreitet, während es durch seinen übergeordneten Scroll-Container bewegt wird.
• Ein animation-timeline-Wert mit demselben Namen wie view-timeline-name, wie in der view-timeline-Kurzform definiert, was bedeutet, dass die benannte View Progress Timeline verwendet wird, um die Fortschritte der auf das Element angewendeten Animationen zu steuern.
• Ein animation-name und animation-fill-mode, die die auf dieses Element angewendete Animation und den Fill-Modus definieren. Der Wert both wird benötigt, da Sie möchten, dass der Start-Animationszustand auf das Element vor dem Start der Animation angewendet wird, und der End-Animationszustand auf das Element, nachdem die Animation beendet ist. Wenn die Animation nicht beibehalten wird, wird die durch die Animation angewandte interactivity: inert-Deklaration nicht auf Listenelemente außerhalb des Scroll-Containers angewendet.

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;
}

Schließlich werden die Animation-@keyframes definiert. interactivity: inert wird bei den Positionen entry 0% und exit 100% der View Timeline gesetzt. In Kombination mit dem animation-fill-mode: both-Wert bedeutet dies, dass die Listenelemente vor dem Beginn und nach dem Ende der View Timeline inert sein werden, das heißt, wenn sie außerhalb des Scroll-Containers sind. Zwischen den Positionen entry 1% und exit 99% wird interactivity: auto auf die Listenelemente gesetzt, was bedeutet, dass sie interaktiv genutzt werden können, wenn sie sich im Scroll-Container befinden.

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

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

Siehe die animation-range-Referenzseite für eine Erklärung der Positionswerte.

Ergebnis

Scrollen Sie die ungeordnete Liste horizontal, um den Paginationseffekt zu sehen — jede Seite rastet ein. Versuchen Sie, zwischen den Links und den Schaltflächen zu wechseln; Sie werden feststellen, dass nur die sichtbaren interaktiv sind und fokussiert werden können.

Barrierefreiheitsbedenken

Berücksichtigen Sie die Barrierefreiheit sorgfältig, wenn Sie Elemente inert machen. Standardmäßig gibt es keine visuelle Möglichkeit, festzustellen, ob ein Element oder sein Teilbaum inert ist. Als Webentwickler liegt es in Ihrer Verantwortung, die aktiven und inerten Inhaltsbereiche klar zu kennzeichnen.

Während Sie visuelle und nicht-visuelle Hinweise auf die Inertheit von Inhalt geben, denken Sie auch daran, dass das visuelle Ansichtsfenster möglicherweise nur Teile des Inhalts enthält. Benutzer könnten in einen kleinen Bereich des Inhalts gezoomt sein oder den Inhalt möglicherweise gar nicht sehen können. Nicht offensichtlich inerte Bereiche können zu Frustration und einer schlechten Benutzererfahrung führen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Attribut inert
• HTMLElement.inert