สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนกันยายน 2024
รุ่นต่างๆ ของเบราว์เซอร์ที่เสถียร
ในเดือนกันยายน 2024 Firefox 130, Safari 18 และ Chrome 129 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ
กล่อง Accordion พิเศษที่มีแอตทริบิวต์ name
สำหรับ <details>
Firefox 130 รองรับแอตทริบิวต์ name
ขององค์ประกอบ <details>
จัดกลุ่มเอลิเมนต์ <details>
ซึ่งเปิดได้ครั้งละ 1 องค์ประกอบภายในกลุ่มเท่านั้น ซึ่งจะช่วยให้คุณสร้าง Accordion พิเศษได้โดยไม่ต้องใช้ JavaScript
การรองรับเบราว์เซอร์
เคลื่อนไหวเป็นอัตโนมัติ (และอื่นๆ)
Chrome 129 เพิ่มพร็อพเพอร์ตี้ interpolate-size
และฟังก์ชัน calc-size()
ของ CSS
พร็อพเพอร์ตี้ interpolate-size
ของ CSS ช่วยให้หน้าเว็บเลือกใช้ภาพเคลื่อนไหวและการเปลี่ยนรูปแบบของคีย์เวิร์ดการปรับขนาดตามค่าเริ่มต้นของ CSS ได้ เช่น auto
, min-content
และ fit-content
ในกรณีที่ใช้คีย์เวิร์ดเหล่านั้นสร้างภาพเคลื่อนไหวได้
ฟังก์ชัน calc-size()
ของ CSS เป็นฟังก์ชัน CSS ที่คล้ายกับ calc()
แต่รองรับการดำเนินการกับคีย์เวิร์ดการปรับขนาดที่รองรับเพียง 1 รายการเท่านั้น
คีย์เวิร์ดด้านขนาดที่รองรับคือ auto
, min-content
, max-content
และ fit-content
ดูข้อมูลเพิ่มเติมใน ภาพเคลื่อนไหวเป็นความสูง: auto; (และคีย์เวิร์ดการกำหนดขนาดเฉพาะอื่นๆ) ใน CSS
จัดรูปแบบระยะเวลาใน JavaScript
นอกจากนี้ ใน Chrome 129 คือ Intl.DurationFormat
ซึ่งจะระบุวิธีการจัดรูปแบบระยะเวลา เช่น "1 hr 40 min 30 sec" ซึ่งรองรับหลายภาษา
WebCodecs API
ตอนนี้ Firefox 130 บนเดสก์ท็อปรองรับ Web Codecs API แล้ว ซึ่งช่วยให้นักพัฒนาเว็บเข้าถึงระดับล่างของเฟรมแต่ละเฟรมในสตรีมวิดีโอและกลุ่มเสียงได้ อินเทอร์เฟซใหม่ประกอบด้วย VideoEncoder
, VideoDecoder
, EncodedVideoChunk
, VideoFrame
และ VideoColorSpace
API นี้ไม่ได้ทำให้ Baseline New พร้อมใช้งานเนื่องจาก Firefox Android ยังไม่รองรับ แต่รองรับ Firefox Nightly สำหรับ Android
การค้นหาสไตล์ CSS สําหรับพร็อพเพอร์ตี้ที่กําหนดเอง
Safari 18 รองรับฟีเจอร์ใหม่ๆ หลายอย่าง รวมถึงการค้นหาสไตล์ CSS การค้นหาสไตล์เป็นวิธีสร้างสไตล์ที่ใช้ซ้ำได้ และนำไปใช้แบบเป็นกลุ่ม เช่น เมื่อคุณมีคอมโพเนนต์ที่นํากลับมาใช้ซ้ำได้ซึ่งมีหลายรูปแบบ
ดูข้อมูลเพิ่มเติมเกี่ยวกับการค้นหาสไตล์ CSS
การเปลี่ยนมุมมองเอกสารเดียวกัน
Safari 18 ยังรองรับการเปลี่ยนมุมมองเอกสารเดียวกันสำหรับ SPA ด้วย ซึ่งจะช่วยให้คุณสร้างการเปลี่ยนภาพระหว่างสถานะต่างๆ ของแอปได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนมุมมองเอกสารเดียวกัน
การเปิดตัวเบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น เบราว์เซอร์รุ่นเบต้าใหม่ ได้แก่ Firefox 131, Chrome 130 และ Safari 18.1 การเปิดตัวรุ่นเหล่านี้จะนำฟีเจอร์ที่ยอดเยี่ยมมากมายมาสู่แพลตฟอร์ม ดูรายละเอียดทั้งหมดได้ในบันทึกประจำรุ่น ต่อไปนี้เป็นไฮไลต์บางส่วน
Firefox 131 มีตัวช่วยตัวดำเนินการ JavaScript ใหม่ และคุกกี้ที่มีสถานะการแบ่งพาร์ติชันอิสระ (CHIPS) พร้อมใช้งานแล้ว
Chrome 130 รองรับ box-decoration-break: clone
ทั้งสำหรับการกระจาย Fragment แบบแทรกในบรรทัด (เลย์เอาต์แบบบรรทัด) และบล็อก Fragment (Fragment ที่สร้างขึ้นสำหรับการพิมพ์และมัลติคอล) นอกจากนี้ การรายงานข้อผิดพลาดใน IndexedDB ยังดีขึ้นด้วย และยังมีแอตทริบิวต์ connected
ใหม่สําหรับอินเทอร์เฟซ Web Serial SerialPort
Safari 18.1 เป็นรุ่นที่มีการแก้ไขข้อบกพร่องของฟีเจอร์ที่มีอยู่