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

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

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

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

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

ดูข้อมูลเพิ่มเติมในการแนะนำ CSS Anchor Locationing API

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

  • 125
  • 125
  • x
  • x

แหล่งที่มา

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

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

ดูข้อมูลเพิ่มเติมใน ตอนนี้ฟังก์ชันการคำนวณมูลค่าแบบขั้นของ CSS อยู่ในเกณฑ์พื้นฐานปี 2024 แล้ว

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

  • 125
  • 125
  • 118
  • 15.4

แหล่งที่มา

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

นอกจากนี้ การรวม Baseline Newly พร้อมใช้งานคือฟังก์ชันสี CSS light-dark() ซึ่งอยู่ใน Safari 17.5

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

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

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

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

  • 123
  • 123
  • 120
  • 17.5

แหล่งที่มา

Screen Wake Lock API

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

ดูวิธีใช้ฟีเจอร์นี้ได้ในเปิดหน้าจอค้างไว้ด้วย Screen Wake Lock API

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

  • 84
  • 84
  • 126
  • 16.4

แหล่งที่มา

Compute Pressure API

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

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

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

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

  • 125
  • 125
  • x
  • x

แหล่งที่มา

กฎ @starting-style

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

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

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

  • 117
  • 117
  • x
  • 17.5

แหล่งที่มา

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

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

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

Firefox 127 มีวิธีการตั้งค่า JavaScript เพิ่มเติม ได้แก่ intersection(), union(), difference(), symmetricDifference(),isSubsetOf(), isSupersetOf() และ isDisjointFrom()