<div class="key-takeaways"><ul><li>ทีม Microsoft Edge นำทัพพัฒนาและมาตรฐานฟีเจอร์ Gap Decorations</li><li>รองรับการใช้งานในเบราว์เซอร์ Chromium เวอร์ชัน 149 เป็นต้นไป</li><li>เพิ่มคุณสมบัติใหม่ เช่น row-rule, column-rule-inset และ rule-visibility-items</li></ul></div><p>ทีมงานเว็บแพลตฟอร์ม Edge จาก Microsoft ได้นำทั้งการออกแบบและการสร้างมาตรฐานสำหรับฟีเจอร์ Gap Decorations โดยการใช้งานจริงกำลังทยอยปล่อยออกสู่เบราว์เซอร์ที่ใช้ Chromium ทั้งหมด สำหรับข้อมูลพื้นฐาน คุณสามารถย้อนกลับไปดูตัวอย่างแรกเริ่มของฟีเจอร์นี้ได้จาก Patrick และการเจาะลึกฉบับเต็มเกี่ยวกับรุ่นเสถียรโดย Javier ซึ่งในบทความนี้ ผู้เขียนต้องการแชร์สิ่งที่เปลี่ยนแปลงไปนับตั้งแต่ตอนนั้น</p><p>ฟีเจอร์ Gap Decorations เป็นการต่อยอดมาจากคุณสมบัติ CSS แบบ column-rule ที่คุ้นเคย ซึ่งเดิมทีใช้งานได้ในเลย์เอาต์แบบหลายคอลัมน์ โดยตอนนี้ได้ขยายมา ใช้งานได้ในเลย์เอาต์แบบ grid และ flexbox ด้วย นอกจากนี้ยังมีการรองรับคุณสมบัติ row-rule เพิ่มเข้ามา เพื่อให้สามารถแสดงการตกแต่งได้ทั้งสองแกน พร้อมทั้งขยายไวยากรณ์ให้ควบคุมการตกแต่งได้ละเอียดยิ่งขึ้น</p><div class="ai-insight"><p>การเพิ่มฟีเจอร์ Gap Decorations ถือเป็นก้าวสำคัญในการพัฒนาเว็บดีไซน์ เพราะช่วยให้นักพัฒนาสามารถสร้างเส้นคั่นระหว่างช่องว่างใน Grid และ Flexbox ได้โดยตรงโดยไม่ต้องอาศัยการเพิ่มเส้นขอบหรือองค์ประกอบ HTML เปล่าๆ ช่วยให้โค้ดมีความสะอาดและดูแลรักษาง่ายขึ้นมากในระยะยาว</p></div><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/css_gap_decorations_msdhi845_inline_1_a1ce7d0d9e.jpg" alt="browser developer tools web design layout" loading="lazy" /><p class="color-gray-500 text-sm mt-10">ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง</p></div><p>ในด้านการรองรับของเบราว์เซอร์ Gap Decorations สามารถใช้งานได้ใน Chrome และ Edge เริ่มตั้งแต่เวอร์ชัน 149 เป็นต้นไป รวมถึงเบราว์เซอร์อื่นๆ ที่ใช้ Chromium ในเวอร์ชันที่เทียบเท่ากัน ส่วนเอนจิ้นเบราว์เซอร์อื่นๆ ก็แสดงท่าทีตอบรับที่ดีและเข้ามามีส่วนร่วมในเวทีมาตรฐาน ทำให้มั่นใจได้ว่าในอนาคตฟีเจอร์นี้จะสามารถใช้งานร่วมกันได้อย่างไร้รอยต่อ</p><p>สำหรับการใช้งานจริง บทความได้แนะนำขั้นตอนการปรับแต่ง เช่น การใช้ repeat(auto) เพื่อรองรับจำนวนส่วนเนื้อหาที่อาจเพิ่มขึ้นในอนาคต การใช้คุณสมบัติ column-rule-inset ร่วมกับค่า overlap-join เพื่อเชื่อมเส้นที่จุดตัดอย่างไร้รอยต่อ ตลอดจนการใช้ rule-visibility-items เพื่อซ่อนเส้นที่ไม่ต้องการในเซลล์ที่ว่างเปล่า และการควบคุมขอบเขตของเส้นคั่นด้วย column-rule-inset-cap</p><p class="source-attribution">ที่มา: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/css-gap-decorations-now-available/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

<div class="key-takeaways"><ul><li>Microsoft Edge web platform team led the design and standardization</li><li>Available now across all Chromium-based browsers starting with version 149</li><li>Introduces powerful new properties like row-rule, column-rule-inset, and rule-visibility-items</li></ul></div><p>The Edge web platform team at Microsoft led both the design and standardization of the gap decorations feature, with implementation rolling out across all Chromium-based browsers. For background, developers can check out an early preview by Patrick and a full deep dive about the stable release by Javier. This article highlights what has changed in the feature since those initial releases.</p><p>Gap decorations extend the familiar column-rule CSS property, which previously only worked in multi-column layouts, and bring that capability to grid and flexbox layouts as well. In addition, there is now support for the row-rule property so decorations can be displayed across both axes, along with an extended syntax providing much tighter control over the decorations.</p><div class="ai-insight"><p>The introduction of gap decorations marks a major milestone for web layout design. It eliminates the need for complex CSS workarounds or empty markup elements just to render divider lines between grid and flexbox items, significantly streamlining modern stylesheet architecture.</p></div><div class="mb-20"><img class="img-bdrd-16" src="https://api.inewgen.co/uploads/css_gap_decorations_msdhi845_inline_1_a1ce7d0d9e.jpg" alt="browser developer tools web design layout" loading="lazy" /><p class="color-gray-500 text-sm mt-10">Stock photo for illustration only, not from the actual event</p></div><p>Regarding browser support, gap decorations are available in Chrome and Edge starting with version 149, alongside other Chromium-based browsers matching those versions. Other browser engines have also been receptive and engaged in standards venues, pointing toward eventual cross-browser interoperability.</p><p>When it comes to practical implementation, the article walks through setting up dynamic sections using an auto repeater to handle future content growth, applying row-rule and column-rule properties, utilizing the overlap-join value of column-rule-inset for seamless junctions, clearing unwanted lines with rule-visibility-items, and fine-tuning edge boundaries with column-rule-inset-cap.</p><p class="source-attribution">Source: <img src="https://www.google.com/s2/favicons?domain=css-tricks.com&sz=64" alt="CSS-Tricks" class="source-logo" width="16" height="16" /> <a href="https://css-tricks.com/css-gap-decorations-now-available/" target="_blank" rel="noopener noreferrer">CSS-Tricks</a></p>

medium_css-gap-decorations-msdhi845.jpg

small_css-gap-decorations-msdhi845.jpg

thumbnail_css-gap-decorations-msdhi845.jpg

Inewgen

Inewgen

#Microsoft Edge

CSS Gap Decorations Are Now Available With New Feature Updates

Inewgen