หลังจากที่เราทำแบบสำรวจก่อนหน้านี้เพื่อช่วยเลือกไวยากรณ์สำหรับการซ้อน CSS คณะทำงาน CSS จะยังคงโต้เถียงกันถึงวิธีที่ดีที่สุดในการกำหนดการซ้อนใน CSS ในระหว่างการสนทนามีการแนะนำแนวคิดไวยากรณ์ใหม่ เราได้จัดทำแบบสำรวจใหม่เพื่อช่วยให้คณะทำงานเลือกใช้ไวยากรณ์แบบต่างๆ เหล่านี้
ตัวเลือก
จากผลการสำรวจก่อนหน้านี้ เราจะไม่พิจารณาตัวเลือกที่ 1 และ 2 อีกต่อไป มีการเพิ่มตัวเลือกใหม่สองตัวเลือก (สี่และห้า)
ตัวเลือกที่ 5: คอนเทนเนอร์ที่ซ้อนกันระดับบนสุด
เริ่มใช้กฎ @nest ระดับบนสุดที่มีบล็อก & { … } ที่มีการประกาศและกฎของรูปแบบที่ซ้อนกันหลายรายการ
@nest selector {
& {
property: value;
}
nested-selector {
property: value;
}
}
ตัวเลือกที่ 4: ข้อเสนอ Postfix
ระบบจะแทรกโค้ดบล็อกส่วนเกินที่มีกฎที่ซ้อนกันไว้หลังกฎหลักที่มีการประกาศ
selector {
property: value;
} {
nested-selector {
property: value;
}
}
ตัวเลือกที่ 3: ข้อเสนอเริ่มต้นที่ไม่ใช่ตัวอักษร
กฎที่ซ้อนอยู่ทั้งหมดจะไม่กำกวม โดยกำหนดให้กฎเริ่มต้นทำงานด้วยสัญลักษณ์ที่ไม่ใช่สัญลักษณ์ คุณเขียน & div หรือ :is(div) ได้หากต้องการเริ่มต้นตัวเลือกด้วยตัวเลือกประเภท
selector {
property: value;
& nested-selector {
property: value;
}
}
แม้ว่าตัวอย่างด้านบนจะใช้เพื่อแสดงข้อมูลพื้นฐานของแต่ละข้อเสนอเท่านั้น แต่ก็มีตัวอย่างอีกมากมายที่มาพร้อมกับแบบสำรวจใหม่
ลงคะแนนโหวต
หากต้องการโหวต โปรดไปที่ https://webkit.org/blog/13607/ การลงคะแนนเสียงไม่จําเป็นต้องลงทะเบียน เลือก "ตัวเลือกที่ 5" "ตัวเลือกที่ 4" หรือ "ตัวเลือกที่ 3" แล้วกด "ส่ง"