สิ่งใหม่ๆ ใน 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 ให้ไปที่การสาธิต

ส่วนขยายทริกเกอร์ Rumble API ของเกมแพด

ตอนนี้ความสามารถในการทริกเกอร์ Rumble เป็นส่วนหนึ่งของ 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