Przejdź do treści

Pozycjonowanie

Widzialność

selektor { visibility: typ }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

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.

UWAGA! MSIE 7.0 nie obsługuje wartości collapse (w MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance).

W przypadku zastosowania "visibility: collapse" dla elementów tabeli, Opera 10.10, Chrome i Konqueror usuwają co prawda tak oznaczone elementy, ale pozostawiają po nich pustą przestrzeń. Opera 10.50, Firefox i MSIE 8.0 w takim przypadku usuwają całą wolną przestrzeń. W założeniu ma to 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: visible visibility: visible visibility: visible


visibility: hidden visibility: 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 display: none
(obrazek nie został wyświetlony, a dodatkowo na ekranie nie pozostała żadna pusta przestrzeń)


Dla drugiego wiersza visibility: collapse
komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komórka6

...i to samo przy sterowaniu wyświetlaniem:

Dla drugiego wiersza display: none
komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komórka6

Dla drugiego wiersza visibility: hidden
komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komórka6

Dla porównania ta sama tabela bez zmiany widzialności:

komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komó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: collapse visibility: collapse visibility: collapse

Komentarze

Zobacz więcej komentarzy