ใหม่ใน Chrome 130

Pete LePage

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

และ Pete LePage จะเป็นผู้ดูแลคุณในวันนี้ มาดูกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 130

การแสดงภาพซ้อนภาพในเอกสาร

Picture-in-Picture API เหมาะอย่างยิ่งเมื่อคุณต้องการแสดงวิดีโอจากแท็บเบราว์เซอร์เพื่อให้คุณดูวิดีโอได้อย่างต่อเนื่องขณะโต้ตอบกับเว็บไซต์หรือแอปพลิเคชันอื่นๆ แต่รองรับเฉพาะวิดีโอ

หน้าต่างการแสดงภาพซ้อนภาพของ Spotify

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

หากต้องการใช้ฟีเจอร์นี้ ให้ขอหน้าต่างภาพในภาพใหม่ของเอกสาร promise ที่แสดงผลจะได้รับการแก้ไขด้วยออบเจ็กต์ JavaScript ของหน้าต่างการแสดงภาพซ้อนภาพ จากนั้นใช้ URL ดังกล่าวเพื่อเพิ่มเนื้อหาลงในหน้าต่าง

async function openDPiP() {
  const player = document.querySelector("#player");
  const pipWindow = await documentPictureInPicture
.requestWindow();
  pipWindow.document.body.append(player);
}

pipButton.addEventListener('click', openDPiP);

การใช้พร็อพเพอร์ตี้ preferInitialWindowPlacement ใหม่จะช่วยให้คุณบอก Chrome ให้เปิดหน้าต่างภาพในภาพในตำแหน่งและขนาดเริ่มต้นเสมอได้ แทนที่จะใช้ตำแหน่งหรือขนาดของหน้าต่างก่อนหน้าซ้ำ

// Open a Picture-in-Picture window in its default position / size.
const pipWindow = await documentPictureInPicture.requestWindow({
  preferInitialWindowPlacement: true,
});

ดูรายละเอียดเพิ่มเติมได้ในโพสต์ของ François เรื่องโหมดภาพในภาพสำหรับองค์ประกอบใดก็ได้

การประกาศที่ฝังของ CSS

การฝัง CSS ช่วยให้คุณใช้ตัวเลือกที่สั้นลง อ่านได้ง่ายขึ้น และทำให้โมดูลมากขึ้นด้วยการฝังกฎไว้ภายในกฎอื่น การฝัง CSS อยู่ในสถานะใหม่ในเบสไลน์และพร้อมใช้งานมาเกือบ 1 ปีแล้ว

มีปัญหาเล็กน้อยที่ทำงานไม่เป็นไปตามที่คาดไว้ ตัวอย่างเช่น เมื่อใช้บล็อก CSS ต่อไปนี้ คุณคงคาดหวังว่าสีพื้นหลังจะเป็นสีเขียวเนื่องจากอยู่หลังสุด แต่กลับเป็นสีแดง

.foo {
    width: fit-content;

    @media screen {
        background-color: red;
    }

    background-color: green;
}

เพื่อแก้ไขปัญหาเฉพาะกรณีเช่นนี้ คณะทำงาน CSS จึงได้แนะนำกฎประกาศที่ซ้อนกัน ซึ่งนำมาใช้ใน Chrome 130 ตอนนี้ CSS บล็อกเดียวกันนั้นแสดงผลเป็นพื้นหลังสีเขียวตามที่คาดไว้ หากคุณสลับใช้การประกาศแบบไม่ใส่เครื่องหมายคำนำหน้ากับกฎที่ฝังอยู่ คุณควรตรวจสอบโค้ดอีกครั้ง

อ่านบทความของ Bramus เรื่องการฝัง CSS ดีขึ้นด้วย CSSNestedDeclarations เพื่อดูคำอธิบายเชิงลึกเพิ่มเติม

box-decoration-break

พร็อพเพอร์ตี้ box-decoration-break CSS ช่วยให้คุณระบุวิธีแสดงผลของชิ้นส่วนองค์ประกอบเมื่อมีการแบ่งออกเป็นหลายบรรทัด คอลัมน์ หรือหน้า

ไม่มีการขึ้นบรรทัดใหม่

เช่น องค์ประกอบนี้จะดูดีเมื่อทุกอย่างอยู่ในบรรทัดเดียว

การขึ้นบรรทัดใหม่ที่มีส่วน

เมื่อเนื้อหาแบ่งออกเป็นหลายบรรทัด ระบบจะตัดการตกแต่ง เช่น พื้นหลัง เงาขอบ เส้นขอบ และอื่นๆ ซึ่งทำให้เนื้อหาดูไม่สมเหตุสมผล

การขึ้นบรรทัดใหม่ด้วยโคลน

การเพิ่ม box-decoration-break: clone จะทำให้แต่ละกลุ่มแสดงผลแยกกัน ซึ่งทำให้ภาพดูดีขึ้นมาก

แม้ว่าจะไม่ตรงกับ Baseline แต่ก็มีให้บริการใน Chrome และ Firefox และมีคำนำหน้าผู้ให้บริการใน Safari

.bdb-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

ดูรายละเอียดเพิ่มเติมได้ในbox-decoration-breakเอกสารใน MDN และโพสต์ของ Rachel เรื่องพร็อพเพอร์ตี้ box-decoration-break ใน Chrome 130

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

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

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

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

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

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

ผมชื่อ Pete LePage และเราจะคอยแจ้งให้คุณทราบเกี่ยวกับฟีเจอร์ใหม่ๆ ใน Chrome ทันทีที่ Chrome 131 เปิดตัว