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.

  1. display: none w przeciwieństwie do visibility: hidden ukrywa cały element
  2. visibility: hidden pozostawia puste pole w miejscu ciała elementu, wielkości tożsamej z wielkością, gdy ciało jest widoczne
  3. 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: hiddentext-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: fixedvisibility: 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!