Diskrepanz Beispiel und Erläuterung

[Gunnar Bittersmann]

@@Rolf B

Was an diesem Beispiel jetzt noch zu überdenken wäre, ist das Überlappen der @media-bereiche. Wenn ich eine Media-Query für min-width:30em und eine weitere für min-width:60em setze, treffen ab 60em zwei Medienbereiche gleichzeitig zu, was ggf. zu Kollisionen zwischen den Regeln führt. Besser wäre

@media (min-width: 30em)  {
   /* Regeln, die tatsächlich für kompakte und breite Ansicht gelten sollen */
}
@media (min-width: 30em) and (max-width: 60em) {
   /* Regeln für kompakte Ansicht 30em-60em */
}
@media (min-width: 60em) {
   /* Regeln für breite Ansicht 60em und mehr */
}

Stacked media queries sind meist nicht das, was man möchte. ☞ overlapping vs. stacked

Der Browser tut sich dann leichter. Je weniger Regeln gleichzeitig gelten, desto später kommt man in Bereiche, wo der Browser überlastet ist.

Durch die Regeln im Browserstylesheet gibt es schon viele Regeln, da machen die paar im Autorenstylesheet den Kohl auch nicht mehr fett.

Ernsthaft: Wenn der Browser überlastet ist, dann wegen zu viel JavaScript-Gedöns. Oder wegen zu vieler Elemente im DOM. Aber sicher nicht wegen zu vieler CSS-Regeln.

LLAP 🖖