สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนสิงหาคม 2024
เบราว์เซอร์รุ่นที่เสถียร
ในเดือนสิงหาคม 2024 Firefox 129 และ Chrome 128 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ
การอัปเดตการจัดรูปแบบ Ruby
องค์ประกอบ <ruby>
ของ HTML เป็นเครื่องมือที่มีประสิทธิภาพในการปรับปรุงการแสดงข้อความ โดยเฉพาะสำหรับภาษาเอเชียตะวันออก องค์ประกอบนี้ช่วยให้คุณแสดงคำอธิบายประกอบแบบออกเสียงหรือข้อมูลเพิ่มเติมอื่นๆ เหนือหรือข้างข้อความพื้นฐานได้ ตั้งแต่ Chrome 128 คำอธิบายประกอบ Ruby จะแบ่งบรรทัดได้ และคุณสามารถจัดรูปแบบข้อความ Ruby ด้วยruby-align
พร็อพเพอร์ตี้ CSS
ดูข้อมูลเพิ่มเติมในพร็อพเพอร์ตี้ <ruby>
ที่แบ่งบรรทัดได้และ ruby-align
ของ CSS
PointerEvent.deviceProperties
สำหรับโหมดหมึกหลายปากกา
การเปลี่ยนแปลงนี้ซึ่งพร้อมให้บริการใน Chrome 128 เป็นวิธีที่ปลอดภัยและเชื่อถือได้ในการระบุปากกา (เคอร์เซอร์) แต่ละด้ามที่ใช้โต้ตอบกับหน้าจอเพื่อกำหนดสีหรือรูปร่างปากกาที่เฉพาะเจาะจงสำหรับแต่ละอุปกรณ์ที่โต้ตอบกับเครื่องมือวัด ซึ่งจะขยายอินเทอร์เฟซ PointerEvent
ให้รวมแอตทริบิวต์ใหม่ deviceProperties
รายการนี้มีแอตทริบิวต์ uniqueId
ซึ่งแสดงตัวระบุที่ไม่ซ้ำกันแบบแยกเอกสารและถาวรในเซสชันที่คุณสามารถใช้เพื่อระบุปากกาแต่ละรายการที่โต้ตอบกับหน้าเว็บได้อย่างน่าเชื่อถือ
Promise.try
นอกจากนี้ ใน Chrome 128 Promise.try
ยังช่วยให้จัดการข้อผิดพลาดด้วย Promises ได้ง่ายขึ้น มีรูปแบบที่คุณมีฟังก์ชัน f
ฟังก์ชันนี้อาจเป็นแบบแอสซิงค์และแสดงผล Promise หรืออาจไม่แสดงผลก็ได้ หากต้องการใช้ความหมายของ Promise เพื่อจัดการข้อผิดพลาดในทั้ง 2 กรณี ให้รวมฟังก์ชันไว้ใน Promise ซึ่งโดยปกติแล้วจะใช้ new Promise(resolve => resolve(f()))
Promise.try
เป็นวิธีที่ตรงไปตรงมากว่าในการทําสิ่งเดียวกัน ซึ่งจะช่วยให้คุณเริ่มเชน Promise ที่จับข้อผิดพลาดทั้งหมดในตัวแฮนเดิล .catch
ได้โดยไม่ต้องจัดการทั้งโฟลว์ข้อยกเว้นแบบซิงค์และแบบแอซิงค์
ใส่เอฟเฟกต์ของรายการ
Firefox 129 มีฟีเจอร์ CSS 2 รายการที่ใช้สำหรับแสดงผลเอฟเฟกต์ของรายการแบบเคลื่อนไหว และตอนนี้ฟีเจอร์เหล่านี้พร้อมใช้งานในเบราว์เซอร์พื้นฐานแล้ว
กฎ @starting-style
จะกำหนดสไตล์เริ่มต้นในองค์ประกอบก่อนที่จะแสดงผลในหน้า จำเป็นต้องใช้สำหรับองค์ประกอบที่แสดงภาพเคลื่อนไหวจาก display: none เนื่องจากต้องมีสถานะที่จะแสดงภาพเคลื่อนไหว
เอฟเฟกต์รายการเข้ายังต้องใช้ภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง ซึ่งไม่สามารถหาค่าเฉลี่ยระหว่างค่าต่างๆ ได้
ซึ่งตอนนี้ทำได้ด้วย transition-behavior: allow-discrete
หรือค่า allow-discrete
ในนิพจน์ย่อของทรานซิชัน
ตอนนี้ Firefox 129 รองรับการติดแท็กด้วย
ดูข้อมูลเพิ่มเติมได้ที่ตอนนี้ในเวอร์ชันพื้นฐาน: เอฟเฟกต์ภาพเคลื่อนไหวของรายการ
การเพิ่มลงใน PerformanceResourceTiming
Firefox 129 เพิ่มพร็อพเพอร์ตี้ contentType
และ responseStatus
ของอินเทอร์เฟซ PerformanceResourceTiming
ซึ่งบ่งบอกถึงประเภทเนื้อหาของทรัพยากรที่ดึงข้อมูลและรหัสสถานะการตอบกลับ HTTP ที่แสดงเมื่อดึงข้อมูลทรัพยากรตามลำดับ
contentType
responseStatus
toJSON()
วิธีระบุตําแหน่งทางภูมิศาสตร์
นอกจากนี้ ใน Firefox 129 ยังมี GeolocationCoordinates.toJSON()
และ GeolocationPosition.toJSON()
WebDriver BiDi
ตอนนี้ Firefox 129 รองรับ WebDriver BiDi แล้ว ซึ่งหมายความว่าคุณสามารถใช้ Puppeteer กับ Chrome หรือ Firefox เพื่อทำการทำงานอัตโนมัติ ดูข้อมูลเพิ่มเติมได้ที่WebDriver BiDi พร้อมใช้งานจริงใน Firefox, Chrome และ Puppeteer และการประกาศการรองรับ Puppeteer อย่างเป็นทางการสำหรับ Firefox
เบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น เบต้าเวอร์ชันใหม่คือ Firefox 130 และ Chrome 129 Safari 18 เวอร์ชันเบต้ายังอยู่ระหว่างการพัฒนา การเปิดตัวเหล่านี้จะเพิ่มฟีเจอร์ที่ยอดเยี่ยมมากมายลงในแพลตฟอร์ม โปรดดูรายละเอียดทั้งหมดในหมายเหตุของรุ่น ต่อไปนี้คือไฮไลต์บางส่วน
Firefox 130 รองรับแอตทริบิวต์ชื่อขององค์ประกอบ<details>
การจัดกลุ่มองค์ประกอบ<details>
ซึ่งจะเปิดได้ครั้งละองค์ประกอบเดียวภายในกลุ่ม ซึ่งจะช่วยให้คุณสร้าง Accordion พิเศษได้โดยไม่ต้องใช้ JavaScript
Chrome 129 เพิ่มพร็อพเพอร์ตี้ interpolate-size
และฟังก์ชัน calc-size()
ของ CSS
พร็อพเพอร์ตี้ interpolate-size
ของ CSS ช่วยให้หน้าเว็บเลือกใช้ภาพเคลื่อนไหวและการเปลี่ยนรูปแบบของคีย์เวิร์ดการปรับขนาดตามค่าเริ่มต้นของ CSS ได้ เช่น auto
, min-content
และ fit-content
ในกรณีที่ใช้คีย์เวิร์ดเหล่านั้นเป็นภาพเคลื่อนไหวได้
ฟังก์ชัน calc-size()
ของ CSS เป็นฟังก์ชัน CSS ที่คล้ายกับ calc()
แต่รองรับการดำเนินการกับคีย์เวิร์ดการปรับขนาดที่รองรับเพียง 1 รายการเท่านั้น คีย์เวิร์ดการปรับขนาดที่รองรับในปัจจุบัน ได้แก่ auto
, min-content
, max-content
และ fit-content
นอกจากนี้ ใน Chrome 129 ยังมี Intl.DurationFormat
ซึ่งระบุวิธีการจัดรูปแบบระยะเวลา เช่น "1 ชม. 40 นาที 30 วินาที" ที่รองรับหลายภาษา