Firefox 3.6
Firefox 3.6 looks to have plenty of new features for web developers to play with.
Firefox 3.6 is set to be released January 21st and is packing several new and exciting properties in it. Perhaps we can rename Firefox 3.6 to Firefox: Background Edition since the majority of those properties are background related.
CSS Background Gradients
Backgrounds gradients are something I've been requesting for a long time now. It looks like the browser vendors finally listened! To use CSS gradients you'll need to use them within the context of a background-image.
This example will create a horizontal white to black gradient.
html
{
background-image: -moz-linear-gradient(left, #fff, #000);
}
Advanced Gradients
Firefox also supports more advanced gradients such as radial (circle) gradients and linear gradients at an angle (i.e. diagonal gradients) much like one would create in Photoshop or Fireworks. It will also support color stops which are midpoints in your gradient.
Each of these topics are worthy of their own full length tutorial so I'm not going to dig too deep into them right now. Just be aware that they are now supported by Gecko (Firefox) and Webkit (Safari, and later Google Chrome) based browsers.
To learn more about CSS gradients check out the Mozilla Developer Center page on CSS Gradients.
Multiple Backgrounds in CSS
Multiple backgrounds are what we've all been waiting for. Gone are the days of nesting DIVs like this:
<div id="top-bg">
<div id="bottom-bg">
<div id="inner-bg">
Content
</div>
</div>
</div>
We can now use a single element if our page requires multiple backgrounds using the code below:
html
{
background-image: url(image1.png), url(image2.png), url(image3.png);
background-repeat: no-repeat, no-repeat, repeat;
background-position: right top, left bottom, top;
}
To learn more about multiple backgrounds check out the CSS Spec on Multiple Backgrounds.
CSS Background Scaling
Another background related addition to Firefox 3.6 is the -moz-background-size property. This allows us to resize background images, that are perhaps too big or too small for the element they are in.
If the our image image.png default size is 150px x 75px this would scale the image up larger:
div
{
background: url(image.png) no-repeat left top;
-moz-background-size: 300px;
}
Try It Yourself
Head over to http://www.mozilla.com/firefox/ and grab a copy for yourself.
