สำรวจฟีเจอร์ที่น่าสนใจบางส่วนซึ่งมีอยู่ในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเวอร์ชันเบต้าในช่วงเดือนพฤษภาคม 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()
การสนับสนุนเบราว์เซอร์
- 113
- 113
- 112
- 17.2
ฟีเจอร์สี CSS ระดับ 4
Firefox 113 มีสัญกรณ์ฟังก์ชัน color()
, lab()
, lch()
, oklab()
, oklch()
และ color-mix()
พร้อมด้วยคุณสมบัติการปรับสีแบบบังคับ ซึ่งหมายความว่าพื้นที่สีและฟังก์ชันใหม่นี้ได้รับการสนับสนุนในเครื่องมือค้นหาหลักทั้ง 3 ชนิดแล้ว ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่สีและฟังก์ชันเหล่านี้ได้ในคู่มือสี CSS ความละเอียดสูง
ควบคุมการเลือก :nth-child()
ได้มากขึ้น
นอกจากนี้ Firefox 113 ยังเพิ่มความสามารถในการส่งรายการตัวเลือกไปยัง :nth-child()
และ nth-last-child()
ด้วย เรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้และดูตัวอย่างในโพสต์การควบคุมการเลือก :nth-child() ด้วยไวยากรณ์ S มากขึ้น
การสนับสนุนเบราว์เซอร์
- 111
- 111
- 113
- 9
API สตรีมการบีบอัด
ขณะนี้มีการสนับสนุนในเครื่องมือค้นหาหลักทั้ง 3 ตัว เนื่องจากการรวมไว้ใน Firefox 113 ทำให้ Compressions Streams API ช่วยให้สามารถบีบอัดและคลายการบีบอัดสตรีมได้ ซึ่งหมายความว่าแอปพลิเคชัน JavaScript ไม่จำเป็นต้องรวมกลุ่มไลบรารีการบีบอัดอีกต่อไป
การซ้อน CSS
Safari 16.5 แก้ปัญหาส่วนใหญ่แล้ว แต่ยังเพิ่มการรองรับการซ้อน CSS โดยมีตัวเลือกการซ้อนใหม่ >
ที่ใช้ในการซ้อนกฎของรูปแบบที่เกี่ยวข้องในลักษณะที่นักพัฒนาซอฟต์แวร์ที่ใช้ตัวประมวลผลล่วงหน้าคุ้นเคย ดังนี้
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
การสร้างสมดุลระหว่างบรรทัดแรกกับ text-wrap: balance
จาก Chrome 114 คุณสามารถใช้ text-wrap: balance
ซึ่งจะช่วยให้คุณสร้างสมดุลระหว่างบรรทัดแรกได้โดยหลีกเลี่ยงไม่ให้มีเพียงคำเดียวในบรรทัดสุดท้ายซึ่งจะทำให้ได้ผลลัพธ์ที่อ่านและน่าอ่านยิ่งขึ้น ดูข้อมูลเพิ่มเติมได้ใน CSS text-wrap: balance
ชิป: คุกกี้ที่มีรัฐที่แบ่งพาร์ติชันเป็นอิสระ
CHIPS เป็นขั้นตอนหนึ่งในการเลิกใช้คุกกี้ของบุคคลที่สาม จึงมีการเลือกใช้คุกกี้ของบุคคลที่สามที่แบ่งพาร์ติชันโดยเว็บไซต์ระดับบนสุดโดยใช้แอตทริบิวต์คุกกี้ใหม่ Partitioned
CHIPS พร้อมใช้งานใน Chrome 114
Popover API
นอกจากนี้ใน Chrome 114 ยังมี Popover API ที่ช่วยให้สร้างองค์ประกอบอินเทอร์เฟซผู้ใช้ (UI) แบบชั่วคราวที่แสดงทับ UI ของเว็บแอปอื่นๆ ทั้งหมดได้ง่ายขึ้น
ซึ่งรวมถึงองค์ประกอบที่โต้ตอบกับผู้ใช้ เช่น เมนูการทำงาน คำแนะนำองค์ประกอบแบบฟอร์ม เครื่องมือเลือกเนื้อหา และ UI การสอน
แอตทริบิวต์ป๊อปโอเวอร์ใหม่ช่วยให้องค์ประกอบทั้งหมดแสดงในเลเยอร์บนสุดได้โดยอัตโนมัติ คุณจึงไม่ต้องกังวลเกี่ยวกับตำแหน่ง การซ้อนองค์ประกอบ การโฟกัส หรือการโต้ตอบกับแป้นพิมพ์สำหรับนักพัฒนาซอฟต์แวร์อีกต่อไป
ดูข้อมูลเพิ่มเติมในการแนะนำ 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
สำหรับข้อกำหนดจำเพาะของภาพเคลื่อนไหวบนเว็บด้วย การดำเนินการนี้จะเปิดใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนผ่าน CSS และ JavaScript
Firefox 114 มี WebTransport API ซึ่งเป็นการอัปเดต WebSocket ที่ทันสมัยเพื่อรองรับสตรีมหลายรายการ การสตรีมแบบทิศทางเดียว และการนำส่งในกรณีที่ไม่ได้สั่งซื้อ
ส่วนหนึ่งของซีรีส์ใหม่สำหรับเว็บซีรีส์