Eric Meyer on CSS: Mastering the Language of Web Design. Foreword by Jeffrey Zeldman. 2002, New Riders. US$45, CDN$69.99, UK£34.99
In 2000, O'Reilly published Eric Meyer's, Cascading Style Sheets: The Definitive Guide. Despite the fact that it was a reference book, Meyer's conversational writing style and sense of humor made it a joy to read. It quickly established Meyer as the "go-to guy" for CSS, which Jeffrey Zeldman makes hilariously clear in his foreword to Meyer's latest book, Eric Meyer on CSS: Mastering the Language of Web Design: "My name is Jeffrey, and I'm an Eric Meyer addict." Where the O'Reilly book was a dictionary, here, Meyer has written a collection of short stories. Each story (chapter) is a project that any of us might face, and Meyer shows us how easy and rewarding it is to replace our old HTML workarounds with the elegance of Cascading Style Sheets.
I won't try to make the case for CSS here. If you're reading this at all, you're someone who's at least interested in making your web pages easier to change, and more standards-compliant to boot. And this book is not for someone who's not comfortable getting his hands dirty, so to speak. It's aimed at someone who has at least a familiarity with the conventions of CSS and is looking for practical applications.
Each of the projects are small enough to be completed in a few hours or less, and to give the reader a real sense of mastery. Meyer also shows a few different approaches to the same problems, showing the strengths and weaknesses of each approach. Here's the breakdown of chapters:
I've decided to focus on the chapter on multicolumn layout to give a sense of Meyer's approach. Many of us who keep weblogs choose to use a multicolumnar layout on the front page in order to include links to other sections and other sites. In the past, this meant using lots of tables. Keeping track of rows and columns was hard enough, and became even more complicated if the tables were nested. Though not perfectly compatible with version 4 browsers, tableless layouts use less code while allowing the complete separation of style from structure.
I took the opportunity to redesign my weblog in the process of transferring everything from one tool,Blogger to another,Movable Type. I found that the quickest and least complicated method for approximating my previous, table-based layout was to use the first method Meyer discusses in Chapter 9, simply floating the content after dividing everything into logical divisions (in HTML parlance, breaking the page up into <div>s).
The only limitation inherent in the "float method" is that the content must be organized in a particular sequence. The <div> to be floated right must come before the <div> which will occupy the left side of the page. Once that is taken care of, we have only to define how much space the sidebar will take, and how much will be left for the main content section. Since I wanted a gutter between the columns, I wasn't worried about the two <div>s' widths adding up to 100%. I set the main column's width to 65%:
div#maincontent {width: 65%}
and the sidebar to 28% (which I arrived at mostly through trial and error:
div#rightcontent {width: 28%; float: right;}
Meyer advises us specifically to set the margin and padding on all elements. I wanted a bit of padding on the content in the main section, so now we have:
div#maincontent {width: 65%; margin: 0; padding: 1em; }
div#rightcontent {width: 28%; float: right; margin: 0; padding: 0;}
Now I need to style the text and add borders in each section. For the main content area, I can do that in the <div> I have already:
div#maincontent {width: 65%; background: #fff; border: 2px solid black;
margin: 0; padding: 1em;}
For the sidebar, I decided to subdivide the content into several subsections, entitled "table of content" (which links to my online articles), search, "here" (with links to other content on the site), "there" (external links), and archives. I added borders in such a way that it looks like one long column with lines between the sections:
div#rightcontent {width: 28%; float: right; margin: 0; padding: 0;}
div#toc {background: #222; border: 2px solid black; margin: 0;
padding: 0.5em; color: #fff; font-size: 10px;}
div#search {background: #fff; border-right: 2px solid black;
border-left: 2px solid black; margin: 0; padding: 0.5em;}
div#here {background: #fff; border: 2px solid black; border-bottom: none;
margin: 0; padding: 0.5em; font-size: 10px;}
div#there {background: #fff; border: 2px solid black;border-bottom: none;
margin: 0; padding: 0.5em; font-size: 10px;}
div#archives {background: #fff; border: 2px solid black; margin: 0;
padding: 0.5em; font-size: 10px;}
And that was it. With a little help from Eric Meyer, the bulk of my layout was accomplished using some <div> tags and a few lines of CSS. Whereas before, I had lines and lines of code defining table cells and rows, I replaced it all with a few simple declarations.
Though my example shows how the book can be used as a sort of cookbook, those wanting to get a firm grasp on the principles of CSS can simply go through each of the projects one by one, building on their knowledge as they go.
There has been much written about the promise of CSS, but as always, the current reality sometimes makes us wonder why we should bother. Most older browsers don't fully support CSS, and even current browsers have different opinions of how to interpret it. Despite that, Meyer is a wise teacher, pointing out ways to avoid surprises. It might seem that nothing has really changed, since we still have to use workarounds for various browsers, but in reality, even the workarounds are much easier to implement and change once the structure and style of the page have been separated. Most importantly, there are many developers pushing the browser makers to conform to the World Wide Web Consortium's official specification for CSS (see, for instance, the Web Standards Project). It is safe to say, therefore, that CSS is here to stay, and that browsers will become more and more compliant in the future, which makes it all the more important to write compliant code now.
The appearance of a book such as this signals the maturation of CSS as a web design tool, not just for the codeheads, but for anyone who is capable of working with HTML. Meyer's elegant and straightforward writing makes the elegance of a CSS solution apparent and attractive. Though I hope I won't become an Eric Meyer addict, this is definitely a book I'll be returning to again and again.
Eric Meyer on CSS (web site for the book): www.ericmeyeroncss.com
World Wide Web Consortium: www.w3.org
Web Standards Project: www.webstandards.org
Cascading Style Sheets: The Definitive Guide: www.meyerweb.com/eric/books/css-tdg/