Sau khi thực hiện bài khảo sát trước đó để giúp chọn cú pháp cho CSS Nesting, Nhóm công tác CSS tiếp tục tranh luận về cách tốt nhất để xác định việc lồng ghép trong CSS. Trong quá trình thảo luận, các ý tưởng về cú pháp mới đã được đề xuất. Để giúp Nhóm làm việc chọn giữa bất kỳ cú pháp nào trong số này, chúng tôi sẽ cung cấp một bản khảo sát mới.
Tuỳ chọn
Dựa trên kết quả của khảo sát trước, các lựa chọn 1 và 2 sẽ không còn được xem xét. Chúng tôi đã thêm 2 tuỳ chọn mới (bốn và 5 tuỳ chọn).
Lựa chọn 5: Vùng chứa lồng nhau cấp cao nhất
Giới thiệu quy tắc @nest cấp cao nhất chứa một khối & { … } có các nội dung khai báo và nhiều quy tắc kiểu lồng nhau.
@nest selector {
& {
property: value;
}
nested-selector {
property: value;
}
}
Lựa chọn 4: Đề xuất hậu tố
Một khối mã bổ sung chứa các quy tắc lồng nhau được chèn vào sau quy tắc chính chứa các nội dung khai báo.
selector {
property: value;
} {
nested-selector {
property: value;
}
}
Lựa chọn 3: Đề xuất bắt đầu không phải chữ cái
Mỗi quy tắc lồng nhau phải rõ ràng, bằng cách yêu cầu quy tắc đó bắt đầu bằng một ký hiệu không phải ký hiệu. Bạn có thể viết & div hoặc :is(div) nếu cần khởi động bộ chọn bằng bộ chọn loại.
selector {
property: value;
& nested-selector {
property: value;
}
}
Mặc dù các đoạn mã ở trên chỉ được dùng để minh hoạ những khái niệm cơ bản của từng đề xuất, nhưng có nhiều ví dụ khác đi kèm với bản khảo sát mới.
Bình chọn
Để bỏ phiếu, hãy chuyển đến https://webkit.org/blog/13607/. Việc bỏ phiếu không yêu cầu đăng ký, hãy chọn "Lựa chọn 5", "Lựa chọn 4" hoặc "Lựa chọn 3" và nhấn vào Gửi.