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à 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 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ả 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 bất kỳ phần tử nào hiển thị ở lớp trên cùng.

Một đặc điểm của thông số kỹ thuật ban đầu của ::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 vấn đề này, 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 để các thuộc tính này xuất hiện:

/* 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 đã đượ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.

Hỗ trợ trình duyệt

• 122
• 122
• 120
• 17.4

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);
}

Minh hoạ bằng một <dialog> mở ra ở lớp trên cùng. Trong Chrome 122 trở lên, ::backdrop có thể truy cập và sử dụng biến --backdrop-color để tô màu nền.