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

สำรวจฟีเจอร์ที่น่าสนใจบางส่วนซึ่งมีอยู่ในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนมีนาคม 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);
}

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

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

  • 123
  • x
  • 120

แหล่งที่มา

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

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

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

  • 123
  • x
  • x
  • x

การ Kering สำหรับเครื่องหมายวรรคตอน CJK ที่มี text-spacing-trim

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

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

  • 123
  • x
  • x
  • x

กฎ CSS ของ @scope

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

ดูข้อมูลเพิ่มเติมในจำกัดการเข้าถึงของตัวเลือกด้วยกฎ @scope ของ CSS

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

  • 118
  • 118
  • x
  • 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

API การกำหนดเส้นทางแบบคงที่ของ Service Worker

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

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

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

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

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

  • 123
  • x
  • x
  • x

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

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

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

  • 85
  • 85
  • 124

แหล่งที่มา

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

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

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

  • 114
  • 114
  • 122
  • 17.4

แหล่งที่มา

Safari 17.4 ยังมีวิธีการจัดกลุ่มอาร์เรย์ Object.groupBy และ Map.groupBy หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดกลุ่มอาร์เรย์ โปรดอ่าน JavaScript ใช้วิธีการจัดกลุ่มอาร์เรย์

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

  • 117
  • 117
  • 119
  • 17.4

แหล่งที่มา

ฟีเจอร์เหล่านี้จะทำงานร่วมกันได้แล้ว ด้วยเหตุนี้จึงเข้าร่วม Baseline "พร้อมใช้งานใหม่"

setHTMLUnsafeและparseHTMLUnsafe

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

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

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

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

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