หน้านี้ได้รับการแปลโดย Cloud Translation API

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

ดูฟีเจอร์ที่น่าสนใจบางส่วนซึ่งเปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนพฤษภาคม 2022

Rachel Andrew

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

ในเดือนพฤษภาคม Chrome 102, Safari 15.5, Firefox 100 และ Firefox 101 ได้กลายเป็นเวอร์ชันที่เสถียร

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

Browser Support

Source

Chrome 102 มีค่าใหม่ until-found สำหรับแอตทริบิวต์ hidden ของ HTML ซึ่งจะช่วยให้ค้นหาในหน้าและเลื่อนไปยังข้อความที่อยู่ในพื้นที่ที่ยุบของหน้าได้ เช่น ในรูปแบบ Accordion ดูข้อมูลเพิ่มเติมได้ในโพสต์การทำให้เนื้อหาที่ยุบสามารถเข้าถึงได้ด้วย hidden=until-found

Chrome 102 จะเปิดตัว Navigation API ซึ่งเป็น API ที่กำหนดการกำหนดเส้นทางฝั่งไคลเอ็นต์ในแอปพลิเคชันหน้าเว็บเดียวให้เป็นมาตรฐาน ก่อนหน้านี้ API นี้มีชื่อว่า App History API

Browser Support

Source

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);

Browser Support

Source

นอกจากนี้ Firefox 101 ยังมีฟีเจอร์สื่อ prefers-contrast ซึ่งทำให้ฟีเจอร์นี้พร้อมใช้งานในเบราว์เซอร์ต่างๆ

Browser Support

Source

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

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

เบต้าใหม่ในเดือนเมษายนคือ Chrome 103 และ Firefox 102

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

none: เมื่อแสดงผลแล้ว คุณจะอัปเดตเนื้อหาไม่ได้ เช่น เอกสารที่พิมพ์
slow: อุปกรณ์อัปเดตเนื้อหาได้ แต่ช้าเกินไปที่จะแสดงภาพเคลื่อนไหวได้อย่างราบรื่น เช่น หน้าจอ E-ink
fast: เนื้อหาสามารถเปลี่ยนแปลงแบบไดนามิกและรวดเร็วพอที่จะแสดงภาพเคลื่อนไหวได้ เช่น หน้าจอคอมพิวเตอร์หรือโทรศัพท์

Browser Support

Source

Chrome 103 มี Local Font Access API ซึ่งอนุญาตให้เข้าถึงแบบอักษรที่ติดตั้งไว้ในเครื่องของผู้ใช้

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

แก้ไข: โพสต์เวอร์ชันก่อนหน้านี้มีการกล่าวถึงวิธี Element.isVisible() ซึ่งไม่ได้รวมอยู่ในรุ่นนี้

ส่วนหนึ่งของซีรีส์ "เพิ่งเคยใช้เว็บ"