Google ทำงานร่วมกับผู้ให้บริการเบราว์เซอร์และพาร์ทเนอร์ในอุตสาหกรรมอื่นๆ เพื่อแก้ไขปัญหา 5 อันดับแรกของเรื่องความเข้ากันได้ของเบราว์เซอร์สำหรับนักพัฒนาเว็บ ได้แก่ การเปลี่ยนรูปแบบ CSS Flex, CSS Grid, position: sticky
, aspect-ratio
และ CSS
Google ทำงานร่วมกับผู้ให้บริการเบราว์เซอร์อื่นๆ และพาร์ทเนอร์ในอุตสาหกรรมเพื่อแก้ไข
ปัญหาเกี่ยวกับความเข้ากันได้กับเบราว์เซอร์ 5 อันดับแรกสำหรับนักพัฒนาเว็บ ด้านที่ควรเน้น ได้แก่ CSS Flexbox, ตารางกริด CSS, position: sticky
, aspect-ratio
และการเปลี่ยนรูปแบบ CSS ดูวิธีมีส่วนร่วมและให้ความร่วมมือได้เพื่อเรียนรู้วิธีมีส่วนร่วม
ที่มา
ความเข้ากันได้บนเว็บถือเป็นความท้าทายครั้งใหญ่สำหรับนักพัฒนาซอฟต์แวร์มาโดยตลอด ในช่วง 2-3 ปีที่ผ่านมา Google และพาร์ทเนอร์รายอื่น ซึ่งรวมถึง Mozilla และ Microsoft ได้เริ่มที่จะเรียนรู้เพิ่มเติมเกี่ยวกับปัญหาหลักๆ สำหรับนักพัฒนาซอฟต์แวร์เว็บ เพื่อขับเคลื่อนงานและลำดับความสำคัญของเราเพื่อทำให้สถานการณ์ดีขึ้น โปรเจ็กต์นี้เชื่อมโยงกับงานความพึงพอใจของนักพัฒนาแอป (DevSAT) ของ Google และเริ่มต้นในวงกว้างด้วยการสร้างแบบสำรวจ MDN DNA (การประเมินความต้องการของนักพัฒนาซอฟต์แวร์) ในปี 2019 และ 2020 และความพยายามด้านการวิจัยแบบเจาะลึกที่แสดงในรายงานความเข้ากันได้กับเบราว์เซอร์ MDN ปี 2020 มีการวิจัยเพิ่มเติมในช่องทางต่างๆ เช่น แบบสำรวจ State of CSS และ State of JS
เป้าหมายในปี 2021 คือการขจัดปัญหาความเข้ากันได้ของเบราว์เซอร์ใน 5 ด้านหลักๆ เพื่อให้นักพัฒนาแอปสามารถสร้างรากฐานที่มั่นคงจากปัญหาเหล่านี้ได้อย่างมั่นใจ ซึ่งการดำเนินการดังกล่าวเรียกว่า #Compat 2021
การเลือกสิ่งที่จะมุ่งเน้น
แม้ว่าแพลตฟอร์มเว็บทั้งหมดจะมีปัญหาเรื่องความเข้ากันได้ของเบราว์เซอร์ แต่จุดสำคัญของโปรเจ็กต์นี้อยู่ที่ส่วนที่เป็นปัญหาที่สุดเพียงไม่กี่ส่วนซึ่งช่วยปรับปรุงให้ดีขึ้นได้มาก ด้วยเหตุนี้จึงทำให้เป็นปัญหาอันดับต้นๆ สำหรับนักพัฒนาซอฟต์แวร์
โปรเจ็กต์ความเข้ากันได้นี้ใช้เกณฑ์หลายเกณฑ์ที่มีอิทธิพลต่อการจัดลำดับความสำคัญในด้านใด ซึ่งมีดังนี้
- การใช้ฟีเจอร์ ตัวอย่างเช่น มีการใช้ Flexbox ใน 75% ของการดูหน้าเว็บทั้งหมด และการใช้งานใน HTTPที่เก็บถาวรก็เพิ่มขึ้นอย่างมาก
- จำนวนข้อบกพร่อง (ใน Chromium, Gecko, WebKit) และสำหรับ Chromium จำนวนดาวที่ข้อบกพร่องเหล่านั้นมี
ผลการสำรวจ:
- แบบสำรวจ DNA ของ MDN
- รายงานความเข้ากันได้ของเบราว์เซอร์ MN
- สถานะของ CSS คุณลักษณะที่รู้จักและใช้บ่อยที่สุด
ผลการทดสอบจาก web-platform-tests เช่น flexbox ใน wpt.fyi
ฉันจะใช้ฟีเจอร์ที่มีการค้นหามากที่สุดได้ไหม
5 ประเด็นหลักที่ควรมุ่งเน้นในปี 2021
ในปี 2020 ทาง Chromium ได้เริ่มดำเนินการเพื่อรับมือกับขอบข่ายต่างๆ ที่ระบุไว้ในหัวข้อการปรับปรุงความเข้ากันได้ของเบราว์เซอร์ Chromium ในปี 2020 ในปี 2021 เราจะเริ่มต้นความพยายามอย่างเต็มที่เพื่อให้ก้าวไปให้ไกลกว่านั้น Google และ Microsoft กำลังร่วมมือกันจัดการปัญหาที่พบบ่อยใน Chromium รวมถึง Igalia Igalia ที่คอยสนับสนุน Chromium และ WebKit เป็นประจำ รวมถึงผู้ดูแลพอร์ต WebKit อย่างเป็นทางการของอุปกรณ์ที่ฝังไว้ คอยให้การสนับสนุนและมีส่วนร่วมในการทำงานเกี่ยวกับความเข้ากันได้เหล่านี้เป็นอย่างดี ทั้งยังช่วยจัดการและติดตามปัญหาต่างๆ ที่พบด้วย
พื้นที่ต่างๆ ที่เรามุ่งมั่นจะแก้ไขในปี 2021 มีดังนี้
Flexbox ของ CSS
CSS flexbox
ใช้กันอย่างแพร่หลาย
บนเว็บและยังคงมีปัญหาหลักๆ สำหรับนักพัฒนาซอฟต์แวร์ ตัวอย่างเช่น ทั้ง Chromium และ WebKit ต่างก็มีปัญหาเกี่ยวกับคอนเทนเนอร์ Flex auto-height
ซึ่งนำไปสู่ขนาดรูปภาพที่ไม่ถูกต้อง
บล็อกโพสต์ flexbox Cats ของ Igalia เจาะลึกปัญหาเหล่านี้พร้อมตัวอย่างเพิ่มเติม
เหตุใดจึงจัดลำดับความสำคัญ
- แบบสํารวจ: ปัญหายอดนิยมใน รายงานความเข้ากันได้ของเบราว์เซอร์ MN ซึ่งเป็นที่รู้จักและใช้มากที่สุดใน State of CSS
- การทดสอบ: ผ่าน 85% ในทุกเบราว์เซอร์
- การใช้งาน: 75% ของการดูหน้าเว็บ เพิ่มขึ้นอย่างมากใน HTTP Archive
ตารางกริด CSS
ตารางกริด CSS เป็นองค์ประกอบหลักสำหรับเลย์เอาต์ของเว็บสมัยใหม่ ซึ่งมาแทนที่เทคนิคและวิธีแก้ปัญหาเฉพาะหน้าเก่าๆ เมื่อมีการรับไปใช้งานมากขึ้นเรื่อยๆ โซลูชันนั้นก็จะต้องมั่นคง ความแตกต่างระหว่างเบราว์เซอร์ต่างๆ ก็ไม่ใช่เหตุผลที่ควรหลีกเลี่ยง จุดหนึ่งที่ขาดไปคือความสามารถในการทำให้เลย์เอาต์แบบตารางกริดซึ่งรองรับใน Gecko แต่ไม่รองรับ Chromium หรือ WebKit เอฟเฟ็กต์ในลักษณะนี้ จะเป็นไปได้หากสนับสนุน
เหตุใดจึงจัดลำดับความสำคัญ
- แบบสำรวจ: รองชนะเลิศใน รายงานความเข้ากันได้กับเบราว์เซอร์ MMD เป็นที่รู้จักแต่ไม่ค่อยใช้ใน State of CSS
- การทดสอบ: ผ่าน 75% ในทุกเบราว์เซอร์
- การใช้งาน: 8% และเพิ่มขึ้นเรื่อยๆ อย่างคงที่ มีการเติบโตเล็กน้อยใน HTTP Archive
ตำแหน่ง CSS: ติดหนึบ
การจัดตำแหน่งแบบติดหนึบช่วยให้เนื้อหายึดติดกับขอบของวิวพอร์ตและมักจะใช้กับส่วนหัวที่แสดงที่ด้านบนของวิวพอร์ตเสมอ แม้ว่าระบบจะรองรับในทุกเบราว์เซอร์ แต่ก็มีกรณีการใช้งานทั่วไปที่ใช้งานไม่ได้ตามที่ต้องการ ตัวอย่างเช่น ส่วนหัวของตารางแบบติดหนึบไม่รองรับใน Chromium และแม้ว่าตอนนี้จะรองรับการแจ้งว่าไม่เหมาะสมแล้ว แต่ผลลัพธ์ก็จะไม่สอดคล้องกันในเบราว์เซอร์ต่างๆ ดังนี้
ดูการสาธิตส่วนหัวของตารางแบบติดหนึบโดย Rob Flack
เหตุใดจึงจัดลำดับความสำคัญ
- แบบสํารวจ: เป็นที่รู้จัก/ใช้ใน State of CSS มากและแสดงหลายครั้งในรายงานความเข้ากันได้ของเบราว์เซอร์ MN
- การทดสอบ: ผ่าน 66% ในทุกเบราว์เซอร์
- การใช้งาน: 8%
พร็อพเพอร์ตี้สัดส่วนภาพ CSS
พร็อพเพอร์ตี้ CSS ใหม่
aspect-ratio
ช่วยรักษาอัตราส่วนความกว้างต่อความสูงให้สอดคล้องกันสำหรับองค์ประกอบต่างๆ ได้อย่างง่ายดาย โดยไม่จำเป็นต้องpadding-top
การแฮ็ก
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
เนื่องจากกรณีการใช้งานดังกล่าวพบได้ทั่วไป เราจึงคาดว่าจะมีการใช้อย่างแพร่หลาย และเราต้องการดูแลให้มีความมั่นคงในทุกสถานการณ์ทั่วไปและในเบราว์เซอร์ต่างๆ
เหตุใดจึงจัดลำดับความสำคัญ
- แบบสำรวจ: เป็นที่รู้จักกันดีอยู่แล้วแต่ยังไม่ได้ใช้กันอย่างแพร่หลายใน State of CSS
- การทดสอบ: ผ่าน 27% ในทุกเบราว์เซอร์
- ปริมาณการใช้งาน: 3% และคาดว่าจะเติบโต
การแปลง CSS
การแปลง CSS ได้รับการรองรับในเบราว์เซอร์ทั้งหมดมาหลายปี และใช้กันอย่างแพร่หลายบนเว็บ อย่างไรก็ตาม ยังมีพื้นที่อีกหลายแห่งที่ทำงานได้ไม่เหมือนเดิมในเบราว์เซอร์ต่างๆ โดยเฉพาะกับภาพเคลื่อนไหวและการแปลงแบบ 3 มิติ ตัวอย่างเช่น เอฟเฟกต์การพลิกการ์ด อาจไม่สอดคล้องกันอย่างมากในเบราว์เซอร์ต่างๆ ดังนี้
เหตุใดจึงจัดลำดับความสำคัญ
- แบบสํารวจ: เป็นที่รู้จักและใช้ในสถานะของ CSS เป็นอย่างดี
- การทดสอบ: ผ่าน 55% ในทุกเบราว์เซอร์
- การใช้งาน: 80%
วิธีที่คุณมีส่วนร่วมและทำตามได้
ติดตามและแชร์ข้อมูลอัปเดตที่เราโพสต์ไว้ใน @ChromiumDev หรือรายชื่ออีเมลสาธารณะ Compat 2021 โปรดตรวจสอบว่ามีข้อบกพร่องอยู่หรือยื่นข้อบกพร่องสำหรับปัญหาที่คุณพบ และหากมีสิ่งใดขาดหายไป โปรดติดต่อผ่านช่องทางข้างต้น
จะมีข้อมูลอัปเดตความคืบหน้าใน web.dev เป็นประจำ รวมถึงติดตามความคืบหน้าสำหรับแต่ละด้านที่ต้องการได้ในแดชบอร์ด Compat 2021
เราหวังว่าความร่วมมือระหว่างผู้ให้บริการเบราว์เซอร์เพื่อพัฒนาความน่าเชื่อถือและความสามารถในการทำงานร่วมกันจะช่วยให้คุณสร้างสิ่งที่ดีได้บนเว็บ!