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

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

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

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

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

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

  • Chrome: 107
  • Edge: 107
  • Firefox: 66
  • Safari: 16

การเพิ่มลงใน 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

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