disign.it | Media Queries CSS3 | a digital sign for a best design!

Css tips & tricks

Media Queries CSS3

Il diffondersi sempre più rapido di dispositivi mobili come strumenti di accesso a Internet, e non pensiamo solo a iPhone e iPad, il mondo Android fa passi da gigante, l'orizzonte dei tablet promette continue evoluzioni e nuovi attori, pone sempre di più i webdesigner nella condizione di dover progettare layout che tengan conto delle notevolissime diversità di visualizzazione.

Il W3C nella definzione dei CSS3 ha creato le media query, migliorando notevolmente quello che era una semplice applicazione di stili fondamentalmente determinato dal genere del media, screen, print etc.
Oggi una media query non ci permette solo di avere come target alcune classi di dispositivi, ma anche di ispezionare le caratteristiche fisiche del dispositivo che sta visualizzando il nostro sito.

Ad esempio, possiamo incorporare uno specifico foglio stile identificando esattamente dimensione e risoluzione del dispositivo

link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
href="480.css"

oppure all'interno del foglio stile definire regole condizionate

@media screen and (max-device-width: 480px) {
.foto {
float: none;
}
}

Insomma, con un po di pazienza oggi è davvero più facile operare su layout che tengan conto delle caratteristiche del dispositivo.

Ma come sappiamo non dobbiamo mai dimenticarci della retrocompatibilità, ovvero di quella grande quota di fruitori del web che ancora utilizzano browser obsoleti o browser che ancora non aderiscono completamente agli standard CSS3 (pensate i dispositivi mobili che hanno sitema operativo Windows mobile..).
Scandagliando la rete sono numerose le soluzioni offerte, ne segnalo due relativamente semplici che naturalmente utilizzano javascript!

Il primo, adapt.js permette il reinderizzamneto su css specifici sulla base di range di risoluzioni, permettendo anche di utilizzare un detect del resize della finestra.
Qui trovate il tutorial sull'utilizzo (un articolo che è anche un buono spunto di riflessione sui diversi approcci al problema). Lo script con relative demo lo pote scaricare qui.

Seconda alternativa che invece permette alle Media Queries CSS3 di operare su tutti i browser (libreria JavaScript) è mediaqueries.js, scaricabile da qui.

Non resta che provare, testare, sperimentare e come sempre imparare!