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

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

Rachel Andrew

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

ในเดือนเมษายน 2024 Firefox 125 และ Chrome 124 มีความเสถียร โพสต์นี้จะอธิบายฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ

4 ฟีเจอร์ใหม่พร้อมให้ใช้งานใน Baseline แล้ว

Firefox 125 ได้เพิ่มฟีเจอร์ใหม่ 4 รายการไปยัง Baseline Newly Popover API, Intl.Segmenter, align-content สำหรับเลย์เอาต์บล็อก รวมถึงค่า content-box และ stroke-box สำหรับ transform-box

Popover API

Popover API ช่วยให้คุณสร้างป๊อปอัปที่ไม่ใช่แบบโมดัลได้หลายประเภท เช่น เคล็ดลับเครื่องมือ เมนู ป๊อปอัปข้อความโทสต์ที่กำหนดเอง และอื่นๆ อีกมากมาย Popover มีฟังก์ชันในตัวมากมายที่ก่อนหน้านี้คุณต้องเขียน JavaScript ดูข้อมูลเพิ่มเติมใน Popover API เข้าสู่ Baseline

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

  • 114
  • 114
  • 125
  • 17

แหล่งที่มา

Intl.Segmenter

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

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

  • 87
  • 87
  • 125
  • 14.1

แหล่งที่มา

align-content สำหรับเลย์เอาต์แบบบล็อก

ตอนนี้เครื่องมือหลักทั้งหมดรองรับพร็อพเพอร์ตี้ align-content สำหรับเลย์เอาต์การบล็อกแล้ว ซึ่งหมายความว่าคุณสามารถปรับแนวบล็อกทิศทางโดยไม่ต้องสร้างเลย์เอาต์ Flex หรือตารางกริดในระดับบนสุด ดูตัวอย่างใน ขณะนี้พร็อพเพอร์ตี้ปรับแนวเนื้อหาสำหรับเลย์เอาต์บล็อกเป็นส่วนหนึ่งของเกณฑ์พื้นฐานแล้ว

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

  • 123
  • 123
  • 125
  • 17.4

CSS transform-box

สุดท้าย ใน Firefox 125 คือค่าของ content-box และ stroke-box สำหรับพร็อพเพอร์ตี้ transform-box ค่า content-box ใช้ช่องเนื้อหาและ stroke-box กรอบล้อมรอบเส้นโครงร่างที่มีรูปร่างของ SVG

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

  • 118
  • 118
  • 125
  • 13.1

WebSocketStream API

WebSocketStream API ผสานรวมสตรีม WHATWG กับ WebSocket API และพร้อมใช้งานใน Chrome 124 ดูข้อมูลเพิ่มเติมใน WebSocketStream: การผสานรวมสตรีมกับ WebSocket API

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

  • 124
  • 124
  • x
  • x

setHTMLUnsafeและparseHTMLUnsafe

Chrome 124 ยังมีเมธอด setHTMLUnsafe และ parseHTMLUnsafe ซึ่งช่วยให้คุณใช้ Declarative Shadow DOM จาก JavaScript ได้ วิธีการเหล่านี้ยังช่วยให้แยกวิเคราะห์ HTML ไปยัง DOM ได้ง่ายขึ้น เมื่อเทียบกับ innerHTML หรือ DOMParser

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

  • 124
  • 124
  • 123
  • 17.4

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

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

Safari 17.5 มีฟังก์ชันสี light-dark() ซึ่งจะกลายเป็น Baseline Newly ที่ใช้ได้เมื่อ 17.5 เสถียร

นอกจากนี้ ฟังก์ชันพื้นฐาน "พร้อมใช้งานใหม่" เพิ่มเติมคือฟังก์ชันค่าในขั้นตอนของ CSS Chrome 125 ประกอบด้วย round(), mod() และ rem()

Chrome 125 ยังมี Compute Pressure API และการวางตำแหน่ง Anchor ของ CSS ด้วย

Firefox 126 มี Screen Wake Lock API ซึ่งเป็นอีกฟีเจอร์หนึ่งที่พร้อมให้บริการโดย Baseline ใหม่