First, it's more compact. CSS3 gradient specifications are typically a few hundred bytes; background images for gradients often range into the thousands. Even more than this superficial superiority, though, is the fact that the CSS3 gradient is in-line: its transmission doesn't require opening another file. When so many Web-site visitors arrive by way of reduced-bandwidth mobile browsers, keeping the count of auxiliary connections to render a page low can be crucial in keeping performance up.
In broad terms, then, your Web designers do the same things they've always done -- use the Photoshop gradient tool, or something similar -- but export to CSS3 rather than HTML4 or XHTML. What the end-user sees in his or her browser is indistinguishable, but it's achieved with a quicker, perhaps much quicker, download. Also, it's much easier to adapt CSS3 gradients to different screen-sizes, with all the obvious benefits for your mobile viewers, whose linear screen resolutions might vary by a full order of magnitude.
Technical details complicate this picture slightly:
- In principle, it's possible to in-line old-style gradients, and thus reduce download costs. This is rarely done.
- HTML5 includes other gradient effects outside the scope of CSS3; and
- CSS3 support of gradients introduces new levels of programmability. One could, for instance, adjust a gradient based on the age or location of the viewer.
As entertaining as these possibilities are for programmers, we don't recommend them. Don't let them distract you from the main point of HTML5's semantically-expressed gradients: they make for quicker downloads, easier porting to mobile form factors, and less expensive maintenance.
2. Improved SEO
Several other common graphical effects have CSS3 expressions, including opacity (a foreground image is sufficiently transparent to allow its background to be partially visible), rounded corners, and drop shadows. All of these share with CSS3 gradients the advantages of compact uploads and easier cross-platform maintenance. They also introduce advantages for search-engine optimization (SEO) that deserve careful explanation.
To understand the SEO implications, return for a moment to gradients. Another technical advantage of CSS3 gradients is that they're more compatible with source-code control systems (SCCS). Before CSS3, gradients were realized as pictures. To change a picture in common SCCSs is an opaque operation: the SCCS itself can only record that the change occurred, along with any comments about the change.
With CSS3's semantic markup of gradients, though, SCCS can conveniently operate on the text which expresses the gradient. The SCCS can automatically report that, at a certain time, the hue of the gradient changed, or its intensity, in a format such as this:
< background: -o-linear-gradient(#FFB260, #FF7F13); --- > background: -o-linear-gradient(#FFB260, #FF3F13);
Programmers find this a great convenience: the tools they use to manage source code, including construction of validated production versions, extend more naturally to the graphical constructs of Web design.