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.
I came across an issue with Internet Explorer 7 beta displaying the rating stars incorrectly in Yahoo! Tech. After doing some testing, I realized the browser was measuring the sprite image from the bottom up, rather than the top down. This is a significant issue. I had to create a new set of rules in the IE7 style sheet for the new measurements.
I use sprites extensively. I love the way they save server requests and I think they are much easier to maintain. The thought of fixing all of my sprites was enough to send me downstairs for another coffee. But I noticed the only sprites being affected were the ratings. I needed to find what was special about these. The ratings sprites use a span that is absolutely positioned in either an unordered list or definition list. This gives us flexibility for displaying them across the site.
IE7 Does it Right!
I created a test page for using sprites. I stripped the CSS down to simple list handling, floating, positioning, and sprite. IE7 handled it perfectly. I even replaced the links with spans and that still didn’t trip up IE7. Take a look at the test page , IE7 Sprite Test, to see the results. While I’m still having problems with IE7’s handling of sprites. I believe it is a unique combination of styles that is causing this issue. I don’t think the average person will need to worry about this.
When I do figure out what is going on with Yahoo! Tech’s rating sprites, I’ll update this blog with the solution. For more information on using sprites, visit Dave Shea’s article CSS Sprites: Image Slicing’s Kiss of Death on A List Apart.