Implementation
Introduction To Page Layout
What is CSS layout?
CSS layout uses style sheets to define the placement of elements on a web page. Typically CSS layout replaces tables, which are currently the most popular method of placing page elements. There is a common misconception that CSS layout techniques are incapable of producing complex page layouts. While it is true that tables generally provide more flexibility, I will show you that complex layouts are quite possible with CSS.
To get a quick look at the nuts and bolts of CSS layouts, we will look at a few layouts later on.
CSS allows you to separate the structure and presentation of documents. The separation of structure and presentation (often incorrectly referred to as the separation of style and content) is a principle that governs (or should govern) all markup languages, such as HTML. HTML is intended to structurally organize the content of a document so that it's clear what the conceptual relationship is between various portions of a document. The markup language is NOT intended to define the display of the document, although display and structure are often tightly connected.
As web developers we have been trained to see an <h1> tag as a way to make something bold and large, not as a way of marking it as a section header. The introduction of physical tags, such as <b>, <i>, <font> and the abominable <blink>, all of which specify display qualities of document elements and not structural qualities, have only made things more confusing for the developer. And this confusion is unfortunately reinforced by the behavior of web browsers, which apply styles to section headers and indeed make them large and bold. But it is wrong to think that the markup is what specified the style; in fact, the browser decides how to display a section header according to internal logic given to it by its programmers. Had they wanted, they might have specified that section headers be displayed italicized, or with an underline. And that is where CSS comes in to the picture. CSS allows you to override the browser's plans for displaying any particular page element or group of elements.
The separation of structure and presentation results in the following benefits:
-
A semantic web: You may have heard of the semantic web before; it is a vision for the future of the internet where the millions and millions and documents available on the web are well-structured documents with markup that accurately describes their contents. In such a world, documents become much more accessible and understandable to computers, which makes it possible for computers to better act as a person's agent. For instance, search engines would function more effectively, as document indexers could take advantage of the markup of documents to organize results. More exciting possibilities include programmable bots which could scour the reaches of the web for the best price on buffalo milk mozzarella or for the latest interview with Britney Spears. If a document's markup describes the content, then computers are better able to understand the content.
-
Ease of redesign: Once we have removed layout instructions from the markup of our documents, redesign becomes a relatively simple task. Instead of cutting and pasting content out of tables, we simply write a new style sheet and apply it to our document. A whole site can be given a new look in seconds. Many sites already take advantage of this benefit of CSS layout, enabling site visitors to pick a "skin" for the site and applying different style sheets on the fly.
-
Degradable code: Some people feel that if you want cross-browser, backwards-compatible code, you have to use tables. Of course such thinking is a result of a fundamental misunderstanding of HTML, which as I've said is intended to carry structural information about a document. The most backwards-compatible (and forwards-compatible) code is that which is free from all bad HTML, such as physical tags and tables used for layout. These tags are nothing more than a wrench in the works, keeping more primitive devices such as text-only browsers and phone-based web interfaces from getting what they came for: the content.
Problems with CSS layout
To fully understand CSS layout, you must not only be aware of it's benefits, but you must also be ready for some problems it presents. Most of these problems stem out from CSS's immaturity. Yes, the recommendation itself has been around for a while, but CSS layouts are only recently possible, and even more recently taken seriously by developers. Expect this immaturity to result in problems, such as:
-
Layout limitations: The fact is that CSS layout will not currently allow you to do everything you can do with tables. This can be a real frustration, and has stopped many people from exploring what CSS can do.
-
Slight differences in browser display: CSS is difficult for browser makers to implement, and the W3C recommendations can be vague and confusing. So you can expect even the most recent browsers to behave differently when dealing with some aspects of CSS layout. Keep your layout simple enough and you will likely get a nearly identical display in Opera 5+, NS6, and IE5+. But as your layout increases in complexity, the odds that different browsers will render pages differently also increases.
-
Difficulty in switching from tables to CSS: For designers and developers accustomed to wrangling tables, using CSS for layout can be a confusing change. There is a "table mentality" that we developers have taken on over the years, and we are in large part unaware that it exists. Some take offense when this is pointed out, complaining instead that CSS is just difficult and non-intuitive. But if you were accustomed to driving a car with a steering wheel and you were then asked to head out on the freeway in a car steered with foot pedals, you certainly wouldn't be offended at the suggestion you had a "steering wheel mentality." The fact is, we are generally comfortable with tables. CSS layout is different, but we must not confuse differences with increased complexity.
So then, with all these problems, why use CSS? You'll have to make this decision yourself. Many people I know use CSS layouts for personal web projects, but still resort to tables when working on commercial sites. The time is coming when CSS will be suitable and preferred for all site layout, but many reasonably argue that the time has not yet arrived.
We use CSS because we believe in the fundamental principle of the separation of structure and presentation, and I am willing to put up with the problems CSS presents as I look forward to a time when CSS is as robust and simple to implement as tables are today. That time will come, and the web will be a better place for it.