Chapter 8: Advanced CSS Optimization
Beyond the oft-cited benefits of cached CSS files and overall bandwidth savings, CSS allows you to substitute lightweight standards-based replacements for older, bandwidth-hungry techniques (like graphic rollover menus). This chapter shows you four general ways you can use CSS to speed up your site:
- Smaller style sheets
- Substitution
- Faster tables
- CSS layout and positioning control
Figures
Code Listings
- Listing 8.1 - WebReference.com's Original Style Sheet (partially optimized)
- Listing 8.2 - WebReference.com's Optimized Style Sheet - using shorthand properties, grouping, and abbreviation it is 38% smaller
- Listing 8.3 - CSS2 Vertical Rollovers: CSS
- Listing 8.4 - CSS2 Vertical Rollovers: HTML
- Listing 8.4b - Pure CSS2 vertical rollovers - Seeing double - With top option live, a double border appears.
- Listing 8.4c - Pure CSS2 vertical rollovers - back to normal - eliminate the double line with border-top:0px
- Listing 8.5 - 3D CSS2 Horizontal Menus: CSS
- Listing 8.5b - 3D CSS2 Horizontal Menus: HTML (demo)
- Listing 8.6 - CSS2 Menu Bar HTML Template (working demo with live links)
- Listing 8.7 - Conditional Menu Bar SSI (used in Listing 8.6 toolbar)
- Listing 8.8 - Optimized In-Line List Menus (CSS)
- Listing 8.9 - Three-Column Layout: The Old Way
- Listing 8.10 - Three-Column Layout: The New Way
- Listing 8.11 - Three-Column Layout: CSS
- Listing 8.12 - Improved Three-Column Layout: CSS
- Listing 8.13 - Improved Three-Column Layout: HTML
Summary
To fully optimize HTML code you've got to transform your code from tables to CSS layout. To optimize your style sheets use abbreviated names, shorthand properties, grouping, and multiple classes with common CSS declarations to shrink style sheets. Substitute CSS-based techniques for table- and JavaScript-based techniques like menus with rollovers. Use CSS to style your table alignment and background colors for speed and flexibility. Here's a summary of what you learned in this chapter:
- Use shorthand properties, grouping, and abbreviation to optimize your CSS.
- Substitute CSS-based effects for JavaScript and images (rollovers).
- Use the
hover pseudo-class and styled links or lists to create CSS2 rollovers.
- Use
table-layout:fixed for tables when possible and colgroup and col for speed.
- Use CSS to color data cells in tables (works in version 4+ browsers).
- Use CSS layout and positioning control and XHTML to separate presentation from structure to shrink your code, make your layout flexible, and raise search engine relevance.
Further Reading
Books
- CSS: The Definitive Guide
- Eric A. Meyer, (O'Reilly, 2000). A great introduction to CSS. See also Meyerweb.com.
- Eric Meyer on CSS
- By Eric Meyer (New Riders, 2002) - Meyer demonstrates real-world CSS with 13 conversion projects.
Sites
- A List Apart
- A List Apart by Jeffery Zeldman, et al. A good source of standards-based how-to advice, including CSS.
- Body IDs
- Mark Pilgrim demonstrates how to use body ids (and classes) to highlight menu items without resorting to SSI. One navbar, one stylesheet, different body ids (or classes) for each set of pages.
- Cascading Style Sheets, 1, 2, and 3
- World Wide Web Consortium - The official CSS specifications.
- Christopher Schmitt's CSSBook.com
- For Designing CSS Web Pages (New Riders, 2002)
- CSS Edge
- Eric Meyer's standards-based CSS playground
- Dave Lindquist's list-based DHTML menus
- These menus are under 6K
- Introduction to CSS Layouts
- By Eric Costello
- WebStandards.org
- The Web Standards Project by Jeffery Zeldman, et al. Now that they've convinced the browser manufacturers on standards, Zeldman and company have relaunched WaSP to sting the development tool makers.
