Articles
Wprowadzenie do CSS
`overflow` i `contain` Właściwości

`overflow` i `contain` Właściwości

Ten artykuł wyjaśnia właściwości overflow i contain.

Możesz dowiedzieć się, jak opisywać takie rzeczy, jak wyświetlanie pasków przewijania i przycinanie za pomocą właściwości overflow.

YouTube Video

HTML do podglądu

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow i contain Właściwości

overflow

Właściwość CSS overflow to ważna właściwość, która kontroluje sposób wyświetlania zawartości elementu, gdy przekracza ona rozmiar jego pola. Jest powszechnie używana do kształtowania układu i interfejsu stron internetowych, pomagając zarządzać wyświetlaniem pasków przewijania, przycinaniem i przepełnieniem elementów.

Podstawy właściwości overflow

Właściwość overflow ma cztery główne wartości: visible, hidden, scroll i auto.

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible to wartość domyślna, w której zawartość elementu wykracza poza rozmiar pola, ale pozostaje widoczna. Przepełnione części mogą nachodzić na inne elementy, ale paski przewijania nie są wyświetlane.

Cechy:

  • Zawartość jest wyświetlana bez ograniczeń.
  • Paski przewijania nie są wyświetlane.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden to ustawienie, w którym jeśli zawartość elementu przekracza rozmiar pola, przepełnione części nie są wyświetlane. Paski przewijania nie są wyświetlane, a przepełniona zawartość nie będzie widoczna.

Cechy:

  • Gdy zawartość przekracza granice elementu, nadmiarowa część jest ukrywana.
  • Paski przewijania nie są wyświetlane.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

Gdy używana jest opcja scroll, paski przewijania są wymuszane, jeśli zawartość elementu przekracza pole. Nawet jeśli zawartość nie wykracza poza granice, paski przewijania są zawsze wyświetlane.

Cechy:

  • Paski przewijania są wyświetlane nawet wtedy, gdy zawartość mieści się w granicach elementu.
  • Przewijanie jest możliwe w kierunkach poziomym i pionowym.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto wyświetla paski przewijania tylko wtedy, gdy zawartość wykracza poza granice; jeśli zawartość mieści się w polu elementu, paski przewijania nie są wyświetlane.

Cechy:

  • Paski przewijania pojawiają się tylko wtedy, gdy zawartość przekracza granice.
  • Automatycznie tworzy przewijalny obszar.
overflow-x i overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

Właściwość overflow można kontrolować indywidualnie dla kierunku poziomego (oś x) i pionowego (oś y).

W ten sposób można użyć overflow-x i overflow-y, aby osobno ustawić wyświetlanie pionowych i poziomych pasków przewijania.

Rozważania dotyczące przepełnienia

Podczas korzystania z właściwości overflow należy zwrócić uwagę na kilka kwestii.

Wpływ na projekt w wyniku wyświetlania pasków przewijania

Używanie scroll lub auto do wyświetlania pasków przewijania może zakłócić ogólny projekt strony. W szczególności, jeśli elementy znajdują się na prawej lub dolnej krawędzi, paski przewijania mogą sprawić, że staną się mniej widoczne.

Domyślne zachowanie przeglądarki

Sposób wyświetlania i działania pasków przewijania może się różnić w zależności od przeglądarki. Zwłaszcza między systemami Windows a macOS istnieją różnice w stylach wyświetlania pasków przewijania, co może powodować, że projekty nie wyglądają zgodnie z zamierzeniem. Ważne jest przeprowadzanie testów między przeglądarkami.

Przepełnienie elementów potomnych

Ustawienie overflow: hidden na elemencie nadrzędnym ukrywa elementy potomne, które wychodzą poza ramkę elementu nadrzędnego. Może to powodować nieprawidłowe wyświetlanie wyskakujących okienek i okien modalnych.

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

W nowej specyfikacji CSS wprowadzono również wartość overflow: clip. Jest to podobne do hidden, ale nie pozwala na przewijanie, a jedynie przycina zawartość. Obecnie jest obsługiwane tylko przez niektóre przeglądarki.

Cechy:

  • Jeśli zawartość wykracza poza granice, ta część zostanie całkowicie ukryta.
  • Paski przewijania nie są wyświetlane.

Wnioski

Właściwość CSS overflow jest niezbędnym narzędziem do kontrolowania wyświetlania zawartości w projektowaniu stron internetowych. Zarządzając sytuacjami, w których zawartość przekracza ramkę elementu oraz stosując odpowiednie paski przewijania lub przycinanie, zapewnia użytkownikom bardziej przyjazny interfejs. Ponadto użycie overflow-x i overflow-y umożliwia precyzyjną kontrolę. Dzięki tej wartości paski przewijania są wymuszane, gdy zawartość elementu przekracza jego ramkę. Nawet jeśli zawartość nie wykracza poza granice, paski przewijania są zawsze wyświetlane.

contain

Przegląd właściwości contain

Właściwość CSS contain ogranicza wpływ elementu na inne elementy i całą stronę, optymalizując proces renderowania przeglądarki. Konkretne działanie polega na ograniczeniu przepływów i przerysowań poprzez zapobieganie sytuacjom, w których zmiany stylu lub układu w elemencie wpływają na zawartość poza tym elementem.

Jest to istotne dla wydajności strony internetowej i szczególnie skuteczne w przypadku witryn o skomplikowanych układach lub dużej ilości treści.

Wartości dla contain

Właściwość contain ma następujące wartości:.

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout nakłada ograniczenia związane z układem. Korzystając z tej wartości, rozmiar i pozycja elementu nie wpływają na inne elementy. Na przykład, nawet jeśli element jest zmieniany wewnętrznie, ta zmiana nie wpływa na zewnętrzny układ.

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint ogranicza wpływ malowania (rysowania). Gdy ta wartość jest określona, rysowanie w obrębie elementu przestaje wpływać na elementy zewnętrzne, ograniczając tym samym zakres obliczeń związanych z przerysowywaniem.

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size zapewnia, że rozmiar elementu nie zależy od elementów zewnętrznych. Konkretne działanie polega na zapobieganiu sytuacjom, w których zmiany wielkości elementów potomnych wpływają na rozmiar elementu nadrzędnego, co zwiększa stabilność układu.

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style zapewnia, że styl elementu nie wpływa na elementy zewnętrzne. Na przykład, określenie contain: style; zapewnia, że zmiany stylu w tym elemencie nie wpływają na inne elementy, zmniejszając zakres przeliczania.

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content to wartość złożona łącząca layout, paint, size oraz style. Korzystając z tej wartości, można mieć pewność, że układ, rysowanie, rozmiar i styl elementu w żaden sposób nie wpływają na elementy zewnętrzne.

Korzyści związane z wydajnością

Głównym powodem korzystania z właściwości contain jest poprawa wydajności strony internetowej. W szczególności jest skuteczna w następujących sytuacjach.

  1. Optymalizacja przepływu: Gdy rozmiar lub układ elementu zmienia się, jego wpływ może zostać ograniczony do najmniejszego możliwego zakresu. Zmniejsza to zakres niepotrzebnych przepływów (ponownego przeliczania układu) i odciąża przeglądarkę.

  2. Ograniczenie przerysowań: Ograniczając obszar rysowania, można zminimalizować część, która musi zostać przerysowana, gdy styl lub treść elementu ulega zmianie.

  3. Rozwój oparty na komponentach: Ponieważ każdy komponent lub moduł działa niezależnie od innych elementów, poprawia to wydajność każdego komponentu nawet w przypadku dużych aplikacji internetowych.

Notatki

Podczas korzystania z właściwości contain, należy pamiętać o następujących kwestiach.

  1. Zrozumienie zakresu zastosowania: Właściwość contain jest przydatna w optymalizacji wydajności, ale nie powinna być stosowana do każdego elementu. Ważne jest jej właściwe stosowanie w odpowiednich miejscach. Na przykład, stosowanie jej do często zmieniających się elementów lub części dużej struktury DOM może pogorszyć wydajność.

  2. Kompatybilność przeglądarek: Właściwość contain jest stosunkowo nową funkcją CSS i nie jest w pełni obsługiwana przez wszystkie przeglądarki. Jest obsługiwana przez główne przeglądarki (Chrome, Firefox, Edge, Safari), ale może nie działać w starszych wersjach.

Wnioski

Właściwość contain w CSS to potężne narzędzie do optymalizowania wydajności stron internetowych i aplikacji. Ograniczając wpływ, jaki jeden element ma na inne, zmniejsza koszty reflow i repaint, upraszczając cały proces renderowania. Jednak ważne jest, aby starannie rozważyć, gdzie ją zastosować i używać jej odpowiednio.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Porównanie układów Flexbox, Grid i Kolumny