การทำงานร่วมกันปี 2022: ข้อมูลอัปเดตปลายปี

สํารวจฟีเจอร์บางอย่างที่เริ่มทํางานร่วมกันได้ในปี 2022

Rachel Andrew

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

คะแนนโดยรวมในช่วงสิ้นปีแสดงให้เห็นถึงการปรับปรุงที่ยอดเยี่ยมจากทุกเครื่องมือ

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

เรียงซ้อนเลเยอร์

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

องค์ประกอบกล่องโต้ตอบ

องค์ประกอบกล่องโต้ตอบช่วยให้สร้างกล่องโต้ตอบแบบโมดัลและกล่องโต้ตอบที่ไม่ใช่แบบโมดัลได้ นี่เป็นรูปแบบที่พบได้ทั่วไปบนเว็บ การใช้องค์ประกอบนี้จะมอบความสามารถในการใช้งานและการช่วยเหลือพิเศษที่คุณจะต้องพัฒนาและทดสอบเมื่อสร้างคอมโพเนนต์ของตัวเอง ในบทความการสร้างคอมโพเนนต์กล่องโต้ตอบ Adam Argyle อธิบายวิธีสร้างองค์ประกอบเพิ่มเติมจากองค์ประกอบนี้เพื่อสร้างกล่องโต้ตอบประเภทต่างๆ

ตารางย่อย

เมื่อต้นปี 2022 เบราว์เซอร์เดียวที่รองรับค่า subgrid สำหรับ grid-template-rows และ grid-template-columns คือ Firefox Safari ได้เริ่มรองรับการใช้งานในปี 2022 แล้ว และฟีเจอร์นี้อยู่ระหว่างการพัฒนาใน Chrome อาจจะพลาดกำหนดเวลาสิ้นสุดปีของความสามารถในการทำงานร่วมกัน แต่กําลังในไม่ช้านี้

หน่วยวิวพอร์ต

หน่วยวิวพอร์ตเป็นฟีเจอร์เดียวที่ได้รับการทดสอบผ่าน 100% จากทุกเครื่องมือ ซึ่งรวมถึงแนวคิดของวิวพอร์ตขนาดเล็กและขนาดใหญ่ที่คำนึงถึงขนาดวิวพอร์ตที่เปลี่ยนแปลงไปในอุปกรณ์เคลื่อนที่เมื่อองค์ประกอบ UI ของอุปกรณ์ปรากฏขึ้นและหายไป ดูข้อมูลเพิ่มเติมเกี่ยวกับหน่วยเหล่านี้ได้ในโพสต์หน่วยวิวพอร์ตขนาดใหญ่ ขนาดเล็ก และแบบไดนามิก

สี 4

ชุดงานสีนี้ช่วยให้ CSS ไม่เพียงระบุสีในขอบเขตที่มีความละเอียดสูง (เช่น Display p3, rec2020) เท่านั้น แต่ยังมีฟังก์ชันสีใหม่ซึ่งแต่ละรายการมีประโยชน์ที่ไม่ซ้ำกันสำหรับการทำงานกับสี พื้นที่สีใหม่ได้แก่ lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: ลองใช้ฟีเจอร์เหล่านี้ใน Canary ได้แล้ววันนี้โดยเปิดใช้แฟล็กนี้ การเปลี่ยนแปลงเหล่านี้จะมีผลกับการไล่ระดับสีด้วย ซึ่งช่วยให้ผู้เขียนระบุพื้นที่สีที่ใช้การไล่ระดับสีได้ การตั้งค่าสถานะเดียวกันนี้ยังเปิดใช้การรองรับ color-mix() ด้วย ซึ่งช่วยให้คุณผสมสี 2 สีเข้าด้วยกันในพื้นที่ทำงานที่ต้องการได้ ฟังก์ชัน color-mix() จะอยู่หลังธงใน Safari และ Firefox เช่นกัน มีสีมากขึ้น สีดีขึ้น การไล่ระดับสีที่ดีขึ้น และเครื่องมือที่ดีขึ้น

การทำงานร่วมกันปี 2023

เราหวังว่าคุณจะพึงพอใจที่ได้ทราบว่าเราไม่มีแผนที่จะหยุดเล่นเมื่อถึงสิ้นปี 2022 และ Interop 2023 ก็ผ่านขั้นตอนการวางแผนเบื้องต้นไปเรียบร้อยแล้ว ในช่วงปีใหม่ เราจะประกาศฟีเจอร์ต่างๆ ที่ได้เลือกมา และรอคอยอีก 1 ปีข้างหน้าที่จะทําให้การพัฒนาเว็บเป็นเรื่องง่ายขึ้น

รูปภาพหลักโดย Ian Schneider