@supports հրամանը

@supports հրամանը սահմանում է ստիլեր տարրերին՝ հաշվի առնելով բրաուզերի կողմից աջակցվող հնարավորությունները: Այս հրամանի մեջ կարելի է պայմաններ ստեղծել՝ օգտագործելով տրամաբանական օպերատորները not, and, or:

Շարահյուսություն

css@supports պայման {
  
}

Օրինակ

Եկեք սահմանենք պայման, որ եթե ձեր բրաուզերը աջակցում է display հատկությունը flex արժեքով, ապա կցուցադրվի միայն համապատասխան տեքստով պարագրաֆը, մինչդեռ նրա տեքստի գույնը կլինի երկնագույն:

html<p class="yes">Ձեր բրաուզերը աջակցում է display: flex:</p>
<p class="no">Ձեր բրաուզերը չի աջակցում display: flex:</p>

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

Результат:

Տես նաև