คำนสั่ง supports

คำสั่ง @supports กำหนดสไตล์ให้กับองค์ประกอบโดยคำนึงถึง คุณสมบัติที่เบราว์เซอร์รองรับ ในคำสั่งนี้ คุณสามารถสร้างเงื่อนไขโดยใช้ ตัวดำเนินการทางตรรกะ not, and, or

ไวยากรณ์

@supports เงื่อนไข {
	
}

ตัวอย่าง

ลองกำหนดเงื่อนไขว่าหากเบราว์เซอร์ของคุณรองรับ คุณสมบัติ display ที่มีค่า flex จะแสดงเฉพาะย่อหน้าที่มี ข้อความที่เกี่ยวข้องเท่านั้น ในขณะที่สีตัวอักษรของย่อหน้านั้น จะเป็นสีฟ้า:

<p class="yes">เบราว์เซอร์ของคุณรองรับ display: flex</p>
<p class="no">เบราว์เซอร์ของคุณไม่รองรับ display: flex</p>

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

ดูเพิ่มเติม

คำสั่ง @import,
ซึ่งนำเข้าไฟล์ CSS
คำสั่ง @media,
ซึ่งกำหนดสไตล์สำหรับประเภทสื่อ
คำสั่ง !important,
ซึ่งกำหนดลำดับความสำคัญของสไตล์