การอัปเดตส่งท้ายปีด้วย Compat 2021 ซึ่งเป็นความพยายามในการขจัดปัญหาความเข้ากันได้ของเบราว์เซอร์ใน 5 ด้านหลักๆ ได้แก่ CSS Flexbox, CSS Grid, ตำแหน่ง ได้แก่ แบบติดหนึบ, สัดส่วนภาพ และการเปลี่ยนรูปแบบ CSS
ช่วงสิ้นปีใกล้เข้ามาแล้ว และตอนนี้ก็ถึงเวลาสำหรับการอัปเดตครั้งสุดท้ายใน Compat 2021 ซึ่งเป็นความพยายามขจัดปัญหาความเข้ากันได้ของเบราว์เซอร์ใน 5 ด้านหลักๆ ที่มุ่งเน้น
มากกว่า 90%
คะแนนในเบราว์เซอร์ทั้งหมด
ตั้งแต่การอัปเดตครั้งล่าสุด เราได้ปรับปรุงในเบราว์เซอร์ทั้งหมดอย่างต่อเนื่อง ทุกเบราว์เซอร์เริ่มมีคะแนนทดสอบต่ำกว่ามากในช่วงต้นปี แต่ตอนนี้ทุกเบราว์เซอร์มีคะแนนเกิน 90% แล้ว! ซึ่งหมายความว่าแพลตฟอร์มเว็บมีความสามารถในการทำงานร่วมกัน ที่ดีขึ้นอย่างมากในส่วนของจุดที่ต้องมุ่งเน้น 5 ด้าน
การร่วมให้ข้อมูลกับเครื่องมือเบราว์เซอร์ไม่ได้เกิดขึ้นโดยผู้ให้บริการเบราว์เซอร์เท่านั้น แต่ยังสร้างขึ้นจากชุมชนเว็บด้วย สำหรับโปรเจ็กต์นี้ เราขอขอบคุณ Igalia โดยเฉพาะสำหรับการมีส่วนร่วมและกำลังดำเนินการปรับปรุงคะแนนอย่างต่อเนื่อง Igalia เป็นส่วนสำคัญในการปรับปรุงทั้ง 5 ด้าน ของ Compat 2021
ใน wpt.fyi แดชบอร์ดผลการทดสอบจะมีมุมมองผลการทดสอบที่กรองแล้ว ซึ่งแสดงการทดสอบทั้งหมดที่รวมอยู่ใน Compat 2021 และยังมีมุมมองสำหรับ Chrome, Firefox และ Safari ซึ่งเปรียบเทียบผลการทดสอบกับอัปเดตล่าสุดเมื่อเดือนกรกฎาคม
เรามาดูการปรับปรุงในด้านต่างๆ กัน
Flexbox ของ CSS
flex-basis: content พร้อมใช้งานแล้วในทุกเบราว์เซอร์ โดยจะพร้อมติดตั้งใช้งานใน Chromium และ WebKit (Gecko รองรับค่า content อยู่แล้ว)
ใน Chromium ปัญหาเกี่ยวกับการปรับขนาดของ Flexbox จะได้รับการแก้ไข ซึ่งตรงกับข้อกำหนดและพฤติกรรมของ Gecko และใน Gecko หลายปัญหาที่ส่งผลกระทบต่อ Compat 2021 ได้รับการแก้ไขแล้ว ซึ่งรวมถึงปัญหาที่มีเปอร์เซ็นต์ความสูงในรายการแบบยืดหยุ่น สุดท้ายนี้ ใน WebKit มีการเพิ่มการรองรับค่าคุณสมบัติการปรับแนว (left, right, self-start, self-end, start, end) รวมถึงได้ปรับปรุงสิ่งต่างๆ มากมายสำหรับการจัดตำแหน่งแบบสัมบูรณ์ ตลอดจนปรับปรุงผลการทดสอบ Flexbox ใน Compat 2021 ด้วย
ตารางกริด CSS
การใช้งาน CSS Grid ในเว็บยังคงเติบโตอย่างต่อเนื่อง ดังที่เห็นได้จากทั้งเมตริกการใช้งานเว็บปี 2021 และเมตริกการใช้งานของ Chrome
การเปิดตัว GridNG ใน Chrome และ Edge 93 สามารถแก้ปัญหาหลายอย่างเกี่ยวกับ Grid มาโดยตลอด ซึ่งเป็นการปิดปัญหาที่น่าประทับใจ 38 รายการ ในเครื่องมือติดตามข้อบกพร่องของ Chromium พร้อมกับการปรับปรุงเล็กๆ น้อยๆ ตามมามากมาย ทำให้คะแนน Compat 2021 ของ Grid ใน Chromium เพิ่มขึ้น 3% เป็น 97% งานนี้นำโดยทีม Edge ของ Microsoft
ข้อบกพร่องในการวางตำแหน่งแบบสัมบูรณ์ที่ส่งผลกระทบต่อ Grid ได้รับการแก้ไขแล้วใน Gecko และการแก้ไขหลายอย่างได้เกิดขึ้นใน WebKit แล้ว ซึ่งทำให้ Firefox ดีขึ้น 1% และการทดสอบ Safari ดีขึ้น 3%
CSS position: sticky
ในการอัปเดตครั้งล่าสุด เราพบว่า position: sticky เป็นพื้นที่แรกที่เบราว์เซอร์ (ในกรณีนี้คือ Chrome และ Edge) ผ่านการทดสอบ 100% จากการแก้ไขหลายอย่างในการใช้งาน WebKit ทำให้ Safari ได้คะแนน 100% สำหรับการทดสอบเหล่านี้ด้วย การปรับปรุงส่วนใหญ่
มีอยู่ใน Safari 15
พร็อพเพอร์ตี้ aspect-ratio ของ CSS
การรองรับการกำหนดสัดส่วนภาพ (อัตราส่วนความกว้างต่อความสูง) ขององค์ประกอบในหลายเบราว์เซอร์มีการปรับปรุงอย่างต่อเนื่อง โดยคะแนน Compat 2021 สำหรับ Chrome/Edge, Firefox และ Safari ถึง 99%, 97% และ 95% ตามลำดับ การปรับปรุงส่วนใหญ่ไม่ได้เกิดจากพร็อพเพอร์ตี้ aspect-ratio เอง แต่เกิดจากวิธีที่แอตทริบิวต์ width และ height แมปกับค่า aspect-ratio เริ่มต้นสำหรับองค์ประกอบต่างๆ ซึ่งมีผลกับองค์ประกอบหลายรายการใน WebKit และ <canvas> สำหรับ Chromium
การแปลง CSS
รองรับ transform: perspective(none) ใน Chromium, Gecko และ WebKit แล้วในตอนนี้ วิธีนี้จะช่วยให้ภาพเคลื่อนไหว
ระหว่างมุมมองกับไม่มีมุมมองทำได้ง่ายขึ้น
ตอนนี้ใน Chromium transform-style: preserve-3d (ซึ่งอนุญาตให้องค์ประกอบย่อยเข้าร่วมในฉาก 3 มิติเดียวกัน) และพร็อพเพอร์ตี้ perspective (ซึ่งนำการแปลงมุมมองมาใช้กับองค์ประกอบย่อย) ได้สอดคล้องกับข้อกำหนดแล้ว โดยกำหนดให้ใช้กับองค์ประกอบย่อยเท่านั้น
การเพิ่มขึ้นอย่างมากของคะแนนสำหรับการแปลง CSS สำหรับทุกเบราว์เซอร์มีสาเหตุหลักมาจากการปรับปรุงชุดทดสอบซึ่งมีการแก้ไขหรือนำการทดสอบที่ไม่ถูกต้องออก วิธีนี้ช่วยให้เข้าใจปัญหาความสามารถในการทำงานร่วมกันที่เหลืออยู่ได้ง่ายขึ้นและหลีกเลี่ยงการเกิดปัญหาซ้ำในอนาคต
บทสรุป
เราดีใจมากที่ทุกคนทุ่มเทให้กับงานส่งท้ายปีด้วยการปรับปรุงคะแนนนี้หลายๆ อย่างและโครงสร้างพื้นฐานการทดสอบที่ดีขึ้น aspect-ratio เป็นฟีเจอร์ที่นักพัฒนาเว็บขอมาอย่างยาวนาน และตอนนี้รองรับฟีเจอร์ดังกล่าวในทุกเบราว์เซอร์แล้ว การใช้งาน Flexbox, Grid และ position: sticky กำลังเพิ่มขึ้นทั้งหมด และฟีเจอร์เหล่านี้ก็ได้รับการรองรับมากขึ้นในเบราว์เซอร์ต่างๆ จากการปรับปรุงมากมายที่เกิดขึ้นในปี 2021
ขั้นตอนถัดไปคือ เราตื่นเต้นที่จะได้ทำงานร่วมกับผู้ให้บริการเบราว์เซอร์รายอื่นๆ และชุมชนในวงกว้างต่อไปในการปรับปรุงความพยายามในครั้งนี้ เราได้เริ่มค้นคว้าและพูดถึงประเด็น ที่มุ่งเน้นสำหรับปี 2022 ไปแล้ว โปรดติดตามประกาศที่พร้อมให้บริการในเร็วๆ นี้
หากมีความคิดเห็นหรือข้อสงสัย โปรดติดต่อเราทาง Twitter ที่ @ChromiumDev