@supports käsk

Käsk @supports määrab stiili elementidele, võttes arvesse brauseri poolt toetatud võimalusi. Selles käsus saab luua tingimusi, kasutades logilisi operaatoreid not, and, or.

Süntaks

css@supports tingimus {
  
}

Näide

Loome tingimuse, et kui sinu brauser toetab omadust display väärtusega flex, siis kuvatakse ainult vastava tekstiga lõik, mille fondi värv on helesinine:

html<p class="yes">Sinu brauser toetab display: flex.</p>
<p class="no">Sinu brauser ei toeta display: flex.</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

Vaata ka