Widzialność {visibility}
W jaki sposób schować element, tak aby pozostało po nim puste miejsce?
selektor { visibility: typ }Natomiast jako "typ" należy podać:
- visible - element będzie widoczny na ekranie (domyślnie)
- hidden - element zostanie ukryty, a w jego miejsce pojawi się pusta przestrzeń o takich samych rozmiarach jak element (gdyby był widoczny)
- collapse - jeżeli użyte dla wierszy (<tr>...</tr>), grup wierszy (<tbody>...</tbody>), kolumn (<col>) lub grup kolumn (<colgroup>...</colgroup>) tabeli, ukrywa całą zawartość wiersza (wierszy) bądź kolumny (kolumn), bez konieczności obliczania na nowo rozplanowania tabeli. Dla innych elementów działa tak samo jak wartość hidden.
Polecenie to steruje wyświetlaniem elementu na ekranie. Pozwala ukryć dowolny element, a w jego miejsce wprowadzić pustą przestrzeń o takich samych rozmiarach, jakie miałby element, gdyby tylko był widoczny.
Polecenie "visibility: hidden" jest zbliżone do display: none. Różnica polega na tym, że drugie z nich całkowicie usuwa element z ekranu, natomiast pierwsze tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce.
Zastosowanie "visibility: collapse" do elementów tabeli może być przydatne do realizacji wszelkiego rodzaju dynamicznych efektów ukrywania fragmentów tabeli (np. za pomocą JavaScript) - eliminuje "przeskakiwanie" komórek powodowane zmianą rozplanowania tabeli przy ich tradycyjnym usuwaniu.
Przykład {visibility}
visibility: visible
visibility: visiblevisibility: hidden visibility: hidden
(obrazek jest niewidzialny - na ekranie pozostała pusta przestrzeń o rozmiarach takich jak ukryty obrazek)
Dla porównania:
display: none display: none
(obrazek nie został wyświetlony, a dodatkowo na ekranie nie pozostała żadna pusta przestrzeń)
| komórka1 | komórka2 |
| komórka3 | komórka4 - o szerszej zawartości |
| komórka5 | komórka6 |
...i to samo przy sterowaniu wyświetlaniem:
| komórka1 | komórka2 |
| komórka5 | komórka6 |
| komórka1 | komórka2 |
| komórka5 | komórka6 |
Dla porównania ta sama tabela bez zmiany widzialności:
| komórka1 | komórka2 |
| komórka3 | komórka4 - o szerszej zawartości |
| komórka5 | komórka6 |
Zwróć uwagę na różnice pomiędzy działaniem "visibility: collapse" a "display: none". W pierwszym przypadku, mimo iż wiersz z szerszą komórką został ukryty, kolumna w której się znajdowała nie zmniejszyła swojej szerokości. W drugim przypadku rozplanowanie tabeli zostało wyznaczone na nowo, dlatego stała się ona węższa, gdyż dopasowała się do zawartości tylko widzialnych komórek. Podkreślenia wymaga również fakt, że przykładowa tabela z "visibility: collapse" nie powinna wyglądać tak samo jak "visibility: hidden" - jeżeli wyglądają identycznie, to znaczy że Twoja przeglądarka nieprawidłowo interpretuje to polecenie.
visibility: collapse na innym elemencie (obrazek z przykładu na samym początku) - zachowanie powinno być identyczne, jak dla "visibility: hidden":
visibility: collapsePrzeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
visibility: wartość | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 4 2000-06-28 | 1 2003-06-23 |
visibility: collapse | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 4 2000-06-28 | 1.3 2005-04-15 |
visibility: hidden | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |
visibility: visible | 1 2008-12-11 | 1 2004-11-09 | 12 2015-07-29 | 15 2013-07-02 | 1 2003-06-23 |