The CSS Podcast – 034: Overflow
Wenn Inhalte über ihr übergeordnetes Element hinausgehen, gibt es viele Möglichkeiten, damit umzugehen. Sie können z. B. scrollen, um zusätzlichen Platz zu schaffen, überlaufende Ränder abzuschneiden, einen Schnitt mit Auslassungspunkten zu kennzeichnen und vieles mehr. Bei der Entwicklung für Telefonanwendungen und verschiedene Bildschirmgrößen ist der Überlauf besonders wichtig.
In CSS gibt es zwei verschiedene Ausschneideoptionen. text-overflow hilft bei einzelnen Textzeilen und mit overflow-Eigenschaften kann der Überlauf im Rahmenmodell gesteuert werden.
Überlauf in einer Zeile mit text-overflow
Verwenden Sie die Eigenschaft text-overflow für jedes Element, das Textknoten enthält, z. B. für einen Absatz <p>. Damit wird festgelegt, wie der Text dargestellt wird, wenn er nicht in den verfügbaren Platz 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 Textzeile ohne Zeilenumbruch. Sie müssen also auch overflow auf hidden setzen und einen white-space-Wert verwenden, 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 geschieht, wenn die untergeordneten Elemente mehr Platz benötigen, als verfügbar ist. Dies kann beabsichtigt sein, beispielsweise in einer interaktiven Karte wie Google Maps, bei 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-Anwendung, in der der Nutzer eine lange Nachricht eingibt, die nicht in das Infofeld passt.
Der Überlauf besteht aus zwei Teilen. Das übergeordnete Element hat einen festen Bereich, der sich nicht ändert. Sie können sich das als ein Fenster vorstellen. Die untergeordneten Elemente sind Inhalte, die mehr Platz vom übergeordneten Element benötigen. Sie können sich dies als das vorstellen, was Sie durch das Fenster sehen. Wenn Sie den Überlauf verwalten, können Sie besser bestimmen, wie das Fenster diese Inhalte umrahmt.
Auf der vertikalen und horizontalen Achse scrollen
Mit der Eigenschaft overflow-y wird der physische Überlauf entlang der vertikalen Achse des Darstellungsbereichs des Geräts gesteuert, sodass nach oben und unten gescrollt wird.
Mit der Eigenschaft overflow-x wird der Überlauf entlang der horizontalen Achse des Darstellungsbereichs des Geräts gesteuert, sodass nach links und rechts gescrollt wird.
Logische Eigenschaften für die Scrollrichtung
Mit den Properties overflow-inline und overflow-block wird der Überlauf je nach Dokumentrichtung und 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 wird für overflow-x und overflow-y derselbe Wert verwendet.
Werte
Sehen wir uns die Werte und Keywords an, die für overflow-Properties verfügbar sind.
overflow: visible(Standard)- Wenn Sie die Property nicht festlegen, ist
overflow: visibleder Standardwert für das Web. So wird dafür gesorgt, dass Inhalte niemals ungewollt ausgeblendet werden und den Grundsätzen von „Inhalte nie verstecken“ und „Sichere Layouts präziser Layouts“ folgen. overflow: hidden- Mit
overflow: hiddenwird der Inhalt in die angegebene Richtung abgeschnitten und es sind keine Bildlaufleisten vorhanden, um ihn anzuzeigen. overflow: scrolloverflow: scrollaktiviert Bildlaufleisten, damit Nutzer durch die Inhalte scrollen können. Auch wenn der Inhalt aktuell nicht überläuft, werden Bildlaufleisten angezeigt. So lassen sich zukünftige Layoutverschiebungen vermeiden, wenn ein Container in Zukunft möglicherweise scrollbar sein könnte, z. B. aufgrund der Größenänderung. Außerdem wird der Nutzer optisch auf scrollbare Bereiche vorbereitet.overflow: clip- Wie bei
overflow: hiddenwird der Inhalt mitoverflow: clipauf den Abstandsrahmen des Elements zugeschnitten. Der Unterschied zwischenclipundhiddenbesteht darin, dass das Keywordclipebenfalls jegliches Scrollen untersagt, einschließlich des programmatischen Scrollens. overflow: auto- Schließlich der am häufigsten verwendete Wert:
overflow: auto. Dadurch werden die Einstellungen des Nutzers berücksichtigt und bei Bedarf Bildlaufleisten eingeblendet. Diese werden jedoch standardmäßig ausgeblendet und Nutzer und Browser sind für das Scrollen verantwortlich.
Scrollen und Überlauf
Bei vielen dieser overflow-Verhalten ist eine Bildlaufleiste verfügbar. Es gibt jedoch einige spezielle Scroll-Verhalten und -Eigenschaften, mit denen Sie das Scrollen in Ihrem Überlaufcontainer steuern können.
Scrollen und Bedienungshilfen
Es ist wichtig, dass der scrollbare Bereich den Fokus annehmen kann, damit Tastaturnutzer mit der Tabulatortaste zum Feld navigieren und dann mit den Pfeiltasten scrollen können.
Damit ein Bildlauffeld den Fokus berücksichtigen kann, fügen Sie tabindex="0", einen Namen mit dem Attribut aria-labelledby und ein entsprechendes Attribut role hinzu. Beispiel:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
Mithilfe von CSS kann dann angegeben werden, dass das Feld im Fokus ist. Die outline-Eigenschaft gibt einen visuellen Hinweis darauf, dass es jetzt scrollbar ist.
In Verwendung von CSS zur Erzwingen von Barrierefreiheit zeigt Adrian Roselli, wie CSS dabei helfen kann, Regressionen der Barrierefreiheit zu verhindern. So können Sie beispielsweise das Scrollen aktivieren und die Fokusanzeige einfügen, wenn die richtigen Attribute verwendet werden. Aufgrund der folgenden Regeln ist das Feld nur scrollbar, 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 innerhalb des Boxmodells
Bildlaufleisten nehmen den Raum innerhalb des Abstands ein und können um den Platz konkurrieren, wenn inline und nicht overlaid. Das Box-Modellmodul enthält weitere Informationen zu dieser potenziellen Quelle für Layout Shift.
Root-Scroller und impliziter Scroller im Vergleich
Möglicherweise stellen Sie fest, dass einige Scroller ein "Zum Aktualisieren ziehen"-Verhalten und andere spezielle Verhaltensweisen zeigen, insbesondere bei der Entwicklung für mobile und Hybrid-Apps. Dieses Scrollverhalten tritt beim Stamm-Scroller auf. Es gibt immer nur einen Stamm-Scroller auf einer Seite. Standardmäßig ist das documentElement der Stamm-Scroller der Seite. Wenn Sie jedoch ändern, welches Element der Stamm-Scroller ist, können die speziellen Verhaltensweisen auch auf andere Scroller als „documentElement“ angewendet werden. Wir bezeichnen diesen neuen Scroller als impliziten Stamm-Scroller.
Um einen Stamm-Scroller zu erstellen, können Sie eine sogenannte Scroller-Hochstufung verwenden. Positionieren Sie dazu einen Container als fest und achten Sie darauf, dass er den gesamten Darstellungsbereich abdeckt und oben beim Scroller der Z-Index zu sehen ist. Hier findest du einen Root-Scroller im Vergleich zu einem verschachtelten impliziten Scroller.
verglichen mit dem Scrollen eines impliziten Scrollers ohne verbessertes Scroll-Verhalten.
Scrollverhalten
Mit scroll-behavior können Sie das browsergesteuerte Scrollen zu Elementen aktivieren. Damit kannst du festlegen, wie die In-Page-Navigation wie .scrollTo() oder Links gehandhabt werden soll.
Dies ist besonders nützlich, wenn das Scrollverhalten mit dem Parameter prefers-Reduced-motion basierend auf den Nutzereinstellungen festgelegt wird.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
Overscroll-Verhalten
Wenn Sie schon einmal das Ende eines modalen Overlays erreicht haben, weiter scrollen und sich die Seite hinter dem Overlay bewegen ließen, ist dies die Scrollverkettung, also das Bubbling-Verfahren, das zum übergeordneten Scroll-Container führte. Mit der Eigenschaft overscroll-behavior können Sie verhindern, dass Scroll-Überlauf in einen übergeordneten Container gelangt (als Scroll-Verkettung bezeichnet).
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Überlauf
Ist der Textüberlauf und der Elementüberlauf gleich?
Für die Property „overflow“ sind zwei Keywords zulässig. Das erste Keyword ist für welche Achse?
Welchen Bereich im Kastenmodell nutzen Bildlaufleisten bei der Anzeige und Inline-Anzeige?
overlay-Modus überlappen sich Bildlaufleisten mit dem Abstand, im inline-Modus wird er ebenfalls ergänzt.Welche Eigenschaft würden Sie verwenden, um zusätzliche Dynamik durch das Scrollen in einem verschachtelten impliziten Scroller abzufangen?
scroll-behaviorscroll-hintoverscroll-behaviorcontain festgelegt wird, wird das Scrollen beeinträchtigt.scroll-paddingoverscroll-effectRessourcen
Overflow and Data Loss in CSS (Überlauf und Datenverlust in CSS) aus dem Smashing Magazine