CSS - Ukrywanie elementów strony i różnice między visibility:hidden a display:none

Ukrywanie elementów strony internetowej to umiejętność przydatna każdemu ich twórcy. Do osiągnięcia tego efektu prowadzą dwie popularne drogi, które różnią się od siebie. Mam tu na myśli oczywiście atrybuty stylów CSS, a mianowicie visibility:hidden oraz display:none. Porównajmy więc ich działanie.

Co tu porównywać?

Nawet pośród doświadczonych twórców witryn, znajduje się wielu, którzy mieliby problem z określeniem różnicy w działaniu atrybutów visibility:hidden oraz display:none i nic w tym dziwnego - CSS jest pełen niuansów. Warto jednak wiedzieć o tych różnicach, za nim przyjdzie nam ukryć jakiś element strony, co może zaoszczędzić sporo nerwów na dociekaniu dlaczego strona wygląda inaczej niż zamierzaliśmy.

Jakie to różnice?

Różnica pomiędzy atrybutami visibility:hidden i display:none jest fundamentalna, jeśli chodzi o wizualną warstwę strony internetowej jak i strukturę DOM. Element opatrzony atrybutem stylu CSS display:none, oraz jego elementy potomne, nie zostaną uwzględnione w drzewie DOM i w ogóle nie zostaną wyrenderowane w przeglądarce. Inaczej ma się sprawa z elementami ukrytymi za pomocą visibility:hidden. W tym przypadku, najpierw dla danego elementu zostaną wyliczone wszystkie parametry, takie jak położenie czy wymiary, które zostaną uwzględnione podczas renderowania strony, jednak sam element nie zostanie wyświetlony (to trochę tak, jak by element znajdował się na stronie, tylko był zupełnie przezroczysty). Poniższy przykład powinien właściwie ilustrować różnicę w działaniu tych dwóch atrybutów: Co da następujący efekt:

Ukryty tekstTekst do wyświetlenia
Ukryty tekstTekst do wyświetlenia