Bản xem trước hành động được kích hoạt theo mối quan tâm

Tính năng web: Trình gọi quan tâm

Bạn nên cho người dùng xem trước hành động của họ trước khi họ thực hiện. Trình gọi mối quan tâm là một tính năng thử nghiệm của nền tảng web, cung cấp cách thức dựa trên khai báo để tạo mối quan hệ quan tâm giữa nguồn quan tâm (tức là nút hoặc đường liên kết) và mục tiêu quan tâm. Sau khi thiết lập mối quan hệ khai báo, nhà phát triển có thể phản hồi bằng một số phương thức dựa trên mối quan tâm và việc mất mối quan tâm bằng cả CSS và JavaScript. Trong trường hợp sử dụng này, chúng ta có thể tận dụng các sự kiện interest và loseinterest để xem trước nhiều hiệu ứng cho một mục tiêu nhắm mục tiêu theo mối quan tâm.

Cách triển khai

Mối quan hệ quan tâm được tạo bằng cách đặt thuộc tính interestfor trên một nút hoặc đường liên kết (tức là nguồn quan tâm). Thuộc tính này lấy tham chiếu mã nhận dạng đến một phần tử khác (tức là mục tiêu quan tâm). Trình gọi hoặc nguồn quan tâm chỉ có thể có một mục tiêu quan tâm, nhưng một mục tiêu quan tâm có thể có nhiều trình gọi quan tâm.

<!-- MANDATORY: interest relationships must be established with the `interestfor` attribute on a button or a link -->
<button interestfor="interestingElement" data-effect="A">Some effect</button>
<button interestfor="interestingElement" data-effect="B">Some other effect</button>
<div id="interestingElement">Something interesting</div>

Trong trường hợp sử dụng này, chúng ta có thể tận dụng các sự kiện interest và loseinterest để xem trước nhiều hiệu ứng cho một mục tiêu quan tâm. Cả hai sự kiện này đều là InterestEvent có thuộc tính source là nguồn quan tâm (tức là phần tử có thuộc tính interestfor).

interestingElement.addEventListener("interest", event => {
  // Apply the preview based on `event.source`
  event.target.dataset.preview = event.source.dataset.effect;
});

interestingElement.addEventListener("loseinterest", event => {
  // Unapply the preview
  delete event.target.dataset.preview;
});

Bạn có thể chọn các nguồn và mục tiêu quan tâm đang hoạt động bằng CSS bằng cách sử dụng bộ chọn giả :interest-source và :interest-target tương ứng.

/* Styles to apply when the effect is being previewed */
:interest-source {}
:interest-target {}

Bạn có thể đặt độ trễ bắt đầu và kết thúc cho một trình gọi mối quan tâm (tức là phần tử có thuộc tính interestfor) bằng các thuộc tính CSS interest-delay-start và interest-delay-end hoặc thuộc tính viết tắt interest-delay.

[interestfor] {
  interest-delay-start: 0.2s;
  interest-delay-end: 0.1s;
}

Chiến lược dự phòng

Hỗ trợ dự phòng và trình duyệt cho trình gọi Interest

Trình gọi quan tâm phải được polyfill có điều kiện bằng cách sử dụng gói polyfill interestfor từ NPM. Ưu tiên gói polyfill hơn là sử dụng CDN.

BẮT BUỘC: Phát hiện tính năng bằng cách kiểm tra thuộc tính interestForElement trên HTMLButtonElement.prototype và chỉ tải polyfill khi thiếu tính năng hỗ trợ gốc.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

Lưu ý về Polyfill CSS

Khi sử dụng polyfill, CSS API sẽ thay đổi một chút để bù đắp cho việc thiếu lớp giả và thuộc tính gốc:

  • Lớp giả: Polyfill không thể xác định các lớp giả :interest-source và :interest-target thực, vì vậy, polyfill sẽ áp dụng các lớp .interest-source và .interest-target. BẮT BUỘC: Kết hợp các trạng thái này với :is() để hỗ trợ cả trạng thái gốc và trạng thái polyfill.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
  • Thuộc tính CSS: Đối với interest-delay, interest-delay-start và interest-delay-end, polyfill yêu cầu sử dụng các biến CSS vì không thể đọc trực tiếp các thuộc tính tuỳ chỉnh trong tất cả trình duyệt.
/* Adjust the start and end delay for interest invokers */
[interestfor] {
  --interest-delay-start: 0.2s;
  interest-delay-start: var(--interest-delay-start);
  --interest-delay-end: 0.1s;
  interest-delay-end: var(--interest-delay-end);
}