Kevin Powell - Community•2y ago

`CSS.supports` not working for `transition-property: grid-template-rows`

I'm trying to implement a Collapse/Expander element using CSS Grid by animating grid-template-rows. However, I need to know if it's supported first, but it seems like CSS.supports always returns true for transition and transition-property. e.g.

CSS.supports('transition: grid-template-rows') // true
CSS.supports('transition: grid-template-rowssss') // also true
CSS.supports('transition-property', 'grid-template-rowssss') // also true

CSS.supports('transition: grid-template-rows') // true
CSS.supports('transition: grid-template-rowssss') // also true
CSS.supports('transition-property', 'grid-template-rowssss') // also true

Is there a way to check if this is supported or not?

2 Replies

b1mind•2y ago

https://web.dev/css-animated-grid-layouts/

web.dev

CSS Animated Grid Layouts

In CSS Grid, the grid-template-columns and grid-template-rows properties allow you to define line names and track sizing of grid columns and rows, respectively. Supporting interpolation for these properties allows grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition.

b1mind•2y ago

Support is rather new though, I'm having a hard time pulling up when Wish Bramus would have linked it xD he has the icons showing but https://caniuse.com/?search=template%20animation So yea its still fresh off the press. Mostly supported in March-Oct '22 You would want it to be progressive enhancement and have fallbacks. realizes he might have missed the whole question but lol I don't see a supports rule for it 😦 You could find a property that has roughly the same support and use it though 🤔 thats what I do with flex gap

Gaming

Programming

`CSS.supports` not working for `transition-property: grid-template-rows`