ในปี 2023 ผู้ให้บริการเบราว์เซอร์รายใหญ่ทุกรายและผู้มีส่วนเกี่ยวข้องอื่นๆ จะทำงานร่วมกันเพื่อแก้ไขปัญหาด้านความเข้ากันได้ของเบราว์เซอร์อันดับต้นๆ
ในปี 2023 ผู้ให้บริการเบราว์เซอร์รายใหญ่ทุกรายและผู้มีส่วนเกี่ยวข้องอื่นๆ จะทำงานร่วมกันอีกครั้งเพื่อแก้ไขปัญหาด้านความเข้ากันได้ของเบราว์เซอร์อันดับต้นๆ ความพยายามเริ่มต้นในวงกว้างนี้ด้วยการทำงานร่วมกันปี 2022 คุณสามารถดูผลลัพธ์ที่เราประสบผลสำเร็จร่วมกันได้ในหลังช่วงสิ้นปี ทุกคนที่เกี่ยวข้องเชื่อว่าการดำเนินการนี้จะช่วยปรับปรุงประสบการณ์การใช้งานสำหรับนักพัฒนาเว็บในทุกที่ ปีนี้นี่เป็นครั้งแรกที่เราได้ประกาศกระบวนการยื่นข้อเสนอต่อสาธารณะและได้รับคำแนะนำดีๆ มากมายจากเฟรมเวิร์ก บริษัทขนาดใหญ่ ผู้ให้บริการเบราว์เซอร์ และนักพัฒนาซอฟต์แวร์ทั่วโลก
ส่วนสำคัญของการทำงานร่วมกันในปี 2023
ในครั้งนี้ เรามีจุดมุ่งเน้นรวมแล้วไม่น้อยกว่า 26 ด้าน ดังที่อธิบายไว้ในเอกสารโครงการของเรา โดยจะเรียงตามลำดับตัวอักษร ดังนี้
- รูปภาพเส้นขอบใน CSS
- พื้นที่สีและฟังก์ชันใน CSS
- การค้นหาคอนเทนเนอร์ใน CSS
- การควบคุมใน CSS
- คลาส Pseudo ของ CSS
- พร็อพเพอร์ตี้ที่กำหนดเองใน CSS
- Flexbox
- การตรวจหาฟีเจอร์แบบอักษรและชุดสี
- ฟอร์ม
- ตารางกริด
- :has()
- เฉื่อย
- การมาสก์ใน CSS
- ฟังก์ชันทางคณิตศาสตร์ใน CSS
- คิวรี่สื่อ
- โมดูลใน Web Worker
- เส้นทางการเคลื่อนไหวในภาพเคลื่อนไหว CSS
- แคนวาสนอกจอ
- เหตุการณ์ตัวชี้และเมาส์
- URL
- Web Compat 2023: ส่วนสำคัญที่ครอบคลุมสำหรับข้อบกพร่องเล็กๆ น้อยๆ ซึ่งทำให้เกิดปัญหาเกี่ยวกับความเข้ากันได้ของเว็บไซต์ที่ทราบแล้ว
- ตัวแปลงรหัสเว็บ (วิดีโอ)
- คอมโพเนนต์ของเว็บ
คุณสามารถดูรายละเอียดที่สมบูรณ์ของหัวข้อทั้งหมดที่มุ่งเน้นได้ที่การทดสอบแพลตฟอร์มเว็บ ซึ่งอิงตามเอกสารเว็บ MDN อย่างไรก็ตาม นี่เป็นเพียงตัวอย่างบางส่วนที่เราคิดว่าคุณอาจสนใจ
การค้นหาคอนเทนเนอร์
การค้นหาคอนเทนเนอร์เป็นคำขอยอดนิยมจากนักพัฒนาซอฟต์แวร์มาหลายปี และในปี 2022 Chrome และ Safari ได้จัดส่งการค้นหานี้ออกไป Firefox คาดว่าจะจัดส่งการค้นหาคอนเทนเนอร์ใน Firefox 110 และการทดสอบสำหรับด้านที่มุ่งเน้นนี้ช่วยให้มั่นใจได้ว่าการค้นหาคอนเทนเนอร์จะทำงานในเบราว์เซอร์ต่างๆ ได้อย่างเสถียรและตามข้อกำหนด
:ได้(...)
นักพัฒนาซอฟต์แวร์ขอตัวเลือกระดับบนสุดใน CSS มานานแล้ว คลาส Pseudo ของ :has() สร้าง Use Case มากมายที่เป็นไปได้สำหรับตัวเลือกระดับบนสุด รวมถึงการเลือกองค์ประกอบข้างเคียงก่อนหน้าที่เกี่ยวข้องกับองค์ประกอบข้อมูลอ้างอิง ตัวอย่างเช่น วิธีนี้ทำให้สามารถจัดรูปแบบรูปที่มีคำบรรยายภาพต่างจากรูปที่ไม่มีคำบรรยายได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับกรณีการใช้งาน has() ใน :has() ตัวเลือกครอบครัว
พร็อพเพอร์ตี้ที่กำหนดเอง
คุณสมบัติที่กำหนดเองของ CSS หรือที่เรียกว่าตัวแปร CSS ช่วยให้กำหนดค่าได้ครั้งเดียวในสไตล์ชีตและนำมาใช้ซ้ำในหลายๆ ที่ จึงช่วยลดการทำซ้ำ เช่น คุณสามารถกำหนดสีหรือขนาดแบบอักษรร่วมได้เพียงครั้งเดียวในสไตล์ชีตแล้วใช้ในคอมโพเนนต์ การสนับสนุนพื้นฐานสำหรับพร็อพเพอร์ตี้ที่กำหนดเองมีอยู่ในเบราว์เซอร์มานานแล้ว การทำงานร่วมกันในปี 2023 มีการให้ความสำคัญกับ @property ที่เป็นกฎเดียวกัน @property แสดงถึงการลงทะเบียนพร็อพเพอร์ตี้ที่กำหนดเองในสไตล์ชีต ซึ่งช่วยให้ตรวจสอบประเภทพร็อพเพอร์ตี้ ตั้งค่าเริ่มต้น และระบุว่าพร็อพเพอร์ตี้ควรรับค่าหรือไม่ ดูข้อมูลเพิ่มเติมใน @property: การมอบพลังพิเศษให้กับตัวแปร CSS
การมาสก์ CSS
การมาสก์ CSS ช่วยให้นำเอฟเฟกต์รูปภาพไปใช้ เช่นที่คุณอาจเห็นในแอปพลิเคชันกราฟิกโดยใช้ CSS การรองรับคุณสมบัติการมาสก์ที่หลากหลายไม่แน่นอน ทำให้การมาสก์ใช้งานยากขึ้นกว่าที่ควรจะเป็น พื้นที่ที่เรามุ่งเน้นนี้จะช่วยให้นักพัฒนาซอฟต์แวร์ใช้เอฟเฟกต์สุดสร้างสรรค์ในเบราว์เซอร์ต่างๆ ได้อย่างมั่นใจ ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้เอฟเฟกต์กับรูปภาพได้ในบทความเกี่ยวกับการมาสก์รูปภาพ
OffscreenCanvas
องค์ประกอบ <canvas> และ Canvas API เป็นวิธีที่เขียนสคริปต์ได้ในการวาดกราฟิกไปยังหน้าจอ แต่ก็อาจเกิดปัญหาด้านประสิทธิภาพ เนื่องจากงานเสร็จสมบูรณ์ในชุดข้อความเดียวกันกับการโต้ตอบของผู้ใช้ OffscreenCanvas ช่วยให้นักพัฒนาซอฟต์แวร์มี Canvas ที่แยกออกจาก DOM และ Canvas API นักพัฒนาซอฟต์แวร์ยังสามารถเรียกใช้งานการแสดงผลใน Web Worker แยกจากเทรดหลักได้ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับประโยชน์ด้านประสิทธิภาพของ OffscreenCanvas
เหตุการณ์ตัวชี้และเมาส์
เหตุการณ์ของตัวชี้จะเริ่มทำงานเมื่อโต้ตอบกับหน้าเว็บโดยใช้เมาส์ ปากกา สไตลัส หรือหน้าจอสัมผัส เหตุการณ์ของเมาส์จะเริ่มทำงานเมื่อใช้เมาส์ แต่เหตุผลในอดีตสำหรับการแตะก็เช่นกัน พื้นที่เน้นนี้ครอบคลุมพฤติกรรมของการโต้ตอบของตัวชี้และเมาส์กับหน้าเว็บ ซึ่งรวมถึงการโต้ตอบกับหน้าเว็บทดสอบ Hit และการเลื่อนพื้นที่ พื้นที่โฟกัสในปี 2023 ไม่รวมระบบสัมผัสและสไตลัสเนื่องจากไม่มีการทดสอบแพลตฟอร์มเว็บในพื้นที่นี้
WebCodecs
WebCodecs API มีวิธีให้นักพัฒนาซอฟต์แวร์เข้าถึงเฟรมของวิดีโอแต่ละเฟรม รวมถึงเสียงท่อนต่างๆ และให้การเข้าถึงตัวแปลงรหัสที่มีอยู่แล้วในเบราว์เซอร์และอินเทอร์เฟซต่างๆ เพื่อโต้ตอบกับตัวแปลงรหัส บทความการประมวลผลวิดีโอด้วย WebCodecs จะแสดงวิธีใช้ API เพื่อถอดรหัสและแสดงผลแต่ละเฟรมใน Canvas
คอมโพเนนต์ของเว็บ
คอมโพเนนต์เว็บเป็นคำกว้างๆ ที่หมายถึงเทคโนโลยีจำนวนมากที่ใช้สร้างคอมโพเนนต์ที่นำมาใช้ใหม่ได้ เช่น องค์ประกอบที่กำหนดเองและ Shadow DOM แต่การทำงานร่วมกันในปี 2023 จะมุ่งเน้นไปที่การปรับปรุงความสามารถในการทำงานร่วมกันของเทคโนโลยีพื้นฐานเหล่านี้
หน้าแดชบอร์ด
ติดตามความคืบหน้าตลอดทั้งปีผ่านแดชบอร์ดการทำงานร่วมกันปี 2023 ซึ่งคุณจะดูคะแนนปัจจุบันและสถานะของการจัดการด้านที่มุ่งเน้นเหล่านี้ในเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมดได้
คะแนนด้านที่มุ่งเน้นจะคำนวณจากอัตราการสอบผ่าน หากคุณมีความคิดเห็นหรือต้องการมีส่วนร่วมในการปรับปรุง WPT โปรดรายงานปัญหาเพื่อขออัปเดตชุดการทดสอบที่ใช้สำหรับการให้คะแนน
