ใหม่ใน Chrome 116

Adriana Jara

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

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

Document Picture-in-Picture API

Document Picture-in-Picture API ช่วยให้คุณเปิดหน้าต่างที่แสดงอยู่ด้านบนเสมอซึ่งสามารถป้อนข้อมูลเนื้อหา HTML ใดก็ได้

หน้าต่างการแสดงภาพซ้อนภาพที่เล่นวิดีโอตัวอย่างของ Sintel
หน้าต่างภาพในภาพที่สร้างด้วย Document Picture-in-Picture API (เดโม)

หน้าต่างการแสดงภาพซ้อนภาพใน Document Picture-in-Picture API คล้ายกับหน้าต่างต้นทางเดียวกันที่ว่างเปล่าซึ่งเปิดโดยใช้ window.open() โดยมีความแตกต่างบางอย่างดังนี้

  • หน้าต่างภาพในภาพจะลอยอยู่เหนือหน้าต่างอื่นๆ
  • หน้าต่างการแสดงภาพซ้อนภาพจะปิดไปก่อนหน้าต่างที่เปิดอยู่เสมอ
  • ไปยังส่วนต่างๆ ของหน้าต่างภาพซ้อนภาพไม่ได้
  • เว็บไซต์ไม่สามารถกำหนดตำแหน่งหน้าต่างของฟีเจอร์ภาพซ้อนภาพได้

HTML ต่อไปนี้จะตั้งค่าวิดีโอเพลเยอร์ที่กำหนดเองและองค์ประกอบปุ่มเพื่อเปิดวิดีโอเพลเยอร์ในหน้าต่างการแสดงภาพซ้อนภาพ

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

JavaScript ต่อไปนี้จะเรียก documentPictureInPicture.requestWindow() เมื่อผู้ใช้คลิกปุ่มเพื่อเปิดหน้าต่างภาพในภาพเปล่า พรอมต์ที่แสดงผลจะแสดงผลด้วยออบเจ็กต์ JavaScript ของหน้าต่างภาพซ้อนภาพ ระบบจะย้ายวิดีโอเพลเยอร์ไปยังหน้าต่างนั้นโดยใช้ append()

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

ดูรายละเอียดและตัวอย่างเพิ่มเติมได้ในภาพในภาพสำหรับองค์ประกอบใดก็ได้

เครื่องมือสำหรับนักพัฒนาเว็บไม่มีการปรับปรุงการแก้ไขข้อบกพร่องสไตล์ชีต

เครื่องมือสำหรับนักพัฒนาเว็บได้รับการปรับปรุงหลายอย่างเพื่อระบุและแก้ไขข้อบกพร่องเกี่ยวกับสไตล์ชีตที่ขาดหายไป

ประการแรก: ตอนนี้แผนภูมิแหล่งที่มา > หน้าเว็บจะแสดงเฉพาะสไตล์ชีตที่โหลดและติดตั้งใช้งานเรียบร้อยแล้วเพื่อลดความสับสน

นอกจากนี้ แหล่งที่มา > เครื่องมือแก้ไขจะขีดเส้นใต้และแสดงเคล็ดลับเครื่องมือแสดงข้อผิดพลาดย่อยข้างคำสั่ง "ไม่สําเร็จ", @import,url() และ href ด้วย

คำสั่งที่ขีดเส้นใต้พร้อมเคล็ดลับเครื่องมือในแผงแหล่งที่มา

  • นอกจากลิงก์ไปยังคำขอที่ไม่สำเร็จแล้ว ตอนนี้คอนโซลยังมีลิงก์ไปยังบรรทัดที่อ้างอิงสไตล์ชีตที่โหลดไม่สำเร็จด้วย

คอนโซลจะแสดงลิงก์ไปยังบรรทัดที่มีปัญหา

แผงเครือข่ายจะป้อนข้อมูลคอลัมน์ผู้เริ่มอย่างสม่ำเสมอด้วยลิงก์ไปยังบรรทัดที่อ้างอิงสไตล์ชีตที่โหลดไม่สำเร็จ

แผงปัญหาจะแสดงปัญหาทั้งหมดในการโหลดสไตล์ชีต ซึ่งรวมถึง URL ที่ไม่ถูกต้อง คำขอที่ไม่สำเร็จ และคำสั่ง @import ที่วางผิดตำแหน่ง

แผงปัญหาที่มีลิงก์ไปยังแหล่งที่มาและคำขอ

ดูข่าวสารใน DevTools เพื่อดูรายละเอียดทั้งหมดและข้อมูลเพิ่มเติมเกี่ยวกับ DevTools ใน Chrome 116

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

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

  • เส้นทางการเคลื่อนไหวช่วยให้ผู้เขียนกำหนดตำแหน่งของวัตถุกราฟิกใดก็ได้และทำให้เคลื่อนไหวไปตามเส้นทางที่นักพัฒนาแอประบุ
  • ตอนนี้ระบบรองรับพร็อพเพอร์ตี้ display และ content-visibility ในภาพเคลื่อนไหวของคีย์เฟรมแล้ว ซึ่งช่วยให้คุณเพิ่มภาพเคลื่อนไหวที่ออกได้ใน CSS เท่านั้น
  • ตอนนี้คุณใช้ fetch API กับเครื่องมืออ่านบัฟเฟอร์ที่ผู้ใช้นำมาเองได้แล้ว ซึ่งจะช่วยลดภาระงานและสำเนาของการเก็บขยะ และปรับปรุงการตอบสนองสำหรับผู้ใช้

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

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

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

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

ฉันชื่อ Adriana Jara และพร้อมที่จะแจ้งให้คุณทราบเกี่ยวกับสิ่งใหม่ๆ ใน Chrome ทันทีที่ Chrome 117 เปิดตัว