Schnell testen CSS -Fallbacks

Ein praktischer CSS -Testtrick!

Die Browserkompatibilität ist nicht immer garantiert. Nehmen wir an, Sie benötigen einen Fallback für Browser ohne CSS -Gitterunterstützung (jetzt weniger häufig, aber nützlich für die Illustration).

Sie können @supports -Blöcke verwenden:

 @Supports (Anzeige: Grid) {
  .Blocks {
    Anzeige: Grid;
    Grid-Template-Säulen: Wiederholung (Auto-Fill, Minmax (min (100px, 100%), 1fr));
    Lücke: 1Rem;
  }
}

Um den Fallback schnell zu testen, ändern Sie @supports (display: grid) vorübergehend auf etwas Ungültiges, wie @supports (display: gridx) . Dies bietet einen einfachen Ein/Aus -Schalter zum Testen.

Das obige Beispiel fehlt robuste Fallbacks. Ein besserer Ansatz könnte Flexbox beinhalten (für Browser, die Flexbox unterstützen, aber nicht für Gitter). Alternativ könnte ein einfacherer spaltenbasierter Fallback eine angemessene Präsentation sicherstellen.

Wenn Sie zuversichtlich sind, dass der Browser @supports -Abfragen unterstützt (ein bisschen ironisch, ich weiß!), Sie können dies verwenden:

 @Supports (Anzeige: Grid) {
  / * Gitterstile *//
}

@Supports nicht (Anzeige: Grid) {
  / * Basic Fallback -Abstand *///
  .block {margin: 10px}
}

Diese Annahme wird zunehmend gültig, wenn ältere Browser ausgeschaltet sind (insbesondere wenn Sie den IE -Unterstützung fallen gelassen haben).

Dies unterstreicht die Wünschbarkeit einer @when -Syntax:

 @Wenn unterstützt (Anzeige: Grid) {
  / * Gitterstile *//
} @anders {
  / * Fallback -Stile *//
}

Diese sauberere Syntax würde die Lesbarkeit und Wartbarkeit erheblich verbessern.

Das obige ist der detaillierte Inhalt vonSchnell testen CSS -Fallbacks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!