Chief Alchemist - Business Consulting For The 21st Century Via A Holistic & Intelligent Approach
Share ChiefAlchemist.com.RSS 2.0 feed for ChiefAlchemist.com.Sign up for the mailing list.Follow Chief Alchemist on Twitter.'Like' the Chief Alchemist's page on Facebook.See what Chief Alchemist has been Q&A'ing on Quora.Chief Alchemist bookmarks & highlights on Diigo.com.Follow the Chief Alchemist on Digg.com.Chief Alchemist channel on Last.fm.Chief Alchemist on Flickr.Mark 'Chief Alchemist' Simchock on LinkedIn.Free Initial Consultation.Email Chief Alchemist.Phone Chief Alchemist.
  • Mark ‘Chief Alchemist’ Simchock
  • 'Email me.Email => ca .at. ChiefAlchemist .dot. com
  • 'Phone me.Alchemy United => 732 997-0028
  •  
  • Free initial consultation.Free => Initial Consultation
  • Please be sure to subscribe to your communication channels of choice.
  • Click To Close => The small green (consultation), red (email) or blue (phone) icons in the top upper right.
CURRENT “TOP 10” TOPICS TOOLS CLIENTS & PROJECTS SOURCES SEARCH HIDE
Business Consulting For The 21st Century Via A Holistic & Intelligent Approach

Responsive CSS Sprites – Proof of concept v0.1.0

FYI => Like anyone who is internet-minded, I’ve been trying to increase my mobile IQ. Long story short, here’s a simple example of what is best described as responsive CSS sprites.

responsive_css_sprites.html

responsive-css-sprites-test-image.png

It’s so raw and simple I’m not even gonna bother with a zip. Just put the .html and the image (.png) in the same folder.

=> A couple things you should know:

—Unlike traditional CSS sprites, this does not use a background image. Therefore, it’s able to resize images on the fly (without Javascript, etc.)

—Since the height can’t be fixed (i.e., it needs to resize), the sprite image works left to right instead of up and down.

What do you think? How can it be improved? It works, right? What did I miss?

  1. Harry Gee

    Was looking for a cross browser (inc IE7, 8) solution to flexible background images and came across this. Works a charm! The hover pseudo selector doesn’t work natively in IE7 but I can live with that. Thanks for sharing!

  2. Harry Gee

    Correction on last comment. IE7 does support the ‘:hover’ pseudo.
    I am now using this technique as i have tried and tested in all browsers greater than and equal to IE7. (I no longer support IE6 with market share in UK now below 1%).

    Using background CSS images can not be used in my case as I have a responsive layout with image widths and positions based on total width percentages. IE7 does not support dynamic background sizing in this way so this solution gets round that problem nicely.

  3. Chief Alchemist

    Thanks for the follow up Harry. Good to hear it’s working out for you. If you have a site where this technique is being used, please feel free to share that link.

  4. In what was is it responsive?

    The same size images get served at all resolutions…

  5. Chief Alchemist

    If the image(s) was via the background property – as is typical with a sprite – it would not resize. I know…duh.

    If you use the technique described you can take advantage of sprite-esque quantities (i.e., less http requests) AND the image(s) will resize as the browser window resizes (unlike a standard / typical sprite).

    While I suppose that’s not responsive in the traditional media query sense, it does do sprites images that resize on the fly. What would you suggest I call it then?

  6. Right, I get where you are now…

    It’s responsive in that the background fits correctly within the container, so if it was a logo for example it would resize ok.

    I guess what you could do is put the image through src.sencha.io so that it gets resized to be smaller (KB and pixel wise) and use media queries to pick the right size.

  7. Chief Alchemist

    Yeah, something like that ;)

    Like the title says, it’s simply a proof of concept. Not a beta or even an alpha. More like, “Hey ma, look what I found.”

    The idea hit me one day, I threw it together and put it out there. Might someone else grab it, shake it and refactor as they see fit? Sure, I hope that happens. And if they do, I would expect they come back and share those ideas.

    Thanks again for taking the time to comment.

  8. math

    Oh yeaa!

    I had many issues with background-size, responsive and sprite for ie7 and 8 but this method is very good and fixed my problem :).

    Thank you a lot!

    Math

  9. Chief Alchemist

    You’re welcome. Glad to be hear it helped. Thx for taking the time to comment.

  10. Tom

    Hi there,
    great example.
    And I must add: This is definitely a responsive system. You can’t call only code responsive which has media queries that adjust images for only some set device width or heights. No, true responsiveness is resizable and on-the fly fluid.

    I played around with your example a bit, sliced the google logo in 3 pieces. Though I have the following issue: between the sprites is space left, though there is no margin nor padding set.

    http://jsfiddle.net/UTfCJ/

    Let me know what you think what is causing this, otherwise, well done.

  11. Chief Alchemist

    Thanks Tom.

    I looked at your jsfiddle but it didn’t have the image.

    None the less, I can think of no reason why you would get spaces. The technique is just a simple manipulation of margins and image width. Sorry, I’m not of greater help at the moment.

  12. Tom

    Mh .. strange .. what browser do you use ? I have Safari (webkit)

  13. Chief Alchemist

    I’m seeing the images now. I look in FF and Chrome (PC for both) and I’m not sure what the problem is. The proof of concept doesn’t do that, correct? Perhaps it’s something exclusive to jsfiddle then? On rare occasion I’ve run into problems where one of the browser addons has helped produce unexpected results.

  14. Patrick

    Thanks for this solution. I’ve been trying to find a decent way of using responsive css sprites. I suppose the only drawback to this is you need to have your spritesheet completely vertical and the percentage calculations could get a bit complicated if you have different sized images in the sprite. Still, works great for me so far! (I used it with an SVG image in the img tag).

  15. Chief Alchemist

    Thanks Patrick.

    I agree, it’s not perfect. I shared it hoping that others might refine it and/or share tips on using the idea.

  16. Mark,

    Nicely done! Couple questions.

    First, any particular reason for the white space in your sprite or could it just as easily go the other way?

    Two, why 300% on the sprite width? Is that because it’s relative to the parent element anchor tag set at 30%?

    Three, I’m fascinated that image #two has a hover with a left margin of 2% and #three, using the same hover image, has a left margin of 4%. Is it necessary that they’re different even though they’re referencing the same image? And if so, why, you think?

    Really appreciate your creativity in finding this solution. Now I just have to go back and re-do all my social icons using this structure. Another step in the evolution of responsive design. ;-)

  17. Chief Alchemist

    Hi Dion

    Thanks for taking the time to look / comment. I would like to restate, this was a proof of concept. In other words, I’m typically not a 100% pure front-end guy. On the other hand, I like to learn and was experimenting with some ideas (read: page load speed as it relates to sprites and responsive layouts) and bumped this approach that quite frankly I didn’t see anywhere else. So I shared it “as is”.

    With that said:

    1) I’m going to say it can go the other way. In retrospect I think (but am not sure) there might even be a way to do this with a traditional sprite image. That is, rows and columns and not just rows. I haven’t bothered to try that. One long or wide image is the same difference IMHO. And even if you need a couple sprites it beats having a single image for each icon, etc.

    2) Yes, as I recall, there’s more or less a ratio. Perhaps it’s time for me to do a full / proper post explaining my thought process on this?

    3) I don’t remember why I needed that left-margin. I honestly forget, did I put borders on the images? That might have been the hack-ish work around?

    I hope this helps. If you bump into any supplemental ideas to this proof of concept please come back and least another comment. Also, if you can share a link to this page on Twitter, Facebook, etc. that would be appreciated.

  18. Sandro

    Hi man, can u help me to use this for a vertical image instead an horizontal? i want to use it for animate a seed growing..

  19. Chief Alchemist

    Sure Sandro. Ping my page on Facebook and we’ll take it from there.

Required.
Will not be published. Required.
Please include http://