ขณะที่เราก้าวเข้าสู่ช่วงครึ่งหลังของปี เป็นโอกาสที่ดีในการพิจารณาว่า Interop 2024 ปรับปรุงความสามารถในการทำงานร่วมกันของเว็บในปีนี้
จุดเริ่มต้น
ในช่วงต้นปี Chrome ได้คะแนนการรองรับเบราว์เซอร์เวอร์ชันทดลองอยู่ที่ 83 คะแนน
![แดชบอร์ดที่มีคะแนนการทำงานร่วมกัน: 65, การตรวจสอบ: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79](https://web.dev/static/blog/interop-2024-midyear/image/interop-feb.png?hl=th)
![แดชบอร์ดที่มีคะแนนการทำงานร่วมกัน: 75, การตรวจสอบ: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88](https://web.dev/static/blog/interop-2024-midyear/image/interop-june.png?hl=th)
วันนี้คะแนนคือ 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>
ดูข้อมูลเพิ่มเติมใน Popover API อยู่ที่เกณฑ์พื้นฐาน หลายหน้า ต่างเห็นประโยชน์ของ Popover แล้ว Tokopedia สามารถลดจำนวนโค้ด React ได้อย่างมาก โดยการใช้ประโยชน์จากฟีเจอร์นี้ โดยใช้ Polyfill สำหรับเบราว์เซอร์ที่ไม่รองรับ
พร็อพเพอร์ตี้ที่กำหนดเองขั้นสูงด้วย @property
กฎ CSS @property
จะช่วยให้คุณสร้างพร็อพเพอร์ตี้ที่กำหนดเองขั้นสูง
รายละเอียดมากกว่าชื่อและค่าที่มีอยู่ในพร็อพเพอร์ตี้ที่กำหนดเองแบบมาตรฐาน
กำหนดไวยากรณ์ที่อนุญาตเพื่อกำหนดประเภทข้อมูลที่พร็อพเพอร์ตี้นี้เก็บ
เช่น สี ตัวเลข หรือความยาว จากนั้นตั้งค่าว่าจะให้พร็อพเพอร์ตี้
และค่าเริ่มต้น
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
ปัจจุบันกฎ @property
ช่วยปรับปรุงคะแนนทดลองสำหรับ Firefox
ซึ่งช่วยเพิ่มคะแนนแบบคงที่เมื่อจัดส่ง Firefox 128 ภายในเดือนนี้ และยังเข้าร่วม
เกณฑ์พื้นฐานพร้อมใช้งานใหม่
ดูข้อมูลเพิ่มเติมใน @property: การให้พลังพิเศษแก่ตัวแปร CSS
พร็อพเพอร์ตี้ font-size-adjust
พร็อพเพอร์ตี้ CSS font-size-adjust
ช่วยให้คุณแก้ไขขนาดของอักษรตัวพิมพ์เล็กได้
ตัวอักษรที่สัมพันธ์กับขนาดตัวอักษรพิมพ์ใหญ่ วิธีนี้มีประโยชน์ในสถานการณ์ต่างๆ
ตำแหน่งที่อาจเกิดการสำรองแบบอักษร เพราะจะช่วยให้มั่นใจได้ว่าแบบอักษรสำรองยังคงอยู่
อ่านได้ชัดเจน โดยเฉพาะแบบอักษรขนาดเล็ก
ปัจจุบันมีพร็อพเพอร์ตี้ font-size-adjust
รวมอยู่ในคะแนนทดสอบ
ของ Chrome แต่จะช่วยเพิ่มคะแนนที่เสถียรได้เมื่อมีการเปิดตัวด้วย
Chrome 127 ในเดือนนี้ และยังผสานรวมกับฟีเจอร์ "พื้นฐานใหม่" ด้วย
การตัดข้อความ: ยอดคงเหลือ
การใช้ text-wrap: balance
จะสั่งให้เบราว์เซอร์หาสมดุลที่ดีที่สุด
การตัดบรรทัดสำหรับข้อความ ซึ่งมีประโยชน์อย่างยิ่งสำหรับส่วนหัว
เช่น การตัดส่วนหัวเป็นคำเดียวในบรรทัดที่ 2
Safari เพิ่งรองรับปัญหานี้ ขณะนี้เบราว์เซอร์อื่นๆ กำลังแก้ไขปัญหาอยู่ ไม่ผ่านการทดสอบ เพื่อให้แน่ใจว่าฟีเจอร์นี้ทำงานได้ดีในทุกเบราว์เซอร์
นอกจากคุณลักษณะหลักๆ เหล่านี้จะทำงานร่วมกันได้แล้ว เราได้ทำการปรับปรุง การทดสอบแต่ละครั้งที่ผ่านแสดงถึง เกี่ยวกับความสามารถในการทำงานร่วมกันได้อีกด้วย เราตื่นเต้นที่จะได้เห็นว่า ก็จะได้คะแนน 100% ภายในสิ้นปีนี้