In passato il navigatore del web poteva incappare in alcuni siti internet che riportassero nel footer l’indicazione “sito ottimizzato per x alla risoluzione y” dove x era il nome di un browser (Internet Explorer, Netscape, poco altro…) e y il valore di una risoluzione grafica del monitor. Questa indicazione era spesso esclusiva e non lasciava spazio a corrette visualizzazioni su piattaforme differenti da quella indicata. E’ passato qualche anno, il problema delle visualizzazioni differenti tra browser si è notevolmente assottigliato, non cessato; la questione delle risoluzioni anche oggi può essere significativa per le varie tipologie di piattaforme in commercio.
Cambia la risoluzione? Cambiano le regole CSS!
Le Media Query CSS3 permettono allo sviluppatore di impostare alcuni controlli che, in base a determinate dimensioni, possano proporre alcune regole CSS differenti da quelle utilizzate di default dal sito. Ad esempio, nel caso il tuo sito debba avere un CSS per display larghi ed uno per dispositivi mobili, non ti serve altro che specificare le dimensioni della risoluzione mobile e gestire l’inclusione di regole CSS differenti.
Consiglio di dare subito un’occhiata ad un semplice esempio: clicca qui.
Nella demo che ho realizzato il contenuto è composto da due blocchi: menu laterale e contenitore centrale. La larghezza totale dei due elementi è 800px. Ho voluto applicare due Media Query per fare in modo che qualora la finestra del browser abbia una larghezza minore di 800px il box laterale non sia più tale ma vada a posizionarsi sopra al blocco centrale (a mo’ di navbar). Per vedere l’esempio in azione prova a ridimensionare il browser.
Max Width
Applichiamo un controllo per risoluzione massima di 800px:
[css]
@media screen and (max-width: 800px) {
.class {
background: red;
}
}
[/css]
Nel caso che si voglia inserire questo controllo sull’inclusione del foglio di stile:
[html]
[/html]
Min Width
Ecco, invece, viceversa un controllo per risoluzione minima di 800px:
[css]
@media screen and (min-width: 800px) {
.class {
background: blue;
}
}
[/css]
Media Query multiple
E’ anche possibile creare combinazioni di media query per indicare la possibilità di avere un range di dimensioni:
[css]
@media screen and (min-width: 800px) and (max-width: 1000px) {
.class {
background: black;
}
}
[/css]
In questo caso la regola CSS verrà applicata per risoluzioni comprese tra 800 e 1000px.
Larghezza del dispositivo
CSS3 ci offre anche la possibilità di specificare Media Query che controllino la larghezza massima del dispositivo (per piattaforme mobili). Attenzione al fatto che la seguente regola CSS ( max-device-width ) controlla la risoluzione dello schermo, mentre invece max-width effettua il controllo sull’area visibile (legata, quindi, anche al ridimensionamento del browser).
[css]
@media screen and (max-device-width: 480px) {
.class {
background: green;
}
}
[/css]
Le regole introdotte in questo breve post, ovviamente, non sono tutte quelle disponibili che invece possiamo conoscere leggendo la recommendation ufficiale del W3C.
