Rozszerzone menu

The CSS Podcast - 034: Overflow

Gdy treści wykraczają poza zakres rodzica, możesz je przetworzyć na wiele sposobów. Możesz na przykład przewijać widok, aby dodać więcej miejsca, przyciąć wystające krawędzie lub wskazać punkt cięcia za pomocą wielokropka. Szczególnie ważne jest, aby pamiętać o przepełnieniu podczas programowania aplikacji na telefony i wyświetlania na ekranach różnych rozmiarów.

W CSS istnieją 2 różne opcje przycinania: text-overflow służy do przycinania poszczególnych wierszy tekstu, a właściwości overflow pozwalają kontrolować przepełnianie w modelu pudełka.

Przepełnienie pojedynczej linii z text-overflow

Użyj właściwości text-overflow w dowolnym elemencie zawierającym węzły tekstowe, np. akapicie (<p>). Określa, jak tekst ma się wyświetlać, gdy nie mieści się w dostępnej przestrzeni elementu. Cały widoczny tekst HTML na stronie znajduje się w węzłach tekstowych. Aby użyć funkcji text-overflow, potrzebujesz 1 niezapakowanego wiersza tekstu, dlatego musisz też ustawić overflow na hidden i mieć wartość white-space, która uniemożliwia zawijanie tekstu.

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

Korzystanie z właściwości przepełnienia

Właściwości rozszerzania są ustawiane dla elementu, aby kontrolować, co się dzieje, gdy elementy podrzędne potrzebują więcej miejsca, niż jest dostępne. Może to być celowe działanie, np. w przypadku interaktywnej mapy, takiej jak Mapy Google, gdzie użytkownik może przesuwać duży obraz przycięty do określonego rozmiaru. Może to być też niezamierzone, na przykład w aplikacji do czatu, gdy użytkownik wpisze długi tekst, który nie mieści się w dymku tekstowym.

Przepełnienie można podzielić na 2 części. Element nadrzędny ma ściśle ograniczoną przestrzeń, która nie ulegnie zmianie. Możesz to wyobrazić sobie jako okno. Elementy podrzędne to treści, które potrzebują więcej miejsca od elementu nadrzędnego. Możesz to sobie wyobrazić jako to, na co patrzysz przez okno. Zarządzanie przepełnieniem pomoże określić, jak okno będzie otaczać treści.

Przewijanie po osi pionowej i poziomej

Właściwość overflow-y kontroluje fizyczne przepełnienie wzdłuż osi pionowej widocznego obszaru urządzenia, a więc przewijanie w górę i w dół.

Właściwość overflow-x kontroluje przepełnienie wzdłuż osi poziomej widoku urządzenia, a więc przewijanie w lewo i w prawo.

Właściwości logiczne kierunku przewijania

Właściwości overflow-inline i overflow-block ustawiają przepełnienie na podstawie kierunku i trybu pisania dokumentu.

Skrót overflow

Krótki kod overflow ustawia oba style overflow-x i overflow-y w jednym wierszu:

overflow: hidden scroll;

Jeśli podasz 2 słowa kluczowe, pierwsze będzie miało zastosowanie do overflow-x, a drugie do overflow-y. W przeciwnym razie zarówno overflow-x, jak i overflow-y używają tej samej wartości.

Wartości

Przyjrzyjmy się bliżej wartościom i kluczowym słowom dostępnym w usługach overflow.

overflow: visible (domyślnie)

Jeśli nie ustawisz tej właściwości, domyślną wartością w internecie będzie overflow: visible. Dzięki temu masz pewność, że treść nigdy nie jest nieumyślnie ukryta i jest zgodna z podstawowymi zasadami, czyli „nigdy nie ukrywaj treści” oraz o „bezpiecznym układzie precyzyjnych układów”.

overflow: hidden

Treści overflow: hidden są przycinane w wybranym kierunku i nie są wyświetlane za pomocą pasków przewijania, które by to umożliwiały.

overflow: scroll

overflow: scroll włącza suwaki, aby umożliwić użytkownikom przewijanie treści. Nawet jeśli treści nie są obecnie przepełnione, suwaki będą widoczne. To świetny sposób na ograniczenie przesuwania układu w przyszłości, jeśli w przyszłości kontener będzie można przewijać na podstawie np. rozmiaru, oraz na wizualne przygotowanie użytkownika do przewijania.

overflow: clip

Tak jak w przypadku elementu overflow: hidden treści zawierające overflow: clip są przycinane do pola dopełnienia elementu. Różnica między clip a hidden polega na tym, że słowo kluczowe clip zabrania także przewijania, w tym automatycznego.

overflow: auto

Na koniec wartość najczęściej używana, overflow: auto. Powoduje to uwzględnianie ustawień użytkownika i wyświetlanie pasków przewijania w razie potrzeby, ale domyślnie ukrywa je. Użytkownik i przeglądarka odpowiadają za przewijanie.

Przewijanie i przelewanie

Wiele z tych zachowań overflow powoduje wyświetlenie paska przewijania, ale istnieje kilka konkretnych zachowań i właściwości przewijania, które mogą pomóc w sterowaniu przewijaniem w kontenerze przepełnienia.

Przewijanie i ułatwienia dostępu

Upewnij się, że obszar, który można przewijać, może być zaznaczony, aby użytkownik mógł użyć klawisza Tab, aby przejść do pola, a potem używać klawiszy strzałek do przewijania.

Aby umożliwić akceptowanie przez pole przewijania, dodaj tabindex="0", nazwę z atrybutem aria-labelledby i odpowiedni atrybut role. Na przykład:

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

Za pomocą CSS możesz wskazać, że pole ma fokus, używając właściwości outline, aby dać wizualną wskazówkę, że będzie można teraz przewijać to pole.

W artykule Używanie CSS do egzekwowania dostępności Adrian Roselli pokazuje, jak CSS może zapobiegać regresji dostępności. Dotyczy to na przykład włączania przewijania i dodawania wskaźnika ostrości tylko wtedy, gdy używane są prawidłowe atrybuty. Podane niżej reguły sprawią, że pole będzie przewijalne tylko wtedy, gdy ma atrybut tabindex, aria-labelledby i role.

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

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

Umieszczenie paska przewijania w ramach modelu pudełka

Paski przewijania zajmują miejsce w ramce dopełnienia i mogą konkurować o miejsce w przypadku elementów typu inline, a nie overlaid. Moduł modelu ramkowego bardziej szczegółowo opisuje to potencjalne źródło przesunięcia układu.

root-scroller vs implicit-scroller

Możesz zauważyć, że niektóre przewijarki działają w trybie „przeciągnij, by odświeżyć”, a także mają inne szczególne zachowania, zwłaszcza w przypadku aplikacji mobilnych i hybrydowych. Ten proces przewijania odbywa się w głównym elemencie przewijania. Na stronie może być tylko jeden element przewijania. Domyślnie element documentElement jest głównym elementem przewijania strony, ale po zmianie elementu głównego przewijania można stosować specjalne zachowania do elementów przewijania innych niż documentElement. Nowy element nazywamy domyślnym elementem głównym przewijania.

Aby utworzyć główny scroller, możesz użyć funkcji promowania scrollera, umieszczając kontener w pozycji stałej, tak aby obejmował cały widok i był z góry widoczny w scrollerze. Tutaj możesz porównać scroller główny i zagnieżdżony scroller domyślny.

scroll-behavior

scroll-behavior umożliwia włączanie sterowania przewijaniem elementów przez przeglądarkę. Możesz w ten sposób określić sposób obsługi linków lub nawigacji na stronie, np. .scrollTo().

Jest to szczególnie przydatne, gdy używasz atrybutu prefers-reduced-motion, aby określić zachowanie podczas przewijania na podstawie preferencji użytkownika.

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

overscroll-behavior

Jeśli kiedykolwiek dotarłeś(-aś) do końca nakładki modalnej, a następnie kontynuowałeś(-aś) przewijanie i strona za nakładką się przesunęła, to właśnie łańcuch przewijania, czyli przenoszenie do góry do nadrzędnego kontenera przewijania. Właściwość overscroll-behavior pozwala zapobiec wyciekowi nadmiarowego przewijania do kontenera nadrzędnego (jest to nazywane łańcuchem przewijania).

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat przepełnienia

Zasoby

Overflow And Data Loss In CSS from Smashing Magazine