ใหม่บนแพลตฟอร์มเว็บเดือนพฤษภาคม | บล็อก | เว็บ.เดฟ

การสืบค้นคอนเทนเนอร์เฉพาะชื่อ CSS กลายเป็นข้อมูลพื้นฐาน

ด้วยการเปิดตัว Chrome 148 ในเดือนนี้ การสืบค้นคอนเทนเนอร์แบบระบุชื่อเท่านั้นจึงพร้อมใช้งานเป็นพื้นฐานใหม่

ก่อนหน้านี้ เมื่อเขียนการสืบค้นคอนเทนเนอร์ คุณต้องระบุเงื่อนไขการสืบค้นขนาดหรือลักษณะพร้อมกับชื่อคอนเทนเนอร์ และสร้างประเภทคอนเทนเนอร์ด้วย container-type คุณสมบัติ. ตอนนี้คุณสามารถสอบถามการมีอยู่ของคอนเทนเนอร์ที่มีชื่อตามชื่อโดยไม่มีเงื่อนไขเพิ่มเติมใดๆ นอกจากนี้ คุณไม่จำเป็นต้องกำหนด a อีกต่อไป container-type ในบรรพบุรุษหากคุณสอบถามด้วยชื่อเท่านั้น:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

แบบสอบถามแบบคอนเทนเนอร์สำหรับคุณสมบัติแบบกำหนดเองกลายเป็นข้อมูลพื้นฐาน

Firefox 151 แนะนำการสนับสนุนสำหรับ style() สอบถามเกี่ยวกับ @containerทำให้การสืบค้นแบบคอนเทนเนอร์พร้อมใช้งานสำหรับคุณสมบัติกำหนดเอง Baseline ใหม่

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

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

การโหลดแบบ Lazy Load สำหรับองค์ประกอบวิดีโอและเสียง

Chrome 148 มีการโหลดแบบเนทีฟสำหรับ และ องค์ประกอบด้วย loading="lazy" คุณลักษณะ.

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

API รูปภาพซ้อนภาพเอกสาร

Firefox 151 แนะนำการสนับสนุน Document Picture-in-Picture API บนแพลตฟอร์มเดสก์ท็อป

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

Web Serial API ขยายการรองรับแพลตฟอร์ม

Firefox 151 เพิ่มการรองรับ Web Serial API บนแพลตฟอร์มเดสก์ท็อป และ Chrome 148 เพิ่มการรองรับบน Android

Web Serial API เป็นวิธีสำหรับเว็บไซต์ในการอ่านและเขียนไปยังอุปกรณ์ซีเรียล เช่น ไมโครคอนโทรลเลอร์ เครื่องพิมพ์ 3 มิติ บอร์ดพัฒนา และฮาร์ดแวร์ต่อพ่วง ใน Firefox การใช้ Web Serial API กำหนดให้ผู้ใช้ติดตั้งโปรแกรมเสริมการอนุญาตไซต์ที่สร้างขึ้นแบบสังเคราะห์ เพื่อให้มั่นใจถึงกลไกที่ปลอดภัยและควบคุมสำหรับการจัดการการเข้าถึง

การเปิดตัวเบราว์เซอร์เบต้า

เบราว์เซอร์เวอร์ชันเบต้านำเสนอตัวอย่างคุณลักษณะต่างๆ ในเบราว์เซอร์เวอร์ชันถัดไปที่เสถียร เป็นเวลาที่ดีในการทดสอบคุณลักษณะใหม่ๆ หรือการลบออก ซึ่งอาจส่งผลกระทบต่อไซต์ของคุณก่อนที่โลกจะเผยแพร่ เบต้าใหม่ของเดือนนี้คือ Chrome 149 และ Firefox 152 ไม่มี Safari เบต้าในเดือนนี้

Chrome 149 เบต้ามีการอัปเดต CSS ที่น่าสนใจ เช่น การตกแต่งช่องว่าง CSS ซึ่งช่วยให้คุณจัดรูปแบบช่องว่าง (ช่องว่าง) ระหว่างรายการดิ้นและตารางได้ ยังรองรับ path() และ shape() แบบนี้ rect() และ xywh() ฟังก์ชั่นรูปร่างพื้นฐานใน shape-outside ทรัพย์สินและ path-length เป็นคุณสมบัติ CSS ในด้าน API วิธีการเลื่อนแบบเป็นโปรแกรมเช่น scrollTo(),
scrollBy()และ scrollIntoView() ตอนนี้ส่งคืนสัญญาที่แก้ไขแล้วเมื่อการเลื่อนอย่างราบรื่นเสร็จสมบูรณ์ และเพจที่มีการเชื่อมต่อ WebSocket ที่ใช้งานอยู่สามารถมีคุณสมบัติสำหรับการแคชไปข้างหน้า/ข้างหลัง (BFCache)

Firefox 152 beta แนะนำการสนับสนุนเต็มรูปแบบสำหรับ field-sizing คุณสมบัติซึ่งช่วยให้ตัวควบคุมแบบฟอร์มปรับขนาดให้พอดีกับเนื้อหาได้โดยอัตโนมัติ นอกจากนี้ยังเพิ่ม actions และ maxActions คุณสมบัติสำหรับ Notification
อินเตอร์เฟซและ options.pseudoElement สนับสนุนใน Element.getAnimations().