สิ่งใหม่ๆ ใน Chrome 126

Adriana Jara

สิ่งที่จำเป็นต้องทราบมีดังนี้

ฉันชื่อ Adriana Jara เรามาเจาะลึกและดูว่ามีอะไรใหม่ใน Chrome 126 สำหรับนักพัฒนาซอฟต์แวร์กัน

การเปลี่ยนมุมมองข้ามเอกสารสำหรับการนำทางจากต้นทางเดียวกัน

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

หากต้องการใช้การเปลี่ยนมุมมองข้ามเอกสาร ทั้ง 2 ฝั่งจะต้องเลือกใช้ หากต้องการทำเช่นนี้ ให้ใช้กฎที่การเปลี่ยนมุมมอง และตั้งค่าข้อบ่งชี้การนำทางเป็น "อัตโนมัติ"

การเปลี่ยนมุมมองข้ามเอกสารใช้องค์ประกอบพื้นฐานและหลักการเดียวกันกับการเปลี่ยนมุมมองเอกสารเดียวกัน

@view-transition {
  navigation: auto;
}

ไปที่การเปลี่ยนแบบราบรื่นด้วย View Transition API เพื่อดูรายละเอียด โปรดดูตัวอย่างเพิ่มเติม

เปิดใช้ CloseWatcher API อีกครั้งแล้ว

สำหรับองค์ประกอบ <dialog> และ popover="" CloseWatcher API ช่วยให้คุณจัดการคำขอปิดได้ง่ายขึ้น เช่น แป้น ESC บนแพลตฟอร์มเดสก์ท็อปหรือท่าทางสัมผัสการย้อนกลับบน Android

เดิมทีฟีเจอร์นี้จัดส่งใน Chrome 120 แต่ถูกปิดใช้เนื่องจากเกิดการโต้ตอบที่ไม่คาดคิดกับองค์ประกอบกล่องโต้ตอบ ซึ่งมีการเปิดใช้อีกครั้งใน Chrome 126 หลังการปรับปรุงเพื่อลดปัญหาก่อนหน้านี้

หากต้องการเรียนรู้วิธีใช้ CloseWatcher ให้ไปที่การสาธิต

ส่วนขยายทริกเกอร์เส้นรอบวงของ Gamepad API

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

trigger-rumble จะขยาย GamepadHapticActuator ซึ่งเป็นอินเทอร์เฟซที่แสดงถึงฮาร์ดแวร์ในตัวควบคุมที่ออกแบบมาเพื่อให้การตอบสนองแบบรู้สึกได้แก่ผู้ใช้ (หากมี) trigger-rumble อนุญาตให้เว็บแอปพลิเคชันที่ใช้ Gamepad API สั่นทริกเกอร์ของอุปกรณ์เกมแพดเหล่านั้นได้ด้วย

คุณสามารถตรวจสอบว่าเบราว์เซอร์รองรับฟังก์ชันนี้หรือไม่ด้วยโค้ดต่อไปนี้ และจะทริกเกอร์อย่างไร (สำหรับการเล่นสำนวน)trigger-rumble

// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
  if (!('vibrationActuator' in gamepad)) {
    return;
  }
  // Feature detection.
  if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
    return;
  }
  gamepad.vibrationActuator.playEffect('trigger-rumble', {
    // Duration in ms.
    duration: duration,
    // The left trigger (between 0 and 1).
    leftTrigger: leftTrigger,
    // The right trigger (between 0 and 1).
    rightTrigger: rightTrigger,
  });
};

ไปที่เล่นเกมไดโนเสาร์ Chrome ด้วยเกมแพดเพื่อดูข้อมูลเพิ่มเติมเพื่อให้ได้รับประโยชน์สูงสุดจาก Gamepad API

และอีกมากมาย

แถมยังมีอีกมากมาย

อ่านบันทึกประจำรุ่นฉบับเต็ม

อ่านเพิ่มเติม

เราพูดถึงไฮไลต์สำคัญเพียงบางส่วนเท่านั้น โปรดตรวจสอบลิงก์ต่อไปนี้สำหรับ การเปลี่ยนแปลงเพิ่มเติมใน Chrome 126

สมัครใช้บริการ

หากต้องการติดตามข้อมูลล่าสุด โปรดสมัครรับข้อมูล ช่อง YouTube สำหรับนักพัฒนาซอฟต์แวร์ Chrome และคุณจะได้รับการแจ้งเตือนทางอีเมลเมื่อเราเปิดตัววิดีโอใหม่

ขอโทษครับ Adriana Jara นะ ทันทีที่ Chrome 127 เปิดตัว ผมจะมาบอกว่ามีอะไรใหม่ใน Chrome