Tym razem na wokandzie właściwość CSS visibility. Często traktowana po macoszemu, popadająca w zapomnienie – przede wszystkim u osób początkujących lub rzadko korzystających ze stylów. Nie ma problemu z zastosowaniem alternatyw, ale czy zawsze, któraś z alternatyw jest optymalna? Mimo wątpliwości warto wiedzieć z czym to się je.
Visibility, czyli widzialność. Jak sama nazwa wskazuje będzie powiązana z widocznością i ukrywaniem. Pomyślicie – ok, ale mamy już właściwość display, więc czym różnią się te właściwości.
- display: none w przeciwieństwie do visibility: hidden ukrywa cały element
- visibility: hidden pozostawia puste pole w miejscu ciała elementu, wielkości tożsamej z wielkością, gdy ciało jest widoczne
- dodatkowo uzyskujemy możliwość ograniczonego ukrycia poprzez wartość collapse, która węzłów niewchodzących w skład tabeli (<table />) działa identycznie do hidden, w przeciwnym wypadku pozwala ukrywać elementy tabeli bez ponownego rozplanowania wymiarów tabeli (można wykorzystać do ukrywania komórek bez nieprzyjaznych dla oka przeskoków rozmiarów)
O ile trzeci punkt jest jasny, jak słońce i określa konkretny cel (tabele), o tyle pierwsze dwa mają rozmyte przeznaczenie i tak naprawdę ciężko przypomnieć sobie ostatnie nasze spotkanie z właściwością – czyż nie? Jeśli nie to jestem wyjątkiem 🙂
Tak, czy inaczej mały przykład. Zakładajmy, że mamy aplikację SPA, w której prawym dolnym rogu chcemy umieścić jakiś widżet 100px x 200px.
Raczej pierwszym podejściem będzie stworzenie kontenera o wskazanej wielkości z właściwością position: fixed i ew. z-index: …
Rozwiązanie wydaje się optymalne, ale czy w sposób nieoptymalny moglibyśmy wykorzystać visibility. Jasne. Tworzymy kontener rodzica dla widżetu. Nadajemy visibility: hidden i text-align: right jednocześnie zmieniając display dziecka na inline-block i nadając visibility: visible. Otrzymujemy efekt identyczny, ale kontener rodzica obejmuje całą szerokość. Dzięki ukryciu nie blokujemy dostępu do treści pod spodem – to jest kluczowe.
We wskazanym przypadku rozwiązanie jest nieoptymalne (zazwyczaj tak jest jeśli występuje połączenie position: fixed i visibility: none), ale jeśli nałożymy ograniczenie, że <body> naszej aplikacji SPA nie posiada suwaka (kontenery potomne mogą być „skrolowalne”) i właściwość position pozostawimy w stanie domyślnym (jednocześnie ustawiając margin-top na wartość ujemną -200px).
Teraz właśnie przydaje nam się możliwość ukrywania treści. Pozwalamy na dostęp do innych statycznych elementów „pod spodem” – linki, treści, obrazki itd.
Niech nikomu się nie wydaje, że „widzialność” w stylach jest zbędna, czy nieprzemyślana.
Pozdrawiam!