--- layout: default ---

Towards a Retina Web: Live Examples

HTML/CSS sizing

Using HTML

<img src="pebbles@2x.png" width="200" height="300" />

Using Javascript

<img src="pebbles@2x.png" />

$(window).load(function() {
  var images = $('img');
  images.each(function(i) {
    images.eq(i).width(images.eq(i).width() / 2);
  });
});

Using CSS

<div class="css-sizing" src="pebbles@2x.png"></div>
div.css-sizing {
  background-image: url(pebbles@2x.png);
  background-size: 200px 300px;
  height: 300px;
  width:200px;
}

Using contain:

<div class="css-sizing-contain" src="pebbles@2x.png"></div>
div.css-sizing {
  background-image: url(pebbles@2x.png);
  background-size: contain;
  height: 300px;
  width:200px;
}

Using pseudo-elements:

<div class="pseudo-css-sizing"></div>
 
div.pseudo-css-sizing:before {
  background-image: url(pebbles@2x.png);
  background-size: 200px 300px;
  content:'';
  display: block;
  height: 300px;
  width: 200px;
}

Querying pixel density

Using CSS media queries

<div class="icon"></div>
div.icon {
  background-image: url(pebbles.png);
  background-size: 200px 300px;
  height: 300px;
  width:200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (-moz-min-device-pixel-ratio: 1.5), 
only screen and (-o-min-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {
  div.icon {
    background-image: url(pebbles@2x.png);
  }
}

Using Javascript

<img class="querying-javascript" src="pebbles.png" />

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img.querying-javascript');

    lowresImages.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

Scalable vector graphics

Using HTML

<img src="leaf.svg" width="100" height="100" />

Using CSS

As a background image: 
<div class="svg-background"></div>

div.svg-background {
  background-image: url(leaf.svg);
  background-size: 100px 100px;
  height: 100px;
  width: 100px;
}
As a content image: 
<div class="svg-content"></div>

div.svg-content:before {
  content: url(leaf.svg);
}
With PNG fallback: 
<img src="leaf.svg" data-png-fallback="leaf.png" />

$(document).ready(function(){
  if(!Modernizr.svg) {
    var images = $('img[data-png-fallback]');
    images.each(function(i) {
      $(this).attr('src', $(this).data('png-fallback'));
    });
  }
});

Icon Fonts

Importing the font assets: 
 
@font-face {
  font-family: 'Icon Font';
  src: url("/font/icon-font.eot");
  src: url("/font/icon-font.eot?#iefix") format('embedded-opentype'),
       url("/font/icon-font.woff") format('woff'),
       url("/font/icon-font.ttf") format('truetype'),
       url("/font/icon-font.svg#icon-font") format('svg');
  font-weight: normal;
  font-style: normal;
}

Using HTML

<span class="glyph">l</span>
 
span.glyph {
  font-family: 'Icon Font';
  font-size: 100px;
}
l

Using CSS content:

<span class="glyph-leaf"></span>
 
[class^="glyph-"]:before {
  font-family: 'Icon Font';
  font-size: 100px;
}

span.glyph-leaf:before {
  content: 'l';
}