Comments on: CSS Spriting without background-image

By: mawe

mawe — Sun, 21 Dec 2008 00:35:50 +0000

You misspelled her lastname.

By: jaffathecake

jaffathecake — Wed, 17 Dec 2008 12:44:22 +0000

I tried using this technique earlier in the year but had to drop it as it doesn’t play well with filter:alpha(opacity=x). Shame really.

By: bunnyhero

bunnyhero — Sun, 14 Dec 2008 00:27:50 +0000

i used this technique back in 2004 for my monster attack thing, although i didn't use clip, i used overflow: hidden on the parent div. like @p01, i did this to support scaling.

By: sirus

sirus — Fri, 12 Dec 2008 22:49:40 +0000

See to next generation of CSS Sprites based on data:URI DURIS - Data:URI [CSS] Spites . Will soon appear description on english.

By: tajary

tajary — Fri, 12 Dec 2008 21:49:53 +0000

Thanks. It is a good trick.

By: RodrigoCardoso

RodrigoCardoso — Fri, 12 Dec 2008 13:11:37 +0000

ProggerPete — Good solution, maybe a better solution I think :)

By: ProggerPete

ProggerPete — Fri, 12 Dec 2008 11:32:47 +0000

I don’t get why the clip method is so exciting? Once you have to nest elements to get the effect why not just set overflow: hidden on the parent?

The whole business could be done much simpler with

.menu-about { width: 106px; height: 29px; overflow: hidden; }
.menu-about img { margin-left: -293px; }

By: Tr0y

Tr0y — Fri, 12 Dec 2008 09:23:54 +0000

This is a cool alt css technique no doubt.

Just avoid for sites that may be used on a cellphone.

By: epascarello

epascarello — Fri, 12 Dec 2008 00:41:11 +0000

One bad thing about this technique is view the page without CSS styling. [Firefox = View --> Page Style --> No Style]
.
You get big images on the page where ever you use this technique. So if you use one big image for every graphic on your site, I will feel sorry for your users that have special needs.

By: jennyfofenny

jennyfofenny — Thu, 11 Dec 2008 23:25:13 +0000

tlrobinson – the problem is that the image is full size and the clipping property clips it (without realigning the top left of the image), so it will be offset from where you might expect it. If you plan on repositioning it with the absolute property (the top and left properties), then it would be fine, but like I said, the image will be offset without it.

mm1982 – you bring up a good point. However, I think you could come up with good arguments for both sides. In my opinion, whether it’s an image of text or a regular image, it should be in an image tag with corresponding alternate text (unless the image is inconsequential – eg, a background image).

By: mm1982

mm1982 — Thu, 11 Dec 2008 23:07:36 +0000

true jennyfofenny,

but you are displaying an image of text, thus they way I see it should really be text in the markup. I agree an image should be an image, but in that example the image as of text and so should really be text in my opinion

By: tlrobinson

tlrobinson — Thu, 11 Dec 2008 23:03:50 +0000

It seems that if you want to absolutely position the image anyway there’s no need for the outer div, just add the offsets to the position.

Unless I’m missing something.

By: jennyfofenny

jennyfofenny — Thu, 11 Dec 2008 19:48:47 +0000

akuehner: That’s true for the div solution (of course, it may be a good tradeoff based on analysis). However in many cases, you’ll want to use the anchor tag solution (for link functionality), and in that instance, there is no DOM bloat.

By: akuehner

akuehner — Thu, 11 Dec 2008 19:18:31 +0000

I think you shouldn’t underestimate the overhead of the surrounding divs. The DOM should be as small as possible.

By: SashaA

SashaA — Thu, 11 Dec 2008 19:10:53 +0000

Great idea; we’ve had a fair amount of grief on Redfin with printing when it comes to sprites, which we use pretty religiously. Somewhat interestingly, though, img tags and CSS-sprites are not orthogonal. We use img tags with a dreaded blank pixel src and then layer the sprite in as a background. Still not ideal, but the HTML is a little more semantic.

By: p01

p01 — Thu, 11 Dec 2008 18:11:13 +0000

Back in 2000 we used to call that the Canvas-Sprites technique on http://www.Javascript-games.org. This technique has the advantage to allow sprites scaling as I documented in the technical informations of 3D TOMB II

By: jennyfofenny

jennyfofenny — Thu, 11 Dec 2008 18:05:13 +0000

That’s a good point, efattal, I’ll have to think about that one.

By: jennyfofenny

jennyfofenny — Thu, 11 Dec 2008 18:04:00 +0000

Well, the reason I say it’s more semantic is because if you’re displaying an image, you should call it an image. However, the CSS background technique with text-indent may be better for SEO (depending on the image/text and your targeted keywords).

By: efattal

efattal — Thu, 11 Dec 2008 18:00:57 +0000

Very interesting indeed !!

Still, the CSS backgrounds has another advantage: if the CSS isn’t supported, the image will not appear instead of letting the whole background image (that could be quite huge) appear. Try to disable the CSS in your browser and you’ll see what I mean. On devices that don’t manage CSS, this issue is a real problem.

By: mm1982

mm1982 — Thu, 11 Dec 2008 17:55:55 +0000

I think in terms of semantics that solution is LESS semantic that traditional spriting. How is that image more semantic than say
About
and then hiding the text with text-indent: -999em and applying the css background sprite.