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

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

Rachel Andrew

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

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

แอตทริบิวต์ HTML ร่วม

Firefox 111 เพิ่มการรองรับแอตทริบิวต์ HTML ส่วนกลางที่มีประโยชน์ 2 รายการ แอตทริบิวต์ autocapitalize จะควบคุมว่าจะให้ข้อความเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติหรือไม่เมื่อผู้ใช้พิมพ์บนแป้นพิมพ์เสมือน

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

  • 43
  • 79
  • 111
  • x

แหล่งที่มา

แอตทริบิวต์ translate ระบุว่าควรแปลองค์ประกอบหรือไม่เมื่อแปลหน้าเว็บ

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

  • 19
  • 79
  • 111
  • 6

แหล่งที่มา

ระบบไฟล์ส่วนตัวต้นทาง (OPFS)

Firefox เพิ่มการรองรับ Origin Private File System (OPFS) เมื่อใช้ File System Access API ดูข้อมูลเพิ่มเติมเกี่ยวกับ OPFS

View Transitions API

Chrome 111 เพิ่ม View Transitions API ที่ช่วยให้การสร้างการเปลี่ยนผ่านที่ราบรื่นในแอปหน้าเดียว (SPA) ทำได้ง่ายขึ้นด้วยการจับภาพหน้าจอมุมมองและช่วยให้ DOM เปลี่ยนแปลงโดยไม่มีการทับซ้อนระหว่างสถานะต่างๆ

ดูข้อมูลเพิ่มเติมได้ในโพสต์การเปิดตัวการเปลี่ยนมุมมอง SPA จะพร้อมให้ใช้งานใน Chrome 111

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

  • 111
  • 111
  • x
  • 18

แหล่งที่มา

พื้นที่สีและฟังก์ชัน CSS ใหม่

Chrome 111 ยังรวมเป็นวิธีใหม่ในการใช้สีในเว็บด้วย ตอนนี้ Chrome รองรับพื้นที่สีที่เข้าถึงสีนอกขอบเขต RGB รวมถึงฟังก์ชัน color() และ color-mix() ดูข้อมูลเพิ่มเติมในคู่มือการใช้สี CSS แบบความละเอียดสูงและบล็อกโพสต์เกี่ยวกับ color-mix()

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

  • 111
  • 111
  • 113
  • 16.2

แหล่งที่มา

การเปิดตัว Chrome ยังมีเครื่องมือสำหรับนักพัฒนาเว็บใหม่เพื่อช่วยให้คุณทำงานกับฟังก์ชันสีใหม่นี้ได้ด้วย

ควบคุมการเลือก :nth-child() ได้มากขึ้น

Chrome 111 เพิ่มความสามารถในการส่งรายการตัวเลือกไปยัง :nth-child() และ nth-last-child() ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ และดูตัวอย่างในโพสต์การควบคุมการเลือก :nth-child() ได้มากขึ้นด้วยไวยากรณ์ S

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

  • 111
  • 111
  • 113
  • 9

การรองรับสไลด์ก่อนหน้าและสไลด์ถัดไปใน Media Session API

สุดท้ายในรายการเพิ่มเติมของ Chrome 111 คือการทำงานของสไลด์สำหรับ API เซสชันสื่อ - "previousslide" และ "nextslide"

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

  • 111
  • 111
  • x
  • x

การสนับสนุนระดับ Pseudo ใน Safari

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

มี CSS Pseudo-class เพิ่มเติมมากมายที่พร้อมรองรับในรุ่นนี้: :user-invalid, :user-valid, :dir(), :modal และ :fullscreen

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

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

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

  • 104
  • 104
  • 102
  • 16.4

แหล่งที่มา

พร็อพเพอร์ตี้และค่า CSS

Safari 16.4 เพิ่มการรองรับ @property ซึ่งเป็นการเปิดใช้การลงทะเบียนพร็อพเพอร์ตี้ CSS ที่กำหนดเองในสไตล์ชีตโดยตรง ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งนี้ได้ใน @property: การให้พลังพิเศษแก่ตัวแปร CSS

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

  • 85
  • 85
  • 128
  • 16.4

แหล่งที่มา

การรองรับ CSS API

และยังมีฟีเจอร์ดีๆ สำหรับ CSS ที่มีมาใหม่เรื่อยๆ พร้อมการรองรับ OM ที่พิมพ์ของ CSS API นี้จะแสดงค่า CSS เป็นออบเจ็กต์ JavaScript ที่พิมพ์แทนที่จะเป็นสตริง ซึ่งจะทำให้การทำงานกับ CSS จาก JavaScript ง่ายและมีประสิทธิภาพมากกว่าเมธอดที่มีอยู่

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

  • 66
  • 79
  • x
  • 16.4

แหล่งที่มา

นอกจากนี้ยังมีการรองรับสไตล์ชีตที่สร้างได้ด้วย CSSStyleSheet() การดำเนินการนี้จะเปิดใช้การแชร์สไตล์ชีตระหว่างเอกสารและซับทรี DOM เงาของเอกสาร เมื่อใช้ Safari เวอร์ชันนี้ สไตล์ชีตที่สร้างได้จะได้รับการสนับสนุนในเครื่องมือค้นหาทั้ง 3 รายการ

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

  • 73
  • 79
  • 101
  • 16.4

แหล่งที่มา

พุชจากเว็บและ Badging API

ตอนนี้ Safari รองรับ Web Push รวมถึง Badging API ซึ่งเป็นข่าวดีสําหรับนักพัฒนาแอป โดยเฉพาะอย่างยิ่ง เวอร์ชันนี้หมายความว่าระบบรองรับข้อความ Push ในเครื่องมือหลักทั้งหมด

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

  • 42
  • 17
  • 44
  • 16

แหล่งที่มา

นำเข้าแผนที่

นอกจากนี้ อีกฟีเจอร์หนึ่งที่ทำให้ฟีเจอร์มีสถานะที่ทำงานร่วมกันได้คือการเพิ่มนำเข้าแผนที่ JavaScript ซึ่งทำให้การนำเข้าโมดูล ES ง่ายขึ้นมาก

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

  • 89
  • 89
  • 108
  • 16.4

การเปิดตัวเบราว์เซอร์รุ่นเบต้า

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

Firefox 112 เพิ่มการรองรับแอตทริบิวต์ inert ซึ่งจะทำให้แอตทริบิวต์ที่เป็นประโยชน์นี้พร้อมใช้งานในเครื่องมือค้นหาทั้งหมด ดูข้อมูลเพิ่มเติมเกี่ยวกับ Inert ได้ในขอแนะนํา Inert Firefox จะเปิดใช้การรองรับฟังก์ชันการค่อยๆ เปลี่ยนของ linear() ด้วย

ทั้ง Chrome 112 และ Safari 16.5 ต่างเพิ่มการรองรับการใช้ Nest Nesting ใน CSS ซึ่งเป็นฟีเจอร์ที่นักพัฒนาซอฟต์แวร์จำนวนมากคาดหวังไว้อย่างมาก

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

หากคุณใช้โหมดไม่มีส่วนหัวของ Chrome เช่น โหมด Puppeteer โหมด 112 จะมีโหมดไม่มีส่วนหัวใหม่ทั้งหมด ดูข้อมูลเกี่ยวกับโหมดนี้ในโหมดไม่มีส่วนหัวของ Chrome จะได้รับการอัปเกรด

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