Dzisiaj na warsztat weźmiemy dwie własności w CSS jakimi są display oraz visibility oraz przedstawimy wam różnice w ich stosowaniu oraz działaniu na stronie internetowej.
Style CSS – a co to takiego?
Nazwa style CSS pochodzi od skrótu Cascading Style Sheets, który oznacza Kaskadowe arkusze stylu. To nic innego jak kod służący nadaniu odpowiedniego wyglądu naszej stronie internetowej zapisanej np. w języku HTML.
Style CSS stosowane są wszędzie tam gdzie posługujemy się więcej niż prezentowaniem czystego kodu dla użytkownika i stały się w wersji trzeciej nieodzownym elementem budowania nowoczesnych i responsywnych stron internetowych.
Oczywiście zarówno własność display jak i visibility należą do CSSów, o czym wspomnieliśmy na początku, dlatego też postanowiliśmy wyjaśnić Ci dokładnie na czym polega ich różne działanie w przypadku display: none i visibility: hidden.
Display: none vs visibility: hidden
Jak można przeczytać na w3schools.com własność display służy do określania sposobu wyświetlania danego elementu. Jej wartość none pozwala natomiast wyłączyć jego wyświetlanie. Zatem jak nie trudno się domyślić stosowanie stylu display: none pozwala na ukrycie niektórych elementów na stronie internetowej.
A jak działa własność visibility? Bardzo podobnie, lecz inaczej. Określana ona, czy dany element jest widoczy, bądź nie. Jeżeli nie to stosujemy właśnie visibility: hidden.
To tyle słowem teorii. Teraz przejdziemy do faktycznego zastosowania tych dwóch własności.
Własność visibility: hidden
Taka własność i wartość sprawiają, że dany element, który ją posiada staje się niewidoczny po stronie przeglądarki internetowej (lecz wciąż jest widoczny z poziomu kodu strony). Element ten jednak nie jest całkowicie usunięty, a pozostawia pustą przestrzeń, którą zajmował (np. odstęp pomiędzy sekcjami).
Aby zastosować ten kod należy dodać w HTML:
style="visibility: hidden;"
Własność display: none
W założeniu robi dokładnie to samo, ukrywa dany element, jednak jest jedna znacząca różnica. Ta własność z wartością none usuwa także pustą przestrzeń zajmowaną przez ukryty element. Jednym słowem jeżeli chcemy całkowicie pozbyć się czegoś na naszej stronie to korzystamy właśnie z display: none. Ukryta treść będzie jednak wciąż widoczna w kodzie źródłowym strony.
Aby zastosować ten kod należy dodać w HTML:
style="display: none;"
Stosowanie własności visibility i display
Pierwsza z nich przyda się jeżeli chcemy zachować aktualny układ dokumentu, a jednie ukryć jedną z jego części. Własność display sprawdzi się np. przy testowaniu zmian na stronie internetowej w celu szybkiego usunięcia elementu tak jakby w ogóle nie było go w kodzie. W niektórych przypadkach wartość display: none posłuży także jako sposób na zróżnicowane prezentowanie treści na stronie w zależności np. od rodzaju urządzenia,.
Należy jednak ostrożnie korzystać z obu własności, bowiem ich nieumyślne stosowanie może zaszkodzić stronie internetowej. Należy pamiętać, że ukrywa lub usunięta treść pozostaje zawsze widoczna np. dla robota Google lub podczas podglądu kodu źródłowego strony. Nie jest to zatem bezpieczna forma ukrywania informacji lub np. linków na stronie.