Le Media Queries CSS3 ci permettono di effettuare delle verifiche condizionali sulle dimensioni dello schermo del dispositivo in uso. Combinate con il contenuto generato, esse creano un'interessante tecnica: le immagini generate tramite gli attributi data di HTML5.
Immaginiamo di voler avere due risoluzioni per la stessa immagine, in modo che cambiando la dimensione della finestra del browser la qualità dell'immagine venga preservata. Ecco la nostra soluzione in HTML5:
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="" />
Con le Media Queries andremo a selezionare la risoluzione scelta e tramite il contenuto generato inseriremo l'immagine il cui URL è contenuto nell'attributo data-src-:
@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);
}
}
Si tratta di una soluzione adatta specialmente ai design di tipo responsive.