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

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

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

WebGPU

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

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

  • Chrome: 113
  • ขอบ: 113
  • ตัวอย่างเทคโนโลยี Firefox: สนับสนุน
  • Safari Technology Preview: รองรับ

แหล่งที่มา

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

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

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

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

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

  • Chrome: 113
  • Edge: 113
  • Firefox: 66
  • Safari: 17.

แหล่งที่มา

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

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

  • Chrome: 113
  • Edge: 113
  • Firefox: 102
  • Safari: 17.

แหล่งที่มา

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

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

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

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

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

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

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Safari: 16.2

แหล่งที่มา

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

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

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

  • Chrome: 111
  • ขอบ: 111
  • Firefox: 113
  • Safari: 9.

Compressions Streams API

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

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

  • Chrome: 80.
  • Edge: 80
  • Firefox: 113
  • Safari: 16.4

แหล่งที่มา

การฝัง CSS

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

.nesting {
 
color: hotpink;

 
> .is {
   
color: rebeccapurple;

   
> .awesome {
     
color: deeppink;
   
}
 
}
}

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

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

แหล่งที่มา

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

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

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

  • Chrome: 114
  • Edge: 114
  • Firefox: 121
  • Safari: 17.4

แหล่งที่มา

CHIPS: Cookies Having Independent Partitioned State

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

Popover API

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

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

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

ดูข้อมูลเพิ่มเติมในขอแนะนำ popover API

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

  • Chrome: 114
  • Edge: 114
  • Firefox: 120
  • Safari: 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 สำหรับข้อกำหนดของ Web Animations ด้วย ซึ่งจะเปิดใช้ภาพเคลื่อนไหวที่ทำงานตามการเลื่อนผ่าน CSS และ JavaScript

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

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