Eric Meyer on the past, present and future of CSS

This article first appeared in issue 224 of .net magazine – the world's best-selling magazine for web designers and developers.

To understand the future of CSS, you first need to understand its past. And standards guru Eric Meyer has been there right from the start.

The year was 1996. “I was the webmaster for a university in Cleveland,” he recalls. “I was in Paris to present a paper at the fifth international World Wide Web Conference, and there was a presentation on Cascading Style Sheets. Chris Wilson gave a demo and the top of my head blew off. I was like, this is the greatest thing ever.”

But he soon fell down to earth with a bump. “At that moment I didn’t realise how bad browser support was,” he admits. “When I got back to the office I started trying to use CSS and discovered that things didn’t do what I thought they should.” But he soon recovered his optimism. “IE3 had a partial implementation and I figured they’d fill in the rest of the holes. And Netscape would get up to speed. And everything would be fine. I didn’t realise what lay ahead.”

For a time the very survival of CSS was in doubt. “Between 1998 and 2000 there were so many problems with browser implementation it looked like CSS might never take off. But I just kept pushing on it. It was only when DOCTYPE switching came in that I regained my confidence and enthusiasm.”

It was during this period that Meyer ‘accidentally’ became one of the world’s leading advocates for CSS and web standards. “I started building test pages for myself,” he recalls. “Then I joined a public mailing list, www-style, and sent mail to Chris Lilley, who was then chair of the CSS Working Group, saying: ‘Hey, I threw together these test pages, I don’t know if you’d be interested in them’, not realising that there was nothing else quite like it in existence. He said: ‘Would you mind if I shared these with the browser makers?’ I said: ‘Sure, go ahead.’” Those pages eventually become the core of the CSS1 test suite at the W3C. “I just didn’t realise how uncharted the waters were, I guess.”

The battle for CSS

“Since I was running browsers through these pages to see what worked, I started putting together support charts and publishing them, and one thing led to another. I was asked to write monthly articles for Web Review, and from there got the opportunity to write books, including Cascading Style Sheets: The Definitive Guide, CSS 2.0 Programmer’s Reference and Eric Meyer on CSS.”

In the late 1990s and early 2000s, standards faced a lot of pushback from authors. They’d say: ‘This is just a pipe dream’

Eric Meyer

The turn of the century saw a titanic struggle to make CSS mainstream, he remembers. “We had to convince authors and browser makers that converging on the same standards and implementing them as consistently as possible was actually the right thing to do. In the late 1990s and early 2000s, standards projects faced a lot of pushback – from authors more than anybody else. They’d say: ‘What we have works, and you’re never going to get browser makers to work together, and this is just a pipe dream.’ But people like Jeffrey Zeldman, Tim Bray, Jeff Veen, Glenn Davis and the other founders of the Web Standards Project just kept pushing straight ahead. There were a few of us who supported them: the CSS Samurai as we were called, the CSS Action Committee, which was headed up by John Allsopp. It was not a battle with a certain outcome. I personally didn’t see any other sensible outcome, of course – but as anyone who’s studied history is aware, the sensible outcome is not always the one you get.”

Future challenges

Fast-forward to 2012: and the landscape has completely changed, with the majority of web designers favouring standards and all mainstream browsers supporting large swathes of CSS3. So has the battle been won? “The hard job is done,” says Meyer. “But we’re still obviously having problems with inconsistencies between browsers.

“Take the Flexible Box Model, which is something I’ve been studying in detail recently. As far as I can tell, Gecko doesn’t implement one of the Flexible Box properties; so it’s kind of hard to justify using it, as you can end up with wildly different results, even among modern browsers. Now you can still use Flexible Box layout, as long as you have fallbacks for Internet Explorer previous to version 10, but there’s this one property that only WebKit supports so far as I can see. So we still have this struggle. We still think: ‘I want to use this really cool thing right now, but it only works in one or two browsers.’”

But that’s a problem Meyer thinks we’re always going to have. “Browsers are always going to go at different speeds,” he points out. “And even if they went at the same speed, there would always be inconsistencies. It would be bugs if nothing else.” And while some see fragmentation as only a bad thing, Meyer sees the upside too. “The only way you can have a web where every browser acts the same is where there’s only one browser,” he argues. “You always have to deal with the inconsistencies because it’s not a monoculture, which can be frustrating. But it’s also a great strength, because the browser makers have each other to look at and play off of. So for example, if the Safari team does 3D transforms using CSS syntax then the other browser makers will pick that up, because they think that’s awesome – or they’ll think it’s dumb and they won’t do it.

“Then there’s a discussion about: ‘Is this worth doing for everyone, or is just the one browser going to have it?’ And if it’s worth doing but maybe not worth doing that way, then maybe there’ll be a new spec that will describe this behaviour but with a different syntax. I think that’s healthy. It can be frustrating as an author that this shiny thing that you want right now isn’t there right now. You might have to wait a little while, or a few years. But you know, we get there.”

Responsive first

Responsive design will become even better as we get tools, like Flexible Box and the Grid Layout spec

Eric Meyer

The next battle, says Meyer, is responsive design. “It’s like 10 years ago we said: ‘You start with standards and then you add proprietary stuff as needed.’ I feel kind of the same way about this new movement. Responsive design is really awesome, and I think it will become even better as we get better tools, like Flexible Box, like the Grid Layout specification. As those become supported, they’ll make responsive design so much easier and more powerful. I’d recommend to everyone to start on the assumption that you’ll use responsive design – and only if you then decide it’s inappropriate should you not do it.”

CSS is continually evolving and new properties are emerging all the time. While some are worried about using new properties that may not be fully supported, Meyer urges designers to throw caution to the wind and start experimenting. “I was writing about CSS in the late 1990s and half of every article was: ‘Okay, so now that I’ve explained how this is supposed to work … the two browsers do this totally differently and here’s how you work around that.’ And people would occasionally say: ‘Why did you write an article about something I can’t use?’ But most of the time it was: ‘Oh that sounds awesome, I can’t wait!’ And I think the same is true of CSS3 today, and will continue with CSS4 and beyond.”

Conference king

Meyer is also well known as co-founder of the US conference An Event Apart. It’s so popular, a lot of Europeans cross the Atlantic for it, but they may not have to travel so far soon. “We want to come over to Europe in the future,” says Meyer. “We’ve been focusing on making the event run as smoothly as possible, because for us to come overseas is a pretty major logistical challenge. But I think we’re getting close.”

The thing that makes the show so successful is the passion that goes into it, Meyer reckons. “We do everything we can to make it a really great experience, even if that means a hit to the bottom line. We’re not really there to make a profit. We’re doing it out of a love of the industry. And trying to get this stuff spread around.”