Kommandot supports

Kommandot @supports anger stil för element med hänsyn till funktioner som stöds av webbläsaren. I detta kommando kan du skapa villkor med hjälp av logiska operatorer not, and, or.

Syntax

css@supports villkor {
  
}

Exempel

Låt oss sätta ett villkor att om din webbläsare stöder egenskapen display med värdet flex, så kommer endast stycket med motsvarande text att visas, samtidigt som dess teckensnittsfärg kommer att vara ljusblå:

html<p class="yes">Your browser support display: flex.</p>
<p class="no">Your browser does not support display: flex.</p>

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

Результат:

Se även