Contact emails samomekar...@microsoft.com<mailto:samomekar...@microsoft.com>, alma...@microsoft.com<mailto:alma...@microsoft.com>, kbabb...@microsoft.com<mailto:kbabb...@microsoft.com>, javier...@microsoft.com<mailto:javier...@microsoft.com>
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> 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: No signal (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 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? None Goals for experimentation We aim to gather feedback from web developers on the overall design and usability of the CSS Gap Decorations API. Specifically, we want to ensure that the current design meets the need to decorate gaps across various layout types. We're particularly interested in: * How intuitive the API is to use in real-world scenarios. * Whether the current syntax and behavior align with developer expectations. * Use cases or layout patterns where the feature is especially helpful or lacking. * Suggestions for improvements or extensions to the API. We encourage developers to share examples of how they’re using the feature and any challenges they encounter, especially in complex layouts. Ongoing technical constraints There are a few known limitations in the current implementation that we plan to actively work on in parallel with the developer trials: * Animation and Interpolation: Support for animation and interpolation of gap decoration properties is not yet implemented. * Fragmentation support: Gap decorations currently do not render correctly across fragmented containers (e.g., multi-column layouts or paged media). * Grid size limitations: The current implementation has practical limits on the size of grids that can be decorated. A refactor is planned to improve scalability and performance for much larger grids. 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 None Finch feature name CSSGapDecoration Requires code in //chrome? False Tracking bug https://issues.chromium.org/issues/357648037 Estimated milestones DevTrial on desktop 139 Link to entry on the Chrome Platform Status https://chromestatus.com/feature/5157805733183488 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 This intent message was generated by Chrome Platform Status<https://chromestatus.com/>. -- 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 blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/IA3PR00MB23405D854C8A49619F36A301D86EA%40IA3PR00MB2340.namprd00.prod.outlook.com.
