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

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

Rachel Andrew

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

ในเดือนมีนาคม 2024 Firefox 124, Safari 17.4 และ Chrome 123 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะอธิบายฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มบนเว็บ

ปรับรูปแบบสีด้วย light-dark()

ฟังก์ชันสี light-dark() เปิดตัวใน Chrome 123 แล้ว ซึ่งช่วยให้ปรับรูปแบบสีให้เหมาะกับความต้องการของผู้ใช้ได้ง่ายขึ้น ในตัวอย่างนี้ color-scheme มีการตั้งค่าเป็น light dark ในวันที่ root คุณสมบัติที่กำหนดเองใช้ฟังก์ชันสี light-dark() เพื่อตั้งค่าสีที่จะสลับใช้ตามค่ากำหนดโหมดสว่างหรือมืดของผู้ใช้

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

ดูตัวอย่างและรายละเอียดเพิ่มเติมในสีที่ขึ้นอยู่กับ color-scheme ของ CSS ด้วย light-dark()

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

  • Chrome: 123
  • ขอบ: 123
  • Firefox: 120
  • Safari: 17.5

แหล่งที่มา

ควบคุมอินพุตได้ดียิ่งขึ้นด้วย field-sizing

นอกจากนี้ ใน Chrome 123 พร็อพเพอร์ตี้ field-sizing ยังเปิดใช้ช่องป้อนข้อความที่ขยายขนาดโดยอัตโนมัติ

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

  • Chrome: 123
  • ขอบ: 123
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

แหล่งที่มา

การใช้เครื่องหมายวรรคตอน CJK ด้วย text-spacing-trim

ใน Chrome 123 พร็อพเพอร์ตี้ text-spacing-trim จะใช้การแยกอักขระกับอักขระเครื่องหมายวรรคตอนของภาษาจีน ญี่ปุ่น และเกาหลี (CJK) เพื่อปรับระยะห่างที่มากเกินไป อ่านเพิ่มเติมในหัวข้อขอแนะนำฟีเจอร์ใหม่ 4 รายการสำหรับ CSS เวอร์ชันต่างประเทศ

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

  • Chrome: 123
  • Edge: 123
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

แหล่งที่มา

@scope กฎ at ของ CSS

Safari 17.4 มี @scope ซึ่งให้คุณเลือกองค์ประกอบในโครงสร้างย่อย DOM ที่เฉพาะเจาะจง การกำหนดเป้าหมายองค์ประกอบได้อย่างแม่นยำโดยไม่ต้องเขียนตัวเลือกที่เจาะจงมากเกินไปซึ่งลบล้างได้ยาก และโดยไม่เชื่อมโยงตัวเลือกกับโครงสร้าง DOM แน่นเกินไป

ดูข้อมูลเพิ่มเติมในหัวข้อจํากัดการเข้าถึงของตัวเลือกด้วย @scopeat-rule ของ CSS

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

  • Chrome: 118
  • Edge: 118
  • Firefox: อยู่หลังธง
  • Safari: 17.4

แหล่งที่มา

การปรับปรุงฟีเจอร์การแสดงภาพซ้อนภาพ

Chrome 123 มีฟีเจอร์ 2 อย่างที่ช่วยปรับปรุงประสบการณ์การแสดงภาพซ้อนภาพ รายการแรกคือpicture-in-picture โหมดการแสดงผล CSS สิทธิ์นี้ช่วยให้คุณเขียนกฎ CSS ที่เจาะจงซึ่งจะมีผลเฉพาะเมื่อ (ส่วนหนึ่งของ) เว็บแอปแสดงในโหมดการแสดงภาพซ้อนภาพ

ฟีเจอร์ที่ 2 ให้คุณใช้ opener.focus จากหน้าต่างการแสดงภาพซ้อนภาพในเอกสารเพื่อโฟกัสระดับระบบไปยังแท็บที่เป็นเจ้าของหน้าต่างการแสดงภาพซ้อนภาพในเอกสาร

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

การรองรับ align-content ในเลย์เอาต์บล็อกและตาราง

Chrome 123 และ Safari 17.4 รองรับ align-content ในเลย์เอาต์แบบบล็อกและตาราง อ่านข้อมูลเกี่ยวกับการเปลี่ยนแปลงการสนับสนุน align-content

Service Worker Static Routing API

Service Worker Static Routing API พร้อมใช้งานใน Chrome เวอร์ชัน 123 ขึ้นไป API นี้ช่วยให้คุณระบุวิธีที่ควรดึงข้อมูลเส้นทางทรัพยากรบางอย่างได้ ซึ่งหมายความว่าเบราว์เซอร์ไม่จําเป็นต้องเรียกใช้ Service Worker เพื่อดึงข้อมูลการตอบกลับจากแคชหรือจากเครือข่ายโดยตรง

ดูข้อมูลเพิ่มเติมได้ที่หัวข้อใช้ Service Worker Static Routing API เพื่อข้าม Service Worker สำหรับเส้นทางที่เฉพาะเจาะจง

API เฟรมของภาพเคลื่อนไหวแบบยาว

Chrome 123 ยังมี The Long Animation Frames API ซึ่งเป็นการอัปเดต Long Tasks API เพื่อให้เข้าใจการอัปเดตอินเทอร์เฟซผู้ใช้ (UI) ที่ช้าได้ดียิ่งขึ้น ซึ่งอาจมีประโยชน์ในการระบุเฟรมภาพเคลื่อนไหวที่ช้าซึ่งอาจส่งผลต่อเมตริก Interaction to Next Paint (INP) ของ Core Web Vitals ซึ่งวัดการตอบสนอง หรือเพื่อระบุ UI อื่นๆ ที่กระตุกซึ่งส่งผลต่อความลื่นไหล

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

  • Chrome: 123
  • Edge: 123
  • Firefox: ไม่รองรับ
  • Safari: ไม่รองรับ

แหล่งที่มา

พร็อพเพอร์ตี้ content-visibility

Firefox 124 รองรับพร็อพเพอร์ตี้ CSS content-visibility พร็อพเพอร์ตี้นี้ควบคุมว่าองค์ประกอบจะแสดงผลเนื้อหาหรือไม่ ซึ่งจะช่วยให้เบราว์เซอร์ไม่ต้องแสดงผลเนื้อหาจนกว่าจะจําเป็น

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

  • Chrome: 85
  • ขอบ: 85
  • Firefox: 125
  • Safari: 18.

แหล่งที่มา

การเพิ่มลงใน ArrayBuffer และการจัดกลุ่มอาร์เรย์

ใน Safari 17.4 ทาง JavaScript จะได้รับฟีเจอร์ใหม่บางอย่างที่รองรับพร็อพเพอร์ตี้ detached และเมธอด transfer() และ transferToFixedLength() ของ ArrayBuffer

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

  • Chrome: 114
  • Edge: 114
  • Firefox: 122
  • Safari: 17.4

แหล่งที่มา

Safari 17.4 ยังมีวิธีการจัดกลุ่มอาร์เรย์ Object.groupBy และ Map.groupBy ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดกลุ่มอาร์เรย์ได้ที่บทความJavaScript กำลังรับวิธีการจัดกลุ่มอาร์เรย์

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

  • Chrome: 117.
  • Edge: 117
  • Firefox: 119.
  • Safari: 17.4

แหล่งที่มา

ฟีเจอร์เหล่านี้ทำงานร่วมกันได้แล้ว จึงผสานรวมกับฟีเจอร์ "ฟีเจอร์พื้นฐานใหม่"

setHTMLUnsafe และ parseHTMLUnsafe

เมธอด setHTMLUnsafe และ parseHTMLUnsafe ที่มาพร้อมกับ Safari 17.4 ช่วยให้ใช้ Shadow DOM แบบประกาศได้จาก JavaScript นอกจากนี้ วิธีเหล่านี้ยังช่วยให้แยกวิเคราะห์ HTML เป็น DOM ได้ง่ายๆ เมื่อเทียบกับ innerHTML หรือ DOMParser

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

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

Firefox 125 กำลังจะเป็นรุ่นที่น่าตื่นเต้น ซึ่งรวมถึง align-content ในบล็อกต่างๆ ทำให้ฟีเจอร์นี้ทำงานร่วมกันได้ นอกจากนี้ Popover API ยังรวมอยู่ด้วยและเป็นส่วนหนึ่งของ "พร้อมใช้งานใหม่ในรุ่นพื้นฐาน" ระบบจะรองรับพร็อพเพอร์ตี้ transition-behavior ด้วย Popup และ transition-behavior เป็นส่วนหนึ่งของ Interop 2024

Chrome 124 มีเมธอด setHTMLUnsafe และ parseHTMLUnsafe เพื่ออนุญาตให้ใช้ Declarative Shadow DOM จาก JavaScript ซึ่งทำให้ฟีเจอร์เหล่านี้ทำงานร่วมกันได้ รวมถึง WebSocketStream API และแอตทริบิวต์ writingsuggestions