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

Rachel Andrew

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

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

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

ไปถึงเกณฑ์พื้นฐานที่ "ฉันใช้ได้ไหม"

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

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

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

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

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

การค้นหาคอนเทนเนอร์ขนาดและหน่วยการค้นหาคอนเทนเนอร์

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

การสนับสนุนเบราว์เซอร์

  • 105
  • 105
  • 110
  • 16

แหล่งที่มา

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

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

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

โมเดลสีใหม่

ใน Baseline ฟังก์ชันสี lch(), lab(), oklch() และ oklab() จะให้สิทธิ์เข้าถึงโมเดลสี LCH, Lab, OKLCH และ OKLab

การสนับสนุนเบราว์เซอร์

  • 111
  • 111
  • 113
  • 15

แหล่งที่มา

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

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

นอกจากนี้ ฟังก์ชันสีใหม่ยังกลายเป็นส่วนหนึ่งของเกณฑ์พื้นฐานด้วย ฟังก์ชัน color-mix() ช่วยให้สามารถผสมสีหนึ่งลงในอีกสีหนึ่งในพื้นที่สีใดก็ได้ ใน CSS ต่อไปนี้ มีสีน้ำเงิน 25% ผสมเป็นสีขาวในพื้นที่สี srgb

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

การสนับสนุนเบราว์เซอร์

  • 111
  • 111
  • 113
  • 15

แหล่งที่มา

ดูข้อมูลเพิ่มเติมเกี่ยวกับ 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 สำหรับการบีบอัดและเลิกบีบอัดสตรีมข้อมูล แอปที่ใช้การบีบอัดในตัวนี้ไม่จำเป็นต้องมีไลบรารีการบีบอัดอีกต่อไป

การสนับสนุนเบราว์เซอร์

  • 80
  • 80
  • 113
  • 16.4

แหล่งที่มา

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

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

ก่อนที่จะใช้ OffscreenCanvas ความสามารถในการวาด Canvas จะเชื่อมโยงกับองค์ประกอบ <canvas> ซึ่งหมายความว่าจะขึ้นอยู่กับ DOM โดยตรง OffscreenCanvas แยก DOM ออกจาก Canvas API โดยการย้าย Canvas ออกนอกหน้าจอ

การแยกกันนี้ทำให้การแสดงภาพของ OffscreenCanvas ถูกถอดออกจาก DOM อย่างสมบูรณ์ เพื่อให้มีการปรับปรุงความเร็วเหนือ Canvas ปกติเพราะไม่มีการซิงค์ระหว่างทั้งสอง นอกจากนี้ยังใช้เพื่อย้ายงานการแสดงผลไปยัง Web Worker ได้แม้ว่าจะไม่มี DOM ให้ใช้งาน ทำให้เทรดหลักว่างลงและทำให้แอปพลิเคชันตอบสนองได้ดีขึ้น

การสนับสนุนเบราว์เซอร์

  • 69
  • 79
  • 105
  • 16.4

แหล่งที่มา

ดูข้อมูลเพิ่มเติมใน OffscreenCanvas เพิ่มความเร็วของการทำงานของ Canvas ด้วย Web Worker

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

โมดูลการโหลดล่วงหน้าช่วยลดเวลาในการดาวน์โหลดและประมวลผลได้ เพิ่ม rel="modulepreload" ลงในองค์ประกอบลิงก์ที่อ้างอิงโมดูล JavaScript แล้วเบราว์เซอร์จะได้รับโมดูลดังกล่าว แยกวิเคราะห์และคอมไพล์ จากนั้นใส่ผลลัพธ์ลงในแมปโมดูลที่พร้อมเรียกใช้

การสนับสนุนเบราว์เซอร์

  • 66
  • ≤79
  • 115
  • 17

แหล่งที่มา

ดูข้อมูลเพิ่มเติมในโหลดโมดูลล่วงหน้า

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

ในปี 2023 ฟังก์ชันตรีโกณมิติจากข้อกำหนดของค่า CSS และหน่วยระดับ 4 เริ่มทำงานร่วมกันแล้ว ซึ่งหมายความว่าฟังก์ชัน sin(), cos(), tan(), asin(), acos(), atan() และ atan2() เป็นส่วนหนึ่งของเกณฑ์พื้นฐานปี 2023

การสนับสนุนเบราว์เซอร์

  • 111
  • 111
  • 108
  • 15.4

แหล่งที่มา

การสาธิตนี้ใช้ฟังก์ชันตรีโกณมิติเพื่อย้ายรายการบนเส้นทางวงกลมรอบจุดศูนย์กลาง

ดูวิธีใช้ฟังก์ชันเหล่านี้และดูกรณีการใช้งานบางส่วนในฟังก์ชันตรีโกณมิติใน CSS

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

การทำเครื่องหมายองค์ประกอบ DOM เป็น inert จะเป็นการนำการเคลื่อนไหวหรือการโต้ตอบออกจากองค์ประกอบนั้น แอตทริบิวต์ความเฉื่อยทำให้เบราว์เซอร์เพิกเฉยองค์ประกอบนั้น

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

การสนับสนุนเบราว์เซอร์

  • 102
  • 102
  • 112
  • 15.5

แหล่งที่มา

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

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

ค่า subgrid สำหรับ grid-template-columns และ grid-template-rows ช่วยให้คุณใช้แทร็กที่กำหนดไว้ในตารางกริดระดับบนสุดในตารางกริดที่ซ้อนกันได้ ซึ่งหมายความว่าคุณจะจัดองค์ประกอบในตารางกริดที่ซ้อนกันซึ่งแยกกันได้

การสนับสนุนเบราว์เซอร์

  • 117
  • 117
  • 71
  • 16

แหล่งที่มา

ในตารางกริดย่อยของ CSS คุณจะพบตัวอย่างและลิงก์ไปยังโพสต์อื่นๆ และตัวอย่างที่ไฮไลต์กรณีการใช้งานของตารางกริดย่อย

NumberFormat V3

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

  • ฟังก์ชันใหม่ 3 ฟังก์ชันในการจัดรูปแบบช่วงตัวเลข ได้แก่ formatRange, formatRangeToParts และ selectRange
  • enum ของการจัดกลุ่ม
  • ตัวเลือกการปัดเศษแบบใหม่และความแม่นยำ
  • ลำดับความสำคัญในการปัดเศษ
  • ตีความสตริงเป็นทศนิยม
  • โหมดการปัดเศษ
  • ป้ายที่แสดงเป็นลบ

การสนับสนุนเบราว์เซอร์

  • 106
  • 106
  • 116
  • 15.4

แหล่งที่มา

ข้อเสนอสำหรับ NumberFormat V3 มีรายละเอียดเกี่ยวกับฟีเจอร์ใหม่เหล่านี้แต่ละรายการ

API เต็มหน้าจอ

API เต็มหน้าจอช่วยให้คุณวางองค์ประกอบอย่างเช่น <video> ลงในโหมดเต็มหน้าจอได้โดยเรียกใช้เมธอด requestFullscreen() นอกจากนี้ยังแสดงวิธีตรวจจับว่าองค์ประกอบอยู่ในโหมดเต็มหน้าจอหรือไม่ และเอกสารอยู่ในสถานะที่ให้คุณขอโหมดเต็มหน้าจอหรือไม่

การสนับสนุนเบราว์เซอร์

  • 71
  • 79
  • 64
  • 16.4

แหล่งที่มา

ดูข้อมูลเพิ่มเติมในคำแนะนำเกี่ยวกับ API เต็มหน้าจอใน MDN

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

การทำ Baseline 2023 เป็นตัวเลือก :has() ซึ่งจะใช้ใน Firefox 121 ในวันที่ 19 ธันวาคม ระหว่างการใช้งานอื่นๆ ตัวเลือกนี้ทำหน้าที่เป็นตัวเลือกระดับบนสุด ซึ่งช่วยให้คุณเลือกองค์ประกอบตามสิ่งที่อยู่ภายในได้ ตัวอย่างเช่น คุณสามารถใช้ CSS ที่แตกต่างกันขึ้นอยู่กับว่ามีรูปภาพอยู่ในองค์ประกอบหรือไม่

การสนับสนุนเบราว์เซอร์

  • 105
  • 105
  • 121
  • 15.4

แหล่งที่มา

ดูข้อมูลเพิ่มเติมใน :has(): ตัวเลือกครอบครัว

ฟีเจอร์เพิ่มเติมที่เข้าร่วมเกณฑ์พื้นฐานในปีนี้

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

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