คู่แข่งปี 2021: ขจัด 5 ประเด็นสำคัญด้านความเข้ากันได้ที่สุดในเว็บ

Google ทำงานร่วมกับผู้ให้บริการเบราว์เซอร์และพาร์ทเนอร์ในอุตสาหกรรมอื่นๆ เพื่อแก้ไขปัญหา 5 อันดับแรกของเรื่องความเข้ากันได้ของเบราว์เซอร์สำหรับนักพัฒนาเว็บ ได้แก่ การเปลี่ยนรูปแบบ CSS Flex, CSS Grid, position: sticky, aspect-ratio และ CSS

ฟิลิป เจเกนสเต็ด
โรเบิร์ต ไนแมน
โรเบิร์ต ไนแมน
X GitHub หน้าแรก

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

การเลือกสิ่งที่จะมุ่งเน้น

แม้ว่าแพลตฟอร์มเว็บทั้งหมดจะมีปัญหาเรื่องความเข้ากันได้ของเบราว์เซอร์ แต่จุดสำคัญของโปรเจ็กต์นี้อยู่ที่ส่วนที่เป็นปัญหาที่สุดเพียงไม่กี่ส่วนซึ่งช่วยปรับปรุงให้ดีขึ้นได้มาก ด้วยเหตุนี้จึงทำให้เป็นปัญหาอันดับต้นๆ สำหรับนักพัฒนาซอฟต์แวร์

โปรเจ็กต์ความเข้ากันได้นี้ใช้เกณฑ์หลายเกณฑ์ที่มีอิทธิพลต่อการจัดลำดับความสำคัญในด้านใด ซึ่งมีดังนี้

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 ซึ่งนำไปสู่ขนาดรูปภาพที่ไม่ถูกต้อง

รูปภาพกระดานหมากรุกที่ยืดออก
รูปภาพมีขนาดไม่ถูกต้องเนื่องจากมีข้อบกพร่อง
กระดานหมากรุก
รูปภาพมีขนาดที่ถูกต้อง
รูปภาพโดย Alireza Mahmoudi

บล็อกโพสต์ flexbox Cats ของ Igalia เจาะลึกปัญหาเหล่านี้พร้อมตัวอย่างเพิ่มเติม

เหตุใดจึงจัดลำดับความสำคัญ

ตารางกริด CSS

ตารางกริด CSS เป็นองค์ประกอบหลักสำหรับเลย์เอาต์ของเว็บสมัยใหม่ ซึ่งมาแทนที่เทคนิคและวิธีแก้ปัญหาเฉพาะหน้าเก่าๆ เมื่อมีการรับไปใช้งานมากขึ้นเรื่อยๆ โซลูชันนั้นก็จะต้องมั่นคง ความแตกต่างระหว่างเบราว์เซอร์ต่างๆ ก็ไม่ใช่เหตุผลที่ควรหลีกเลี่ยง จุดหนึ่งที่ขาดไปคือความสามารถในการทำให้เลย์เอาต์แบบตารางกริดซึ่งรองรับใน Gecko แต่ไม่รองรับ Chromium หรือ WebKit เอฟเฟ็กต์ในลักษณะนี้ จะเป็นไปได้หากสนับสนุน

การสาธิตเกมหมากรุกแบบเคลื่อนไหวโดย Chen Hui Jing

เหตุใดจึงจัดลำดับความสำคัญ

ตำแหน่ง CSS: ติดหนึบ

การจัดตำแหน่งแบบติดหนึบช่วยให้เนื้อหายึดติดกับขอบของวิวพอร์ตและมักจะใช้กับส่วนหัวที่แสดงที่ด้านบนของวิวพอร์ตเสมอ แม้ว่าระบบจะรองรับในทุกเบราว์เซอร์ แต่ก็มีกรณีการใช้งานทั่วไปที่ใช้งานไม่ได้ตามที่ต้องการ ตัวอย่างเช่น ส่วนหัวของตารางแบบติดหนึบไม่รองรับใน Chromium และแม้ว่าตอนนี้จะรองรับการแจ้งว่าไม่เหมาะสมแล้ว แต่ผลลัพธ์ก็จะไม่สอดคล้องกันในเบราว์เซอร์ต่างๆ ดังนี้

Chromium ที่มี "TablesNG"
Gecko
WebKit

ดูการสาธิตส่วนหัวของตารางแบบติดหนึบโดย Rob Flack

เหตุใดจึงจัดลำดับความสำคัญ

พร็อพเพอร์ตี้สัดส่วนภาพ 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 มิติ ตัวอย่างเช่น เอฟเฟกต์การพลิกการ์ด อาจไม่สอดคล้องกันอย่างมากในเบราว์เซอร์ต่างๆ ดังนี้

เอฟเฟกต์การพลิกการ์ดใน Chromium (ซ้าย), Gecko (ตรงกลาง) และ WebKit (ขวา) การสาธิตโดย David Baron จากความคิดเห็นเกี่ยวกับข้อบกพร่อง

เหตุใดจึงจัดลำดับความสำคัญ

  • แบบสํารวจ: เป็นที่รู้จักและใช้ในสถานะของ CSS เป็นอย่างดี
  • การทดสอบ: ผ่าน 55% ในทุกเบราว์เซอร์
  • การใช้งาน: 80%

วิธีที่คุณมีส่วนร่วมและทำตามได้

ติดตามและแชร์ข้อมูลอัปเดตที่เราโพสต์ไว้ใน @ChromiumDev หรือรายชื่ออีเมลสาธารณะ Compat 2021 โปรดตรวจสอบว่ามีข้อบกพร่องอยู่หรือยื่นข้อบกพร่องสำหรับปัญหาที่คุณพบ และหากมีสิ่งใดขาดหายไป โปรดติดต่อผ่านช่องทางข้างต้น

จะมีข้อมูลอัปเดตความคืบหน้าใน web.dev เป็นประจำ รวมถึงติดตามความคืบหน้าสำหรับแต่ละด้านที่ต้องการได้ในแดชบอร์ด Compat 2021

แดชบอร์ด 2021 ของ Compat
แดชบอร์ด The Compat 2021 (ภาพหน้าจอจากวันที่ 16 พฤศจิกายน 2021)

เราหวังว่าความร่วมมือระหว่างผู้ให้บริการเบราว์เซอร์เพื่อพัฒนาความน่าเชื่อถือและความสามารถในการทำงานร่วมกันจะช่วยให้คุณสร้างสิ่งที่ดีได้บนเว็บ!