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