Responsive Images with CSS3
Nicolas Gallagher diskutiert eine weiter Möglichkeit Responsive Images zu realisieren. Er setzt auf CSS3 statt auf JavaScript.
This method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function. (…) The source image is “mobile optimised” and the urls of larger size images are included using HTML data-* attributes.
Das HTML sieht dann so aus:
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
Und das CSS so:
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
Sehr spannend auch wenn im Artikel noch auf einige Probleme hingewiesen wird.