Firefox (Gran Paradiso) 3a7: -moz-initial and forms

Warning This article was written over six months ago, and may contain outdated information.

Recently I was chatting with Rapha Martins, and he mentioned a feature he’d like to see in CSS: a ‘default’ value for properties; that is, if you change the value of a property, a keyword that would change it back to the browser default rather than you having to specify that value again.

That has been proposed for CSS 3, with the ‘initial‘ value, and it’s been introduced into the latest preview of Firefox 3 (Gran Paradiso), with the browser-specific -moz- prefix. I’ve put together a quick couple of basic examples of how it will work (you will, obviously, need the latest preview to see them).

In the first example, the paragraph inside the box has a green background; on hovering over the box, the background reverts to the initial value – transparent.

div p { background-color: #0f0; }

div#one:hover p { background-color: -moz-initial; }

In the second example, the paragraph has been set with a ‘display’ value of ‘none’; on hovering over the box, the initial value of ‘block’ is set.

div#two p { display: none; }

div#two:hover p { display: -moz-initial; }

At least, it should; however, whether through a bug or my not completely understanding, it seems to instead set a value of ‘inline’. As I said, that could be a misunderstanding on my part; I’ll need to test further.

I also noticed that form elements have had a bit of a refresh, at least on the Ubuntu system I use; checkboxes and radio buttons glow when hovered, and are more clear when highlighted. Compare Firefox 2 (left) with Gran Paradiso (right) to see the difference:

Checkboxes: FF2 vs FF3

It seems to be taking the colour from the OS, which is a nice touch; it’s more Mac-like, although not quite as dominant.

There are more changes listed in the release notes; I think it looks to be shaping up nicely.

Comments are closed.