หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

Rachel Andrew

เบราว์เซอร์รุ่นที่เสถียร

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

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

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

วางเมาส์เหนือรูปโปรไฟล์เพื่อดูภาพเคลื่อนไหว ตัวอย่างนี้มาจากบทความเลย์เอาต์ตารางกริดภาพเคลื่อนไหวของ CSS ซึ่งหาข้อมูลเพิ่มเติมได้

การรองรับเบราว์เซอร์

การเพิ่มลงใน `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 คุณสามารถอ่านข้อมูลเพิ่มเติมได้ในบทความพบกับ Web Push การแสดงผลในหน้าเว็บ Push ใน Safari หมายความว่าตอนนี้ Web Push พร้อมใช้งานในเครื่องมือหลักทั้ง 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 ซึ่งทำให้ Firefox รองรับเทคโนโลยีแบบอักษรนี้ร่วมกับ Chrome นอกจากนี้ ในแบบอักษร Chrome 108 ยังเพิ่มการรองรับฟังก์ชัน font-tech() และ font-format() เพื่อแสดงการค้นหาด้วย @supports

นอกจากนี้ Firefox ยังรองรับ contain-intrinsic-size ด้วย ซึ่งทำให้เป็นเบราว์เซอร์ที่ 2 ที่รองรับฟีเจอร์นี้ต่อจาก Chrome

Safari 16.2 เบต้ามีการแก้ไข CSS จำนวนมาก รวมถึงการปรับขนาดและการเลื่อนแบบ Snap

เป็นส่วนหนึ่งของชุดวิดีโอ "เพิ่งเคยใช้เว็บ"