Kurs HTML

Wprowadzenie: Dwa sposoby na niewidzialność

Czasami chcemy, aby element HTML był niewidoczny na stronie. CSS oferuje dwa główne sposoby na osiągnięcie tego celu: ustawienie właściwości display na none lub właściwości visibility na hidden.

Choć oba te podejścia sprawiają, że element znika z widoku, działają one w fundamentalnie różny sposób i mają odmienne konsekwencje dla układu strony oraz dostępności.

display: none;

Ustawienie display: none; na elemencie powoduje, że jest on **całkowicie usuwany z przepływu dokumentu**, tak jakby go w ogóle nie było w kodzie HTML.

• Usuwa element z layoutu: Element nie zajmuje żadnego miejsca na stronie. Pozostałe elementy zachowują się tak, jakby ukryty element nie istniał, przesuwając się, aby wypełnić zwolnioną przestrzeń.
• Niedostępny dla interakcji: Użytkownik nie może wejść w interakcję z elementem (np. kliknąć linku, zaznaczyć tekstu).
• Niedostępny dla technologii wspomagających: Czytniki ekranu zazwyczaj ignorują elementy z display: none;, czyniąc je niedostępnymi dla użytkowników niewidomych lub niedowidzących.
• Zdarzenia nie są wywoływane: Zdarzenia JavaScript (np. click, mouseover) nie będą wywoływane na tym elemencie.
• Potomkowie również są ukryci: Wszystkie elementy potomne również stają się niewidoczne i są usuwane z przepływu. Nie można "przywrócić" widoczności potomka, jeśli rodzic ma display: none;.

display: none; jest często używane do dynamicznego pokazywania/ukrywania elementów za pomocą JavaScript (np. rozwijane menu, modale, zakładki) lub w responsywnym designie do ukrywania elementów na określonych rozmiarach ekranu.

<p>Tekst przed.</p>
<div class="ukryty-display">Ten div jest ukryty za pomocą display: none;</div>
<p>Tekst po.</p>Kopiuj

.ukryty-display {
  display: none;
  width: 100px;
  height: 50px;
  background-color: red;
}
/* Efekt: .ukryty-display nie będzie widoczny, a "Tekst po" pojawi się */
/* bezpośrednio pod "Tekst przed", bez żadnej przerwy. */Kopiuj

visibility: hidden;

Ustawienie visibility: hidden; na elemencie sprawia, że staje się on **niewidoczny (przezroczysty)**, ale **nadal zajmuje swoje miejsce w layoucie**.

• Pozostaje w layoucie: Element nadal zajmuje swoją przestrzeń (szerokość, wysokość, marginesy). Pozostałe elementy nie przesuwają się, aby wypełnić jego miejsce – pozostaje po nim pusta przestrzeń.
• Niedostępny dla interakcji: Podobnie jak przy display: none;, użytkownik nie może wejść w interakcję z elementem.
• Dostępny dla technologii wspomagających (?): Zachowanie czytników ekranu może być różne, ale generalnie elementy z visibility: hidden mogą być nadal odczytywane lub nawigowane, co może prowadzić do konfuzji. Zaleca się ostrożność przy używaniu tej metody dla treści interaktywnych.
• Zdarzenia nie są wywoływane: Zdarzenia JavaScript zazwyczaj nie są wywoływane.
• Potomkowie mogą być widoczni: Co ciekawe, jeśli element potomek ma ustawione visibility: visible;, stanie się on widoczny, nawet jeśli jego rodzic ma visibility: hidden;.

visibility: hidden; jest używane rzadziej niż display: none;. Może być przydatne, gdy chcemy zachować układ strony, ukrywając tylko wizualną reprezentację elementu, lub w animacjach, gdzie chcemy płynnie zmieniać widoczność.

<p>Tekst przed.</p>
<div class="ukryty-visibility">Ten div jest ukryty za pomocą visibility: hidden;</div>
<p>Tekst po.</p>Kopiuj

.ukryty-visibility {
  visibility: hidden;
  width: 100px;
  height: 50px;
  background-color: blue; /* Tło nie będzie widoczne */
  border: 1px solid black; /* Obramowanie też nie */
}
/* Efekt: .ukryty-visibility nie będzie widoczny, ale pozostanie po nim */
/* pusta przestrzeń o wymiarach 100x50px (plus marginesy/border), */
/* a "Tekst po" pojawi się poniżej tej pustej przestrzeni. */Kopiuj

Przykład z widocznym potomkiem:

<div class="parent-hidden">
  Rodzic jest ukryty...
  <span class="child-visible">...ale dziecko jest widoczne!</span>
</div>Kopiuj

.parent-hidden {
  visibility: hidden;
  border: 1px dashed red;
  padding: 10px;
}
.child-visible {
  visibility: visible;
  background-color: lightgreen;
}
/* Efekt: Tekst "Rodzic jest ukryty..." i ramka będą niewidoczne, */
/* ale span z zielonym tłem będzie widoczny w miejscu, gdzie normalnie by był. */Kopiuj

Podsumowanie różnic