หน้านี้ได้รับการแปลโดย Cloud Translation API

เกณฑ์พื้นฐานปี 2023

Rachel Andrew

เกณฑ์พื้นฐานกำลังจะมีให้บริการใน caniuse.com ในโพสต์นี้ ดูข้อมูลเกี่ยวกับ เกี่ยวกับการผสานรวม และค้นพบคุณลักษณะบางอย่างที่กลายเป็นส่วนหนึ่งของ เกณฑ์พื้นฐานในปี 2023

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

Safari (macOS และ iOS)
Firefox (เดสก์ท็อปและ Android)
Chrome (เดสก์ท็อปและ Android)
Edge (เดสก์ท็อป)

เกณฑ์พื้นฐานเข้าสู่ Can I Use

ขั้นตอนถัดไปในการชี้แจงเกี่ยวกับความพร้อมใช้งานของฟีเจอร์ เกณฑ์พื้นฐานจะเริ่ม จะมาที่ Can I Use ได้ตั้งแต่วันนี้ เมื่อเข้าชมหน้าเว็บบางหน้าใน "ฉันสามารถใช้" คุณจะเห็น ป้ายที่แจ้งให้ทราบว่าฟีเจอร์นี้อยู่ในเกณฑ์พื้นฐานที่มีให้เลือกในวงกว้างหรือไม่

ภาพหน้าจอของ "ฉันสามารถใช้กับป้ายที่ใช้ได้อย่างแพร่หลายในเลย์เอาต์แบบตารางกริด CSS"

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

ภาพหน้าจอของ "ฉันใช้ได้ไหม" กับป้าย "ใหม่" ในการค้นหาคอนเทนเนอร์

อ่านเกี่ยวกับฟีเจอร์ที่บรรลุเป้าหมายนี้ได้ในส่วนที่เหลือของโพสต์นี้ ในช่วงปี 2023 ฟีเจอร์ทั้งหมดนี้ เกณฑ์พื้นฐาน 2023 - ใช้งานได้ใหม่

กำหนดขนาดของการค้นหาคอนเทนเนอร์และหน่วยการสืบค้นคอนเทนเนอร์

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

การรองรับเบราว์เซอร์

แหล่งที่มา

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

พื้นที่สีและฟังก์ชันใหม่

ตอนนี้ CSS รองรับพื้นที่สีที่ช่วยให้คุณเข้าถึงสีนอกขอบเขต sRGB ได้แล้ว ซึ่งหมายความว่าคุณสามารถรองรับการแสดงผลแบบ HD (ความละเอียดสูง) โดยใช้สีจาก HD ได้ ขอบเขต

โมเดลสีใหม่

ตอนนี้ในเกณฑ์พื้นฐาน ฟังก์ชันสีคือ lch(), lab(), oklch() และ oklab() ให้สิทธิ์การเข้าถึงโมเดลสี LCH, Lab, OKLCH และ OKLab

การรองรับเบราว์เซอร์

แหล่งที่มา

ภาพหน้าจอของเครื่องมือแก้ไขการไล่ระดับสีแบบไล่ระดับสีสีชมพูไปน้ำเงิน — ลองใช้พื้นที่สีใหม่ด้วย gradient.style

ฟังก์ชัน `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 ในปีนี้

ฟีเจอร์อื่นๆ ที่กลายมาเป็นส่วนหนึ่งของเกณฑ์พื้นฐานในปีนี้มีดังนี้

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

เกณฑ์พื้นฐานปี 2023

เกณฑ์พื้นฐานเข้าสู่ Can I Use

กำหนดขนาดของการค้นหาคอนเทนเนอร์และหน่วยการสืบค้นคอนเทนเนอร์

พื้นที่สีและฟังก์ชันใหม่

โมเดลสีใหม่

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

ฟังก์ชัน color()

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

แคนวาสนอกหน้าจอ

การโหลดโมดูลล่วงหน้า

ฟังก์ชันตรีโกณมิติใน CSS

แอตทริบิวต์เฉื่อย

ตารางกริดย่อยในเลย์เอาต์แบบตารางกริด CSS

รูปแบบตัวเลข V3

API แบบเต็มหน้าจอ

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

ฟีเจอร์เพิ่มเติมที่เข้าร่วม Baseline ในปีนี้

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

ฟังก์ชัน `color()`

ตัวเลือก `:has()` ของ CSS