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

Articles

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" style="height: 100px;">
 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    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: visible;
6}

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    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: hidden;
6}

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    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: scroll;
6}

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    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: auto;
6}

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    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow-x: scroll;
6    overflow-y: hidden;
7}

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    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: clip;
6}

W nowej specyfikacji CSS wprowadzono również wartość overflow: clip. Jest to podobne do hidden, ale nie pozwala na przewijanie, a jedynie przycina zawartość.

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ę.

`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: 100px;
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: 100px;
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: 100px;
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: 100px;
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: 100px;
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.

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ę.
Ograniczenie przerysowań: Ograniczając obszar rysowania, można zminimalizować część, która musi zostać przerysowana, gdy styl lub treść elementu ulega zmianie.
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.

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ść.
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 `object-fit` i `object-position` właściwości

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

YouTube Video

HTML do podglądu

overflow i contain Właściwości

overflow

Podstawy właściwości overflow

visible

hidden

scroll

auto

overflow-x i overflow-y

Rozważania dotyczące przepełnienia

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

Domyślne zachowanie przeglądarki

Przepełnienie elementów potomnych

overflow: clip (CSS Level 3)

Wnioski

contain

Przegląd właściwości contain

Wartości dla contain

layout

paint

size

style

content

Korzyści związane z wydajnością

Notatki

Wnioski

YouTube Video

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

`overflow`

Podstawy właściwości `overflow`

`visible`

`hidden`

`scroll`

`auto`

`overflow-x` i `overflow-y`

`overflow: clip` (CSS Level 3)

`contain`

Przegląd właściwości `contain`

Wartości dla `contain`

`layout`

`paint`

`size`

`style`

`content`