ดูว่าไวยากรณ์ใหม่นี้ช่วยปรับปรุงการค้นหาสื่อได้อย่างไร
คำค้นหาสื่อเปิดใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และฟีเจอร์ต่างๆ ของช่วงที่ช่วยให้ทดสอบขนาดขั้นต่ำและสูงสุดของวิวพอร์ตได้ประมาณ 80% ของเว็บไซต์ที่ใช้คำค้นหาสื่อ ข้อกําหนดของ Media Queries ระดับ 4 มีไวยากรณ์ที่ปรับปรุงแล้วสําหรับการค้นหาช่วงเหล่านี้
ตัวอย่างต่อไปนี้แสดงวิธีการปรับปรุงการค้นหาให้มีประสิทธิภาพยิ่งขึ้น
การทดสอบ Media Query ทั่วไปสำหรับความกว้างของวิวพอร์ตขั้นต่ำจะเขียนดังนี้
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
ไวยากรณ์ใหม่นี้อนุญาตให้ใช้โอเปอเรเตอร์การเปรียบเทียบ
@media (width >= 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
การทดสอบความกว้างสูงสุด
@media (max-width: 30em) {
// Styles for viewports with a width of 30em or less.
}
และเวอร์ชันที่ใช้ไวยากรณ์ระดับ 4
@media (width <= 30em) {
// Styles for viewports with a width of 30em or less.
}
ไวยากรณ์นี้อาจช่วยเพิ่มประสิทธิภาพการค้นหาได้ โดยเฉพาะเมื่อทดสอบระหว่างความกว้าง 2 ระดับ ในตัวอย่างนี้ คิวรีสื่อจะทดสอบวิวพอร์ตที่มีความกว้างขั้นต่ำ 400 พิกเซลและความกว้างสูงสุด 600 พิกเซล
@media (min-width: 400px) and (max-width: 600px) {
// Styles for viewports between 400px and 600px.
}
ซึ่งเขียนใหม่โดยใช้ไวยากรณ์ใหม่ได้ดังนี้
@media (400px <= width <= 600px ) {
// Styles for viewports between 400px and 600px.
}
ฟีเจอร์ที่คุณทดสอบ ซึ่งในกรณีนี้คือ width
อยู่ในช่วงระหว่าง 2 ค่า
นอกจากจะทำให้การค้นหาสื่อสั้นลงแล้ว ไวยากรณ์ใหม่ยังมีข้อดีในด้านความแม่นยำด้วย การค้นหา min-
และ max-
จะรวมค่าที่ระบุไว้ เช่น การทดสอบ min-width: 400px
สำหรับความกว้าง 400 พิกเซลขึ้นไป ไวยากรณ์ใหม่ช่วยให้คุณระบุสิ่งที่ต้องการได้ชัดเจนยิ่งขึ้นและหลีกเลี่ยงการค้นหาที่อาจทับซ้อนกัน
หากต้องการใช้ไวยากรณ์ช่วงแบบใหม่โดยคำนึงถึงเบราว์เซอร์ที่ยังไม่ได้ใช้งาน เรามีปลั๊กอิน PostCSS ที่จะเขียนไวยากรณ์ใหม่เป็นไวยากรณ์แบบเก่าในสไตลชีต