เมื่อปลายปีที่ผ่านมา การทำงานร่วมกันปี 2023 ได้สิ้นสุดลงแล้ว ความพยายามนี้จากผู้ให้บริการเบราว์เซอร์และฝ่ายอื่นๆ มีเป้าหมายที่จะสร้างเว็บที่ทำงานร่วมกันได้มากขึ้น โดยลดความแตกต่างระหว่างเบราว์เซอร์ต่างๆ ที่จะมาหาคุณ โพสต์นี้แบ่งปันผลคะแนนสุดท้าย รวมถึงฟีเจอร์ที่ทีมงาน Chrome ชื่นชอบด้วย
ผลคะแนนสุดท้าย
ดีใจที่ได้เห็นสีเขียวเยอะๆ เลยเปรียบเทียบคะแนนกับคะแนนเมื่อช่วงต้นปี 2023 และเราก็พัฒนาไปไกลมาก โดยทุกๆ เบราว์เซอร์พบว่าคะแนนเพิ่มขึ้นอย่างมาก
เราตื่นเต้นกับเรื่องอะไรกันบ้าง
ดูรายการด้านทั้งหมดที่ควรมุ่งเน้นสำหรับปี 2023 ได้ในแดชบอร์ด Interop 2023 ส่วนโฟกัสบางส่วน เช่น :has(), การค้นหาคอนเทนเนอร์ และแอตทริบิวต์ inert จะครอบคลุมฟีเจอร์ทั้งหมด ส่วนแอปอื่นๆ เช่น งานใน Flexbox ได้พยายามจัดการกับความล้มเหลวเล็กๆ น้อยๆ ในการทดสอบในฟีเจอร์ที่ทำงานข้ามเบราว์เซอร์ที่มีอยู่
:has()
"สุดท้ายคือตัวเลือกระดับบนสุดสำหรับ CSS ซึ่งมีการส่งคำขอนี้ไปเกือบวันแรก ในที่สุดแล้วการมีนโยบายนี้ในเบราว์เซอร์ทั้งหมดก็เป็นเรื่องที่ยอดเยี่ยม ซึ่งหมายความว่านักพัฒนาแอปจะต้องใช้ JavaScript น้อยลงเพื่อจำลองตัวเลือกนี้"—Thomas Steiner วิศวกรนักพัฒนาซอฟต์แวร์สัมพันธ์ของ Chrome
ความตื่นเต้นเป็นอย่างมากเกี่ยวกับฟังก์ชัน Pseudo-class ใน
:has() เนื่องจากทำให้แพลตฟอร์มได้รับคําขอสำคัญจากนักพัฒนาแอป ซึ่งให้ตัวเลือกระดับบนสุด โดยคุณสามารถเลือกองค์ประกอบตามสิ่งที่อยู่ภายในได้ แต่จะนำไปใช้ประโยชน์ได้อีกมากมาย ตามที่อธิบายไว้ใน CSS ที่รวมไว้ คุณจะเลือกได้มากกว่าองค์ประกอบระดับบนสุดมากมาย หรือจะเลือกตะแคงข้างก็ได้
:has(): ชาร์จUna Kravets วิศวกรนักพัฒนาซอฟต์แวร์สัมพันธ์ในทีม Chrome อธิบายว่า
"ตัวเลือก :has() เป็นหนึ่งในฟีเจอร์ CSS ที่พร้อมใช้งานใหม่ที่ยืดหยุ่นและมีประสิทธิภาพมากที่สุด ซึ่งจะช่วยให้คุณจัดรูปแบบองค์ประกอบหลักใดก็ได้โดยอิงตามการปรากฏ สถานะ หรือแม้แต่จำนวนองค์ประกอบย่อย แต่ยิ่งไปกว่านั้น คุณสามารถรวมเข้ากับชุดค่าผสมอื่นๆ เพื่อจัดรูปแบบพี่น้อง และควบคุมสไตล์ของ UI ได้ในระดับใหม่ โปรแกรมนี้มีความยืดหยุ่นมาก ผมได้เห็นการสาธิตเจ๋งๆ มากมายที่ลดความจำเป็นในการใช้สคริปต์เพิ่มเติมเมื่อใช้ประโยชน์จาก :has()"
ดังที่ Philip Jägenstedt วิศวกรซอฟต์แวร์ของ Chrome ได้ย้ำเตือนฉันว่า :has() เป็นฟีเจอร์ยอดนิยมที่นักพัฒนาแอปประสบปัญหาเนื่องจากขาดการสนับสนุนเมื่อมีการสอบถามในแบบสำรวจสถานะของ CSS ในปี 2023
เราจึงไม่ใช่คนเดียวที่ตื่นเต้นที่จะให้ฟีเจอร์นี้พร้อมใช้งาน
คุณสามารถฟัง Una รวมถึง Adam Argyle พูดคุยเรื่อง has() ในพอดแคสต์ CSS แล้วดูข้อมูลเพิ่มเติมเกี่ยวกับ :has() จากโพสต์เหล่านี้จากทั่วชุมชนเว็บ
- ดูข้อมูลเกี่ยวกับตัวเลือก
:has()ของ CSS จากตัวอย่าง - กำลังล็อกการเลื่อนด้วย
:has() - กรณีการใช้งานสำหรับ CSS
:has()
การค้นหาคอนเทนเนอร์
ปี 2023 กลายเป็นปีที่ยอดเยี่ยมสำหรับสิ่งต่างๆ ที่เคยเป็นไปไม่ได้ นอกเหนือจาก :has() แพลตฟอร์มเว็บก็ได้รองรับการค้นหาคอนเทนเนอร์ข้ามเบราว์เซอร์ในที่สุด คุณร้องขอการค้นหาคอนเทนเนอร์ (หรือองค์ประกอบ) มาตั้งแต่ปี 2011 ซึ่งเป็นเพียง 1 ปีหลังจากที่มีการเปิดตัวแนวคิดของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ตอนนี้โปรแกรมพร้อมให้บริการและใช้ได้ในเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมดแล้ว
Una และ Adam พูดคุยเรื่องการค้นหาคอนเทนเนอร์ในพอดแคสต์ CSS และ Una แนะนำคำถามเหล่านี้ในตอนหนึ่งของ "การออกแบบในเบราว์เซอร์" ชุมชนยังได้แชร์เคล็ดลับและ ไอเดียต่างๆ มากมาย
ตารางย่อย
Subgrid เป็นเครื่องมือที่ฉันชอบในการทำงานร่วมกันปี 2023 ซึ่งช่วยให้คุณกำหนดตารางกริดในองค์ประกอบระดับบนสุดได้ จากนั้นใช้ขนาดแทร็กที่กําหนดไว้ในตารางกริดหลักในตารางกริดที่ฝังอยู่ภายในตารางกริดหลัก ด้วยการทำงานของวิศวกรแพลตฟอร์มเว็บของ Microsoft Edge subgrid จึงมีให้บริการในเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมดในช่วงปี 2023 เพื่อเพิ่มคะแนนให้กับ Chrome และมอบฟีเจอร์ที่น่าตื่นเต้นนี้ให้กับทุกคน
Adriana Jara วิศวกรนักพัฒนาซอฟต์แวร์สัมพันธ์ของ Chrome เล่าให้ฟังว่าตารางกริดและตารางย่อย ทำให้การสร้าง UI ที่ยอดเยี่ยมง่ายขึ้นได้อย่างไร
"เราห่วยสุดๆ ในเรื่องภาพ เลย์เอาต์ การรักษารูปลักษณ์ให้สม่ำเสมอ และการปรับตัวให้เข้ากับหน้าจอ แต่เมื่อใช้ตารางกริดและตารางย่อย คุณก็จะสร้างการออกแบบที่ใช้ได้กับหน้าจอหลายขนาดและปรับให้เข้ากับเนื้อหาโดยอัตโนมัติ ผมชอบเครื่องมือนี้มาก เพราะเป็นโซลูชันที่เหมาะกับความต้องการพื้นฐานในการสร้างเว็บไซต์ที่ช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีโดยที่ไม่ต้องเชี่ยวชาญ"
เราได้เขียนกรณีการใช้งานสำหรับ Subgrid ไว้ในบทความสำหรับ 12 Days of Web แล้ว และในส่วนของฟีเจอร์อื่นๆ ในโพสต์นี้ คุณก็สามารถฟังทุกตอนเกี่ยวกับพอดแคสต์ของ CSS ได้เลย นอกจากนี้ยังมีแหล่งข้อมูลอีกมากมายจากเว็บต่างๆ
- ดูตารางกริดย่อยของ CSS
- วิดีโอ: เลย์เอาต์ที่ง่ายและสอดคล้องกันมากขึ้นด้วยตารางกริดย่อย
- การแสดงเนื้อหาด้วยตารางกริด CSS และตารางกริดย่อย
พื้นที่สีและฟังก์ชัน
จึงไม่แปลกใจเลยที่ Adam Argyle นักพัฒนาซอฟต์แวร์ CSS ของ Chrome บอกผมว่าพื้นที่สีและฟังก์ชัน คือฟีเจอร์โปรดของเขา
"บอกลาการคำนวณค่าช่อง HSL แบบแปลกๆ แล้วใส่บรรทัดเดียวสีแบบทันท่วงที พื้นที่สีและฟังก์ชันใหม่ไม่เพียงแก้ปัญหาเกี่ยวกับเวิร์กโฟลว์ของสีเท่านั้น แต่ยังทำให้สามารถเข้าถึงสีและการไล่ระดับสีที่มีชีวิตชีวาและขั้นสูงยิ่งขึ้นอีกด้วย สิ่งที่ไม่ควรชอบเกี่ยวกับการปลดล็อกความสามารถบางอย่างและทำให้ชีวิตของคุณง่ายขึ้นไปพร้อมๆ กัน แค่โรยเครื่องปรุงรสที่เข้ากันแล้ว จานนี้ก็สีสันสดใสน่ารับประทาน"
Adam ได้สร้างเนื้อหาที่ยอดเยี่ยมเพื่อช่วยให้คุณเข้าใจ ฟีเจอร์ใหม่ๆ เหล่านี้ เช่น คู่มือสี CSS ความละเอียดสูงและ gradient.style และพูดคุยเกี่ยวกับฟังก์ชันสีในพอดแคสต์ CSS
การที่คุณลักษณะเหล่านี้มีอยู่ในเครื่องมือเบราว์เซอร์หลักๆ ทั้งหมดนั้นเป็นเรื่องน่าตื่นเต้น ดูข้อมูลเพิ่มเติมได้ในบทความดีๆ เหล่านี้
อนาคตของการทำงานร่วมกันในปี 2024
เมื่อฟีเจอร์ทำงานร่วมกันแล้ว ฟีเจอร์เหล่านั้นจะเป็นส่วนหนึ่งของเกณฑ์พื้นฐานซึ่งพร้อมให้บริการใหม่ เรารู้สึกตื่นเต้นที่ได้เห็นฟีเจอร์ใหม่จำนวนมากที่เข้ามาในกลุ่มนี้ในช่วงปี 2023 โดยเป็นส่วนเล็กๆ อันเป็นผลจากการทำงานของทุกคนที่มีส่วนร่วมในการทำงานร่วมกันในปี 2023 อีกไม่นานจะถึงเวลาประกาศส่วนที่เราเลือกมุ่งเน้นสำหรับปี 2024 และเราก็หวังว่าแพลตฟอร์มเว็บจะดียิ่งขึ้นไปอีกในปีนี้