„not-in“, „only-in“

[Auge]

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“.

Die unterschiedlichen Klassennamen habe ich wohl wahrgenommen. Da es zuvor aber um das anzeigemodellgerechte zurücksetzen von display: none; ging, habe ich erwartet, etwas wie ein umschalten zu sehen.

@media (width <= 60em) {
  .irgendwas { display: none; }
}
@media (width > 60em) {
  .irgendwas { display: grid; }
}

Aber das ginge ja auch mit folgendem..

.irgendwas { display: grid; }

@media (width <= 60em) {
  .irgendwas { display: none; }  
}

Per default sind ja alle Elemente, also auch die der genannten Klassen sichtbar und je nach Viewport sollen solche Elemente der jeweils adressierten Klassen unsichtbar gemacht werden.

Tja, das war dann wohl der für mich unerwartete Themenwechsel von „ein- und ausschalten“ hin zu „mal hier und mal da ausschalten und ausschalten“. Das ist die Sache mit der Erwartung. 😁

Tschö, Auge