เมื่อเข้าสู่ช่วงครึ่งหลังของปี เราขอพาคุณไปดูว่า Interop 2024 ปรับปรุงการทำงานร่วมกันของเว็บในปีนี้ได้อย่างไร
จุดเริ่มต้น
เมื่อต้นปี Chrome มีคะแนนการรองรับเบราว์เซอร์เวอร์ชันทดลองอยู่ที่ 83
ปัจจุบันคะแนนดังกล่าวอยู่ที่ 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>
ดูข้อมูลเพิ่มเติมได้ที่ 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" ด้วย
ดูข้อมูลเพิ่มเติมใน @property: มอบพลังพิเศษให้ตัวแปร CSS
พร็อพเพอร์ตี้ font-size-adjust
พร็อพเพอร์ตี้ font-size-adjust
ของ CSS ช่วยให้คุณแก้ไขขนาดของตัวอักษรตัวพิมพ์เล็กตามขนาดของตัวอักษรตัวพิมพ์ใหญ่ได้ ซึ่งมีประโยชน์ในสถานการณ์ที่อาจมีการแทนที่แบบอักษร เนื่องจากช่วยให้มั่นใจว่าแบบอักษรสำรองจะยังคงอ่านออกได้ โดยเฉพาะเมื่อใช้แบบอักษรขนาดเล็ก
ปัจจุบันพร็อพเพอร์ตี้ font-size-adjust
รวมอยู่ในคะแนนเวอร์ชันทดลองสำหรับ Chrome แต่คะแนนจะเพิ่มขึ้นเมื่อเปิดตัวพร้อมกับ Chrome 127 ในเดือนนี้ และยังรวมอยู่ใน "Baseline ใหม่พร้อมใช้งาน" ด้วย
text-wrap: balance
การใช้ text-wrap: balance
จะบอกให้เบราว์เซอร์หาการขึ้นบรรทัดใหม่ของข้อความที่สมดุลที่สุด ซึ่งมีประโยชน์อย่างยิ่งสำหรับส่วนหัว เช่น ป้องกันไม่ให้ส่วนหัวตัดขึ้นบรรทัดใหม่เป็นคำเดียวในบรรทัด 2
เมื่อเร็วๆ นี้ Safari ได้รองรับฟีเจอร์นี้ ส่วนเบราว์เซอร์อื่นๆ กำลังพยายามแก้ไขการทดสอบที่ไม่ผ่านเพื่อให้มั่นใจว่าฟีเจอร์นี้ใช้งานได้ดีในเบราว์เซอร์ทุกรุ่น
นอกจากฟีเจอร์หลักเหล่านี้จะทำงานร่วมกันได้แล้ว เรายังได้ทำการปรับปรุงอื่นๆ อีกมากมาย การทดสอบแต่ละครั้งที่ผ่านแสดงถึงปัญหาการทำงานร่วมกันที่คุณจะไม่พบ เราตื่นเต้นที่จะได้เห็นว่าเราจะเข้าใกล้คะแนน 100% ได้มากแค่ไหนภายในสิ้นปีนี้