Direktiva supports

Direktiva @supports nastavuje styl prvkům s ohledem na funkce podporované prohlížečem. V této direktivě lze vytvářet podmínky pomocí logických operátorů not, and, or.

Syntaxe

css@supports podminka {
  
}

Příklad

Nastavme podmínku, že pokud váš prohlížeč podporuje vlastnost display s hodnotou flex, zobrazí se pouze odstavec s odpovídajícím textem, přičemž barva jeho písma bude modrá:

html<p class="yes">Váš prohlížeč podporuje display: flex.</p>
<p class="no">Váš prohlížeč nepodporuje display: flex.</p>

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

Результат:

Viz také