Sorry Jeffrey Zeldman for twisting your words, but they rang through my mind when I saw the latest missive from Joe Clark, the WCAG Samarai. Zeldman led the troops through the battle over standards guerrilla war against the browsers.
Now Joe is doffing his commanders uniform, I’m hoping it’s a rather smart one with sophisticated typography on the badge and non-leather jackboots. The Samarais will push, prod, and tease the WCAG into making accessibility an attainable goal.
Grab your katana.
The <span> tag is often avoided by developers at all costs. It carries no semantic or presentational value and exisits solely as a container and hook for a developer’s CSS. Many argue that more semantic options, i.e. <strong> or <em> should be used instead. This is a good argument, but never say never.
Think about how important the information is inside a span that will use CSS to add image replacement, sliding doors, warning notices, etc… If the information should be emphasized, use something else. If the content is not more important than the text around it, a span is a better choice. Eric Meyer prefers to use the non-semantic <b> tag, which adds style but no semantic weight. This is also an option. Lachlan Hunt has created an essay that describes the Semantics of <span> and his disagreement with Meyers.
While, in Eric’s case, the use of the extraneous element, be it span or b, was entirely presentational since the semantics of the content is being expressed by the parent element, not the element itself; there may be many cases where it is considered useful to revert to these other, often disregarded, presentational elements to assist with conveying semantics to some readers, usually in a visual medium, where no other semantic element is appropriate. However, for a similar reason, authors must be careful because the elements may convey semantics that they do not have (eg. <b> may, depending on the context, inadvertently convey a form of strong emphasis in a visual medium). Therefore, although some presentational elements are not deprecated, I do not recommend these presentational elements be used often, and that you carefully weigh up your other options before doing so.
The span is not a tag to dismiss. It is a flexible container; suitable for content that you want to add styles, microformats, or metadata without having the content become more important than the sibling text. Use more semantic alternatives when the content should stand out to a screenreader or with CSS disabled.
How good is IE7? I was wondering about that today as I reloaded it to do another batch of bug fixing. The proof may be in your CSS pudding.
We are using conditional comments to import either ie6.css or ie7.css to control our hacks.
So far, the ie6 style sheet is 342 lines long, including lots of whitespace and comments. A good portion of that is for re-assigning gif background images instead of png. The rest is an assortment of invoking hasLayout, box model changes, and the ever-popular z-index bugs.
I copied this style sheet, commented everything out and began re-introducing the rules to build the IE7 style sheet. I ditched the gif and z-index hacks. The most common hacks are for hasLayout and double-margin float. I’m still using a set of hacks to re-configure my background images that are being measured from the bottom up.
So, how big is the IE7 style sheet? Right now, we are looking at 146 lines of code, including white space and comments. That’s still a hefty amount and I’m not done fixing bugs. Yes, IE7 is much better than IE6, but still a far cry from the others.
The YUI Container libraries work with visibility:hidden to hide your targeted div. I’ve spent too many hours trying to figure out why something wasn’t working only to realize I had display:none in the CSS. So, when you use these libraries remember visibility, not display. It’s a mantra that could keep you from pounding your forehead into a keyboard repeatedly.
And don’t forget to keep your libraries updated!
The latest release includes the module/container library. This group makes it super easy to add window functions to your site. These are not the popup windows of yesterday. This is about manipulating divs to hide or show on top of your existing content.
Yahoo! Tech was one of the first to implement this library, look at the dropdown menu in the top nav, “what are these words” in the tagnav, interactions for sending/saving products, and much more. It even gives you the ability to insert an iframe under the window if you have z-index issues in IE.