Using Math In CSS3

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Using Math In CSS3

James Jeffery
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