Genialer Trick-Alarm!
Nicht alle Browser unterstützen alle Funktionen. Nehmen wir an, Sie möchten eine Fallback-Lösung für Browser schreiben, die CSS Grid nicht unterstützen. Das ist heutzutage nicht sehr üblich, aber es dient nur zur Veranschaulichung.
Sie könnten den unterstützenden CSS-Code in einem @supports Block schreiben
@supports (display: grid) {
.blocks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
gap: 1rem;
}
}Um dann die Fallback-Lösung zu testen, ändern Sie schnell @supports (display: grid) zu etwas Unsinnigem, z. B. indem Sie ein "x" hinzufügen, sodass es @supports (display: gridx) wird. Das ist ein schneller Wechsel
Das obige Beispiel enthält keine sehr guten Fallback-Lösungen, oder?! Vielleicht würde ich versuchen, etwas Ähnliches in Flexbox zu schreiben, denn hey, vielleicht gibt es noch eine kleine Gruppe von Browsern, die Flexbox, aber nicht Grid unterstützen. Wahrscheinlicher ist, dass ich eine Fallback-Lösung schreibe, die die Dinge als Spalte ziemlich gut aussehen lässt.
Wenn ich ziemlich sicher bin, dass der Browser @supports Abfragen unterstützt (oh, die Ironie), könnte ich es so schreiben
@supports (display: grid) {
/* grid stuff */
}
@supports not (display: grid) {
/* at least space them out a bit */
.block { margin: 10px }
}Das ist eine Annahme, die immer sicherer wird, und ehrlich gesagt sind wir wahrscheinlich schon so weit (wenn Sie den IE-Support eingestellt haben).
Das lässt mich diese @when Syntax noch mehr wünschen, denn dann könnten wir schreiben
@when supports(display: grid) {
} @else {
}…was sich so frisch und so sauber anfühlt.
Nicht schlecht