Retina fähige Geräte wie das iPhone 4(S), das neue iPad oder das Retina MacBook Pro erfreuen sich immer größerer Beliebtheit und auch einer immer größeren Verbreitung.
Somit ist für den Webentwickler klar das wir uns auch damit auseinander setzen müssen Webseiten für Retina Devices zu optimieren.
Genau diese Zielsetzung hatte ich für mein neuestes Projekt ebenfalls gesetzt.
Die Aufgabenstellung:
- Verwendung von Sprites
- Retina Optimierung
- Möglichst geringer Mehraufwand
Die Möglichkeit dies über ein CSS3 Media Query zu machen war mir hinlänglich bekannt.
Vorteile der Methode
Die Methode ist hinlänglich bekannt und bereits gut dokumentiert.
Nachteile der Methode
Alle Grafiken müssen in einem Media Query erneut definiert werden. Der größte Nachteil dieser Methode ist jedoch das insbesondere bei Sprites alle Koordinaten erneut definiert werden.
Gerade dieser Mehraufwand schreckt leider ab, und verhindert das Seiten für Retina Devices optimiert werden.
Die Lösung
Auf die Lösung bin ich mehr durch Zufall gestoßen.
Die Lösung stammt aus CSS4 und heißt image-set. Im Gegenteil zum media query reicht es eine zusätzliche Zeile Code pro verwendetem Bild zu schreiben.
background-image: url(normal-image.png);
background-image: -webkit-image-set(url(normal-image.png) 1x, url(hires-image.png) 2x);
Der größte Vorteil dieser Methode ist das Koordinaten in Sprites nicht umgerechnet werden müssen und sofort funktionieren. Also kein Aufwendiges umrechnen, kein unnötiger doppelter Code. Dank image-set ist der einzige Mehraufwand das die Sprites in doppelter Auflösung anzufertigen sind. Was kein Problem darstellt wenn man dies bei bei Projektbegin weiß.
Einziger Nachteil dieser Methode, sie wird aktuell nur von Safari 6, mobile Safari ab iOS6 und Chrome ab Version 20 unterstützt.
The post Retina – Media Query oder CSS4 appeared first on Apermo Web-Solutions.