display vs visibility vs opacity
display: none usuwa element z układu, visibility: hidden go chowa, ale zostawia miejsce, a opacity: 0 robi go przezroczystym, lecz wciąż klikalnym.
Porównanie w tabeli
#Zajmuje miejsce w układzie
- display: none
- Nie, miejsce zostaje zwolnione
- visibility: hidden
- Tak, pozostaje pusta przestrzeń
- opacity: 0
- Tak, pozostaje pusta przestrzeń
Można kliknąć albo zaznaczyć Tabem
- opacity: 0
- Tak, nadal reaguje na kliknięcia i fokus
Widoczne dla czytników ekranu
- opacity: 0
- Tak, nadal odczytywane
Dziecko może to odwrócić
- display: none
- Nie, cały poddrzewo znika
- visibility: hidden
- Tak, przez
visibility: visible - opacity: 0
- Nie dotyczy, tło jest przezroczyste wizualnie
Płynna animacja
- display: none
- Nie bez
transition-behavior: allow-discrete - visibility: hidden
- Zmienia się skokowo
- opacity: 0
- Tak, płynnie
Typowe użycie
- display: none
- Całkowite usunięcie elementu ze strony
- visibility: hidden
- Zarezerwowanie miejsca na coś, co pojawi się później
- opacity: 0
- Płynne animacje zanikania i pojawiania się
Przykład
#.item-none { display: none; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box item-none">display: none</div>
<div class="box">3</div>
</div>Definicja i zastosowanie
#Trzy sposoby na "schowanie" elementu różnią się tym, co zostaje z jego obecności na stronie. display: none usuwa element z układu całkowicie, razem z zajmowanym miejscem, jakby go nigdy nie było. visibility: hidden tylko go chowa, miejsce w layoucie zostaje puste. opacity: 0 też zachowuje miejsce, ale strukturalnie element wciąż jest w pełni obecny, tylko wizualnie przezroczysty.
Ta różnica w obecności przekłada się na interakcję. Element z display: none i visibility: hidden nie da się kliknąć, zaznaczyć klawiszem Tab, a czytniki ekranu go pomijają. Element z opacity: 0 zachowuje się tak, jakby był widoczny: reaguje na kliknięcia, wchodzi w kolejność Tab i jest odczytywany przez czytniki ekranu, o czym łatwo zapomnieć.
Ma to też znaczenie dla animacji. opacity zmienia się płynnie, więc nadaje się do animowanego pojawiania i znikania. visibility zmienia się skokowo, ale da się ją połączyć z transition tak, żeby element zniknął dla interakcji dokładnie wtedy, gdy animacja się skończy. display domyślnie wcale nie bierze udziału w przejściach, choć nowszy transition-behavior: allow-discrete to zmienia.
Składnia
#display: none;
visibility: hidden;
opacity: 0;Więcej przykładów
#.item-hidden { visibility: hidden; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box item-hidden" style="visibility: hidden;">2</div>
<div class="box">3</div>
</div>Miejsce po elemencie 2 zostaje puste, inaczej niż przy display: none.
.ghost { opacity: 0; }<button class="ghost" type="button" onclick="this.textContent = 'Kliknięto mimo opacity: 0'" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff;">Niewidoczny przycisk</button>Mimo niewidoczności przycisk da się kliknąć i zaznaczyć klawiszem Tab, bo opacity nie wyłącza interakcji.
Dobre praktyki
#- Do animowanego pojawiania się elementu użyj
opacity, ewentualnie w parze zvisibilityitransition-behavior: allow-discrete. - Jeśli element ma zniknąć całkowicie i zwolnić miejsce, wybierz
display: none. - Przezroczysty, ale wciąż klikalny element to częsty błąd. Dodaj
pointer-events: none, jeśli nie powinien reagować.
Powiązane hasła
#- displayUstala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
- visibilityUkrywa element, ale zostawia puste miejsce, które zajmował.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
- pointer-eventsWyłącza reagowanie elementu na kliknięcia i najechanie kursorem.
Widzisz błąd albo brakuje przykładu? Napisz do nas.