Progressive enhancement technique for HTML5, retina detection to optimise your CSS. Usage in CSS: .no-retina { /* styles */ } .retina { /* styles */ }

gistfile1.txt

// Retina Device, add 'retina' to HTML tag
if (window.devicePixelRatio >= 2) {
  document.getElementsByTagName('html')[0].className += ' retina';
}
// No-retina Device, add 'no-retina' to HTML tag
else {
  document.getElementsByTagName('html')[0].className += ' no-retina';
}

It would be faster if you had "no-retina" on the html tag by default then did this:

if (window.devicePixelRatio >= 2) {
document.documentElement.className = document.documentElement.className.replace(/\bno-retina\b/g,"")+" retina ";
}

• No getElementsBy look up
• No string concat
• Regex ftw

I use this pattern for js detection/progressive enhancement

You could even just over-ride it if it's the only (or first) class addition.

if (window.devicePixelRatio >= 2) {
    document.documentElement.className = ' retina';
}