Things CSS Could Still Use Heading into 2023

• sciter

  85 2,562 0.0 C++

  Sciter: the Embeddable HTML/CSS/JS engine for modern UI development

  

4) if content does not exceed viewport height, remove v-scrollbar and goto 1 if it has it before;

The only option is to use scrollbars that do not take space: normally scrollbar appears thin semitransparent bar on top of content. And on mouse hover the real scrollbar appears , but again on top of content.

Such scrollbars do not cause re-layout as you see and VW is a viewport width always.

That's why in Sciter(https://sciter.com) I've added

   overflow:scroll-indicator;

• csswg-drafts

  69 4,263 9.9 Bikeshed

  CSS Working Group Editor Drafts

  

But it's clearly the feature that people want and expect to be there. This is the most upvoted issue on CSS WG Github[0] and the StackOverflow question how to do it in CSS has 3 pages of answers (spoiler-alert: there is no nice way to do it only with CSS).

> The browser doesn't know what the auto size is any more than you do until it performs a layout (reflow). Layouts are expensive and must be minimized. And what if content is changed in the middle of the transition? Should it recalculate the new auto size? Maybe we will get it some day, but there are good reasons to be cautious.

Unfortunately these are good questions to answer and probably the reason browser don't have it yet.

Last time I had to animate `width:auto` and `height:auto` I came up with quite a clever idea. I wrote `width: var(--width-from-js, auto)` and `height: var(--height-from-js, auto)` (CSS Variables (called CSS Custom Property[2]) with a fallback to `auto` when the variable is not defined) and later in JS I calculated the real width and height (using `getComputedStyle` or `getBoundingClientRect`) and just set `--width-from-js` and `--height-from-js` as inline style on the element. I also added event handler for the event that could change the size of this element (like browser window resize) and rerun this code to set updated CSS Property valaues.

This way the changes required in JS were minimal, most of the things was in CSS. As a plus when one day browser would support animation to `auto` I would only have to delete the JS code.

I need to write about this technique on this 3-pages stackoverflow question one day ;)

Interesting observation was that when there was an animation in progress and the code for calculating the width of the element had run (because I resized the browser window) then the animation would just stop. I wouldn't mind if this was also the behavior if browsers would someday support animation of `width/height: auto` natively.

[0]https://github.com/w3c/csswg-drafts/issues/626

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project