แพลตฟอร์มเว็บใหม่ในเดือนมีนาคม

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

ในเดือนมีนาคม Chrome 99, Chrome 100, Firefox 98 และ Safari 15.4 กลายเป็นเวอร์ชันเสถียร การดำเนินการนี้ทำให้แพลตฟอร์มมีฟีเจอร์ใหม่ๆ มากมาย และฟีเจอร์จำนวนมากที่เพิ่มเข้ามาทำให้ฟีเจอร์ดังกล่าวพร้อมใช้งานในเครื่องมือเบราว์เซอร์ทั้ง 3 รายการ ในโพสต์นี้ เรามุ่งเน้นที่การเพิ่มฟีเจอร์ที่ช่วยให้เบราว์เซอร์ต่างๆ ทำงานร่วมกันได้ แต่โปรดดูหมายเหตุเกี่ยวกับรุ่นเพื่อดูฟีเจอร์ทั้งหมดที่เพิ่มลงในเครื่องมือแต่ละรายการ

Chrome 99 และ Safari 15.4 มีเลเยอร์ตามลําดับชั้น กฎ @layer จะกำหนดเลเยอร์แบบ Cascade ซึ่งช่วยให้คุณควบคุมความเฉพาะเจาะจงได้ ซึ่งตอนนี้ได้รวมเข้ากับ Firefox แล้ว จึงทำให้เลเยอร์ตามลำดับพร้อมใช้งานในเครื่องมือเบราว์เซอร์ทั้ง 3 รายการ ดูข้อมูลเพิ่มเติมเกี่ยวกับเลเยอร์ Cascade ได้ในเลเยอร์ Cascade กำลังจะพร้อมให้บริการในเบราว์เซอร์ของคุณ

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

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97
  • Safari: 15.4

แหล่งที่มา

Chrome 100 มีค่าใหม่ plus-lighter สำหรับพร็อพเพอร์ตี้ mix-blend-mode ของ CSS ค่านี้มีประโยชน์เมื่อมีการเฟดองค์ประกอบ 2 รายการครอสกันเมื่อพิกเซลทั้งหมดหรือบางส่วนมีค่าเดียวกัน คุณสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับปัญหาที่แก้ไขได้ในหัวข้อขณะนี้ไม่สามารถทำให้องค์ประกอบ DOM 2 องค์ประกอบเสร็จสิ้นได้

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

  • Chrome: 100
  • Edge: 100
  • Firefox: 99
  • Safari: 9.1

Safari 15.4 มีพร็อพเพอร์ตี้ contain ซึ่งช่วยให้ใช้การจำกัด CSS ได้

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

  • Chrome: 52
  • Edge: 79
  • Firefox: 69
  • Safari: 15.4

แหล่งที่มา

นอกจากนี้ใน Safari 15.4 ยังมี accent-color ซึ่งช่วยให้คุณควบคุมสีเฉพาะจุดที่ใช้ในการควบคุมแบบฟอร์มบางอย่างได้

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

  • Chrome: 93
  • ขอบ: 93
  • Firefox: 92
  • Safari: 15.4

แหล่งที่มา

Firefox 98 และ Safari 15.4 ลงจอดองค์ประกอบ <dialog> ซึ่งแสดงกล่องโต้ตอบ

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

  • Chrome: 37.
  • Edge: 79
  • Firefox: 98
  • Safari: 15.4

แหล่งที่มา

นอกจากนี้ Safari 15.4 ยังรองรับคลาสจำลอง :focus-visible อีกด้วย งานติดตั้งใช้งานนี้ดำเนินการโดย Igalia

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

  • Chrome: 86
  • Edge: 86
  • Firefox: 85
  • Safari: 15.4

แหล่งที่มา

การเปิดตัวเบราว์เซอร์รุ่นเบต้า

เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น

เวอร์ชันเบต้าใหม่ในเดือนมีนาคมคือ Chrome 101 และ Firefox 99

Chrome 101 เบต้ามีการเขียนโน้ตสี HWB ข้อมูลนี้ระบุสีตามสี ความขาว และความดำ คอมโพเนนต์อัลฟ่าจะระบุความทึบแสงเช่นเดียวกับเครื่องหมายสีอื่นๆ

h1 {
 
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

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

  • Chrome: 101
  • Edge: 101
  • Firefox: 96
  • Safari: 15.

แหล่งที่มา

Firefox 99 จะมีพร็อพเพอร์ตี้ pdfViewerEnabled ของอินเทอร์เฟซ Navigator พร็อพเพอร์ตี้นี้ระบุว่าเบราว์เซอร์รองรับการแสดงไฟล์ PDF ในบรรทัดหรือไม่

if (!navigator.pdfViewerEnabled) {
 
// The browser does not support inline viewing of PDF files.
}

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

  • Chrome: 94
  • Edge: 94
  • Firefox: 99
  • Safari: 16.4

แหล่งที่มา

ฟีเจอร์เบต้าเหล่านี้จะพร้อมใช้งานในเบราว์เซอร์เวอร์ชันเสถียรในเร็วๆ นี้

เป็นส่วนหนึ่งของซีรีส์ใหม่ในเว็บซีรีส์