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

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

Rachel Andrew

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

ในเดือนกรกฎาคม 2023 Firefox 115 และ Chrome 115 เริ่มเสถียรแล้ว โพสต์นี้จะอธิบายความสำคัญของแพลตฟอร์มเว็บ

มีค่าหลายค่าสำหรับพร็อพเพอร์ตี้ display ของ CSS

Chrome 115 มีหลายค่าสำหรับพร็อพเพอร์ตี้ display ของ CSS ซึ่งหมายความว่า display: flex จะกลายเป็น display: block flex และ display: block กลายเป็น display: block flow ค่าเดี่ยวจะยังคงเป็นคีย์เวิร์ดเดิม ค่าเหล่านี้มีอยู่ในเครื่องมือหลัก 3 ชนิด

ภาพเคลื่อนไหวที่ใช้การเลื่อน

นอกจากนี้ใน Chrome 115 ยังมีส่วนขยาย ScrollTimeline และ ViewTimeline สำหรับข้อกำหนดจำเพาะของภาพเคลื่อนไหวบนเว็บด้วย การดำเนินการนี้จะเปิดใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนผ่าน CSS และ JavaScript

Privacy Sandbox API

API ความเกี่ยวข้องและการวัดผลของ Privacy Sandbox จัดส่งใน Chrome 115 ซึ่งรวมถึง Topics, Protected Audience, Attribution Reporting, Private Aggregation, พื้นที่เก็บข้อมูลที่ใช้ร่วมกัน และ Fenced Frames API

หากต้องการทำความเข้าใจเพิ่มเติมเกี่ยวกับ API เหล่านี้ โปรดดูการสาธิต Privacy Sandbox

พร็อพเพอร์ตี้ animation-composition

Firefox 115 รองรับพร็อพเพอร์ตี้ CSS animation-composition ทำให้ animation-composition รองรับเครื่องมือหลักทั้ง 3 อย่าง ดูข้อมูลเพิ่มเติมได้ในบทความระบุวิธีที่เอฟเฟกต์ภาพเคลื่อนไหวหลายรายการควรรวมกับการกำหนดองค์ประกอบภาพเคลื่อนไหว

เมธอดอาร์เรย์

การเข้าถึงความสามารถในการทำงานร่วมกันกับ Firefox 115 เป็นเมธอดสำหรับ Array และ TypedArray Array.toReversed(), Array.toSorted(), Array.toSpliced(), Array.with(), TypedArrays.toReversed(), TypedArrays.toSorted() และ TypedArrays.with() แสดงผลอาร์เรย์ใหม่ที่มีองค์ประกอบที่คัดลอกแบบตื้น

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

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

Firefox 116 รองรับ Audio Export Devices API ในทุกแพลตฟอร์มยกเว้น Android API นี้ช่วยให้เว็บแอปพลิเคชันเปลี่ยนเส้นทางเอาต์พุตเสียงไปยังชุดหูฟังบลูทูธ ลำโพงโทรศัพท์ หรืออุปกรณ์อื่นๆ ที่ได้รับอนุญาต โดยไม่ต้องใช้เบราว์เซอร์หรือค่าเริ่มต้นของระบบปฏิบัติการ

Chrome 116 รวมเส้นทางการเคลื่อนไหวของ CSS ที่ทำให้วัตถุที่เป็นกราฟิกเคลื่อนไหวไปตามเส้นทางที่นักพัฒนาแอประบุไว้ได้ ซึ่งทำให้มีการเปลี่ยนแปลงในรูปแบบใหม่ๆ ที่เป็นไปได้มากมาย เช่น การวางตำแหน่งโดยใช้พิกัดเชิงขั้ว (ด้วยฟังก์ชัน ray()) แทนที่จะเป็นพิกัดสี่เหลี่ยมผืนผ้ามาตรฐานที่ฟังก์ชัน translate() ใช้ หรือทำให้องค์ประกอบเคลื่อนไหวตามเส้นทางที่กำหนด ซึ่งทำให้สามารถกำหนดการเปลี่ยนเชิงพื้นที่ 2 มิติที่ซับซ้อนและสวยงามได้ง่ายขึ้น ระบุเส้นทางได้ดังนี้ circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray() และ url()

นอกจากนี้ใน Chrome 116 ยังมี Document Picture-in-Picture API เกี่ยวกับผลิตภัณฑ์ ซึ่งจะเปิดใช้หน้าต่างที่อยู่บนสุดตลอดเวลาซึ่งสร้างด้วย HTMLElements ที่กำหนดเองได้ ซึ่งเป็นการขยายจาก HTMLVideoElement API ที่มีอยู่ซึ่งอนุญาตให้ใส่ HTMLVideoElement ในหน้าต่าง Picture-in-Picture (PiP) ได้เท่านั้น

ส่วนหนึ่งของซีรีส์ใหม่สำหรับเว็บซีรีส์