CSS sprites group multiple images into one composite image and display them using CSS background positioning. You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Now that the major browsers have evolved enough to support CSS backgrounds and positioning, more sites are adopting this performance technique. In fact, some of the busiest sites on the Web use CSS sprites to save HTTP requests. In this article we’ll expand on our mini-CSS sprite example (mono-image CSS rollovers) to show how Yahoo! and AOL use sprites to improve performance.
CSS optimization
Mono-Image CSS Rollovers
CSS is traditionally used to create rollover effects with two or more images for menus and other elements. Menus can use on, off, or visited images to signify the state of the menu. Typically menus are created using multiple background images, however. The problem with this method is that it doubles the necessary HTTP requests and can cause flickering problems when the “off” image is not preloaded. A better way is to combine the on and off state images into one mini-sprite and switch the background position on rollover (see Figure 1).
Highlight the Current Page with CSS: The Body ID/Class Method – css tutorial on auto-selection of current navigation
“Danger, Will Robinson!” For those that remember the TV show “Lost in Space,” these words often ring true in the sometimes confusing world of cyberspace. When users navigate through your site you can help avoid those fateful words with “you are here” waypoints. This article shows how to automatically highlight menu items that correspond to the current page using CSS and XHTML. Using CSS avoids the need for complex JavaScript or PHP/JSP scripting which simplifies maintenance and improves performance.
CSS Overlays: Using CSS Positioning to Overlay Web Objects – css layout tutorial
An overlay is when one web object overlaps another. Overlays are often used to highlight or draw attention to important items on websites to raise conversion rates. This article shows how use CSS positioning to avoid slicing and dicing your overlays and assembling with tables. Along the way we’ll look at the workarounds we used to make the technique work with different browsers (most importantly IE5.x Mac and Safari).
Accessible CSS Forms: Using CSS to Create a Two-Column Layout – replace tables with css layout form tutorial
In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible.
Bookend Lists: Using CSS to Float a Masthead – replace tables with css layout list tutorial
A common visual element in many websites is to position two blocks of content on either end of a navigation bar. The left block of content typically displays global navigational tabs or drop-down menus. The right shows today’s date or perhaps a simplified search form. This article shows how to create a “bookend” look with elements on either end of a box using CSS-styled lists. This CSS-layout technique saves a significant amount of HTML code over table-based techniques. Tests with working code yielded savings in page size ranging from 30% overall to over 73% for the HTML code alone.
CSS: Use Shorthand Hex Colors – hexadecimal shorthand notation optimize css
Shorthand hex notation abbreviates 6-character RRGGBB CSS colors into 3-character RGB shorthand. Combined with shorthand properties and grouping, shorthand hexadecimal colors can shrink style sheets dramatically, often by 50%.
CSS: Substitute CSS2 Menus – replace graphic rollovers with css menus
Substituting CSS-based techniques for old-style graphic rollovers and DHTML menus is one of the most effective web site optimization techniques available. Graphic rollovers use “on” and “off” graphics to create rollover effects, with and without JavaScript. DHTML menus create nested menu structures with JavaScript, some of it complex. With the widespread adoption of CSS2-aware browsers, there is a better choice: CSS-based techniques. Substituting list-based markup, CSS2 to style, and an optional dash of JavaScript makes for fast, small, and accessible CSS menus.
CSS: Use Descendant Selectors – contextual selectors
Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. First introduced in CSS1 in 1996, descendant selectors (then called contextual selectors) match elements that are descendants of other elements in the document tree. Composed of two or more selectors separated by whitespace, descendant selectors apply styles to elements that are contained within other elements.
CSS: Use Type Selectors
By using simple, high-level selectors you can simplify your style sheets. Type selectors and the “universal” selector (*) match every instance of the element type in the document tree. You can use the pattern matching built into CSS to make your style sheets work for you.