ฟีเจอร์ใหม่ของแพลตฟอร์มเว็บในเดือนกรกฎาคม

สำรวจฟีเจอร์ที่น่าสนใจบางส่วนที่เปิดตัวในเว็บเบราว์เซอร์เวอร์ชันเสถียรและเบต้าในช่วงเดือนกรกฎาคม 2024

Rachel Andrew

เบราว์เซอร์รุ่นที่เสถียร

ในเดือนกรกฎาคม 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);
}

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

  • Chrome: 119
  • Edge: 119
  • Firefox: 128
  • Safari: 16.4

ดูตัวอย่างเพิ่มเติมได้ในบล็อกโพสต์ไวยากรณ์สีสัมพัทธ์ CSS ไวยากรณ์สีแบบสัมพัทธ์เป็นหนึ่งในจุดโฟกัสของการทำงานร่วมกันในปี 2024 การอัปเดตนี้จึงช่วยปรับปรุงคะแนน Firefox แบบเสถียร

ข้อความสำรองสำหรับพร็อพเพอร์ตี้ content

Firefox 128 รองรับข้อความแสดงแทนสำหรับพร็อพเพอร์ตี้ content ของ CSS เมื่อพร็อพเพอร์ตี้ดังกล่าวมีรูปภาพ ข้อความแสดงแทนจะแสดงในต้นไม้การช่วยเหลือพิเศษ ซึ่งหมายความว่าตอนนี้เบราว์เซอร์ทั้งหมดรองรับข้อความแสดงแทนสำหรับ content แล้ว

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

  • Chrome: 77
  • Edge: 79
  • Firefox: 128
  • Safari: 17.4

การอัปเดตใน Chrome 127 ช่วยให้มั่นใจได้ว่า Chrome จะยอมรับองค์ประกอบจำนวนเท่าใดก็ได้ ไม่ใช่แค่สตริงเดียว ซึ่งช่วยให้ใช้ฟังก์ชัน attr() ได้ เป็นต้น

พร็อพเพอร์ตี้ font-size-adjust

Chrome 127 มี font-size-adjust ซึ่งเป็นพื้นที่ที่มุ่งเน้นสำหรับการทำงานร่วมกันในปี 2024 ด้วย พร็อพเพอร์ตี้นี้มีประโยชน์สําหรับกรณีที่อาจใช้แบบอักษรสำรอง เนื่องจากช่วยให้คุณจับคู่ขนาดของแบบอักษรสำรองกับแบบอักษรตัวเลือกแรกได้

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

  • Chrome: 127
  • ขอบ: 127
  • Firefox: 3.
  • Safari: 16.4

แหล่งที่มา

ใน 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 ที่กําหนดไวยากรณ์ การสืบทอด และค่าเริ่มต้น

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

  • Chrome: 85
  • ขอบ: 85
  • Firefox: 128
  • Safari: 16.4

แหล่งที่มา

ในตัวอย่างต่อไปนี้ พร็อพเพอร์ตี้ที่กำหนดเองได้รับการกำหนดให้ยอมรับค่า <color> เท่านั้น ไม่รับค่าเดิม และมีค่าเริ่มต้นเป็น hotpink

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

ตอนนี้กฎ @property เป็นส่วนหนึ่งของ Baseline ที่เพิ่งเปิดตัวใหม่ อ่านเพิ่มเติมได้ที่ @property: ตัวแปร CSS รุ่นถัดไปที่ตอนนี้รองรับเบราว์เซอร์ทุกรุ่น

ArrayBuffer ที่ปรับขนาดได้และ SharedArrayBuffer ที่ขยายได้

ตอนนี้ Firefox 128 รองรับArrayBuffer ที่ปรับขนาดได้และ SharedArrayBuffer ที่ขยายขนาดได้ ซึ่งช่วยให้เปลี่ยนขนาดบัฟเฟอร์ได้โดยไม่ต้องจัดสรรบัฟเฟอร์ใหม่และคัดลอกข้อมูลเข้าไป พร็อพเพอร์ตี้เหล่านี้จะรวมอยู่ใน "เพิ่งพร้อมให้บริการ" ของข้อมูลพื้นฐานด้วย

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

  • Chrome: 111
  • Edge: 111
  • Firefox: 128
  • Safari: 16.4

แหล่งที่มา

คีย์เวิร์ด safe ในพร็อพเพอร์ตี้ Flexbox

Safari 17.6 ส่วนใหญ่เป็นการแก้ไขฟีเจอร์ที่มีอยู่ แต่ก็มีคีย์เวิร์ด safe สำหรับพร็อพเพอร์ตี้การจัดแนว Flexbox ด้วย ซึ่งจะทำให้คีย์เวิร์ด safe ใช้งานได้ในเบราว์เซอร์ต่างๆ

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

  • Chrome: 115
  • Edge: 115
  • Firefox: 63
  • Safari: 17.6.

คีย์เวิร์ด safe ป้องกันไม่ให้การจัดเรียงที่เลือกทำให้เนื้อหาแสดงนอกพื้นที่ที่มองเห็นได้ CodePen ต่อไปนี้แสดงลักษณะการทำงานของโค้ดนี้เมื่อใช้กับรายการที่กึ่งกลาง หากการจัดแนว center ทําให้ข้อมูลสูญหาย ระบบจะใช้ start แทน

การเปิดตัวเบราว์เซอร์รุ่นเบต้า

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

Chrome 128 มีพร็อพเพอร์ตี้ ruby-align ของ CSS รวมถึงการเปลี่ยนแปลงเพื่อทำให้สามารถแบ่งบรรทัดภายในองค์ประกอบที่มี display: ruby ได้ นอกจากนี้ พร็อพเพอร์ตี้ zoom ยังได้รับการอัปเดตให้ตรงกับข้อกำหนดด้วย อัปเดต AudioContext API เพื่อเพิ่ม Callback ที่มอบหมายให้กับ AudiContext.onerror ซึ่งรายงานข้อผิดพลาดในการสร้างและแสดงผล AudioContext

Firefox 129 มีกฎ @starting-style และพร็อพเพอร์ตี้ transition-behavior พร็อพเพอร์ตี้เหล่านี้จะเป็นส่วนหนึ่งของ "Baseline Newly Available" เมื่อ Firefox 129 เปิดตัวเป็นเวอร์ชันเสถียร