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

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

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

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

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

ป๊อปอัป

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

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

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

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

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

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

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

ปัจจุบันกฎ @property จะช่วยปรับปรุงคะแนนเวอร์ชันทดลองของ Firefox ซึ่งจะเพิ่มคะแนนที่เสถียรเมื่อ Firefox 128 เปิดตัวในช่วงปลายเดือนนี้ และยังเข้าร่วมกลุ่ม "Baseline Newly Available" ด้วย

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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

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

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

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

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

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

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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


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