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

สำรวจฟีเจอร์ที่น่าสนใจบางส่วนซึ่งมีให้บริการในเวอร์ชันเสถียรและเวอร์ชันเบต้า เว็บเบราว์เซอร์ในช่วงเดือนกรกฎาคม 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);
}

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

  • 119
  • 119
  • 128
  • 16.4

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

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

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

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

  • 77
  • 79
  • 128
  • 17.4

การอัปเดตใน Chrome 127 ทำให้ Chrome ยอมรับจำนวน มากกว่าสตริงเพียงสตริงเดียว ทำให้สามารถใช้ attr()

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

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

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

  • 127
  • 127
  • 3
  • 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 ที่กำหนดเองที่กำหนดไวยากรณ์ และค่าเริ่มต้น

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

  • 85
  • 85
  • 128
  • 16.4

แหล่งที่มา

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

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

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

ArrayBuffer ที่ปรับขนาดได้ และ SharedArrayBuffer ที่เติบโตได้

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

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

  • 111
  • 111
  • 128
  • 16.4

แหล่งที่มา

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

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

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

  • 115
  • 115
  • 63
  • 18

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

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

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

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

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