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

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

Rachel Andrew

เบราว์เซอร์เวอร์ชันเสถียร

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

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

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

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

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

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

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

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

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

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

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

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

Screen Wake Lock API

ใน Firefox 126 คือ Screen Wake Lock API ซึ่งเป็นอีกฟีเจอร์หนึ่งที่ขณะนี้เป็นส่วนหนึ่งของ Baseline Newly Ready 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 กฎหลักของ CSS นี้ช่วยให้คุณใช้รูปแบบที่เบราว์เซอร์ค้นหาได้ก่อนที่องค์ประกอบจะเปิดในหน้าเว็บตามที่จำเป็นสำหรับภาพเคลื่อนไหวที่ป้อน

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

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

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

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

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