

Firefox 4: CSS3 calc() - rlm
http://hacks.mozilla.org/2010/06/css3-calc/

======
cscotta
Of course, the humor here lies in the fact that IE has had dynamic CSS
calculations since IE 5, but is now in the process of removing them – just as
they are being standardized in other browsers.

For example [1]: <div
style="left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);">Content</div>

These expressions (or "dynamic properties") essentially evaluated JScript
embedded inside a stylesheet and provided some handy hacks to get around
otherwise-painful bugs. This included simple math calculations as described in
the Mozilla post, but also more complex transformations such as varying the
style of an element based on the current day (or other JS-retrievable
information).

Funny to see Mozilla phasing this in just as Microsoft phases something
similar out [2].

[1] [http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-
express...](http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-
expressions.aspx)

[2] [http://msdn.microsoft.com/en-
us/library/ms537634(VS.85).aspx...](http://msdn.microsoft.com/en-
us/library/ms537634\(VS.85\).aspx#Implement)

~~~
seldo
The problem with Microsoft's implementation is that it allowed _any_
Javascript to be executed -- so CSS became a vector for XSS attacks (one of
the early MySpace worms was based on this feature). This implementation only
allows very basic math, and is so is inherently a lot safer.

~~~
cscotta
Completely agree - Mozilla's scaled-back implementation, which appears to be
closer in line with the standards track - is much safer and marks a better
approach anyway (several at MS have been openly recommending against using
dynamic attributes for some time now).

It's moves like this among vendors that force us to think about that line
between "experimentation and innovation" vs. implementing "proprietary
features."

As NathanKP mentioned below, we'd all do well to push vendors to come back
together toward standard implementations across all popular browsers. Here's
hoping.

------
rlm
Life would be so much easier if this were standardized!

------
Kilimanjaro
While calc() is nice, I rather have vars or defs so I can declare a color once
and use it everywhere so if I decide to change the color I just change it in
one place at the top.

~~~
fortes
Fortunately, you can use a pre-processor like SASS for that -- however, calc()
allows you to do calculations at runtime which cannot be done in a pre-
processor.

~~~
tjpick
or use any of the various scripting languages (php, python, perl etc) to serve
the css. Problem solved. Just do this behind a cgi or similar for development,
and then just run it and save the output as a static file for production.

It's not like variables in a plain text string are a hard thing, for goodness
sake.

~~~
chime
width: 100% - 2px cannot be done via PHP. That's why this is very interesting.
100% changes depending on your browser window size.

~~~
tjpick
well yes, but I was responding to the following from the GP, rather than
discussing the power of calc()

> I rather have vars or defs so I can declare a color once...

------
RyanMcGreal
Tell me again why Mozilla keeps using the -moz prefix when it implements
features of CSS3?

~~~
novas0x2a
The calc() function is part of the CSS3 /Values & Units/ module[1] which is
currently in Last Call status[2]. Here[3] are the status definitions that
apply to CSS3. It doesn't make sense to remove the moz prefix until the
standard is (probably) done changing.

In addition, mozilla's implementation of it is still in flux (since it's not
done) and using the non-extension terminology for an in-development feature is
a great way to convince people to use it and then screw them over when you
change it.

Also, I found out about all this because you asked. So thanks for causing me
to learn something new today :)

1) <http://www.w3.org/TR/css3-values/#calc>

2) <http://www.css3.info/modules/>

3) [http://www.css3.info/css3-development-status-an-
explanation-...](http://www.css3.info/css3-development-status-an-explanation-
of-w3c-maturity-levels/)

~~~
RyanMcGreal
That was really helpful; thanks!

(And now I feel guilty about being too lazy to look up the answer myself.)

------
nitrogen
I'm glad the mod operator is included, to make it easy to divide a page into n
equally-sized blocks depending on some other parameter. I wonder if calc()
will integrate with counters or otherwise allow the use of variables, or if
that will remain the domain of JavaScript (I like having my pages work 100%
without JavaScript if it's possible, to avoid NoScript issues). I guess I'll
have to read the spec.

------
kristiandupont
The features of LESS seem like much more obvious lacks in CSS than this to me.
(<http://lesscss.org/>)

------
tszming
While CSS 3 gives you some new cool features, but they be another performance
killers, so use it wisely.

e.g.

[http://support.mozilla.com/tiki-
view_forum_thread.php?commen...](http://support.mozilla.com/tiki-
view_forum_thread.php?comments_parentId=638706&forumId=1)

------
tybris
I've been hoping for something like this ever since I ran across
<http://www.marcoslot.net/alm.htm> . GUIs need programming too.

------
geuis
I'm just curious, but this is _not_ similar to IE css filters, right?

~~~
lhorie
No, it's more like IE CSS expressions, except you can't run arbitrary
javascript with it.

