interactivity CSS property

Syntax

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

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

Werte

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte spezifiziert:

auto

Ausgewählte Elemente befinden sich in ihrem Standardzustand in Bezug auf 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 ihre Nachkommen sind inert.

Formale 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-inert-Attributreferenzseite für eine detaillierte Beschreibung des inert-Zustands.

Ein typischer Anwendungsfall für interactivity: inert ist bei paginierten Inhalten, wie Karussells, wenn Sie möchten, dass nur der derzeit sichtbare Inhalt und die Steuerelemente interaktiv sind. In solchen Fällen könnte das unerwartete Fokussieren auf einen nicht sichtbaren Link oder Knopf das Erlebnis beeinträchtigen.

Wenn der inert-Zustand eines Elements sowohl durch HTML (das inert-Attribut oder eine automatische Browsereinstellung) als auch durch CSS (die interactive-Eigenschaft) gleichzeitig spezifiziert ist, hat das CSS keinen Einfluss – es kann die Inertheit von HTML nicht überschreiben.

Zum Beispiel wird das folgende HTML-Element inert sein:

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

Das Setzen von interactive: auto darauf hat keinen Effekt.

Standard-Inertheit

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

• Ein Vorfahre eines Elements kann auf einen inert-Zustand gesetzt sein, über die interactive-Eigenschaft oder das inert-Attribut.
• Während ein modales <dialog> angezeigt wird, wird der Rest der Seite automatisch in einen inert-Zustand gesetzt.

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ützten 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 folgendermaßen aus:

Untersuchung der Effekte der Inertheit

In diesem Beispiel untersuchen wir die Effekte der interactivity-Eigenschaft.

HTML

Das Markup enthält zwei <p>-Elemente, von denen jedes einen Link enthält. Der zweite Absatz hat auch eine Klasse inert darauf gesetzt sowie ein Kind-<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 dem 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, nicht aber im zweiten, und dass Sie im zweiten Absatz keinen Text suchen, auswählen oder mit dem Link interagieren können sollten.

.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 Ereignis-Handler auf jeden Absatz, der einen Klassennamen umschaltet, wenn darauf geklickt wird, den Klassennamen hinzufügt und dann die Klasse nach zwei Sekunden wieder 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; daher verhält er sich nicht wie der erste. Beispielsweise 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 nicht darauf registriert.

Setzen von nicht sichtbaren Elementen auf inert mit einer Ansicht-Zeitachse

Dieses Beispiel zeigt horizontal scrollenden paginierten Inhalt, bei dem jede Seite mithilfe von CSS Scroll Snap eingerastet wird, und die Inertheit wird über eine scroll-driven Animation gesteuert, die eine Ansichtsfortschrittszeitachse verwendet. Inhalt, der im Scroll-Container angezeigt wird, ist interaktiv; er wird inert, wenn er in den überlaufenden Inhalt hinausgeht.

HTML

Das HTML besteht aus einer Überschrift auf oberster Ebene und einer ungeordneten Liste mit vier Listenelementen, die jeweils den Inhalt für eine separate 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

Ein 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, damit überlaufender Inhalt scrollt. Die untergeordneten 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 verursacht, dass die Snap-Ziele des Containers horizontal eingerastet werden. Das Schlüsselwort mandatory bedeutet, dass der Container immer an ein 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;
}

Jedes Listenelement hat die folgenden Stile angewendet:

• Ein flex-Wert von 0 0 98vw, wodurch jedes Element so groß wie der Scroll-Container minus des auf die Liste gesetzten gap ist (siehe die gap-Deklaration in der vorher gezeigten ul-Regel). Dies hat auch den Effekt, jede Seite im Scroll-Container zu zentrieren.
• 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-Ansichtsfortschrittszeitachse zu deklarieren und diese Zeitachse so einzustellen, dass sie im Inline-Richtung fortschreitet, während sie durch den übergeordneten Scroll-Container bewegt wird.
• Ein animation-timeline-Wert mit demselben Namen wie der view-timeline-name, wie im view-timeline-Shorthand definiert, was bedeutet, dass die benannte Ansichtsfortschrittszeitachse verwendet wird, um den Fortschritt der auf das Element angewendeten Animationen zu steuern.
• Ein animation-name und animation-fill-mode, das die auf dieses Element angewendete Animation und ihren Fill-Modus definiert. Der both-Wert ist erforderlich, weil Sie den Startanimationszustand auf das Element anwenden möchten, bevor die Animation beginnt, und den Endanimationszustand auf das Element anwenden möchten, nachdem die Animation endet. Wenn die Animation nicht beibehalten wird, wird die über die Animation angewendete interactivity: inert-Deklaration nicht auf Listenelemente angewendet, wenn sie sich außerhalb des Scroll-Containers befinden.

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 @keyframes der Animation definiert. interactivity: inert wird an den Positionen entry 0% und exit 100% der Ansichtszeitachse gesetzt. Kombiniert mit dem animation-fill-mode: both-Wert bedeutet dies, dass die Listenelemente inert sind, bevor der Beginn and nach dem Ende der Ansichtszeitachse, das heißt, wenn sie sich außerhalb des Scroll-Containers befinden. Zwischen den Positionen entry 1% und exit 99% wird interactivity: auto auf die Listenelemente gesetzt, was bedeutet, dass sie normalerweise interaktiv sind, 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 Seiteneffekt zu sehen – jede Seite wird eingeblendet. Versuchen Sie, zwischen den Links und den Schaltflächen zu tabben; Sie werden feststellen, dass nur die auf dem Bildschirm interaktiv sind und angeklickt werden können.

Barrierefreiheit

Berücksichtigen Sie die Barrierefreiheit sorgfältig, wenn Sie Elemente inert machen. Standardmäßig gibt es keine visuelle Möglichkeit zu erkennen, ob ein Element oder sein Unterbaum inert ist oder nicht. Als Webentwickler liegt es in Ihrer Verantwortung, eindeutig zu kennzeichnen, welche Teile des Inhalts aktiv und welche inert sind.

Erinnern Sie sich bei der Bereitstellung von visuellen und nicht-visuellen Hinweisen zur Inertheit des Inhalts auch daran, dass das visuelle Ansichtsfenster möglicherweise nur Abschnitte des Inhalts enthält. Benutzer könnten in einen kleinen Abschnitt des Inhalts hineingezoomt sein, oder Benutzer könnten den Inhalt überhaupt nicht sehen können. Nicht eindeutig als inert erkannte Abschnitte können zu Frustration und einer schlechten Benutzererfahrung führen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Attribut inert
• HTMLElement.inert