So I'm faced with a CSS mystery. Developing a project, came across an unexpected result, and can't explain it, nor have I been able to come up with a workaround.
First I define 8 custom properties properties on a custom selector .
Then I conditionally (based on classes defined on the element) override 3 of those propertiess with calc() formulas.
Then, I use those properties to define some more properties, again using calc().
Finally, I use the result of the most complex calculation as the width of the element and a nested element. But the calculation only takes effect in one of the three cases of interest.
The three cases are to have html with neither the v1 or v2 classes, and then to define it with class v1, and finally to define it with both classes v1 and v2.
The code below demonstrates the issue: Without having the v1 or v2 classes defined, the width of the b- element is not constrained as it should be to 90px, instead it gets the default width, of the full width of the browser window.
Adding class v1 (in the browser's dev tools, but I'm using javascript in the real project) doesn't change it; it still gets the full width of the window, instead of being constrained to 150px.
Since neither of those two work, I'm really surprised that defining both v1 and v2 does work: the elements are constrained to 180px.
My first guess was that somehow under one of the cases, that something wasn't defined. But dev tools in both Firefox and Chrome indicate that all the values are defined, in all cases, although when you turn on the "Computed / show all" display in Chrome which shows some form of expanded calculation, it shows all the proper numbers, but won't use the proper number for the width property.
Can anyone explain this?
<html class=ph>
<head>
<meta charset=utf-8>
<style>
b-
{
--imwd:60;
--pgml:30;
--pggh:10;
--bbl:1;
--trbl:20;
}
b-
{
--z-pgml:0;
--z-pggh:0;
--z-trbl:0;
}
html.v1 b-, html.v2 b-
{
--z-pgml:calc( var( --pgml ) * var( --z-px ));
--z-pggh:calc( var( --pggh ) * var( --z-px ));
}
html.v2 b-
{
--z-trbl:calc( var( --trbl ) * var( --z-px ));
}
b-
{
--z-factor:1.5;
--z-px:1.5px;
}
b-
{
--z-imwd:calc( var( --imwd ) * var( --z-px ));
--z-opggl:calc( var( --bbl ) * var( --z-pggh ));
}
b-
{
--z-oppl:calc( var( --z-pgml ) + var( --z-opggl ) + var( --z-trbl ));
--z-pgwd:calc( var( --z-oppl ) + var( --z-imwd ));
}
b-
{
display:grid;
width:var( --z-pgwd );
height:200px;
}
iframe
{
background-color: lightgreen;
width:var( --z-pgwd );
height:200px;
}
</style>
</head>
<body>
<b->
<iframe></iframe>
</b->
<div style="width:90px; height: 25px; background-color: lightblue;">plain html</div>
<div style="width:150px; height: 25px; background-color: lightgreen;">html.v1</div>
<div style="width:180px; height: 25px; background-color: lightblue;">html.v1.v2</div>
</body>
</html>