การอัปเดตช่วงกลางปี 2024 ของการทำงานร่วมกัน

Rachel Andrew

ขณะที่เราก้าวเข้าสู่ช่วงครึ่งหลังของปี เป็นโอกาสที่ดีในการพิจารณาว่า Interop 2024 ปรับปรุงความสามารถในการทำงานร่วมกันของเว็บในปีนี้

จุดเริ่มต้น

ในช่วงต้นปี Chrome ได้คะแนนการรองรับเบราว์เซอร์เวอร์ชันทดลองอยู่ที่ 83 คะแนน

วันที่ แดชบอร์ดที่มีคะแนนการทำงานร่วมกัน: 65, การตรวจสอบ: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79
แดชบอร์ดการทำงานร่วมกันปี 2024 ในเดือนกุมภาพันธ์ 2024
แดชบอร์ดที่มีคะแนนการทำงานร่วมกัน: 75, การตรวจสอบ: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88
แดชบอร์ดการทำงานร่วมกันปี 2024 ในสิ้นเดือนมิถุนายน 2024

วันนี้คะแนนคือ 90 คะแนนสำหรับเบราว์เซอร์คงที่คือ 85 คะแนน ณ วันที่ ของ Chrome 126 ในเดือนมิถุนายน คะแนนการทำงานร่วมกันระหว่างการทดสอบโดยรวมเพิ่มขึ้น 10 คะแนน และโพสต์นี้จะนำเสนอคุณลักษณะบางส่วนที่เป็นประโยชน์ต่อ คะแนนนั้นด้วย

ป๊อปอัป

Popover เป็นส่วนหนึ่งของฟีเจอร์ "ไอเทมใหม่พื้นฐาน" ในเดือนเมษายน 2024 ป็อปโอเวอร์คือ ที่น่าตื่นเต้นเพราะต้องมีฟีเจอร์ UI มากมาย เช่น เมนู เคล็ดลับเครื่องมือ การวางซ้อนสำหรับการเลือก และ UI การสอน ป๊อปอัป ก่อนเปิดขึ้นมา การสร้างฟีเจอร์เหล่านี้จะต้องมีการปรับแต่ง โค้ด โค้ดเพื่อตรวจสอบว่าองค์ประกอบหลายรายการไม่ได้เปิดพร้อมกัน หรือเพื่อเปิดใช้ ปิดไฟเมื่อผู้ใช้คลิกภายนอกองค์ประกอบ คุณอาจมี ประสบปัญหากับ z-index เพื่อให้แน่ใจว่าองค์ประกอบ UI จะอยู่ด้านบนของส่วนที่เหลือ อินเทอร์เฟซ

ฟีเจอร์เหล่านี้ทั้งหมดและอื่นๆ รวมอยู่ใน Popover API ซึ่งช่วยประหยัดเวลาในการพัฒนา และช่วยสร้างอินเทอร์เฟซที่มีประสิทธิภาพ และเข้าถึงง่ายยิ่งขึ้น สำหรับ ตัวอย่างเช่น โค้ดต่อไปนี้สร้างป๊อปอัปที่มีการปิดไฟ ซึ่งจะ ปิดป๊อปอัปอื่นๆ โดยอัตโนมัติเมื่อเปิด

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

การรองรับเบราว์เซอร์

  • Chrome: 114
  • ขอบ: 114
  • Firefox: 125
  • Safari: 17.

แหล่งที่มา

ดูข้อมูลเพิ่มเติมใน Popover API อยู่ที่เกณฑ์พื้นฐาน หลายหน้า ต่างเห็นประโยชน์ของ Popover แล้ว Tokopedia สามารถลดจำนวนโค้ด React ได้อย่างมาก โดยการใช้ประโยชน์จากฟีเจอร์นี้ โดยใช้ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับ

พร็อพเพอร์ตี้ที่กำหนดเองขั้นสูงด้วย @property

กฎ CSS @property จะช่วยให้คุณสร้างพร็อพเพอร์ตี้ที่กำหนดเองขั้นสูง รายละเอียดมากกว่าชื่อและค่าที่มีอยู่ในพร็อพเพอร์ตี้ที่กำหนดเองแบบมาตรฐาน กำหนดไวยากรณ์ที่อนุญาตเพื่อกำหนดประเภทข้อมูลที่พร็อพเพอร์ตี้นี้เก็บ เช่น สี ตัวเลข หรือความยาว จากนั้นตั้งค่าว่าจะให้พร็อพเพอร์ตี้ และค่าเริ่มต้น

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

ปัจจุบันกฎ @property ช่วยปรับปรุงคะแนนทดลองสำหรับ Firefox ซึ่งช่วยเพิ่มคะแนนแบบคงที่เมื่อจัดส่ง Firefox 128 ภายในเดือนนี้ และยังเข้าร่วม เกณฑ์พื้นฐานพร้อมใช้งานใหม่

การรองรับเบราว์เซอร์

  • Chrome: 85.
  • ขอบ: 85
  • Firefox: 128
  • Safari: 16.4

แหล่งที่มา

ดูข้อมูลเพิ่มเติมใน @property: การให้พลังพิเศษแก่ตัวแปร CSS

พร็อพเพอร์ตี้ font-size-adjust

พร็อพเพอร์ตี้ CSS font-size-adjust ช่วยให้คุณแก้ไขขนาดของอักษรตัวพิมพ์เล็กได้ ตัวอักษรที่สัมพันธ์กับขนาดตัวอักษรพิมพ์ใหญ่ วิธีนี้มีประโยชน์ในสถานการณ์ต่างๆ ตำแหน่งที่อาจเกิดการสำรองแบบอักษร เพราะจะช่วยให้มั่นใจได้ว่าแบบอักษรสำรองยังคงอยู่ อ่านได้ชัดเจน โดยเฉพาะแบบอักษรขนาดเล็ก

ปัจจุบันมีพร็อพเพอร์ตี้ font-size-adjust รวมอยู่ในคะแนนทดสอบ ของ Chrome แต่จะช่วยเพิ่มคะแนนที่เสถียรได้เมื่อมีการเปิดตัวด้วย Chrome 127 ในเดือนนี้ และยังผสานรวมกับฟีเจอร์ "พื้นฐานใหม่" ด้วย

การรองรับเบราว์เซอร์

  • Chrome: 127
  • ขอบ: 127
  • Firefox: 3.
  • Safari: 16.4

แหล่งที่มา

การตัดข้อความ: ยอดคงเหลือ

การใช้ text-wrap: balance จะสั่งให้เบราว์เซอร์หาสมดุลที่ดีที่สุด การตัดบรรทัดสำหรับข้อความ ซึ่งมีประโยชน์อย่างยิ่งสำหรับส่วนหัว เช่น การตัดส่วนหัวเป็นคำเดียวในบรรทัดที่ 2

Safari เพิ่งรองรับปัญหานี้ ขณะนี้เบราว์เซอร์อื่นๆ กำลังแก้ไขปัญหาอยู่ ไม่ผ่านการทดสอบ เพื่อให้แน่ใจว่าฟีเจอร์นี้ทำงานได้ดีในทุกเบราว์เซอร์

การรองรับเบราว์เซอร์

  • Chrome: 114
  • ขอบ: 114
  • Firefox: 121
  • Safari: 17.5

แหล่งที่มา

นอกจากคุณลักษณะหลักๆ เหล่านี้จะทำงานร่วมกันได้แล้ว เราได้ทำการปรับปรุง การทดสอบแต่ละครั้งที่ผ่านแสดงถึง เกี่ยวกับความสามารถในการทำงานร่วมกันได้อีกด้วย เราตื่นเต้นที่จะได้เห็นว่า ก็จะได้คะแนน 100% ภายในสิ้นปีนี้