content-visibility
Pozwala przeglądarce pominąć renderowanie treści, której nie widać, i dzięki temu przyspieszyć długie strony.
- Wartość domyślna
visible- Dziedziczona
- Nie
- Animowalna
- skokowo, np. z transition-behavior: allow-discrete
- Dotyczy
- elementy, dla których działa zawieranie rozmiaru (bez zwykłych elementów liniowych i wewnętrznych elementów tabel)
- JavaScript
element.style.contentVisibility = "auto"
Przykład
#.comment {
content-visibility: auto;
contain-intrinsic-size: auto 44px;
}<style>
.comment { padding: 10px 12px; border-radius: 12px; background: #18181b; font-size: 14px; }
.comment + .comment { margin-top: 8px; }
.comment strong { display: block; }
.comment p { margin: 0; color: #a1a1aa; }
</style>
<article class="comment"><strong>Ania</strong><p>Grid w końcu zaczął mi się układać w głowie.</p></article>
<article class="comment"><strong>Kuba</strong><p>Obszary siatki to najlepsza część modułu.</p></article>
<article class="comment"><strong>Ola</strong><p>Przydałoby się więcej przykładów z auto-fill.</p></article>
<article class="comment"><strong>Tomek</strong><p>Zrobione, czas na zadanie podsumowujące.</p></article>W tak krótkim wątku efektu nie widać, bo wszystkie komentarze mieszczą się na ekranie. W długiej dyskusji przeglądarka renderuje tylko komentarze w pobliżu widoku, a pozostałym przypisuje po 44px wysokości treści, dopóki nie pozna prawdziwej.
Definicja i zastosowanie
#Właściwość content-visibility decyduje, czy przeglądarka ma w ogóle układać i malować zawartość elementu. Wartość auto pomija pracę nad fragmentami, które są daleko poza ekranem, i wraca do nich, gdy użytkownik podjedzie bliżej. Na długich stronach z wieloma sekcjami, na przykład w artykułach, dokumentacji czy listach komentarzy, potrafi to wyraźnie skrócić pierwsze renderowanie.
Pominięty element nie zna swojej wysokości, więc bez podpowiedzi miałby zero pikseli, a pasek przewijania skakałby podczas przewijania. Dlatego auto łączy się z contain-intrinsic-size, które podaje zastępczy rozmiar. Zapis contain-intrinsic-size: auto 500px znaczy: na start przyjmij 500px, a po pierwszym wyrenderowaniu zapamiętaj prawdziwy rozmiar. Jedna wartość dotyczy obu wymiarów, dwie oznaczają szerokość i wysokość.
Wartość hidden zawsze pomija zawartość, podobnie jak display: none na dzieciach, ale zostawia sam element z obramowaniem i paddingiem, a przeglądarka może zachować wyniki wcześniejszego renderowania, więc ponowne pokazanie jest szybsze. Pasuje do kart i paneli, które często się chowa i pokazuje. Treść ukryta przez hidden nie jest dostępna dla czytników ekranu ani wyszukiwania na stronie, a przy auto pozostaje dostępna.
Wartość auto zawsze włącza zawieranie układu, stylu i malowania, tak jak contain: content. W praktyce potomkowie wystający poza element zostają przycięci, a element staje się blokiem zawierającym dla dzieci pozycjonowanych absolutnie.
Składnia
#content-visibility: visible | hidden | auto;
contain-intrinsic-size: none | [ auto? <długość> ]{1,2};Wartości
#- Zwykłe renderowanie. Plakietka wystaje poza róg karty. To wartość domyślna.
- Karta jest na ekranie, więc renderuje się normalnie, ale spójrz na róg: plakietka została ucięta, bo
autozawsze włącza zawieranie malowania. Poza ekranem przeglądarka pominęłaby całą zawartość. - Zawartość nie jest renderowana. Zostaje sama karta z paddingiem i obramowaniem, która bez treści nie ma wysokości.
hidden + contain-intrinsic-size
z zastępczym rozmiarem
Zastępczy rozmiar trzyma wysokość pustej karty, dzięki czemu nic wokół nie przeskakuje.
Wartości w praktyce
#visible
.demo { content-visibility: visible; }auto
auto zawsze włącza zawieranie malowania. Poza ekranem przeglądarka pominęłaby całą zawartość..demo { content-visibility: auto; }Obsługa przeglądarek
#Nowość w przeglądarkach · od 2024 roku
Działa w aktualnych wersjach wszystkich głównych przeglądarek. Starsze wersje mogą tego nie obsługiwać.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Stosuj
content-visibility: autodo powtarzalnych bloków ze sporą treścią, takich jak sekcje artykułu czy komentarze w długim wątku, a nie do pojedynczych drobnych elementów. Zysk bierze się z pominięcia wielu bloków naraz. - Zawsze dodawaj
contain-intrinsic-size: autoz szacowanym rozmiarem, żeby pasek przewijania nie skakał. Słowoautozapamięta prawdziwy rozmiar po pierwszym wyrenderowaniu. - Nie używaj
autona elementach, z których coś ma wystawać, na przykład menu rozwijane czy dymki. Zawieranie malowania je przytnie.
Powiązane hasła
#- containObiecuje przeglądarce, że wnętrze elementu nie wpływa na resztę strony, więc może ona ograniczyć przeliczanie układu i rysowanie.
- displayUstala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
- visibilityUkrywa element, ale zostawia puste miejsce, które zajmował.
- transition-behaviorPozwala włączyć do przejść właściwości zmieniające się skokowo, takie jak display.
- container-typeZamienia element w kontener, o którego rozmiar mogą pytać reguły @container. Obejmuje też container-name i skrót container.
Widzisz błąd albo brakuje przykładu? Napisz do nas.