สํารวจฟีเจอร์บางอย่างที่เริ่มทํางานร่วมกันได้ในปี 2022
สิ้นสุดอีกปีแล้ว และถึงเวลาตรวจสอบการปรับปรุงที่เกิดจากเบราว์เซอร์ ในขณะที่เราทำงานร่วมกันเพื่อปรับปรุงความสามารถในการทำงานร่วมกันของแพลตฟอร์มเว็บ คุณดูวิธีเริ่มต้นต่างๆ ได้ในโพสต์ของเราในเดือนมีนาคมปีนี้เมื่อมีการเปิดตัวโครงการริเริ่มนี้
คะแนนโดยรวมในช่วงสิ้นปีแสดงให้เห็นถึงการปรับปรุงที่ยอดเยี่ยมจากทุกเครื่องมือ
ดูข้อมูลเกี่ยวกับความคืบหน้าที่เกิดขึ้นในปี 2022 ได้ในโพสต์นี้ นอกจากฟีเจอร์บรรทัดแรกเหล่านี้แล้ว ยังมีการปรับปรุงเล็กๆ น้อยๆ จำนวนมากโดยเครื่องมือทั้งหมด เราได้แก้ไขปัญหาเล็กๆ น้อยๆ ที่อาจทำให้เกิดความไม่สอดคล้องกันระหว่างเครื่องยนต์และทำให้คุณสะดุดระหว่างการพัฒนาแล้ว การได้เห็นฟีเจอร์ขนาดใหญ่ที่พร้อมใช้งานในเบราว์เซอร์ต่างๆ นั้นเป็นเรื่องน่าตื่นเต้น แต่บางครั้งก็อาจเป็นสิ่งเล็กๆ ที่ทำให้เกิดปัญหามากที่สุด และก็เป็นเรื่องดีที่จะได้รู้ว่ามีการปรับปรุงอะไรไปบ้าง
เรียงซ้อนเลเยอร์
เลเยอร์ Cascade ให้คุณจัดการ Cascade โดยจัดกลุ่มตัวเลือกเป็นเลเยอร์ ฟีเจอร์นี้จะมีประโยชน์ก็ต่อเมื่อมีการรองรับทุกที่ ตอนนี้เครื่องมือหลักๆ ทั้งหมดสนับสนุนการเรียงซ้อนชั้น และคะแนนจากทุกเบราว์เซอร์จะแสดงให้เห็นถึงความสามารถในการทำงานร่วมกันของคุณลักษณะนี้ เหลือการทดสอบอีกเพียงไม่กี่ครั้งเท่านั้นสำหรับ Firefox
องค์ประกอบกล่องโต้ตอบ
องค์ประกอบกล่องโต้ตอบช่วยให้สร้างกล่องโต้ตอบแบบโมดัลและกล่องโต้ตอบที่ไม่ใช่แบบโมดัลได้ นี่เป็นรูปแบบที่พบได้ทั่วไปบนเว็บ การใช้องค์ประกอบนี้จะมอบความสามารถในการใช้งานและการช่วยเหลือพิเศษที่คุณจะต้องพัฒนาและทดสอบเมื่อสร้างคอมโพเนนต์ของตัวเอง ในบทความการสร้างคอมโพเนนต์กล่องโต้ตอบ Adam Argyle อธิบายวิธีสร้างองค์ประกอบเพิ่มเติมจากองค์ประกอบนี้เพื่อสร้างกล่องโต้ตอบประเภทต่างๆ
ตารางย่อย
เมื่อต้นปี 2022 เบราว์เซอร์เดียวที่รองรับค่า subgrid
สำหรับ grid-template-rows
และ grid-template-columns
คือ Firefox Safari ได้เริ่มรองรับการใช้งานในปี 2022 แล้ว และฟีเจอร์นี้อยู่ระหว่างการพัฒนาใน Chrome อาจจะพลาดกำหนดเวลาสิ้นสุดปีของความสามารถในการทำงานร่วมกัน แต่กําลังในไม่ช้านี้
หน่วยวิวพอร์ต
หน่วยวิวพอร์ตเป็นฟีเจอร์เดียวที่ได้รับการทดสอบผ่าน 100% จากทุกเครื่องมือ ซึ่งรวมถึงแนวคิดของวิวพอร์ตขนาดเล็กและขนาดใหญ่ที่คำนึงถึงขนาดวิวพอร์ตที่เปลี่ยนแปลงไปในอุปกรณ์เคลื่อนที่เมื่อองค์ประกอบ UI ของอุปกรณ์ปรากฏขึ้นและหายไป ดูข้อมูลเพิ่มเติมเกี่ยวกับหน่วยเหล่านี้ได้ในโพสต์หน่วยวิวพอร์ตขนาดใหญ่ ขนาดเล็ก และแบบไดนามิก
การสนับสนุนเบราว์เซอร์
- 108
- 108
- 101
- 15.4
สี 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