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

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

Rachel Andrew

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

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

หมายเหตุ: ข้อมูลความเข้ากันได้ของเบราว์เซอร์ที่ดึงจาก MDN จะรวมอยู่ในโพสต์เหล่านี้ และอาจยังไม่ได้รับการอัปเดตสําหรับเบราว์เซอร์รุ่นล่าสุด โพสต์จะแสดงข้อมูลที่ถูกต้องทันทีที่ปรากฏในการเผยแพร่ข้อมูลที่ตรงกับเบราว์เซอร์

เมธอดชุด JavaScript

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

• intersection()
• union()
• difference()
• symmetricDifference()
• isSubsetOf()
• isSupersetOf()
• isDisjointFrom()

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

• 122
• 122
• 127
• 17

แหล่งที่มา

หากต้องการดูข้อมูลเพิ่มเติม โปรดอ่านตอนนี้เมธอดชุด JavaScript เป็นส่วนหนึ่งของเกณฑ์พื้นฐานแล้ว

Async Clipboard API

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

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

• 76
• 79
• 127
• 13.1

แหล่งที่มา

การประมาณค่าสีในการไล่ระดับสี CSS

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

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

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

• 111
• 111
• 127
• 16.2

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

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

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

@view-transition {
  navigation: auto;
}

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

• 126
• 126
• x
• x

แหล่งที่มา

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

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

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

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

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

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

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

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