มีอะไรใหม่ใน UI บนเว็บ: สรุป I/O 2025

Una Kravets

เผยแพร่: 14 สิงหาคม 2025

เมื่อฤดูกาลจัดงาน Google I/O ใกล้สิ้นสุด โพสต์นี้จะสรุปไฮไลต์เด่นๆ สำหรับ CSS และ Web UI ที่เราแชร์ในงานต่างๆ ในปีนี้

ฟีเจอร์ที่มีประสิทธิภาพอย่างยิ่งซึ่งนักพัฒนาซอฟต์แวร์เคยได้แต่ฝันถึงได้มาอยู่ในเบราว์เซอร์แล้ว และกำลังเข้าถึงความเข้ากันได้ข้ามเบราว์เซอร์เร็วกว่าที่เคย อย่างไรก็ตาม แม้จะมีความคืบหน้าดังกล่าว แต่รูปแบบ UI ที่พบบ่อยที่สุดบางรูปแบบก็ยังคงใช้งานได้อย่างถูกต้องยากอย่างน่าประหลาดใจ คุณมักจะต้องพึ่งเฟรมเวิร์ก JavaScript, เคล็ดลับ CSS ที่ซับซ้อน และโค้ดที่กำหนดเองจำนวนมากเพื่อสร้างคอมโพเนนต์ที่ควรจะง่ายกว่านี้

ทีม Chrome ร่วมกับผู้จำหน่ายเบราว์เซอร์รายอื่นๆ หน่วยงานด้านมาตรฐาน เช่น CSSWG และ WHATWG รวมถึงกลุ่มชุมชน เช่น Open UI กำลังมุ่งเน้นที่การทำให้รูปแบบ UI พื้นฐานเหล่านี้ใช้งานได้ง่ายอย่างแท้จริง

เมนูแบบเลือกที่ปรับแต่งได้

องค์ประกอบ <select> มีความสำคัญอย่างยิ่งสำหรับแบบฟอร์ม แต่โครงสร้างภายในขององค์ประกอบนี้มักจะได้รับการป้องกันโดยเบราว์เซอร์ ทำให้การจัดรูปแบบ CSS ที่สอดคล้องและครอบคลุมเป็นไปได้ยาก การสร้าง <select> ที่ดียิ่งขึ้นต้องอาศัยความเข้าใจองค์ประกอบพื้นฐานของ <select> ซึ่งได้แก่ Popover API และ CSS Anchor Positioning API

Popover API: ตอนนี้อยู่ใน Baseline แล้ว

เมนูแบบเลื่อนลงที่กำหนดเองต้องมีกล่องตัวเลือกแบบลอยที่ปรากฏเหนือองค์ประกอบ UI อื่นๆ ทั้งหมด ปิดได้ง่าย และจัดการโฟกัสได้อย่างถูกต้อง Popover API จะจัดการเรื่องนี้ทั้งหมด และในปีนี้ API นี้ได้เข้าสู่สถานะ "Baseline Newly available" ซึ่งหมายความว่า API นี้มีความเสถียรในเบราว์เซอร์หลักทุกเบราว์เซอร์

การสร้างป๊อปโอเวอร์ต้องมี 2 ส่วน ได้แก่ องค์ประกอบทริกเกอร์ (เช่น <button>) และองค์ประกอบป๊อปโอเวอร์เอง เชื่อมต่อโดยกำหนดแอตทริบิวต์ id และ [popover] ให้กับป๊อปโอเวอร์ จากนั้นอ้างอิง id นั้นในแอตทริบิวต์ [popovertarget] ของปุ่ม

Popover API จะจัดการวงจรทั้งหมดขององค์ประกอบ โดยมีฟีเจอร์ต่อไปนี้

• การแสดงผลเลเยอร์บนสุด: ไม่ต้องกังวลเรื่องดัชนีลำดับ Z อีกต่อไป
• ความสามารถในการปิดอย่างรวดเร็ว (ไม่บังคับ): ปิดเมื่อผู้ใช้คลิกนอกพื้นที่ป๊อปโอเวอร์
• การจัดการโฟกัสอัตโนมัติ: เบราว์เซอร์จะจัดการการไปยังส่วนต่างๆ ของแท็บเข้าและออกจากป๊อปโอเวอร์
• การเชื่อมโยงที่เข้าถึงได้: ระบบจะจัดการโมเดลการโต้ตอบพื้นฐานโดยตรง

องค์ประกอบ <dialog> ได้รับการอัปเกรด

แม้ว่าป๊อปโอเวอร์จะมีประสิทธิภาพ แต่ก็ไม่ใช่ตัวเลือกที่เหมาะสมเสมอไป ตัวอย่างเช่น ในการโต้ตอบที่บล็อกหน้าเว็บซึ่งต้องใช้ความคิดเห็นของผู้ใช้ โมดอล <dialog> จะเหมาะสมกว่า

ก่อนหน้านี้ <dialog> ยังไม่มีความสะดวกสบายบางอย่างของ [popover] แต่ตอนนี้กำลังจะเปลี่ยนแปลงไป แอตทริบิวต์ closedby="any" ใหม่ทำให้กล่องโต้ตอบแบบโมดัลรองรับฟังก์ชันการปิดแบบเบาแล้ว โดยจะปิดเมื่อผู้ใช้คลิกภายนอกหรือกดแป้น Escape

นอกจากนี้ ตัวเรียกใช้คำสั่ง ([command] และ [commandfor]) ยังมีวิธีแบบประกาศที่ไม่มี JavaScript ในการเชื่อมต่อปุ่มกับการดำเนินการ เช่น การเปิดกล่องโต้ตอบด้วย command="show-modal"

การวางตำแหน่งยึด CSS

เมื่อป๊อปโอเวอร์ปรากฏขึ้น จะต้องวางตำแหน่งให้สัมพันธ์กับองค์ประกอบที่เปิดป๊อปโอเวอร์ การคำนวณด้วยตนเองโดยใช้ JavaScript นั้นไม่เสถียรและอาจส่งผลต่อประสิทธิภาพ

ตั้งแต่ Chrome 125 เป็นต้นไป คุณจะใช้ CSS Anchor Positioning API ได้ ความสามารถใหม่นี้จะเชื่อมโยงองค์ประกอบหนึ่งกับอีกองค์ประกอบหนึ่งโดยการประกาศ และจัดการการวางตำแหน่งใหม่โดยอัตโนมัติเมื่อองค์ประกอบนั้นอยู่ใกล้ขอบหน้าจอ ฟีเจอร์นี้เป็นส่วนหนึ่งของ Interop 2025 ซึ่งเป็นโครงการริเริ่มข้ามเบราว์เซอร์เพื่อเปิดตัวฟีเจอร์ที่มีการร้องขอเป็นจำนวนมาก ซึ่งหมายความว่าเราคาดหวังได้ว่าฟีเจอร์นี้จะอยู่ในเบราว์เซอร์หลักทั้งหมดภายในสิ้นปี 2025

แม้ว่าคุณจะลิงก์องค์ประกอบอย่างชัดเจนด้วยพร็อพเพอร์ตี้ anchor-name และ position-anchor ได้ แต่การอัปเดตในข้อกำหนดและใน Chrome 133 จะสร้างความสัมพันธ์ของ Anchor โดยนัยระหว่าง <popover> กับ <button> ที่เรียกใช้ ซึ่งจะช่วยลดความซับซ้อนของโค้ดได้อย่างมาก และหมายความว่าตอนนี้คุณสามารถจัดตำแหน่งป๊อปโอเวอร์ด้วย CSS เพียงบรรทัดเดียวได้แล้ว เช่น position-area: bottom span-left

เครื่องมือจุดยึดจาก chrome.dev จะแสดงวิธีใช้ position-area เพื่อให้ได้ตำแหน่งที่คุณอาจต้องการ

ต่อยอดไปอีกขั้นและให้เบราว์เซอร์จัดตำแหน่ง Anchor ใหม่เพื่อป้องกันไม่ให้ Anchor เหล่านั้นอยู่นอกหน้าจอโดยกำหนดการสำรองด้วย position-try-fallbacks เดโมต่อไปนี้แสดงป๊อปโอเวอร์ที่ใช้พร็อพเพอร์ตี้นี้สำหรับตรรกะการเปลี่ยนตำแหน่งในตัว

<select>ที่ปรับแต่งได้ตามต้องการ

เมื่อมีองค์ประกอบพื้นฐานดังกล่าวในเวอร์ชันก่อนหน้า ในที่สุดการจัดรูปแบบที่ใช้เว็บดั้งเดิมสำหรับองค์ประกอบ <select> ก็พร้อมใช้งานใน Chrome 134 แล้ว ซึ่งรวมถึงพร็อพเพอร์ตี้ appearance ใหม่ องค์ประกอบเสมือนใหม่ และองค์ประกอบ <selectedcontent>

หากต้องการปลดล็อกการปรับแต่ง ให้ใช้ appearance: base-select; กับองค์ประกอบ <select> และองค์ประกอบเสมือน ::picker(select) ใหม่ ซึ่งกำหนดเป้าหมายไปยังรายการแบบเลื่อนลงของตัวเลือก ซึ่งจะแสดงชิ้นส่วนภายในใหม่สำหรับการจัดรูปแบบ ได้แก่

• <selectedcontent>: แสดงเนื้อหาของตัวเลือกที่เลือกซึ่งแสดงในปุ่ม
• ::picker-icon: ไอคอนลูกศรแบบเลื่อนลง
• <option>:checked และ ::checkmark: สำหรับการจัดรูปแบบตัวเลือกที่เลือกและเครื่องหมายถูก

ซึ่งช่วยให้มีเนื้อหาที่สมบูรณ์ภายในตัวเลือกและควบคุมการแสดงผลได้อย่างละเอียด เช่น คุณสามารถแสดงไอคอนและคำบรรยายแทนเสียงในรายการตัวเลือก แต่ซ่อนไว้ในสถานะปิดโดยใช้ display: none ภายใน selectedcontent

ส่วนที่ดีที่สุดคือ API นี้สามารถปรับปรุงได้อย่างต่อเนื่อง ในเบราว์เซอร์ที่ไม่รองรับฟีเจอร์เหล่านี้ ผู้ใช้จะยังคงได้รับตัวเลือกที่ใช้งานได้บนเว็บ คุณจะได้รับรูปลักษณ์ที่กำหนดเองในขณะที่ยังคงการช่วยเหลือพิเศษในตัว การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ และการผสานรวมแบบฟอร์มขององค์ประกอบการเลือกแบบเนทีฟบนเว็บ

ภาพสไลด์

ภาพหมุนอยู่ทุกที่บนเว็บ ไม่ใช่แค่ในส่วนฮีโร่ ซึ่งรวมถึงเนื้อหาที่เลื่อนในแนวนอนได้ในเลย์เอาต์ที่กระชับ เช่น UI ของ App Store แต่การสร้างภาพสไลด์บนเว็บยังคงเป็นเรื่องยาก โดยต้องคำนึงถึงหลายๆ อย่าง เช่น การจัดการสถานะ การกระตุกขณะเลื่อน ความสามารถในการโต้ตอบ และการช่วยเหลือพิเศษ แต่หากพิจารณาให้ดีแล้ว แคร์รอสเซลก็เป็นพื้นที่เลื่อนที่ดูดีซึ่งมี UI เพิ่มเติม

เริ่มต้นใช้งานแถบเลื่อน

หากต้องการสร้างภาพสไลด์ คุณต้องเริ่มด้วยรายการที่ล้นคอนเทนเนอร์ หากต้องการซ่อนแถบเลื่อนแนวนอนในขณะที่ยังคงให้เลื่อนเนื้อหาได้ ให้ใช้ scrollbar-width: none นอกจากนี้ ให้ใช้ scroll-snap-type และ scroll-snap-align เพื่อให้แถบเลื่อนดู "ตอบสนอง" ซึ่งจะช่วยให้มั่นใจได้ว่ารายการจะเลื่อนเข้าที่เมื่อผู้ใช้เลื่อน

ก่อนหน้าและถัดไปด้วย ::scroll-button

::scroll-button()องค์ประกอบเสมือนใหม่ซึ่งเปิดตัวใน Chrome 135 จะบอกให้เบราว์เซอร์สร้างปุ่ม "ถัดไป" และ "ก่อนหน้า" ที่มีสถานะและเข้าถึงได้ เบราว์เซอร์จะจัดการบทบาท ARIA ที่ถูกต้อง ลำดับการกด Tab และแม้แต่ปิดใช้ปุ่มโดยอัตโนมัติเมื่อคุณไปถึงจุดเริ่มต้นหรือจุดสิ้นสุด โดยไม่ต้องเพิ่ม JavaScript ใดๆ

หากต้องการเริ่มต้นปุ่มเลื่อน ให้ระบุเนื้อหาและป้ายกำกับที่เข้าถึงได้ เช่น

.carousel {

  &::scroll-button(left) {
    content: "⬅" / "Scroll Previous";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Next";
  }
}

จัดรูปแบบปุ่มเหล่านี้และวางตำแหน่งปุ่มเทียบกับภาพสไลด์หลักด้วยการวางตำแหน่งจุดยึด CSS ซึ่งเป็นแนวทางที่แนะนำในการดำเนินการดังกล่าว

การนำทางโดยตรงด้วย ::scroll-marker

สำหรับตัวบ่งชี้แบบจุดหรือภาพขนาดย่อ องค์ประกอบเสมือน ::scroll-marker และ ::scroll-marker-group จะเชื่อมโยงเครื่องหมายการนำทางกับรายการในคอนเทนเนอร์ที่เลื่อนได้โดยตรง เบราว์เซอร์จะถือว่ากลุ่มเป็น tablist และจัดการการนำทางด้วยแป้นพิมพ์

เช่นเดียวกับปุ่มเลื่อน ให้เริ่มต้นเครื่องหมายเลื่อนโดยเลือกใช้พร็อพเพอร์ตี้ content และระบุป้ายกำกับที่เข้าถึงได้ ในตัวอย่างต่อไปนี้ เราใช้แอตทริบิวต์ข้อมูลเพื่อตั้งค่าป้ายกำกับสำหรับเครื่องหมายการเลื่อน นอกจากนี้ ให้วางเครื่องหมายการเลื่อนใน ::scroll-marker-group โดยใช้พร็อพเพอร์ตี้ scroll-marker-group สุดท้าย ให้จัดรูปแบบเครื่องหมายที่ใช้งานอยู่โดยใช้:target-currentคลาสเสมือนใหม่ ตัวอย่างลักษณะที่อาจปรากฏในภาพสไลด์พื้นฐานมีดังนี้

.carousel {
  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ''/ attr(data-name);
  }

  > li::scroll-marker:target-current {
    background: blue;
  }
}

การค้นหาเกี่ยวกับสถานะการเลื่อน

ฟีเจอร์ CSS ใหม่ที่เกี่ยวข้องกับการเลื่อนช่วยให้คุณสร้างภาพสไลด์แบบไดนามิกและอินเทอร์แอกทีฟได้มากขึ้น การค้นหาสถานะการเลื่อนคือการค้นหาสื่อใหม่ที่ใช้ตามสถานะของโปรแกรมเลื่อน การค้นหาสถานะการเลื่อนมี 3 ประเภท ซึ่งเข้าถึงได้โดยใช้ scroll-state() ในคำสั่ง @container ดังนี้

• scroll-state(snapped): ตรงกันเมื่อองค์ประกอบอยู่ในตำแหน่ง "สแนป" ในภาพสไลด์ จะเป็นเมื่อมีการสแนปภาพตรงกลางของภาพสไลด์
• scroll-state(stuck): จัดรูปแบบองค์ประกอบ เช่น ส่วนหัว เมื่อองค์ประกอบระดับบนสุดกลายเป็นแบบติดหนึบ
• scroll-state(scrollable): เพิ่มตัวบ่งชี้ภาพ เช่น การจาง เพื่อแสดงว่ามีเนื้อหาให้เลื่อนดูอีก

รวมทุกสิ่งไว้ในที่เดียว

การผสมผสานระหว่างองค์ประกอบพื้นฐานของภาพสไลด์ CSS ใหม่, การค้นหาสถานะการเลื่อน และการวางตำแหน่ง Anchor ช่วยให้คุณสร้างภาพสไลด์แบบอินเทอร์แอกทีฟที่กำหนดเองได้ง่ายขึ้น ก้าวไปอีกขั้นด้วยการใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนเพื่อลิงก์ภาพเคลื่อนไหวกับตำแหน่งการเลื่อนโดยตรง ซึ่งจะสร้างเอฟเฟกต์ที่มีประสิทธิภาพ เช่น การปรับขนาดและจางหายของรายการเมื่อเลื่อนเข้ามาในมุมมอง ภาพเคลื่อนไหวเหล่านี้ทำงานนอกเทรดหลัก จึงมอบประสบการณ์การใช้งานที่ราบรื่น

ภาพสไลด์แบบอินเทอร์แอกทีฟนี้รวมscroll-state()คำค้นหา ::scroll-button, ::scroll-marker, การจัดตำแหน่งจุดยึด CSS และ :target-current

นอกจากนี้ คุณยังใช้พร็อพเพอร์ตี้ใหม่ที่ชื่อ interactivity เพื่อช่วยให้ผู้ใช้มุ่งเน้นไปที่เนื้อหาที่ใช้งานอยู่ได้ด้วย interactivity: inert ช่วยให้ผู้ใช้ใช้ความเฉื่อยโดยใช้ CSS ซึ่งจะทำให้รายการในคาร์ทรเซลที่อยู่นอกหน้าจอไม่สามารถโฟกัสได้และนำออกจากโครงสร้างการช่วยเหลือพิเศษ

ดูข้อมูลเพิ่มเติมเกี่ยวกับภาพสไลด์ CSS

การ์ดวางเมาส์แบบอินเทอร์แอกทีฟ

การ์ดแบบลอย ซึ่งเป็นป๊อปอัปแบบริชมีเดียที่จะปรากฏขึ้นเมื่อคุณวางเมาส์เหนือชื่อผู้ใช้หรือลิงก์นั้นมีประโยชน์อย่างมาก แต่ก็สร้างได้อย่างถูกต้องได้ยากเช่นกัน การจัดการความล่าช้า การจัดการเหตุการณ์ และการรองรับอุปกรณ์หลายเครื่องอย่างถูกต้องอาจต้องใช้เวลาหลายเดือนสำหรับทีมเฉพาะ แต่เรากำลังพัฒนาโซลูชันแบบประกาศใหม่ที่จะช่วยแก้ปัญหานี้ได้อย่างถาวร

ป๊อปโอเวอร์ที่ทริกเกอร์ตามความสนใจพร้อม [interestfor]

เคล็ดลับสำคัญเบื้องหลังโฮเวอร์การ์ดแบบประกาศคือแอตทริบิวต์ [interestfor] ฟีเจอร์ใหม่นี้จะนำความสามารถของป๊อปโอเวอร์มาใช้ แต่จะทริกเกอร์ตาม "ความสนใจ" ของผู้ใช้ ตัวอย่างเช่น ความสนใจของผู้ใช้ในอุปกรณ์พอยน์เตอร์อาจเป็นการวางเมาส์เหนือพอยน์เตอร์ การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์โดยใช้ Tab หรือการกดค้างหรือแตะบนหน้าจอสัมผัส การโต้ตอบบนอุปกรณ์เคลื่อนที่ยังไม่ได้รับการแก้ไข

หากต้องการเปลี่ยนป๊อปอัปที่อิงตามการคลิกเป็นป๊อปอัปที่อิงตามความสนใจ ให้สร้างองค์ประกอบที่เรียกใช้ ซึ่งอาจเป็น <button> หรือ <a> แล้วกำหนดแอตทริบิวต์ [interestfor] ที่เท่ากับ id ขององค์ประกอบ [popover] ซึ่งจะมีลักษณะดังนี้ใน HTML

<button interestfor="profile-callout">
  ...
</button>

<div id="profile-callout" popover>
 ...
</div>

เบราว์เซอร์จะจัดการตรรกะของเหตุการณ์ที่ซับซ้อนทั้งหมด ซึ่งรวมถึง

• เข้าและออกจากเหตุการณ์: การวางเมาส์เพื่อเข้าในอุปกรณ์ที่มีเคอร์เซอร์ละเอียด การไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ การกดค้างหรือแตะในอุปกรณ์ที่มีเคอร์เซอร์หยาบ
• ความล่าช้าของเหตุการณ์: ควบคุมความล่าช้าในการเข้าและออกด้วยพร็อพเพอร์ตี้ CSS เดียว

ฟีเจอร์นี้รองรับฟีเจอร์ป๊อปโอเวอร์อื่นๆ เช่น การรองรับเลเยอร์บนสุด ซึ่งป๊อปโอเวอร์จะแสดงในเลเยอร์ใหม่เหนือส่วนอื่นๆ ของ DOM Tree และระบบจะจัดการการเชื่อมโยงคอมโพเนนต์เชิงความหมายและโมเดลแผนผังการช่วยเหลือพิเศษพื้นฐานโดยตรง

การเรียกใช้ความสนใจในการจัดรูปแบบ

ตัวเรียกใช้ความสนใจมีฟีเจอร์ใหม่ๆ บางอย่าง ซึ่งหนึ่งในนั้นคือความสามารถในการควบคุมการหน่วงเวลาเข้าและออกโดยใช้พร็อพเพอร์ตี้ CSS: interest-target-delay อีกอย่างคือความสามารถในการจัดรูปแบบองค์ประกอบที่เรียกใช้ตามว่าองค์ประกอบนั้นมีความสนใจหรือไม่ โดยใช้:has-interestคลาสเสมือน

[interesttarget] {
  interest-target-delay: 0s 1s;

  &:has-interest {
    background: yellow;
  }
}

popover="hint" และ UI แบบมัลติฟังก์ชัน

องค์ประกอบสำคัญของปริศนาสำหรับผู้กระตุ้นความสนใจคือป๊อปโอเวอร์ประเภทใหม่ popover="hint" ความแตกต่างหลักจากป๊อปโอเวอร์อื่นๆ คือ ป๊อปโอเวอร์คำแนะนำจะไม่ปิดป๊อปโอเวอร์อื่นๆ เมื่อเปิด ซึ่งเหมาะสำหรับเคล็ดลับเครื่องมือหรือการ์ดแสดงตัวอย่างที่ควรปรากฏโดยไม่ต้องปิดเมนูหรือหน้าต่างแชทที่เปิดอยู่แล้ว

ซึ่งช่วยให้คุณสร้าง UI ที่ทรงพลังและมีหลายฟังก์ชันได้โดยไม่ต้องเขียนโค้ด ตอนนี้ปุ่มเดียวสามารถมีป๊อปโอเวอร์อัตโนมัติโดยใช้ popovertarget สำหรับการคลิกหลัก (เช่น การเปิดแผงการแจ้งเตือน) และป๊อปโอเวอร์คำแนะนำที่เรียกใช้ความสนใจเพื่อแสดงเคล็ดลับที่เป็นประโยชน์เมื่อวางเมาส์เหนือปุ่ม

อนาคตคือการประกาศ

ฟีเจอร์ที่กล่าวถึงในที่นี้แสดงถึงการเปลี่ยนแปลงพื้นฐานไปสู่แพลตฟอร์มเว็บที่มีประสิทธิภาพและประกาศมากขึ้น การปล่อยให้เบราว์เซอร์จัดการงานที่ซับซ้อนและซ้ำซากในการจัดการสถานะและการช่วยเหลือพิเศษช่วยให้เราลดปริมาณ JavaScript ปรับปรุงประสิทธิภาพ และมุ่งเน้นในสิ่งที่เราทำได้ดีที่สุด นั่นคือการสร้างประสบการณ์การใช้งานที่สร้างสรรค์และน่าสนใจ นี่เป็นยุคทองของ UI บนเว็บอย่างแท้จริง และเป็นเพียงจุดเริ่มต้นเท่านั้น ติดตามเราได้ที่นี่ขณะที่เรากำลังสร้างเว็บที่มีประสิทธิภาพมากขึ้นและใช้งานง่ายขึ้น

แหล่งข้อมูลเพิ่มเติม

• Popover API
• การวางตำแหน่งจุดยึด
• เครื่องมือ Anchor
• Command Invokers
• เมนูแบบเลือกที่ปรับแต่งได้ (RFC)
• ภาพสไลด์ CSS
• แกลเลอรีภาพสไลด์ CSS
• เครื่องมือกำหนดค่าภาพสไลด์ CSS
• การค้นหาสถานะการเลื่อนของ CSS
• คำอธิบายเกี่ยวกับตัวเรียกความสนใจ