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

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

Rachel Andrew

เบราว์เซอร์เวอร์ชันเสถียร

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

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

Chrome 120 และ Safari 17.2 มี การแยกวิเคราะห์แบบผ่อนปรนสำหรับ CSS Nesting เนื่องจาก 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 มี CSS Custom Directory (API) ไฮไลต์ของ CSS ซึ่งช่วยให้คุณสร้างและจัดรูปแบบช่วงข้อความ ซึ่งขยายคลาสเทียมของไฮไลต์มาตรฐาน เช่น ::selection

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

  • 105
  • 105
  • 17.2

แหล่งที่มา

CloseWatcher API

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

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

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

  • 120
  • 120
  • x
  • x

CSS text-wrap: balance และ stable

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

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

text-wrap: balance

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

  • 114
  • 114
  • 121

แหล่งที่มา

text-wrap: stable

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

  • x
  • x
  • 121

แหล่งที่มา

การโหลดแบบ 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 และไฮไลต์องค์ประกอบจำลองสำหรับข้อความที่สะกดผิดหรือผิดไวยากรณ์