สำรวจฟีเจอร์ที่น่าสนใจบางส่วนในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนพฤษภาคม 2023
รุ่นต่างๆ ของเบราว์เซอร์ที่เสถียร
ในเดือนพฤษภาคม 2023 Firefox 113, Chrome 113, Chrome 114 และ Safari 16.5 ได้มีความเสถียรแล้ว มาดูกันว่าการเปลี่ยนแปลงนี้ส่งผลต่อแพลตฟอร์มเว็บอย่างไร
WebGPU
Chrome 113 มี WebGPU ซึ่งเป็น API กราฟิกสำหรับเว็บที่สืบทอดมาจาก WebGL และ WebGL 2 โดยมีฟีเจอร์ที่ทันสมัย เช่น การประมวลผล GPU, การเข้าถึงฮาร์ดแวร์ GPU เหนือศีรษะ ความสามารถในการแสดงผลไปยัง Canvas หลายใบจากอุปกรณ์กราฟิกเดียว และประสิทธิภาพที่ดีกว่าและคาดการณ์ได้มากขึ้น
ชุดโดเมนของบุคคลที่หนึ่ง
ชุดโดเมนของบุคคลที่หนึ่ง (FPS) เป็นส่วนหนึ่งของ Privacy Sandbox ซึ่งเป็นวิธีที่องค์กรต่างๆ สามารถประกาศความสัมพันธ์ระหว่างเว็บไซต์ เพื่อให้เบราว์เซอร์สามารถตัดสินใจว่าจะอนุญาตการเข้าถึงคุกกี้ของบุคคลที่สามแบบจำกัดสำหรับเว็บไซต์ภายในชุดเมื่อใด FPS เริ่มการเปิดตัวแบบทีละขั้นใน Chrome 113
ฟีเจอร์สื่อ CSS และอื่นๆ
สำหรับ CSS นั้น Chrome 113 มีฟีเจอร์สื่อ overflow-inline
และ overflow-block
และฟีเจอร์สื่อ update
นอกจากนี้ยังมีlinear()
ฟังก์ชันการผ่อนปรน ซึ่งคุณสามารถดูข้อมูลเพิ่มเติมได้ในบทความสร้างเส้นโค้งภาพเคลื่อนไหวที่ซับซ้อนใน CSS ด้วยlinear()
ฟังก์ชันการผ่อนปรน
การรองรับเบราว์เซอร์
ฟีเจอร์ระดับ 4 ของสี CSS
Firefox 113 มีนิพจน์ฟังก์ชัน color()
, lab()
, lch()
, oklab()
, oklch()
และ color-mix()
พร้อมด้วยพร็อพเพอร์ตี้ forced-color-adjust ซึ่งหมายความว่าตอนนี้ทั้ง 3 เครื่องมือหลักรองรับพื้นที่สีและฟังก์ชันใหม่แล้ว ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่สีและฟังก์ชันเหล่านี้ได้ในคู่มือสี CSS ความละเอียดสูง
ควบคุมการเลือก :nth-child()
ได้มากขึ้น
นอกจากนี้ Firefox 113 ยังเพิ่มความสามารถในการส่งรายการตัวเลือกไปยัง :nth-child()
และ nth-last-child()
อีกด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้และดูตัวอย่างได้ในโพสต์ควบคุมการเลือก :nth-child() ได้มากขึ้นด้วยไวยากรณ์ of S
การรองรับเบราว์เซอร์
Compressions Streams API
ตอนนี้ Compression Streams API รองรับทั้ง 3 เครื่องมือหลักแล้วเนื่องจากรวมอยู่ใน Firefox 113 ซึ่งช่วยให้สามารถบีบอัดและขยายสตรีมได้ ซึ่งหมายความว่าแอปพลิเคชัน JavaScript ไม่จำเป็นต้องรวมไลบรารีการบีบอัดไว้อีกต่อไป
การฝัง CSS
Safari 16.5 แก้ไขปัญหาส่วนใหญ่แล้ว แต่ยังเพิ่มการรองรับการฝัง CSS ด้วยตัวเลือกการฝังใหม่ >
ซึ่งใช้เพื่อฝังกฎรูปแบบที่เกี่ยวข้องในลักษณะที่นักพัฒนาซอฟต์แวร์ที่เคยใช้ตัวประมวลผลล่วงหน้าจะคุ้นเคย
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
การสร้างสมดุลระหว่างบรรทัดแรกกับ text-wrap: balance
คุณสามารถใช้ text-wrap: balance
ได้จาก Chrome เวอร์ชัน 114 เป็นต้นไป วิธีนี้ช่วยให้คุณปรับสมดุลบรรทัดแรกได้ หลีกเลี่ยงปัญหาที่มีเพียงคําเดียวในบรรทัดสุดท้าย และช่วยให้ผลลัพธ์ดูน่าพอใจและอ่านง่ายขึ้น ดูข้อมูลเพิ่มเติมได้ใน CSS text-wrap: Balance
CHIPS: Cookies Having Independent Partitioned State
CHIPS ช่วยให้เลือกใช้คุกกี้ของบุคคลที่สามได้โดยแบ่งพาร์ติชันตามเว็บไซต์ระดับบนสุดโดยใช้แอตทริบิวต์คุกกี้ใหม่ Partitioned
ซึ่งเป็นส่วนหนึ่งของการเลิกใช้งานคุกกี้ของบุคคลที่สาม CHIPS พร้อมใช้งานใน Chrome 114
Popover API
นอกจากนี้ ใน Chrome 114 ยังมี Popover API ที่ช่วยให้สร้างองค์ประกอบอินเทอร์เฟซผู้ใช้ (UI) แบบชั่วคราวซึ่งจะแสดงบน UI ของเว็บแอปอื่นๆ ทั้งหมดได้ง่ายขึ้น
ซึ่งรวมถึงองค์ประกอบที่ผู้ใช้โต้ตอบได้ เช่น เมนูการดำเนินการ คำแนะนำองค์ประกอบแบบฟอร์ม เครื่องมือเลือกเนื้อหา และ UI การสอน
แอตทริบิวต์ป๊อปอัปใหม่ช่วยให้องค์ประกอบใดก็ตามแสดงในเลเยอร์บนสุดโดยอัตโนมัติ ซึ่งหมายความว่านักพัฒนาแอปไม่ต้องกังวลเกี่ยวกับการจัดตำแหน่ง การวางซ้อนองค์ประกอบ โฟกัส หรือการโต้ตอบด้วยแป้นพิมพ์อีกต่อไป
ดูข้อมูลเพิ่มเติมในขอแนะนำ popover API
เบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น เบต้าเวอร์ชันใหม่ ได้แก่ 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 เวอร์ชันทันสมัยที่รองรับสตรีมหลายรายการ สตรีมแบบทิศทางเดียว และการนำส่งที่ไม่เรียงตามลำดับ
เป็นส่วนหนึ่งของชุดวิดีโอ "เพิ่งเคยใช้เว็บ"