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

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

Rachel Andrew

เบราว์เซอร์เวอร์ชันเสถียร

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

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

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

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

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

การสนับสนุนเบราว์เซอร์

  • 102
  • 102
  • 112
  • 15.5

แหล่งที่มา

ฟังก์ชันการค่อยๆ เปลี่ยน linear()

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

การสนับสนุนเบราว์เซอร์

  • 113
  • 113
  • 112
  • 17.2

การซ้อน CSS

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

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

การสนับสนุนเบราว์เซอร์

  • 120
  • 120
  • 117
  • 17.2

แหล่งที่มา

CSS animation-composition

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

การสนับสนุนเบราว์เซอร์

  • 112
  • 112
  • 115
  • 16

แหล่งที่มา

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

หากคุณใช้โหมดไม่มีส่วนหัวของ Chrome เช่น ร่วมกับ Puppeteer 112 ก็จะนำโหมด "ไม่มีส่วนหัว" แบบใหม่มาใช้ ดูข้อมูลเพิ่มเติมได้ในโหมดไม่มีส่วนหัวของ 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() ได้มากขึ้นด้วยไวยากรณ์ S

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

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

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