CSS Academy · Lekcja

Visibility a display: none

Poznają Państwo, kiedy używać visibility: hidden zamiast display: none oraz jak każda z tych wartości wpływa na układ.

Visibility a display: none to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Trzy sposoby ukrywania elementów

CSS udostępnia trzy popularne sposoby ukrywania elementów, z których każdy inaczej wpływa na układ, dostępność i interakcję:

display: none
visibility: hidden
opacity: 0

display: none

Element jest całkowicie usuwany z układu. Nie zajmuje miejsca, nie można z nim wchodzić w interakcję i nie jest odczytywany przez czytniki ekranu (w większości implementacji). Element nadal istnieje w DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

Element jest niewidoczny, ale nadal zajmuje miejsce w układzie. Nie można go kliknąć ani nie jest odczytywany przez czytniki ekranu. To dobre rozwiązanie, gdy należy coś ukryć bez powodowania zmian układu.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

Element jest niewidoczny, ale w pełni interaktywny. Nadal zajmuje miejsce i reaguje na zdarzenia (kliknięcia, najechania kursorem). Czytniki ekranu mogą nadal go odczytywać.

<button class="transparent">Invisible but clickable</button>

Nadpisywanie visibility: visible

Element potomny może nadpisać wartość visibility: hidden elementu nadrzędnego, ustawiając visibility: visible. Nie jest to możliwe w przypadku display: none — elementy potomne bezwzględnie po nim dziedziczą.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Tabela porównawcza

Szybkie zestawienie:

display: none: brak miejsca, brak kliknięć, brak odczytu
visibility: hidden: zajmuje miejsce, brak kliknięć, brak odczytu
opacity: 0: zajmuje miejsce, nadal można kliknąć, może być odczytywany

Animowanie visibility

Właściwości display nie można animować za pomocą przejścia. Aby uzyskać płynne pojawianie się i znikanie elementów, należy połączyć visibility z opacity:

<div class="dropdown open">Dropdown menu content</div>

Dostępne ukrywanie za pomocą SR-only

Wzorzec tylko dla czytnika ekranu ukrywa treść wizualnie, ale zachowuje jej dostępność dla technologii asystujących:

<button>Save <span class="sr-only">your document now</span></button>

Atrybut hidden a CSS

HTML-owy atrybut hidden stosuje display: none za pośrednictwem arkusza stylów przeglądarki. Jest dostępny i semantyczny, ale można go nadpisać za pomocą specyficzności CSS.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden pomija renderowanie sekcji znajdujących się poza ekranem, ale zachowuje ich drzewo dostępności i układ. To nowoczesna technika poprawiająca wydajność długich stron.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Aby element pozostał widoczny, ale nieinteraktywny, należy użyć pointer-events: none. Kliknięcia i najechania kursorem przechodzą przez element do elementów znajdujących się pod nim.

<div class="overlay">Clicks pass through this overlay</div>

Szybkie sprawdzenie

Jaka technika ukrywa element, zachowując miejsce zajmowane przez niego w układzie?

Podsumowanie

display: none całkowicie usuwa element z układu. visibility: hidden ukrywa go, zachowując zajmowane miejsce. opacity: 0 ukrywa element, ale pozostawia go interaktywnym. Do dostępnego ukrywania należy używać wzorca .sr-only. W przypadku płynnych przejść należy połączyć visibility z opacity.

Często zadawane pytania

Czy lekcja „Visibility a display: none” jest bezpłatna?

Tak — pełny tekst „Visibility a display: none” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Visibility a display: none”?

Poznają Państwo, kiedy używać visibility: hidden zamiast display: none oraz jak każda z tych wartości wpływa na układ. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Visibility a display: none”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy