มีอะไรใหม่ในเว็บ

Rachel Andrew

ในงาน Google I/O ผมได้แชร์ข่าวสารเกี่ยวกับการพัฒนาของ Baseline นับตั้งแต่การประกาศที่ I/O เมื่อปีที่แล้ว ผมยังประกาศแดชบอร์ดแพลตฟอร์มเว็บ การผสานรวมกับ RUM Archive และการผสานรวมกับ RUMvision ที่กำลังจะมีขึ้น โพสต์นี้รวบรวมแหล่งข้อมูล ทั้งหมดจากการพูดคุยมาไว้ในที่เดียว

แดชบอร์ดแพลตฟอร์มเว็บเป็นวิธีใหม่ในการดูแพลตฟอร์มเว็บทั้งหมด เส้นทางของแต่ละฟีเจอร์ไปสู่ความสามารถในการทำงานร่วมกัน รวมถึงกลายเป็นส่วนหนึ่งของ Baseline ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในการประกาศแดชบอร์ดแพลตฟอร์มเว็บ

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

เพิ่งเริ่มใช้เกณฑ์พื้นฐาน

ที่ I/O ฉันแชร์ฟีเจอร์ของแพลตฟอร์มเว็บ 12 อย่างที่เพิ่งได้กลายเป็นส่วนหนึ่งของ ฟีเจอร์พื้นฐาน "พร้อมใช้งานใหม่" ฟีเจอร์เหล่านี้พร้อมใช้งานแล้วใน Chrome, Edge, Firefox และ Safari และยังมีตั้งแต่ฟีเจอร์เพิ่มเติมเล็กๆ น้อยๆ ที่ช่วยเพิ่มประสิทธิภาพการพัฒนา ไปจนถึงฟีเจอร์ที่นักพัฒนาแอปต้องการมากที่สุด เช่น คำค้นหาคอนเทนเนอร์และ :has()

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

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

• พร้อมให้ใช้งานในเดือนกุมภาพันธ์ 2023
• พร้อมให้ใช้งานในวงกว้างในเดือนสิงหาคม 2025

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

ตัวเลือก :has()

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

เช่นเดียวกับการค้นหาคอนเทนเนอร์ คอมโพเนนต์นี้มีประโยชน์อย่างมากเมื่อสร้างคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ เนื่องจากคุณสร้างคอมโพเนนต์เดียวที่สามารถปรับให้เข้ากับสิ่งที่ประกอบด้วยได้

• พร้อมให้ใช้งานในเดือนธันวาคม 2023
• พร้อมให้ใช้งานในวงกว้างในเดือนมิถุนายน 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับ :has() ใน MDN ใน:has()ตัวเลือกครอบครัว และใน:has()กรณีศึกษา

ตารางกริดย่อยเลย์เอาต์ตารางกริดของ CSS

Subgrid ช่วยให้เลย์เอาต์แบบตารางกริดที่ฝังไว้รับแทร็กมาจากระดับบนสุดได้ ช่วยให้จัดเรียงรายการภายในตารางกริดที่ซ้อนกันได้ดียิ่งขึ้น

• พร้อมให้ใช้งานในเดือนธันวาคม 2023
• พร้อมให้ใช้งานในวงกว้างในเดือนมิถุนายน 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับกริดย่อยบน MDN และในตารางกริดย่อยของ CSS ซึ่งลิงก์ไปยังทรัพยากรอื่นๆ จำนวนมาก

การซ้อน CSS

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

อีกฟีเจอร์หนึ่งของ Preprocessor คือ Nesting การซ้อนช่วยให้หลีกเลี่ยงการสร้างตัวเลือกซ้ำๆ และช่วยให้ CSS อ่านง่ายขึ้นเนื่องจากสามารถจัดกลุ่มรายการที่เกี่ยวข้องไว้ด้วยกันได้ง่ายขึ้น

• พร้อมให้ใช้งานในเดือนสิงหาคม 2023
• พร้อมให้ใช้งานในวงกว้างในเดือนกุมภาพันธ์ 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับการซ้อน CSS ใน MDN และในการซ้อน CSS

องค์ประกอบ <search> ของ HTML

การค้นหาเป็นสิ่งที่ปรากฏในเว็บไซต์และแอปพลิเคชันจำนวนมาก อย่างไรก็ตาม ก่อนหน้านี้ยังไม่มีองค์ประกอบที่จะมาร์กอัปฟังก์ชันที่ใช้สำหรับการค้นหาหรือการกรองในหน้าเว็บ องค์ประกอบ <search> ออกแบบมาเพื่อวัตถุประสงค์นี้ ซึ่งจะปรากฏภายในองค์ประกอบที่คุณวางแบบฟอร์มการค้นหา หรือองค์ประกอบอื่นๆ ที่ใช้ในการกรองผลการค้นหาได้

• พร้อมให้ใช้งานในเดือนตุลาคม 2023
• พร้อมให้ใช้งานในวงกว้างในเดือนเมษายน 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ <search> ใน MDN

วิดีโอที่ปรับเปลี่ยนตามอุปกรณ์

ฟีเจอร์นี้หมายถึงความสามารถในการใช้องค์ประกอบ <source> ภายในองค์ประกอบ <video> เพื่อแสดงวิดีโอที่มีขนาดเหมาะสมไปยังอุปกรณ์ต่างๆ ในลักษณะเดียวกับที่คุณแสดงรูปภาพขนาดต่างๆ ได้

• พร้อมให้ใช้งานในเดือนพฤศจิกายน 2023
• พร้อมให้บริการในวงกว้างในเดือนพฤษภาคม 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับ MDN ในองค์ประกอบสื่อหรือแหล่งที่มาของรูปภาพ และในวิธีใช้วิดีโอที่ปรับเปลี่ยนตามพื้นที่โฆษณา

แอตทริบิวต์ inert

เมื่อองค์ประกอบไม่มีปฏิกิริยาโต้ตอบ องค์ประกอบนั้นจะไม่สามารถโต้ตอบได้ เช่น เมื่อเปิดองค์ประกอบหน้าต่างกล่องโต้ตอบที่อยู่ในหน้าเบื้องหลังกล่องโต้ตอบ คุณจะคลิกหรือไปที่แท็บไม่ได้ แอตทริบิวต์ inert เป็นวิธีควบคุมความไม่ต่อเนื่องในส่วนใดส่วนหนึ่งของ UI

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

• พร้อมให้ใช้งานในเดือนเมษายน 2023
• พร้อมให้บริการในวงกว้างในเดือนตุลาคม 2025

ดูข้อมูลเพิ่มเติมเกี่ยวกับ inert ใน MDN และในแอตทริบิวต์ inert

ฟังก์ชัน color-mix()

ฟังก์ชัน color-mix() ช่วยให้สามารถผสมสีหนึ่งลงในอีกสีหนึ่งในพื้นที่สีที่มีอยู่ ซึ่งรวมถึงโมเดลสีใหม่ทั้งหมด ซึ่งได้แก่ LCH, Lab, OKLCH และ OKLab ซึ่งเพิ่งกลายเป็นส่วนหนึ่งของ Baseline Newly available

• พร้อมให้ใช้งานในเดือนเมษายน 2023
• พร้อมให้บริการในวงกว้างในเดือนตุลาคม 2025

ดูข้อมูลเพิ่มเติมเกี่ยวกับ color-mix() ใน MDN และใน CSS color-mix() นอกจากนี้ เรายังมีคู่มือสี CSS ความละเอียดสูงขนาดใหญ่ที่ครอบคลุมโมเดลสีรูปแบบใหม่ทั้งหมดที่พร้อมให้บริการใน CSS นอกจากนี้ ลองไปที่ gradient.style เพื่อลองใช้สีใหม่เหล่านี้และสร้างการไล่ระดับสีที่สวยงาม

:user-validและ:user-invalid

คลาสจำลอง :valid และ :invalid มีให้ใช้งานอย่างแพร่หลายในเบราว์เซอร์และจะระบุว่าองค์ประกอบแบบฟอร์มถูกต้องตามกฎข้อจํากัดที่มีอยู่หรือไม่ถูกต้อง ดังนั้น หากคุณมีช่องที่มีประเภทอีเมลและช่องดังกล่าวมีชื่อ คลาสเทียม :invalid จะเลือกช่องดังกล่าว และคุณสามารถเพิ่มสีหรือไอคอนเพื่อแสดงว่าจำเป็นต้องแก้ไข

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

หากต้องการปรับปรุงประสบการณ์ของผู้ใช้ในสถานการณ์นี้ ให้ใช้คลาสจำลอง :user-valid และ :user-invalid โฆษณาเหล่านี้ทำงานค่อนข้างเหมือนกัน ยกเว้นในกรณีที่ตรงเมื่อผู้ใช้โต้ตอบกับช่อง ดังนั้น ในตัวอย่างช่องที่ต้องกรอก ผู้ใช้จำเป็นต้องกดแท็บหรือคลิกลงในช่อง แล้วเลื่อนออกโดยไม่ต้องกรอกข้อมูลในช่องนั้นจนช่องแสดงสถานะที่ไม่ถูกต้อง

• พร้อมให้ใช้งานในเดือนตุลาคม 2023
• พร้อมให้ใช้งานในวงกว้างในเดือนเมษายน 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับ :user-valid และ :user-invalid ใน MDN

สตรีมการบีบอัด

เว็บแอปพลิเคชันหลายรายการต้องให้ผู้ใช้ดาวน์โหลดในรูปแบบที่บีบอัด เช่น ไฟล์ ZIP ก่อนหน้านี้ การตั้งค่านี้กำหนดให้แอปพลิเคชันต้องมีไลบรารีการบีบอัด ซึ่งเป็นโค้ดที่เพิ่มขนาดของแอปพลิเคชันสำหรับผู้ใช้ทุกคน Compression Streams API มอบวิธีบีบอัดสตรีมข้อมูลในตัว

• พร้อมให้ใช้งานในเดือนพฤษภาคม 2023
• พร้อมให้ใช้งานในวงกว้างในเดือนพฤศจิกายน 2025

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Compression Streams API ใน MDN และในทุกเบราว์เซอร์รองรับการบีบอัดสตรีมแล้ว

Shadow DOM แบบประกาศ

Declarative Shadow DOM เป็นวิธีใหม่ในการสร้างเงาต้นไม้จาก HTML ซึ่งก่อนหน้านี้คุณสามารถสร้างเงาจาก JavaScript ได้โดยใช้ attachShadow() เท่านั้น ความสามารถในการดำเนินการนี้จาก HTML มีประโยชน์อย่างยิ่งในสภาพแวดล้อมที่ JavaScript อาจไม่ทำงาน เช่น โปรแกรมรับส่งอีเมล และมีความสำคัญกับคอมโพเนนต์เว็บที่แสดงผลฝั่งเซิร์ฟเวอร์ด้วย

• พร้อมให้ใช้งานในเดือนกุมภาพันธ์ 2024
• พร้อมให้บริการในวงกว้างในเดือนสิงหาคม 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Shadow DOM แบบประกาศ

Popover API

ป๊อปอัปใช้กับงานต่างๆ มากมายในเว็บแอปพลิเคชันของเรา เช่น เมนู การแจ้งเตือนโทสต์ที่กำหนดเอง และเครื่องมือเลือกเนื้อหา ตอนนี้เรามีวิธีการสร้างป๊อปอัปในรูปแบบตกแต่งในตัวด้วย The Popover API

• พร้อมให้ใช้งานในเดือนเมษายน 2024
• พร้อมให้บริการในวงกว้างในเดือนตุลาคม 2026

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Popover API ใน MDN, Popover API เข้าสู่ Baseline และกรณีศึกษาเกี่ยวกับ Popover

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