CSS and Modern Web Development

If you were developing for the web 10+ years ago, you most likely became very familiar with the <table> tag. Note that I say “familiar with,” not “friends with.” Here’s why.

Tables are sizable containers with rows, columns and cells. A table’s purpose is to display tabular data, things like sport scores, weather data and client lists. In 1998, the majority of websites, including high profile ones, were using table-based layouts. The Internet was littered with tables and very few contained anything resembling tabular data.

When a single HTML file contains more than one hundred nested tables… well, let’s just say it becomes extremely difficult to navigate markup like that. When you have bloated code you have larger file sizes, which in turn results in longer page loads, and when it comes to the Internet, speed is king.

It used to be that a simple request to change the position of a logo and the width of a welcome message was nearly impossible, because changing the size of one table cell directly affected all adjacent cells and tables. I personally broke entire designs trying to fulfill such requests. Those were dark times for developers and websites didn’t change their clothes very often in an effort to avoid being caused embarrassment.

Thankfully, we’ve now moved into the age of CSS (Cascading Style Sheets). CSS is the backbone of Internet design in the modern age. With it, design can be done outside the grid so that it looks less like pages from a textbook and more like pages from a high-gloss, full-page magazine spread (appropriate content, of course).

However, CSS isn’t exactly the new kid on the block. In fact, style-sheets, in one variety or another, have been around since the 70s and CSS1 has been around since 1996. Many of us were actually using some form of CSS to accomplish pretty spectacular designs (albeit terribly coded ones) back in the “table” days. At that time, we had no idea that CSS extended beyond background-image, padding, and text-decoration.

Thanks to the efforts of CSS design evangelists like The CSS Zen Garden, many of us have seen the light. CSS is more powerful than we ever imagined. We can now redesign an entire website by updating a single CSS file.

Now that we have CSS, designers are free to create website designs that are only limited by their imaginations, right? Well… that is what most designers believe but it’s not entirely true. CSS does have a few limitations, but actually the limitations are minuscule compared to the actual problem – browser compatibility.

There would be no way to see the Internet if it weren’t for web browsers. Browsers interpret all the boring code into something we can understand and interact with. Since the 90s, there has been a handful of them to choose from. But browsers each see the Internet a little differently.

Organizations like the W3C (World Wide Web Consortium) have made great progress in implementing standards for browser companies to follow. The problem is these standards can’t really be enforced, only encouraged. For the last 5 years or so, many web developers have been forced to disregard some great CSS features because browsers hadn’t caught up to them or had disregarded the standards altogether.

Today, most web browsers are fairly W3C-standards-compliant in respect to rendering CSS, with a few exceptions (cough! Microsoft Internet Explorer). And most web developers are no longer limited by browser compatibility.

That being said, there is still a significant number of computers running (what I would call) “ancient” browsers, so many web developers are forced to program projects with legacy support in mind. But in the end, that doesn’t mean any of us need to go back to tables. There is enough functionality in the earlier versions of CSS1 to accomplish most of today’s website designs. You may just need to be a little creative. We certainly were creative with tables.

My advice to web developers and designers is to learn as much as you can about CSS. A user will never appreciate the developer’s work if they can’t accurately interact with it. Likewise, the same user will never experience the designer’s vision unless it’s properly translated into good markup and CSS. A proper job can never really be done with the wrong tools, and this is most evident when one finally learns to properly use CSS.