supports ကွန်မန်း

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

Syntax

@supports condition {
	
}

ဥပမာ

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

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

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

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

CSS file များကို import လုပ်သော @import ကွန်မန်း
media type အတွက် style သတ်မှတ်ပေးသော @media ကွန်မန်း
style ၏ ဦးစားပေးမှုကို သတ်မှတ်ပေးသော !important ကွန်မန်း