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 possible to do something like this in CSS:

line-height: (height / 2)px;

This would solve some problems you run into when you want to vertical align an element, for example. It is difficult to vertical align elements using CSS right now and produces quite some overhead.

You do not need this in cases where you know the fixed height of an element. But as soon as the height is subject to change (longer text, etc.) you are screwed on knowing the total height of an element.

It would be easy to solve this problem using additional JS, but this is out of question for normal websites. So why don't we just add the ability in CSS to refer to current values and work with them?

If you look into questions like this, you know what cases I mean:

• Can you do this html layout without using tables

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.

Answer 2

CSS3.1 defines calc() - it does exactly what you ask for. http://www.w3.org/TR/css3-values/#calc

Answer 3

I'd say it is because CSS just defines how something is displayed by the browser. There is no flow of information back to the style sheets, or to say it in other words: CSS is not dynamic.

If you know the height of an element and want to change it everytime the page is displayed you can generate a style sheet with PHP or other languages. Then you also know what's the half of the height and can set it also.

If you don't know the height it would be a dynamic change. The browser would have to render the page at first, then determine the height of the element and send it back to CSS. There the line-height is computed and altered in the rendered page. But maybe therefore the overall height of the element changes , too. Now the browser had to go back to CSS again and so on...

Just would not work. CSS is there to define the look of the page statically.