Design Umsetzung @supports (display: grid)

[marctrix]

Hej beatovich,

Ok, ich habe es jetzt mal angepasst:
https://codepen.io/anon/pen/yRPMjW

Muss ich das ganze @media screen jetzt auch noch außerhalb von @supports (display: grid) anpassen? Ich finde das ganze ist doch sehr viel Schreibarbeit für so ein Footer.

@Bernd Darum wurde dir ja auch mehrfach abgeraten 😉

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.

Marc