supports ကွန်မန်း

@supports ကွန်မန်း သည် browser က support လုပ်သော feature များကို ထည့်သွင်းစဉ်းစားကာ element များအတွက် style သတ်မှတ်ပေးသည်။ ဤကွန်မန်းတွင် ယထာဘူတ operator များဖြစ်သော not, and, or များကိုအသုံးပြု၍ condition များကို ဖန်တီးနိုင်သည်။

Syntax

css@supports condition {
  
}

ဥပမာ

သင့် browser က display property ၏ flex တန်ဖိုးကို support လုပ်ပါက သက်ဆိုင်ရာ စာသားပါသော paragraph သာဖော်ပြပြီး ၎င်း၏ font အရောင်ကို အပြာရောင်ဖြစ်စေရန် condition တစ်ခုသတ်မှတ်ကြပါစို့:

html<p class="yes">သင့် browser သည် display: flex ကို support လုပ်ပါသည်။</p>
<p class="no">သင့် browser သည် display: flex ကို support မလုပ်ပါ။</p>

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

Результат:

ဆက်လက်ကြည့်ရှုရန်