• 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.

So Apple announced the iPad, and it won’t support Flash.

That shouldn’t be a surprise. Neither the iPhone nor iPod Touch support Flash. Indeed most mobile platforms don’t (yet) support Flash. Even the smartest of smart phones have limited processing power and storage space compared to laptops and desktops.

According to Steve Jobs, Apple doesn’t support Flash on its mobile devices because “it’s buggy.” But I’d guess their decision has as much to do with Flash’s capabilities. Many of the products in that cash cow known as the Apple App Store could be developed using Flash instead.¹ Supporting Flash would undermine that billion-dollar revenue stream, piss off iPhone / iPad developers, and also put Apple at Adobe’s mercy.

Besides, everyone’s moving towards HTML5, right? Well yes they are, but not so quickly. I wouldn’t rule Flash out for another 3 to 5 years.

Why do I say this? Four reasons:

1. Flash has inertia on its side. Major content sites such as Disney and Hulu still use Flash to deliver video, animation, and interactive experiences. According to Adobe’s statistics, Flash has over 90% penetration in mature markets. Developers already know how to use Flash and ActionScript to create these experiences. In short: there are a lot of folks invested in Flash as a platform.

2. HTML 5 isn’t quite ready for prime time. It’s a shifting standard, a work-in-progress. Though even Internet Explorer 8 supports some significant HTML5 features, Internet Explorers 6 and 7 do not. And both browser versions are still used widely enough that dropping support is not an option for most developers.²

3. Flash is still the best cross-browser, cross-platform way to serve audio and video. Safari / WebKit, Firefox / Mozilla and Opera all support the HTML5 video element. They do not, however support the same codec.

   Apple is squarely in the H.264 camp. Google paid a licensing fee so that it could include an H.264 decoder in Chrome. H.264 is a patented codec. Any browser that wants to enable H.264 video will need to pay a licensing fee.

   Licensing fees and patent concerns are why Opera and Mozilla are backing Ogg Theora. Ogg Theora is an open sourced codec with no known patents. I should add here that Chrome also supports Ogg Theora. Google, perhaps wisely, chose to include both.

   The big monkey wrench in video element adoption, however, is Internet Explorer. Internet Explorer is waiting for them other fools to work out that default codec business before it implements support for the element.

   And all of this is before we get into the differences in how browser vendors will execute the specification. That’s a whole ‘nother headache.

   We will be using Flash until clients are willing to pay for separate Safari, Firefox and Internet Explorer video integration or until the HTML5 working group agrees on a default codec.

4. Adobe is working to bring Flash to other mobile platforms. As Adobe’s Chief Technology Officer Kevin Lynch explained, We are now on the verge of delivering Flash Player 10.1 for smartphones with all but one of the top manufacturers. This includes Google’s Android, RIM’s Blackberry, Nokia, Palm Pre and many others across form factors including not only smartphones but also tablets, netbooks, and internet-connected TVs. Could the iPhone and iPad’s lack of Flash support be a deciding factor in consumers’ decisions not to buy an Apple device?

My Prediction for Flash

I suspect that as HTML5 gains prominence, Flash will — eff that, it should — shift from an authoring environment for its proprietary SWF format to one that generates HTML, CSS, JS and SVG code for the browser. I think the building blocks for such software are in place. Flash Builder (formerly Flex Builder) for example, eliminates (most of) the need for FLA files. Perhaps developers will one day use a mix of ActionScript and JavaScript in the Flash Builder authoring environment to create web-ready assets and animation that don’t require a browser plug-in.

Mobile-friendly Web Development Right Now

Despite the fact that Flash is supposed to come to every other mobile platform, Apple’s decision to keep Flash off of the iPhone, iPad, and iPod Touch is not without impact. Apple still runs the smart phone market; in some ways they drive the mobile web. That means the prudent path is (still) progressive enhancement, and ensuring that your critical content and navigation are built using HTML.

So will I buy an iPad?

Nope. I have a laptop, a smart phone (a T-Mobile G1), a desktop and an iPod Touch. To me, the iPad is that weird spot between my smart phone or iPod Touch and a laptop with the convenience of neither. It doesn’t have the pocket-sized portability of my iPod Touch or my phone. And it doesn’t (yet) have the robust features of a laptop — USB ports, optical media drives, and the ability to install any app. I can’t justify the value for the price.

Besides, I still much prefer books to e-readers. I can sell books, trade books, leave books, loan books, and get books wet. I am not about to soak in the tub with a $300 device, but I would with an $11 book.

What do you think about the iPad, Apple’s decision, or the future of Flash and HTML5?

¹ Many of these apps could also be built using HTML, CSS and JavaScript, but there’s no money in that either.

² There are scripts available to make IE act right, of course. ExCanvas, for example, mimics support for the canvas element in IE. Simple HTML5 isn’t much different from HTML 4.01. You can actually forge ahead with HTML5 now if you don’t need advanced features like DOM Storage.

Internet Explorer will retain the version 7 rendering engine. But rather than opt-in to version 8 rendering, developers will have to opt-out of it. Developers and / or server administrators can do so with a <meta> tag or with an HTTP header.

Also see: Microsoft’s Interoperability Principles

Previously

• Web Standards Project releases Acid3
• On IE8: Pragmatic and practical, but I still don’t like it
• Internet Explorer 8 round-up

Acid1 and Acid2 tested for compliance with CSS 1 and CSS 2 specifications. Acid3 also tests for support of DOM Scripting / ECMAScript, SVG and webfonts.

Safari 3 and Opera 9 pass the Acid2 test, as does the beta version of Firefox 3. Version 8 of Internet Explorer will also pass the Acid2 test.

Here’s how today’s leading browsers handle Acid3 (check out the reference image). Each image links to a larger screenshot.

Firefox 2

Opera 9.26

Internet Explorer 6

Internet Explorer 7

Safari 3

Firefox 3 Beta

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

UPDATES:

Microsoft versioning: accessibility implications

What Internet Explorer’s change means for accessibility.

Best Standards Support

Sam Ruby offers a server-side suggestion for handling IE8 content requests.

Mike Davies argues that this should and perhaps could be the end of the line for Internet Explorer.

Microsoft᾿s “Super Standards” Mode: Important Facts

Jeff Schiller offers the clearest explanation I’ve seen about the changes coming with IE8.

Mistakes, Sadness, Regret

Ian Hickson on IE8, HTML5 and Microsoft.

Big Questions On IE8′s Big Progress

Alex Russell has some questions about how Microsoft will implement conflicts between meta tags.

Wisdom and folly: IE8′s super standards mode cuts both ways

Peter Bright over at Ars Technica gives a rundown of how this new ‘super-standards’ mode will work in IE8

Meta Madness

What seems to have slipped past the Microsoft Task Force of WaSP (or maybe it didn’t and they’re just playing coy) is that by implementing this specific feature in any other browser immediately either: A) Reduces its market size of viable web pages that will upgrade to new versions of the browser or B) Forces new versions of the browser to bloat, including backwards support for old-style rendering. – John Ressig

Bobbing Heads and the IE8 Meta Tag

Shelley Powers blasts this IE announcement.

In defense of version targeting

Jeffrey Zeldman says: When I look at the scenarios of who is likely to do what where web standards and version targeting are concerned, the IE7 default for those who don’t opt in appears to be the correct design decision.

Versioning, Compatibility and Standards

The WebKit team says it won’t be joining this <meta> tag march.

Opt-out version targeting is spam

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. — Ben Buchanan

It started this morning with Aaron Gustafson’s article on A List Apart announcing a new method of versioning HTML documents in the forthcoming Internet Explorer 8. Reaction is coming in from around the web. A few notable posts are below. I’ll keep updating this post as I come across stuff.

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Aaron Gustafson discusses Microsoft̵s latest effort to maintain web standards and also maintain backward compatibility.

Compatibility and IE8

Some background information relating to Microsoft’s decision.

Broken

Unless you explicitly declare that you want IE8 to behave as IE8, it will behave as IE7.Jeremy Keith

<META HTTP-EQUIV=”X-BALL-CHAIN”>

Mozilla hacker Robert O’Callahan weighs in on why this is (almost certainly) a bad idea.

IE8 to include version targeting

Jonathan Snook likes the approach.

From Switches to Targets: A Standardista’s Journey

Eric Meyer argues that maybe version isn̵t such a bad thing.

Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Aaron Gustafson discusses Microsoft̵s latest effort to maintain web standards and also maintain backward compatibility.

The Internet Explorer lock-in

Anne van Kesteren is not a fan of this Microsoft initiative.

From the IEBlog:

… I’m delighted to tell you that on Wednesday, December 12, Internet Explorer correctly rendered the Acid2 page in IE8 standards mode. While supporting the features tested in Acid2 is important for many reasons, it is just one of several milestones for the interoperability, standards compliance, and backwards compatibility that we’re committed to for this release. We will blog more on these topics.

This is most definitely w00t!-worthy. You can also watch an interview about the upcoming compliance of IE8 (requires Silverlight).

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)

Microsoft has licensed the patent it was found liable of infringing upon. This means that Internet Explorer will soon handle ActiveX content (Flash, QuickTime, etc.) the way it did before the decision in the patent case.

Your work style won’t have to change, however. You can still use SWFObject or the newer SWFFix (or your own custom scripts) — but you no longer have to.

* I don’t recommend chucking it since SWFObject offers things like version checking that make it worth using.

Somewhat related:

• Methods for embedding Flash
• Flash, validation and the latest versions of IE
• Get ready for the next version of Internet Explorer

Well, first Mike Kronenberg cut out a few steps and released ies4osx. Then Sérgio Luís Lopes Júnior added those changes into the latest version of ies4linux.

This isn’t yet a one-step operation. You will still need to install Darwine first.

The LitePacific hack for example, works well in Internet Explorer 6 and 7, but also affects Safari. If you support Safari, you will also need to create a separate set of style sheet hacks to address differences in the way Safari and IE render pages.

CSS hacks also make your style sheets much harder to read. With conditional comments, you have to maintain multiple style sheets, but each style sheet is cleaner and clearer. Granted, with each new version of Internet Explorer, you have to update your header templates. But updating a header file offers far less risk than integrating new hacks into your style sheets.

Which necessary evil do you prefer? CSS hacks or conditional comments? Speak your piece in the comments.

I upgraded my own computer to Internet Explorer 7. And because I’m running Windows XP Home, I couldn’t use the Virtual PC disk image offered by Microsoft. But since I also need to test web sites in IE 7, downgrading wasn’t an option.

Then I found out about IEs 4 Linux. It’s a project that will install Internet Explorer versions 5, 5.5 and 6.0 on any *nix machine running Wine.

Now I don’t have a Linux machine. But I do have a Mac with a copy of Parallels installed. That means I could install Xubuntu, install Wine, and then install IEs 4 Linux.

And aww junk! It almost works like a charm. Just one hitch:* my web site looks all janky now because the fonts are different. Now ordinarily I wouldn’t care, as long as the functionality is preserved, but the whole point of this exercise is to see how most Windows users would see the site.

How to fix? Just install the msttcorefonts package on your Xubuntu install (Applications → System → Synaptic Package Manager). Restart your virtual machine, and your fonts should be loaded and good to go.

Cost of Parallels: $79.99. Cost of a full Windows XP Professional license: $279.99.

By the way, IEs 4 Linux recently released a beta version that loads the Internet Explorer 7 rendering engine on top of IE 6.

Hat tip: John Daigle who told me all about the Wine + IEs 4 Linux combo.

(*Okay, there is more than one hitch. IEs 4 Linux has trouble with some — possibly most — PNG files.)

Details on our CSS changes for IE7

A quick-and-dirty list of bugs have been squashed, and what features have been added or changed.

What’s New in Internet Explorer 7

A more in-depth look at what’s new in IE7.

IE7 on CSS-Discuss

Read what the community has to say about IE7 on the CSS-Discuss wiki.

Exploring Internet Explorer

Microsoft’s own documentation about developing for Internet Explorer.

CSS Hacks

A round up of new-ish hacks for Internet Explorer 7.

Preparing your CSS for Internet Explorer 7

Another quick-and-dirty round up of what has changed.

CSS Tip: Targeting IE 5.x, 6 and 7 Separately

Taking advantage of bugs, deficiencies and interpretations to serve different styles to different versions of IE. (Though using conditional comments to serve CSS are really the way to go, in my opinion.)

12 Lessons for Those Afraid of CSS and Standards

Or how to have a working relationship with your development tools.

Some stuff I missed from last week, and a few tidbits from this morning.

IE7 Is Coming This Month…Are you Ready?

Unless you’re using some serious CSS ninjitsu, you’re ready.

eHub Interviews adaptiveblue

Adaptiveblue is a Firefox extension that uses semantics and context to create a richer browsing experience … er, I think that’s right.

PHP developers most likely to switch to Rails

I suspect that a lot of this has to do with many PHP coders being tinkerers on shared hosts. And RoR is The Hot. New. Thing. in web hosting. But that’s just a guess. I’m not about to fork over $795 to find out for sure . [Via PHPDeveloper.org]

Objectifying JavaScript

How to create and work with objects for cleaner JavaScript code.

For Vista, WGA gets tougher

While I understand Microsoft wants to protect its intellectual property, I just don’t trust them to get their Software Protection Platform right. My current PC may just be the last Windows machine I ever own.

Safari and Javascript debugging

An oldie, but a goodie, particularly if you’re new to front-end development in Safari.

]]> http://tiffanybbrown.com/2006/10/09/links-for-october-10-2006/feed/ 4