„not-in“, „only-in“

[Raketenwilli]

Hallo

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

(@2024-08-19:„bad“: „aber CSS Conditionals Level 5 sind noch nicht so weit.“)

Man erkläre mir den Unterschied zwischen display: none; und display: none;. Das geht doch viel einfacher, ganz ohne Media-Queries, mit display: none;. 😉

Ja. Das addressiert quasi das Problem mit meinen Kastensätzen, bei deren Wahrnehmumg schnell mal was verloren geht.

Das Gehemnis ist liegt in den schnll zu übersehenden .only-in-small-viewports vers. .not-in-small-viewports, genauer des Teils „only“ und „not“. Per default sind ja alle Elemente, also auch die der genannten Klassen sichtbar und je nach Viewport sollen solche Elemente der jeweils anderen, adressierten Klassen unsichtbar gemacht werden.