Design Umsetzung @supports (display: grid)

[beatovich]

hallo

@Bernd Darum wurde dir ja auch mehrfach abgeraten 😉

Darum bin ich zurückhaltend grid zu empfehlen.

Es gibt verschiedene Strategien.

Angenommen, deine Default @media ist

@media screen {
  /* hier kein grid */
}

@media screen and (min-width:40em){
  /* hier gelten immer noch die oberen Regeln */

  @supports(display:grid){
    /* grid 2 spaltig */
  }
}

Also wenn er nur die Grid-Definition dort notiert, wird die eh ignoriert von Browsern, die grid nicht können. @supports ist nur dann nötig, wenn es weitere Angaben gibt, die nur Sinn machen, wenn das grid funktioniert, die aber von mehr Browsern verstanden werden. Z.B. andere Schriftgrößen oder -farben falls grid funktioniert. In der Regel benutzt man aber dieselbe Schriftgröße für alle Darstellungsformen auf ein und derselben Viewport-Breite. Brauche ich daher praktisch nie…

Übrigens, was waren die anderen Strategien? — Gerade bei der Verwendung von Flexbox oder Grid setze ich auf deren Selbstanpassungsfähigkeit und benötige auch die @media-Regeln viel seltener als früher.

Im Fall von Tabellen will man eher den anderen Weg gehen, also:

@media screen { /*table*/ }

@media screen and (max-width:40em){
  /*table*/
}