Sometimes, your career picks you. That what happened to Eric Meyer one day at a 1996 conference, when he first heard of a technology called Cascading Style Sheets or CSS. The idea of CSS, revolutionary at the time, is that the content and design of a Web page should be maintained in separate files. As a student, Meyer had been primarily a hardware guy at Cleveland, Ohio’s Case Western Reserve University, helping its library computerize its card catalog. When the Web came along, he had enough time and interest to become the campus webmaster, which led him to the conference. “⁠I realized that this was what we had been waiting for. Instead of table cells and spacer GIFs,⁠”⁠ the clunky building blocks used to create graphical elements in the pre-CSS era, “⁠we should be using an actual presentation language.”

But when Meyer actually tried to use CSS in Internet Explorer 3, he discovered that the browser’s support was incomplete. Meyer is not, nor claims to be, a Web designer. But he understood well ahead of most Web designers how CSS could make their jobs better ---- if browsers could do a better job supporting the CSS standard. To encourage that, Meyer created what became the World Wide Web Consortium’s (W3C’s) CSS Test Suite ---- essentially a chart that developers could use to test whether their browser was in fact CSS-compliant. The test suite led to a magazine column, which led to books, including Eric Meyer on CSS (New Riders), Cascading Style Sheets: The Definitive Guide (O'Reilly & Associates), and CSS2.0 Programmer's Reference (Osborne/McGraw-Hill. He also created a website, css/edge (http://meyerweb.com/eric/css/edge/), which explores the outer edge of what CSS design can produce.

Having learned about CSS from a conference, Meyer is now himself a conference speaker on that very subject. These days, he also does a one-day road show called “⁠An Event Apart⁠”⁠ with noted Web designer Jeffrey Zeldman. His personal appearances keep Meyer busy. When I spoke with him, he had just returned from Seattle, Washington and was leaving the next day for Dallas, Texas.

Before CSS, HTML pages had to contain their own formatting. Was that the “aha!” for you about CSS?

Yes ---- it was the separation of content and formatting. It was that CSS gave you very simple control over essential things like line heights, margins, padding and indent text. CSS gives you a very intuitive way to say: “⁠I want my headings to be this size, using this font, and this color.⁠”⁠ Trying to do the same thing with just HTML requires arcane tagging that never made sense to me.

At the time, there were a few proposals to separate style from content. Was there something about CSS that stood out for you?

It was the first one that I saw any details about. The only other serious proposal I can think of was Netscape’s JavaScript styles, which never got anywhere. CSS was easy to use and largely readable. For example, H1{color:red}. If you know anything about markup, you can pretty much guess what that is going to do ---- as opposed to JavaScript styles, which were more like programming. Looking at CSS code, you might not catch every single nuance, but at the basic level, most things are pretty easy to figure out.

Tell me about your road show with Jeffrey Zeldman

“An Event Apart⁠”⁠ is a one-day, hands-on workshop. Jeffrey talks specifically about design and copy about helping the user with good design and writing good copy that leads users to where they want to go. I tend to talk more about CSS code and markup. We usually have guest speakers, such as designer Jason Santa Maria. In Seattle, design ethnographer Kelly Goto talked about the mobile user experience.

Your trips to Seattle and New York are part of this road show?

Yes, and we have one coming up in Austin, Texas. The idea of the road show is that we go to where people are, instead of making them come to us. Usually, we have between 100 and 150 people, although Seattle ended up being bigger. When we started out it was, hey, let’s talk about standards for a day, and people really responded to that. But Jeffrey’s perspective was: why would I talk about code when Eric Meyer is here? My perspective was: why would I talk about design when Jeffrey Zeldman is here? So now we talk about the best practices in our respective spheres.

As you travel from place to place, what kind of misconceptions to you see crop up regarding CSS?

With the An Event Apart crowd, we typically don’t have too many misconceptions about what CSS is supposed to do. These are typically intermediate and advanced people who have heard us before, and have read our books and blogs. So we push them to think harder about design and document structure. And to let go of preconceived notions, for example that the heading element <h1> means big, bold and ugly. Which it doesn’t, necessarily: it’s all how you use CSS. And just because there’s atable data element called <TD>, that doesn’t mean it has to look and act like a table cell. You can, for example turn a table into a vertical bar graph. In other words, don’t let yourself be restricted by what an element is called. The real question is: what can it do?

In Dallas, I’ll be doing a keynote for the CoffeCup Software Webmaster Jam Session Conference. In part, I’ll be addressing the misconception I sometimes hear that CSS is fundamentally broken. I certainly don’t regard it as such, though I will certainly admit that it has limitations ---- like everything else.

Is that conception coming from incomplete browser support or incomplete authoring tools?

More incomplete browser support and also from people having tried CSS three or four years ago, where there were a lot more problems. The situation isn’t so dire today, not nearly so bad as it was in the late 90s. The other misconception is that CSS is meant to be an ironclad way to control the appearance of a page. There’s that feeling that if you make a declaration in CSS, then it will always and forever be obeyed, no matter what. You never have that assurance with anything, because the user always has the ability to override whatever it is you did. They can change the text size, for example.

Much of the attention on CSS has been on the author, but CSS was originally set up to give users control, as well.

CSS was constructed both so authors could create good-looking documents, and also so that users could exercise their own presentational prerogatives through user style sheets, which all current browsers permit. You can associate a style sheet with your browser and that style sheet is applied to every single HTML document that browser views, whether it’s on your hard drive or on somebody else’s site. I once wrote a couple of articles called “⁠The CSS Anarchist’s Cookbook,⁠”⁠ pointing out that you could create a user stylesheet that sets table display to “⁠none⁠”⁠ ---- making tables actually disappear. No sane user would actually do that, of course.

But it does make a point.

Yes, it makes a point that stylesheets are here so that users can do what they need to do. If you are colorblind, and some author turns off link underlining, you may have no idea what’s a link and what isn’t. So with your user stylesheet, you could say something as simple as: “⁠I always want links to be underlined, and the author doesn’t get to turn those off.⁠”⁠ You might take it further and say I want all my unvisited links to be underlined and all my visited links to have a strikethrough line. Similarly, a user with poor vision might want to set up user stylesheets that makes all text much bigger than normal. Browsers these days have keyboard combinations that let the user scale the text up and down without having to write their own user stylesheet. But the point remains that this is what user stylesheets were intended to do, and the way CSS is set up, the user can write their style sheet such that nobody can override them.

You mentioned that a point of your workshop is to get designers to understand the full potential of CSS. Is that the point of your css/edge site?

Yes. It’s an old site, but that was its original goal. With CSS, for example, it’s possible to do rollover effects that pop up information in other parts of the screen. Or you can have complete, full drop-down menus using no JavaScript whatsoever. I’m not necessarily saying that that’s what people should do, because there are some drawbacks to having, for example, purely CSS-driven drop-down menus. But CSS is more powerful than we sometimes expect: all you have to do is look at it in the right way. That’s where my vertical bar graph example first got posted.

The Zen Garden [www.csszengarden.com/site] also demonstrates CSS’s flexibility. It allows you to select different designs for the same content. The changes are dramatic.

Yes. Dave Shea did the entire Web and CSS community an enormous favor by launching that site. People kept saying it should be possible to do a site like this, but no one ever did it, until Dave. You have an entire website of any arbitrary number of pages and they all point to one style sheet for the presentation, So you just have to edit that one file and you can change the way the site is laid out. Dave brought that home. The site also shattered the myth that CSS sites have to be boring and boxy. Up to that point, most CSS sites were in fact boring and boxy, and mine was one of them. That wasn’t because of the technology, but because of the people who were writing the stylesheets. You can’t judge the potential of oil painting bypeople who paint dogs playing poker: it’s not the medium, but the artist.

Speaking of Zen, one reviewer said you almost have a Zen-like way of doing things, meaning to me that you are not rigid in your approach. Is that how you see yourself?

I’m not rigid. There are a few types of layout in CSS that are very difficult. And when I’m given a design where I need a convert a design to markup and CSS, I never take tables out of consideration until I know that I have a reasonable way to do the design in CSS. If I have a design where I could do it in hacked-up CSS, or do it with a three-cell table, I’ll give the client the benefits and drawbacks to each approach. Also, I think the Zen-like approach comes from the fact that I’ve been doing CSS for over 10 years. So I’ve built up that instinctual set of responses when I see something.

How much do Web designers understand the code versus relying on layout engines?

I think most visual designers these days are either relying on something like DreamWeaver or GoLive some sort of visual engine to create their design. The application creates whatever it is and they don’t care what’s under the hood. Or, they are relying on some developer person they know to take that role. If they are working in a firm where there’s a design division and an information division, they create the designs and send over a Photoshop file and they don’t care how it gets done. That’s the same as creating a layout in DreamWeaver, then telling DreamWeaver to publish it ---- without caring what DreamWeaver outputs. That’s what a lot of people are doing.

What should they be doing?

It’s important that designers understand what is being output and how that code might be better. For example, a Web designer should be able to look at what DreamWeaver outputs and at least have a sense of whether it is good or not good. They should be able to look at a style sheet and say: okay ---- here’s what the floating elements and margins look like; this is what that code means. They don’t have to get every nuance, but they need to understand the nature of the medium they are working in. Someone who calls themselves a Web designer but doesn’t know any code is like someone calling themselves a sculptor, when they don’t know how to chisel rock. Or a print designer who doesn’t want to be bothered learning things like color registration, paper, printing and inking. It’s not a matter of becoming a master printer, but they need to understand enough to talk to the master printer in a way that’s useful.

What kind of projects is CSS being used on now compared to what you saw in the beginning?

Right now it’s being used for everything.

From vanity pages to large commercial websites?

Yes. And in applications that are not specifically Web pages or on Web servers. Apple’s Dashboard widgets, for example, use CSS, JavaScript and HTML. They have some extra proprietary hooks into the operating system, but you can put up a widget as a preview on a Web page, and if it doesn’t depend too heavily on the operating system, you can preview it online. I’ve written my own widgets ---- nothing that I’ve released because they were just tests ---- whose presentations are all driven by CSS. There’s also an OS X chat client called Adium, which is a multi-service chat client like Trillium Windows.

And Adium is using CSS too?

Yes. I had tried Adium and didn’t like its default chat window themes, so I wanted to create my own. I dug into the package contents and saw there were CSS files in there. There’s a Windows chat client that uses a similar approach. In the beginning, CSS was used for text, color, and fonts and not a lot else. Now it shows up in the darndest places.

When you started with CSS, browser support was spotty, at best ---- which is why you created your test suite in the first place. Where is browser support now?

We’re in a good place, but not a perfect place. We’ll never be in a perfect place, of course. Almost any design, with a few exceptions, can be done in CSS in a cross-browser fashion. You might have to do a little bit of browser-specific filtering, but not much.

Has this become true since IE6?

It has become true because IE6 has been out long enough that people identified all of its little quirks and work-arounds. I’ve said that IE6 is the new Netscape 4: the browser that developers curse the most because it’s the oldest. Netscape 4 hung around for five years with no change. People who loved it when it came out were eventually swearing at it because, what had been radical innovations had become old and decrepit. The same is true of IE6: it was pretty good when it came out, but that was five years ago.

Has Firefox pushed CSS compliance beyond IE6?

Firefox, Safari, Opera have all surpassed IE6.

How will IE7, with its large market share, improve things for CSS?

It will make things better. It has a very large number of CSS improvements and other standards improvements. The IE7 team is very focused on the CSS developer community. In fact, some of them came to the Event Apart in Seattle ---- they are very interested in doing the right thing, which is very nice. Depending on who you talk to, IE7 will either jump up to be part of the pack where browsers are now, or it will get close but still be a little bit behind. I think it’s going to be on a par with where Firefox, Opera and Safari are now. Obviously there will be some things it will do that the others don’t, and vice versa. The question is: will the resources remain dedicated to Internet Explorer so that IE7 doesn’t hang around for five years with no updates? Bill Gates has said Microsoft was committed to having a new version of IE come out every 12-18 months. I wouldn’t absolutely rely on that exact time frame, but basically, he was saying that stopping Internet Explorer development was a mistake they wouldn’t make again.

Is the evolving CSS standard ---- CSS3 ---- both an opportunity and a wrench in the works because it upends the standards all over again?

Yeah. But the thing about CSS3 is that it’s not CSS3 any more. We talk about CSS3 as though there will be another monolithic CSS2-type version, and that’s very likely not the case. Instead, CSS has been split into a series of modules. What used to be chapters in a monolithic specification are now independent modules. There’s a selectors module, a background module, a layout module, a color module, and so on. All these modules can move at their own pace, which is good.

Incremental progress where it counts.

Yes. The problem being that when you have all those modules, it can be difficult for the working group to focus because they have all these things that they could work on.

Does the current version of CSS as supported in the latest browsers do pretty much everything that you want it to do?

Mostly, but there’s always something missing. And when those missing things are implemented, then the next day I’ll find something else that’s missing.

So what is missing that the community is looking for?

What CSS lacks at the moment, although there’s work being done, is a really rich layout mechanism. CSS has layout mechanisms, but they are not yet straightforward and powerful enough to completely replace tables. Print styling is another. Ninety percent of viewing is on the Web, of course, but printing still happens. Even today, compared to screen layout features, CSS print features are pretty anemic. For example, it would be nice to be able to print very wide and long tables in landscape form, while retaining the same column headings on every page.

I wanted to ask you about design theft. On the FAQ on your site, you reference the website www.pirated-sites.com. What can designers do about their designs being stolen?

I don’t think they can do anything about it except publicly shame people who have ripped off other people. I personally don’t have a problem with people re-using my designs for their own personal projects, though I always appreciate it if they give a link back to where they got the design from. In truth, anything you publish on the web can be copied. If you don’t want it to be copied, don’t put it on the web. The vast majority of people will not steal music, books, and web designs, but there will always be people who will. Scott Andrew LaPera, who was once a JavaScript guru and is now better known as a musician, says that there is only one thing worse than having your music copied ---- and that is not having your music copied.

Anything else you’d like to tell the readers of Web Site Expert?

I’d like to recommend Kazuhito Kidachi’s website kazuhi.to. He has translated many books into Japanese, including mine, and is part of the Web Standards Project. He flies all over the world to attend meetings, and is really passionate about standards and the Web.

And speaking of standards, one of the things that I wish standards bodies and computer makers would get around to fixing, is multi-international text. It’s so amazingly frustrating to me that someone in Japan could type in Japanese characters, which I view on my computer as bizarre, garbled text. Unicode has been around for a while so this should have been fixed long ago. A similar thing happens when people use Microsoft Word with the smart quotes turned on, then I go there with my Mac, and end up seeing garbage. On behalf of my industry, I express my shame.