OptimizationWeek.com

Website performance news and views™

Home Sitemap Issues About Contact

buy website optimization secrets book cover

New book on Website Optimization Secrets

Free Newsletter

home > reviews > morecss

Book Review: More Eric Meyer on CSS

Eric Meyer has done it again. His self-titled sequel More Eric Meyer on CSS is a collection of ten conversion projects that teaches CSS by example. A practical alternative to his other new book, Cascading Style Sheets: The Definitive Guide, 2d ed., More is more inspired how-to than dry reference. Meyer says that the ultimate goal is to "lure you into using more CSS" with tempting visual effects, improved accessibility, design flexibility, and reduced page weight. We asked Eric Meyer why he wrote this book:

"There was such positive response to 'Eric Meyer on CSS' that New Riders and I decided it would be fun to create a sequel. Both books share the same project-oriented, practical philosophy, which is what people really seemed to like - that and the full color printing! The hope is that the book will help more designers get to know and love CSS, and inspire them to take the concepts presented and do something really awesome."

Sexy Standards?

Eric Meyer and Jeffrey Zeldman actually make standards sexy. Yes, by converting to CSS-based techniques you make your designs more flexible, accessible, and gracefully degrade, but you also lose wait, and gain pizzazz. Chapter 6 "CSS-Driven Drop-Down Menus," where Meyer shows how to create JavaScript-free nested pull-down menus, is worth the price of the book alone.

As you progress from project 1 through 10 Meyer takes you through more difficult CSS conversions. The first two chapters show you how to use CSS layout to convert conventional table-based designs into CSS-based layouts. Tables still have their uses however, and Meyer is not above styling table-based financial reports with CSS in project 3. Chapter 4 shows how to create translucency with positioned backgrounds. While the technique does a nice job of simulating the problematic semi-opaque PNG, Meyer points out the additional graphic overhead required for this technique.

List-Based CSS Menus

Chapters 5 through 7 are the heart of the book, styling lists to create rollover, drop-down, and tab-based menus. Some of these techniques you may have seen before, documented by foreword writer Douglas Bowman and the aforementioned Zeldman. Meyer is the first to gather them all into one place and update them for CSS 2.1 and modern browsers (most version 5+ browsers). He takes you step by step through transforming simple unordered lists into line-straddling rollover menus, lightweight CSS-only drop-down menus, and variants of Bowman's "sliding doors" technique to create rounded tabs.

Chapters 8 through 10 take it up a notch, styling a weblog, a home page with weblog, and the CSS Zen Garden site. The Zen Garden project actually uses a PNG file that works with a full alpha channel in IE6/Win as well as IE5/Mac, Mozilla, Safari, and Opera. Chapter 10 in particular will be of interest to graphic artists who convert graphics comps into XHTML and CSS.

Starting with purely structural XHTML, Meyer shows you how to gradually build up your style sheets, adding effects with each iteration. Full color screenshots, notes, warnings, and websites annotate each tutorial with alternative methods, browser workarounds, and further reading. The net effect is like having a CSS master look over your shoulder as you convert existing web sites. You can take many of these techniques directly from the book and companion site (more.ericmeyeroncss.com) and put them directly into your sites, with some minor caveats.

CSS and Page Speed

Speed-wise converting to CSS typically saves you from 25 to 50% off of HTML file size, with as high as 70% savings off of total web page size. Substituting CSS-based techniques for old-style layouts and effects is one of the most effective web site optimization techniques available to web developers. Eric Meyer has arguably done more than anyone to help promote the use of CSS, and for that we applaud him. CSS is not just for styling text anymore. Highly recommended.

More Eric Meyer on CSS
By Eric Meyer
New Riders Publishing, $45
ISBN: 0-7357-1425-8
Companion site
Buy at Amazon

References

Bowman, D., "Sliding Doors of CSS," from A List Apart Magazine 160 (Happy Cog Studios: White Plains, NY, October 2003). Bowman shows how to create stretchy tabs with CSS and background images. His sequel Sliding Doors of CSS, Part II updates the technique with single-image rollovers and more efficient targeting with the body ID method.
King, A., "Advanced CSS Optimization," in Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com), Indianapolis: New Riders Publishing, 2003. Optimize your CSS with shorthand properties, grouping, and substitute CSS2-based menus for faster webpage downloads.
King, A., "CSS Optimization," in Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com), Indianapolis: New Riders Publishing, 2003. Minimize markup by replacing tables and font tags with rules and selectors. Optimized CSS uses shorthand properties, grouping, CSS2 rollover substitution, and the hover pseudoclass for small style sheets and tight optimized code.
King, A., "Substitute CSS2 Menus," from Speed Tweak of the Week (Web Site Optimization, LLC: Ann Arbor, MI 2004). Substituting CSS2-styled lists for graphic menus and JavaScript can streamline your pages and make them more accessible.
Meyer, E., More Eric Meyer on CSS, Indianapolis: New Riders Publishing, 2004. This book companion site has the project code that you can play along with at home while you read the book. Includes demonstrations of the techniques shown in the book.
Meyer, E., "CSS Drop-Down Menu Demo," in More Eric Meyer on CSS (http://more.ericmeyeroncss.com), Indianapolis: New Riders Publishing, 2004. Meyer's original demo of the CSS-only drop-down menus. Does not include the .htc file that makes IE/Win work. The popout menus do not work in Mac IE5.x. The project files may be downloaded for Chapter 6.
Nederlof, P., "whaterver:hover." Nederlof's csshover.htc behavior uses JScript to fix Internet Explorer 5 and above to enable the :hover pseudoclass on any element, not just a href links.

About the Author

Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the semiweekly WebReference Update.