Veraltete Browser

[Gunnar Bittersmann]

@@pl

… (mobiles first). Das hab ich gemacht und dann gesehen dass der IE8, der keine Media-Queries kennt, die Seite stets im mobile-Modus darstellt.

Dass es keine™ Browser gibt, die keine media queries kennen, hatten wir schon.

Also hab ich meine Media-Queries rumgedreht …

Letztens erst einen Artikel drüber gelesen (den ich jetzt natürlich nicht wiederfinde).

Wierum man media queries verwendet (min-width vs. max-width), hängt auch von der Defaultdarstellung in Browsern ab. Blöcke (section, article, div etc.) werden untereinander dargestellt – so wie man es für kleine Viewports haben möchte. Wenn man auf größeren Viewports Blöcke nebeneinander haben möchte, dann ändert man das Defaultverhalten nur für größere Viewports – mit '@media (min-width: …)'.

Für responsive Tabellen bspw. wäre es aber unsinnig, erst

table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block }

zu setzen und dann mit

@media (min-width: …)
{
  table    { display: table }
  caption  { display: table-caption }
  colgroup { display: table-column-group }
  col      { display: table-column }
  thead    { display: table-header-group }
  tbody    { display: table-row-group }
  tfoot    { display: table-footer-group }
  tr       { display: table-row }
  th, td   { display: table-cell }
}

mühsam den Ursprungszustand wiederherzustellen.

Stattdessen ändert man die Defaultdarstellung eben nur für kleine Viewports – mit max-width:

@media (max-width: …)
{
  table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td { diplay: block }
}

So stehen dann '@media (min-width: …)'- und '@media (max-width: …)'-Regeln in friedlicher Koexistenz im selben Stylesheet.

LLAP 🖖