Pratinjau Tindakan yang Dipicu Minat

Sebaiknya berikan pratinjau tindakan kepada pengguna sebelum mereka melakukannya. Pemanggil minat adalah fitur platform web eksperimental yang menyediakan cara berbasis deklaratif untuk membuat hubungan minat antara sumber minat (yaitu tombol atau link) dan target minat. Setelah hubungan deklaratif dibuat, ada sejumlah metode yang dapat direspons developer berdasarkan minat dan hilangnya minat menggunakan CSS dan JavaScript. Untuk kasus penggunaan ini, kita dapat memanfaatkan peristiwa interest dan loseinterest untuk melihat pratinjau berbagai efek untuk target minat.

Cara menerapkan

Hubungan minat dibuat dengan menetapkan atribut interestfor pada tombol atau link (yaitu sumber minat). Atribut ini mengambil referensi ID ke elemen lain (yaitu target minat). Pemanggil atau sumber minat hanya dapat memiliki satu target minat, tetapi target minat dapat memiliki beberapa pemanggil minat.

<!-- 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>

Untuk kasus penggunaan ini, kita dapat memanfaatkan peristiwa interest dan loseinterest untuk melihat pratinjau berbagai efek untuk target minat. Kedua peristiwa ini adalah InterestEvent yang memiliki properti source yang merupakan sumber minat (yaitu elemen dengan atribut 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;
});

Sumber dan target minat aktif dapat dipilih dengan CSS menggunakan pemilih semu :interest-source dan :interest-target.

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

Penundaan mulai dan akhir untuk pemanggil minat (yaitu elemen dengan atribut interestfor) dapat ditetapkan dengan properti CSS interest-delay-start dan interest-delay-end atau properti singkat interest-delay.

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

Strategi penggantian

Penggantian & dukungan browser untuk Interest invoker

Pemanggil minat harus di-polyfill secara bersyarat menggunakan paket polyfill interestfor dari NPM. Lebih baik memaketkan polyfill daripada menggunakan CDN.

WAJIB: Deteksi fitur dengan memeriksa properti interestForElement di HTMLButtonElement.prototype, dan muat polyfill hanya jika dukungan native tidak ada.

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

Peringatan Polyfill CSS

Saat menggunakan polyfill, CSS API sedikit berubah untuk memperhitungkan kurangnya dukungan properti dan pseudo-class native:

• Pseudo-class: Polyfill tidak dapat menentukan pseudo-class :interest-source dan :interest-target yang sebenarnya, sehingga menerapkan class .interest-source dan .interest-target. WAJIB: Gabungkan dengan :is() untuk mendukung status native dan polyfill.

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

• Properti CSS: Untuk interest-delay, interest-delay-start, dan interest-delay-end, polyfill memerlukan penggunaan variabel CSS karena tidak dapat membaca properti kustom secara langsung di semua browser.

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