A somewhat obvious question for the previous article on creating CSS3 sprites is “does any of this change in HTML5?” The answer is yes: potentially, it becomes simpler.

If we chose to use a sprite panel in HTML5 we would add the <nav> element to indicate to the browser that this is major navigation section. You could, in theory, then remove the <ul> structure from around the links, and just leave it as a series of tags:

<nav class="sprites"
	<a href="#">
		<img src="sprite-panel.png" alt="RSS">
	</a>
	<a href="#">
		<img src="sprite-panel.png" alt="About">
	</a>
	<a href="#">
		<img src="sprite-panel.png" alt="Book Mode">
	</a>
</nav>

This means that our CSS would also become somewhat simpler:

nav.sprites { 
	height: 27px; 
}
nav.sprites img { 
	position: absolute; 
	opacity: 0.4; 
	width: 150px; 
	height: 76px; 
	transition: all 0.5s linear; 
}
nav.sprites a:hover img { 
	opacity: 1;
}
img[alt="RSS"] { 
	clip: rect(54px,21px,76px,0px); 
}
img[alt="About"] { 
	clip: rect(54px,47px,76px,25px); 
}
img[alt="Book Mode"] { 
	clip: rect(54px,75px,76px,48px);
}

Personally I remain somewhat on the fence about removing the list structure in <nav> elements. I would never remove the <ul> and <li> elements if the navigation referred to a series of pages that were related to each other, but for something like the example shown, where we are referring to a collection of largely unrelated links, I can see the rationale in doing so.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.