Und fertig ist ...

[Rolf B]

Hallo Raketenwilli,

display:initial

sollte man, finde ich, anders lösen. Grund: das Element, das man da je nach Viewportgröße sichtbar machen will, könnte eine Flexbox, ein Grid oder sonstwas mit display-Eigenschaft sein.

Deswegen versuche ich immer, wenn ich etwas mit display:none verstecke, es durch das Unwirksammachen des display:none wieder hervor zu holen. Mit Range-Abfragen wird das vereinfacht.

@media (width <= 60em) {
  .only-in-small-viewports { display: none; }
}
@media (width > 60em) {
  .not-in-small-viewports { display: none; }
}

Schöner wäre natürlich

@when media(width <= 60em) {
  .only-in-small-viewports { display: none; }
}
@else {
  .not-in-small-viewports { display: none; }
}

aber CSS Conditionals Level 5 sind noch nicht so weit.

(Selfblog, Spec)

Man muss, wenn man sowas tatsächlich einsetzt, auch überlegen, ob das Zuweisen einer technischen Klasse wie only-in-small-viewports das richtige Vorgehen ist. EIGENTLICH sollen Klassen ja fachliche Sachverhalte darstellen und das CSS den jeweiligen fachlichen Sachverhalt adressieren. Aber das ist immer ein Balanceakt.

Rolf