Có phải là :method không?

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.

Jhey Tompkins

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.

Có 2 loại phần tử hiện đượ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 bản minh hoạ này, trong đó bạn có thể hiển thị <dialog> theo kiểu "phương thức" hoặc "không theo phương thức".

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