Article
About the Author
Rachel Andrew & Kevin Yank
Rachel is the Director of edgeofmyseat.com, a web solutions company in the UK. She is a member of the Web Standards Project, and has authored several books for SitePoint, including The CSS Anthology and Everything You Know About CSS Is Wrong.
Kevin began developing for the Web in 1995 and is a highly respected technical author. He wrote Build your own Database Driven Website using PHP and MySQL, a practical step-by-step guide published by SitePoint, and he's editor of the SitePoint Tech Times, a bi-weekly newsletter for technically-minded web developers.
The Problem with CSS is ...
I’m a visionary. I’m ahead of my time. Trouble is, I’m only about an hour and a half ahead.
—George Carlin
The problem with CSS is that CSS is too hard.
There. We got that out of the way easily enough, didn’t we? You can skip to Chapter 2 now of the groundbreaking new title, Everything You Know About CSS is Wrong!
Okay, maybe that was a little unfair. For the most part, Cascading Style Sheets (CSS) technology is beautiful in its elegance and simplicity. It gives web designers a language in which to describe a consistent visual treatment that can be applied to a single page, an entire site, or even a whole bunch of sites. Yes, CSS was ahead of its time when it was first created, but it didn’t stay that way for long.
As CSS was conceived in an age when the design of most web sites still looked quite plain, its creators couldn’t anticipate the richness and intricacy of the designs that it would eventually be asked to describe. And so the Web marched inexorably on, while CSS struggled to catch up. Clever designers figured out ways to make CSS do what they needed it to do, but these techniques were so convoluted that they quickly became difficult for the rest of us to master.
These techniques were also quite fragile. Since they employed CSS features in creative and unexpected ways, their use tended to expose the subtle inconsistencies and limitations of the CSS support in each of the major browsers. Today, even the most experienced designers routinely see their sites break in new and unpredictable ways as a result of a subtle change in content, or a new browser release.
For the creative elite who came up with these often mind-bending techniques, CSS can offer a thrilling and constantly surprising landscape in which to work. But for beginners learning to design their first web sites, today’s CSS can be shockingly difficult to work with. CSS is just too hard.
The good news is, that’s all about to change.
Whether you consider yourself a CSS layout expert, have previously tried to learn CSS layout techniques and given up in frustration, or are only just exploring CSS for the first time, everything you know about CSS is wrong.
The Grid’s the Thing
For better or worse, most web design is based around two-dimensional (2D) grids. Talented designers have ways of making these grid-based designs look less “boxy,” but with very few exceptions, the grid is always underneath the frills and furbelows.
Unfortunately, CSS was not designed to describe 2D grids. Rather, CSS assumes that every page will be made up of a vertical stack of blocks, piled one on top of another, each containing either another stack of blocks, or text (called inline content) wrapped to fit inside the block.
Take Figure 1.1, the SitePoint homepage. This page is divided into a header, a footer, and the body content. Each of these components is a block; if a given block doesn’t occupy the full width of the browser window, whatever space is left over will appear as empty whitespace to either side. This example shows the kind of one-dimensional layout that CSS was designed to describe; if that’s all there was to the layout of the site, well, CSS would be perfectly equipped to describe it, and I wouldn’t be writing this book!
Of course, that isn’t all there is to the layout of sitepoint.com, nor is a vertical stack of blocks an adequate model for describing almost any web page designed in the past decade. Invariably, when designing a site, you want to arrange blocks side by side.
Let’s look more closely at the structure of the SitePoint homepage. In Figure 1.2, you can see the grid that describes the layout of the page. In particular, notice the number of blocks that sit alongside another block. Every single one represents an element of the page that will require the designer to employ some degree of trickery to make CSS do something it wasn’t designed to do.
When many designers sit down to lay out a new web site, one of the first steps they will take is to draw a grid. Try visiting a few of your favorite sites—play a little “spot the grid.” It’s usually not difficult to see.
Shortly after early browsers like Internet Explorer 3 added support for CSS, it became abundantly clear to designers that CSS wasn’t up to the task of building the 2D grids needed to achieve the rich layouts they wanted. Good old HTML, however, offered a feature that obviously could do the job: HTML tables.
Tables Do the Trick
Designers seized on the HTML table element as a page layout tool. Rather than reserving it for its designated purpose—the display of spreadsheet-like tables of data—designers found that they could stick the blocks of their pages into table cells, forming the two-dimensional grids they craved.
By the time the table element made it into the official HTML specification with HTML 3.2 in 1997, it was already being used extensively as a page layout device, having been included in web browsers since Netscape 1.1 and Internet Explorer 1. See Figure 1.3, for an example of an early tables tutorial.
The HTML language, originally conceived to describe the structure of academic documents, was now being used as a page layout language—a usage for which it was entirely unsuited. Nevertheless, it worked; at the time, this was more than could be said for page layout with CSS.
While designers plied their trade with HTML tables, the Web’s brightest minds understood that something had to change. The Web had the potential to be presented and navigated not just by the large monitors of desktop computers, but on portable devices with smaller screens, in non-visual browsers designed for visually disabled people, and by search engines and other computer programs that crawl the Web for information. But that potential would never be realized as long as HTML elements like table were being used to achieve visual layout tasks, rather than to provide meaningful information that could be conveyed by non-visual browsers.
Within the design community, many clever designers also saw this potential. Through years of experimentation, they found ways to make CSS reach beyond its limited sphere. As we’ll see in Chapter 2, CSS Table Layout, it turns out that features like absolute positioning and floated blocks can be employed to force blocks to sit alongside other blocks—a purpose never envisioned by its creators.
These techniques have formed the basis of many books about CSS, including several of my own previous titles, such as HTML Utopia: Designing Without Tables Using CSS, 2nd Edition. Although these features have been tried and tested, and are in use on most professionally-designed sites today, I wouldn’t describe them as stable, predictable, or easy to use.
But now there’s a new arrival in the world of CSS—it’s about to render those books obsolete, and transform the arcane art of CSS layout into a simple discipline easy enough for almost anyone to adopt.