ฟีเจอร์ใหม่ของแพลตฟอร์มเว็บในเดือนพฤศจิกายน

สำรวจฟีเจอร์ที่น่าสนใจบางส่วนซึ่งมีอยู่ในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนพฤศจิกายน 2022

Rachel Andrew

เบราว์เซอร์เวอร์ชันเสถียร

ในเดือนพฤศจิกายน Firefox 107 และ Chrome 108 เริ่มเสถียรแล้ว เรามาดูความหมายของแพลตฟอร์มเว็บนี้กัน

การเปลี่ยนแปลงการทำงานของวิวพอร์ตสำหรับเลย์เอาต์ใน Chrome บน Android

มีการเปลี่ยนแปลงลักษณะการทำงานของวิวพอร์ตของเลย์เอาต์จาก Chrome 108 บน Android เมื่อแป้นพิมพ์บนหน้าจอแสดง อ่านข้อมูลเพิ่มเติมได้ที่เตรียมพร้อมสำหรับการเปลี่ยนแปลงลักษณะการทำงานของการปรับขนาดวิวพอร์ตที่กำลังจะเกิดขึ้นกับ Chrome บน Android

หน่วยวิวพอร์ตใหม่

นอกจากนี้ใน Chrome 108 ยังมีหน่วยวิวพอร์ตของ CSS ใหม่อีกด้วย ซึ่งประกอบด้วยขนาดเล็ก (svw, svh, svi, svb, svmin, svmax), ขนาดใหญ่ (lvw, lvh, lvi, lvb, lvmin, lvmax), ไดนามิก (dvw, dvh, dvi, dvb, dvmin, dvmax) และตรรกะ (vi) vb) หน่วยเหล่านี้มีการติดตั้งใช้งานอยู่แล้วใน Firefox และ Safari ซึ่งหมายความว่าตอนนี้เรามีการทำงานร่วมกันในเครื่องมือเบราว์เซอร์หลัก 3 รายการสำหรับหน่วยเหล่านี้

อ่านหน่วยวิวพอร์ตขนาดใหญ่ ขนาดเล็ก และแบบไดนามิก

Firefox 107 รองรับพร็อพเพอร์ตี้ CSS แบบย่อ contain-intrinsic-size ควบคู่ไปกับ contain-intrinsic-width, contain-intrinsic-height และพร็อพเพอร์ตี้เชิงตรรกะ contain-intrinsic-block-size และ contain-intrinsic-inline-size แบบยาว

ตัวแปรเหล่านี้ใช้เพื่อระบุขนาดขององค์ประกอบ UI ที่อยู่ภายใต้การกักเก็บขนาด วิธีนี้ช่วยให้ User Agent กำหนดขนาดขององค์ประกอบโดยไม่ต้องแสดงผลองค์ประกอบย่อยได้ และมีประโยชน์เมื่อองค์ประกอบหนึ่งอยู่ภายใต้การกำหนดขนาด

การรองรับคีย์เวิร์ด avoid ของการแยกส่วน CSS

Chrome 108 รองรับค่า avoid ของคุณสมบัติการกระจายตัวของ CSS break-before, break-after และ break-inside เมื่อพิมพ์ ค่านี้จะบอกเบราว์เซอร์เพื่อหลีกเลี่ยงการหยุดทำงานก่อน หลัง หรือภายในองค์ประกอบที่ใช้องค์ประกอบนั้น ตัวอย่างเช่น CSS ต่อไปนี้จะทำให้ไม่มีตัวเลขที่เสียในตัวแบ่งหน้า

figure {
    break-inside: avoid;
}

การเพิ่มนี้เกิดจากการรวมการรองรับการพิมพ์โดยใช้ LayoutNG ทำให้ประสบการณ์การใช้งานที่ทันสมัยและช่วยลดข้อบกพร่อง ดูข้อมูลเพิ่มเติมเกี่ยวกับ LayoutNG

API การจัดการข้อมูลเข้าสู่ระบบแบบรวมศูนย์

Federated Credential Management API (FedCM) ให้นามธรรมสำหรับโฟลว์ข้อมูลประจำตัวแบบรวมศูนย์บนเว็บ โดยจะแสดงกล่องโต้ตอบที่ใช้สื่อกลางของเบราว์เซอร์ที่ช่วยให้ผู้ใช้เลือกบัญชีจากผู้ให้บริการระบุเพื่อเข้าสู่ระบบเว็บไซต์ได้ FedCM จะจัดส่ง Chrome 108 ดูข้อมูลเพิ่มเติมได้ในบล็อกโพสต์ประกาศของ FedCM

เบราว์เซอร์รุ่นเบต้า

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

Firefox 108 รองรับแอตทริบิวต์ height และ width สำหรับองค์ประกอบ <source> เมื่อเป็นองค์ประกอบย่อยขององค์ประกอบ <picture> แอตทริบิวต์เหล่านี้ยอมรับความสูงหรือความกว้างของรูปภาพเป็นพิกเซลซึ่งเป็นจำนวนเต็มที่ไม่มีหน่วย

เราจะติดตั้งใช้งานการค้นหาคอนเทนเนอร์ใน Firefox ด้านหลัง Flag layout.css.container-queries.enabled ใน Firefox 108 เบต้า คุณจะเห็นหน่วยความยาวของการค้นหาคอนเทนเนอร์ ซึ่งได้แก่ cqw, cqh, cqi, cqb, cqmin, cqmax ซึ่งก็คือหน่วยความยาวที่สัมพันธ์กับขนาดของคอนเทนเนอร์ข้อความค้นหา

ส่วนหนึ่งของซีรีส์ใหม่สำหรับเว็บซีรีส์