Interop 2024 เพิ่มฟีเจอร์ใหม่ๆ ลงใน Baseline

เผยแพร่เมื่อวันที่ 22 มกราคม 2025

เมื่อ Interop 2024 ใกล้จะสิ้นสุดลง โพสต์นี้จะมองย้อนกลับไปที่ปีแห่งความสำเร็จที่สุดของโปรเจ็กต์ เบราว์เซอร์เวอร์ชันทดลองทั้งหมดได้คะแนน 99 ส่วนเวอร์ชันที่เสถียรก็ตามมาติดๆ ความสำเร็จนี้หมายความว่าฟีเจอร์จํานวนหนึ่งพร้อมใช้งานใน Baseline เวอร์ชันใหม่แล้ว

เบราว์เซอร์ทั้งหมดที่มีคะแนน 99
แดชบอร์ดการทํางานร่วมกันปี 2024 (ข้อมูล ณ วันที่ 22 มกราคม 2025)

ฟีเจอร์เพิ่มเติมใน Baseline

ฟีเจอร์ต้องทำงานร่วมกันได้จึงจะพร้อมใช้งานใน Baseline ใหม่ จึงไม่น่าแปลกใจเลยที่ Interop 2024 จะช่วยพัฒนาฟีเจอร์ต่างๆ ในช่วงนั้นและนำไปใช้ใน Baseline 2024

พร็อพเพอร์ตี้ที่กำหนดเองที่ลงทะเบียน

@property กฎและCSS.registerProperty()เมธอดแบบคงที่กลายเป็น Baseline พร้อมใช้งานใหม่ในเดือนกรกฎาคม 2024

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

พร็อพเพอร์ตี้ font-size-adjust CSS จะรักษาขนาดข้อความที่ปรากฏไว้ โดยไม่คำนึงถึงแบบอักษรที่ใช้ โดยการปรับขนาดแบบอักษรให้มีขนาดเท่ากันตามเมตริกที่เฉพาะเจาะจง เช่น ความสูงของ x วิธีนี้ช่วยให้แบบอักษรสำรองมีขนาดใหญ่เท่ากัน โดยจะพร้อมใช้งานใน Baseline ใหม่ในเดือนกรกฎาคม 2024

วิธีการ requestVideoFrameCallback() สำหรับ <video>

เมธอด requestVideoFrameCallback() สำหรับ <video> จะกำหนดเวลาให้กับฟังก์ชันที่จะทำงานพร้อมกับเฟรมวิดีโอถัดไป ไอคอนนี้คล้ายกับ requestAnimationFrame() แต่ใช้สำหรับวิดีโอและเพิ่งเปิดตัวไปเมื่อเดือนตุลาคม 2024

การจัดสไตล์แถบเลื่อนด้วย scrollbar-width และ scrollbar-gutter

scrollbar-width พร็อพเพอร์ตี้ CSS จะกำหนดความกว้างของแถบเลื่อน และ scrollbar-gutterจัดสรรพื้นที่สำหรับแถบเลื่อน ซึ่งจะช่วยป้องกันการเปลี่ยนแปลงเลย์เอาต์ที่ไม่ต้องการเมื่อแถบเลื่อนปรากฏขึ้นและหายไป เนื้อหาเหล่านี้กลายเป็นเนื้อหาพื้นฐานที่พร้อมให้รับชมในเดือนธันวาคม 2024

พร็อพเพอร์ตี้ transition-behavior

การประกาศ CSS transition-behavior: allow-discrete อนุญาตให้ใช้การเปลี่ยนสำหรับพร็อพเพอร์ตี้ที่มีลักษณะการทํางานของภาพเคลื่อนไหวเป็นแบบไม่ต่อเนื่อง พร็อพเพอร์ตี้ดังกล่าวจะไม่สามารถหาค่าเฉลี่ยและเปลี่ยนจากค่าเริ่มต้นเป็นค่าสิ้นสุดที่ 50% พร็อพเพอร์ตี้นี้กลายเป็น "ฐานข้อมูลใหม่" ในเดือนสิงหาคม 2024

text-wrap: balance

พร็อพเพอร์ตี้ CSS text-wrap จะกำหนดการแบ่งบรรทัดในข้อความที่เกินจากคอนเทนเนอร์ ซึ่งเป็นตัวย่อของ text-wrap-style และ text-wrap-mode ค่า balance ช่วยให้คุณสร้างบรรทัดแรกและข้อความสั้นๆ อื่นๆ ที่สมดุลได้ พร็อพเพอร์ตี้ text-wrap กลายเป็น "ฐานใหม่" ที่พร้อมใช้งานในเดือนมีนาคม 2024

ป๊อปอัป

ป๊อปอัปช่วยให้คุณสร้างการวางซ้อนแบบประกาศโดยใช้ HTML หรือใช้เมธอด showPopover() ฟีเจอร์นี้เกือบจะอยู่ในขั้น "พร้อมใช้งานใหม่" ตามเกณฑ์พื้นฐานแล้ว และตอนแรกเราคิดว่าเป็นเช่นนั้น แต่ปัญหาที่เกิดขึ้นกับการใช้งาน Safari ทำให้ฟีเจอร์นี้ยังไม่พร้อมใช้งานใหม่ในปี 2024 ข่าวดีคือปัญหานี้ได้รับการแก้ไขใน Safari เบต้า 18.3 ปัจจุบันแล้ว ดังนั้นอีกไม่นานเราจะประกาศอย่างเหมาะสมว่าป๊อปอัปพร้อมใช้งานเป็นเวอร์ชันพื้นฐานใหม่

การแก้ไขฟีเจอร์พื้นฐาน

มีฟีเจอร์บางอย่างรวมอยู่ใน Interop 2024 ที่จัดอยู่ในประเภท "ฐานใหม่พร้อมใช้งาน" อยู่แล้ว เราต้องแก้ไขความแตกต่างเล็กๆ น้อยๆ ในการใช้งาน ปัญหาเหล่านี้อาจเกิดขึ้นกับผู้ใช้เพียงไม่กี่คน แต่สิ่งเล็กๆ น้อยๆ ก็สร้างความแตกต่างได้เป็นอย่างมากหากเกิดขึ้นกับคุณ

การฝัง CSS

การฝัง CSS ช่วยให้เครื่องมือเลือกสั้นลง อ่านได้ง่ายขึ้น และเป็นแบบโมดูลมากขึ้นด้วยการฝังกฎไว้ในกฎอื่น ฟีเจอร์นี้กลายเป็น Baseline ใหม่ในเดือนธันวาคม 2023 และรวมอยู่ใน Interop 2024 เพื่อแก้ไขปัญหาการทำงานร่วมกันบางรายการที่ยังไม่ได้รับการแก้ไข

Shadow DOM แบบประกาศ

แอตทริบิวต์ shadowrootmode ใน <template> จะสร้างรูทเงาโดยไม่ต้องใช้ JavaScript นี่เป็นทางเลือกแบบประกาศสำหรับเมธอด `attachShadow()

Interop 2025 จะพร้อมใช้งานเร็วๆ นี้

ขณะนี้เรากําลังจัดทำข้อเสนอขั้นสุดท้ายสำหรับ Interop 2025 และเรายินดีที่จะต่อยอดความสำเร็จทั้งหมดในปีนี้ โปรดรอประกาศในเดือนกุมภาพันธ์เพื่อดูว่ามีอะไรให้บ้าง หากต้องการติดตามฟีเจอร์ต่างๆ ที่เปิดตัวใน Baseline โปรดดูชุดฟีเจอร์ใหม่ของ Baseline ที่นี่ใน web.dev