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

Is there a question somewhere in here? or is this a CSS feature suggestion? If it's the latter, I suggest taking it to the W3C, or creating your own web browser. :-) — George Stocker, Feb 09 '09 at 12:15
I'd say this is not a real question and should most likely be closed or altered. — Aron Rotteveel, Feb 09 '09 at 12:27

score 14 · Answer 1 · answered Feb 09 '09 at 14:35

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.

Well, there are plenty of cases where it would work. Consider "height: 5em; line-height: height-4px;" There is no problem of recursion between the height and the line height: the height is fixed independently of the line-height. But I can't specify the line-height in either em's or pixels because I don't necessarily know how many pixels to an em at this point. I understand that there are cases where we would get into an infinite loop, and it's difficult to write code when the algorithm "usually" works. Perhaps there could be a rule that just says we won't recurse: we make one pass and stop. — Jay, Mar 30 '15 at 03:56

score 13 · Answer 2 · answered Mar 26 '11 at 22:21

13

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

answered Mar 26 '11 at 22:21

Mike

131
1
2

4

This is not true. The specs say nothing about using dynamic values... I can see only constants there. – Miguel Angelo Jul 05 '11 at 18:24

score 8 · Accepted Answer · answered Feb 09 '09 at 13:00

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.

score 4 · Answer 4 · answered Mar 04 '13 at 15:44

4

There has been development on this. Still not 100% ready but it is interesting. I hope this helps anybody coming to this page in the future!

https://developer.mozilla.org/en-US/docs/CSS/calc

answered Mar 04 '13 at 15:44

Michael

3,416
1
19
21

Chris · Answer 5 · 2011-07-26T04:40:28.510

4

You might be interested in languages that compile to CSS, such as SASS, LESS or Stylus.

edited Jul 26 '11 at 04:40

answered Jul 26 '11 at 04:33

Chris

9,994
3
29
31

score 1 · Answer 6 · answered Feb 09 '09 at 13:01

1

Why is it "out of question for normal websites"? jQuery can do a lot of this fairly easily...

IE does support calculations in styles, but it is not recommended, performs like a dog, and is completely incompatible with everything else.

answered Feb 09 '09 at 13:01

Marc Gravell

1,026,079
266
2,566
2,900

1

Because there are still some people with JS being turned off. – Sebastian Hoitz Feb 09 '09 at 14:33

score 0 · Answer 7 · answered Mar 01 '14 at 15:10

0

You Can Use SASS and LESS . if you don't know anything about them , Google them :

answered Mar 01 '14 at 15:10

4

SASS and LESS are server based and have nothing to do with the rendering on the webbrowser. Therefore that cannot be used for dynamically calculating values based on the current height of e.g. the viewport. – Ron Deijkers Oct 16 '14 at 13:13

Value calculation for CSS

7 Answers7

Linked