• don’t require the additional HTTP request of an image file.
• are easier to modify than image files.
• “weigh less” than most image files.

That’s the ideal, at least. In their current state, gradients are actually a hot mess. The reality?

• The specification is still in flux.
• Full gradient support is not available in all modern browsers. (For now, Opera 11 only supports linear gradients.)
• Many older, though relatively recent versions of browsers (Internet Explorer 8 & 9, Opera 10 Desktop, Opera Mobile, and Opera Mini, for example) don’t suport CSS gradients at all.

So, how can developers take advantage of gradients and still support older browsers? Let’s look at some approaches.

Set a background color

Take a look at the following CSS:

#linear{
    width:400px;
    height:300px;
    background-image: -moz-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#f60), to(#fc0), color-stop(0.5,#c09) );
    background-image: -o-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
}

This is a fairly common scenario. The developer (*cough*me*cough*) covered most of her bases, but forgot one: browsers that don’t support gradients at all. You can see what this looks like in Internet Explorer 9 (see Figure 1).

Figure 1. Internet Explorer 9 doesn’t yet support CSS gradients. This is what it looks like if you don’t supply a background color.

Now look at the following CSS:

#linear{
    width:400px;
    height:300px;
    background-color: #333;
    background-image: -moz-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#f60), to(#fc0), color-stop(0.5,#c09) );
    background-image: -o-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
}

Here we’ve set a background image, but we’ve also set a background color. Browsers that don’t support CSS gradients will ignore the last three lines. (Note: each browser also ignores the other browsers’ vendor-specific prefixes.)

Setting a background color is the easiest fall back for older / less modern browsers.

Set a background image using an external file

Consider the following CSS.

#linear{
    width:400px;
    height:300px;
    background-image: url(migas.jpg);
    background-image: -moz-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
    background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#f60), to(#fc0), color-stop(0.5,#c09) );
    background-image: -o-linear-gradient(top left, #f60 0%, #c09 50%, #fc0 100%);
}

In this example, we’re taking advantage of how browsers apply the cascade. As it turns out, Opera 11, Chrome whatever-the-heck-version-it’s-up-to, and Firefox 4 will not make the HTTP request for the external file. Safari, however, does (see Figure 2). Internet Explorer 9 (and less-modern browsers) will only load the external file. Depending on your audience, this may be an acceptable alternative.

Figure 2. Safari downloads all images. Click to embiggen.

Note: I have just barely tested this in mobile browsers. (Opera Mobile 11 doesn’t support gradients. Users will see the external image).

Use SVG gradients to create a background image

Internet Explorer 9 and Opera 10 (including Mobile) do not support CSS gradients. They do, however, both support the use of SVG images as background images. Another alternative to using external images, then, is to use an SVG file.

#linear{
    width:400px;
    height:300px;
    background-image: url(gradient.gif);
    background-image: url(gradient.svg);
}

This example works in all current desktop browsers, and most mobile browsers. Safari 5, again, will download both images. Most others will download the latter SVG image. The advantages here are clarity and (arguably) ease of maintenance. Want a different gradient? Change the images.

You should be aware, though, that some recent(-ish) versions of mobile WebKit — such as the T-Mobile myTouch 4G browser — don’t support SVG backgrounds. You’ll still need to add a linear gradient for those browsers, or set a background color.

Or keep doing what we’ve been doing

Of course, the growth of SVG and CSS gradients support doesn’t preclude using GIF, PNG or JPG gradients. The biggest point in favor of using bitmap images is that they still work in older browsers and current ones.

As with any aspect of web development, the right approach should balance concerns of maintainability, file size, and the browser distribution of your audience.

You left out linear-gradient!

I left it out of the examples above for two reasons: (1) simplicity; and (2) the syntax could change (though if I had to predict, it won’t change by much). Be forward-thinking! There are very few reasons not to include the proposed linear-gradient syntax in your code.

About 6 years ago, I remember taking part in a conversation about preferred browsers on the Jane magazine message boards. IE 5.x was still king of the PC world. IE 6 was coming on strong. Netscape 4 was still widely used by universities. Netscape 6 was on its way.

Most of the respondents said they preferred Internet Explorer. Why? Because sites just “look right” and “work better” in Internet Explorer. My response at the time was simple: if a site doesn’t work in Netscape, it’s because the web developer didn’t know what (s)he was doing.

Of course, they didn’t care. They were far more into Sephora than HTML code quality. As far as they were concerned, Netscape was the problem. They didn’t blame crap code, or Microsoft for developing a browser that stomped harder than a Catalonian flamenco dancer all over the W3C specs and allowed ugly code to thrive. They blamed Netscape.

I was reminded of that conversation when I first read Microsoft’s recent announcement about Internet Explorer 8. After my initial D*MNF*CKINGBLOODYHELL!JUSTBREAKTHF*CKINGWEBALREADYMICROSOFT!WHATTHEF*CK? IAMTIREDOFYOURAGGEDYBASTARDSMAKINGMYDAYJOB1000TIMESHARDERTHANITNEEDSTOBEBECAUSEYOUCAN’T DEVELOPABROWSERTHATFOLLOWSAF*CKING10YEAROLDSPEC!!! reaction passed, I came to the following conclusion: this is the best approach to a bad situation.

Microsoft does not want to be where Netscape was. It’s a sad but true fact is that if a site breaks, the average web user — and, dare I say, average web developer — will blame the browser. Microsoft is too entrenched in corporate intranets and applications to let that happen. Doing so would cause a sh*tstorm of massive proportions for the company. From a business perspective, I understand.

And while I am also not happy about the default implementation (as Jeremy Keith explained Unless you explicitly declare that you want IE8 to behave as IE8, it will behave as IE7.), opting-in to web standards eliminates the need to revise existing code.

Yes, it’s potentially a nail in the coffin for progressive enhancement techniques. Yes, we’ll still have to do something special to cater to Microsoft browsers. Yes, this could freeze web development at the IE7 level for years to come. But I believe — and it pains me to say it given the hate-hate more relationship I have with Microsoft browsers — that Microsoft, given its position, had no other choice.

But putting pragmatic approaches and practical considerations aside, I think Ben Buchanan said it best:

If they’ve included a DOCTYPE, they’ve declared they want to render to standards. If they did that in ignorance, it’s time they started earning their money instead of letting Dreamweaver do their jobs.

Related: Internet Explorer 8 Round Up

Two points to think about:

Theory of mind is the awareness that others are aware, and its absence is the weakness that Google doesn’t know it has. This shortcoming exists at a deep cultural level within the organization, and it keeps manifesting itself in the decisions that the company makes about its products and services. The flaw is one that is perpetuated by insularity, and will only be remedied by becoming more open to outside ideas and more aware of how people outside the company think, work and live.

And:

An awareness of how a transformation in the fundamental value of links from informational to economic could have led Google to develop a system that separated editorial and aesthetic choices from economic ones, preventing the eventual link-spam arms race.

Also of note today (with some stuff from yesterday):

• The Blogosphere Gets a Newspaper in The Issue
• Amazon launches SimpleDB (in a limited beta) (Related: What You Need To Know About Amazon SimpleDB via Read/Write Web)
• Opera files antitrust complaint with the EU (Analysis: CSS Unworking Group by Andy Clarke)