Value calculation for CSS

Question

As a web developer you often run into problems that might be solved very easily if there was something like value calculation.

I\'ve often wondered why it is not pos

Answer 1

why it is not possible to do something like this in CSS: line-height: (height / 2)px;

Because that would make it very easy to introduce logical loops.

In this example, unless you explicitly set ‘height’ (in which case it would also be easy to explicitly set ‘line-height’), the height of the element is dependent on the line-height of its content text, which is dependent on the height...

IE tried to provide this with the ‘expression()’ syntax, but it doesn't really work. IE's approach was to have it recalculate step by step, so if you have an indeterminate expression it can keep redrawing your elements constantly as the expression's value changes. For an example of how this can go wrong, try:

<div id="q" style="background: yellow; line-height: expression(document.getElementById('q').offsetHeight/2+'px');">
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
</div>

As you resize the browser window, the line-height, and hence offsetHeight will change, resulting in inconsistent layout. At a certain size the height will explode.

There is a case for allowing simple expressions containing only constants, eg.:

line-height: (1em+4px);

but anything involving dynamically-calculated properties is as doomed to failure as IE's infamously-broken ‘expression()’ syntax.