ข้อมูลอัปเดตกลางปีของ Compat 2021 ซึ่งเป็นความพยายามในการกำจัดปัญหาความเข้ากันได้ของเบราว์เซอร์ใน 5 ด้านหลักๆ ที่เน้น ได้แก่ CSS Flexbox, CSS Grid, ตำแหน่ง ได้แก่ แบบติดหนึบ, สัดส่วนภาพ และการเปลี่ยนรูปแบบ CSS
ถึงเวลาการอัปเดตกลางปีใน Compat 2021 แล้ว ซึ่งเป็นความพยายามขจัดปัญหาความเข้ากันได้ของเบราว์เซอร์ใน 5 ด้านหลักๆ ดูรายละเอียดเพิ่มเติมเกี่ยวกับผลงาน #compat2021 และวิธีที่เราตัดสินใจเลือกด้านต่างๆ ที่จะมุ่งเน้นได้จากประกาศเดือนมีนาคม
การปรับปรุง Chromium ที่กล่าวถึงในโพสต์นี้จะเข้าถึง Chrome, Edge และเบราว์เซอร์แบบ Chromium ทั้งหมด
วิธีที่เราวัดความคืบหน้า
คุณสามารถตรวจสอบแดชบอร์ดความเข้ากันได้ปี 2021 เพื่อดูการทดสอบเว็บแพลตฟอร์มเพื่อดูจำนวนการทดสอบที่ผ่านและกราฟมาแรงสำหรับเบราว์เซอร์ต่างๆ
ตัวเลข "ผ่านการทดสอบ" ง่ายๆ ไม่ได้บอกข้อมูลทั้งหมดเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์ อย่างไรก็ตาม ข้อมูลนี้เป็นหนึ่งในสัญญาณที่เราใช้เพื่อดูความคืบหน้าของการดำเนินการ ความแตกต่างระหว่างเบราว์เซอร์ต่างๆ ในผลการทดสอบที่น้อยลงหมายถึงความสามารถในการทำงานร่วมกันของฟีเจอร์เว็บในเบราว์เซอร์ต่างๆ ที่มากขึ้น
Flexbox ของ CSS
เครื่องมือเบราว์เซอร์ทั้ง 3 อย่าง เห็นการปรับปรุงบน Flexbox
Safari 14.1 ได้จัดส่ง
พร็อพเพอร์ตี้ gap สำหรับ Flexbox
แล้ว พร็อพเพอร์ตี้ gap เป็นวิธีที่สะดวกในการตั้งค่าระยะห่างระหว่างรายการต่างๆ พร็อพเพอร์ตี้นี้มักใช้ในเลย์เอาต์ตารางกริดและการรองรับเลย์เอาต์ Flexbox ก็เป็นหนึ่งในฟีเจอร์ที่มีการร้องขอมากที่สุดในรายงานความเข้ากันได้ของเบราว์เซอร์ MN การอัปเดตนี้ทําให้พร็อพเพอร์ตี้ gap ในเลย์เอาต์แบบยืดหยุ่นพร้อมใช้งานในเบราว์เซอร์หลักๆ ทั้งหมด และวิธีแก้ปัญหาเรื่องความเข้ากันได้ที่สำคัญที่สุดได้รับการแก้ไขแล้ว Safari 14.1 ยังมีการแก้ไขรูปภาพใน Flexbox อยู่มากมาย ทำให้ไม่จำเป็นต้องใช้วิธีแก้ปัญหาเบื้องต้น
Firefox แก้ไขการแสดงภาพตารางเป็นรายการแบบยืดหยุ่น ซึ่งทำให้ Firefox ทดสอบผ่านการทดสอบเกือบผ่าน 100% (ปัจจุบันอยู่ที่ 98.5%)
Chromium แก้ไขตารางเป็นรายการ Flex ด้วยเช่นกัน
ใน Chromium 88 ยังมีการเขียนรูปภาพใหม่เป็นสินค้าแบบยืดหยุ่น
เพื่อแก้ไขข้อบกพร่องที่เกิดขึ้นเป็นเวลานาน สุดท้ายนี้ Chromium ได้เพิ่มการรองรับคีย์เวิร์ดการตรวจสอบความสอดคล้องใหม่: start, end, self-start, self-end, left และ right คีย์เวิร์ดเหล่านี้พร้อมให้คุณลองใช้ใน Chrome Canary และ Edge Canary
ตารางกริด CSS
การใช้งานตารางกริด CSS เพิ่มขึ้นอย่างต่อเนื่อง โดยปัจจุบันคิดเป็น 9% ของการดูหน้าเว็บ เครื่องมือเบราว์เซอร์หลักทั้ง 3 อย่างใช้ CSS Grid และผ่านการทดสอบแพลตฟอร์มเว็บที่เกี่ยวข้องไปแล้วมากกว่า 89% การลดช่องว่างด้านความเข้ากันได้เป็นสิ่งสำคัญ ที่จะช่วยให้ฟีเจอร์นี้เติบโตอย่างมั่นคง
ในปี 2021 Safari ได้ปรับปรุงการทดสอบผ่าน 89% เป็น 93% และ Chromium กำลังสร้างสถาปัตยกรรมใหม่เพื่อแก้ไขปัญหาตารางกริด CSS เพิ่มเติมที่เรียกว่า GridNG นี่เป็นความพยายามของทีม Microsoft และนำไปสู่การเพิ่มขึ้นเมื่อเร็วๆ นี้จาก 94% เป็น 97% ในการทดสอบตารางกริดที่กำหนดเป้าหมาย ติดตามข้อมูลอัปเดตเกี่ยวกับ GridNG ได้ในบล็อก Ed เร็วๆ นี้
CSS position: sticky
ใน Chromium position: sticky สำหรับส่วนหัวของตารางได้รับการแก้ไขแล้วด้วยการเปิดตัว TablesNG ซึ่งเป็นความพยายามหลายปีในการออกแบบโครงสร้างการแสดงผลตารางใหม่
การเปลี่ยนแปลงนี้รวมถึงการแก้ไขสุดท้าย 2-3 ข้อ ส่งผลให้เวอร์ชันสำหรับนักพัฒนาแอป Chrome และ Edge 93 ผ่านการทดสอบที่กำหนดเป้าหมายครบ 100%
นับจาก position: sticky แล้ว
TablesNG แก้ไขข้อบกพร่อง Chromium ไปแล้ว 72 รายการ!
พร็อพเพอร์ตี้ aspect-ratio ของ CSS
พร็อพเพอร์ตี้ aspect-ratio ซึ่งทำให้การตั้งค่าอัตราส่วนความกว้างต่อความสูงเป็นเรื่องง่ายมีความสำคัญต่อการออกแบบเว็บที่ตอบสนองตามอุปกรณ์ และยังเป็นโซลูชันที่ช่วยป้องกันการเปลี่ยนแปลงเลย์เอาต์สะสมด้วย
ตอนนี้ระบบรองรับพร็อพเพอร์ตี้ aspect-ratio ใน Chrome, Edge และ Firefox เวอร์ชันเสถียร รวมถึงใน Safari 15 เบต้าแล้ว เนื่องจากมีการปรับปรุงการรองรับข้ามเบราว์เซอร์
การใช้งานจึงเพิ่มขึ้นตาม
แม้ว่าจะไม่มีเบราว์เซอร์ใดผ่านการทดสอบ 100% แต่ช่องว่างด้านความเข้ากันได้สำหรับ aspect-ratio เป็นส่วนที่เล็กที่สุดในทั้ง 5 ด้านที่มุ่งเน้นสำหรับ Compat 2021 ซึ่งมีการทดสอบที่ผ่านมากกว่า 90% สำหรับเบราว์เซอร์หลักๆ ทั้งหมด นับจากนี้ไป เราจะคอยตรวจสอบความคืบหน้าในการใช้ชุดทดสอบนี้เพื่อสร้างฟีเจอร์ที่ยอดเยี่ยม
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานและประโยชน์ของพร็อพเพอร์ตี้ aspect-ratio ใน web.dev
การแปลง CSS
ผลลัพธ์ของการทดสอบการกำหนดเป้าหมายสำหรับการเปลี่ยนรูปแบบ CSS ได้รับการปรับปรุงอย่างช้าๆ และสม่ำเสมอ เนื่องจากมีการแก้ไขข้อบกพร่องและการปรับปรุงตัวการทดสอบเอง
ทีม Chromium กำลังพยายามปรับปรุงความสามารถในการทำงานร่วมกันของ transform-style:
preserve-3d และ transform :perspective() ด้วยเช่นกัน เราหวังว่าจะมีความคืบหน้าเพิ่มเติมที่จะแชร์ในการอัปเดตครั้งต่อไป
การปรับปรุงคะแนนโดยรวม
นับตั้งแต่การประกาศในเดือนมีนาคม เครื่องมือเบราว์เซอร์ทั้ง 3 ตัวได้คะแนน Compat 2021 เพิ่มขึ้นดังนี้
- Chrome และ Edge Dev เพิ่มจาก 86 เป็น 92
- Firefox เปลี่ยนจาก 83 เป็น 86
- Safari เปลี่ยนจาก 64 เป็น 82
สิ่งที่น่าสังเกตคือ Safari ได้ผลักดันช่องว่างด้านความเข้ากันได้ให้ลง 18 จุดด้วยการดำเนินงานมากมายจากผู้ร่วมให้ข้อมูล WebKit โดยเฉพาะอย่างยิ่งทีมที่ Igalia มีส่วนร่วมไปในพร็อพเพอร์ตี้ aspect-ratio และการปรับปรุงหลายอย่างกับ Flexbox และ Grid เช่น gap สำหรับ Flexbox และการแก้ไขข้อบกพร่องต่างๆ
ติดตามความคืบหน้าของ Compat 2021
ติดตามความคืบหน้าของ Compat 2021 ได้ที่แดชบอร์ด ติดตาม รายชื่ออีเมลของเรา หรือติดต่อเราได้ที่ @chromiumdev หากพบปัญหา โปรดรายงานข้อบกพร่องเกี่ยวกับเบราว์เซอร์ที่ได้รับผลกระทบ