@supports pozwala nam na zdefiniowanie specyficznych bądź najnowszych styli (nie wspieranych jeszcze w innych przeglądarkach) dla przeglądarek które będą spełniały określony warunek. Składnia jest podobna do @media.

@supports(właściwość:wartość) {
  /* styles */
}

Poniżej kilka przykładów: 

@supports (display: grid) {
  div { display: grid; }
}
 
Jeśli przeglądarka nie wspiera naszej właściwości to zapodajmy jej alternatywne style
@supports not (display: grid) {
  div { float: left; }  
}
 
Możemy budować warunki przy użyciu or 
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    /* style */
}
 
Możemy budować warunki przy użyciu and 
@supports (display: grid) and (display: flex) {
  /* style */
}
 
 
Możemy budować warunki przy użyciu and oraz or
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: caret) {
    /* style */
}
 
 

 

Dodaj komentarz

10 + 4 =