Well, it seems that a few folks are getting a little riled by the proposed XHTML 2 spec. To gain a little insight (and some colorful phrasing), read Semantic obsolescence [dive into mark], and
XHTML 2 and all that [zeldman].
Mark Pilgrim also has a ton of links and terrific descriptions of some of the more technical aspects of accessible web building. Check it out.
Ben and Mena have done it again (or rather, will be doing it again…): Six Log: Simple and Powerful Text Formatting.
In the “good news to start the year” category, the forthcoming Text Formatting options to be added to MovableType in the near future will add a great deal of scope and usability to MT. Webgraph is already developing plans to use MT as the standard CMS for new clients, and this new feature will only make it easier for us to sell new clients the concept of a CMS. We’ve been loading up with plugins for a while now, adding the functionality that we anticipate most clients needing out of MT, but Text Formatting is the big one, and it sounds like the new options will go beyond those of any current plugin.
Thanks guys!
OK, now before you go flaming me about what I’m about to say, just take a few deep breaths and stay calm:
Zeldman’s CSS Rollovers are not a good thing.
Now, this is just my opinion, and as such it may be wrong, or it may simply change at some point in the future — but enough about me, let’s get to the point.
Zeldman has relayed on his site recently that the XHTML2 standard will likely not include the <img> tag, which is why it’s a good idea to find an alternative for displaying images. This is where the CSS rollover/image display code comes into play. Without using the <img> tag, Zeldman’s homepage proudly displays two small banners in the right column, without the use of the <img> tag, nor any JavaScript for the rollover effect.
Here is the problem: it requires more code than just using an <img> tag and some JavaScript.
Zeldman’s code:
<-- HTML Code -->
<div id="banner2"><a id="alban" href="http://www.alistapart.com/" target="eljefe" title="A List Apart, for people who make websites."><span class="alt">A List Apart</span></a></div>
<div id="banner1"><a id="hcban" href="http://www.happycog.com/" target="eljefe" title="Happy Cog Studios. Web design and consulting."><span class="alt">HapXXCJog Studios</span></a></div>
<-- CSS Code -->
#banner1, #banner2 {
margin: 10px 0 0 2px;
padding: 0;
width: 100px;
height: 25px;
}
#banner1 {
/* Opera uses this background for the rollover effect. */
background: url(/i/bans/hc100bano.gif) no-repeat 1px;
}
#banner2 {
/* Opera uses this background for the rollover effect. */
background: url(/i/bans/ala100bano.gif) no-repeat 1px;
}
#hcban, #alban {
display: block;
padding: 0;
border: 1px solid #6cc;
background: url(/i/bans/hc100ban.gif) no-repeat 1px; /* start hiding from macie\*/
background-position: 0px; /* stop hiding */
width: 100px;
height: 25px;
voice-family: "\"}\"";
voice-family: inherit;
width: 98px;
height: 23px;
}
html>body #hcban, html>body #alban{
width: 98px;
height: 23px;
}
#alban {
background-image: url(/i/bans/ala100ban.gif);
}
a#hcban:hover {
background-image: url(/i/bans/hc100bano.gif);
ns- border: 1px solid #cff;
}
a#alban:hover {
background-image: url(/i/bans/ala100bano.gif);
border: 1px solid #cff;
}
.alt {
display: none;
}
In addition, the images are not visible to older browsers. I’ll have to hear a very strong argument against the <img> tag before I can agree that moving away from it entirely is a good thing.
Again, my opinion on the subject is subject to change, and of course I’ll try this method myself to experiment, but for now I’ll vote “No” on the CSS Rollover referendum.
Todd Dominey has a really slick stylesheet switcher on his recently-restyled site (not much changed, mostly the CSS). I’m going to figure it out as my own little homework assignment for JavaScript, since I’m back to learning it again.
I’m thinking of using a stylesheet switcher on an upcoming site, and though I’ve been working with a method documented on ALA, Mr. Dominey’s approach is interesting enough to sidetrack me for a time…
Web Page Design for Designers has a new feature on a typographic approach to CSS layout. There is also a neat mini-site titled “Fun With Fonts” — both are worth checking out.