ใหม่ใน Chrome 130

Pete LePage

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

ผมชื่อ Pete LePage มาเจาะลึกกันว่ามีอะไรใหม่สำหรับนักพัฒนาซอฟต์แวร์ใน Chrome 130

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

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

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

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

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

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 Nesting เป็น Baseline ที่พร้อมใช้งานแล้ว และพร้อมใช้งานมาเกือบ 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 Developers แล้วคุณจะได้รับการแจ้งเตือนทางอีเมลทุกครั้งที่เราเปิดตัววิดีโอใหม่

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