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

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

Rachel Andrew

เผยแพร่: 28 กุมภาพันธ์ 2025

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

ในเดือนกุมภาพันธ์ 2025 Firefox 135 และ Chrome 133 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ

ตรวจสอบความสามารถของ WebAuthn

ทั้ง Firefox 135 และ Chrome 133 รองรับเมธอดแบบคงที่ PublicKeyCredential.getClientCapabilities() ซึ่งจะช่วยให้คุณตรวจสอบได้ว่าเบราว์เซอร์รองรับฟีเจอร์ของ Web Authentication API หรือไม่ โดยไม่ต้องใช้การสแกนเบราว์เซอร์

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135 ยังมีฟีเจอร์จากการแยกวิเคราะห์ JSON ด้วยข้อเสนอแหล่งที่มาด้วย นั่นคือ อาร์กิวเมนต์ context ของพารามิเตอร์ reviver JSON.parse, JSON.isRawJSON() และ JSON.rawJSON()

Browser Support

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

Source

ค่าคำแนะนำของแอตทริบิวต์ป๊อปอัป

Chrome 133 เพิ่มค่าที่ 3 ให้กับแอตทริบิวต์ popover ซึ่งก็คือ popover="hint" คำแนะนำซึ่งมักเชื่อมโยงกับลักษณะการทำงานประเภท "เคล็ดลับเครื่องมือ" จะมีการทำงานแตกต่างกันเล็กน้อย ตอนนี้คุณสามารถเปิดป๊อปอัปคำแนะนำที่ไม่เกี่ยวข้องได้ในขณะที่ป๊อปอัปอัตโนมัติที่มีอยู่ยังคงเปิดอยู่

ตัวอย่างที่ถูกต้องคือเครื่องมือเลือก <select> เปิดอยู่ (popover="auto") และเคล็ดลับเครื่องมือที่แสดงเมื่อวางเมาส์เหนือ (popover="hint") จะปรากฏขึ้น การดำเนินการดังกล่าวจะไม่ปิดเครื่องมือเลือก <select>

Browser Support

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

อ่านเพิ่มเติมในป๊อปอัป = คำแนะนำ

ฟังก์ชัน attr() ขั้นสูงของ CSS

Chrome 133 มีชุด CSS ที่เพิ่มเข้ามามากมาย เวอร์ชัน Chrome นี้มีการเพิ่มattr() ที่ระบุไว้ใน CSS ระดับ 5 ซึ่งอนุญาตให้ใช้ประเภทอื่นๆ นอกเหนือจาก <string> และใช้ในพร็อพเพอร์ตี้ CSS ทั้งหมด (นอกเหนือจากการรองรับเนื้อหาองค์ประกอบจำลองที่มีอยู่)

Browser Support

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

ดูข้อมูลเพิ่มเติมในหัวข้อการอัปเกรด CSS attr()

การค้นหาคอนเทนเนอร์สถานะการเลื่อนของ CSS

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

คอนเทนเนอร์การค้นหาอาจเป็นคอนเทนเนอร์การเลื่อนหรือองค์ประกอบที่ได้รับผลกระทบจากตําแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อน คุณสามารถค้นหาสถานะต่อไปนี้ได้

  • stuck: คอนเทนเนอร์ที่ยึดตำแหน่งไว้ติดอยู่ที่ขอบใดขอบหนึ่งของกล่องเลื่อน
  • snapped: ขณะนี้คอนเทนเนอร์ที่วางแนวตามการเลื่อนมีการสแนปในแนวนอนหรือแนวตั้ง
  • scrollable: คอนเทนเนอร์การเลื่อนสามารถเลื่อนไปในทิศทางที่ค้นหาได้หรือไม่

นอกจากนี้ยังมีค่าใหม่สําหรับ container-type: scroll-state ที่ช่วยในการค้นหาคอนเทนเนอร์

Browser Support

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

อ่านข้อมูลเพิ่มเติมที่ CSS scroll-state()

CSS text-box, text-box-trim และ text-box-edge

นอกจากนี้ ใน CSS สำหรับ Chrome 133 ยังมีพร็อพเพอร์ตี้ text-box-trim และ text-box-edge รวมถึงพร็อพเพอร์ตี้ text-box แบบย่อ ซึ่งช่วยให้ควบคุมการจัดแนวตั้งของข้อความได้ละเอียดยิ่งขึ้น

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของพร็อพเพอร์ตี้ที่มีประโยชน์นี้ใน CSS text-box-trim

การย้ายที่รักษาสถานะ DOM

Chrome 133 เพิ่ม DOM Primitive (Node.prototype.moveBefore) ที่ช่วยให้คุณย้ายองค์ประกอบไปรอบๆ ต้นไม้ DOM ได้โดยไม่ต้องรีเซ็ตสถานะขององค์ประกอบ

เมื่อย้ายแทนที่จะนำออกและแทรก ระบบจะเก็บสถานะต่อไปนี้ไว้

  • โหลดองค์ประกอบ <iframe> รายการไว้
  • องค์ประกอบที่ใช้งานอยู่จะยังคงโฟกัสอยู่
  • ป๊อปอัป หน้าจอแบบเต็ม และกล่องโต้ตอบแบบโมดัลจะยังคงเปิดอยู่
  • การเปลี่ยน CSS และภาพเคลื่อนไหวจะยังคงทำงานต่อไป

Browser Support

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

อินเทอร์เฟซ FileSystemObserver

อินเทอร์เฟซ FileSystemObserver ที่เพิ่มใน Chrome 133 จะแจ้งให้เว็บไซต์ทราบถึงการเปลี่ยนแปลงในระบบไฟล์ เว็บไซต์จะสังเกตการเปลี่ยนแปลงไฟล์และไดเรกทอรีที่ผู้ใช้เคยให้สิทธิ์ไว้ก่อนหน้านี้ในอุปกรณ์ของผู้ใช้หรือในระบบไฟล์ของที่เก็บข้อมูล (หรือที่เรียกว่าระบบไฟล์ส่วนตัวของต้นทาง) และได้รับการแจ้งเตือนข้อมูลการเปลี่ยนแปลงพื้นฐาน เช่น ประเภทการเปลี่ยนแปลง

Browser Support

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

เบราว์เซอร์รุ่นเบต้า

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

Safari รุ่นเบต้าล่าสุดมีการเพิ่มและการปรับปรุงมากมาย รวมถึงฟีเจอร์บางอย่างที่เราคาดว่าจะกลายเป็นฟีเจอร์ใหม่ใน Baseline เมื่อเบราว์เซอร์นี้มีความเสถียร เช่น writing-mode: sideways-rl และ writing-mode: sideways-lr, supports() ที่เป็นเมธอดแบบคงที่ของ ClipboardItem และรายการต่างๆ จากข้อเสนอตัวช่วย Iterator

ทั้ง Safari 18.4 เบต้าและ Firefox 136 มี Cookie Store API ซึ่งควรเป็น Baseline ใหม่เมื่อทั้ง 2 เบราว์เซอร์พร้อมให้บริการ

Firefox 136 มีคลาสจำลอง :open และ :has-slotted ซึ่งคลาสหลังมีอยู่ใน Chrome 134 ด้วย รวมถึงIntl.DurationFormat ซึ่งควรเป็น Baseline ใหม่

Chrome 134 มีองค์ประกอบ <select> ที่ปรับแต่งได้ พร็อพเพอร์ตี้ dynamic-range-limit ของ CSS และฟังก์ชันการปิดแบบเบาสำหรับองค์ประกอบ <dialog>