Eric Meyer is an internationally renowned expert on the subjects of HTML, CSS, and Web standards. A widely read author, he is also the founder of Complex Spiral Consulting, a company which focuses on helping clients save money and increase efficiency through the use of standards-oriented Web design techniques.
Eric: No no, that's the Molly Holzschlag wing. I just get an ancillary section near it. I've written five titles, one of those being a pocket reference so it may or may not count as a book. (My wife insists that it does.) The first one was "Cascading Style Sheets: The Definitive Guide." If you count the second edition of that book (which is on shelves now) as a separate title, then I guess I've done six, but I think of the two editions as a single title, even given the amount of work that went into the second edition.
Eric: Almost everything's been updated. The only chapters that didn't really change were the first one, and the chapter on fonts. Everything else got moderate to heavy revision and updating. That ranges from reworking old material (as in the Text Formatting chapter) to completely tearing down old chapters and rebuilding new ones. For example, the first edition had floating in the Visual Formatting chapter, and positioning got its own chapter. I combined floating and positioning into a single chapter, and rewrote most of the formatting chapter as Basic Visual Formatting. In a similar manner, the bit about lists in the first edition was moved into its own chapter, and a ton more was added, to result in Lists and Generated Content.
There are three totally new chapters as well: Table Layout, User Interface Styles, and Non-Screen Media.
Eric: The rumors are true! We've called it, in a blinding flash of creative genius, "More Eric Meyer on CSS."
They're a little more advanced than the first book, but not by much I'd like to say up front that neither of the "...on CSS" is required to understand the other (although of COURSE you should own both!).
Readers of the first book will recall that the first project took a table-driven layout and converted it to use a simple table and CSS. In the new book, Project 1 is concerned with taking a page designed using only HTML markup and spacer GIFs, and converts it to an pure CSS design that uses positioning for layout instead of tables.
I also have projects that look at styling a photo gallery in various ways, sprucing up a financial report (basically, working with tabular data), and using background positioning to get translucency effect in multiple browsers, including IE/Win.
Then I have a trio of projects that look at using lists in various ways. That includes taking a series of nested lists and turns them into a dynamic set of "dropdown" menus that work in most browsers (and that includes IE/Win), as well as using Doug Bowman's Sliding Doors technique.
After that, there are a couple of projects that deal with styling a weblog's entries and then the page around that weblog, and the last project in the book takes a CSS Zen Garden design created by Dave Shea and creates the CSS needed to make it work. Basically, Dave gave me a visual design as a Photoshop file, and I pulled it apart to get what I needed. So that one steps through the process of taking a design comp and adapting it to existing markup. I also look at ways to use PNGs in that project without making the design look horrible in IE/Win.
Eric: It was a confluence of things, really. The first was IE6 being released with DOCTYPE switching, and then later the announcement that there would be no new versions of IE, which created a certain sense of stability. The second was that enough people had enough time to read books and tutorials, and experiment with CSS on their own sites, that some best practices started to emerge from the background. The third was what I think of as the Rise of The Artists, where Web designers who had actual graphic design talent (such as Doug Bowman, Dave Shea, and Jeffrey Zeldman) and understood CSS fairly well began to make things happen. The Wired News redesign, the CSS Zen Garden, and other sites began to show that CSS-driven design not only worked, but could look pretty darned awesome.
Eric: The #1 most important aspect? I'd have to say the "cascading" part, which encompasses not just the cascade but also inheritance, specificity, and selector construction. Once you get all that down, the rest is visual details.
After that, I'd say thoroughly understanding visual formatting, both block and inline, is crucial. You can save yourself a ton of headaches if you know how things are supposed to work, instead of assuming that CSS will act the way you expect it to work. Like any language, CSS has rules, and ignoring them is just going to lead to confusion.
Eric: I'd like to just use the CSS3 approach: replace the content with something else using the 'content' property. That's as low-weight and non-hackish as it's likely to get. It's also at a low-support weight at the moment, since only Opera supports it.
Otherwise, I find that the image-replacement techniques in circulation right now are all about equally good and bad-- good for making bits of text look nicer, and bad for causing accessibility problems with audio readers. But the real problem, to be frank, is the readers themselves. By trying to render the page visually and the read the result, they're doing precisely the wrong thing. If a page has screen-medium styles, then a reader should ignore those styles completely. It isn't that hard to figure out, and what I don't get is why most readers still haven't been fixed.
Eric: No. I wish it were otherwise, but I don't. Every font-sizing approach has benefits and drawbacks. The best you can do is find an approach that maximizes the former while minimizing the latter, and furthermore, that has to be done on a design-by-design basis. One design's goals might be best served by pixel-sized text, while another's will be better fulfilled by using ems or keywords ('x-small', etc.). Any time a person tells you that there is one and only one way to size fonts for all sites, they're trying to hand you a philosophy, not a solution.
Eric: They're a necessary evil. The day we have perfect cross-browser consistency in CSS implementations, both in terms of what's supported and the behavior of what's supported, is the day we can stop using hacks. Until then we're stuck with them.
I should point out that I mean that for all hacks, whether they're based in the CSS, are things like Microsoft's Conditional Comments, or are server-based.
Eric: I'd like to think so, but then I once thought that full support for CSS2's visual-medium features would be a done deal by 2003. So my prophetic track record is about as bad as that of any other prophet, and probably shouldn't be used as a basis for long-term planning.
Eric: It's worse than that: most web designers are just coming to terms with the parts of CSS2 that are actually supported in any meaningful way.
That's always a possibility, but then there are those who were scared off CSS1 because of its "complexity." (As compared to what they knew, that is.)
The nice thing about CSS3 is that it's been split up into modules, so you can ignore the bits that don't concern you and concentrate on what you want to know. If you're really into print styling, you can read the Print module and get to know it. If internationalization is your thing, then you head for the I18N module. There are some modules everyone will need to know (selectors, the cascade, that kind of thing) but after that you can follow your interests without having to wade through an enormous monolithic specification.
Copyright © Web Standards Group 2012