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

Bramus

Nhật ký hoạt động của ::backdrop

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

Một tính năng của thông số kỹ thuật ban đầu cho ::backdrop là:

Phần tử này không kế thừa từ bất kỳ phần tử nào và không được kế thừa.

Mặc dù điều đó hữu ích để tách riêng 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 được khai báo trên :root. Điều này đã gây ra một số nhầm lẫn cho các nhà phát triển web.

Để khắc phục, bạn phải khai báo rõ ràng các thuộc tính tuỳ chỉnh trên ::backdrop cũng như trên :root để cung cấp các thuộc tính đó:

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

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

Thông tin cập nhật về ::backdrop

Để khắc phục các vấn đề với ::backdrop, Nhóm làm việc về CSS đã áp dụng các khái niệm này và hiện đã chỉ định các khái niệm này trong quy cách Bố cục được định vị CSS.

Cùng với việc di chuyển định nghĩa sang một thông số kỹ thuật mới, các định nghĩa này đã được tinh chỉnh.

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

Nhờ thay đổi này, bạn có thể ghi đè các giá trị thuộc tính tuỳ chỉnh trên các phần tử cụ thể và ::backdrop sẽ có quyền truy cập vào các giá trị đó. Ví dụ: ::backdrop liên kết với phần tử <dialog> đang mở hiện 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);
}