Cập nhật cú pháp thoải mái cho CSS

Đã bật tính năng lồng nhau trong Chrome 120.

Adam Argyle

Đầu năm nay, Chrome đã lồng ghép CSS vào năm 112 và hiện tại trong mỗi trình duyệt chính.

Tuy nhiên, có một yêu cầu nghiêm ngặt và có thể nằm ngoài dự kiến đối với , được liệt kê ở bài viết đầu tiên của ví dụ về lồng không hợp lệ. Bài viết tiếp theo này sẽ đề cập đến những thay đổi về thông số kỹ thuật và từ Chrome 120.

Tên thẻ phần tử lồng nhau

Một trong những hạn chế đáng ngạc nhiên nhất trong bản phát hành đầu tiên của tính năng lồng ghép CSS không thể lồng các tên thẻ phần tử trần. Sự bất tiện này bị xoá, giúp cho việc lồng CSS sau đây hợp lệ:

.card {
  h1 {
    /* this is now valid! */
  }
}

/* the same as */
.card {
  & h1 {
    /* this is now valid! */
  }
}

Điều này trở nên thực sự hấp dẫn khi lồng các danh sách theo thứ tự, không theo thứ tự hoặc định nghĩa:

dl {
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

Điều gì đã thay đổi để cho phép việc lồng nhau này?

Điều này phần lớn là nhờ vào một số hoạt động khám phá và xây dựng nguyên mẫu của các kỹ sư Chrome, kết hợp với mong muốn của cộng đồng và Nhóm công tác CSS.

Chúng tôi rất nghi ngờ về việc trình phân tích cú pháp CSS có thể được hướng dẫn cho giữa tên thẻ (div) và tên thuộc tính (visibility) là trình phân tích cú pháp hiện không có khái niệm xem trước. Để hiểu rằng mã thông báo là một thuộc tính, trình duyệt cần xem xét trước và xem : có tuân theo hay không mã thông báo không xác định. Do đó, trong thông số kỹ thuật ban đầu, ký hiệu & được dùng để cho trình duyệt biết rằng những nội dung tiếp theo đã được lồng vào nhau và không phải là CSS thông thường thuộc tính và giá trị.

May mắn thay, một kỹ sư phát hiện ra rằng khi trình phân tích cú pháp không thể phân tích cú pháp bộ chọn lồng nhau làm thuộc tính theo lượt tiêu thụ thông thường, thì có thể đã khởi động lại ở chế độ giả định một bộ chọn thay vì một thuộc tính. Phân tích cú pháp tiếp tục, xác nhận việc lồng nhau là bộ chọn lồng nhau. Ứng dụng này đủ nhanh và đủ tin cậy để được xác định đủ để giải phóng cú pháp.