Archive for April, 2003

Transitioning to XHTML 2.0

Mark Pilgrim’s latest column begins to share what elements will be dropped in the XHTML 2.0 draft, and what new elements will be added that achieve similar results. Slightly scary in what’s being proposed, but then someone calmed us down with intelligent and practical thoughts.

What I do like about XHTML 2.0 is the introduction of the nl tag for navigation lists. Works like a ul, but semantically more appropriate for navigation — which has fast become the preferred way to mark up navigation items — then styling them with CSS. I had previously wondered if using a definition list was a better choice for navigation, but then was convinced that using a header tag and an unordered list was the way to go (mainly due to a cleaner un-styled presentation).

Now nl is thrown into the mix — although it doesn’t look like I, or anyone else, will be using XHTML 2.0 any time soon, if ever. So, maybe it’s not worth getting excited about.

Excited over a proposed XHTML tag. Yes, it’s come to this…

45 Degree Swing

High 80 / Low 35It’s days like today that remind me why I put up with living in New England. When the Spring finally comes, it’s shockingly great. Today it’s probably 80 degrees and sunny.

On the right is the forcast for tomorrow. With a predicted high of 80 and a low of 35 degrees, the weather service is decreasing its likelyhood of forcasting inaccurately. There is not much of a margin of error there. So, we’ll be in for a 45 degree swing tomorrow — which is entirely insane.

CSS Inheritance

One of the easiest ways to optimize your code when dealing with basic markup styled with CSS, is to strip out unnecessary class declarations as well as redundant div tags. The following is an attempt at a mini-tutorial.

I’ve been looking at a lot of code lately, and something I see more often than not is markup that is “over-declared”. For instance, let’s say you have a div that contains some other tags — h1, maybe a few customized anchor tags, etc. Some might say:

<div id="stuff"><h1 class="red">Big Title<h1></div>

And then in their CSS:

#stuff { padding: 20px; border: 1px solid #000; }
while adding a second declaration for
h1.big { color: red; }

Let’s do this with less code by stripping out the class="red" declaration from h1 tags and use inheritance in the CSS to do the work by assigning all h1 tags within #stuff a style:

HTML: <div id="stuff"><h1>Big Title<h1><div>

CSS: #stuff h1 { color: red; }

Now, stripping out one class declaration may seem like chump change, but when you’re giving class names to elements over and over again — that are easily referenced in CSS by it’s parent id — it begins to add up.

The inheritance works with any HTML tag, so instead of doing:

<div id="stuff"><div id="stuffinside">blah blah<div><div>

You could do:

<div id="stuff"><div>blah blah<div><div>

While declaring in the CSS that a div that’s inside #stuff should be styled a certain way:

#stuff div { background: #369; }

You may even keep going deeper and deeper when nesting elements:

#stuff div div div { background: #369; }

The above would specify the third div that’s nested within #stuff should have a blue background

The point: assign id or class once. Then use CSS to access and style the generic child elements within. It’s an easy way to simplify your structure.

While it might seem elementary to many (and not something I invented) — it is something I’ve been seeing over and over again in CSS-based layouts.

Footnote: There are certainly times where it’s appropriate to use class names inside elements that are already labeled — but there are often just as many times when they are unnecessary and the bloat can be cut down.

Bubblegum Altoids? (or… A Post Containing No Acronymns)

I’ve just thought of a great new Altoids flavor: bubblegum. Not mint, but bubblegum as in the kind that used to come with baseball cards — but it wouldn’t be chewing gum. It’d be an Altoid.

I’m not sure what “curiously strong” bubblegum flavor would be like, and more importantly what is bubblegum flavor? Why is it pink? It’s not fruity or minty or chocolaty. It has its own unique taste. And this taste would compliment an Altoid very well, I believe. I should also point out that the Wintergreen flavor that Altoids already markets has a hint of bubblegum flavor in it. Hence the idea.

Simplified CSS Tabs Live Example

I realized from a few emails that it would make a lot of sense to point people to a live example of the CSS tabs described in the previous post. Here’s a page where you can see them in action. View source for CSS and XHTML.

They’ll also be popping up in the real world throughout various pages within the Fast Company web site, shortly — where they will float in the content area of the page for certain applications. This was one of the reasons I didn’t want to mess around with positioning, since it was needed to be bullet proof within an already complex CSS layout.

Simplified CSS Tabs Trick

While trying anything and everything to get pure text, CSS tabs from an unordered list to work cross-browser — without adding extra elements, I came up with a nice little trick.

By adding an id="tabnav" to a single ul element, I then could style an unordered list into a tab-style navigation like this:
tab nav

The trickiest part was getting the horizontal line to line up correctly with the row of tabs. One pixel off in either direction, and the illusion doesn’t work. I couldn’t quite get this to work right for every browser I was testing on by using CSS borders alone. So I ended up giving the #tabnav a single 1×1 grey pixel background image: background: url(/images/tab_bottom.gif) repeat-x bottom;, aligning it to the bottom and repeating it only horizontally to create the wide line. Then, by giving each #tabnav li a float: left;, adding padding and a grey border of the same color on all sides — I could then override the border-bottom with a white border for active tabs to give the effect that it is highlighted. The fact that that horizontal line is a background image is what makes this method work. A CSS border is assigned to every side, which will overlap the background that’s behind it (grey border on every side for normal tab, white bottom border for an active tab).

Using unordered list for navigation and styling them with CSS is nothing new, but the single pixel background trick worked great for me as far as lining up the tabs to the border — most importantly without having to use any extra divs or other hacks or positioning. Maybe others will find this useful.