Avec l’émergence du retina, il devient vite fastidieux d’écrire son code css en dupliqué pour gérer les cas retina ou non.

Voici un petit helper en LessCss, qui va vous simplifier la tache.

  • Pour les écran normaux, l’image avec l’url passée sera utilisée en image de fond (background-image).
  • Pour les écran en rétina, le fichier alternatif dont le nom finira par @2x sera utilisé.

La condition de détection de hires peut évidemment s’appliquer à d’autres cas, bien que l’image de fond reste la plus courant.