Firefox 4 Beta 1 already brought a large amount of new features (see the Beta 1 feature list). So what’s new for web developers in this beta?
Performance & CSS3 Transitions
The two major features for web developers with this release are Performance improvements and CSS3 Transitions on CSS3 Transforms.
Performance: In this new Beta, Firefox comes with a new page building mechanism: Retained Layers. This mechanism provides noticeable faster speed for web pages with dynamic content, and scrolling is much smoother. Also, we’re still experimenting with hardware acceleration: using the GPU to render and build some parts of the web page.
CSS3 Transitions on transforms: The major change for web developers is probably CSS3 Transitions on CSS3 Transformations.
CSS3 Transitions provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. See the documentation for details.
This feature was available in Firefox 4 Beta 1, but in this new Beta, you can use Transitions on Transformation.
A CSS3 Transformation allows you to define a Transformation (scale, translate, skew) on any HTML element. And you can animate this transformation with the transitions.
transform: rotate(5deg);will transform
transform: rotate(350deg) scale(1.4) rotate(-30deg);through a smooth animation.
/* Prefixes */
transform: rotate(350deg) scale(1.4) rotate(-30deg);
/* Prefixes */
-moz-transform: rotate(350deg) scale(1.4) rotate(-30deg);
-webkit-transform: rotate(350deg) scale(1.4) rotate(-30deg);
-o-transform: rotate(350deg) scale(1.4) rotate(-30deg);
CSS 3 Transitions are supported by Webkit-based browsers (Safari and Chrome), Opera and now Firefox as well. Degradation (if not supported) is graceful (no animation, but the style is still applied). Therefore, you can start using it right away.
I’ve written a couple of demos to show both CSS3 Transitions on Transforms and hardware acceleration (See the video above for screencasts).