ฟีเจอร์ CSS Gap Decorations เปิดให้ใช้งานแล้ว พร้อมอัปเดตใหม่ล่าสุด

ทีมงานเว็บแพลตฟอร์ม Edge จาก Microsoft ได้นำทั้งการออกแบบและการสร้างมาตรฐานสำหรับฟีเจอร์ Gap Decorations โดยการใช้งานจริงกำลังทยอยปล่อยออกสู่เบราว์เซอร์ที่ใช้ Chromium ทั้งหมด สำหรับข้อมูลพื้นฐาน คุณสามารถย้อนกลับไปดูตัวอย่างแรกเริ่มของฟีเจอร์นี้ได้จาก Patrick และการเจาะลึกฉบับเต็มเกี่ยวกับรุ่นเสถียรโดย Javier ซึ่งในบทความนี้ ผู้เขียนต้องการแชร์สิ่งที่เปลี่ยนแปลงไปนับตั้งแต่ตอนนั้น

ฟีเจอร์ Gap Decorations เป็นการต่อยอดมาจากคุณสมบัติ CSS แบบ column-rule ที่คุ้นเคย ซึ่งเดิมทีใช้งานได้ในเลย์เอาต์แบบหลายคอลัมน์ โดยตอนนี้ได้ขยายมา ใช้งานได้ในเลย์เอาต์แบบ grid และ flexbox ด้วย นอกจากนี้ยังมีการรองรับคุณสมบัติ row-rule เพิ่มเข้ามา เพื่อให้สามารถแสดงการตกแต่งได้ทั้งสองแกน พร้อมทั้งขยายไวยากรณ์ให้ควบคุมการตกแต่งได้ละเอียดยิ่งขึ้น

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ในด้านการรองรับของเบราว์เซอร์ Gap Decorations สามารถใช้งานได้ใน Chrome และ Edge เริ่มตั้งแต่เวอร์ชัน 149 เป็นต้นไป รวมถึงเบราว์เซอร์อื่นๆ ที่ใช้ Chromium ในเวอร์ชันที่เทียบเท่ากัน ส่วนเอนจิ้นเบราว์เซอร์อื่นๆ ก็แสดงท่าทีตอบรับที่ดีและเข้ามามีส่วนร่วมในเวทีมาตรฐาน ทำให้มั่นใจได้ว่าในอนาคตฟีเจอร์นี้จะสามารถใช้งานร่วมกันได้อย่างไร้รอยต่อ

สำหรับการใช้งานจริง บทความได้แนะนำขั้นตอนการปรับแต่ง เช่น การใช้ repeat(auto) เพื่อรองรับจำนวนส่วนเนื้อหาที่อาจเพิ่มขึ้นในอนาคต การใช้คุณสมบัติ column-rule-inset ร่วมกับค่า overlap-join เพื่อเชื่อมเส้นที่จุดตัดอย่างไร้รอยต่อ ตลอดจนการใช้ rule-visibility-items เพื่อซ่อนเส้นที่ไม่ต้องการในเซลล์ที่ว่างเปล่า และการควบคุมขอบเขตของเส้นคั่นด้วย column-rule-inset-cap

ที่มา: CSS-Tricks