สำรวจฟีเจอร์ที่น่าสนใจบางรายการที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนพฤษภาคม 2022
เบราว์เซอร์รุ่นที่เสถียร
ในเดือนพฤษภาคม Chrome 102, Safari 15.5, Firefox 100 และ Firefox 101 กลายเป็นเวอร์ชันเสถียร
Chrome 102 และ Safari 15.5 มีแอตทริบิวต์ inert
ซึ่งจะนำองค์ประกอบออกจากลําดับแท็บและลําดับชั้นการช่วยเหลือพิเศษหากองค์ประกอบดังกล่าวไม่โต้ตอบ เช่น องค์ประกอบที่อยู่นอกหน้าจอหรือซ่อนอยู่
Chrome 102 มีค่าใหม่ until-found
สำหรับแอตทริบิวต์ HTML hidden
ซึ่งจะเปิดใช้การค้นหาในหน้าเว็บและเลื่อนไปยังข้อความที่ตัดตอนมาจากข้อความที่อยู่ภายในส่วนที่ยุบของหน้าเว็บ ดังที่คุณอาจพบในรูปแบบ Accordion ดูข้อมูลเพิ่มเติมได้ในโพสต์การทำให้เนื้อหาแบบยุบเข้าถึงได้โดยใช้ hidden=until-found
Chrome 102 มาพร้อมกับ Navigation API ซึ่งเป็น API ที่กำหนดมาตรฐานการกำหนดเส้นทางฝั่งไคลเอ็นต์ในแอปพลิเคชันหน้าเว็บเดียว ก่อนหน้านี้ API นี้เรียกว่า App History API
Firefox 101 รองรับสไตล์ชีตที่สร้างได้ การสนับสนุนประกอบด้วยตัวสร้าง CSSStyleSheet()
และเมธอด replace()
และ replaceSync()
สไตล์ชีตที่สร้างได้ช่วยให้สร้างสไตล์ชีตเพื่อใช้กับ Shadow DOM ได้ง่ายขึ้น ในตัวอย่างต่อไปนี้ ระบบจะสร้างสไตล์ชีตโดยใช้คอนสตรัคเตอร์ CSSStyleSheet()
เพิ่มกฎ CSS ด้วยเมธอด replaceSync()
และพิมพ์กฎที่ได้ลงในคอนโซล
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync('body { color: red; }');
console.log(stylesheet.rules[0].cssText);
นอกจากนี้ Firefox 101 ยังมีฟีเจอร์สื่อ prefers-contrast
ซึ่งทำให้ฟีเจอร์นี้ใช้งานได้ในหลายเบราว์เซอร์
เบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น
เบต้าใหม่ในเดือนเมษายน ได้แก่ Chrome 103 และ Firefox 102
Firefox 102 มีฟีเจอร์สื่อ update
ข้อมูลนี้ใช้เพื่อสอบถามว่าอุปกรณ์เอาต์พุตสามารถแก้ไขลักษณะที่ปรากฏของเนื้อหาได้หรือไม่เมื่อผ่านการแสดงผลแล้ว ค่าที่ใช้ได้มีดังนี้
none
- เมื่อแสดงผลแล้ว คุณจะอัปเดตเนื้อหาไม่ได้ เช่น เอกสารที่พิมพ์
slow
- อุปกรณ์อัปเดตเนื้อหาได้ แต่ช้าเกินกว่าที่จะแสดงภาพเคลื่อนไหวอย่างราบรื่น เช่น หน้าจอ E-ink
fast
- เนื้อหาสามารถเปลี่ยนแปลงแบบไดนามิกและรวดเร็วพอที่จะแสดงภาพเคลื่อนไหว เช่น หน้าจอคอมพิวเตอร์หรือโทรศัพท์
Chrome 103 มี Local Font Access API ซึ่งอนุญาตให้เข้าถึงแบบอักษรที่ติดตั้งในเครื่องของผู้ใช้
ฟีเจอร์เบต้าเหล่านี้จะพร้อมใช้งานในเบราว์เซอร์เวอร์ชันเสถียรในเร็วๆ นี้
แก้ไข: เวอร์ชันก่อนหน้าของโพสต์นี้มีการพูดถึงวิธีการ Element.isVisible()
ซึ่งไม่ได้รวมอยู่ในรุ่นนี้
เป็นส่วนหนึ่งของชุดวิดีโอ "เพิ่งเคยใช้เว็บ"