Pecciola

( Immagine by Bueltge )

Non solo pc. Ormai, alla fine del 2010, possiamo affermare con sicurezza che gli strumenti con cui si naviga il web vanno ben oltre il classico computer o notebook. iPhone, iPad, Netbook son solo alcuni tra i devices più utilizzati per accedere alla rete ed ognuno con le sue caratteristiche, dimensioni e risoluzione.

Per cui, oggi come oggi, dopo aver creato un blog (o dopo aver apportato pesanti modifiche al layout) non è sufficiente testarlo sui vari browser, ma ormai é basilare testarne funzionalità ed altro anche sui vari devices o cellulari.

Ma come gestire, a livello di codice, tutta questa varietà? Via Javascript é possibile, ma questo implicherebbe codice a iosa. Esiste, invece, una particolare proprietà dei css3, media query, che consente di applicare gli stili giusti in relazione alla dimensione dello schermo del device che si connette al web.

Vediamo un esempio pratico in modo da comprendere bene il discorso.

<link type=”text/css” rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=http://pecciola.com/iPhone.css />

<link type=”text/css” rel=”stylesheet” media=”only screen and (min-device-width: 768px) and (max-device-width: 1024px)” href=http://pecciola.com/iPad.css />

Cosa significa il codice qui sopra? Credo sia abbastanza intuitivo, ma meglio chiarire. Qualora vogliate fare in modo che venga caricato il foglio di stile corretto associato alla risoluzione dello schermo specifica, la proprietà media query consente proprio di poter creare due o più css diversi in modo da caricare quello corretto in relazione al valore di max-device-width

Impostando questo valore a 480 px, in automatico si sta dicendo che vogliamo associare iPhone.css proprio alla navigazione da iPhone (massima risoluzione schermo di 480 px) e lo stesso discorso vale per l’Ipad e relativo iPad.css

E’ possibile anche mettere in AND varie clausole, come notate dal codice relativo al css dell’iPad. Ma non é tutto. Infatti se possedete uno smartphone con il famoso chip (accelerometro) che permette al cellulare di sapere come é orientato (orizzontale o verticale) , potrete addirittura applicare stili diversi proprio a seconda dell’orientamento.

<link type=”text/css” rel=”stylesheet” media=”all and (orientation : portrait)” href=http://pecciola.com/portrait.css />

<link type=”text/css” rel=”stylesheet” media=”all and (orientation : landscape)” href=http://pecciola.com/landscape.css />

Anche se queste sono solo alcune delle possibili implicazioni delle media queries, ne avete già intuito le potenzialità e la snellezza del codice da adottare. Infine, molto utilizzate, ad esempio, anche per dotare la stampa delle pagine con stili diversi.