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

สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนพฤศจิกายน 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

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

เป็นส่วนหนึ่งของชุดวิดีโอ "เพิ่งเคยใช้เว็บ"