CODEWITHSUNDEEP
csscss-calccss-variables
user663031
user663031

Reputation:

Getting result of CSS calc to set custom properties

I'm testing a CSS framework for specifying numbers via micro-classes. For instance, something like <div class="fifty percent wide"> might translate into width: 50%. The implementation uses CSS variables (custom properties).

Consider the following CSS:

.fifty   { --number: 50; }
.percent { --percent: calc(1% * var(--number)); }
.wide    { width: var(--percent); }

That's all fine and works great. The issue is that I want to write a test suite, which would verify that fifty percent results in a value for the custom property --percent of 50%. Unfortunately, if I use getComputedStyle to examine the value of --percent, I see the entire (unresolved, uncomputed) "calc" string. If I examine the value of width, I get the already-resolved value such as "512px".

Is there some way to obtain and validate programatically the resolved, calculated values of custom CSS properties? Or an API to force the evaluation of "calc" expressions?

Upvotes: 7

Views: 5314

Answers (3)

ghostinpeace
ghostinpeace

Reputation: 73

This can be solved using the CSS Properties and Values API (Houdini).
Once --percent is properly registered as a percentage, getPropertyValue() should yield the expected result.

For example:

@property --percent {
 syntax: '<percentage>';
 inherits: false;
 initial-value: 50%;
}

February 2023: the support is still limited (Firefox doesn't support it).

Upvotes: 2

Shady Alset
Shady Alset

Reputation: 5714

You have a typo error in .percent class:

.percent { --percent: calc(1% * var(--number); }
//                                          ^    you have to close Brackets of Calc()
.percent { --percent: calc(1% * var(--number)); }

I suggest to do a simple test by getting the width of element and its parent in px, something like:

var elem = document.getElementById("test");
var parent = document.getElementById("parent");
var elem_width = window.getComputedStyle(elem, null).getPropertyValue("width");

alert("50% of 200px parent width = " + elem_width);
#parent{
  background-color:black;
  width:200px;
  height: 200px;
}

.fifty   { --number: 50; }
.percent { --percent: calc(1% * var(--number)); }
.wide    {
   width: var(--percent);
   height: 100px;
   background-color:red;
}
<div id="parent">
    <div id="test" class="fifty percent wide">
    </div>
</div>

NOTE: Attributes or CSS styles it does not understand from the code to the DOM. That is by design. Javascript only has access to the DOM, not the code. So no, there is no way to access a property from javascript that the browser itself does not support.

Upvotes: 5

JasonK
JasonK

Reputation: 5294

One way to do this is to calculate the percentage yourself by getting the width from the element and it's parent (in pixels). Then simply divide parentWidth by elementWidth to calculate the percentage.

Also, maybe you could test the CSS manually. If everything works as expected, you wouldn't need any more test cases. It's not like this breaks over night, right?

Upvotes: 0

Related Questions