IMG & Sprites – using clip with negative margins?

[tomasz86]

I’d just like to ask whether it’s OK to use clip like this for images. The goal is to be correct semantically (instead of using something like a span with a background-image) and to be still able to use sprites. Another advantage of this method is that it works correctly basically in ALL web browsers.

The only problem I can think of is that the whole sprite is displayed with CSS disabled which is no good. To prevent this it’s possible to set the image width to 0 in HTML and then overwrite it with “width: auto” through CSS, but then no image is displayed at all with CSS disabled…

http://codepen.io/tomasz86/pen/DEhrI

Any ideas?

[Paulie_D]

I don’t get what you are trying to do.

Sprites are supposed to be bg images aren’t they…I thought that was the point.

At the moment you’re making the browser download the image and then not showing it.

Perhaps I’m missing something.

Oh…and when would CSS ever be disabled?

[Paulie_D]

I want to show only part of the sprite image through the IMG tag.

But why do it that way?

Every time you want to show part of the image you would have to add it to your HTML but use a different clip and margin property?

That seems incredibly repetitive and non-semantic.

If CSS was disabled or not available I think you would have bigger problems that this. I think you’re trying to re-invent something that doesn’t need fixing.

My 2c

[Paulie_D]

You can use just one css sprite image for everything instead of several single ones which should have positive influence on page loading speed (just one HTTP request).

Sprites are used as bg images and then moved using the bg position property so perhaps it’s 50/50.

The main point is to be able to use CSS sprites for all images to reduce HTTP requests.

I don’t get it…this would make no difference whether you do it your way or using a bg image sprite.

If an image is content then by all means use the image tag…if it’s not then a bg image (sprite or not) is the way to go.

[Author]

Posts