So, a seemingly-harmless line in the Google blog (http://googlewebmastercentral.blogspot.com/) sent me merrily tangenting this morning…
In the post titled “Design patterns for accessible, crawlable and indexable content” (http://googlewebmastercentral.blogspot.com/2008/05/design-patterns-for-accessible.html), under the section header titled “CSS sprites and navigation links”, I read this little phrase, which, for some reason got me thinking…
It’s still possible to include that all-important descriptive text when applying CSS sprites; for a possible solution, see how the Google logo and the various nav-links at the bottom of the Google Results page are coded. In brief, we placed the descriptive text right under the CSS-sprited image.
So, they’re talking about making sure you add the TITLE attribute to links and the ALT attribute to IMGs, and this is something I was talking about the other day with a couple cohorts at work.
As opposed to doing the old background-image:url('blah.gif');text-indent:-9999px; (which doesn’t seem to work very well when things are float:left;, I was suggesting placing the text you want replaced inside a <span> or something and doing background-image:url(blah.gif); to the <span>‘s parent container and position:relative;z-index:-1;, which moves the text behind everything but leaves parent’s background image shining through (I don’t propose that this is any better for SEO or anything, it is really just a different way to do the same thing, but it DOES happen to work for float:left; situations).
So here’s where Google’s post comes into play…
Here’s the HTML for the search results page they reference in the blog post:
<a href="http://www.google.com/webhp?hl=en" title="Go to Google Home">Google<span></span></a>
You see that empty <span></span> after the word Google?
Now here’s the CSS that is applicable to the logo:
#logo span{background:url(/images/nav_logo3.png) no-repeat;height:26px;overflow:hidden}
#logo{display:block;height:52px;margin:13px 0 7px;overflow:hidden;position:relative;width:150px}
#logo span{background-position:0 -26px;height:100%;left:0;position:absolute;top:0;width:100%}
So, with just a tad extra HTML, they make the <a> display:block;height:52px;position:relative;width:150px; so that it is a nice solid RELATIVE rectangular container the exact size of the Google logo, then give the <span> the background image of their logo and position:absolute;top:0; so it slides right into place OVER the text “Google”…
Go ahead, search for something and turn off the images. The word Google is still sitting right there waiting for you.
Try THAT with text-indent:-9999px;… (or z-index:-1; for that matter… :-)
Have a shiny happy morning, everyone,
Atg