เป็นครั้งแรกที่ผู้ให้บริการเบราว์เซอร์รายใหญ่ทุกรายและผู้มีส่วนเกี่ยวข้องอื่นๆ ได้ร่วมมือกันเพื่อแก้ไขปัญหาด้านความเข้ากันได้กับเบราว์เซอร์อันดับต้นๆ ที่นักพัฒนาเว็บตรวจพบเป็นครั้งแรก การทำงานร่วมกันในปี 2022 จะช่วยปรับปรุงประสบการณ์การพัฒนาเว็บใน 15 ด้านหลัก ในบทความนี้ คุณจะได้ทราบว่าเรามาถึงจุดนี้ได้อย่างไร โปรเจ็กต์มุ่งเน้นอะไร จะวัดความสำเร็จได้อย่างไร และวิธีติดตามความคืบหน้า
ทุกอย่างเริ่มต้นในปี 2019
เมื่อปี 2019 Mozilla, Google และบริษัทอื่นๆ ได้เริ่มความพยายามครั้งใหญ่ในการทำความเข้าใจประเด็นปัญหาของนักพัฒนาซอฟต์แวร์ในรูปแบบแบบสำรวจการประเมินความต้องการของนักพัฒนาซอฟต์แวร์ MDN และรายงานความเข้ากันได้ของเบราว์เซอร์ในเชิงลึก รายงานเหล่านี้ให้ข้อมูลโดยละเอียดที่นำไปใช้ได้จริงเพื่อแก้ปัญหาความท้าทายอันดับต้นๆ สำหรับนักพัฒนาซอฟต์แวร์ที่ใช้แพลตฟอร์มเว็บ และนำไปสู่ความพยายามอย่างต่อเนื่องในปี 2021
นอกจากนี้ Compat 2021 ยังนำไปสู่การสร้างรากฐานที่มั่นคงสำหรับฟีเจอร์ที่มีประสิทธิภาพ เช่น ตารางกริดของ CSS (มีการใช้งาน 12% และเติบโตอย่างมั่นคง) และ CSS Flexbox (การใช้งาน 77%) รวมถึงพร็อพเพอร์ตี้ gap ใน Flexbox ซึ่งช่วยแก้ปัญหาเบื้องต้นสำหรับนักพัฒนาซอฟต์แวร์เมื่อนำวิธีการเลย์เอาต์แบบใหม่มาใช้
เราดีใจที่ได้คะแนนกว่า 90% จากการติดตั้งใช้งานทั้งหมดในช่วงปลายปี 2021
การทำงานร่วมกันปี 2022 คืออะไร
การทำงานร่วมกันในปี 2022 เป็นเกณฑ์เปรียบเทียบตามที่ตัวแทนของการติดตั้งใช้งานเบราว์เซอร์หลักๆ 3 รายการ ได้รับการพัฒนาผ่านกระบวนการเสนอชื่อต่อสาธารณะ และตรวจสอบโดยใช้ข้อมูลจากผู้สนับสนุน Apple, Bocoup, Google, Igalia, Microsoft และ Mozilla
การเปรียบเทียบจะมุ่งเน้นไปยัง 15 ด้าน ซึ่งนักพัฒนาซอฟต์แวร์ระบุว่ามีปัญหาอย่างมากในกรณีที่ข้อมูลหายไปหรือมีปัญหาเกี่ยวกับความเข้ากันได้ในเบราว์เซอร์ต่างๆ ผู้ให้บริการเบราว์เซอร์ทั้งหมดตกลงที่จะมุ่งเน้นที่ด้านเหล่านี้ และทุกคนที่เกี่ยวข้องก็รู้สึกตื่นเต้นที่จะได้เริ่มต้นสร้างประสบการณ์การพัฒนา เพื่อเว็บที่สามารถวัดได้ดียิ่งขึ้น
สิ่งที่ต้องมุ่งเน้น 15 ประการ
ฟีเจอร์ต่อไปนี้จะเป็นหัวใจสำคัญของการทำงานร่วมกันปี 2022 บริษัทมีสาขาใหม่ 10 แห่ง และอีก 5 แห่งจาก Compat 2021 จุดที่เราโฟกัสใหม่มีดังนี้
เรียงซ้อนเลเยอร์
เลเยอร์ Cascade ช่วยให้นักพัฒนาเว็บควบคุมการเรียงซ้อนกันได้มากขึ้น ใช้สำหรับจัดกลุ่มตัวเลือกเป็นเลเยอร์ โดยแต่ละรายการจะมีความเฉพาะเจาะจงของตัวเอง คุณจึงไม่ต้องสร้างตัวเลือกคำสั่งซื้ออย่างรอบคอบหรือสร้างตัวเลือกที่เจาะจงมากเพื่อเขียนทับกฎ CSS พื้นฐาน
พื้นที่สีและฟังก์ชันสี CSS
หากต้องการใช้ฟังก์ชันสีในระบบออกแบบ คุณต้องใช้ค่า HSL, Sass, PostCSS หรือ calc() ฟังก์ชันสีที่มีใน CSS ทำให้สีสามารถอัปเดตได้แบบไดนามิก และพื้นที่ทำงานสีใหม่จะลบการจำกัดขอบเขตของ sRGB รวมถึงข้อจำกัดในการรับรู้ของ HSL
สี CSS ระดับ 5 มีฟังก์ชัน 2 รายการที่ทําให้ธีมแบบไดนามิกมากขึ้นในแพลตฟอร์มเว็บ ดังนี้
color-mix(): นำ 2 สีมาใช้และแสดงผลของการผสมสีในพื้นที่สีที่ระบุตามจำนวนที่ระบุcolor-contrast(): เลือกจากรายการสีซึ่งเป็นสีที่มีคอนทราสต์สูงสุดกับสีใดสีหนึ่งที่ระบุ
ฟังก์ชันเหล่านี้รองรับพื้นที่สีแบบขยาย (LAB, LCH และ P3) และนอกเหนือจาก HSL และ sRGB แล้ว ฟังก์ชันเหล่านี้จะมีค่าเริ่มต้นเป็นพื้นที่สี LCH แบบเดียวกัน
หน่วยวิวพอร์ตใหม่
ปัญหาในการจัดการการปรับขนาดวิวพอร์ตเห็นได้ชัดเจนทั้งในรายงานความเข้ากันได้กับเบราว์เซอร์ MDN 2020 และแบบสำรวจ State of CSS 2021 ใหม่ ค่า CSS และหน่วยระดับ 4 จะเพิ่มหน่วยใหม่สำหรับวิวพอร์ตขนาดใหญ่ที่สุด เล็กที่สุด และแบบไดนามิก ได้แก่ lv*, sv* และ dv* หน่วยเหล่านี้จะช่วยให้สร้างเลย์เอาต์ที่เติมเต็มวิวพอร์ตที่มองเห็นได้ในอุปกรณ์เคลื่อนที่ได้ง่ายขึ้น โดยนำแถบที่อยู่มาพิจารณาด้วย
นอกจากนี้ ทีมข้ามผู้ให้บริการที่อยู่เบื้องหลังการทำงานร่วมกันปี 2022 จะทำงานร่วมกันในการวิจัยและปรับปรุงสถานะการทำงานร่วมกันของฟีเจอร์การวัดวิวพอร์ตที่มีอยู่ ซึ่งรวมถึงหน่วย vh ที่มีอยู่
การเลื่อน
รายงานแบบสำรวจการเลื่อนปี 2021 ยืนยันว่าฟีเจอร์การเลื่อนและความเข้ากันได้ของการเลื่อนนั้นนำไปใช้ได้ยากและมีหลายด้านที่ต้องปรับปรุง เราจะมุ่งเน้นที่การสแนปการเลื่อน ลักษณะการทำงานของการเลื่อน และลักษณะการทำงานของการเลื่อนมากเกินไป เพื่อช่วยให้การเลื่อนมีความสอดคล้องกันและราบรื่นมากขึ้นในแพลตฟอร์มต่างๆ
นอกจากนี้เรากำลังสำรวจข้อเสนอฟีเจอร์การเลื่อน Snap ใหม่อีกด้วย
ตารางย่อย
ค่า subgrid ของ grid-template-columns และ grid-template-rows หมายความว่ารายการตารางกริดที่ใช้ display: grid สามารถรับคําจํากัดความของแทร็กมาจากส่วนของตารางกริดระดับบนสุดที่นำมาใช้
เช่น คอมโพเนนต์การ์ด 3 รายการต่อไปนี้มีส่วนหัวและส่วนท้ายที่สอดคล้องกับส่วนหัวและส่วนท้ายของการ์ดที่อยู่ติดกัน แม้ว่าการ์ดแต่ละใบจะมีตารางกริดแยกเป็นอิสระก็ตาม รูปแบบนี้ใช้งานได้เนื่องจากการ์ดแต่ละใบเป็นรายการที่ครอบคลุม 3 แถวของตารางกริดระดับบนสุด จากนั้นจะใช้ตารางกริดย่อยเพื่อรับแถวเหล่านั้นลงในการ์ด
รวมอยู่ด้วย
- การควบคุม CSS (พร็อพเพอร์ตี้
contain) - องค์ประกอบ
<dialog> - ตัวควบคุมแบบฟอร์ม
- การพิมพ์และการเข้ารหัส: รวมถึง
font-variant-alternates,font-variant-position, หน่วยicและการเข้ารหัสข้อความ CJK - Web Compat ซึ่งเน้นไปที่ความแตกต่างระหว่างเบราว์เซอร์ที่ทำให้เกิดปัญหาด้านความเข้ากันได้ของเว็บไซต์ที่ส่งผลกระทบต่อผู้ใช้ปลายทาง
ด้านต่างๆ ต่อไปนี้มีความคืบหน้าอย่างมากในโครงการ Compat 2021 แต่ก็ยังมีช่องทางสำหรับการปรับปรุงอยู่ นโยบายดังกล่าวจึงได้รวมอยู่ในการทำงานร่วมกันปี 2022 เพื่อให้แก้ไขปัญหาที่เหลือได้
- สัดส่วนภาพ
- เฟล็กซ์บ็อกซ์
- GRid
- การจัดตำแหน่งติดหนึบ
- การแปลง
ความพยายามในการตรวจสอบ
นอกเหนือจากประเด็นที่มุ่งเน้น 15 ด้านแล้ว การทำงานร่วมกันปี 2022 ยังรวมความพยายามตรวจสอบ 3 รายการอีกด้วย สิ่งเหล่านี้มีปัญหาและจำเป็นต้องปรับปรุง แต่สถานะปัจจุบันของข้อกำหนดหรือการทดสอบยังไม่ดีพอที่จะให้คะแนนความคืบหน้าโดยใช้ผลการทดสอบ
- กำลังแก้ไข,
contenteditableและexecCommand - เหตุการณ์ตัวชี้และเมาส์
- การวัดวิวพอร์ต
ผู้ให้บริการเบราว์เซอร์และผู้มีส่วนเกี่ยวข้องอื่นๆ จะทำงานร่วมกันในการปรับปรุงการทดสอบและข้อมูลจำเพาะสำหรับขอบข่ายต่างๆ เหล่านี้ เพื่อที่จะได้รวมอยู่ในความพยายามนี้ในอนาคต
การวัดความสำเร็จและการติดตามความคืบหน้า
หน้าแดชบอร์ดการทดสอบแพลตฟอร์มเว็บที่มีอยู่จะใช้เพื่อติดตามความคืบหน้าในส่วนที่มุ่งเน้น 15 ด้าน ในแต่ละพื้นที่ มีการระบุชุดการทดสอบ จากนั้นจะมีการให้คะแนนเบราว์เซอร์เพื่อเทียบกับการทดสอบเหล่านี้ โดยจะให้คะแนนสำหรับแต่ละพื้นที่และคะแนนรวมของทั้ง 15 ด้าน
ติดตามความคืบหน้าได้โดยดูจากแดชบอร์ดของ Interop 2022 ตลอดทั้งปี คุณสามารถติดตามดูความคืบหน้าและดูว่าแพลตฟอร์มที่คุณสร้างให้นั้นพัฒนาขึ้นอย่างไรบ้าง
การเปลี่ยนแปลงนี้จะส่งผลต่อนักพัฒนาแอปอย่างไร
เป้าหมายของความพยายามในการทำงานร่วมกันเป็นระยะเวลาหลายปีในรูปแบบของ Compat 2021, การทำงานร่วมกันปี 2022 และอื่นๆ อีกมากมายคือการรับรู้และแก้ปัญหาที่นักพัฒนาแอปพบเจอมาตลอดหลายปี เครื่องมือนี้ไม่ใช่การทำงานบนเบราว์เซอร์เพียงอย่างเดียว แต่เป็นการร่วมมือกันอย่างมีประสิทธิภาพระหว่างผู้ให้บริการเบราว์เซอร์รายใหญ่และเพื่อนๆ ทั้งหมดเพื่อปรับปรุงแพลตฟอร์มเว็บในทุกส่วน
โดยมีเป้าหมายเพื่อให้นักพัฒนาซอฟต์แวร์ใช้แพลตฟอร์มเว็บได้อย่างน่าเชื่อถือและไว้วางใจได้ เพื่อให้มีเวลามากขึ้นในการสร้างประสบการณ์การใช้งานเว็บที่ยอดเยี่ยม แทนที่จะต้องคอยแก้ปัญหาความไม่สอดคล้องของเบราว์เซอร์
บอกให้เราทราบว่าคุณคิดอย่างไร
เรายินดีรับฟังความคิดเห็นเกี่ยวกับการปรับปรุงที่เกิดขึ้นในช่วง Compat 2021 หรือฟีเจอร์ใดก็ตามที่รวมอยู่ในการทำงานร่วมกันปี 2022 ฟีเจอร์ใดต่อไปนี้จะสร้างความแตกต่างให้กับงานของคุณได้มากที่สุด คุณตื่นเต้นกับเรื่องอะไรจริงๆ แจ้งปัญหาเกี่ยวกับที่เก็บ GitHub หรือแจ้งให้เราทราบทาง Twitter
ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานร่วมกันปี 2022 ได้จากแหล่งข้อมูลต่อไปนี้