Utilities Visibility CSS Framework

Utilities, Visibility, CSS und Framework gehören hier zusammen, weil responsive Sichtbarkeit oft gebraucht wird.

Visibility Utilities sind die Klassen, mit denen du Elemente je nach Breakpoint zeigen oder verstecken kannst. Das kann praktisch sein, wenn du zum Beispiel eine kurze Navigation auf dem Handy und eine ausführliche Navigation auf Desktop willst. Wichtig ist, dass du es nicht als Ersatz für gutes Layout benutzt. Wenn du etwas nur versteckst, weil das Grid falsch ist, dann reparierst du das Symptom, nicht die Ursache.

<div class="visible-demo">
  <span class="only-desktop">Nur Desktop</span>
  <span class="only-mobile">Nur Mobil</span>
</div>

Breakpoints sauber halten

Ein Framework definiert Breakpoints zentral, sonst driftet es auseinander. Für eine kleine Site reichen oft zwei: mobil und ab 900px Desktop. Dann kannst du Utilities klar bauen. Eine typische Lösung ist: display:none in der Base, dann per Media Query wieder einschalten. Wichtig ist, dass die Klasse eindeutig ist, damit man sie später wiederfindet.

.only-desktop{ display:none; }
@media (min-width:900px){ .only-desktop{ display:inline; } }

@media (min-width:900px){ .only-mobile{ display:none; } }

Wann Visibility sinnvoll ist

Ich nutze Visibility gern für kleine Unterschiede: ein kurzer Hinweis, ein Icon, oder eine Zusatzspalte in einer Tabelle, die mobil wirklich stört. Für ganze Seitenbereiche sollte man vorsichtig sein, weil sonst doppelte Inhalte entstehen, und das wird beim Pflegen schnell verwirrend. Wenn du es trotzdem machst, halte es klar und dokumentiere es im Markup. Sonst fragt man sich Wochen später, warum ein Element „einfach weg“ ist, das ist dann echt unerquicklich.