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

Bật tính năng lồng ghép tìm trước 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.

Hỗ trợ trình duyệt

• 120
• 120
• 117
• 17.2

Nguồ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.

Lồng tên thẻ phần tử

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. Chúng tôi đã xoá lỗi này, giúp việc lồng CSS sau đây trở nên 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ật tuyệt vời khi lồng danh sách có thứ tự, không có thứ tự hoặc danh sách định nghĩa:

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

  dd {
    /* dl dd styles */
  }
}

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

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

Có một số nghi ngờ rằng trình phân tích cú pháp CSS có thể được hướng dẫn để 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. Để hiểu rằng mã thông báo là một thuộc tính, trình duyệt cần xem trước và xem liệu : 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, chứ không phải là thuộc tính và giá trị 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. Phân tích cú pháp tiếp tục, xác nhận việc lồng là lồng bộ chọn. Tốc độ đủ nhanh và độ tin cậy đủ cao để xác định là đủ để phát hành cú pháp.