ใหม่ใน 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 และโพสต์พร็อพเพอร์ตี้กล่องการตกแต่งกล่องใน Chrome 130 ในโพสต์ของ Rachel

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

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

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

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

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

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

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