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

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

Rachel Andrew

เบราว์เซอร์รุ่นที่เสถียร

ในเดือนเมษายน 2023 Firefox 112 และ Chrome 112 กลายเป็นเวอร์ชันเสถียร มาดูกันว่าการเปลี่ยนแปลงนี้ส่งผลต่อแพลตฟอร์มเว็บอย่างไร

แอตทริบิวต์ inert

Firefox 112 มีแอตทริบิวต์ inert ระดับส่วนกลาง แอตทริบิวต์นี้จะบอกให้เบราว์เซอร์ละเว้นองค์ประกอบ ซึ่งบ่งบอกถึงเนื้อหาที่ไม่ควรเป็นแบบอินเทอร์แอกทีฟ ได้แก่

  • ป้องกันไม่ให้เหตุการณ์ click เริ่มทํางาน
  • ป้องกันไม่ให้องค์ประกอบได้รับโฟกัส
  • ยกเว้นองค์ประกอบและเนื้อหาขององค์ประกอบนั้นจากต้นไม้การช่วยเหลือพิเศษ

ตอนนี้แอตทริบิวต์นี้ทํางานร่วมกันได้ในเครื่องมือทั้ง 3 รายการ

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

  • Chrome: 102
  • Edge: 102
  • Firefox: 112
  • Safari: 15.5

แหล่งที่มา

ฟังก์ชัน easing ของ linear()

linear() ฟังก์ชันการผ่อนปรนช่วยให้ใช้การหาค่าเฉลี่ยเชิงเส้นระหว่างจุดต่างๆ ได้ ซึ่งช่วยให้สร้างภาพเคลื่อนไหวที่ซับซ้อนมากขึ้นได้ เช่น เอฟเฟกต์การเด้งและยืดหยุ่น ฟังก์ชันนี้มีอยู่ใน Firefox 112

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

  • Chrome: 113
  • Edge: 113
  • Firefox: 112
  • Safari: 17.2.

การฝัง CSS

Chrome 112 เพิ่มการรองรับการฝัง CSS ซึ่งเป็นฟีเจอร์ที่นักพัฒนาซอฟต์แวร์จำนวนมากรอคอย การดำเนินการนี้จะแนะนำตัวเลือกการฝังใหม่ > ซึ่งใช้เพื่อฝังกฎสไตล์ที่เกี่ยวข้องในลักษณะที่นักพัฒนาซอฟต์แวร์ที่เคยใช้โปรแกรมประมวลผลล่วงหน้าจะคุ้นเคย

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

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

  • Chrome: 120
  • Edge: 120
  • Firefox: 117
  • Safari: 17.2.

แหล่งที่มา

CSS animation-composition

Chrome 112 ยังรองรับ animation-composition ด้วย ดูวิธีการทำงานของพร็อพเพอร์ตี้นี้ในระบุวิธีที่เอฟเฟกต์ภาพเคลื่อนไหวหลายรายการควรใช้ร่วมกับองค์ประกอบภาพเคลื่อนไหว

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

  • Chrome: 112
  • Edge: 112
  • Firefox: 115
  • Safari: 16

แหล่งที่มา

โหมดไม่มีส่วนหัวแบบใหม่

หากคุณใช้โหมด Headless ของ Chrome เช่น กับ Puppeteer เวอร์ชัน 112 จะมีโหมด Headless ใหม่ทั้งหมด ดูข้อมูลเกี่ยวกับเรื่องนี้ได้ในโหมด Headless ของ Chrome ได้รับการอัปเกรด

เบราว์เซอร์รุ่นเบต้า

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

Firefox 113 มีฟังก์ชัน color(), lab(), lch(), oklab() และ oklch() รวมถึงฟังก์ชัน color-mix() จาก CSS Color 5 และพร็อพเพอร์ตี้ forced-color-adjust

นอกจากนี้ Firefox ยังมีไวยากรณ์ nth-child of <selector> ซึ่งช่วยให้คุณควบคุมองค์ประกอบที่ต้องการเลือกได้ดียิ่งขึ้น อ่านเพิ่มเติมได้ที่การควบคุมการเลือก :nth-child() เพิ่มเติมด้วยไวยากรณ์ of S

สำหรับ CSS นั้น Chrome 113 มีฟีเจอร์สื่อ overflow-inline, overflow-block และ update รวมถึงรวมอยู่ในฟังก์ชัน easing ของ linear() และประเภท image-set() ที่ไม่มีคำนำหน้า

Chrome 113 ยังมี WebGPU ซึ่งเป็น API กราฟิกสำหรับเว็บที่สืบทอดมาจาก WebGL และ WebGL 2 ด้วย โดยจะมีฟีเจอร์สมัยใหม่ เช่น การประมวลผลด้วย GPU, การเข้าถึงฮาร์ดแวร์ GPU ที่มีประสิทธิภาพมากขึ้น ความสามารถในการแสดงผลไปยังผืนผ้าใบหลายผืนจากอุปกรณ์กราฟิกเครื่องเดียว และประสิทธิภาพที่ดีขึ้นและคาดการณ์ได้มากขึ้น

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