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

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

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

มีการเปลี่ยนแปลงลักษณะการทำงานของวิวพอร์ตเลย์เอาต์จาก 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 รายการสําหรับหน่วยเหล่านี้

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

การรองรับเบราว์เซอร์

  • Chrome: 108
  • Edge: 108
  • Firefox: 101.
  • Safari: 15.4

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

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

การรองรับเบราว์เซอร์

  • Chrome: 83
  • Edge: 83
  • Firefox: 107
  • Safari: 17.

แหล่งที่มา

การรองรับคีย์เวิร์ด 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 หน่วยเหล่านี้เป็นหน่วยความยาวที่สัมพันธ์กับขนาดของคอนเทนเนอร์การค้นหา

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