ตัวอย่างการดำเนินการที่ทริกเกอร์ตามความสนใจ

ฟีเจอร์บนเว็บ: Interest invokers

การแสดงตัวอย่างการดำเนินการให้ผู้ใช้เห็นก่อนที่จะยืนยันการดำเนินการนั้นอาจเป็นประโยชน์ Interest Invoker เป็นฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองที่ให้วิธีสร้างความสัมพันธ์ตามการกำหนดเป้าหมายตามความสนใจระหว่างแหล่งที่มาของความสนใจ (เช่น ปุ่มหรือลิงก์) กับเป้าหมายความสนใจโดยอิงตามการประกาศ เมื่อสร้างความสัมพันธ์แบบประกาศแล้ว นักพัฒนาซอฟต์แวร์จะตอบสนองต่อความสนใจและการสูญเสียความสนใจได้หลายวิธีโดยใช้ทั้ง CSS และ JavaScript สำหรับกรณีการใช้งานนี้ เราสามารถใช้ประโยชน์จากเหตุการณ์ 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>

สำหรับ Use Case นี้ เราสามารถใช้ประโยชน์จากเหตุการณ์ interest และ loseinterest เพื่อดูตัวอย่างเอฟเฟกต์ต่างๆ สำหรับเป้าหมายความสนใจ เหตุการณ์ทั้ง 2 รายการนี้คือ 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 {}

คุณสามารถตั้งค่าความล่าช้าในการเริ่มต้นและสิ้นสุดสำหรับ Interest Invoker (เช่น องค์ประกอบที่มีแอตทริบิวต์ interestfor) ได้ด้วยพร็อพเพอร์ตี้ CSS interest-delay-start และ interest-delay-end หรือพร็อพเพอร์ตี้ชวเลข interest-delay

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

กลยุทธ์สำรอง

การสำรองและการรองรับเบราว์เซอร์สำหรับ Interest Invoker

Interest Invoker ต้องใช้ Polyfill แบบมีเงื่อนไขโดยใช้แพ็กเกจ Polyfill interestfor จาก NPM แนะนำให้รวม Polyfill แทนการใช้ CDN

บังคับ: ตรวจหาฟีเจอร์โดยตรวจสอบพร็อพเพอร์ตี้ interestForElement ใน HTMLButtonElement.prototype และโหลด Polyfill เฉพาะเมื่อไม่มีการรองรับแบบเนทีฟ

<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

เมื่อใช้ Polyfill, CSS API จะเปลี่ยนแปลงเล็กน้อยเพื่อรองรับการขาดการสนับสนุนคลาสเทียมและพร็อพเพอร์ตี้แบบเนทีฟ

  • Pseudo-class: Polyfill ไม่สามารถกำหนด Pseudo-class :interest-source และ :interest-target จริงได้ จึงใช้คลาส .interest-source และ .interest-target แทน บังคับ: รวมเข้ากับ :is() เพื่อรองรับทั้งสถานะเนทีฟและ Polyfill
/* 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 Polyfill ต้องใช้ตัวแปร 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);
}