แพลตฟอร์มเว็บใหม่ในเดือนธันวาคม

มาดูฟีเจอร์ที่น่าสนใจบางส่วนซึ่งเปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้า ในช่วงเดือนธันวาคม 2025 กัน

Rachel Andrew

เผยแพร่: 16 ธันวาคม 2025

รุ่นเบราว์เซอร์ที่เสถียร

Chrome 143, Firefox 146 และ Safari 26.2 เปิดตัวในเวอร์ชันเสถียรในช่วงเดือนธันวาคม โพสต์นี้จะพูดถึงฟีเจอร์ใหม่ๆ มากมายในเดือนนี้ โดยมีหลายอย่างที่ กลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่

@scope กฎ @ ของ CSS เป็นฟีเจอร์พื้นฐานแล้ว

Firefox 146 มีกฎ @ @scope CSS ซึ่งช่วยให้คุณเลือกองค์ประกอบใน DOM subtree ที่เฉพาะเจาะจงได้ กำหนดขอบเขตภายในที่ตัวเลือกสามารถกำหนดเป้าหมายองค์ประกอบได้ และหลีกเลี่ยงตัวเลือกที่เฉพาะเจาะจงและยาวเกินไป ตัวอย่างเช่น CSS ต่อไปนี้จะกำหนดเป้าหมายองค์ประกอบ <img> เฉพาะในกรณีที่อยู่ภายในองค์ประกอบที่มีคลาส .card

@scope (.card) {
    img {
        border-color: green;
    }
}

ใน Firefox 146 ตอนนี้กฎ @ ที่มีประโยชน์นี้พร้อมใช้งานแล้ว ดูข้อมูลเพิ่มเติมได้ที่ จำกัดการเข้าถึงของตัวเลือกด้วย@scopeกฎ @ ของ CSS

contrast-color()ฟังก์ชัน CSS

นอกจากนี้ Firefox 146 ยังมีฟังก์ชัน contrast-color() ด้วย ฟังก์ชันนี้จะรับค่าสีและแสดงสีที่ตัดกัน ซึ่งมีจุดประสงค์เพื่อให้มั่นใจว่าคอนทราสต์ขั้นต่ำของ WCAG AA

ดูตัวอย่างเพิ่มเติมได้ที่ วิธีให้เบราว์เซอร์เลือกสีที่ตัดกันใน CSS ในบล็อก WebKit

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: 26.

Source

Firefox เป็นเบราว์เซอร์แรกที่เปิดตัวพร็อพเพอร์ตี้ text-decoration-inset พร็อพเพอร์ตี้นี้ช่วยให้คุณปรับจุดเริ่มต้นและจุดสิ้นสุดของข้อความ ตกแต่งขององค์ประกอบได้ เพื่อให้ข้อความสั้นลง ยาวขึ้น หรือเปลี่ยนตำแหน่งได้เมื่อเทียบกับข้อความที่แสดง

พร็อพเพอร์ตี้ font-language-override CSS

Chrome 143 มีพร็อพเพอร์ตี้ font-language-override ซึ่งช่วยให้คุณลบล้างลักษณะการทำงานของแบบอักษรสำหรับภาษาที่เฉพาะเจาะจงได้ ซึ่งจะเป็นประโยชน์หากคุณใช้แบบอักษรที่ไม่รองรับภาษาอย่างเหมาะสม คุณสามารถเลือกใช้กลีฟจากภาษาที่คล้ายกันซึ่งรองรับได้ดีกว่า

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 34.
  • Safari: not supported.

Source

การค้นหาคอนเทนเนอร์สำรองที่ยึดตาม CSS

Chrome 143 เปิดตัว @container anchored(fallback) เพื่อจัดรูปแบบองค์ประกอบลูกหลานของ องค์ประกอบที่วางตำแหน่งโดยอิงตาม position-try-fallbacks ที่ใช้

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

ไวยากรณ์ที่สัมพันธ์กับด้านข้างสำหรับbackground-position-x/yแบบยาว

นอกจากนี้ ใน Chrome และตอนนี้พร้อมใช้งานในเบราว์เซอร์ทั้งหมดแล้ว คุณยังสามารถ กำหนดตำแหน่งของรูปภาพพื้นหลังเทียบกับขอบด้านใดด้านหนึ่งใน พร็อพเพอร์ตี้แบบยาวสำหรับ background-position ได้ด้วย เช่น

.element {
  background-image: url(flower.gif);
  background-repeat: no-repeat;
  background-position-x: left 30px;
  background-position-y: bottom 20px;
}

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 49.
  • Safari: 15.4.

พร็อพเพอร์ตี้ภาพเคลื่อนไหว overallProgress

Safari 26.2 มีฟีเจอร์ต่อไปนี้ overallProgress พร็อพเพอร์ตี้แบบอ่านอย่างเดียวของอินเทอร์เฟซ Animation จะแสดงผลตัวเลขระหว่าง 0 ถึง 1 ซึ่งบ่งบอกถึง ความคืบหน้าโดยรวมของภาพเคลื่อนไหวไปสู่สถานะที่เสร็จสมบูรณ์

ตอนนี้พร็อพเพอร์ตี้นี้เป็นพร็อพเพอร์ตี้พื้นฐานที่พร้อมใช้งานแล้ว

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 142.
  • Safari Technology Preview: supported.

Source

ตอนนี้ LCP และ INP เป็นเมตริกพื้นฐานที่พร้อมใช้งานแล้ว

ตอนนี้เมตริก Largest Contentful Paint (LCP) และ Interaction to Next Paint (INP) เป็นเมตริกพื้นฐานที่พร้อมใช้งานแล้ว โดยรองรับใน Safari 26.2 สำหรับ Contentful Paint API และ Event Timing API ที่จำเป็นต่อการวัดเมตริกเหล่านี้

ฟีเจอร์เหล่านี้รวมอยู่ใน Interop 2025 และตอนนี้คุณสามารถวัดเมตริกเหล่านี้ได้ในเบราว์เซอร์หลักทุกเบราว์เซอร์เวอร์ชันล่าสุด

Largest Contentful Paint API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 89.
  • Safari: not supported.

Source

CHIPS พร้อมใช้งานใน Baseline แล้ว

นอกจากนี้ Safari 26.2 ยังมี CHIPS (Cookies Having Independent Partitioned State) ซึ่งช่วยให้คุณเลือกใช้คุกกี้ในพื้นที่เก็บข้อมูลที่แบ่งพาร์ติชันได้ โดยมีกระปุกคุกกี้แยกต่างหาก สำหรับแต่ละเว็บไซต์ระดับบนสุด

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 141.
  • Safari: not supported.

Source

hidden="until-found"

Safari 26.2 รองรับ hidden="until-found" ซึ่งตอนนี้กลายเป็น Baseline Newly available แล้ว

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 139.
  • Safari Technology Preview: supported.

Source

แอตทริบิวต์ command และ commandfor

นอกจากนี้ สำหรับ HTML ใน Safari 26.2 ยังรองรับ command และ commandfor ในปุ่มด้วย ซึ่งเป็นวิธีประกาศในการควบคุมป๊อปโอเวอร์และกล่องโต้ตอบ

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 144.
  • Safari Technology Preview: supported.

Source

ดูข้อมูลเพิ่มเติมได้ในการเปิดตัว command และ commandfor

การแข่งขัน scrollend

อีกฟีเจอร์หนึ่งที่กลายเป็น Baseline Newly พร้อมให้ใช้งานใน Safari 26.2 คือ scrollend เหตุการณ์ เหตุการณ์นี้จะทริกเกอร์เมื่อการเลื่อนเสร็จสิ้น ดูข้อมูลเพิ่มเติมได้ที่ Scrollend ซึ่งเป็นเหตุการณ์ JavaScript ใหม่

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

พร็อพเพอร์ตี้ scrollbar-color

พร็อพเพอร์ตี้ scrollbar-color ช่วยให้คุณเปลี่ยนสีแถบเลื่อน และแทร็กของแถบเลื่อนได้ เมื่อใช้ Safari 26.2 ฟีเจอร์นี้จะกลายเป็นฟีเจอร์พื้นฐานที่พร้อมใช้งานใหม่ด้วย

Browser Support

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: not supported.

Source

การเปิดตัวเบราว์เซอร์เวอร์ชันเบต้า

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

Chrome 144 มี::search-textองค์ประกอบเสมือนสำหรับผลการค้นหาในหน้า การจัดรูปแบบ และscrolledรองรับ @scroll-state ซึ่งช่วยให้คุณ จัดรูปแบบองค์ประกอบย่อยของคอนเทนเนอร์ตามทิศทางการเลื่อนล่าสุดได้ นอกจากนี้ยังมี Temporal API พร้อมออบเจ็กต์และฟังก์ชันมาตรฐานสำหรับ การทำงานกับวันที่และเวลา

Firefox 147 เป็นรุ่นที่น่าตื่นเต้นซึ่งมี CSS Anchor Positioning ประเภทการเปลี่ยนมุมมอง และ Navigation API

ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ CSS และ UI ที่น่าสนใจซึ่งเปิดตัวในปีนี้ได้ที่ CSS Wrapped 2025