The latest version of the Firefox browser is due for release in the near future, and the nightly and beta versions I’ve been testing show that it’s taking a big step forward from its predecessor. As well as the many usability and performance enhancements, there are a whole host of improvements to the engine; mainly (but not exclusively) geared towards web applications with the implementation of HTML5 events and attributes. SVG support is greatly improved (although I think they’ve missed a trick by not allowing it in the img element), and JavaScript version 1.8 is included.
With all the new goodness, it seems that CSS might have been left behind a little. I can’t complain too much, as many fixes have been made to allow the browser to pass the Acid 2 test, but it is slightly disappointing when you see the advances Opera and Safari have made in the implementation of CSS 3 features (even with proprietary prefixes).
That said, there are a number of new features which are worth bringing to light.
color: rgba() and hsla()
Adds an alpha channel value to color methods, meaning you can apply opacity to elements. Accepts a value of 0-1:
h1 { background-color: rgba (255,0,0,0.5); }
Would give you a 50% opaque red background. This is more useful than opacity as it applies only to the selected element and is not inherited by children. CSS3.info has demos for rgba and hsla.
font-size-adjust
Although Firefox 2 for Windows already has this property, this is new to users of all other platforms. font-size-adjust allows you to set the height of a font based on its lowercase characters; useful if the fallback fonts in your matrix have a significantly different x-height to your first choice.
h1 { font-size: 16px; font-size-adjust: 0.5em; }
This code means that whatever font is displayed, it will do so at a height where the lowercase characters are 8px (16 x 0.5) tall. If that’s not clear, fonttester.com has a fuller explanation.
display: inline-block (and inline-table)
inline-block allows you to use a block element in the flow of inline elements, much as you can currently do with img.
span { display: inline-block; width: 10em; }
Rather than trying to explain the benefits of this, here’s a real-world example: Align List Items Horizontally with CSS. inline-table behaves in a similar way, only with tables (obviously), making it slightly less useful day-to-day.
I’ll cover some more of the new properties in a second post, very soon.