Listen <li> sortieren?

[Auge]

Hallo

Wusste nicht, dass man Tabellen per CSS zerlegen kann.

Das wollte dir Tabellen-Theo in seinem Posting schon mit „Via CSS können optisch unerwünschte Spalten, Zeilen und Zellen ausgeblendet werden.“ zumindest andeuten.

Noch als Tip hintendran. Hier wird ja für die Reihenfolge von Media-Query-Breakpoints im CSS immer Mobile First gepredigt. Das halte ich auch für richtig so, aber wie immer gibt es keine Regel ohne Ausnahme.

Während das Grundlayout mit Breakpoints von schmal mach breit gestyled werden sollte, damit nur die Regeln, die oberhalb des Breakpoints geändert werden sollen auch geändert werden müssen, ist es bei den Tabellen anders herum.

Da Tabellen ihre eigenen Display-Eigenschaften haben, die man üblicherweise auch so benutzen will, ist der schmale Viewport mit der Blockdarstellung der Zellen untereinander die Ausnahme. Wenn du die Regeln für schmale Viewports im Rahmen des Mobile-First-Ansatzes zuerst auf Blockdarstellung umschalten würdest, müsstest du sie für breitere Viewports wieder mit ihren Standardwerten überschreiben. Das ist unnötige Arbeit und Quelle möglicher Fehler, wenn man vergessen hat, eine der Eigenschaften zurückzuschalten oder eine falschen Wert erwischt.

Es bietet sich also an, die Blockdarstellung von Tabellenzellen in einem Media-Query mit max-width-Angabe festzulegen, da somit oberhalb der definierten Grenze die normale Darstellung automatisch funktioniert. Alle anderen Regeln werden unabhängig davon im Mobile-First-Ansatz mit Media-Queries mit min-width-Angabe, von schmal nach breit sortiert, festgelegt.

So kann das aussehen:

/* Festlegung der Standardeigenschaften
   wie Schriftgrößen, Farben, etc. die
   in allen Fällen gelten sollen */

@media screen and (max-width: 24em) {
  /* Eigenschaften für die Blockdarstellung 
     von Tabellenzellen in schmalen Viewports */
}
@media screen and (min-width: 32em) {
  /* Eigenschaften für breitere Viewports */
}
@media screen and (min-width: 46em) {
  /* Eigenschaften für noch breitere Viewports */
}
…

Tschö, Auge