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

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

Rachel Andrew

คำค้นหาสื่อเปิดใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และฟีเจอร์ต่างๆ ของช่วงที่ช่วยให้ทดสอบขนาดขั้นต่ำและสูงสุดของวิวพอร์ตได้ประมาณ 80% ของเว็บไซต์ที่ใช้คำค้นหาสื่อ ข้อกำหนดการค้นหาสื่อระดับ 4 มีไวยากรณ์ที่ได้รับการปรับปรุงสำหรับการค้นหาช่วงเหล่านี้

การรองรับเบราว์เซอร์

แหล่งที่มา

ตัวอย่างต่อไปนี้แสดงวิธีการปรับปรุงการค้นหาให้มีประสิทธิภาพยิ่งขึ้น

การทดสอบคิวรี่สื่อโดยทั่วไปสำหรับความกว้างของวิวพอร์ตขั้นต่ำจะเขียนดังนี้

@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 ที่จะเขียนไวยากรณ์ใหม่ให้เหมือนกับเวอร์ชันเก่าในสไตล์ชีต