CSS Spriting without background-image
Written by on December 11th, 2008 in Uncategorized.
Jennifer Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the same effect as background image clipping. The reason for the new technique is due to the issues with the current approach:
- You can’t attach alternate text to divs for accessibility purposes
- CSS Spriting and the IE6 PNG fix are incompatible
- The images will not print out on printouts unless the client option to print background images is selected (this is bad for logos and menus, etc)
- For images in pages (that are not actually background images), it seems semantically bad to hide the image in CSS.
And example code shows how it works:
CSS:
-
-
.menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }
-
.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }
-
HTML:
Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/481826768/css-spriting-without-background-image