Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[cssom] getComputedStyle()[--var] return a resolved value? #2358

Closed
jonjohnjohnson opened this Issue Feb 24, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@jonjohnjohnson
Copy link

commented Feb 24, 2018

https://drafts.csswg.org/cssom/#resolved-values

If you have this...

el.style.setProperty('--var','calc(50vh + 4em)');

I know that this...

window.getComputedStyle(el).getPropertyValue('--var');

returns calc(50vh + 4em)

But I've often found myself needing to find out the resolved value, even if it's not used as the exact value of a property for which I could retrieve the resolved value.

So if the window.innerHeight was 600 and the font-size resolved to 20px on the element, I'd hope that something like...

window.getComputedStyle(el)['--var'];

Could return 380px???

I know there may be more pertinent topics to discuss related to getComputedStyle such as #2149, #379, or #1033, but for now, I am usually forced to cause a decent amount of layout thrashing to accomplish what is described above.

@Loirooriol

This comment has been minimized.

Copy link
Collaborator

commented Feb 24, 2018

But the value of --var: calc(50vh + 4em) is only interpreted as a sequence of tokens, it never resolves to a length!

In fact CSS alone can't know that you want to resolve that custom property to a length and not to something else. But the registerProperty Houdini API could be used for that.

Another approach is setting the expression that you want to resolve as a length to some standard property which computes to a length, e.g.

el.style.marginLeft = "calc(50vh + 4em)";
getComputedStyle(el).marginLeft; // 380px
el.style.marginLeft = "";
@jonjohnjohnson

This comment has been minimized.

Copy link
Author

commented Feb 25, 2018

@Loirooriol Your suggested approach is what I often do, and is what I'd meant when saying...

...used as the exact value of a property for which I could retrieve the resolved value.

But using that type of approach thrashes my layout more than desired to just retrieve a resolved value.

Didn't think about registerProperty for this, but makes a lot of sense, even if it requires more heavy lifting than my original request.

@FremyCompany

This comment has been minimized.

Copy link
Contributor

commented Feb 25, 2018

I'm going to close this issue, since the actual result is by design and that it is possible to achieve what you want using existing API

@jonjohnjohnson

This comment has been minimized.

Copy link
Author

commented Feb 25, 2018

For anyone else that comes upon this, I figured I would clarify...

If creating the custom property in this way

CSS.registerProperty({
  name: '--var',
  syntax: '<length>',
  inherits: false,
  initialValue: '0px'
});

Then using

el.style.setProperty('--var','calc(50vh + 4em)');
window.getComputedStyle(el).getPropertyValue('--var')

Will in fact give you a resolved value like 380px and not calc(50vh + 4em)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.