Contact emails [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]>, [email protected]<mailto:[email protected]>
Explainer https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md Specification https://drafts.csswg.org/css-gaps-1 Summary CSS Gap Decorations enables styling of gaps in container layouts like Grid and Flexbox, similar to ‘column-rule’ in multicol layout. This feature is highly requested by web authors who must use hacks to style the gaps in Grid and Flexbox layouts today. Blink component Blink>Layout<https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ELayout%22> Web Feature ID gap-decorations<https://webstatus.dev/features/gap-decorations> Motivation Today, web authors rely on non-ergonomic workarounds such as the following examples to apply styles to the gaps in Grid and Flexbox layouts: https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/#how-do-i-add-backgrounds-and-borders-to-grid-areas https://x.com/geddski/status/1004731709764534274 CSS Gap Decorations will allow authors to avoid such workarounds and apply styles in a seamless manner provided by the platform. Initial public proposal https://github.com/w3c/csswg-drafts/issues/10393 Search tags grid<https://chromestatus.com/features#tags:grid>, flexbox<https://chromestatus.com/features#tags:flexbox>, multicol<https://chromestatus.com/features#tags:multicol>, column<https://chromestatus.com/features#tags:column>, row<https://chromestatus.com/features#tags:row>, gap<https://chromestatus.com/features#tags:gap>, decoration<https://chromestatus.com/features#tags:decoration> TAG review https://github.com/w3ctag/design-reviews/issues/1035 TAG review status Issues addressed Risks Interoperability and Compatibility Gap Decorations is a highly requested feature among web developers. Early discussions within the CSSWG meeting did not highlight any major concerns from other browser vendors so far. See discussions on: https://github.com/w3c/csswg-drafts/issues/10393 Gecko: Positive (https://github.com/mozilla/standards-positions/issues/1158) WebKit: No signal (https://github.com/WebKit/standards-positions/issues/444) Web developers: Positive Developers are excited about the CSS Gap Decoration feature. See discussions around this here: https://github.com/w3c/csswg-drafts/issues/10393 This also surfaced as a most requested missing feature in State of CSS 2023. https://2023.stateofcss.com/en-US/usage/#css_missing_features The chromium tracking issue (https://issues.chromium.org/issues/357648037) has 18 upvotes from developers. Following dev trials, the feature drew substantial enthusiasm across web developer channels: Social media: - https://www.linkedin.com/pulse/day-164-new-way-style-gaps-emiliano-pisu-x0h1f - https://mastodon.social/@anatudor/114201225562770826 - https://app.daily.dev/posts/a-new-way-to-style-gaps-in-css-9lolqu2yp - https://x.com/Manz/status/1968682837453799570 - https://x.com/shadeed9/status/1822025452476592630 - https://www.linkedin.com/posts/kirangrandhi_goodbye-to-css-hackshello-to-native-gap-activity-7341108234121900034-_ObL Articles and videos: - https://www.alwaystwisted.com/articles/styling-the-gap-with-css - https://youtu.be/L1-7dFQFb1c - https://css-tricks.com/the-gap-strikes-back-now-stylable/ - https://heydesigner.com/newsletter/product-design-2025/ Other signals: WebView application risks Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications? There are no WebView application risks. Debuggability DevTools already provides a layout overlay for gaps in Grid and Flexboxes. Computed values for new properties introduced for gap decoration will be exposed. Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)? Yes Is this feature fully tested by web-platform-tests<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>? Yes https://wpt.fyi/results/css/css-gaps Flag name on about://flags enable-experimental-web-platform-features Finch feature name CSSGapDecoration Rollout plan Will ship enabled for all users Requires code in //chrome? False Tracking bug https://issues.chromium.org/issues/357648037 Estimated milestones Shipping on desktop 149 DevTrial on desktop 139 Shipping on Android 149 Shipping on WebView 149 Anticipated spec changes Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way). There are no open issues affecting the current level of the spec. All open issues are scoped to a future level of the spec and do not introduce web compat or interop risk for what is shipping now. Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5157805733183488?gate=6254826279927808 Links to previous Intent discussions Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/PH8PR00MB1471DB453B0D0025F83B1F06D8BA2%40PH8PR00MB1471.namprd00.prod.outlook.com Ready for Trial: https://groups.google.com/a/chromium.org/g/blink-dev/c/vmO3X2aYL2Y/m/f9LLE_W8AAAJ -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CH3PR00MB2681301B231C1C1B50B21206D8372%40CH3PR00MB2681.namprd00.prod.outlook.com.
