ค้นพบฟีเจอร์ที่น่าสนใจบางส่วนในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนมีนาคม 2023
รุ่นต่างๆ ของเบราว์เซอร์ที่เสถียร
ในเดือนมีนาคม 2023 Firefox 111, Chrome 111 และ Safari 16.4 ได้มีความเสถียรแล้ว มาดูกันว่าสิ่งนี้สำคัญต่อแพลตฟอร์มเว็บอย่างไร
แอตทริบิวต์ HTML ร่วม
Firefox 111 เพิ่มการรองรับแอตทริบิวต์ HTML ส่วนกลางที่มีประโยชน์ 2 รายการ แอตทริบิวต์ autocapitalize
จะควบคุมว่าจะให้ข้อความเป็นตัวพิมพ์ใหญ่โดยอัตโนมัติหรือไม่เมื่อผู้ใช้พิมพ์บนแป้นพิมพ์เสมือน
แอตทริบิวต์ translate
ระบุว่าควรแปลองค์ประกอบหรือไม่เมื่อแปลหน้าเว็บ
ระบบไฟล์ส่วนตัวต้นทาง (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
พื้นที่สีและฟังก์ชัน CSS ใหม่
Chrome 111 ยังรวมเป็นวิธีใหม่ในการใช้สีในเว็บด้วย ตอนนี้ Chrome รองรับพื้นที่สีที่เข้าถึงสีนอกขอบเขต RGB รวมถึงฟังก์ชัน color()
และ color-mix()
ดูข้อมูลเพิ่มเติมในคู่มือการใช้สี CSS แบบความละเอียดสูงและบล็อกโพสต์เกี่ยวกับ color-mix()
การเปิดตัว 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 แล้ว
พร็อพเพอร์ตี้และค่า CSS
Safari 16.4 เพิ่มการรองรับ @property
ซึ่งเป็นการเปิดใช้การลงทะเบียนพร็อพเพอร์ตี้ CSS ที่กำหนดเองในสไตล์ชีตโดยตรง ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งนี้ได้ใน @property: การให้พลังพิเศษแก่ตัวแปร CSS
การรองรับ CSS API
และยังมีฟีเจอร์ดีๆ สำหรับ CSS ที่มีมาใหม่เรื่อยๆ พร้อมการรองรับ OM ที่พิมพ์ของ CSS API นี้จะแสดงค่า CSS เป็นออบเจ็กต์ JavaScript ที่พิมพ์แทนที่จะเป็นสตริง ซึ่งจะทำให้การทำงานกับ CSS จาก JavaScript ง่ายและมีประสิทธิภาพมากกว่าเมธอดที่มีอยู่
นอกจากนี้ยังมีการรองรับสไตล์ชีตที่สร้างได้ด้วย CSSStyleSheet()
การดำเนินการนี้จะเปิดใช้การแชร์สไตล์ชีตระหว่างเอกสารและซับทรี DOM เงาของเอกสาร เมื่อใช้ Safari เวอร์ชันนี้ สไตล์ชีตที่สร้างได้จะได้รับการสนับสนุนในเครื่องมือค้นหาทั้ง 3 รายการ
พุชจากเว็บและ Badging API
ตอนนี้ Safari รองรับ Web Push รวมถึง Badging API ซึ่งเป็นข่าวดีสําหรับนักพัฒนาแอป โดยเฉพาะอย่างยิ่ง เวอร์ชันนี้หมายความว่าระบบรองรับข้อความ Push ในเครื่องมือหลักทั้งหมด
นำเข้าแผนที่
นอกจากนี้ อีกฟีเจอร์หนึ่งที่ทำให้ฟีเจอร์มีสถานะที่ทำงานร่วมกันได้คือการเพิ่มนำเข้าแผนที่ 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 จะได้รับการอัปเกรด
เป็นส่วนหนึ่งของซีรีส์ใหม่ในเว็บซีรีส์