เกณฑ์พื้นฐานกำลังจะพร้อมใช้งานแล้วใน caniuse.com ในโพสต์นี้ คุณจะได้ดูข้อมูลเกี่ยวกับการผสานรวมและสำรวจฟีเจอร์บางส่วนที่กลายเป็นส่วนหนึ่งของเกณฑ์พื้นฐานในปี 2023
คำจำกัดความใหม่ของเกณฑ์พื้นฐานจะมี 2 ขั้นตอนในวงจรของฟีเจอร์ ได้แก่ เมื่อพร้อมใช้งานใหม่ และเมื่อพร้อมใช้งานในวงกว้างหลังผ่านไป 30 เดือน ฟีเจอร์จะกลายเป็นส่วนหนึ่งของเกณฑ์พื้นฐานที่มีให้ใช้งานใหม่เมื่อฟีเจอร์ดังกล่าวทำงานร่วมกันในเบราว์เซอร์ต่อไปนี้
- Safari (macOS และ iOS)
- Firefox (เดสก์ท็อปและ Android)
- Chrome (เดสก์ท็อปและ Android)
- Edge (เดสก์ท็อป)
ไปถึงเกณฑ์พื้นฐานที่ "ฉันใช้ได้ไหม"
ขั้นตอนถัดไปในการชี้แจงความพร้อมให้บริการของฟีเจอร์ เกณฑ์พื้นฐานจะเริ่มเข้าสู่ "ฉันใช้ได้ไหม" ตั้งแต่วันนี้ เมื่อเข้าชมหน้าเว็บบางหน้าใน "ฉันสามารถใช้" คุณจะเห็นป้ายที่บอกว่าคุณลักษณะดังกล่าวมีให้ใช้งานอย่างทั่วถึงหรือไม่
ฟีเจอร์ที่อยู่ในเกณฑ์พื้นฐานที่มีให้ใช้งานใหม่จะแสดงป้ายพร้อมกับปีที่พร้อมให้บริการ ทุกอย่างที่ทำงานร่วมกันในเบราว์เซอร์หลักได้ในปีนี้เป็นส่วนหนึ่งของเกณฑ์พื้นฐานปี 2023
ในช่วงที่เหลือของโพสต์นี้ เราจะพูดถึงฟีเจอร์ที่บรรลุเป้าหมายนี้ในปี 2023 ฟีเจอร์ทั้งหมดนี้เป็นฟีเจอร์เกณฑ์พื้นฐานปี 2023 - มีให้ใช้งานใหม่
การค้นหาคอนเทนเนอร์ขนาดและหน่วยการค้นหาคอนเทนเนอร์
ขนาดคำค้นหาคอนเทนเนอร์ให้คุณค้นหาขนาดขององค์ประกอบได้ในลักษณะเดียวกันกับที่คำค้นหาสื่อให้คุณค้นหาขนาดของวิวพอร์ตได้ ซึ่งช่วยให้สร้างคอมโพเนนต์ที่นำมาใช้ใหม่ได้ โดยให้คุณสร้างคอมโพเนนต์ที่ตอบสนองต่อขนาดของพื้นที่ ที่วางอยู่
ดีไซน์ของการ์ดต่อไปนี้จะเปลี่ยนไปตามความกว้างของคอมโพเนนต์ โปรดดูข้อมูลเพิ่มเติมในการค้นหาคอนเทนเนอร์ทำงานในเบราว์เซอร์ที่เสถียร
พื้นที่สีและฟังก์ชันใหม่
ตอนนี้ CSS รองรับพื้นที่สีที่ช่วยให้คุณเข้าถึงสีนอกขอบเขตของ sRGB ได้แล้ว ซึ่งหมายความว่าคุณจะรองรับจอแสดงผล HD (ความละเอียดสูง) ที่ใช้สีจากโทนสี HD ได้
โมเดลสีใหม่
ใน Baseline ฟังก์ชันสี lch()
, lab()
, oklch()
และ oklab()
จะให้สิทธิ์เข้าถึงโมเดลสี LCH, Lab, OKLCH และ OKLab
![ภาพหน้าจอของเครื่องมือแก้ไขการไล่ระดับสีแบบไล่ระดับสีที่มีการไล่ระดับสีที่มีชีวิตชีวาสีชมพูถึงน้ำเงิน](https://web.developers.google.cn/static/blog/baseline2023/image/gradient-style.png?authuser=5&hl=th)
ฟังก์ชัน color-mix()
นอกจากนี้ ฟังก์ชันสีใหม่ยังกลายเป็นส่วนหนึ่งของเกณฑ์พื้นฐานด้วย ฟังก์ชัน color-mix()
ช่วยให้สามารถผสมสีหนึ่งลงในอีกสีหนึ่งในพื้นที่สีใดก็ได้
ใน CSS ต่อไปนี้ มีสีน้ำเงิน 25% ผสมเป็นสีขาวในพื้นที่สี srgb
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
ดูข้อมูลเพิ่มเติมเกี่ยวกับ color-mix()
ฟังก์ชัน color()
คุณใช้ฟังก์ชัน color()
กับพื้นที่สีที่ระบุสีที่มีช่องสี R, G และ B ได้ color()
จะใช้พารามิเตอร์พื้นที่สีก่อน จากนั้นตามด้วยชุดของค่าแชแนลสำหรับ RGB และอัลฟ่าบางตัว (ไม่บังคับ) คุณใช้ srgb
,
srgb-linear
, display-p3
, a98-rgb
, prophoto-rgb
, rec2020
, xyz
,
xyz-d50
และ xyz-d65
ได้ เช่น
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
คู่มือสีความละเอียดสูงของ CSS มีตัวอย่างเพิ่มเติมเกี่ยวกับพื้นที่สีและฟังก์ชันใหม่ ตลอดจนข้อมูลเกี่ยวกับกรณีที่ควรใช้
สตรีมการบีบอัด
Compression Streams API คือ JavaScript API สำหรับการบีบอัดและเลิกบีบอัดสตรีมข้อมูล แอปที่ใช้การบีบอัดในตัวนี้ไม่จำเป็นต้องมีไลบรารีการบีบอัดอีกต่อไป
ดูข้อมูลเพิ่มเติมในขณะนี้ทุกเบราว์เซอร์รองรับสตรีมการบีบอัดแล้ว
แคนวาสนอกหน้าจอ
ก่อนที่จะใช้ OffscreenCanvas ความสามารถในการวาด Canvas จะเชื่อมโยงกับองค์ประกอบ <canvas>
ซึ่งหมายความว่าจะขึ้นอยู่กับ DOM โดยตรง OffscreenCanvas แยก DOM ออกจาก Canvas API โดยการย้าย Canvas ออกนอกหน้าจอ
การแยกกันนี้ทำให้การแสดงภาพของ OffscreenCanvas ถูกถอดออกจาก DOM อย่างสมบูรณ์ เพื่อให้มีการปรับปรุงความเร็วเหนือ Canvas ปกติเพราะไม่มีการซิงค์ระหว่างทั้งสอง นอกจากนี้ยังใช้เพื่อย้ายงานการแสดงผลไปยัง Web Worker ได้แม้ว่าจะไม่มี DOM ให้ใช้งาน ทำให้เทรดหลักว่างลงและทำให้แอปพลิเคชันตอบสนองได้ดีขึ้น
ดูข้อมูลเพิ่มเติมใน OffscreenCanvas เพิ่มความเร็วของการทำงานของ Canvas ด้วย Web Worker
การโหลดโมดูลล่วงหน้า
โมดูลการโหลดล่วงหน้าช่วยลดเวลาในการดาวน์โหลดและประมวลผลได้ เพิ่ม rel="modulepreload"
ลงในองค์ประกอบลิงก์ที่อ้างอิงโมดูล JavaScript แล้วเบราว์เซอร์จะได้รับโมดูลดังกล่าว แยกวิเคราะห์และคอมไพล์ จากนั้นใส่ผลลัพธ์ลงในแมปโมดูลที่พร้อมเรียกใช้
ดูข้อมูลเพิ่มเติมในโหลดโมดูลล่วงหน้า
ฟังก์ชันตรีโกณมิติใน CSS
ในปี 2023 ฟังก์ชันตรีโกณมิติจากข้อกำหนดของค่า CSS และหน่วยระดับ 4
เริ่มทำงานร่วมกันแล้ว ซึ่งหมายความว่าฟังก์ชัน sin()
, cos()
,
tan()
, asin()
, acos()
, atan()
และ atan2()
เป็นส่วนหนึ่งของเกณฑ์พื้นฐานปี 2023
ดูวิธีใช้ฟังก์ชันเหล่านี้และดูกรณีการใช้งานบางส่วนในฟังก์ชันตรีโกณมิติใน CSS
แอตทริบิวต์ความเฉื่อย
การทำเครื่องหมายองค์ประกอบ DOM เป็น inert
จะเป็นการนำการเคลื่อนไหวหรือการโต้ตอบออกจากองค์ประกอบนั้น แอตทริบิวต์ความเฉื่อยทำให้เบราว์เซอร์เพิกเฉยองค์ประกอบนั้น
- เหตุการณ์
click
จะไม่เริ่มทำงานหากผู้ใช้คลิกองค์ประกอบ - องค์ประกอบจะไม่มีโฟกัส
- องค์ประกอบและเนื้อหาขององค์ประกอบจะไม่รวมอยู่ในโครงสร้างการช่วยเหลือพิเศษ
เพิ่มแอตทริบิวต์นี้ลงในองค์ประกอบที่ไม่ได้อยู่ในหน้าจอหรือซ่อนอยู่ ดูข้อมูลเพิ่มเติมได้ที่แอตทริบิวต์ inert
ตารางกริดย่อยในเลย์เอาต์ตารางกริดของ CSS
ค่า subgrid
สำหรับ grid-template-columns
และ grid-template-rows
ช่วยให้คุณใช้แทร็กที่กำหนดไว้ในตารางกริดระดับบนสุดในตารางกริดที่ซ้อนกันได้ ซึ่งหมายความว่าคุณจะจัดองค์ประกอบในตารางกริดที่ซ้อนกันซึ่งแยกกันได้
ในตารางกริดย่อยของ CSS คุณจะพบตัวอย่างและลิงก์ไปยังโพสต์อื่นๆ และตัวอย่างที่ไฮไลต์กรณีการใช้งานของตารางกริดย่อย
NumberFormat V3
Intl.NumberFormat V3 เป็นชุดฟีเจอร์ใหม่สำหรับ Intl.NumberFormat ซึ่งกลายเป็นส่วนหนึ่งของเกณฑ์พื้นฐานในปี 2023 ฟีเจอร์เพิ่มเติมมีดังนี้
- ฟังก์ชันใหม่ 3 ฟังก์ชันในการจัดรูปแบบช่วงตัวเลข ได้แก่
formatRange
,formatRangeToParts
และselectRange
- enum ของการจัดกลุ่ม
- ตัวเลือกการปัดเศษแบบใหม่และความแม่นยำ
- ลำดับความสำคัญในการปัดเศษ
- ตีความสตริงเป็นทศนิยม
- โหมดการปัดเศษ
- ป้ายที่แสดงเป็นลบ
ข้อเสนอสำหรับ NumberFormat V3 มีรายละเอียดเกี่ยวกับฟีเจอร์ใหม่เหล่านี้แต่ละรายการ
API เต็มหน้าจอ
API เต็มหน้าจอช่วยให้คุณวางองค์ประกอบอย่างเช่น <video>
ลงในโหมดเต็มหน้าจอได้โดยเรียกใช้เมธอด requestFullscreen()
นอกจากนี้ยังแสดงวิธีตรวจจับว่าองค์ประกอบอยู่ในโหมดเต็มหน้าจอหรือไม่ และเอกสารอยู่ในสถานะที่ให้คุณขอโหมดเต็มหน้าจอหรือไม่
ดูข้อมูลเพิ่มเติมในคำแนะนำเกี่ยวกับ API เต็มหน้าจอใน MDN
ตัวเลือก CSS :has()
การทำ Baseline 2023 เป็นตัวเลือก :has()
ซึ่งจะใช้ใน Firefox 121 ในวันที่ 19 ธันวาคม ระหว่างการใช้งานอื่นๆ ตัวเลือกนี้ทำหน้าที่เป็นตัวเลือกระดับบนสุด ซึ่งช่วยให้คุณเลือกองค์ประกอบตามสิ่งที่อยู่ภายในได้ ตัวอย่างเช่น คุณสามารถใช้ CSS ที่แตกต่างกันขึ้นอยู่กับว่ามีรูปภาพอยู่ในองค์ประกอบหรือไม่
ดูข้อมูลเพิ่มเติมใน :has(): ตัวเลือกครอบครัว
ฟีเจอร์เพิ่มเติมที่เข้าร่วมเกณฑ์พื้นฐานในปีนี้
ฟีเจอร์อื่นๆ ที่กลายเป็นส่วนหนึ่งของเกณฑ์พื้นฐานในปีนี้มีดังต่อไปนี้
- สไตล์ชีตที่สร้างได้
- ตัวเลือกลูกที่ n ที่ซับซ้อนใน CSS
- ไวยากรณ์ช่วงสำหรับคำค้นหาสื่อ
- นำเข้าแผนที่
- ค่าหลายค่าสำหรับการแสดง CSS
- @counter-style
- พร็อพเพอร์ตี้ CSS ของ
counter-set
- ฟังก์ชันการค่อยๆ เปลี่ยนของ
linear()
- ระบบไฟล์ส่วนตัวต้นทาง (OPFS)
- การซ้อน CSS รวมถึงการเปลี่ยนแปลงที่เพิ่มการแยกวิเคราะห์แบบผ่อนคลาย
- ตัวเลือกคลาส Pseudo
:dir()
ของ CSS - หน่วยความยาวของ CSS
cap
- การมาสก์ CSS
- การรองรับคิวรี่สื่อสำหรับองค์ประกอบ
<source>
ของวิดีโอ HTML - องค์ประกอบ HTML
<search>
- การโหลดแบบ Lazy Loading ของ
<iframe>
องค์ประกอบ (ลงจอดใน Firefox 121 วันที่ 19 ธันวาคม) - หน่วยความสูงบรรทัดของ CSS
lh
และrlh
ฟีเจอร์เหล่านี้จำนวนมากช่วยให้มีการทำงานร่วมกันผ่านการทำงานร่วมกันใน Interop 2023 เป็นเรื่องน่าตื่นเต้นที่จะได้ทราบว่าจะมีการนำฟีเจอร์เข้าสู่กระบวนการดังกล่าวอย่างไร และย้ายเข้าสู่ Baseline ใหม่เป็นฟีเจอร์ใหม่ ซึ่งช่วยจับเวลาให้พร้อมใช้งานในวงกว้าง ซึ่งจะสร้างเส้นทางที่ชัดเจนขึ้นในการตัดสินใจว่าเมื่อใดควรใช้ฟีเจอร์ในโปรเจ็กต์ของคุณ