Code examples for iIR Redux

iir-retina.css

@media only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-ms-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2)
{
  #social-links img {
    background: top left no-repeat;
    background-size: 25px 25px;
    display: inline-block;
    height: 0;
    width: 25px;
    padding-top: 25px;
    overflow: hidden;
  }
  #social-links img[src*=fb] {
    background-image: url(fb-2x.png);
  }
  #social-links img[src*=twitter] {
    background-image: url(twitter-2x.png);
  }
}

iir.css

#social-links img {
  background: center center no-repeat;
  display: inline-block;
  height: 0;
  width: 25px;
  padding-top: 25px;
  overflow: hidden;
}
#social-links img[src*=fb] {
  background-image: url(fb-screen.png);
}
#social-links img[src*=twitter] {
  background-image: url(twitter-screen.png);
}

snippet.html

<p id="social-links">
  <a href="…"><img src="fb-print.png" alt="Like us on Facebook"/></a>
  <a href="…"><img src="twitter-print.png" alt="Follow us on Twitter"/></a>
</p>