สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนกรกฎาคม 2024
เบราว์เซอร์รุ่นที่เสถียร
ในเดือนกรกฎาคม 2024 Firefox 128, Safari 17.6 และ Chrome 127 กลายเป็นเวอร์ชันเสถียร โพสต์นี้จะกล่าวถึงฟีเจอร์ใหม่ที่เพิ่มลงในแพลตฟอร์มเว็บ
ไวยากรณ์สีสัมพัทธ์ของ CSS
Firefox 128 มีไวยากรณ์สีสัมพัทธ์ CSS ซึ่งช่วยให้คุณสร้างสีที่สัมพันธ์กับสีต้นทางได้
CSS ต่อไปนี้ทำให้สี indigo
จืดลงครึ่งหนึ่งโดยใช้ hsl()
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Browser Support
ดูตัวอย่างเพิ่มเติมได้ในบล็อกโพสต์ไวยากรณ์สีสัมพัทธ์ CSS ไวยากรณ์สีแบบสัมพัทธ์เป็นหนึ่งในพื้นที่ที่มุ่งเน้นสำหรับ Interop 2024 ดังนั้นการอัปเดตนี้จึงช่วยปรับปรุงคะแนนของ Firefox เวอร์ชันเสถียร
ข้อความแสดงแทนสำหรับพร็อพเพอร์ตี้ content
Firefox 128 รองรับข้อความแสดงแทนสำหรับพร็อพเพอร์ตี้ content
ของ CSS เมื่อพร็อพเพอร์ตี้ดังกล่าวมีรูปภาพ ข้อความแสดงแทนจะแสดงในต้นไม้การช่วยเหลือพิเศษ
ซึ่งหมายความว่าตอนนี้เบราว์เซอร์ทั้งหมดรองรับข้อความแสดงแทนสำหรับ content
แล้ว
Browser Support
การอัปเดตใน Chrome 127 ช่วยให้มั่นใจได้ว่า Chrome จะยอมรับองค์ประกอบจํานวนเท่าใดก็ได้ ไม่ใช่แค่สตริงเดียว ซึ่งช่วยให้ใช้ฟังก์ชัน attr()
ได้ เป็นต้น
พร็อพเพอร์ตี้ font-size-adjust
Chrome 127 มี font-size-adjust
ซึ่งเป็นพื้นที่ที่มุ่งเน้นของ Interop 2024 ด้วย
พร็อพเพอร์ตี้นี้มีประโยชน์สําหรับกรณีที่อาจใช้แบบอักษรสำรอง เนื่องจากช่วยให้คุณจับคู่ขนาดของแบบอักษรสำรองกับแบบอักษรตัวเลือกแรกได้
เมื่อใช้ Chrome เวอร์ชันนี้ พร็อพเพอร์ตี้ font-size-adjust
จะเป็นส่วนหนึ่งของฐานข้อมูลที่พร้อมใช้งานใหม่
การรองรับ View Transition API ใน iframe
Chrome 127 จะใช้การเปลี่ยนมุมมองเอกสารเดียวกันพร้อมกันในเฟรมหลักและ iframe ต้นทางเดียวกันได้
ก่อนหน้านี้ การแสดงการเปลี่ยนผ่านมุมมองโดยใช้ document.startViewTransition ใน iframe ต้นทางเดียวกันจะไม่ทำงานหากเฟรมหลักแสดงการเปลี่ยนผ่านในเวลาเดียวกัน ระบบจะข้ามการเปลี่ยนเฟรมของ iframe โดยอัตโนมัติ ตอนนี้ทรานซิชันทั้ง 2 รายการจะทำงาน
คอนเทนเนอร์การเลื่อนที่โฟกัสได้ของแป้นพิมพ์
ตั้งแต่ Chrome 127 เป็นต้นไป แถบเลื่อนจะโฟกัสได้ด้วยการคลิกและโฟกัสได้ด้วยการเขียนโปรแกรมโดยค่าเริ่มต้น แถบเลื่อนที่ไม่มีองค์ประกอบย่อยที่โฟกัสได้จะโฟกัสได้ด้วยแป้นพิมพ์โดยค่าเริ่มต้น
ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนแปลงนี้ในโพสต์แถบเลื่อนที่โฟกัสได้ด้วยแป้นพิมพ์
กฎ @property
Firefox 128 รองรับกฎ @property
และ JavaScript API ที่เกี่ยวข้อง ซึ่งหมายความว่าคุณสามารถสร้างพร็อพเพอร์ตี้ที่กำหนดเองของ CSS ที่กําหนดไวยากรณ์ การสืบทอด และค่าเริ่มต้น
ในตัวอย่างต่อไปนี้ พร็อพเพอร์ตี้ที่กำหนดเองจะกำหนดให้ยอมรับ<color>
ค่าเท่านั้น ไม่รับค่าที่รับช่วงมา และมีค่าเริ่มต้นเป็น hotpink
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
ตอนนี้กฎ @property
เป็นส่วนหนึ่งของ Baseline ที่เพิ่งเปิดตัว โปรดอ่านเพิ่มเติมใน @property: ตัวแปร CSS รุ่นถัดไปที่ตอนนี้รองรับเบราว์เซอร์ทุกรุ่น
ArrayBuffer
ที่ปรับขนาดได้และ SharedArrayBuffer
ที่ขยายได้
ตอนนี้ Firefox 128 รองรับArrayBuffer ที่ปรับขนาดได้และSharedArrayBuffer ที่ขยายขนาดได้ ซึ่งช่วยให้เปลี่ยนขนาดบัฟเฟอร์ได้โดยไม่ต้องจัดสรรบัฟเฟอร์ใหม่และคัดลอกข้อมูลเข้าไป พร็อพเพอร์ตี้เหล่านี้จะรวมอยู่ใน "เพิ่งพร้อมให้บริการ" ของข้อมูลพื้นฐานด้วย
คีย์เวิร์ด safe
ในพร็อพเพอร์ตี้ Flexbox
Safari 17.6 ส่วนใหญ่เป็นการแก้ไขฟีเจอร์ที่มีอยู่ แต่ก็มีคีย์เวิร์ด safe
สำหรับพร็อพเพอร์ตี้การจัดแนว Flexbox ด้วย
ซึ่งจะทำให้คีย์เวิร์ด safe
ทำงานร่วมกันได้กับเบราว์เซอร์ต่างๆ
Browser Support
คีย์เวิร์ด safe
จะป้องกันไม่ให้การจัดตำแหน่งที่เลือกทําให้เนื้อหาแสดงอยู่นอกพื้นที่ที่มองเห็นได้ CodePen ต่อไปนี้แสดงลักษณะการทำงานของโค้ดนี้เมื่อใช้กับรายการที่กึ่งกลาง หากการจัดแนว center
ทําให้ข้อมูลสูญหาย ระบบจะใช้ start
แทน
เบราว์เซอร์รุ่นเบต้า
เวอร์ชันเบต้าของเบราว์เซอร์จะแสดงตัวอย่างฟีเจอร์ที่จะอยู่ในเบราว์เซอร์เวอร์ชันเสถียรเวอร์ชันถัดไป นี่เป็นโอกาสที่ดีในการทดสอบฟีเจอร์ใหม่หรือการนําออกที่อาจส่งผลต่อเว็บไซต์ของคุณก่อนที่ผู้ใช้ทั่วโลกจะได้รับฟีเจอร์หรือการเปลี่ยนแปลงนั้น เบต้าเวอร์ชันใหม่คือ Firefox 129 และ Chrome 128 Safari 18 เวอร์ชันเบต้ายังอยู่ระหว่างการพัฒนา การเปิดตัวเหล่านี้จะเพิ่มฟีเจอร์ที่ยอดเยี่ยมมากมายลงในแพลตฟอร์ม โปรดดูรายละเอียดทั้งหมดในหมายเหตุของรุ่น ต่อไปนี้คือไฮไลต์บางส่วน
Chrome 128 มีพร็อพเพอร์ตี้ ruby-align
ของ CSS รวมถึงการเปลี่ยนแปลงเพื่อทำให้สามารถแบ่งบรรทัดภายในองค์ประกอบที่มี display: ruby
ได้ นอกจากนี้ พร็อพเพอร์ตี้ zoom
ยังได้รับการอัปเดตให้ตรงกับข้อกำหนดด้วย มีการอัปเดต AudioContext
API เพื่อเพิ่มการเรียกกลับที่กำหนดให้กับ AudiContext.onerror
ซึ่งจะรายงานข้อผิดพลาดในการสร้างและการแสดงผล AudioContext
Firefox 129 มีกฎ @starting-style
และพร็อพเพอร์ตี้ transition-behavior
พร็อพเพอร์ตี้เหล่านี้จะเป็นส่วนหนึ่งของ "Baseline Newly Available" เมื่อ Firefox 129 เปิดตัวเป็นเวอร์ชันเสถียร