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