Ny CSS-lösning för retinagrafik släpps till Chrome och Safari

webmonkey.com →

The WebKit project recently added experimental support for the proposed CSS level 4 image-set specification. Image-set is designed to offer web developers a way to target high-resolution screens, solving one of the design challenges of Apple’s Retina displays.

Syntaxen för image-set ser ut så här:

[css].klass {
background-image: url(bild.png); /* fallback för gamla webbläsare */
background-image: -webkit-image-set(url(bild.png) 1x, url(bild-hogupplost.png) 2x);
}[/css]

Jag har tidigare (på den här bloggen, bland annat) använt Modernizr för att kontrollera om webbläsaren har stöd för background-size eller inte, och sedan laddat in dubbelt så stora bilder och skalat ner dem till storleken de ska visas i. Det fungerar, men det är långt ifrån lika smidigt som WebKits lösning. Förhoppningsvis följer FireFox, Opera och IE deras exempel så snart som möjligt.