สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนพฤษภาคม 2024
เบราว์เซอร์รุ่นที่เสถียร
ในเดือนพฤษภาคม 2024 Firefox 126, Safari 17.5 และ Chrome 125 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ
การวางตำแหน่ง Anchor ของ CSS
Chrome 125 มีการกำหนดตำแหน่งจุดยึด CSS ซึ่งช่วยให้คุณเชื่อมโยงองค์ประกอบที่วางตำแหน่งแบบสัมบูรณ์กับองค์ประกอบอื่นๆ อย่างน้อย 1 รายการในหน้า (จุดยึด) ในลักษณะที่ประกาศได้โดยไม่ต้องใช้ JavaScript การวางตำแหน่งโฆษณา Anchor จะทำงานได้อย่างมีประสิทธิภาพเมื่อผู้ใช้เลื่อนโฆษณา Anchor ได้ กรณีการใช้งานที่พบบ่อยคือการกำหนดตำแหน่งของป๊อปอัป เช่น เคล็ดลับเครื่องมือ ข้างองค์ประกอบที่เรียกใช้ป๊อปอัป หรือเมนูแบบเลือกและรายการตัวเลือกป๊อปอัปของเมนู
ดูข้อมูลเพิ่มเติมในการเปิดตัว CSS Positioning Anchor API
ฟังก์ชันค่าแบบขั้นของ CSS ได้แก่ round()
, mod()
และ rem()
mod()
และ rem()
Chrome 125 ยังมีฟังก์ชันค่าแบบขั้นอีกด้วย ซึ่งหมายความว่าฟังก์ชันเหล่านี้พร้อมใช้งานในเบสไลน์แล้ว ฟังก์ชันค่าแบบขั้น round()
, mod()
และ rem()
จะเปลี่ยนค่าที่ระบุตาม "ค่าระยะห่าง" อื่น
ดูข้อมูลเพิ่มเติมในฟังก์ชันคณิตศาสตร์ค่าแบบขั้นของ CSS พร้อมใช้งานในเบย์ไลน์ 2024 แล้ว
ฟังก์ชัน light-dark()
ฟังก์ชันสี CSS light-dark()
ซึ่งอยู่ใน Safari 17.5 ก็ได้เข้าร่วมเวอร์ชันพื้นฐานที่พร้อมใช้งานใหม่ด้วย
light-dark()
เป็นฟังก์ชันที่รับอาร์กิวเมนต์ 2 รายการ โดยทั้ง 2 รายการต้องเป็น <color>
ระบบจะเลือกสีใดสีหนึ่งตามรูปแบบสีที่ใช้
- หากรูปแบบสีที่ใช้คือ
light
หรือไม่ทราบ ระบบจะแสดงผลค่าที่คำนวณแล้วของค่าแรก - หากรูปแบบสีที่ใช้คือ
dark
ระบบจะแสดงผลค่าที่คำนวณแล้วของสีที่ 2
อ่านเพิ่มเติมได้ที่สีที่ขึ้นอยู่กับรูปแบบสี CSS ด้วย light-dark()
Screen Wake Lock API
Screen Wake Lock API เป็นฟีเจอร์ใหม่ที่พร้อมใช้งานใน Firefox 126 ซึ่งเป็นส่วนหนึ่งของ Baseline Newly Available API นี้ช่วยป้องกันไม่ให้อุปกรณ์หรี่แสงและล็อกหน้าจอ
ดูวิธีใช้ฟีเจอร์นี้ในการทำให้อุปกรณ์ตื่นอยู่เสมอด้วย Screen Wake Lock API
Compute Pressure API
Compute Pressure API มีสถานะระดับสูงซึ่งแสดงภาระงานของ CPU ในระบบ ซึ่งช่วยให้การติดตั้งใช้งานใช้เมตริกฮาร์ดแวร์ที่เกี่ยวข้องที่เหมาะสมเพื่อให้ผู้ใช้ได้รับประโยชน์จากกำลังประมวลผลทั้งหมดที่มีตราบใดที่ระบบไม่อยู่ภายใต้ความเครียดที่จัดการไม่ได้
ฟีเจอร์นี้อยู่ใน Chrome 125 Intel เป็นผู้นำด้านการออกแบบและการใช้งาน API นี้ ซึ่งจะช่วยให้แอปการประชุมทางวิดีโอปรับสมดุลระหว่างฟีเจอร์และประสิทธิภาพได้อย่างยืดหยุ่น
อ่านเอกสารประกอบสำหรับ Compute Pressure API
กฎ @starting-style
Safari 17.5 มีกฎ @starting-style
กฎ at ของ CSS นี้ช่วยให้คุณใช้สไตล์ที่เบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบจะเปิดในหน้าเว็บ ตามที่จำเป็นสำหรับภาพเคลื่อนไหวของรายการ
กฎ @starting-style
เป็นหนึ่งในฟีเจอร์ที่กล่าวถึงใน4 ฟีเจอร์ใหม่ของ CSS สำหรับภาพเคลื่อนไหวที่ราบรื่นเมื่อเข้าและออก
เบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น เบต้าเวอร์ชันใหม่คือ Firefox 127 และ Chrome 126 การเปิดตัวเหล่านี้จะเพิ่มฟีเจอร์ที่ยอดเยี่ยมมากมายลงในแพลตฟอร์ม โปรดดูรายละเอียดทั้งหมดในหมายเหตุของรุ่น ต่อไปนี้คือไฮไลต์บางส่วน
Chrome 126 มีการเปลี่ยนมุมมองข้ามเอกสารสำหรับการไปยังส่วนต่างๆ ในต้นทางเดียวกัน ก่อนหน้านี้คุณต้องปรับโครงสร้างเว็บไซต์เป็น SPA อีกครั้งเพื่อใช้ View Transitions API แต่จะไม่เป็นเช่นนี้แล้ว ตอนนี้ระบบจะเปิดใช้การเปลี่ยนมุมมองโดยค่าเริ่มต้นสำหรับการนําทางจากต้นทางเดียวกัน คุณสร้างการเปลี่ยนมุมมองระหว่างเอกสาร 2 ฉบับที่มาจากแหล่งที่มาเดียวกันได้
Firefox 127 มีเมธอด Set ของ JavaScript เพิ่มเติม ได้แก่ intersection()
, union()
, difference()
,
symmetricDifference()
,isSubsetOf()
, isSupersetOf()
และ isDisjointFrom()