แพลตฟอร์มเว็บใหม่ในเดือนมิถุนายน

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

Rachel Andrew

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

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

เมธอด Set ของ JavaScript

ชุดเป็นโครงสร้างข้อมูลที่สําคัญในภาษาโปรแกรมใดก็ตาม ตอนนี้คุณใช้เมธอดในตัวของ JavaScript เพื่อดำเนินการกับชุดได้แล้ว เมธอดชุดค่าผสมต่อไปนี้พร้อมใช้งานใน Firefox 127 แล้ว และเป็นส่วนหนึ่งของ Baseline ที่เพิ่งเปิดตัว

การรองรับเบราว์เซอร์

  • Chrome: 122
  • Edge: 122
  • Firefox: 127
  • Safari: 17.

แหล่งที่มา

ดูข้อมูลเพิ่มเติมได้ที่ตอนนี้เมธอด Set ของ JavaScript เป็นส่วนหนึ่งของ Baseline แล้ว

Async Clipboard API

ตอนนี้ Firefox 127 รองรับ Clipboard API อย่างเต็มรูปแบบแล้ว ตอนนี้ Firefox รองรับอินเทอร์เฟซ ClipboardItem รวมถึงเมธอด read() และ write() ของอินเทอร์เฟซคลิปบอร์ด ดูข้อมูลเพิ่มเติมเกี่ยวกับ Clipboard API ได้ในการเลิกบล็อกการเข้าถึงคลิปบอร์ด

การรองรับเบราว์เซอร์

  • Chrome: 76
  • Edge: 79
  • Firefox: 127
  • Safari: 13.1

แหล่งที่มา

การเติมสีในการไล่สี CSS

มีการระบุไล่ระดับสี CSS ให้ยอมรับ <color-interpolation-method> และตอนนี้ Firefox รองรับแล้ว ทำให้ไล่ระดับสีนี้ทำงานร่วมกันได้กับเครื่องมือหลักทั้งหมด ตอนนี้คุณสามารถระบุ linear-gradient() โดยใช้ระบบสี hsl และการหาค่าเฉลี่ยแบบถี่มากขึ้นได้

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

การรองรับเบราว์เซอร์

  • Chrome: 111
  • Edge: 111
  • Firefox: 127
  • Safari: 16.2

การเปลี่ยนมุมมองข้ามเอกสาร

ก่อนหน้านี้คุณต้องปรับโครงสร้างเว็บไซต์เป็น SPA อีกครั้งเพื่อใช้ View Transitions API แต่จะไม่เป็นเช่นนี้แล้ว ตั้งแต่ Chrome 126 เป็นต้นไป ระบบจะเปิดใช้การเปลี่ยนมุมมองโดยค่าเริ่มต้นสำหรับการไปยังส่วนต่างๆ ของต้นทางเดียวกัน คุณสามารถสร้างการเปลี่ยนมุมมองระหว่างเอกสาร 2 รายการที่มาจากแหล่งที่มาเดียวกัน

หากต้องการเปิดใช้การเปลี่ยนมุมมองข้ามเอกสาร ผู้ใช้ทั้ง 2 ฝ่ายต้องเลือกใช้ โดยให้ใช้ @view-transition at-rule และตั้งค่าตัวระบุการนําทางเป็น auto

@view-transition {
  navigation: auto;
}

การรองรับเบราว์เซอร์

  • Chrome: 126
  • Edge: 126
  • Firefox: ไม่รองรับ
  • Safari Technology Preview: รองรับ

ดูข้อมูลเพิ่มเติมในเอกสารประกอบเกี่ยวกับการเปลี่ยนมุมมองข้ามเอกสาร

ส่วนขยาย trigger-rumble ของ Gamepad API

Chrome 126 ขยายอินเทอร์เฟซ GamepadHapticActuator เพื่อแสดงความสามารถของ trigger-rumble บนเว็บสำหรับเกมแพดที่เข้ากันได้ ส่วนขยายนี้จะช่วยให้เว็บแอปพลิเคชันที่ใช้ประโยชน์จาก Gamepad API สามารถทำให้ทริกเกอร์ของอุปกรณ์เกมแพดที่มีฟังก์ชันการทำงานนี้สั่นได้ด้วย

เวอร์ชันเบราว์เซอร์เบต้า

เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น เบราว์เซอร์รุ่นเบต้าใหม่ ได้แก่ Firefox 128, Chrome 127, Safari 18 และ Safari 17.6 การเปิดตัวเหล่านี้จะเพิ่มฟีเจอร์ที่ยอดเยี่ยมมากมายลงในแพลตฟอร์ม ดูรายละเอียดทั้งหมดได้ในหมายเหตุของรุ่น ต่อไปนี้คือไฮไลต์บางส่วน

Safari 17.6 เป็นรุ่นที่มีการแก้ไขฟีเจอร์ที่มีอยู่ Safari 18 มีฟีเจอร์ใหม่ที่น่าสนใจมากมาย ซึ่งรวมถึงการค้นหาคอนเทนเนอร์สไตล์, API การเปลี่ยนมุมมองสําหรับแอปแบบหน้าเดียว และการรองรับคีย์เวิร์ด safe ในพร็อพเพอร์ตี้ Flexbox

Chrome 127 มีพร็อพเพอร์ตี้ font-size-adjust CSS, ความสามารถในการระบุข้อความแสดงแทนในเนื้อหาที่สร้างขึ้นเป็นองค์ประกอบจำนวนเท่าใดก็ได้ และความสามารถในการเพิ่มข้อมูลแต่ละบทใน MediaMetaData

Firefox 128 มีพร็อพเพอร์ตี้และค่า CSS ซึ่งทำให้ฟีเจอร์นี้อยู่ในระดับพื้นฐานที่พร้อมใช้งาน ใช้ @property เพื่อกำหนด type และตั้งค่าสำรองสำหรับพร็อพเพอร์ตี้ที่กำหนดเองของ CSS