Article
20 Sites That Brought CSS into the Mainstream
Page: 1 2
The Not So Obvious
Admittedly, I completely forgot about how important ESPN was in the publicizing of CSS—it took a co-worker to remind me. But I’m glad they did, because this list really would be incomplete without it. For those who are unaware, ESPN.com was one of the first major web sites to convert from tables to CSS. By switching to CSS back in 2003, ESPN.com saved around 2 terabytes of bandwidth a day. It was a highly publicized move which paved the way for other large web sites to do the same.
W3.org? Yeah! Every time you need to know information about a CSS property that has yet to be written, this is where you go. When I was writing my last couple of SitePoint articles I spent a lot of time researching the "future of CSS" and logged many hours reading up on the CSS3 spec. They have everything from the rotating box model to the CSS3 User Interface model. And really, who better to receive the latest CSS news from than the people who write it?
jQuery is everywhere these days, it’s totally unavoidable if you’re an up-to-date developer. It took the average CSS developer and instantly made them JavaScript gurus with its brilliant CSS selector integration, as well as giving the average run-of-the-mill JavaScript developer a great insight into the workings of advanced CSS.
jQuery is also allowing advanced CSS features (that have struggled to survive in the midst of massive browser wars) to thrive and be presented to the Web in a way that brings CSS3 into the developer’s everyday toolbox.
Section 508 is an amendment to the Rehabilitation Act passed by the United States Congress in 1998. It’s specifically about the accessibility of electronic information to those who are disabled—the Web equivalent of putting a ramp on a building. It also helped give rise to the idea of designing in layers with Progressive Enhancement.
In the three layers of Progressive Enhancement, the second layer—presentation—is set up just for CSS. I think it’s safe to say that without amendments like Section 508, CSS would have struggled to come as far as it has in such a short time.
Okay, I’ll be the first to admit that this one is more about the mailing list, but it all starts with the web site. The CSS-Discuss mailing list takes common CSS problems and news from developers and brings them to a mass audience, so that we can all put our heads together and come up with creative solutions to problems we all run into. Even if you’re just a quiet observer of the mailing list, you can learn a lot of tips and tricks about CSS.
Much of this list contains sites that I personally learned CSS from. StyleMaster and WestCiv played a huge role in my learning CSS, bringing advanced techniques to sites I design and develop. StyleMaster was one of the first CSS editors released for the PC and Mac operating systems. It had—and still has—many built-in CSS features that helped developers (like me) explore and test the limitations of CSS.
WestCiv also released many CSS tutorials on their site that are some of the best introductions to CSS I’ve found.
YUI CSS Library: Grids, Reset, Base, and Fonts
The YUI team has some of the best front-end developers out there and they really outdid themselves with their CSS library. The library contains CSS reset, base, grid system, and fonts files. Developers all over the world use the CSS files developed for the YUI CSS Library. It has also paved the way for many of the most popular CSS frameworks out today.
Properties like position, float, and things like text-indent:-9999px are the rock stars of CSS (bear with me). With monsters like that looming about, it can be very easy for a property to get lost in the mix. I Love Typography brought many of the CSS properties into the limelight by stressing the importance of readability: line-height, letter spacing, whitespace, and font-size/family.
Towards the end of my research for this article I was poking around through the features in my Web Developer Extension for ideas to round out the list, when it occurred to me that the extension itself, for me, was a huge CSS influence. The Firefox Web Developer extension was developed by a guy named Chris Pederick, and it rivals extensions like Firebug and Greasemonkey in popularity among the developer community. This was the first extension I used to learn CSS. Chris still distributes the popular Firefox extension via his web site as well.
MySpace? Seriously? Yes, MySpace did a lot for CSS. When we talk about bringing anything into the mainstream, we have to consider beyond the mainstream web developer. MySpace brought CSS to an audience who couldn’t care less about it. The millions of people who customize their MySpace pages have all seen CSS; even if they fail to understand it, they’ve seen it. Consider this conversation:
Non-techie: So, what do you do?
Tim: I’m in web design and development, specializing in CSS.
Non-techie: What’s CSS?
Tim: You know that chunk of code you use to make your MySpace page look hideous? That’s CSS.
Non-techie: Oh yeah, okay.
I have that conversation more than I’d care to admit.
So, that’s my list, from CSS Zen Garden to MySpace. I can only hope that everyone reads all the descriptions rather than just scanning through, because there are some parts that I really look forward to hearing opinions on. The best part of writing an article like this is finding out what everyone has to say, including the spin-off debates it can cause. I look forward to hearing the feedback.