content-visibility

visible

Keine Auswirkung. Die Inhalte des Elements werden wie gewohnt angeordnet und gerendert. Dies ist der Standardwert.

hidden

Das Element überspringt seine Inhalte. Die übersprungenen Inhalte dürfen nicht für Benutzeragenten-Funktionen zugänglich sein, wie z. B. Seitensuche, Tab-Reihenfolge-Navigation, etc., noch auswählbar oder fokussierbar sein. Dies ist ähnlich wie wenn die Inhalte display: none erhalten.

auto

Das Element aktiviert Layout-Einhaltung, Stil-Einhaltung und Mal-Einhaltung. Wenn das Element nicht für den Benutzer relevant ist, überspringt es auch seine Inhalte. Im Gegensatz zu hidden müssen die übersprungenen Inhalte dennoch wie gewohnt für Benutzeragenten-Funktionen verfügbar sein, wie z. B. Seitensuche, Tab-Reihenfolge-Navigation, etc., und müssen fokussierbar und auswählbar sein.

Unterstützende Browser animieren/übergängen content-visibility mit einer Variation des diskreten Animationstypen.

Diskrete Animation bedeutet im Allgemeinen, dass die Eigenschaft 50% der Animation zwischen zwei Werten wechseln wird. Im Fall von content-visibility, wird der Browser jedoch zwischen den beiden Werten wechseln, um den animierten Inhalt während der gesamten Animationsdauer anzuzeigen. So zum Beispiel:

• Wenn content-visibility von hidden zu visible animiert wird, wechselt der Wert bei 0% der Animationsdauer zu visible, sodass er durchgehend sichtbar ist.
• Wenn content-visibility von visible zu hidden animiert wird, wechselt der Wert bei 100% der Animationsdauer zu hidden, sodass er durchgehend sichtbar ist.

Dieses Verhalten ist nützlich, um Ein-/Austrittsanimationen zu erstellen, bei denen Sie beispielsweise Inhalte aus dem DOM mit content-visibility: hidden entfernen möchten, aber eine sanfte Übergangsanimation (wie ein Ausblenden) wünschen, anstatt dass diese sofort verschwindet.

Beim Animieren von content-visibility mit CSS-Übergängen muss transition-behavior: allow-discrete auf content-visibility gesetzt werden. Dies aktiviert effektiv content-visibility Übergänge.

content-visibility = 
  visible  |
  auto     |
  hidden   

Off-Screen-Inhalte innerhalb einer content-visibility: auto Eigenschaft bleiben im Document Object Model und im Barrierefreiheitsbaum erhalten. Dies ermöglicht es, die Seitenleistung mit content-visibility: auto zu verbessern, ohne die Zugänglichkeit negativ zu beeinträchtigen.

Da Stile für Off-Screen-Inhalte nicht gerendert werden, erscheinen Elemente, die absichtlich mit display: none oder visibility: hidden ausgeblendet werden, dennoch im Barrierefreiheitsbaum. Wenn Sie nicht möchten, dass ein Element im Barrierefreiheitsbaum erscheint, verwenden Sie aria-hidden="true".

Das folgende Beispiel zeigt die Verwendung von content-visibility: auto, um das Malen und Rendern von Off-Screen-Abschnitten zu überspringen. Wenn sich ein section außerhalb des Ansichtsfensters befindet, wird das Malen des Inhalts übersprungen, bis der Abschnitt in die Nähe des Ansichtsfensters kommt, was sowohl beim Laden als auch bei der Interaktion auf der Seite hilft.

HTML

<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<!-- … -->

CSS

Die contain-intrinsic-size Eigenschaft fügt der Höhe und Breite jedes section Elements eine Standardgröße von 500px hinzu. Nachdem ein Abschnitt gerendert wurde, behält er seine gerenderte intrinsische Größe bei, auch wenn er aus dem Ansichtsfenster gescrollt wird.

section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

Das folgende Beispiel zeigt, wie man die Inhaltssichtbarkeit mit JavaScript verwaltet. Die Verwendung von content-visibility: hidden; anstelle von display: none; erhält den Rendering-Zustand von Inhalten, wenn sie ausgeblendet sind, und das Rendern ist schneller.

HTML

<div class="hidden">
  <button class="toggle">Show</button>
  <p>
    This content is initially hidden and can be shown by clicking the button.
  </p>
</div>
<div class="visible">
  <button class="toggle">Hide</button>
  <p>
    This content is initially visible and can be hidden by clicking the button.
  </p>
</div>

CSS

Die content-visibility Eigenschaft wird auf Absätzen gesetzt, die direkte Kinder von Elementen mit den Klassen visible und hidden sind. In unserem Beispiel können wir Inhalte in Absätzen abhängig von der CSS-Klasse der übergeordneten div-Elemente anzeigen und ausblenden.

Die contain-intrinsic-size Eigenschaft ist enthalten, um die Inhaltsgröße darzustellen. Dies trägt dazu bei, das Layoutverschiebung zu reduzieren, wenn Inhalte ausgeblendet werden.

p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}

JavaScript

const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "Show" : "Hide";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});

Ergebnis

In diesem Beispiel haben wir ein <div> Element, dessen Inhalt durch Klick oder Tastendruck zwischen sichtbar und verborgen umgeschaltet werden kann.

HTML

<p>
  Click anywhere on the screen or press any key to toggle the
  <code>&lt;div&gt;</code> content between hidden and showing.
</p>

<div>
  This is a <code>&lt;div&gt;</code> element that animates between
  <code>content-visibility: hidden;</code>and
  <code>content-visibility: visible;</code>. We've also animated the text color
  to create a smooth animation effect.
</div>

CSS

Im CSS setzen wir zunächst content-visibility: hidden; auf das <div>, um seinen Inhalt auszublenden. Wir richten dann @keyframes Animationen ein und hängen sie an Klassen an, um das <div> anzuzeigen und auszublenden, wobei content-visibility und color animiert werden, sodass Sie einen sanften Animationseffekt erhalten, wenn der Inhalt gezeigt/ausgeblendet wird.

div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  content-visibility: hidden;
}

/* Animation classes */

.show {
  animation: show 0.7s ease-in forwards;
}

.hide {
  animation: hide 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes show {
  0% {
    content-visibility: hidden;
    color: transparent;
  }

  100% {
    content-visibility: visible;
    color: black;
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: black;
  }

  100% {
    content-visibility: hidden;
    color: transparent;
  }
}

JavaScript

Schließlich verwenden wir JavaScript, um die .show und .hide Klassen auf das <div> anzuwenden, um die Animationen hinzuzufügen, während zwischen sichtbaren und verborgenen Zuständen umgeschaltet wird.

const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  if (divElem.classList.contains("show")) {
    divElem.classList.remove("show");
    divElem.classList.add("hide");
  } else {
    divElem.classList.remove("hide");
    divElem.classList.add("show");
  }
}

Ergebnis

Das gerenderte Ergebnis sieht folgendermaßen aus:

• CSS Containment
• contain-intrinsic-size
• contentvisibilityautostatechange
• content-visibility: the new CSS property that boosts your rendering performance (web.dev)