สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนพฤศจิกายน 2022
เบราว์เซอร์รุ่นที่เสถียร
ในเดือนพฤศจิกายน 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
Federated Credential Management 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
หน่วยเหล่านี้เป็นหน่วยความยาวที่สัมพันธ์กับขนาดของคอนเทนเนอร์การค้นหา
เป็นส่วนหนึ่งของชุดวิดีโอ "เพิ่งเคยใช้เว็บ"