Welcome to dtsn.co.uk, if your new here please subscribe to my feed
12/05/2008
There is a very little used and unknown method which allows you to utilise JavaScript within a CSS file. The CSS Expression property allows you to assign a JavaScript expression to a CSS property. For example, this allows you to set the position of an element according to the browser size.
width:expression(document.body.clientWidth > 950 ? "950px": "100%" );
Do not use CSS Expression, they are unreliable, slow and are only supported in IE!
CSS Expression suddenly came to me as a solution for the currently much debated feature (here and here) of variables in CSS3. This could theoretically be currently achieved through the use of CSS Expressions.
function blue() {
return 'blue';
}
body { background: expression(blue()); }
CSS Expressions are horrible and unsupported, so please don’t use them in development. They do, however, highlight a interesting and little known feature of CSS.
That’s indeed a really interesting idea. I thought about CSS variables and math ops a lot recently, but JS never crossed my mind. Since it runs on the client side you can’t be sure that it’s actually executed. But it’s probably good enough for proof of concept things.
The name of the function in your example is bad though. You should have called it primaryColor or something like that.
May 13th, 2008 at 3:36 am