Layout risoluzione-dipendenti: device-width, min-width e max-width
Differentemente chiamati “layout risoluzione-dipendenti”. Vediamo come realizzare un singolo sito utilizzando differenti fogli stile a seconda delle dimensioni disponibili. Per fare ciò utilizzeremo le CSS3 Media Queries (considerate uno standard W3C) in diversi modi.
Il primo metodo utilizza il “device-width”:
<link rel="stylesheet" media="screen and (min-device-width: 820px)" href="820.css" />
Con questo codice applicheremo il foglio stile denominato 800.css solamente se il dispositivo che stiamo utilizzando ha una larghezza di 820px o superiore e, inevitabilmente, offre un supporto per le media queries. E’ bene precisare che quella di cui stiamo parlando è la larghezza del dispositivo e non la larghezza della finestra del browser. Per esempio sull’iPhone questa larghezza coincide con 480px. Il portatile o desktop PC che stai utilizzando molto probabilmente utilizza una larghezza molto maggiore. Ma la larghezza della finestra del browser su cui stai visualizzando questo sito potrebbe essere esattamente la metà o meglio. Questo ci fa capire che usare il “device-width” risulta molto comodo quando si ha a che fare con dispositivi mobile che hanno la larghezza del browser al 100%, ma sicuramente sono inutili per i laptop/desktop browser.
E’ quindi molto più utile ragionare sulla finestra del browser (detta viewport) utilizzando “min-width” e “max-width”:
<link rel='stylesheet' media='screen and (min-width: 601px) and (max-width: 960px)' href='css/medium.css' />
In questo modo possiamo dire al nostro dispositivo di caricare il file medium.css solamente nel caso in cui la larghezza del browser è compresa tra 601px e 960px.
Il supporto dei browser
Le versioni più recenti di Mozilla, Safari, Chrome e Opera, supportano pienamente le media queries. Mozilla suggerisce di inserire subito dopo la dicitura <link la parola “only” in modo da nascondere il foglio stile ai browser più datati che non supportano le media queries. Questo sempre a seconda che tu voglia o non voglia interessarti a queste tipologie di browser.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Internet Explorer (anche la versione 8, occorre utilizzare respond.js) non supporta nativamente le media queries. IE9 sì per fortuna!
Sfortunatamente ancora per molto tempo i problemi di incompatibilità ci faranno dannare, ma iniziare a toccare con mano queste nuove caratteristiche non farà altro che, oltre a farci sperimentare e divertire, apprendere tecniche ed arricchire il nostro bagaglio di esperienza. E questo ci tornerà sempre utile, in qualsiasi circostanza della nostra vita da webdesigner! Buona sperimentazione!
