Discussion on "Transition to `height: auto` & `display: none` Using Pure CSS"

Zoran Jambor · 2024-08-08T20:32:41.804Z

https://youtu.be/1VsMKz4Zweg 💡 UPDATE, September 12, 2024: In the earlier version of this article, calc-size was used with a single argument, like this: calc-size(auto). This is no longer supported; calc-size() works only as a two-argument form, ...

Discussion on "Transition to `height: auto` & `display: none` Using Pure CSS" | Hashnode

Matteo Fogli

Sep 2, 2024

as of september 2nd, Chrome (v130) is missing proper support for the at-support rule tests of the calc-size() function, meaning this code will not work

@supports (height: calc-size(auto)) {
/* ... */
}

This seems to be tracked in chromium bug #358461053

Zoran Jambor

Frontend developer & content creator, author of CSS Weekly.

Sep 12, 2024

Thanks so much for the heads-up, Matteo. 🙏

It seems that the implementation of calc-size() has changed and it now only supports two-argument form. So this at-supports rule works correctly: calc-size(auto) no longer works.

I'm updating the article now to reflect this change. All calc-size(auto) examples must now be calc-size(auto, size).

Search Hashnode

Transition to `height: auto` & `display: none` Using Pure CSS

Responses3