Thay đổi đối với kế thừa CSS ::backdrop

Bramus

Nhật ký của ::backdrop

API Toàn màn hình đã giới thiệu các khái niệm mới như lớp trên cùng và phần tử ::backdrop.

• Lớp trên cùng là lớp xếp chồng mới được hiển thị gần người dùng nhất trong khung nhìn. Lớp này có kích thước của khung nhìn và xuất hiện ở trên cùng của tất cả các lớp khác.
• Phần tử giả CSS ::backdrop là một hộp có kích thước của khung nhìn, hiển thị ngay bên dưới mọi phần tử hiển thị ở lớp trên cùng.

Thông số kỹ thuật ban đầu của ::backdrop có một đặc điểm như sau:

Thuộc tính này không kế thừa từ bất kỳ phần tử nào và cũng không kế thừa từ đó.

Mặc dù việc này hữu ích khi tách biệt kiểu của ::backdrop, nhưng cũng có nghĩa là ::backdrop không có quyền truy cập vào bất kỳ thuộc tính tuỳ chỉnh nào đã khai báo trên :root. Điều này đã khiến các nhà phát triển web cảm thấy bối rối.

Để khắc phục vấn đề này, bạn phải khai báo rõ ràng các thuộc tính tuỳ chỉnh của mình trên ::backdrop cũng như trên :root để có thể sử dụng các thuộc tính tuỳ chỉnh đó:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

Nội dung cập nhật cho ::backdrop

Để khắc phục vấn đề với ::backdrop, Nhóm hoạt động CSS đã áp dụng các khái niệm này và hiện đã chỉ định chúng trong thông số kỹ thuật của Bố cục vị trí CSS.

Cùng với việc chuyển định nghĩa sang quy cách mới, các định nghĩa cũng được tinh chỉnh.

Một sự điều chỉnh có tác động trực tiếp đến các nhà phát triển web là phần tử ::backdrop hiện là phần tử tuân theo cây, có nghĩa là phần tử này kế thừa mọi thuộc tính kế thừa từ phần tử gốc.

Nhờ sự thay đổi này, bạn có thể ghi đè các giá trị thuộc tính tuỳ chỉnh trên một số phần tử cụ thể và ::backdrop sẽ có quyền truy cập vào các phần tử đó. Ví dụ: giờ đây, ::backdrop được liên kết với một phần tử <dialog> mở có thể truy cập vào các thuộc tính tuỳ chỉnh có trong <dialog> đó.

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}