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

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

ในเดือนสิงหาคม 2024 Firefox 129 และ Chrome 128 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ

การอัปเดตการจัดรูปแบบ Ruby

องค์ประกอบ <ruby> ของ HTML เป็นเครื่องมือที่มีประสิทธิภาพในการปรับปรุงการแสดงข้อความ โดยเฉพาะสำหรับภาษาเอเชียตะวันออก องค์ประกอบนี้ช่วยให้คุณแสดงคำอธิบายประกอบแบบออกเสียงหรือข้อมูลเพิ่มเติมอื่นๆ เหนือหรือข้างข้อความพื้นฐานได้ ตั้งแต่ Chrome 128 คำอธิบายประกอบ Ruby จะแบ่งบรรทัดได้ และคุณสามารถจัดรูปแบบข้อความ Ruby ด้วยruby-alignพร็อพเพอร์ตี้ CSS

ดูข้อมูลเพิ่มเติมในพร็อพเพอร์ตี้ <ruby> ที่แบ่งบรรทัดได้และ ruby-align ของ CSS

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

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 ได้โดยไม่ต้องจัดการทั้งโฟลว์ข้อยกเว้นแบบซิงค์และแบบแอซิงค์

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

ใส่เอฟเฟกต์ของรายการ

Firefox 129 มีฟีเจอร์ CSS 2 รายการที่ใช้สำหรับแสดงผลเอฟเฟกต์ของรายการแบบเคลื่อนไหว และตอนนี้ฟีเจอร์เหล่านี้พร้อมใช้งานในเบราว์เซอร์พื้นฐานแล้ว

กฎ @starting-style จะกำหนดสไตล์เริ่มต้นในองค์ประกอบก่อนที่จะแสดงผลในหน้า จำเป็นต้องใช้สำหรับองค์ประกอบที่แสดงภาพเคลื่อนไหวจาก display: none เนื่องจากต้องมีสถานะที่จะแสดงภาพเคลื่อนไหว

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

เอฟเฟกต์รายการเข้ายังต้องใช้ภาพเคลื่อนไหวของพร็อพเพอร์ตี้แบบไม่ต่อเนื่อง ซึ่งไม่สามารถหาค่าเฉลี่ยระหว่างค่าต่างๆ ได้ ซึ่งตอนนี้ทำได้ด้วย transition-behavior: allow-discrete หรือค่า allow-discrete ในนิพจน์ย่อของทรานซิชัน ตอนนี้ Firefox 129 รองรับการติดแท็กด้วย

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

ดูข้อมูลเพิ่มเติมได้ที่ตอนนี้ในเวอร์ชันพื้นฐาน: เอฟเฟกต์ภาพเคลื่อนไหวของรายการ

การเพิ่มลงใน PerformanceResourceTiming

Firefox 129 เพิ่มพร็อพเพอร์ตี้ contentType และ responseStatus ของอินเทอร์เฟซ PerformanceResourceTiming ซึ่งบ่งบอกถึงประเภทเนื้อหาของทรัพยากรที่ดึงข้อมูลและรหัสสถานะการตอบกลับ HTTP ที่แสดงเมื่อดึงข้อมูลทรัพยากรตามลำดับ

contentType

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

toJSON() วิธีระบุตําแหน่งทางภูมิศาสตร์

นอกจากนี้ ใน Firefox 129 ยังมี GeolocationCoordinates.toJSON() และ GeolocationPosition.toJSON()

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

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 วินาที" ที่รองรับหลายภาษา