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

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

Rachel Andrew

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

ในเดือนพฤษภาคม 2023 Firefox 113, Chrome 113, Chrome 114 และ Safari 16.5 มีความเสถียรแล้ว เรามาดูความหมายของแพลตฟอร์มเว็บนี้กัน

WebGPU

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

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

  • 113
  • 113
  • x

แหล่งที่มา

ชุดโดเมนของบุคคลที่หนึ่ง

ชุดโดเมนของบุคคลที่หนึ่ง (FPS) เป็นส่วนหนึ่งของ Privacy Sandbox เป็นวิธีที่องค์กรใช้ในการประกาศความสัมพันธ์ระหว่างเว็บไซต์ เพื่อให้เบราว์เซอร์เลือกได้ว่าจะอนุญาตให้เว็บไซต์ภายในชุดเข้าถึงคุกกี้ของบุคคลที่สามแบบจำกัดเมื่อใด FPS เริ่มการเปิดตัวแบบทีละขั้นใน Chrome 113

ฟีเจอร์สื่อ CSS และอื่นๆ

สำหรับ CSS นั้น Chrome 113 จะมีฟีเจอร์สื่อ overflow-inline และ overflow-block

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

  • 113
  • 113
  • 66
  • 17

แหล่งที่มา

และฟีเจอร์สื่อ update

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

  • 113
  • 113
  • 102
  • 17

แหล่งที่มา

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

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

  • 113
  • 113
  • 112
  • 17.2

ฟีเจอร์สี CSS ระดับ 4

Firefox 113 มีสัญกรณ์ฟังก์ชัน color(), lab(), lch(), oklab(), oklch() และ color-mix() พร้อมด้วยคุณสมบัติการปรับสีแบบบังคับ ซึ่งหมายความว่าพื้นที่สีและฟังก์ชันใหม่นี้ได้รับการสนับสนุนในเครื่องมือค้นหาหลักทั้ง 3 ชนิดแล้ว ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่สีและฟังก์ชันเหล่านี้ได้ในคู่มือสี CSS ความละเอียดสูง

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

  • 111
  • 111
  • 113
  • 16.2

แหล่งที่มา

ควบคุมการเลือก :nth-child() ได้มากขึ้น

นอกจากนี้ Firefox 113 ยังเพิ่มความสามารถในการส่งรายการตัวเลือกไปยัง :nth-child() และ nth-last-child() ด้วย เรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้และดูตัวอย่างในโพสต์การควบคุมการเลือก :nth-child() ด้วยไวยากรณ์ S มากขึ้น

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

  • 111
  • 111
  • 113
  • 9

API สตรีมการบีบอัด

ขณะนี้มีการสนับสนุนในเครื่องมือค้นหาหลักทั้ง 3 ตัว เนื่องจากการรวมไว้ใน Firefox 113 ทำให้ Compressions Streams API ช่วยให้สามารถบีบอัดและคลายการบีบอัดสตรีมได้ ซึ่งหมายความว่าแอปพลิเคชัน JavaScript ไม่จำเป็นต้องรวมกลุ่มไลบรารีการบีบอัดอีกต่อไป

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

  • 80
  • 80
  • 113
  • 16.4

แหล่งที่มา

การซ้อน CSS

Safari 16.5 แก้ปัญหาส่วนใหญ่แล้ว แต่ยังเพิ่มการรองรับการซ้อน CSS โดยมีตัวเลือกการซ้อนใหม่ > ที่ใช้ในการซ้อนกฎของรูปแบบที่เกี่ยวข้องในลักษณะที่นักพัฒนาซอฟต์แวร์ที่ใช้ตัวประมวลผลล่วงหน้าคุ้นเคย ดังนี้

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

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

  • 120
  • 120
  • 117
  • 17.2

แหล่งที่มา

การสร้างสมดุลระหว่างบรรทัดแรกกับ text-wrap: balance

จาก Chrome 114 คุณสามารถใช้ text-wrap: balance ซึ่งจะช่วยให้คุณสร้างสมดุลระหว่างบรรทัดแรกได้โดยหลีกเลี่ยงไม่ให้มีเพียงคำเดียวในบรรทัดสุดท้ายซึ่งจะทำให้ได้ผลลัพธ์ที่อ่านและน่าอ่านยิ่งขึ้น ดูข้อมูลเพิ่มเติมได้ใน CSS text-wrap: balance

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

  • 114
  • 114
  • 121
  • 17.4

แหล่งที่มา

ชิป: คุกกี้ที่มีรัฐที่แบ่งพาร์ติชันเป็นอิสระ

CHIPS เป็นขั้นตอนหนึ่งในการเลิกใช้คุกกี้ของบุคคลที่สาม จึงมีการเลือกใช้คุกกี้ของบุคคลที่สามที่แบ่งพาร์ติชันโดยเว็บไซต์ระดับบนสุดโดยใช้แอตทริบิวต์คุกกี้ใหม่ Partitioned CHIPS พร้อมใช้งานใน Chrome 114

Popover API

นอกจากนี้ใน Chrome 114 ยังมี Popover API ที่ช่วยให้สร้างองค์ประกอบอินเทอร์เฟซผู้ใช้ (UI) แบบชั่วคราวที่แสดงทับ UI ของเว็บแอปอื่นๆ ทั้งหมดได้ง่ายขึ้น

ซึ่งรวมถึงองค์ประกอบที่โต้ตอบกับผู้ใช้ เช่น เมนูการทำงาน คำแนะนำองค์ประกอบแบบฟอร์ม เครื่องมือเลือกเนื้อหา และ UI การสอน

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

ดูข้อมูลเพิ่มเติมในการแนะนำ API ป๊อปอัป

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

  • 114
  • 114
  • 120
  • 17

แหล่งที่มา

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

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

Chrome 115 มีหลายค่าสำหรับพร็อพเพอร์ตี้ display ของ CSS ซึ่งหมายความว่า display: flex จะกลายเป็น display: block flex และ display: block กลายเป็น display: block flow ค่าเดียวจะยังคงเป็นคีย์เวิร์ดเดิม และเมื่ออยู่ใน Chrome เวอร์ชันเสถียรจะทำให้มีค่าหลายค่าที่ใช้ได้จากทุกเครื่องมือ

นอกจากนี้ใน Chrome 115 ยังมีส่วนขยาย ScrollTimeline และ ViewTimeline สำหรับข้อกำหนดจำเพาะของภาพเคลื่อนไหวบนเว็บด้วย การดำเนินการนี้จะเปิดใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนผ่าน CSS และ JavaScript

Firefox 114 มี WebTransport API ซึ่งเป็นการอัปเดต WebSocket ที่ทันสมัยเพื่อรองรับสตรีมหลายรายการ การสตรีมแบบทิศทางเดียว และการนำส่งในกรณีที่ไม่ได้สั่งซื้อ

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