ไวยากรณ์ใหม่สำหรับคำค้นหาสื่อตามช่วงขนาด

ดูว่าไวยากรณ์ใหม่นี้ช่วยปรับปรุงการค้นหาสื่อได้อย่างไร

Rachel Andrew

คำค้นหาสื่อเปิดใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และฟีเจอร์ต่างๆ ของช่วงที่ช่วยให้ทดสอบขนาดขั้นต่ำและสูงสุดของวิวพอร์ตได้ประมาณ 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 ที่จะเขียนไวยากรณ์ใหม่เป็นไวยากรณ์แบบเก่าในสไตลชีต