เฉลิมฉลองให้เว็บที่ทำงานร่วมกันได้มากขึ้นด้วยการทำงานร่วมกันปี 2023

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

วันที่ ภาพหน้าจอคะแนนเบราว์เซอร์ทดลอง การทำงานร่วมกันโดยรวม: 95 การตรวจสอบ: 85 Chrome/Edge: 99. Firefox: 98 Safari: 97.
คะแนนสุดท้ายสำหรับเบราว์เซอร์เวอร์ชันทดลองในวันที่ 31 มกราคม 2024 โปรดดู wpt.fyi/interop-2023

ดีมากเลยที่เห็นสีเขียวเต็มๆ เปรียบเทียบกับคะแนนช่วงต้นปี 2023 และเราพัฒนามาไกลมากด้วย ในเบราว์เซอร์ พบว่า มีคะแนนเพิ่มขึ้นอย่างมาก

เรารู้สึกตื่นเต้นเกี่ยวกับอะไร

ดูรายการด้านที่มุ่งเน้นทั้งหมดในปี 2023 ได้ในแดชบอร์ดการทำงานร่วมกันในปี 2023 ด้านที่ต้องมุ่งเน้น เช่น :has() การค้นหาคอนเทนเนอร์ และแอตทริบิวต์ inert ครอบคลุมฟีเจอร์ทั้งหมด อื่นๆ เช่น การทำงานใน Flexbox, การรับมือกับความล้มเหลวเล็กๆ น้อยๆ ในการทดสอบ ข้ามเบราว์เซอร์ที่มีอยู่

:has()

การรองรับเบราว์เซอร์

  • 105
  • 105
  • 121
  • 15.4

แหล่งที่มา

"นี่คือตัวเลือกระดับบนสุดสำหรับ CSS สิ่งนี้ได้รับคำขอมาเกือบตั้งแต่วันแรก และสุดท้ายแล้วการมีอยู่ในทุกเบราว์เซอร์นั้นเป็นเรื่องที่ดีมาก และหมายความว่านักพัฒนาซอฟต์แวร์ต้องเรียกใช้ JavaScript น้อยลงเพื่อจำลองตัวเลือกนี้"—Thomas Steiner วิศวกรความสัมพันธ์นักพัฒนาซอฟต์แวร์ของ Chrome

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

การสาธิต CSS :has(): แท่นชาร์จ

Una Kravets วิศวกรนักพัฒนาซอฟต์แวร์สัมพันธ์ในทีม Chrome อธิบาย:

"ตัวเลือก :has() เป็นหนึ่งในฟีเจอร์ CSS ใหม่ที่มีประสิทธิภาพและมีความยืดหยุ่นมากที่สุด จึงช่วยให้คุณจัดรูปแบบระดับบนสุดตามการปรากฏ สถานะ หรือแม้กระทั่งจำนวนองค์ประกอบย่อยได้ แต่ยิ่งไปกว่านั้น คือคุณสามารถนำมารวมรวมกับตัวผสมอื่นๆ เพื่อสร้างสไตล์ของข้างเดียวกัน และควบคุม UI ของคุณได้อย่างล้ำหน้ายิ่งขึ้น ฟีเจอร์นี้มีความยืดหยุ่นมาก ผมได้เห็นการสาธิตเจ๋งๆ มากมายที่ช่วยลดความจำเป็นที่จะต้องใช้สคริปต์เพิ่มเติมเมื่อใช้ประโยชน์จาก :has()"

ดังที่ Philip Jägenstedt วิศวกรซอฟต์แวร์ของ Chrome แจ้งเตือนฉันว่า :has() ฟีเจอร์ยอดนิยมที่นักพัฒนาแอปพบปัญหาเนื่องจากขาดการรองรับ ในแบบสำรวจสถานะของ CSS ในปี 2023 เราจึงไม่ใช่เพียงฝ่ายเดียวที่ตื่นเต้นที่จะได้เห็นฟีเจอร์นี้

คุณฟัง Una ไปพร้อมกับ Adam Argyle พูดคุยเกี่ยวกับ has() ในพอดแคสต์ CSS ได้ แล้วดูข้อมูลเพิ่มเติมเกี่ยวกับ :has() จากโพสต์เหล่านี้จากชุมชนเว็บ

การค้นหาคอนเทนเนอร์

การรองรับเบราว์เซอร์

  • 105
  • 105
  • 110
  • 16

แหล่งที่มา

2023 กลายเป็นปีที่ยอดเยี่ยมสำหรับสิ่งต่างๆ ที่เคยมองว่าเป็นไปไม่ได้ ใน นอกเหนือจาก :has() ในที่สุด แพลตฟอร์มเว็บก็ได้รับการสนับสนุนข้ามเบราว์เซอร์สำหรับ การค้นหาคอนเทนเนอร์ คุณขอให้ค้นหาคอนเทนเนอร์ (หรือองค์ประกอบ) ตั้งแต่ ปี 2011 ซึ่งเป็นช่วงเพียง 1 ปีหลังจากที่เปิดตัวแนวคิดการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ตอนนี้ มันอยู่ที่นี่ และมีอยู่ในเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมด

Una และ Adam พูดคุยกันเกี่ยวกับการค้นหาคอนเทนเนอร์ในพอดแคสต์ CSS และ Una แนะนำพวกเขาในรายการ การออกแบบในเบราว์เซอร์ นอกจากนี้ ชุมชนยังได้แชร์เคล็ดลับมากมาย ไอเดียใหม่ๆ

ตารางย่อย

การรองรับเบราว์เซอร์

  • 117
  • 117
  • 71
  • 16

แหล่งที่มา

Subgrid เป็นการรวมโปรดของฉันในการทำงานร่วมกันปี 2023 ซึ่งช่วยให้คุณกำหนดตารางกริดใน เอลิเมนต์ระดับบนสุด จากนั้นใช้ขนาดแทร็กที่กำหนดไว้ในระดับบนสุด ตารางกริดที่ฝังอยู่ภายในตารางกริดหลักดังกล่าว การทำงานในเว็บของ Microsoft Edge วิศวกรแพลตฟอร์ม ตารางกริดย่อยพร้อมใช้งานสำหรับเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมดในระหว่างปี 2023 เพื่อเพิ่มคะแนนสำหรับ Chrome และนำ ที่น่าสนใจนี้แก่ทุกคน

Adriana Jara วิศวกรนักพัฒนาความสัมพันธ์ของ Chrome เล่าให้ฟังว่าตารางกริดและตารางกริดย่อยอย่างไร ทำให้การสร้าง UI ที่ยอดเยี่ยมง่ายขึ้น

"ฉันถนัดเรื่องการใช้ภาพ เลย์เอาต์ การจัดการรูปลักษณ์ที่สม่ำเสมอ และการปรับตามหน้าจอ แต่เมื่อใช้ตารางกริดและตารางกริดย่อย ก็ยังทำให้ได้การออกแบบที่ใช้งานได้กับหน้าจอหลายขนาดและปรับตามเนื้อหาโดยอัตโนมัติได้ ผมชื่นชอบเครื่องมือนี้เพราะเครื่องมือนี้ช่วยตอบสนองความต้องการขั้นพื้นฐานในการสร้างเว็บไซต์ที่มอบประสบการณ์การใช้งานที่ดีให้แก่ผู้ใช้โดยไม่ต้องมีความเชี่ยวชาญมากนัก"

ฉันเขียนกรณีการใช้งานสำหรับตารางกริดย่อยในบทความสำหรับ 12 Days of Web และเช่นเดียวกับฟีเจอร์อื่นๆ ในโพสต์นี้ คุณสามารถฟังพอดแคสต์ CSS ทั้งหมดเกี่ยวกับเรื่องนี้ นอกจากนี้ยังมีแหล่งข้อมูลอีกมากมายจากทั่วเว็บ

พื้นที่สีและฟังก์ชัน

การรองรับเบราว์เซอร์

  • 111
  • 111
  • 113
  • 15

แหล่งที่มา

ไม่น่าแปลกใจเลยที่ Adam Argyle ซึ่งเป็นนักพัฒนา CSS ของ Chrome บอกผมว่าพื้นที่สีและฟังก์ชันต่างๆ คือฟีเจอร์ที่เขาชื่นชอบ

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

Adam ได้สร้างเนื้อหาที่น่าสนใจเพื่อช่วยให้คุณเข้าใจเกี่ยวกับ เช่น คู่มือสี CSS ความละเอียดสูง gradient.style และพูดถึงฟังก์ชันสีในพอดแคสต์ CSS

การมีฟีเจอร์เหล่านี้ในเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมดเป็นเรื่องน่าตื่นเต้น ดูข้อมูลเพิ่มเติมได้ในบทความดีๆ เหล่านี้

ตั้งตารอการทำงานร่วมกันปี 2024

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