New to Firefox: –moz-calc and :-moz-any

The latest nightly releases of what will become Firefox 4 have implemented a couple of experimental new CSS features. The –moz-calc function allows calculations on length values, and the :-moz-any selector permits grouping of simple selectors.

If you have a nightly build of Firefox you can see a little demo I’ve put together of them in action.

The first new property is –moz-calc, which is the experimental implementation of CSS3’s calc function. This allows you to perform simple mathematical functions on length values.

Take a look at the demo, where you’ll see two h2 elements; both have the same styles applied to them, but the second also has some extra calc values for some of its properties:

font-size: -moz-calc(120% * 3);
letter-spacing: -moz-calc(0 + 2px);
text-shadow: rgba(0,0,0,0.33) -moz-calc(4px / 2) -moz-calc(4px / 2);
word-spacing: -moz-calc(0.75em - 0.25em);

The font-size property has a value of 120% * 3, or 360%; the letter-spacing property has a value of 0 + 2px, or 2px; the text-shadow property has x and y offset values of 4px / 2, or 2px; and the word-spacing property has a value of 0.75em — 0.25em, or 0.5em.

The values themselves are abitrary and not important; what matters is that we’re doing calculations in CSS!

At the moment the only properties which support –moz-calc values are:–moz-column-rule-width, –moz-column-width, letter-spacing, word-spacing, marker-offset, outline-offset, border-spacing, text-shadow and –moz-box-shadow; but work is underway to add this to all properties which accept length values.

Update: You can read more about calc() at hacks.mozilla.org.

Also implemented is a new selector, :-moz-any. With this you can group other simple selectors, removing the need for repetitive code. Consider, for example, a typical web page which has many types of list, and nested lists:

<ul>
  <li>We are all list items now
    <ul>
      <li>We are all list items now</li>
    </ul>
  </li>
</ul>
<ol>
  <li>We are all list items now
    <ul>
      <li>We are all list items now</li>
    </ul>
  </li>
</ol>
<menu>
  <li>We are all list items now
    <ul>
      <li>We are all list items now</li>
    </ul>
  </li>
</menu>

If we wanted to select all of the li children of nested ul elements we would currently have to do this:

ul ul li, ol ul li, menu ul li { property: value; }

But with –moz-any we can group the selectors like so:

:-moz-any(ul,ol,menu) ul li { property: value; }

In my demo page I’ve provided a couple of examples; the first selects all list types which are direct child elements of the body:

body > :-moz-any(ol, ul, menu) {
	float: left;
	width: 33%;
}

And the next selects list items of the lists which are children of those elements:

:-moz-any(ol, ul, menu) ul li {
	font-weight: bold;
	margin-left: 0;
}

The :any selector isn’t in any of the CSS3 modules, but it’s pretty useful and definitely a candidate for inclusion. You can read more about it on the blog of David Baron.

Update: Changed the examples for clarity.