css-variables

CSS variables not working in dialog::backdrop

by

Updated answer (29/02/2024) As pointed out by Wes Goulet, this will change (or has changed) and we may have the expected behaviour of the original poster. So, the following probably works on all major browsers: document.querySelector(‘dialog’).showModal(); :root { –color-backdrop: red; } dialog::backdrop { background: var(–color-backdrop); } <dialog> <p>This is a dialog. My backdrop should be … Read more

Get computed value of CSS variable that uses an expression like calc

by

Technically you cannot because the computed value is not static and will depend on other properties. In this case it’s trivial since we are dealing with pixel value but imagine the case where you will have percentage value. Percentage is relative to other properties so we cannot compute it until it’s used with var(). Same … Read more

CSS animate custom properties/variables

by

This can be achieved by defining variables using (as of writing this, not well-supported) @property, which allows declaring types and that allows the browser to “understand”, for example, that a certain property (variable) is a Number and then it can gradually animate/transition that variable. Example Code: @property –opacity { syntax: ‘<number>’; /* <- defined as … Read more

Get all css root variables in array using javascript and change the values

by

this script will return an array of root variables in all stylesheets, served from the domain. Out of domain stylesheets are not accessible due to CORS policies. Array.from(document.styleSheets) .filter( sheet => sheet.href === null || sheet.href.startsWith(window.location.origin) ) .reduce( (acc, sheet) => (acc = [ …acc, …Array.from(sheet.cssRules).reduce( (def, rule) => (def = rule.selectorText === “:root” ? … Read more

Effect of Many CSS Variables on Performance

by

Yes there are tests that have been done. Essentially you apply the CSS changes via JavaScript and measure the performance. You will want to learn about scoping your CSS variables and the number of affected elements. As these numbers increase, so does your draw time. There is a handy article on this subject at https://lisilinhart.info/posts/css-variables-performance/ … Read more

Any way to use CSS Variables in SASS functions for hsl() transparency?

by

Global variables can be defined outside of an element in a :root pseudo-class: :root { –color-primary: #FFFFFF; } you can define a function like this: @function color($color-name) { @return var(–color-#{$color-name}); } and call it into your sass: body { color: color(primary); } compiled sass code is: body { color: var(–color-primary); }

How can I get a negative value of CSS variables (aka Custom Properties)

by

Yes you can do it. Simply multiply by -1: :root { –margin: 50px; } body { margin: 0 100px; border:1px solid; } .box-1 { background: red; height: 100px; width: 200px; margin-left: calc(-1 * var(–margin)); } .box-2 { background: green; height: 100px; width: 200px; margin-left: calc(-1 * (-1 * var(–margin))); /* You can also nest calculation … Read more