เกณฑ์พื้นฐานกำลังจะมีให้บริการใน caniuse.com ในโพสต์นี้ ดูข้อมูลเกี่ยวกับ เกี่ยวกับการผสานรวม และค้นพบคุณลักษณะบางอย่างที่กลายเป็นส่วนหนึ่งของ เกณฑ์พื้นฐานในปี 2023
สำหรับคำจำกัดความใหม่ของเกณฑ์พื้นฐาน เป็น 2 ขั้นตอนในวงจรของฟีเจอร์ นั่นคือเมื่อฟีเจอร์พร้อมใช้งาน และ จากนั้นเมื่อพร้อมใช้งานในวงกว้างหลังจาก 30 เดือน สถานที่กลายเป็นส่วนหนึ่ง ของเกณฑ์พื้นฐานจะมีให้บริการใหม่เมื่อสามารถทำงานร่วมกันใน เบราว์เซอร์ต่อไปนี้:
- Safari (macOS และ iOS)
- Firefox (เดสก์ท็อปและ Android)
- Chrome (เดสก์ท็อปและ Android)
- Edge (เดสก์ท็อป)
เกณฑ์พื้นฐานเข้าสู่ Can I Use
ขั้นตอนถัดไปในการชี้แจงเกี่ยวกับความพร้อมใช้งานของฟีเจอร์ เกณฑ์พื้นฐานจะเริ่ม จะมาที่ Can I Use ได้ตั้งแต่วันนี้ เมื่อเข้าชมหน้าเว็บบางหน้าใน "ฉันสามารถใช้" คุณจะเห็น ป้ายที่แจ้งให้ทราบว่าฟีเจอร์นี้อยู่ในเกณฑ์พื้นฐานที่มีให้เลือกในวงกว้างหรือไม่
ฟีเจอร์ที่อยู่ในเกณฑ์พื้นฐานที่เพิ่งพร้อมใช้งานจะแสดงป้ายด้วย ปีที่พร้อมใช้งาน ทุกสิ่งที่ทำงานร่วมกัน เบราว์เซอร์หลักที่กำหนดในปีนี้เป็นส่วนหนึ่งของเกณฑ์พื้นฐาน 2023
อ่านเกี่ยวกับฟีเจอร์ที่บรรลุเป้าหมายนี้ได้ในส่วนที่เหลือของโพสต์นี้ ในช่วงปี 2023 ฟีเจอร์ทั้งหมดนี้ เกณฑ์พื้นฐาน 2023 - ใช้งานได้ใหม่
กำหนดขนาดของการค้นหาคอนเทนเนอร์และหน่วยการสืบค้นคอนเทนเนอร์
ขนาดคำค้นหาคอนเทนเนอร์ ทำให้คุณสามารถค้นหาขนาดขององค์ประกอบ ในลักษณะเดียวกับที่คิวรี่สื่อ ให้คุณค้นหาขนาดของวิวพอร์ตได้ โมเดลเหล่านี้ช่วยสร้างคอมโพเนนต์ที่นำมาใช้ใหม่ได้ ได้ง่ายขึ้นมากโดยให้คุณสร้างคอมโพเนนต์ที่ตอบสนองต่อขนาดของพื้นที่ ที่ใส่ไว้
ดีไซน์ของการ์ดต่อไปนี้จะเปลี่ยนไปตามความกว้างของคอมโพเนนต์ ดูข้อมูลเพิ่มเติมในการค้นหาคอนเทนเนอร์ในเบราว์เซอร์ที่เสถียร
พื้นที่สีและฟังก์ชันใหม่
ตอนนี้ CSS รองรับพื้นที่สีที่ช่วยให้คุณเข้าถึงสีนอกขอบเขต sRGB ได้แล้ว ซึ่งหมายความว่าคุณสามารถรองรับการแสดงผลแบบ HD (ความละเอียดสูง) โดยใช้สีจาก HD ได้ ขอบเขต
โมเดลสีใหม่
ตอนนี้ในเกณฑ์พื้นฐาน ฟังก์ชันสีคือ lch()
, lab()
, oklch()
และ oklab()
ให้สิทธิ์การเข้าถึงโมเดลสี LCH, Lab, OKLCH และ OKLab
![ภาพหน้าจอของเครื่องมือแก้ไขการไล่ระดับสีแบบไล่ระดับสีสีชมพูไปน้ำเงิน](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=19&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 โดยตรง แยกส่วนบนผ้าใบนอกหน้าจอ
DOM จาก Canvas API โดยย้าย Canvas ออกจากหน้าจอ
การแยกองค์ประกอบนี้ทําให้การแสดงภาพ OffscreenCanvas ถูกถอดออกจาก DOM ดังนั้นจึงมีการปรับปรุงความเร็ว เมื่อเทียบกับผืนผ้าใบปกติเนื่องจาก โดยไม่มีการซิงค์ระหว่างกัน และใช้เพื่อย้ายตำแหน่งได้ด้วย การแสดงผลงานไปยัง 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
จะไม่เริ่มทำงานหากผู้ใช้คลิกองค์ประกอบ - องค์ประกอบจะไม่ได้รับโฟกัส
- องค์ประกอบและเนื้อหาขององค์ประกอบจะไม่รวมอยู่ในโครงสร้างการช่วยเหลือพิเศษ
เพิ่มแอตทริบิวต์นี้ให้กับองค์ประกอบที่อยู่นอกหน้าจอหรือซ่อนอยู่ สำหรับข้อมูลเพิ่มเติม ดูข้อมูลได้ที่แอตทริบิวต์เฉื่อย
ตารางกริดย่อยในเลย์เอาต์แบบตารางกริด CSS
ค่า subgrid
สำหรับ grid-template-columns
และ grid-template-rows
ทำให้
คุณจะใช้แทร็กที่กำหนดไว้ในตารางกริดระดับบนสุดในตารางกริดที่ซ้อนกัน ซึ่งหมายความว่าคุณสามารถ
จัดองค์ประกอบในตารางกริดที่ซ้อนกันให้ซ้อนทับกัน
ในตารางกริดย่อย CSS คุณจะเห็นตัวอย่างและลิงก์ไปยัง โพสต์อื่นๆ อีกมากมายและตัวอย่างที่เน้นกรณีการใช้งานของตารางกริดย่อย
รูปแบบตัวเลข V3
Intl.NumberFormat V3 คือชุดคุณลักษณะใหม่สำหรับ Intl.NumberFormat ที่กลายเป็น ของเกณฑ์พื้นฐานในช่วงปี 2023 ฟีเจอร์เพิ่มเติมมีดังนี้
- ฟังก์ชันใหม่สามฟังก์ชันสำหรับจัดรูปแบบช่วงของตัวเลข:
formatRange
,formatRangeToParts
และselectRange
- Enum การจัดกลุ่ม
- ตัวเลือกการปัดเศษและความแม่นยำใหม่
- ลำดับความสำคัญของการปัดเศษ
- ตีความสตริงเป็นทศนิยม
- โหมดการปัดเศษ
- ป้ายโฆษณาแบบดิสเพลย์เชิงลบ
ข้อเสนอสำหรับ NumberFormat V3 แสดงรายละเอียดของฟีเจอร์ใหม่เหล่านี้แต่ละรายการ
API แบบเต็มหน้าจอ
API เต็มหน้าจอช่วยให้คุณวางองค์ประกอบ เช่น <video>
แบบเต็มหน้าจอได้
โดยเรียกใช้เมธอด requestFullscreen()
และยังบอกวิธีสำหรับ
ระบบจะตรวจจับว่าองค์ประกอบอยู่ในโหมดเต็มหน้าจอหรือไม่ และเอกสารนั้น
ในสถานะที่ให้คุณขอโหมดเต็มหน้าจอได้
ดูข้อมูลเพิ่มเติมในคำแนะนำเกี่ยวกับ API แบบเต็มหน้าจอใน MDN นี้
ตัวเลือก :has()
ของ CSS
เพียงสร้างเกณฑ์พื้นฐาน 2023 ก็เป็นตัวเลือก :has()
ซึ่งจะปรากฏใน Firefox
121 ในวันที่ 19 ธันวาคม นอกเหนือจากการใช้งานอื่นๆ ตัวเลือกนี้ทำหน้าที่เป็น
ตัวเลือกหลัก ซึ่งช่วยให้คุณสามารถเลือกองค์ประกอบตามสิ่งที่อยู่ภายใน
ได้ ตัวอย่างเช่น คุณสามารถใช้ CSS ที่แตกต่างกันโดยขึ้นอยู่กับว่ามี
รูปภาพภายในองค์ประกอบ
ดูข้อมูลเพิ่มเติมใน :has(): ตัวเลือกครอบครัว
ฟีเจอร์เพิ่มเติมที่เข้าร่วม Baseline ในปีนี้
ฟีเจอร์อื่นๆ ที่กลายมาเป็นส่วนหนึ่งของเกณฑ์พื้นฐานในปีนี้มีดังนี้
- สไตล์ชีตที่สร้างได้
- ตัวเลือกย่อยที่ n ที่ซับซ้อนใน CSS
- ไวยากรณ์ช่วงสำหรับคำค้นหาสื่อ
- นำเข้า Maps
- ค่าหลายค่าสำหรับการแสดงผล CSS
- @counter-style
- พร็อพเพอร์ตี้ CSS
counter-set
- ฟังก์ชันการค่อยๆ เปลี่ยนของ
linear()
- ระบบไฟล์ส่วนตัวต้นทาง (OPFS)
- การฝัง CSS รวมถึงการเปลี่ยนแปลงที่เพิ่มการแยกวิเคราะห์ที่ไม่เคร่งครัด
- ตัวเลือกคลาสเทียม
:dir()
ของ CSS - หน่วยความยาว
cap
ของ CSS - การมาสก์ CSS
- การรองรับคิวรี่สื่อสำหรับองค์ประกอบ
<source>
ของวิดีโอ HTML - องค์ประกอบ HTML
<search>
- การโหลดแบบ Lazy Loading ขององค์ประกอบ
<iframe>
(Landing Page ใน Firefox 121 วันที่ 19 ธันวาคม) - หน่วยความสูงบรรทัดของ CSS
lh
และrlh
ฟีเจอร์หลายรายการนี้สามารถทำงานร่วมกันผ่านการทำงานร่วมกัน ใน Interop 2023 การได้เห็นว่าฟีเจอร์ต่างๆ ผ่านขั้นตอนนั้นและเข้าสู่เกณฑ์พื้นฐานเป็น ซึ่งเป็นการเริ่มต้นจับเวลาให้ พร้อมให้บริการในวงกว้าง ซึ่งจะสร้าง แนวทางที่ชัดเจนมากขึ้นในการตัดสินใจว่าจะนำฟีเจอร์มาใช้ในโปรเจ็กต์ของคุณเองเมื่อใด