Kilian Valkhof

But you’d probably still need margins. The “height: 100% – 150px” might actually make a div with 100% height…and then subtract 150px from the bottom. Which would still be pretty nifty.

Gosh, I can’t think up random things in CSS. I’m jealous! :o

We should make a proposal so they add this to CSS3 :)

> But you’d probably still need margins. The “height: 100% – 150px” might actually make a div with 100% height…and then subtract 150px from the bottom. Which would still be pretty nifty.

You could probably tell the CSS where to cut the pixels off, height: “100% -150px top” :)

For the border example, don’t we already have the outline property to do this for us?

YES – I was searching the web for this, and found this page.

Math in CSS would be next-gen amazing. I’m a die-hard tables fan forced to be a DIV user both by my “it’s time” feelings as well as client-requests. Let’s just say the transformation has been less than pleasing, and some math in CSS would be amazing.

references in CSS would be better…

#header {
height:150px;
background:#fff url(“pretty-header.png”) no-repeat 0 0;
}
#content {
height:100% – #header.height;
background:#fff url(“content-bg.png”) repeat-y top center;
}

Since I have worked more with programming than web-design, there were two things I wished for in CSS: math and constants.
To continue your example with % and borders, lets image we can set the border with like this:
define{ border_width: 5px; }

and then we could define the element like this:
width:50% – border_width * 2;
border:border_width solid #000;
float:left;

If we wanted to change the border thickness we could just change border_width and both values are updated.
Since I have a hard time with choosing good colors I will probably need to change it again later on… So setting these as constants would speed up testing since I otherwise would need to change it several places in the style sheet…
I also like keeping things like the spacing between elements somewhat constant throughout the design, setting this as a constant would be nice.

The reason I would like math and constants in CSS is also to make it easier to understand.
If we used the previous example, but having a fixed width of 150px instead of 50% we would normally say:
width:140px; /* 150px – 10px */

but wouldn’t this be much easier to understand:
define{
total_width = 150px;
border = 5px;
}
width: total_width – border *2;
I have caught myself thinking “Why did I write that number?” when editing in a part of the style sheet I hadn’t touched for a while. If it had been defined as above, such cases would be less likely.
Of course, it adds a little bit of extra weight to the code, but if you are worried about that you could always make a small program to replace the constants and do the math where possible.

I started learning HTML and CSS a half year ago when my school forced me to do it, but it turned out to be more interesting than I thought. So I’m still quite new to this though…

The idea of implementing mathematical functions in CSS is something that would make life as a web developer easier. But still, I would imagine that you’d still have to use javascript to actually make the equations. The only way out today would be to skip hard-coded css files and work with the css properties in javascript instead. If you use libraries, such as jquery, the selectors still would be pretty much the same and more properties would be available to control through the “javascript-css” such as animations and effects on events, such as clicks,toggles, focus.

Any updates on the status of this? I just happened to try this while goofing around and it appears to actually work exactly as I would expect in every recent browser. Still doesn’t validate with W3C though. Anyone have any insight?

http://hacks.mozilla.org/2010/06/css3-calc/, there is always the CSS3 calc() method, that works in firefox 4 via -moz-calc and IE9 via calc, but from what I here neither are perfect solutions.

@Thomas Barrasso:

You know that CSS3 had not even been proposed when this was posted right?
Also Firefox’s “calc()” [-moz-calc() right now] doesn’t work for widths yet …which is the main thing people want this for.
Also IE9 is in “Developer Platform Preview” and is such a slimmed down version that it is almost completely unusable for anything other than looking at it and saying “OK, I can see that it supports this …”

So hopefully CSS3’s calc() will get completed in Firefox soon.
then we can all be happy ☺

There is one way I know of to use math in css via using a php file as the stylesheet! :)

Here is a simple example:

<? $size = 150; $spacer=$40; ?>

div.myClass
{
position: absolute;
left: 20px;
width: <? echo $size ?>;
}

div.MyClassWhichIsRelativeToMyClass
{
position: absolute;
width: <? echo $size ?>;
left: <? echo 20 + $size + $spacer ?>;
}

Alternatively, you can also work with .htaccess to have server look for php in a .css file. Learning this technique was very helpful to me!