Überlauf

Der CSS-Podcast – 034: Overflow

Für Inhalte, die über ihr übergeordnetes Element hinausgehen, gibt es viele Optionen für die Verarbeitung. Sie können scrollen, um zusätzlichen Platz zu schaffen, die überlaufenden Kanten zu kürzen, den Rand mit Auslassungspunkten zu kennzeichnen und vieles mehr. Überlauf ist besonders wichtig bei der Entwicklung für Telefonanwendungen und mehrere Bildschirmgrößen.

In CSS gibt es zwei verschiedene Beschneidungsoptionen: text-overflow hilft bei einzelnen Textzeilen und die overflow-Properties helfen dabei, den Überlauf im Boxmodell zu steuern.

Überlauf mit einer Zeile und text-overflow

Verwenden Sie die Eigenschaft text-overflow für jedes Element, das Textknoten enthält, z. B. einen Absatz <p>. Es gibt an, wie der Text angezeigt wird, wenn er nicht in den verfügbaren Bereich des Elements passt. Der gesamte sichtbare HTML-Text auf einer Seite befindet sich in Textknoten. Zur Verwendung von text-overflow benötigen Sie eine einzelne nicht umgebrochene Textzeile. Daher müssen Sie auch overflow auf hidden setzen und einen white-space-Wert haben, der einen Zeilenumbruch verhindert.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Überlaufeigenschaften verwenden

Überlaufeigenschaften werden für ein Element festgelegt, um zu steuern, was passiert, wenn seine untergeordneten Elemente mehr Platz benötigen, als ihm zur Verfügung steht. Dies kann beabsichtigt sein, z. B. bei einer interaktiven Karte wie Google Maps, auf der ein Nutzer ein großes Bild schwenkt, das auf eine bestimmte Größe zugeschnitten ist. Es kann auch unbeabsichtigt sein, z. B. in einer Chat-App, in der der Nutzer eine lange Nachricht eingibt, die nicht in die Textblase passt.

Der Überlauf besteht aus zwei Teilen. Das übergeordnete Element hat einen fest beschränkten Raum, der sich nicht ändert. Sie können sich dies als ein Fenster vorstellen. Die untergeordneten Elemente sind Inhalte, die mehr Platz vom übergeordneten Element benötigen. Das ist das, was Sie durch das Fenster sehen. Die Verwaltung des Überlaufs hilft dabei, festzulegen, wie die Fenster diese Inhalte umrahmen.

Scrollen auf der vertikalen und horizontalen Achse

Mit der Eigenschaft overflow-y wird der physische Überlauf entlang der vertikalen Achse des Darstellungsbereichs des Geräts gesteuert, sodass das Gerät nach oben und unten gescrollt wird.

Die Eigenschaft overflow-x steuert den Überlauf entlang der horizontalen Achse des Darstellungsbereichs des Geräts, sodass nach links und rechts gescrollt wird.

Logische Eigenschaften der Scroll-Richtung

Mit den Eigenschaften overflow-inline und overflow-block wird der Überlauf basierend auf der Dokumentrichtung und dem Schreibmodus festgelegt.

Die Abkürzung overflow

Mit der Abkürzung overflow werden die Stile overflow-x und overflow-y in einer Zeile festgelegt:

overflow: hidden scroll;

Wenn zwei Keywords angegeben sind, gilt das erste für overflow-x und das zweite für overflow-y. Andernfalls verwenden overflow-x und overflow-y denselben Wert.

Werte

Sehen wir uns an, welche Werte und Keywords für die overflow-Properties verfügbar sind.

overflow: visible (Standard)

Ohne das Attribut wird overflow: visible der Standardwert für das Web verwendet. So wird sichergestellt, dass Inhalte niemals ungewollt versteckt werden. Dabei gilt das Grundprinzip „Niemals Inhalte ausblenden“. oder „sichere Layouts präziser Layouts“.

overflow: hidden

Bei overflow: hidden werden Inhalte in die angegebene Richtung gekürzt und es sind keine Bildlaufleisten vorhanden, um sie anzuzeigen.

overflow: scroll

Bei overflow: scroll gibt es Bildlaufleisten, mit denen Nutzer durch Inhalte scrollen können. Auch wenn die Inhalte aktuell nicht überlaufen, werden Bildlaufleisten angezeigt. So lassen sich zukünftige Layoutverschiebungen reduzieren, wenn ein Container in Zukunft möglicherweise scrollbar ist, z. B. bei der Größenänderung. Außerdem können Sie den Nutzer visuell auf scrollbare Bereiche vorbereiten.

overflow: clip

Wie bei overflow: hidden wird der Inhalt mit overflow: clip am Innenrand des Elements abgeschnitten. Der Unterschied zwischen „clip“ und „hidden“ besteht darin, dass das Keyword „clip“ außerdem jegliches Scrollen verhindert, auch programmatisches Scrollen.

overflow: auto

Zu guter Letzt ist der am häufigsten verwendete Wert overflow: auto. Dadurch werden die Einstellungen des Nutzers berücksichtigt und bei Bedarf Bildlaufleisten angezeigt. Diese werden jedoch standardmäßig ausgeblendet und der Nutzer und der Browser haben die Verantwortung für das Scrollen.

Scrollen und Überlauf

Viele dieser overflow-Verhaltensweisen führen zu einer Bildlaufleiste. Es gibt jedoch einige spezielle Scrollfunktionen und ‐eigenschaften, mit denen Sie das Scrollen im Überlaufcontainer steuern können.

Scrollen und Bedienungshilfen

Es ist wichtig, sicherzustellen, dass der scrollbare Bereich den Fokus auf sich zieht, damit Tastaturnutzer mit der Tabulatortaste zum Feld navigieren und dann mit den Pfeiltasten scrollen können.

Damit ein Bildlauffeld den Fokus akzeptieren kann, fügen Sie tabindex="0", einen Namen mit dem Attribut aria-labelledby und ein entsprechendes role-Attribut hinzu. Beispiel:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Anschließend kann mithilfe des CSS-Codes angegeben werden, dass das Feld im Fokus ist. Die Eigenschaft outline gibt dann einen visuellen Hinweis darauf, dass das Feld nun scrollbar ist.

In Using CSS to Enforce Accessibility (Mit CSS die Barrierefreiheit durchsetzen) zeigt Adrian Roselli, wie CSS dazu beitragen kann, Regressionen der Barrierefreiheit zu verhindern. Dies ist beispielsweise der Fall, wenn Sie nur das Scrollen aktivieren und die Fokusanzeige hinzufügen möchten, wenn die richtigen Attribute verwendet werden. Die folgenden Regeln sorgen dafür, dass das Feld nur scrollbar ist, wenn es die Attribute tabindex, aria-labelledby und role hat.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Positionierung der Bildlaufleiste im Boxmodell

Bildlaufleisten belegen Platz innerhalb des Abstandsfelds und können um Platz konkurrieren, wenn inline und nicht overlaid. Das Box-Modell-Modul erweitert diese mögliche Quelle von Layout Shifts weiter.

Root-Scroller und Implicit-Scroller im Vergleich

Sie werden möglicherweise feststellen, dass einige Scroller ein Pull-to-Refresh-Verhalten und andere besondere Verhaltensweisen aufweisen, insbesondere bei der Entwicklung für mobile und Hybridanwendungen. Dieses Scrollverhalten findet beim Stamm-Scroller statt. Auf einer Seite gibt es immer nur einen einzigen Root-Scroller. Standardmäßig ist das documentElement der Root-Scroller der Seite. Wenn Sie jedoch ändern, welches Element der Root-Scroller ist, können die speziellen Verhaltensweisen auf andere Scroller als das documentElement-Element angewendet werden. Dieses neue Element wird als impliziter Root-Scroller bezeichnet.

Um einen Root-Scroller zu erstellen, können Sie die sogenannte Scroller-Promotion verwenden. Dabei positionieren Sie einen Container als unveränderlich. Stellen Sie dabei sicher, dass er den gesamten Darstellungsbereich abdeckt und mit einem Scroller ��ber dem Z-Index erscheint. Hier erfahren Sie, wie Sie einen Root-Scroller im Vergleich zu einem verschachtelten impliziten Scroller sehen.

scroll-behavior

Mit scroll-behavior können Sie das browsergesteuerte Scrollen zu Elementen aktivieren. Hier können Sie angeben, wie die In-Page-Navigation wie .scrollTo() oder Links gehandhabt wird.

Dies ist besonders nützlich, wenn das Scrollverhalten der Nutzer in Verbindung mit prefers-reduced-motion festgelegt wird.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

Overscroll-Verhalten

Wenn Sie das Ende eines modalen Overlays erreicht haben, weitergescrollt haben und die Seite hinter dem Overlay verschoben wurde, ist dies die Verkettung des Scrollens, also die Dynamik des übergeordneten Scroll-Containers. Mit der Eigenschaft overscroll-behavior können Sie verhindern, dass ein Überlauf beim Scrollen in einen übergeordneten Container gelangt (sogenannte Scroll-Verkettung).

Wissen testen

Testen Sie Ihr Wissen über Überlauf

Ressourcen

Overflow und Datenverlust in CSS aus dem Smashing Magazine