Regula supports

Regula @supports definește stilul elementelor luând în considerare funcționalitățile suportate de browser. În această regulă se pot crea condiții folosind operatorii logici not, and, or.

Sintaxă

css@supports condiție {
  
}

Exemplu

Să setăm o condiție că dacă browserul dvs. suportă proprietatea display cu valoarea flex, atunci va fi afișat doar paragraful cu textul corespunzător, în timp ce culoarea textului său va fi albastru deschis:

html<p class="yes">Browserul dvs. suportă display: flex.</p>
<p class="no">Browserul dvs. nu suportă display: flex.</p>

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

Результат:

Vedeți și