Using Math In CSS3

Morning all.

Im not sure if this is already a recommendation, or its already been thought
about, if not i would like to do so.

Basically i was working on a simple task, a 2 column layout heres the css:

body {width: 50em;}

div#mainNav {width: 10em;}

div#content {width: 40em;}

Now if i want to add a border, say 1px, i have to convert 1px to an em unit
and minus that from the width values (40em-n), then add 1px border all
around. It would take me a few seconds on the calculator, i know, but would
it not be easier to have something like?:

 body {width: 50em; overflow: hidden;}

div#mainNav {width: (10em - 1px);}

div#content {width: (40em - 1px);}

#mainNav, #content {border: red 1px solid; float: left;}

Im sure there would be great use for it on larger and different tasks, the
example i provided was very simple and probably not the best example.
Basically the algorithm would automatically be able to convert between px,
em, % etc.

Just an idea, and im looking forward to any comments.

Kind Regards.

James Jeffery

Received on Wednesday, 6 February 2008 06:25:27 UTC