پیش‌نمایش کنش‌های راه‌اندازی‌شده براساس علایق

ارائه پیش‌نمایش کنش‌ها به کاربران قبل‌از اینکه آن‌ها را انجام دهند می‌تواند مفید باشد. فراخوان‌های علاقه یک ویژگی آزمایشی پلتفرم وب هستند که روشی مبتنی بر اعلام برای ایجاد روابط علاقه بین یک منبع علاقه (یعنی یک دکمه یا پیوند) و یک هدف علاقه ارائه می‌دهند. پس‌از برقراری رابطه اعلانی، روش‌های متعددی وجود دارد که توسعه‌دهنده می‌تواند براساس علاقه و عدم علاقه بااستفاده از CSS و جاوا اسکریپت به آن‌ها پاسخ دهد. برای این مورد استفاده، می‌توانیم از رویدادهای interest و loseinterest برای پیش‌نمایش جلوه‌های مختلف برای هدف موردنظر استفاده کنیم.

نحوه پیاده‌سازی

رابطه علاقه با تنظیم کردن مشخصه interestfor روی دکمه یا پیوند (یعنی منبع علاقه) ایجاد می‌شود. این مشخصه مرجع شناسه را به عنصر دیگری (یعنی هدف علاقه) می‌برد. فراخوان‌ها یا منابع علاقه فقط می‌توانند یک هدف علاقه داشته باشند، اما یک هدف علاقه می‌تواند چندین فراخوان علاقه داشته باشد.

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

برای این مورد استفاده، می‌توانیم از رویدادهای interest و loseinterest برای پیش‌نمایش جلوه‌های مختلف برای هدف علاقه استفاده کنیم. هر دوی این رویدادها InterestEvent هستند که ویژگی source دارند که منبع علاقه است (یعنی عنصر با مشخصه 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;
});

منابع و اهداف فعال بهره را می‌توان با CSS به‌ترتیب بااستفاده از شبه‌گزینشگرهای :interest-source و :interest-target انتخاب کرد.

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

تأخیر شروع و پایان برای فراخواننده علاقه (یعنی عنصر دارای مشخصه interestfor) را می‌توان با ویژگی‌های CSS interest-delay-start و interest-delay-end یا ویژگی خلاصه interest-delay تنظیم کرد.

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

راهبردهای جایگزین

پشتیبانی مرورگر و بازگشت به حالت قبل برای فراخوان‌های Interest

فراخوان‌های Interest باید به‌صورت مشروط بااستفاده از بسته شبیه‌ساز مرورگر interestfor از NPM شبیه‌سازی شوند. ترجیحاً شبیه‌ساز مرورگر را به‌جای استفاده از CDN بسته‌بندی کنید.

اجباری: ویژگی را با بررسی کردن ویژگی interestForElement در HTMLButtonElement.prototype شناسایی کنید و شبیه‌ساز مرورگر را فقط زمانی بار کنید که پشتیبانی بومی وجود ندارد.

<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

هنگام استفاده از شبیه‌ساز مرورگر، CSS API کمی تغییر می‌کند تا عدم پشتیبانی از کلاس کاذب و ویژگی بومی را جبران کند:

• شبه‌کلاس‌ها: شبیه‌ساز مرورگر نمی‌تواند شبه‌کلاس‌های واقعی :interest-source و :interest-target را تعریف کند، بنابراین به‌جای آن‌ها کلاس‌های .interest-source و .interest-target را اعمال می‌کند. اجباری: آن‌ها را با :is() ترکیب کنید تا از هر دو حالت بومی و شبیه‌سازی‌شده پشتیبانی شود.

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

• ویژگی‌های CSS: برای interest-delay، interest-delay-start، و interest-delay-end، شبیه‌ساز مرورگر به استفاده از متغیرهای CSS نیاز دارد زیرا نمی‌تواند ویژگی‌های سفارشی را مستقیماً در همه مرورگرها بخواند.

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