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.
Hi,
The example you gave helped me understand the point of the :-moz-any selector but I’m not sure you if you should change the example to something a bit more realistic because it looks like you could do the same thing with just…
.lists li { property: value; }
…rather than the long winded…
.lists :-moz-any(ul,ol,menu) li { property: value; }
Just a thought :)
Thanks for the post, it was very interesting.
Mark McDonnell [May 21st, 2010, 08:57]
Thanks Mark; you’re absolutely right, so I’ve changed the examples to be clearer.
Peter [May 21st, 2010, 10:10]