การค้นหาคอนเทนเนอร์และ :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()
Pseudo-class ของ CSS :has() ช่วยให้นักพัฒนาซอฟต์แวร์ตรวจสอบได้ว่าองค์ประกอบระดับบนสุดมีองค์ประกอบย่อยที่มีพารามิเตอร์ที่เฉพาะเจาะจงหรือไม่
ตัวอย่างเช่น 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