Ja – noch sind wir wenige. Selbst mit den iPads und iPhönern zusammen. Aber wir werden mehr. Und noch mögen sich die Webdesigner dieser Welt weigern. Aber auch das werden täglich weniger. Aus Gründen.

Und jetzt gibt es einen weiteren, Webseiten auch jetzt schon an Retina-Displays anzupassen:

CSS background image-sets

Denn sowohl Chrome als auch Safari können schon je nach Display unterschiedliche Bilder anzeigen, so man es ihnen den mitteilt. Dies natürlich nur, mit den jeweils neusten Versionen.

Und zwar direkt im CSS und dies bewusst ohne Media Queries, denn Browser werden ja auch immer schlauer. So können sie dann (demnächst und hoffentlich) selbständig festlegen, welches Bild angezeigt werden soll und kann. Natürlich einmal auf Grund des Displays. Aber bei schlechter und langsamer Verbindung oder auf Wunsch des Nutzers mit beschissenem Datenplan – kann dann natürlich auch auf einem Retina-Display die bis zu vier mal kleinere (An Datenmenge) Version angezeigt werden.

Dies sähe dann zum Beispiel so aus:

#div {

background-image: url(none.png);

background-image: -webkit-image-set(url(image.png) 1x, url(image@2x.png) 2x);

background-image: image-set(url(image.png) 1x, url(image@2x.png) 2x);

}

Es gibt dazu auch schon eine kleine Testseite. Eine ausführliche Erklärung/Beschreibung dazu habe ich aber leider noch nicht gefunden. Wer also einen Link haben sollte – immer nur her damit …

via Webmonkey