Not yet. In the same link you can read: Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. Still no browser support the attr() for properties different than content and also no support for the type-or-unit. … Read more
Recently, variables have been added to the official CSS specs. Variables allow you to so something like this : body, html { margin: 0; height: 100%; } .theme-default { –page-background-color: #cec; –page-color: #333; –button-border-width: 1px; –button-border-color: #333; –button-background-color: #f55; –button-color: #fff; –gutter-width: 1em; float: left; height: 100%; width: 100%; background-color: var(–page-background-color); color: var(–page-color); } button … Read more
Cascading variables (i.e. the var() notation) aren’t defined for use with anything but property declarations, so no, they cannot be used in selectors. Judging by their name, this makes sense, since only property declarations can cascade, not selectors. From the spec: A variable can be used in place of any part of a value in … Read more
When this question was asked, it wasn’t possible to animate custom properties, as @temani afif correctly pointed out – since the UA has no way to interpret their contents Since then, CSS Houdini have put together the CSS Properties and Values API specification This specification extends [css-variables], allowing the registration of properties that have a … Read more
Use calc() and do a simple multiplication with any unit: div{width:calc(var(–mywidth) * 1%);} example: :root { –a:50; } .box { width:calc(var(–a) * 1%); border:calc(var(–a) * 0.5px) solid red; background:linear-gradient(calc(var(–a) * 0.8deg),blue 50% ,green 0); padding:20px; box-sizing:border-box; } <div class=”box”></div>
In such case, we can consider the fallback value of a CSS variable. Like explained in the specification we can write something like this: background:var(–color,inherit) By doing this, we tell our property (background) to use inherit in case –color is not defined. This may solve the issue but in our case it won’t be enough … Read more
Just the standard way: Get the computed styles with getComputedStyle Use getPropertyValue to get the value of the desired property getComputedStyle(element).getPropertyValue(‘–color-font-general’); Example: var style = getComputedStyle(document.body) console.log( style.getPropertyValue(‘–bar’) ) // #336699 console.log( style.getPropertyValue(‘–baz’) ) // calc(2px*2) :root { –foo:#336699; –bar:var(–foo); –baz:calc(2px*2); }
From the spec, The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection … Read more
The new Specification introduces “relative color syntax” where you can do the following :root { –color-primary: #f00; /* any format you want here */ –color-primary-darker: hsl(from var(–color-primary) h s calc(l – 5%)); –color-primary-darkest: hsl(from var(–color-primary) h s calc(l – 10%)); } The idea is to convert the main color to hsl format and using calc() … Read more
You can use document.body.style.setProperty(‘–name’, value);: var bodyStyles = window.getComputedStyle(document.body); var fooBar = bodyStyles.getPropertyValue(‘–foo-bar’); //get document.body.style.setProperty(‘–foo-bar’, newValue);//set More Information here.