Komanda supports

Komanda @supports elementlərə üslubu, usbun dəstəklədiyi imkanları nəzərə alaraq təyin edir. Bu komanda içərisində məntiqi operatorlar not, and, or vasitəsilə şərtlər yarada bilərsiniz.

Sintaksis

css@supports şərt {
  
}

Nümunə

Gəlin şərt qoyaq ki, əgər brauzeriniz display xassəsini flex qiyməti ilə dəstəkləyirsə, onda yalnız uyğun mətn olan abzas göstəriləcək, eyni zamanda onun şrift rəngi mavi rəngdə olacaq:

html<p class="yes">Sizin brauzeriniz display: flex dəstəkləyir.</p>
<p class="no">Sizin brauzeriniz display: flex dəstəkləmir.</p>

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

Результат:

Həmçinin bax