Extensible CSS Interface I: The Foundation

This is the first article in the four-part series, "The Highly Extensible CSS Interface". Markup and images for this article:

• View the demo
• Download foundation.zip

Throughout the duration of this series, we'll be speaking extensively about markup -- XHTML, CSS, and a little scripting. Marking up a website is akin to speaking Spanish. There's more than one way say something, and there's certainly more than one way to code something. (¿Puerco, cochino, cual es?)

As you plumb through my code, I'm hopeful you'll see things that you might code differently or even improve upon. Or put more plainly, I expect you to call me out on things that deserve refinement or just plain suck. After all, we collectively better ourselves as a community by exchanging ideas and opinions for approaches to problem solving, and markup practices are certainly no exception. Fair enough?

Meaningful, Lightweight

When drafting markup, the factors I consider most important are that it be as 1) meaningful and as 2) lightweight as possible.

When we say "meaningful" we mean the HTML elements and selector names we choose appropriately represent the content in such a way that if we were to experience the web with all styling removed, the hierarchy and structure of the content would still make sense. Long gone are the days of spacer gifs and repeated br elements (with which some of you reading this may not even have experience), replaced with elements which logically, or semantically, represent the content:

• An ordered list of top-selling items (ol)
• The principal heading on a page (h1)
• A quotation from a happy customer (blockquote and cite)

This approach requires that we remove presentational information from our thinking, a concept described comprehensively by Andy Clarke in his remarkable book, Transcending CSS. I still vividly recall my early experiences with CSS as we coded a rather large-scale web application, thinking we were cleverly creating a series of presentational class names that allowed us to mark up content with elegant clarity such as this:

<p class="arial red 10">

…only to endure a painful day of reckoning when the application required a redesign, whose 500 templates were to become anything but red Arial 10px type. I can has do-over?

When we say "lightweight" we mean marking up our content with the fewest parts possible for all things markup -- elements, attributes, and values for HTML; selectors, properties, and values for CSS. For example,

<a href=""><span class="icon">Map</span></a>

is minimized as

<a href="" class="icon">Map</a>

Also,

border-width: 1px; border-style: solid; border-color: #000;

becomes

border: 1px solid #000;

You'll see numerous examples of meaningful and lightweight markup throughout the series, few of which I'll pause to explicitly explain. So take time on your own to make note of these. (And again, call me out when you see things that can be more meaningful and lightweight.)

Finally, because the theme of this series is extensibility -- designing and coding in such a way that the interface is as adaptable as possible -- the beauty of a meaningful approach is that it inherently helps set the stage for creating an extensible interface.

Let's examine the demo example by diving into some of the foundational code.

reset.css

When I first began coding CSS-styled sites several years ago, it was common to declare a few "global" styles at the top of the master style sheet: body, a img, h1,h2,h3,h4,h5,h6 etc. What was done back then as a means of overriding the default styles of any given browser eventually evolved into today's practice of using a "reset" style sheet, typically named reset.css.

As stated by the team at Yahoo, a reset style sheet "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers…." If CSS frameworks such as Yahoo Grids or Blueprint are your thing, each of these come equipped with a reset style sheet built in. Alternatively, you can roll your own or use one written by others in the community.

I personally prefer Eric Meyer's Reset CSS, and this is the reset style sheet used in the demo for the series. (Note: The demo CSS was written before Eric's January 2008 version of Reset CSS and therefore uses the May 2007 version. I've not gone back to update the CSS to adopt his latest version. Notes about the subtle differences can be found here.)

I use a single style sheet, master.css, to "import" any number of style sheets for a site. I declare the reset style sheet first, thereby allowing any style sheets that come after to override the reset styles as needed:

@import url("reset.css");
@import url("screen.css");
@import ...

All styles for screen display are then listed in screen.css.

Resolution Dependence

Herein begins one of the first components of extensibility: An interface that adapts to different display sizes (or browser widths). Perhaps the easiest way to accomplish this is to create a fully fluid layout (width: 100%;), which can accommodate virtually any display or browser width. However, fluid layouts create wide, illegible line lengths on larger displays, among many other issues.

However, to reap the extensibility benefits of a fluid layout while accounting for issues such as line length, we need only to set limits for the maximum and minimum width of our layout. I first demonstrated this technique in the fictitious Tuscany Luxury Resorts layout created for CSS Mastery. Expand and contract your browser's width, and watch how the layout expands and contracts but stops at 740px and 1200px. This is accomplished using the max-width and min-width properties.

Because IE7 wasn't publicly available when this site was created more than two years ago, and because IE6 ignores the max-width and min-width properties, the markup required a nasty hack to target IE and force it to replicate max/min-width using a JavaScript extension.

Welcome to 2008. Although IE7 market share isn't dominant enough to write off IE6 entirely just yet, we can at least begin to explore interfaces that leverage the many CSS2 and CSS3 properties now supported by IE7. And of course, these newly supported properties include max-width and min-width -- no need for nasty JS hacks.

We'll talk more about resolution dependence in Part II, but for now we'll add a few lines of markup and a couple scripts to start the process. To do so, we'll use Cameron Adams's excellent Resolution Dependent Layout technique. First, we reference two scripts in the HTML <head>:

<script type="text/javascript" src="scripts/event_listeners.js"></script>
<script type="text/javascript" src="scripts/resolution.js"></script>

Second, we add an alternate style sheet which the above scripts will import as the browser width expands and contracts beyond 1200px and 750px, respectively:

<link rel="alternate stylesheet" href="css/1024.css" type="text/css" title="1024 x 768" />

Notice that this style sheet is added to the <head> rather than being referenced by master.css.

Also take note that you can do the max/min-width thing without the need for Cameron Adams's scripts. However, we'll leverage his technique extensively to do some pretty sweet tricks with the content and navigation elements in Part II Parts II & III. But for that, you'll have to wait another week. Peace out, yo.