สำรวจฟีเจอร์ที่น่าสนใจบางส่วนซึ่งมีอยู่ในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนมีนาคม 2022
เบราว์เซอร์เวอร์ชันเสถียร
ในเดือนมีนาคม Chrome 99, Chrome 100, Firefox 98 และ Safari 15.4 เริ่มเสถียรแล้ว การทำเช่นนี้ได้นำฟีเจอร์ใหม่ๆ ทั้งชุดมาสู่แพลตฟอร์ม และส่วนเพิ่มเติมเหล่านี้จำนวนมากทำให้ฟีเจอร์นี้พร้อมใช้งานในเครื่องมือเบราว์เซอร์ทั้ง 3 รายการ ในโพสต์นี้ ฉันเน้นไปที่ส่วนเพิ่มเติมที่ทำให้เราสามารถทำงานร่วมกันข้ามเบราว์เซอร์ได้ แต่อย่าลืมดูบันทึกประจำรุ่นเพื่อดูฟีเจอร์ทั้งหมดที่เพิ่มเข้ามาในแต่ละเครื่องมือ
Chrome 99 และ Safari 15.4 มีเลเยอร์แบบ Cascade กฎแอตทริบิวต์ @layer จะกำหนดเลเยอร์แบบ Cascade เพื่อช่วยให้ควบคุมความจำเพาะได้ พวกมันจะมาร่วมกับ Firefox ซึ่งทำให้การเรียงซ้อนเลเยอร์ใช้ได้ในเครื่องมือเบราว์เซอร์ทั้ง 3 อย่างนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการเรียงซ้อนเลเยอร์ในเลเยอร์ Cascade กำลังจะมาในเบราว์เซอร์ของคุณ
Chrome 100 มีค่าใหม่ของ plus-lighter สำหรับพร็อพเพอร์ตี้ mix-blend-mode ของ CSS ค่านี้มีประโยชน์เมื่อปรับข้ามองค์ประกอบ 2 รายการเมื่อพิกเซลทั้งหมดหรือบางส่วนมีค่าเหมือนกัน อ่านข้อมูลเพิ่มเติมเกี่ยวกับโจทย์ที่แก้ไขปัญหานี้ได้ในการเฟดองค์ประกอบ DOM ทั้ง 2 รายการเป็นไปไม่ได้ในปัจจุบัน
การสนับสนุนเบราว์เซอร์
- 100
- 100
- 99
- 9.1
Safari 15.4 มีพร็อพเพอร์ตี้ contain ที่ช่วยให้ควบคุม CSS ได้
นอกจากนี้ใน Safari 15.4 คือ accent-color ซึ่งช่วยให้ควบคุมสีเฉพาะจุดที่ใช้ในการควบคุมแบบฟอร์มบางรายการได้
Firefox 98 และ Safari 15.4 ลงจอดที่องค์ประกอบ <dialog> ซึ่งแสดงถึงกล่องโต้ตอบ
Safari 15.4 ยังรองรับ Pseudo-class ของ :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.
}
ฟีเจอร์เบต้าเหล่านี้จะเข้าสู่เบราว์เซอร์ที่เสถียรในเร็วๆ นี้
ส่วนหนึ่งของซีรีส์ใหม่สำหรับเว็บซีรีส์