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

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

Rachel Andrew

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

ในเดือนมิถุนายน Chrome 103 และ Firefox 102 กลายเป็นเวอร์ชันเสถียร

เปลี่ยนรูปแบบสตรีมและสตรีมไบต์ที่อ่านได้

Firefox 102 รองรับ Transform Streams ซึ่งจะเปิดใช้การส่งผ่านข้อมูลจาก ReadableStream ไปยัง WritableStream โดยทำการเปลี่ยนรูปแบบข้อมูลในข้อมูลโค้ด เราดีใจที่ฟีเจอร์นี้พร้อมใช้งานในเครื่องมือทั้ง 3 รายการแล้ว ซึ่งถือเป็นโอกาสที่ดีในการดูข้อมูลเกี่ยวกับสตรีม

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

  • Chrome: 67
  • Edge: 79
  • Firefox: 102
  • Safari: 14.1

แหล่งที่มา

นอกจากนี้ Firefox 102 ยังรองรับสตรีมไบต์ที่อ่านได้ ซึ่งช่วยให้โปรแกรมอ่าน BYOB (นำบัฟเฟอร์ของคุณเองมา) ทำงานได้โดยใช้อินเทอร์เฟซ ReadableStreamBYOBReader ซึ่งสามารถใช้สตรีมข้อมูลที่นักพัฒนาแอประบุ

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

  • Chrome: 89
  • Edge: 89
  • Firefox: 102
  • Safari: ไม่รองรับ

แหล่งที่มา

เข้าถึงแบบอักษรที่ติดตั้งในเครื่อง

Chrome 103 มี Local Font Access API ซึ่งอนุญาตให้เข้าถึงแบบอักษรที่ติดตั้งในเครื่องของผู้ใช้ หลังจากขอสิทธิ์เข้าถึงแบบอักษรที่ติดตั้งในอุปกรณ์แล้ว ให้เรียกใช้ window.queryLocalFonts() เพื่อรับอาร์เรย์ของแบบอักษรที่ติดตั้ง

const pickedFonts = await window.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

ฟีเจอร์สื่อ update

Firefox 102 มีฟีเจอร์สื่อ update ข้อมูลนี้ใช้เพื่อสอบถามว่าอุปกรณ์เอาต์พุตสามารถแก้ไขลักษณะที่ปรากฏของเนื้อหาได้หรือไม่เมื่อผ่านการแสดงผลแล้ว

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

  • Chrome: 113
  • Edge: 113
  • Firefox: 102
  • Safari: 17.

แหล่งที่มา

รหัสสถานะ HTTP ใหม่ - 103 คำแนะนำเบื้องต้น

Chrome 103 เพิ่มรหัสสถานะใหม่ HTTP 103 Early Hints หากเซิร์ฟเวอร์หรือ CDN ทราบว่าต้องใช้ชุดทรัพยากรย่อยชุดหนึ่งเพื่อโหลดหน้าเว็บ ก็สามารถแนะนำให้เบราว์เซอร์เชื่อมต่อกับต้นทางล่วงหน้า หรือแม้แต่โหลดทรัพยากรล่วงหน้าเมื่อหน้าเว็บที่ต้องใช้ทรัพยากรเหล่านั้นเข้ามา ซึ่งต้องมีการอัปเดตเซิร์ฟเวอร์หรือ CDN เพื่อใช้ประโยชน์จากฟีเจอร์นี้ โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำล่วงหน้า

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

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

เบต้าเวอร์ชันใหม่ในเดือนเมษายน ได้แก่ Chrome 104, Firefox 103 และ Safari 16

ไวยากรณ์ใหม่สําหรับการค้นหาสื่อตามช่วงขนาด

Chrome 104 มีไวยากรณ์ใหม่สําหรับ Media Query ช่วงจากข้อกําหนดของ Media Query ระดับ 4 เช่น ข้อความค้นหาสื่อที่เขียนไว้ก่อนหน้านี้มีลักษณะดังนี้

@media (min-width: 400px) { … }

ตอนนี้เขียนได้ดังนี้

@media (width >= 400px) { … }

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

  • Chrome: 104
  • Edge: 104
  • Firefox: 102
  • Safari: 16.4

แหล่งที่มา

Region Capture API

Chrome 104 บนเดสก์ท็อปยังมี Region Capture API ด้วย ซึ่งจะช่วยให้คุณครอบตัดและนำเนื้อหาออกจากวิดีโอที่บันทึกไว้ก่อนที่จะแชร์ได้

Safari 16 เพิ่มฟีเจอร์หลักๆ หลายอย่างลงในเบราว์เซอร์

Safari 16 ดูเหมือนจะเป็นอีกรุ่นที่น่าตื่นเต้นจากทีม Safari เวอร์ชันนี้เพิ่มฟีเจอร์หลายอย่างที่รวมอยู่ใน Interop 2022 เราดีใจที่ได้เห็นว่ามีการเปิดตัวฟีเจอร์มากมายในช่วงกลางปี เราจะไฮไลต์ฟีเจอร์บางส่วนที่เราชื่นชอบไว้ให้ที่นี่ แต่โปรดดูข้อมูลเพิ่มเติมในหมายเหตุประจำรุ่น

เรายินดีอย่างยิ่งที่ได้เห็นว่าการค้นหาขนาดรองรับการค้นหาคอนเทนเนอร์ ซึ่งเป็นฟีเจอร์ที่เปิดใช้ Flag ใน Chrome อยู่ด้วยเช่นกัน เช่นเดียวกับนักพัฒนาซอฟต์แวร์จำนวนมาก

นอกจากนี้ Safari 16 ยังรองรับค่า subgrid สำหรับ grid-template-columns และ grid-template-rows ด้วย ฟีเจอร์นี้พร้อมใช้งานใน Firefox แล้ว และอยู่ระหว่างการพัฒนาใน Chrome ซึ่งจะช่วยให้กริดที่ฝังอยู่รับค่าขนาดแทร็กกริดได้

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

  • Chrome: 117
  • Edge: 117
  • Firefox: 71.
  • Safari: 16

แหล่งที่มา

นอกจากนี้ เลย์เอาต์ตารางกริดยังช่วยให้คุณทำให้แทร็กตารางกริดเคลื่อนไหวได้ด้วย

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

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

รวมถึงมีวิธีการ showPicker() ซึ่งเปิดใช้วิธี Canonical ในการแสดงเครื่องมือเลือกเบราว์เซอร์สำหรับวันที่ เวลา สี และไฟล์ ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในแสดงเครื่องมือเลือกของเบราว์เซอร์สำหรับวันที่ เวลา สี และไฟล์

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

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 101.
  • Safari: 16

แหล่งที่มา

นอกจากนี้ เรายังแก้ไขปัญหาการช่วยเหลือพิเศษสำหรับ display: contents อีกด้วย ซึ่งทำให้ฟีเจอร์ที่มีประโยชน์นี้ใช้งานได้อย่างปลอดภัยโดยไม่มีความเสี่ยงที่ระบบจะนำองค์ประกอบออกจากต้นไม้การช่วยเหลือพิเศษ

ฟีเจอร์เบต้าเหล่านี้จะพร้อมใช้งานในเบราว์เซอร์เวอร์ชันเสถียรในเร็วๆ นี้

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