HTML and CSS Reference
In-Depth Information
process by using many of the new e
"
ects o
"
ered by CSS 3, which cut down
on your time spent creating graphics and coding usability enhancements.
Some CSS 3 techniques also improve performance and speed. For instance,
traditional rounded-corner techniques require multiple images and DIVs for
just one box. Using CSS 3 to create rounded corners requires no images,
thus reducing the number of HTTP calls to the server and making the page
load faster. No images also reduces the number of bytes the user has to
download and speeds up page loading. CSS 3 rounded-corners also do not
require multiple nested DIVs, which reduces page file size and speeds up
page loading again. Simply switching to CSS 3 for rounded corners can give
your website a tremendous performance boost, especially if you have many
boxes with rounded corners on each page.
Writing clean CSS that takes advantage of shorthand properties, grouped
selectors and other e
!
cient syntax is of course just as important as ever for
improving performance. Many of the more advanced tricks for making CSS-
based pages load faster are also not new but are increasing in usage and
importance. For instance, the CSS Sprites technique, whereby a single file
holds many small images that are each revealed using the CSS
background-position
property, was first described by Dave Shea in
2004 but has been improved and added to a great deal since then. Many
large enterprise websites now rely heavily on the technique to minimize
HTTP requests. And it can improve e
!
ciency for those of us working on
smaller websites, too. CSS compression techniques are also increasingly
common, and many automated tools make compressing and optimizing your
CSS a breeze, as you'll also learn in part 2 of this article (next chapter).
