Bộ chọn giả CSS tiện dụng này giúp bạn chọn các phần tử ở chế độ phương thức.
Bộ chọn giả lập tiện dụng này giúp bạn chọn các phần tử "cửa sổ bật lên" và tránh quản lý các lớp trong JavaScript bằng cách cung cấp cách phát hiện các phần tử cửa sổ bật lên.
Hiện có hai loại phần tử được phân loại là :modal
:
- Các phần tử hộp thoại sử dụng phương thức
showModal
. - Các phần tử ở chế độ toàn màn hình.
Bạn có thể sử dụng tính năng này như thế nào? Ví dụ này đặt tỷ lệ của tất cả các phần tử <dialog>
là :modal
.
dialog:modal {
scale: 2;
}
Hãy xem xét bản minh hoạ này, trong đó bạn có thể hiển thị <dialog>
theo kiểu "cửa sổ bật lên" hoặc "không phải cửa sổ bật lên".
Khi bạn hiển thị phiên bản "cửa sổ bật lên", phiên bản này sẽ sử dụng ::backdrop
do lớp trên cùng cung cấp.
dialog::backdrop {
background: hsl(0 0% 10% / 0.5);
}
Tuy nhiên, đối với phiên bản không có cửa sổ bật lên không có ::backdrop
, một cửa sổ bật lên giả sẽ được tạo bằng phần tử giả ::before
. Lớp phủ này nhẹ hơn và không làm mờ nội dung phía sau. Bạn có thể kết hợp với :not
để phát hiện <dialog>
không phải phương thức.
dialog[open]:not(:modal)::before {
content: "";
position: fixed;
height: 100vh;
width: 100vw;
top: 50%;
left: 50%;
background: hsl(0 0% 10% / 0.25);
transform: translate3d(-50%, -50%, -1px);
}
Điều này cũng sẽ áp dụng cho các phần tử ở chế độ toàn màn hình. Hãy xem xét phần tử tiêu đề này được tạo từ các span.
<header>
<h1>
<span style="--index: 0;">:</span>
<span style="--index: 1;">m</span>
<span style="--index: 2;">o</span>
<span style="--index: 3;">d</span>
<span style="--index: 4;">a</span>
<span style="--index: 5;">l</span>
</h1>
</header>
Khi phần tử ở chế độ toàn màn hình, các span sẽ tạo ảnh động.
h1 span {
animation: jump calc(var(--speed, 0) * 1s) calc(var(--index, 0) * 0.1s) infinite ease;
}
header:modal span {
--speed: 0.75;
}
@keyframes jump {
50% {
transform: translateY(-50%);
}
}