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

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

Rachel Andrew

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

ในเดือนธันวาคม 2023 Firefox 121 Chrome 120 และ Safari 17.2 เริ่มมีความเสถียรแล้ว โพสต์นี้จะพิจารณาผลกระทบที่มีต่อแพลตฟอร์มเว็บ

การแยกวิเคราะห์แบบผ่อนคลายสำหรับ Nesting CSS

Chrome 120 และ Safari 17.2 มี การแยกวิเคราะห์ที่ไม่เข้มงวดสำหรับ Nesting ของ CSS เนื่องจาก Firefox รองรับจากเวอร์ชัน 117 นี่หมายความว่าเครื่องมือหลักๆ ทั้งหมดรองรับการเปลี่ยนแปลงไวยากรณ์นี้

แอคคอร์เดียนพิเศษที่มีองค์ประกอบ <details>

Chrome 120 และ Safari 17.2 รองรับแอตทริบิวต์ name สำหรับ องค์ประกอบ <details> ซึ่งหมายความว่าคุณสามารถสร้างส่วนประกอบพิเศษของแอคคอร์เดียนได้ โดยการจัดกลุ่มองค์ประกอบ <details> หลายรายการ

ดูข้อมูลเพิ่มเติมในแอคคอร์เดียนสุดพิเศษ

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

  • 120
  • 120
  • x
  • 17.2

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

Firefox 121 มีตัวเลือก CSS :has() รุ่นนี้ทำให้ :has() ทำงานร่วมกันได้ในเครื่องมือค้นหาหลักทั้งหมด

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

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

  • 105
  • 105
  • 121
  • 15.4

แหล่งที่มา

API ไฮไลต์ที่กําหนดเองของ CSS

Safari 17.2 ประกอบด้วย API ไฮไลต์ที่กำหนดเองของ CSS ซึ่งช่วยให้คุณสร้างและจัดรูปแบบช่วงข้อความ การขยายคลาสเทียมของไฮไลต์มาตรฐาน เช่น ::selection

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

  • 105
  • 105
  • 17.2

แหล่งที่มา

CloseWatcher API

Chrome 120 มี CloseWatcher API ซึ่งเป็น API ใหม่สำหรับการฟังและตอบสนองต่อคำขอปิด คำขอเหล่านี้จะทริกเกอร์โดยแป้น ESC บนเดสก์ท็อป และท่าทางสัมผัสหรือปุ่มย้อนกลับใน Android และอาจทำงานได้ยาก

นอกเหนือจาก API แล้ว Chrome 120 จะอัปเกรด <dialog> และแอตทริบิวต์ popover ให้ตอบสนองต่อปุ่มย้อนกลับของ Android

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

  • 126
  • 126
  • x
  • x

CSS text-wrap: balance และ stable

Firefox 121 มีค่า balance และ stable สำหรับ text-wrap ค่า balance มีประโยชน์สำหรับบล็อกเนื้อหาสั้นๆ เช่น ส่วนหัว เพื่อสร้างข้อความที่อ่านง่ายและน่าอ่านยิ่งขึ้น ค่า stable ป้องกันไม่ให้เนื้อหาที่แก้ไขได้เล่นซ้ำขณะกำลังแก้ไข

เรียนรู้เพิ่มเติมเกี่ยวกับ text-wrap: balance

text-wrap: balance

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

  • 114
  • 114
  • 121
  • 17.5

แหล่งที่มา

text-wrap: stable

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

  • x
  • x
  • 121
  • 17.5

แหล่งที่มา

การโหลดแบบ Lazy Loading ขององค์ประกอบ <iframe>

Firefox 121 รองรับแอตทริบิวต์ loading ในองค์ประกอบ <iframe> ซึ่งหมายความว่าตอนนี้เครื่องมือหลักทั้งหมดรองรับการโหลดแบบ Lazy Loading ของ iframe แล้ว

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

  • 77
  • 79
  • 121
  • 16.4

การรองรับฟังก์ชันการค่อยๆ เปลี่ยนของ linear()

Safari 17.2 ยังรองรับฟังก์ชันการค่อยๆ เปลี่ยนของ linear() ที่ใช้เพื่อสร้าง เอฟเฟกต์การตีกลับและฤดูใบไม้ผลิ

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

  • 113
  • 113
  • 112
  • 17.2

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

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

Firefox 122 และ Chrome 121 มีเมธอด showPicker() สำหรับ HTMLSelectElement ระบบจะแสดงเครื่องมือเลือกเดียวกันกับที่ จะแสดงเมื่อเลือกองค์ประกอบ แต่อาจถูกเรียกใช้จากการกดปุ่มหรือการโต้ตอบอื่นๆ ของผู้ใช้

Chrome 121 ประกอบด้วยคุณสมบัติการจัดรูปแบบแถบเลื่อน scrollbar-color และ scrollbar-width พร้อมกับการมาสก์ CSS ที่ปรับปรุงใหม่สำหรับ SVG และไฮไลต์องค์ประกอบสมมติสำหรับข้อความที่สะกดผิดหรือผิดไวยากรณ์