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

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

Rachel Andrew

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

ในเดือนตุลาคม Firefox 106, Chrome 107 และ Safari 16.1 มีความเสถียรแล้ว เรามาดูความหมายของแพลตฟอร์มเว็บนี้กัน

ภาพเคลื่อนไหวของแทร็กตารางกริด

ด้วยความช่วยเหลือจากผู้มีส่วนร่วมของเราที่ Microsoft ทำให้ Chrome สามารถประมาณค่า grid-template-columns และ grid-template-rows ได้แล้วในตอนนี้ ซึ่งหมายความว่าเลย์เอาต์แบบตารางกริดสามารถเปลี่ยนไปมาระหว่างสถานะต่างๆ ได้อย่างราบรื่นแทนการสแนปที่จุดครึ่งทางของภาพเคลื่อนไหวหรือการเปลี่ยน

การเพิ่มลงใน getDisplayMedia()

นอกจากนี้ ใน Chrome ยังมีส่วนเพิ่มเติมบางอย่างใน getDisplayMedia() ที่มีวัตถุประสงค์เพื่อป้องกันไม่ให้การแชร์มากเกินไปโดยไม่ตั้งใจเมื่อแชร์หน้าจอ

• ตัวเลือก displaySurface สามารถระบุได้ว่าเว็บแอปต้องการนำเสนอประเภทพื้นผิวจอแสดงผลที่เฉพาะเจาะจง (แท็บ หน้าต่าง หรือหน้าจอ)
• ตัวเลือก surfaceSwitching จะระบุว่า Chrome ควรอนุญาตให้ผู้ใช้สลับระหว่างแท็บที่แชร์แบบไดนามิกหรือไม่
• ใช้ตัวเลือก selfBrowserSurface เพื่อป้องกันไม่ให้ผู้ใช้แชร์แท็บปัจจุบันได้ ซึ่งจะช่วยหลีกเลี่ยงไม่ให้เกิดผลกระทบ "กระจกเงา"
• ตัวเลือก systemAudio จะช่วยให้มั่นใจว่า Chrome จะมีเฉพาะการบันทึกเสียงที่เกี่ยวข้องให้กับผู้ใช้เท่านั้น

Safari 16.1 ยังรองรับ getDisplayMedia ด้วย ซึ่งจะช่วยเพิ่มการรองรับการจับภาพหน้าต่าง Safari ที่เฉพาะเจาะจง

การทดสอบการรองรับเทคโนโลยีแบบอักษรและฟีเจอร์จาก CSS

Firefox ได้เพิ่มฟังก์ชัน font-tech() และ font-format() เพื่อแสดงข้อความค้นหาด้วย @supports ตัวอย่างต่อไปนี้จะทดสอบการรองรับแบบอักษร COLRv1

@supports font-tech(color-COLRv1) {

}

ดูตัวอย่างเพิ่มเติมเกี่ยวกับ MDN ได้

เลื่อนไปยังส่วนข้อความ

Safari 16.1 รองรับการเลื่อนไปยังส่วนข้อความ ซึ่งเพิ่มการสนับสนุนสำหรับการนำทางไปยัง URL ที่มีส่วนย่อยข้อความที่ระบุ

รองรับ AVIF

Safari 16 รองรับรูปภาพ AVIF แบบนิ่ง ขณะที่ Safari 16.1 รองรับรูปภาพ AVIF ที่เคลื่อนไหวได้ใน macOS Ventura, iOS 16 และ iPadOS 16

พุชจากเว็บสำหรับ Safari

Safari 16.1 รองรับ Web Push บน Safari ใน macOS Ventura ส่วนนี้จะใช้ Push API และ Notifications API คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบทความ Meet Web Push การเข้าสู่ Web Push ใน Safari หมายความว่าขณะนี้พร้อมให้บริการในเครื่องมือหลักๆ ทั้ง 3 อย่างแล้ว

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

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

Chrome 108 รองรับค่า avoid ของคุณสมบัติการกระจายตัวของ CSS break-before, break-after และ break-inside เมื่อพิมพ์ ค่านี้จะบอกเบราว์เซอร์เพื่อหลีกเลี่ยงการหยุดทำงานก่อน หลัง หรือภายในองค์ประกอบที่ใช้องค์ประกอบนั้น ตัวอย่างเช่น CSS ต่อไปนี้จะทำให้ไม่มีตัวเลขที่เสียในตัวแบ่งหน้า

figure {
    break-inside: avoid;
}

Chrome 108 เริ่มเปิดตัวการเปลี่ยนแปลงการทำงานของส่วนเกินในองค์ประกอบที่ถูกแทนที่ ซึ่งอาจทำให้เกิดการเปลี่ยนแปลงด้านภาพในบางสถานการณ์ อ่านบทความการเปลี่ยนแปลงที่มีต่อองค์ประกอบที่ถูกแทนที่ใน CSS เพื่อดูรายละเอียดเพิ่มเติมและวิธีแก้ไขปัญหาที่พบ

มีการเปลี่ยนแปลงวิธีการทำงานของวิวพอร์ตของเลย์เอาต์ใน Chrome บน Android เมื่อแป้นพิมพ์บนหน้าจอแสดง โปรดอ่านหัวข้อเตรียมพร้อมสำหรับการเปลี่ยนแปลงลักษณะการทำงานของการปรับขนาดวิวพอร์ตที่กำลังจะเกิดขึ้นกับ Chrome ใน Android เพื่อดูข้อมูลเพิ่มเติมและดูวิธีเตรียมพร้อมสำหรับการจัดส่งนี้ให้เสถียรในเดือนหน้า

นอกจากนี้ใน Chrome ยังมีหน่วยวิวพอร์ตของ CSS ใหม่อีกด้วย ซึ่งประกอบด้วยขนาดเล็ก (svw, svh, svi, svb, svmin, svmax), ขนาดใหญ่ (lvw, lvh, lvi, lvb, lvmin, lvmax), ไดนามิก (dvw, dvh, dvi, dvb, dvmin, dvmax) และตรรกะ (vi) vb) หน่วยเหล่านี้มีการติดตั้งใช้งานใน Firefox และ Safari แล้ว

Firefox 107 เปิดใช้การสนับสนุนแบบอักษร COLRv1 และรวมเข้ากับ Chrome เพื่อรองรับเทคโนโลยีแบบอักษรนี้ นอกจากนี้ สำหรับแบบอักษร Chrome 108 ยังเพิ่มการสนับสนุนสำหรับฟังก์ชัน font-tech() และ font-format() เพื่อแสดงข้อความค้นหาด้วย @supports

นอกจากนี้ Firefox ยังเพิ่มการรองรับ contain-intrinsic-size โดยร่วมกับ Chrome เพื่อสร้างเบราว์เซอร์ 2 ชนิดที่รองรับฟีเจอร์นี้

Safari 16.2 รุ่นเบต้ามาพร้อมกับการแก้ไข CSS มากมาย ซึ่งรวมถึงการปรับขนาดและการสแนปการเลื่อน

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