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

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

Rachel Andrew

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

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

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

Firefox 111 เพิ่มการสนับสนุนสำหรับแอตทริบิวต์ HTML ร่วม 2-3 ประเภทที่เป็นประโยชน์ แอตทริบิวต์ 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
  • x

แหล่งที่มา

พื้นที่สีและฟังก์ชันใหม่ของ 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 เพิ่มเติมมากมายที่รองรับในรุ่นนี้: :user-invalid, :user-valid, :dir(), :modal และ :fullscreen

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

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

การสนับสนุนเบราว์เซอร์

  • 104
  • 104
  • 102
  • 16.4

แหล่งที่มา

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

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

การสนับสนุนเบราว์เซอร์

  • 85
  • 85
  • 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

แหล่งที่มา

Web Push และ API การติดป้าย

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

การสนับสนุนเบราว์เซอร์

  • 42
  • 17
  • 44
  • 16

แหล่งที่มา

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

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

การสนับสนุนเบราว์เซอร์

  • 89
  • 89
  • 108
  • 16.4

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

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

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

Chrome 112 และ Safari 16.5 ต่างเพิ่มการรองรับการซ้อน CSS ซึ่งเป็นฟีเจอร์ที่นักพัฒนาซอฟต์แวร์จำนวนมากตั้งตารอ

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

หากคุณใช้โหมดไม่มีส่วนหัวของ Chrome เช่น ร่วมกับ Puppeteer 112 ก็จะนำโหมด "ไม่มีส่วนหัว" แบบใหม่มาใช้ ดูข้อมูลเพิ่มเติมได้ในโหมดไม่มีส่วนหัวของ Chrome ได้รับการอัปเกรด

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