İlgi Alanına Göre Tetiklenen İşlem Önizlemeleri

Kullanıcılara, işlemleri gerçekleştirmeden önce önizleme sunmak faydalı olabilir. İlgi alanı çağırıcılar, ilgi alanı kaynağı (ör. düğme veya bağlantı) ile ilgi alanı hedefi arasında ilgi alanı ilişkileri oluşturmak için bildirim tabanlı bir yöntem sunan deneysel bir web platformu özelliğidir. Bildirimsel ilişki kurulduktan sonra geliştiricinin hem CSS hem de JavaScript kullanarak ilgi ve ilgi kaybına göre yanıt verebileceği çeşitli yöntemler vardır. Bu kullanım alanında, Kullanıcıların İlgilerine Dayalı Hedefleme için çeşitli efektleri önizlemek üzere interest ve loseinterest etkinliklerinden yararlanabiliriz.

Nasıl uygulanır?

İlgi alanı ilişkisi, bir düğme veya bağlantıda (yani ilgi alanı kaynağında) interestfor özelliği ayarlanarak oluşturulur. Özellik, başka bir öğeye (ör. ilgi alanı hedefi) ait kimlik referansını alır. İlgi alanı çağırıcılarının veya kaynaklarının yalnızca tek bir ilgi alanı hedefi olabilir ancak bir ilgi alanı hedefinin birden fazla ilgi alanı çağırıcısı olabilir.

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

Bu kullanım alanında, bir Kullanıcıların İlgilerine Dayalı Hedefleme hedefi için çeşitli efektleri önizlemek üzere interest ve loseinterest etkinliklerinden yararlanabiliriz. Bu etkinliklerin her ikisi de InterestEvent olup ilgi alanının kaynağı olan source özelliğine (yani interestfor özelliğine sahip öğe) sahiptir.

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

Etkin ilgi kaynağı ve hedefi, sırasıyla :interest-source ve :interest-target sözde seçicileri kullanılarak CSS ile seçilebilir.

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

İlgi alanı çağırıcısının (interestfor özelliğine sahip öğe) başlangıç ve bitiş gecikmesi, interest-delay-start ve interest-delay-end CSS özellikleriyle veya kısaltılmış interest-delay özelliğiyle ayarlanabilir.

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

Yedek stratejiler

İlgi alanı çağırıcıları için yedekler ve tarayıcı desteği

İlgi alanı çağırıcılar, NPM'deki interestfor polyfill paketi kullanılarak koşullu olarak polyfill edilmelidir. CDN kullanmak yerine polyfill'i paketlemeyi tercih edin.

ZORUNLU: HTMLButtonElement.prototype üzerinde interestForElement özelliğini kontrol ederek özellik algılama gerçekleştirin ve polyfill'i yalnızca yerel destek olmadığında yükleyin.

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

CSS Polyfill ile İlgili Dikkat Edilmesi Gerekenler

Polyfill kullanılırken CSS API, yerel sözde sınıf ve özellik desteğinin eksikliğini gidermek için biraz değişir:

• Sözde sınıflar: Polyfill, gerçek :interest-source ve :interest-target sözde sınıflarını tanımlayamadığından bunun yerine .interest-source ve .interest-target sınıflarını uygular. ZORUNLU: Hem yerel hem de polyfill durumlarını desteklemek için bunları :is() ile birleştirin.

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

• CSS özellikleri: interest-delay, interest-delay-start ve interest-delay-end için polyfill, özel özellikleri tüm tarayıcılarda doğrudan okuyamadığından CSS değişkenlerinin kullanılmasını gerektirir.

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