The supports command

@supports buýrugy brauzer tarapyndan goldanylýan aýratynlyklaryň esasynda elementleriň stiline tesir edýär. Bu buýrukda logiki operatorlar not, and, or ulanyp şertler döredip bilersiňiz.

Sintaksis

css@supports condition {
  
}

Mysal

Brauzeriňiz display häsiýetini flex bahasy bilen goldasa, diňe şol teksti bolan abzas görkeziler we onuň şriftiniň reňki gök bolar diýen şerti belleýäli:

html<p class="yes">Siziň brauzeriňiz display: flex-i goldaýar.</p>
<p class="no">Siziň brauzeriňiz display: flex-i goldamaýar.</p>
css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

Şeýlede görmeli

  • CSS faýly importirleýän @import buýrugy
  • Media görnüşi üçin stil kesgitleýän @media buýrugy
  • Stiliň üstünligini kesgitleýän !important flag-i