CSS-Grid: wie mache ein datei mit Firefox Code and IE 11 Code

[Gunnar Bittersmann]

@@ liebewinter

dieser Artikel […] ich möchte ihn lesen...

Ich nicht. Da steht ziemlich viel Unsinn drin.

.grid-container {
  @supports (display: grid) {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }
}

Das ist kein gültiges CSS.

In Sass wäre die Verschachtelung so möglich. Davon steht aber nichts da. Außerdem sollte solch ein Artikel keinen Präprozessor verwenden.

Andersrum wäre es gültiges CSS:

@supports (display: grid) {
  .grid-container {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }
}

Das ist aber immer noch unsinnig, denn das tut exakt dasselbe wie

  .grid-container {
    display: grid;  
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }

Wozu also das @supports()?

function detectIE() {
  if(navigator.userAgent.match(/Trident.*rv:11\./)) {
    $('body').addClass('ie11');
  }
}

User fucking agent sniffing?? Was für ein Blödsinn!

IE versteht kein @supports(), das stimmt. Das ist aber kein Grund für solchen Quatsch.

Man schreibt die Regeln für den Fallback ohne .ie11 auf und überschreibt sie (falls überhaupt nötig) für moderne Browser wieder in einem @supports()-Block – dafür macht ein solcher Sinn.

Also nicht

.ie11 {
  li {
    min-width: 290px;
    width: calc((100% / 5) - 30px);
  }
}

(mal abgesehen davon, dass das schon wieder kein CSS ist), sondern

  li {
    min-width: 290px;
    width: calc(100% / 5 - 30px);
  }

@supports (display: grid) {
  li {
    min-width: auto;
    width: auto;
  }
}

Die nicht notwendige Klammer hab ich auch gleich entsorgt.

Es sollten sich gute Artikel zu CSS Grid finden lassen. Dieser gehört nicht dazu.

Oder gute Video-Tutorials: in Jen Simmons’ YouTube-Kanal Layout Land.

LLAP 🖖