The first public beta of the forthcoming Firefox 4 browser has been released bringing increased support for CSS3 amongst various other improvements.
One of the most notable new additions in Firefox 4 is support for CSS3 Transitions (with the -moz- prefix). Webkit based browsers (such as Safari / Chrome) and Opera have supported CSS3 Transitions for some time, almost three years in Webkit’s case, and it is reassuring to see that Mozilla have finally made an effort to catch up with the competition in this area.
According to the Mozilla Hacks blog;
This beta release contains a nearly complete implementation of CSS Transitions, privately namespaced with a -moz prefix. The only big things left here are the animation of transforms and gradients. (Gradients is still waiting on working group feedback, code for transitions is under review.)
You can read more on Mozilla’s implementation of CSS3 Transitions on the Mozilla Developer Center along with several examples.
What Else is New?
Firefox 4 also brings several other improvements/changes in terms of CSS3 support including:
* Resizable textarea Elements – Textarea elements are now resizable by default. You can use the -moz-resize property to change the default.
* New CSS3 calc() support – This beta includes support for the new CSS3 calc() value. This lets you specify sizes that include a combination of percentages and absolute values and is hugely popular with developers. More info here.
* Selecting a section of a background image – You can now use the new -moz-image-rect selector to select only a section of a background for display.
* Removed support for -moz-background-size – The -moz-background-size property has been renamed to its final background-size name. -moz-background-size is no longer supported.
* Privacy and the :visited selector – Implementation of changes, announced in March, with regard to what information can be obtained about the style of visited links using CSS selectors. This may affect some web applications. More information here.
In addition to the above, Mozilla have also added a new -moz-any selector. Although not part of the CSS3 specification, -moz-any is a powerful selector that lets you replace large and complicated selectors with much smaller ones. More details can be found on the Mozilla Hacks blog.
You can read more on The Mozilla Blog or Mozilla Hacks and, if you haven’t already, you can download the beta release here.
Mozilla have promised a new beta release every two to three weeks.
