Siamo quasi alla conclusione del nostro viaggio nel mondo del responsive web design, e vediamo quindi una tappa fondamentale. Abbiamo visto come gestire la fluidità mantenendo una struttura visivamente piacevole, ma cosa succede quando il dispositivo di lettura non è abbastanza grande da consentire a quella struttura di esistere? Succede che la struttura deve cambiare. Vi presento le media queries.

Avete sognato per tanto tempo di poter creare un foglio di stile diverso per diverse risoluzioni? Sognavate le media queries.

Cosa fanno:

Controllano le proprietà specificate e, se e solo se soddisfatte, applicano lo stile css richiesto.

Sintassi:

CSS incorporati o collegati

@media tipo_media and (proprieta_richiesta) [and (proprietà_richiesta2)] [...] {

/* stile applicato se le proprietà sono soddisfatte */

}

<link rel="stylesheet" media="tipo_media and (proprietà_richiesta) [and (proprietà_richiesta2)] [...]" href="css.css" />

Esempi

Vogliamo che per dispositivi con risoluzione in larghezza minore di 800px, scompaia il contenitore #right_container e che invece il #left_container cambi larghezza espandendosi totalmente.

CSS incorporati o collegati

@media screen and (max-width:800px) {

#right_container {

display:none;

}

#left_container {

width:100%;

}

}

<link rel="stylesheet" media="screen and (max-width:800px)" href="css.css" />

Notiamo come parlando di "risoluzione minore a..." si applichi la proprieta max-width. Questo sistema può confondere, ma si deve imparare a pensarlo in questi termini: "da 0px fino a 800px utilizzo questo stile". E' la stessa affermazione.

Il tipo di media screen è quello che utilizzeremo quasi sempre, al momento, perchè ci consente di lavorare sulla risoluzione del dispositivo. Un altro tipo di media molto conosciuto, che però non necessita di proprietà specifiche, è il print. Ossia lo stile css che viene applicato quando l'utente richiede la stampa della pagina.

L'utilizzo di queste queries è talmente intuitivo e banale che non richiede ultieriori approfondimenti. Per vederne un esempio pratico in azione, potete sempre provare a ridimensionare questa finestra.

Noterete che ci sono 3 diversi stadi di cambiamento, associati infatti a 3 media queries con proprietà di max-width differenti.

Che si voglia nascondere una colonna di troppo, rendere un menù verticale in orizzontale, e viceversa, con i css3 e le media queries possiamo gestire ogni cosa relativamente allo spazio disponibile.

Questa sì che è accessibilità!