CSS Gap Decorations Are Now Available With New Feature Updates
An in-depth look at CSS gap decorations led by the Microsoft Edge team, now bringing rule properties to grid and flexbox.
Stock photo for illustration only, not from the actual event
- Microsoft Edge web platform team led the design and standardization
- Available now across all Chromium-based browsers starting with version 149
- Introduces powerful new properties like row-rule, column-rule-inset, and rule-visibility-items
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.
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.
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.
Stock photo for illustration only, not from the actual event
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.
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.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment