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

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

ในเดือนพฤษภาคม 2024 Firefox 126, Safari 17.5 และ Chrome 125 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ

การวางตำแหน่ง Anchor ของ CSS

Chrome 125 มีการกำหนดตำแหน่งจุดยึด CSS ซึ่งช่วยให้คุณเชื่อมโยงองค์ประกอบที่วางตำแหน่งแบบสัมบูรณ์กับองค์ประกอบอื่นๆ อย่างน้อย 1 รายการในหน้า (จุดยึด) ในลักษณะที่ประกาศได้โดยไม่ต้องใช้ JavaScript การวางตำแหน่งโฆษณา Anchor จะทำงานได้อย่างมีประสิทธิภาพเมื่อผู้ใช้เลื่อนโฆษณา Anchor ได้ กรณีการใช้งานที่พบบ่อยคือการกำหนดตำแหน่งของป๊อปอัป เช่น เคล็ดลับเครื่องมือ ข้างองค์ประกอบที่เรียกใช้ป๊อปอัป หรือเมนูแบบเลือกและรายการตัวเลือกป๊อปอัปของเมนู

ดูข้อมูลเพิ่มเติมในการเปิดตัว CSS Positioning Anchor API

Browser Support

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

Source

ฟังก์ชันค่าแบบขั้นของ CSS ได้แก่ round(), mod() และ rem()

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

ดูข้อมูลเพิ่มเติมในฟังก์ชันคณิตศาสตร์ค่าแบบขั้นของ CSS พร้อมใช้งานในเบย์ไลน์ 2024 แล้ว

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

ฟังก์ชัน light-dark()

ฟังก์ชันสี CSS light-dark() ซึ่งอยู่ใน Safari 17.5 ก็ได้เข้าร่วมเวอร์ชันพื้นฐานที่พร้อมใช้งานใหม่ด้วย

light-dark() เป็นฟังก์ชันที่รับอาร์กิวเมนต์ 2 รายการ โดยทั้ง 2 รายการต้องเป็น <color> ระบบจะเลือกสีใดสีหนึ่งตามรูปแบบสีที่ใช้

  • หากรูปแบบสีที่ใช้คือ light หรือไม่ทราบ ระบบจะแสดงผลค่าที่คำนวณแล้วของค่าแรก
  • หากรูปแบบสีที่ใช้คือ dark ระบบจะแสดงผลค่าที่คำนวณแล้วของสีที่ 2

อ่านเพิ่มเติมได้ที่สีที่ขึ้นอยู่กับรูปแบบสี CSS ด้วย light-dark()

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Screen Wake Lock API

Screen Wake Lock API เป็นฟีเจอร์ใหม่ที่พร้อมใช้งานใน Firefox 126 ซึ่งเป็นส่วนหนึ่งของ Baseline Newly Available API นี้ช่วยป้องกันไม่ให้อุปกรณ์หรี่แสงและล็อกหน้าจอ

ดูวิธีใช้ฟีเจอร์นี้ในการทำให้อุปกรณ์ตื่นอยู่เสมอด้วย Screen Wake Lock API

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Compute Pressure API

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

ฟีเจอร์นี้อยู่ใน Chrome 125 Intel เป็นผู้นำด้านการออกแบบและการใช้งาน API นี้ ซึ่งจะช่วยให้แอปการประชุมทางวิดีโอปรับสมดุลระหว่างฟีเจอร์และประสิทธิภาพได้อย่างยืดหยุ่น

อ่านเอกสารประกอบสำหรับ Compute Pressure API

Browser Support

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

Source

กฎ @starting-style

Safari 17.5 มีกฎ @starting-style กฎ at ของ CSS นี้ช่วยให้คุณใช้สไตล์ที่เบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบจะเปิดในหน้าเว็บ ตามที่จำเป็นสำหรับภาพเคลื่อนไหวของรายการ

กฎ @starting-style เป็นหนึ่งในฟีเจอร์ที่กล่าวถึงใน4 ฟีเจอร์ใหม่ของ CSS สำหรับภาพเคลื่อนไหวที่ราบรื่นเมื่อเข้าและออก

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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

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

Chrome 126 มีการเปลี่ยนมุมมองข้ามเอกสารสำหรับการไปยังส่วนต่างๆ ในต้นทางเดียวกัน ก่อนหน้านี้คุณต้องปรับโครงสร้างเว็บไซต์เป็น SPA อีกครั้งเพื่อใช้ View Transitions API แต่จะไม่เป็นเช่นนี้แล้ว ตอนนี้ระบบจะเปิดใช้การเปลี่ยนมุมมองโดยค่าเริ่มต้นสำหรับการนําทางจากต้นทางเดียวกัน คุณสร้างการเปลี่ยนมุมมองระหว่างเอกสาร 2 ฉบับที่มาจากแหล่งที่มาเดียวกันได้

Firefox 127 มีเมธอด Set ของ JavaScript เพิ่มเติม ได้แก่ intersection(), union(), difference(), symmetricDifference(),isSubsetOf(), isSupersetOf() และ isDisjointFrom()