Kommandoen supports

Kommandoen @supports setter stil for elementer med hensyn til funksjoner som støttes av nettleseren. I denne kommandoen kan du opprette betingelser ved hjelp av logiske operatorer not, and, or.

Syntaks

css@supports betingelse {
  
}

Eksempel

La oss sette en betingelse om at hvis nettleseren din støtter egenskapen display med verdien flex, vil kun avsnittet med tilhørende tekst vises, og fontfargen vil være blå:

html<p class="yes">Nettleseren din støtter display: flex.</p>
<p class="no">Nettleseren din støtter ikke display: flex.</p>

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

Результат:

Se også