คำนสั่ง 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;
  }
}

Результат:

ดูเพิ่มเติม