CSS3 Media Query: non è mai stato così semplice progettare un sito per tutti i dispositivi

Pubblicato: febbraio 27, 2011 in CSS, Mobile, WebDesigner

L’immagine che vedete, quella a sinistra per capirci, è il nuovo logo della tecnolgia CSS3, lo riteniamo talmente brutto che, non sappiamo nemmeno noi il perché, ma ci pareva doveroso far cominciare questo articolo da cotanta bruttezza. Il lettore è stato messo alla prova con un incipit ostico, ci faremo perdonare nel proseguo dell’articolo, al momento può cominciare con lo stropicciarsi gli occhi e, se vuole, proseguire con la lettura.

Al di là dello schifo di logo creato per i CSS3, i nuovi fogli di stile sono una tecnologia tutt’altro che brutta, insieme ad HTML5 rappresentano la next big thing e, mentre il mondo aspetta impaziente la nuova release di Internet Explorer i CSS3 hanno cominciato a diffondersi viralmente nel web: dagli ultimi temi di WordPress e Joomla! ai tanti esperimenti che hanno cominciato a farne uso. Noi abbiamo sperimentato queste tecniche in due lavori recenti: http://www.gardenpeticca.it e http://www.alessandroporretti.it (tutt’ora in costruzione). Nell’ultimo lavoro abbiamo esteso un tema di WordPress mediante la tecnica dei child theme ampliandolo con tecniche proprie dei CSS3.

Ma veniamo all’argomento principale: Le media Query, ovvero l’investigatore che tutto sa e tutto redirige:

Le media query dei nuovi CSS3 sono la diretta evoluzione delle media types introdotte in CSS2:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css" />
<link rel="stylesheet" type="text/css" media="print" href="serif.css" />

I Media Type servivano per definire dei fogli di stile partendo dal tipo di media, nell’esempio di codice appena trascritto, vediamo come abbiamo la possibilità di caricare due diversi fogli di stile, la scelta è legata al tipo di media che carica la pagina, nel primo caso uno schermo, nel secondo una stampante. Per quanto riguarda le media query è stato fatto un passo in più nella definizione del tipo di foglio di stile da caricare. Le media query infatti permettono di differenziare lo stile della pagina per le seguente tipologie:

  • Dimensione minima e massima della larghezza dello schermo.
  • Dimensione minima e massima dell’altezza dello schermo.
  • Colore dello schermo.

Vediamo alcuni esempi di codice:

/* Carica il foglio di stile small.css se il dispositivo che sta caricando la pagina è uno schermo con una larghezza massima di 600px */
<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="small.css" />
/* Carica il foglio di stile new.css se il dispositivo che sta caricando la pagina è uno schermo con un'altezza massima di 380px */
<link rel="stylesheet" type="text/css" media="screen and (max-height:600px)" href="new.css" />
/* Carica il foglio di stile example.css se il dispositivo che sta caricando la pagina è uno schermo con un determinato colore di sfondo */
<link rel="stylesheet" media="screen and (color)" href="example.css" />

Analizzando il codice possiamo vedere come potrebbe essere facilmente esteso il funzionamento della media query per caricare il foglio di stile che ci serve per la visualizzazione del nostro sito. Abbiamo pensato di farvi cosa gradita fornendovi una serie di layout standard (mockup 1024 x 768, iPad, iPhone) per facilitarvi la creazione di applicativi utilizzando CSS3 media query.

E’ possibile utilizzare le media query, ovviamente, anche all’interno di un foglio .css per cambiare uno stile soltanto ad un elemento o ad una classe, vediamone il codice:

@media screen and (max-width:600px) {
.test {background-color: #fff}
}

Chiudiamo la rassegna sulle media query con due link fondamentali:

Documentazione ufficiale CSS3 Media Query

Limiti e potenzialità nello sviluppo di CSS3 Media Query

 

Annunci
commenti
  1. […] per iPad e iPhone per la realizzazione grafica di questi progetti. Per leggere la discussione: https://ecceweblog.wordpress.com/2011…i-dispositivi/ L'aricolo nasce dalla nescita di approfondire la crisi del webdesigner nel nuovo mondo del design […]

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...