CSS Optimization Chapter 7

In this chapter, you'll learn how to shrink your style sheets and HTML at the same time. CSS-specific techniques include (1) grouping declarations and selectors, (2) merging common styles into shared classes, (3) inheritance, (4) abbreviating with shorthand properties, and (5) abbreviating class and ID names. HTML-oriented techniques include replacing JavaScript behavior with CSS, designing markup for descendant selectors, and CSS layout. By combining these techniques, you can reduce HTML and CSS file sizes by up to 50%. When you plan your site in this way you are giving it what we call CSS architecture.

To maximize display speed you can employ the following ten techniques:

• CSS Optimization
• Build on a CSS Architecture
• Anatomy of a CSS Rule (sidebar)
• Use a Reset Stylesheet
• Code: Reset style sheet
• Top 10 Tips for Optimizing CSS
• Tip #1: Replace Inline Style with Type Selectors
• Code: Replace inline style with CSS type selectors
• Tip #2: Use Descendant Selectors
• Code: Use Descendant Selectors
• Tip #3: Group Selectors with Common Declarations
• Code: Group selectors
• Tip #4: Group Declarations with Common Selectors
• Code: Group declarations
• Tip #5: Combine Common Styles into Shared Classes
• Code: Combine common styles
• Tip #6: Use Inheritance to Eliminate Duplicate Declarations
• Code: Use inheritance
• Tip #7: Use CSS Shorthand
• Use shorthand colors
• Code: Shorthand hex colors
• Shorthand properties
• Code: Shorthand property syntax
• Property value replication
• Code: Use property replication
• The margin shorthand property
• Code: Margin shorthand property
• The border shorthand property
• Code: Border shorthand property
• The font shorthand property
• Code: Font shorthand property
• The background shorthand property
• Code: Background shorthand
• The list-style shorthand property
• Code: List-style shorthand
• The outline shorthand property
• Code: Outline shorthand
• Tip #8: Abbreviate Long Class and ID Names
• Code: Abbreviate long names
• Using semantically meaningful names
• Code: Semantically meaningful names
• Comments in CSS
• Code: Remove CSS comments
• Tip #9: Use CSS2 and CSS3.x Techniques
• Code: Use CSS2 and CSS3.x techniques
• Tip #10: Replace JavaScript Behavior with CSS Techniques
• Figure 7-1: How not to do a menu
• CSS buttons
• Figures 7-2/3: CSS-styled rollover button
• CSS rollovers
• Mono-image menu rollovers
• Figure 7-4: Mini CSS Sprite
• CSS sprites
• AOL.com CSS sprites
• Figure 7-5. The AOL.com home page uses CSS sprites
• Figure 7-6. AOL menu sprite, dir_sprite.png
• Yahoo.com CSS Sprites
• Figure 7-7. The Yahoo! home page uses CSS sprites
• List-based menus
• Figure 7-8. CableOrganizer.com CSS menus
• Conditional Comments to Avoid CSS Hacks (sidebar)
• Code: Conditional comments
• Auto-expanding menus
• Figure 7-9. Automatically expanding menus
• Figure 7-10. Menus expanded with CSS
• The body ID/class method
• Code: The Body ID/Class Methods
• Summary

« Web Page Optimization | CSS Optimization | Ajax Optimization »