Komut supports

@supports komutu, tarayıcı tarafından desteklenen özelliklere göre öğeler için stil belirler. Bu komutta, mantıksal operatörler not, and, or kullanılarak koşullar oluşturulabilir.

Sözdizimi

css@supports koşul {
  
}

Örnek

Tarayıcınız display özelliğini flex değeriyle destekliyorsa, yalnızca ilgili metne sahip paragrafın görüntüleneceği, aynı zamanda yazı renginin mavi olacağı bir koşul belirleyelim:

html<p class="yes">Tarayıcınız display: flex özelliğini destekliyor.</p>
<p class="no">Tarayıcınız display: flex özelliğini desteklemiyor.</p>

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

Результат:

Ayrıca bakınız