bowdenweb

Applying clip on img‘s via media-queries

I love css Sprites so I was quite dismayed to read about problems with iPhone 4 Retina Display (High dpi) and problems with accessibility, both of which will stop a standardista dead in their tracks. Retina Display is a user-agent feature and as such should at least be used to progressively enhance the ux, not degrade it! User-Agent Features are seen as bothersome and/or afterthoughts in most circles, however they are vital for creating unique browsing experiences for each applicable unique user-agent setting. The accessibility issue is a no-brainer, it must be resolved; Accessibility should be a part of your work-flows and not an afterthought. One thing about the bad accessibility in particular stood out to me:

In conclusion, the only method that is truly accessible and supported by nearly all browsers is to use inline images instead of background CSS images to display non-decorative content. If sprite maps are required then consider using inline positioned sprite maps.

css Background Images and Accessibility

Responsive Design via css media-queries is a principle of progressive enhancement that is a staple of Front-End Engineering and for the most part solves all cross-browser and cross-platform issues. By applying rwd via media-queries, it occured to me that you could use the sprites still, but apply it to inline img‘s via clip property. Then to alter the clip property style settings via media-queries, swapping bigger images for bigger resolutions. It works like a charm, although I’m not sure how accessible they are. You can view the demo here

Or you can jsfiddle with it own your own here.

The style in the demo is shown below:

Style

.abspositioner{position:relative}
.box h2{margin:0}
.box{margin:10px auto; outline:1px solid #000; width:300px}
.spriteclipx{position:absolute; top:0; left:0}
/** width:256px; height:256px; .spriteclipx{clip:rect(0, 256px, 256px, 0)} **/
/** width:128px; height:128px; .spriteclipx{clip:rect(266px, 128px, 394px, 0); top:-266px} **/
/** width:64px; height:64px; .spriteclipx{clip:rect(404px, 192px, 468px, 0); top:-404px} **/
/** width:32px; height:32px; .spriteclipx{clip:rect(478px, 224px, 510px, 0); top:-478px} **/
/** width:24px; height:24px; .spriteclipx{clip:rect(520px, 248px, 544px, 0); top:-520px} **/
/** width:16px; height:16px; .spriteclipx{clip:rect(554px, 256px, 570px, 0); top:-554px} **/
@media only screen  {
  .spriteclipx{clip:rect(0, 256px, 256px, 0)}
}
/** target iPhone portrait display **/
@media screen and (max-width: 320px) {
  .spriteclipx{clip:rect(404px, 192px, 468px, 0); top:-404px}
}

/** target iPhone / iPod Touch with Retina Display **/
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 
  .spriteclipx{clip:rect(266px, 128px, 394px, 0); top:-266px}
}

/** target iPad portrait and landscape **/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .spriteclipx{clip:rect(0, 256px, 256px, 0)}
}