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

Bộ chọn giả CSS tiện lợi này cung cấp cho bạn cách chọn các phần tử thuộc phương thức.

Jhey Tompkins

Bộ chọn giả tiện dụng này cung cấp cho bạn cách chọn các phần tử "phương thức" và để tránh quản lý lớp trong JavaScript bằng cách cung cấp cách phát hiện các phần tử phương thứ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 thành phần ở 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 "phương thức" hoặc "không theo phương thức".

Khi bạn hiển thị phiên bản "phương thức", nó 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 phi phương thức không có ::backdrop, một phiên bản giả sẽ được tạo bằng phần tử giả ::before. Cách này sáng 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 một <dialog> không thuộc 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);
}

Thao tác này cũng sẽ áp dụng cho các thành phần ở 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 hiệu ứng độ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%);
  }
}

Một phần của Loạt chương trình tương tác mới