#105: Using SpriteCow

In which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exact position values needed to use the individual images. Pseudo elements are also used to help maintain accessibility.

This totally untested because it’s early and I’m tired but I’m wondering if you can reset the text-indent on the pseudo element like th:before { text-indent: 0; } to prevent it from inheriting the parent indent value.

If you make the sprite vertical instead of horizontal you can get rid of the pseudo elements and extra span markup.

Also, if you give the <th> tags with browser icons an extra class like this, <th class="browser-icon chrome">, you can use this new class in your css rule to designate the background image instead of listing all of them.

If someone arrives at this site and doesn’t recognize one of those browser logos then I’m not entirely sure they know something more complex (such as CSS). At least I’d hope anyone proficient with CSS knows these logos.

I don’t get the idea of trying to position the content out of frame when trying to hide it. It just _so_ hackish and just feels wrong, not to mention that it might not always work when dealing with huge screens, animations etc.

Great tut, thanks Chris – I’m definitely going to make use of Sprite Cow on my next project.

I think I’ve found a fix to the text-indent problem. While watching the video I had a suspicion the problem was “inline-block” – It should be ‘block’. In practice, however, that didn’t solve it until I also changed :before to :after. So between display: block and :after, it works nicely =) – I’m assuming it’s some sort of th:before bug, but I’m not sure.

Hey Chris
Watched this today and thanks for the great tips.
Got myself a good laugh at 19min in. “- Why am i talking like this….” Thanks for the laugh and your positive way!
Have a great day
/Torbjörn from Sweden

Appreciate the tutorial and the link. A question: When using sprites that handle changes (unselected, hover, etc), I often have sprites of different sizes. Example: ‘selected’ sprite has a fancy underline as part of the sprite (making a wider sprite), where ‘unselected’ does not have the underline.

Trying this type of sprite out in Spritecow, if the sprites are transparent pngs, it seems to me that I still have to figure out how to match the positions of the ‘selected’ and ‘unselected’ sprite. (I had the thought of using Spritecow on sprites having backgound dimensions of the desired size, then on the website using the same sprite but minus any background. This would allow me to get position from Spritecow, with sprites properly lined up.)

That’s the gist of it. It’s so nice and clean, and I use it all the time. No pseudo-elements required, so cross-browser support is stellar. The key elements are:
– setting either the width or height of the block to 0
– setting the padding to be the height or width of the sprite
– hiding the text contents by setting overflow: hidden

This technique has been around forever, and I’m surprised it wasn’t your first choice to hide the text. Am I missing something here?

Ooo.. Hadn’t thought of that. Will give it a whirl next time. I to think the text-indent is a bit of an oddun.
I imagine sites on massive new internet TV’s or when zoomed out with these random bit of utility text of to the far left when the px is too low (hence using em usually)

I disagree. I mean, yes, to show only what was called out in the title, the video could have been much shorter, but watching the problem solving process another professional uses is really helpful. I think that getting to compare someone else’s workflow to your own is always a great opportunity.

Cool video, nice to see other developers go “why is it not working, it should be working???”
Would “.browser-support-table > thead:first-child tr th:before {}” be a cleaner selector for your first row of pseudo declarations?

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.