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 đã phát hành tính năng lồng CSS trong phiên bản 112 và tính năng này hiện đã có trong từng trình duyệt lớn.

Tuy nhiên, có một yêu cầu nghiêm ngặt và có thể không mong muốn đối với cú pháp, được liệt kê trong bài viết đầu tiên của các ví dụ về cách lồng không hợp lệ. Bài viết tiếp theo này sẽ trình bày những thay đổi trong 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 cú pháp lồng CSS là không thể lồng tên thẻ phần tử trần. Tính năng 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 lồng nhau này?

Thành công này phần lớn nhờ vào quá trình 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.

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

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 phân tích cú pháp được bộ chọn lồng nhau dưới dạng một thuộc tính theo lượt sử dụng thông thường, thì trình phân tích cú pháp có thể được khởi động lại ở chế độ giả định một bộ chọn thay vì một thuộc tính. Quá trình tiếp tục phân tích cú pháp, xác nhận việc lồng nhau là bộ chọn lồng nhau. Tốc độ đủ nhanh và độ tin cậy đủ cao để xác định là đủ để phát hành cú pháp.