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

Adriana Jara

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

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

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

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

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

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

@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,
  });
};

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

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

แน่นอนว่ายังมีอีกมากมาย

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

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

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

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

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

อ้าว คุณ Adriana Jara แล้ว ทันทีที่ Chrome 127 เปิดตัว ฉันจะมาบอกว่ามีอะไรใหม่ใน Chrome