ในงาน 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