Are there any techniques that allow for expressions in css3 statements?

Frequently it is helpful to do such things as width: 35%+20px or similar. Right now the only solutions I have to these circumstances are to either redesign the page or to use javascript to dynamically set the css.

Are there any techniques that allow for expressions in css3 statements?

Frequently it is helpful to do such things as width: 35%+20px or similar. Right now the only solutions I have to these circumstances are to either redesign the page or to use javascript to dynamically set the css.

• javascript
• css

Share Improve this question Follow asked Jun 1, 2011 at 20:46 Razor StormRazor Storm 12.3k2020 gold badges9595 silver badges151151 bronze badges 1

• Due to the similarity of answers, I accepted the oldest one. – Razor Storm Commented Jun 1, 2011 at 21:46

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

The CSS working draft on values and units specifies a calc function, though it is only supported in the latest versions of IE and Firefox.

unfortunately CSS3 calc() is not quite ready yet ;)

Quote from the specs:

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
  border: solid transparent; border-width: 2px 1px;
}

p:hover { border-color: yellow; }

while it's scary that evaluation expressions may be allowed in CSS (it's not a programming language) it's exciting that something as simple as "take-away" might be used.. but then again there is the "box-sizing" property, so perhaps it's not necessary - to do otherwise is perhaps losing the KISS principle?

The calc() function can be used wherever length values are allowed. This is defined in CSS3 Values and Units (see http://www.w3/TR/css3-values/). I don't know what browser are supporting it.

section {
   float: left;
   margin: 1em; border: solid 1px;
   width: calc(100%/3 - 2*1em - 2*1px);
}

p {
   margin: calc(1rem - 2px) calc(1rem - 1px);
   border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }

dicejs. (supposedly stands for dynamically injected css engine) A client-side version of SASS. Pretty slick and allows real time manipulation of variables and functions. The plugins are rudimentary for colors and CSS3 but you could easily write your own because it's all in javascript. I think this is a nice way to get around waiting for CSS specifications to be supported in major browsers.

Yes, and it's called Sass.

http://sass-lang./