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
- Faster tables
- CSS layout and positioning control
- 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
- Use shorthand properties, grouping, and abbreviation to optimize your CSS.
- Use the
hover pseudo-class and styled links or lists to create CSS2 rollovers.
table-layout:fixed for tables when possible 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.
- 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.
- 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
- 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.