There is a danger of adversly effecting semantics through incorrect use of CSS.
With everything else that has been going on lately, it's been a while since I've written anything much about CSS. It's not that I'm any less interested in CSS; infact seven's recent Beta has me more excited than ever about what we will be able to do on a regular basis. But over recent months, I've discovered a renewed interest in semantics and markup and CSS has taken a back seat.
CSS is often thought of as the presentational topping on modern web design. I described it once as the Fruity jelly(o) in a The Web Standards Trifle..
I think that most of you will have got the importance of separating structural and semantic markup (HTML/XHTML) from presentation (CSS) and behavior (DOM scripting). For those that have, I'm sure that presentational markup such as,
<p>I should be a header</p>
<p><strong>I should be a header</strong></p>
<p style="font-weight:bold;">I should be a header</p>
<p class="header">I should be a header</p>has already vanished from your code. But as well as the danger of muddying markup with presentation, there is also a danger of adversely effecting semantics through incorrect use of CSS. In other words there are times that we use CSS to achieve a visual style and in doing so reduce the semantic value of a document. I'll give you some examples of what I mean.
<h2> + <p>
One of my favourite design devices is to make the first paragraph of content on a page (typically one that follows a top level header such as <h2>) bigger or bolder than its sibling paragraphs. This first paragraph is often a summary of the particular article or content on that page. Typically this would be marked up and styled as:
<h2>CSS for Developers</h2>
<p>A one-day workshop designed to cover the fundamentals of CSS.
It's aimed at developers... </p>
h2+p { font-size : 120%; font-weight : bold; }But wait. What was my reason for singling out that paragraph in the first place? To emphasize it. A perfectly good and more appropriate element exists for just this purpose, the <em> element. So more appropriate would be to markup and style that paragraph as:
<h2>CSS for Developers</h2>
<p><em>A one-day workshop designed to cover the fundamentals of CSS.
It's aimed at developers... </em></p>
h2+p em { font-size : 120%; font-weight : bold; font-style: normal; }See the difference? I'm not using the emphasis element here for presentational reasons because I intended to to add emphasis to it. It's a subtle but important distinction.
Images and FIR
Along with many others I try to limit the images that I include in my markup and add images that are purely there for presentational reasons via CSS. But I have seen a tendency to remove images that can add meaning to a document from markup. I have been as guilty as anyone in falling into this trap.
Let's take this example from a site for the Fifth Wheel Company that I designed back in December. (You'll see the unordered list below represented as the three images that overlap the main header image.)
<ul>
<li id="nav_01"><a href="#">Celtic Rambler</a></li>
<li id="nav_02"><a href="#">GlobeStormer</a></li>
<li id="nav_03"><a href="#">Equisara horse trailer</a</li>
</ul>
It could be argued that these images are purely decorative and as such have little to contribute to their function which is linking to another page. But compare them to the two images below them. Are these two images significantly different from the three in the list? No. Yet these two have been been placed directly in the markup.
It's a subtle difference but one that illustrates that images, marked up with appropriate alt attributes (and perhaps longdesc) can add semantic meaning to a document and should not be placed via CSS.
Image replacement
It is also important to remember that for a whole bunch of reasons, not least wider accessibility, that image replacement techniques should always be used sparingly and never to insert content into a page through CSS background images or generated content that should correctly be added through text or properly attributed inline images.
What belongs in markup should stay in markup
Jeremy Keith has often argued that DOM scripting should not be used to generate content that rightly belongs in markup. The same could be argued of CSS Generated Content. Until now few browsers have reliably and consistently implemented this powerful CSS tool and there are no plans to support it in the commercial release of seven. But as browsers themselves develop (seven will only hasten the development of competing browsers) and support for Generated Content increases, we should be mindful of not abusing its power at the expense of semantic markup.
Design is meaning
One final point to ponder is that far from being divorced from meaning, good design conveys meaning; a point which is often lost when stripping away presentation for the sake of leaner markup.
Let's think for a moment about the CSS Zen Garden, where the designs have little or nothing in keeping with the purpose or meaning of the content. The Garden does an amazing job of illustrating that semantics can be completely and in many cases wrongly separated from design. Let's look at two of my favourite examples.
Pinups by Emiliano Pennisi
Business Style by Gunta Klavina
In the wild these very different designs would convey a different message and therefore a different meaning to their users through their design, irrespective of their markup. One is fun, the other businesslike and more serious in tone. Yet stripped of CSS, the differences in meaning conveyed through their designs are lost.
And this, what I like to call the semantics of design, is something that I'm going to return to in a column some time in the near future.