การปรับปรุงองค์ประกอบ <permission> ที่เสนอ

Thomas Steiner

เผยแพร่: 12 พฤษภาคม 2025

องค์ประกอบ HTML <permission> ที่เสนออยู่ยังคงอยู่ในช่วงทดลองใช้จากต้นทาง เนื่องจากทีม Chrome กําลังปรับปรุงองค์ประกอบนี้โดยอิงตามรากฐานที่วางไว้ในช่วงทดลองใช้จากต้นทางครั้งแรก โพสต์นี้จะแชร์การปรับปรุงที่มีจุดประสงค์เพื่อให้คุณมีความยืดหยุ่นและ ควบคุมมากขึ้นเมื่อขอสิทธิ์ภายในเว็บแอปพลิเคชัน โปรดดูบทความก่อนหน้าของเราเรื่องการทดลองใช้ต้นทางสำหรับองค์ประกอบ <permission> ใหม่ของ HTML เพื่อดูภาพรวมที่ครอบคลุมเกี่ยวกับการเปิดตัวองค์ประกอบ <permission> และความสามารถเริ่มต้นขององค์ประกอบนี้

การสนับสนุนเนื้อหาสำหรับ UX ทางเลือก

เดิมทีองค์ประกอบ <permission> ถูกกำหนดให้เป็นองค์ประกอบว่างที่ไม่มีเนื้อหาจนถึง Chrome 136 ตั้งแต่ Chrome 137 เป็นต้นไป ระบบจะรองรับเนื้อหา ซึ่งหมายความว่าตอนนี้ต้องมาร์กอัปด้วยแท็กเปิดและปิด

<permission>
  <!-- optional content -->
</permission>

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

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

การตรวจหาฟีเจอร์แบบเป็นโปรแกรมที่ละเอียดยิ่งขึ้น

เราได้เปิดตัว เมธอดแบบคงที่ isTypeSupported() เพื่อช่วยคุณพิจารณาการรองรับสิทธิ์ประเภทใดประเภทหนึ่ง

HTMLPermissionElement.isTypeSupported('geolocation');

เมธอดนี้จะแสดงผลบูลีนที่ระบุว่ารองรับประเภทสิทธิ์ที่ระบุหรือไม่ เมื่อใช้ร่วมกับการตรวจหาฟีเจอร์ที่มีอยู่ typeof HTMLPermissionElement !== 'undefined' ตอนนี้คุณสามารถตรวจสอบได้โดยอัตโนมัติว่า ทั้งการรองรับองค์ประกอบ <permission> และการรองรับสิทธิ์เฉพาะ ประเภท

โปรดทราบว่าคุณยังส่งประเภทสิทธิ์หลายประเภทที่คั่นด้วยช่องว่างได้ด้วย (เช่น "camera microphone") และระบบจะแสดงว่าสตริงโดยรวมเป็นค่า "type" ที่ถูกต้องหรือไม่ เช่น การเรียกใช้ isTypeSupported() ด้วยพารามิเตอร์ต่อไปนี้จะแสดงผลลัพธ์ต่อไปนี้

• "camera" → true
• "geolocation" → true
• "camera geolocation" → false (แม้ว่าระบบจะรองรับแต่ละประเภท แต่จะไม่รองรับการรวมกัน)

ชื่อกิจกรรมที่อัปเดต

ใน Chrome 136 เราได้เปิดตัวเหตุการณ์ใหม่ 2 รายการเพื่อแทนที่เหตุการณ์ก่อนหน้านี้ ดังนี้

• onpromptdismiss (แทนที่ ondismiss)
• onpromptaction (แทนที่ onresolve)

เหตุการณ์ใหม่เหล่านี้ให้ความหมายที่ชัดเจนยิ่งขึ้นและสอดคล้องกับลักษณะการทำงานขององค์ประกอบได้ดียิ่งขึ้น เราจะเลิกใช้งานเหตุการณ์ที่เก่ากว่าใน Chrome 138 ดังนั้นเราขอแนะนำให้คุณอัปเดตตัวแฮนเดิลเหตุการณ์ตามนั้น

การรองรับไอคอน

เรากำลังดำเนินการเพื่อเปิดใช้การรองรับไอคอนภายในองค์ประกอบ <permission> ซึ่งกำหนดเป้าหมายไว้สำหรับ Chrome 138 ฟีเจอร์นี้จะช่วยให้คุณแสดงไอคอนที่กำหนดไว้ล่วงหน้า ซึ่งสอดคล้องกับประเภทสิทธิ์ โดยมีตัวเลือกการจัดรูปแบบที่จำกัด เช่น การปรับสี และขนาด เรายังคงสรุปรายละเอียด API ที่แน่นอน 

ตัวอย่างต่อไปนี้แสดงค่าเริ่มต้น สีเติมอื่น และไม่มีสีเติม แต่มีเส้นขอบสีดำ

การจัดรูปแบบเริ่มต้น

สีเริ่มต้นของไอคอนจะเหมือนกับสีข้อความขององค์ประกอบสิทธิ์

การจัดรูปแบบที่แก้ไขแล้ว

ตัวอย่างต่อไปนี้แสดงการแก้ไขรูปแบบเริ่มต้นที่เป็นตัวอย่าง

การเปลี่ยนสีไอคอน

::permission-icon {
  fill: black;
}

การเปลี่ยนแปลงเส้นขอบไอคอน

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

ปิดใช้ไอคอน

เมื่อเปิดตัวแล้ว ระบบจะเปิดใช้ไอคอนโดยค่าเริ่มต้น หากต้องการปิดใช้ไอคอน ให้ใช้ CSS ต่อไปนี้

::permission-icon {
  display: none;
}

หลักเกณฑ์เกี่ยวกับสไตล์

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

การรองรับแพลตฟอร์มและความสามารถที่เพิ่มขึ้น

ปัจจุบันองค์ประกอบ <permission> รองรับแพลตฟอร์มและความสามารถเพิ่มเติมดังนี้

• การรองรับ Android: ตอนนี้องค์ประกอบนี้ใช้งานได้ในอุปกรณ์ Android ซึ่งจะขยายการใช้งานในแพลตฟอร์มต่างๆ ของผู้ใช้
• รองรับตำแหน่งทางภูมิศาสตร์: ตอนนี้คุณขอtype="geolocation" สิทธิ์ได้โดยใช้องค์ประกอบ <permission> ที่มีแอตทริบิวต์บูลีนpreciselocationเพิ่มเติม แม้ว่าแอตทริบิวต์ preciselocation จะส่งผลต่อคำของพรอมต์เท่านั้น แต่เราก็กำลังดำเนินการอย่างเต็มที่เพื่อ แยกความแตกต่างระหว่างสิทธิ์เข้าถึงตำแหน่งแบบคร่าวๆ กับแบบแม่นยำในการอัปเดตในอนาคต

บทสรุป

การปรับปรุงองค์ประกอบ <permission> เหล่านี้เป็นส่วนหนึ่งของความพยายามอย่างต่อเนื่องของเรา ในการเพิ่มประสิทธิภาพคำขอสิทธิ์และปรับปรุงประสบการณ์ของผู้ใช้บนเว็บ เราขอแนะนำให้คุณทดลองใช้ฟีเจอร์ใหม่เหล่านี้และแสดงความคิดเห็นเพื่อช่วยเราปรับปรุงและพัฒนาความสามารถนี้