HTML and CSS Reference
In-Depth Information
BRIGHT FUTURE
WITH
A
CSS3 BLING
Most of you will have a good idea of the kinds of CSS3 features I'm referring to by
bling boxes: Drop shadows, rounded corners, linear and radial gradients, and alpha
transparency are exemplary examples. Also, a number of properties still require
the use of images but allow you to use them in a more flexible way!
The advantages of such features should be obvious, but just in case, let's briefly
review them before moving on:
Less downloading. Programmatically creating bling effects allows you to
decrease the number of images you need for your designs and therefore
the number of HTTP requests and download sizes involved.
Easier maintenance of graphical effects. You can now vary colors, dimen-
sions, and so on by just changing some CSS syntax rather than having to
open Photoshop and manually alter image files.
Less spaghetti code. Back in the day, so-called “bulletproof CSS” solutions
typically involved multiple images and multiple nested
<div>
s—a double
disappointment of extra complexity of design time and unsemantic cruft
code. If you wanted to create bulletproof rounded corners on a content box
to allow it to flex horizontally and vertically, you'd need three extra nested
<div>
s for holding all the necessary images. If you had only one container
available, you'd have to settle for an inflexible, one-size box, which was
usually rendered useless when content changed. CSS3 features, such as
rounded corners and multiple background images, change all this.
Fewer Photoshop ninja skills required. Creating such bling effects in code
is a lot easier and more intuitive for non-Photoshop experts.
Of course, the main disadvantages at this time are that some of these CSS3 fea-
tures are not supported in older browsers (usually meaning Internet Explorer 6-8),
and they are often used with vendor prefixes. Table 4.1 gives you an at-a-glance
reference of browser support for the properties covered in this chapter.
