สำรวจฟีเจอร์ที่น่าสนใจบางรายการที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนมีนาคม 2022
เบราว์เซอร์รุ่นที่เสถียร
ในเดือนมีนาคม Chrome 99, Chrome 100, Firefox 98 และ Safari 15.4 กลายเป็นเวอร์ชันเสถียร การดำเนินการนี้ทำให้แพลตฟอร์มมีฟีเจอร์ใหม่ๆ มากมาย และฟีเจอร์จำนวนมากที่เพิ่มเข้ามาทำให้ฟีเจอร์ดังกล่าวพร้อมใช้งานในเครื่องมือเบราว์เซอร์ทั้ง 3 รายการ ในโพสต์นี้ เรามุ่งเน้นที่การเพิ่มฟีเจอร์ที่ช่วยให้เบราว์เซอร์ต่างๆ ทำงานร่วมกันได้ แต่โปรดดูหมายเหตุเกี่ยวกับรุ่นเพื่อดูฟีเจอร์ทั้งหมดที่เพิ่มลงในเครื่องมือแต่ละรายการ
Chrome 99 และ Safari 15.4 มีเลเยอร์ตามลําดับชั้น กฎ @layer
จะกำหนดเลเยอร์แบบ Cascade ซึ่งช่วยให้คุณควบคุมความเฉพาะเจาะจงได้ ซึ่งตอนนี้ได้รวมเข้ากับ Firefox แล้ว จึงทำให้เลเยอร์ตามลำดับพร้อมใช้งานในเครื่องมือเบราว์เซอร์ทั้ง 3 รายการ ดูข้อมูลเพิ่มเติมเกี่ยวกับเลเยอร์ Cascade ได้ในเลเยอร์ Cascade กำลังจะพร้อมให้บริการในเบราว์เซอร์ของคุณ
Chrome 100 มีค่าใหม่ plus-lighter
สำหรับพร็อพเพอร์ตี้ mix-blend-mode ของ CSS ค่านี้มีประโยชน์เมื่อมีการเฟดองค์ประกอบ 2 รายการครอสกันเมื่อพิกเซลทั้งหมดหรือบางส่วนมีค่าเดียวกัน คุณสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับปัญหาที่แก้ไขได้ในหัวข้อขณะนี้ไม่สามารถทำให้องค์ประกอบ DOM 2 องค์ประกอบเสร็จสิ้นได้
การรองรับเบราว์เซอร์
Safari 15.4 มีพร็อพเพอร์ตี้ contain
ซึ่งช่วยให้ใช้การจำกัด CSS ได้
นอกจากนี้ใน Safari 15.4 ยังมี accent-color
ซึ่งช่วยให้คุณควบคุมสีเฉพาะจุดที่ใช้ในการควบคุมแบบฟอร์มบางอย่างได้
Firefox 98 และ Safari 15.4 ลงจอดองค์ประกอบ <dialog>
ซึ่งแสดงกล่องโต้ตอบ
นอกจากนี้ Safari 15.4 ยังรองรับคลาสจำลอง :focus-visible
อีกด้วย งานติดตั้งใช้งานนี้ดำเนินการโดย Igalia
การเปิดตัวเบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น
เวอร์ชันเบต้าใหม่ในเดือนมีนาคมคือ Chrome 101 และ Firefox 99
Chrome 101 เบต้ามีการเขียนโน้ตสี HWB ข้อมูลนี้ระบุสีตามสี ความขาว และความดำ คอมโพเนนต์อัลฟ่าจะระบุความทึบแสงเช่นเดียวกับเครื่องหมายสีอื่นๆ
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
Firefox 99 จะมีพร็อพเพอร์ตี้ pdfViewerEnabled
ของอินเทอร์เฟซ Navigator พร็อพเพอร์ตี้นี้ระบุว่าเบราว์เซอร์รองรับการแสดงไฟล์ PDF ในบรรทัดหรือไม่
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
ฟีเจอร์เบต้าเหล่านี้จะพร้อมใช้งานในเบราว์เซอร์เวอร์ชันเสถียรในเร็วๆ นี้
เป็นส่วนหนึ่งของซีรีส์ใหม่ในเว็บซีรีส์