CSS @supports κανόνας

Ορισμός και χρήση

CSS @supports Ο κανόνας χρησιμοποιείται για να δοκιμάσει αν ο περιηγητής υποστηρίζει κάποια χαρακτηριστική CSS και να ορίσει εναλλακτικά στυλ αν δεν υποστηρίζεται.

Παράδειγμα

Αν ο περιηγητής υποστηρίζει το display: grid, εφαρμόστε @supports CSS εντός κανόνων. Αν δεν υποστηρίζεται, εφαρμόστε @supports Στυλ κλάσης .container εκτός κανόνων:

/* Αν ο περιηγητής δεν υποστηρίζει το display: grid, χρησιμοποιήστε αυτό το CSS */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* Αν ο περιηγητής υποστηρίζει το display: grid, χρησιμοποιήστε αυτό το CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

Δοκιμάστε το προσωπικά

γλώσσα CSS

@supports (supports-condition) {
  /* Αν η προϋπόθεση είναι αληθής, εφαρμόστε αυτό το CSS */
}

Τιμή ιδιότητας

Τιμή Περιγραφή
supports-condition

Ορίζει τις προϋποθέσεις που εκφράζονται ως ζευγάρι όνομα-τιμή (property: value) ή γλώσσα function().

Οι προϋποθέσεις μπορούν να συνδυαστούν με and, or ή not.
selector()

είναι γλώσσα function(). Ελέγχει αν ο περιηγητής υποστηρίζει το καθορισμένο γλωσσάρα επιλογής.

Παράδειγμα, @supports selector(h2 > p) αν ο περιηγητής υποστηρίζει τον υποσυνδυαστή, επιστρέφει true και εφαρμόζει το στυλ CSS.
font-tech()

είναι γλώσσα function(). Ελέγχει αν ο περιηγητής υποστηρίζει το καθορισμένο τεχνολογία γραμματοσειράς.

Παράδειγμα, @supports font-tech(color-svg) αν ο περιηγητής υποστηρίζει τα πολυχρωμικά SVG, επιστρέφει true και εφαρμόζει το στυλ CSS.
font-format()

είναι γλώσσα function(). Ελέγχει αν ο περιηγητής υποστηρίζει το καθορισμένο μορφή γραμματοσειράς.

Παράδειγμα, @supports font-format(woff) αν ο περιηγητής υποστηρίζει το WOFF 1.0, επιστρέφει true και εφαρμόζει το στυλ CSS.

Υποστήριξη περιηγητή

Τα αριθμήματα στην τаблицη δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τον κανόνα @.

@ δομή κανόνων Chrome Edge Firefox Safari Opera
@supports 28 12 22 9 12.1
font-format() 108 108 106 17 94
font-tech() 108 108 106 17 94
selector() 83 83 69 14.1 69