คำค้นหาคอนเทนเนอร์และ :has() เป็นการจับคู่ที่ตรงกันในสวรรค์ด้านการตอบสนอง แต่โชคดีที่ฟีเจอร์ทั้งสองนี้ใช้ได้รวมกันใน Chromium 105 นี่เป็นการเปิดตัวรุ่นใหญ่พร้อมด้วยฟีเจอร์ 2 ฟีเจอร์ที่เป็นที่ต้องการอย่างมากสำหรับอินเทอร์เฟซที่ปรับเปลี่ยนตามอุปกรณ์
คำค้นหาคอนเทนเนอร์: ข้อมูลสรุปสั้นๆ
การค้นหาคอนเทนเนอร์ช่วยให้นักพัฒนาซอฟต์แวร์ค้นหาตัวเลือกระดับบนสุดสำหรับข้อมูลขนาดและการจัดรูปแบบได้ ทำให้องค์ประกอบย่อยสามารถเป็นเจ้าของตรรกะการจัดรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ได้ ไม่ว่าจะอยู่ที่ตำแหน่งใดในหน้าเว็บ
แทนที่จะใช้วิวพอร์ตเพื่อจัดรูปแบบอินพุต เช่น พื้นที่ว่าง ตอนนี้นักพัฒนาซอฟต์แวร์สามารถดูขนาดขององค์ประกอบในหน้าเว็บได้แล้ว ความสามารถนี้หมายความว่าคอมโพเนนต์เป็นเจ้าของตรรกะการจัดรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ วิธีนี้ทำให้คอมโพเนนต์มีความยืดหยุ่นมากขึ้น เนื่องจากมีตรรกะการจัดรูปแบบแนบไปด้วย ไม่ว่าองค์ประกอบจะปรากฏในส่วนใดของหน้าก็ตาม
การใช้การค้นหาคอนเทนเนอร์
หากต้องการสร้างด้วยการค้นหาคอนเทนเนอร์ คุณต้องตั้งค่าการควบคุมในองค์ประกอบระดับบนสุดก่อน ซึ่งทำได้โดยการตั้งค่า container-type ในคอนเทนเนอร์ระดับบนสุด คุณอาจมีการ์ดที่มีรูปภาพและเนื้อหาข้อความบางส่วนที่มีลักษณะดังนี้
หากต้องการสร้างการค้นหาคอนเทนเนอร์ ให้ตั้งค่า container-type บนคอนเทนเนอร์การ์ดดังนี้
.card-container {
container-type: inline-size;
}
การตั้งค่า container-type เป็น inline-size จะค้นหาขนาดทิศทางแบบอินไลน์ของระดับบนสุด สำหรับภาษาละติน เช่น อังกฤษ ความกว้างนี้จะเป็นความกว้างของการ์ด เนื่องจากข้อความจะเรียงจากซ้ายไปขวา
ตอนนี้เราสามารถใช้คอนเทนเนอร์นั้นเพื่อนำสไตล์ไปใช้กับองค์ประกอบย่อยใดก็ได้โดยใช้ @container ดังนี้
.card {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card {
grid-template-columns: 1fr;
}
}
ตัวเลือกระดับบนสุด :has()
CSS :has() Pseudo-class ช่วยให้นักพัฒนาซอฟต์แวร์ตรวจสอบได้ว่าองค์ประกอบระดับบนสุดมีองค์ประกอบย่อยที่มีพารามิเตอร์ที่เฉพาะเจาะจงหรือไม่
ตัวอย่างเช่น p:has(span) หมายถึงตัวเลือกย่อหน้า (p) ที่มี span อยู่ภายใน คุณสามารถใช้ส่วนนี้เพื่อจัดสไตล์ของย่อหน้าหลัก หรือจัดรูปแบบส่วนต่างๆ ในนั้น ตัวอย่างหนึ่งที่มีประโยชน์คือ figure:has(figcaption) เพื่อจัดรูปแบบองค์ประกอบ figure ที่มีคำบรรยายวิดีโอ คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ :has() ได้ในบทความนี้โดย Jhey Tompkins
การค้นหาคอนเทนเนอร์และ:has()
คุณสามารถรวมกำลังการเลือกระดับบนสุดของ :has() เข้ากับพลังการค้นหาระดับบนสุดของการค้นหาคอนเทนเนอร์เพื่อสร้างสไตล์ภายในแบบไดนามิกได้
มาดูตัวอย่างแรกกันด้วยการ์ดจรวด จะเป็นอย่างไรหากคุณมีการ์ดที่ไม่มีรูปภาพ คุณอาจต้องการเพิ่มขนาดของชื่อและปรับเลย์เอาต์แบบตารางกริดเป็นคอลัมน์เดียวเพื่อให้ดูมีความตั้งใจมากขึ้นเมื่อไม่แสดงรูปภาพ
ในตัวอย่างนี้ การ์ดที่มีรูปภาพจะมีเทมเพลตตารางแบบ 2 คอลัมน์ ขณะที่การ์ดที่ไม่มีรูปภาพจะมีเลย์เอาต์แบบคอลัมน์เดียว นอกจากนี้ การ์ดที่ไม่มีรูปภาพจะมีส่วนหัวที่ใหญ่กว่า หากต้องการเขียนข้อมูลนี้โดยใช้ :has() ให้ใช้ CSS ต่อไปนี้
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
คุณกำลังค้นหาองค์ประกอบที่มีคลาส visual เพื่อใช้รูปแบบ 2 คอลัมน์ข้างต้น ฟังก์ชัน CSS ที่เป็นระเบียบอีกฟังก์ชันหนึ่งคือ :not() นี่เป็นส่วนหนึ่งของข้อกำหนดเดียวกับ :has() แต่มีมานานกว่ามากและมีการรองรับเบราว์เซอร์ที่ดีกว่าเดิม คุณยังรวม :has() และ :not() เข้าด้วยกันได้อีกด้วย ดังนี้
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
ในโค้ดด้านบน คุณกำลังเขียนตัวเลือกที่จัดรูปแบบ h1 ภายในการ์ดที่ไม่มีคลาส visual วิธีนี้จะทำให้คุณปรับขนาดแบบอักษรได้ชัดเจนมาก
รวมไว้ด้วยกัน
การสาธิตด้านบนแสดงการผสมระหว่าง :has(), :not() และ @container แต่การค้นหาคอนเทนเนอร์จะโดดเด่นขึ้นมากเมื่อคุณเห็นองค์ประกอบเดียวกันที่ใช้ในหลายตำแหน่ง มาเพิ่มการจัดรูปแบบและแสดงการ์ดเหล่านี้ในตารางกริดควบคู่กันไป
ตอนนี้คุณสามารถเห็นถึงพลังของ CSS ที่ทันสมัย เราสามารถเขียนสไตล์ที่ชัดเจนโดยใช้สไตล์ที่กำหนดเป้าหมายซึ่งสร้างตรรกะแบบเหนือตรรกะ และสร้างองค์ประกอบที่มีประสิทธิภาพจริงๆ ด้วยฟีเจอร์อันทรงพลัง 2 อย่างนี้ที่ลงจอดใน Chromium 105 และได้รับแรงสนับสนุนจากหลายเบราว์เซอร์ จึงเป็นช่วงเวลาที่น่าตื่นเต้นสำหรับนักพัฒนา UI เป็นอย่างยิ่ง