Telefono: +39 392 33 73 731

CSS3 media query

L'idea di identificare il tipo di media e utilizzare determinate regole css era stata introdotta già dal CSS2. I Media Type però non erano mai stati implementati nei browser in modo accettabile, ad eccezione solo del tipo "print". In particolare i problemi erano con il tipo "handheld" che nemmeno oggi, con CSS3, è a buon punto. Infatti Android e IOS lo ignorano, la loro giustificazione è che gli utenti perderebbero la visualizzazione dei contenuti che usano semplicemente il media screen, e sono la maggioranza dei siti esistenti. Così per seguire la filosofia "a tutto web", i più moderni browser mobile semplicemente ignorano handheld, o si comportano in modi imprevedibili:

  • leggono solo gli stili handheld.
  • leggono solo gli stili handheld se ne esistono, altrimenti di default leggono screen.
  • leggono sia handheld che screen e li mescolano.
  • leggono solo screen.

Opera Mini non ignora handeld, ed Il trucco per fare in modo che Windows Mobile lo riconosca è mettere in maiuscolo la lettera "S" di screen nel value del tag (media="Screen"). State già imprecando vero?

Niente paura! In CSS3 ci sono le Media Queries, seguono la stessa idea, ma la superano ed estendono. Invece di guardare al tipo di device guardano alla capacità del device, e potete fare vari controlli:

  • larghezza e altezza della finestra
  • larghezza e altezza dello screen
  • orientamento, cioè se landscape o portrait
  • risoluzione video

Ovviamente serve che il browser supporti le media query.

 

Metodi di inclusione e linee guida

Esistono due tipi di inclusione, una è inserendo le query direttamente nel file css della pagina, come in questo esempio.

/* Default Layout: desktop monitor 990 and more. */
.wrapper {
    width: 990px;
}
 
/* Tablet Layout: 768px */
@media only screen and (min-width: 750px) and (max-width: 989px) { 
.wrapper  {
        width: 720px;  
    }
}
 
/*  Mobile Layout: 320px   */
@media only screen and (max-width: 749px) {
.wrapper {
        width: 250px;
    }  
}
 
/*  Wide Mobile Layout: 480px  */
@media only screen and (min-width: 480px) and (max-width: 749px) { 
.wrapper {
        width: 440px;
    }  
}

L'altro modo è usando le query nel tag link nella head della pagina come nel seguente esempio.

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

Esistono online molti framework css che tentano di sommare varie regole CSS pronte all'uso. Però secondo me queste cose si devono usare con cautela, nel senso che tramite questi framework poi si sporca molto il codice html della pagina, lo chiamano "css semantico" perché indicano all'elemento una serie di cose che poi grazie al framework si eseguono, io sono contrario a questa tendenza, perché si torna indietro a quando in html non si divideva bene layout da contenuto.

Secondo me bisogna ridurre all'essenziale sia il codice html, che le regole css. Possiamo fare come sempre uno stile comune contenente tutte le regole di reset e di layout per i monitor desktop standard, poi ne facciamo un altro che contiene tutte le regole che sovrascrivono, così siamo liberi di fare una o più query, per esempio con 3 diverse media query possiamo impostare tre layout aggiuntivi: uno della larghezza di 750px per netbook e tablet, un layout da 480px per smartphone in posizione landscape e uno largo 320px sempre per smartphone ma in modalità portrait.
Oppure possiamo creare due o più stili che verranno poi caricati con il secondo metodo di inclusione descritto.
I browser meno recenti, incapaci di capire le query, interpreteranno solo gli stili del layout di default.

Proprietà delle media query

Nella seguente tabella elenco le proprietà che possono essere controllante nella query e con che valori.

 

CaratteristicaValuePrefisso min/maxDescrizione

width

Length si Larghezza della finestra

height

Length si Altezza nella finestra

device-width

Length si Larghezza del display

device-height

Length si Altezza del display

orientation

portrait o landscape no Orientamento nel device

aspect-ratio

Ratio (w/h) si Rapporto larghezza e altezza separato da slash (e.g., 16/9 oppure 1280/1024), riferito alla finestra

device-aspect-ratio

Ratio (w/h) si Rapporto larghezza e altezza ma riferito all'intero display del device

color

Integer si Numero di bit per componente colore (se il device non è a colori, il valore è 0)

color-index

Integer si Numero di colori nella color lookup table del device

monochrome

Integer si Numero di bit per pixel nel frame buffer monocromatico (se non è monocromatico, il valore è 0)

resolution

Resolution si Densità in pixel del device, è un numero seguito da dpi (dots per inch) o dpcm (dots per centimeter)

scan

progressive o interlace no Processo di scanning usato dalle TV

grid

0 o 1 no Se a 1, il device è basato su grid, come un terminale o un telefono che solo un font prefissato (tutti gli altri devices sono 0)

 

I valori width ed height, sono quelli più usati nelle query, e nella forma con min- e max- per creare dei range. Si riferiscono alle dimensioni della finestra, che corrisponde al viewport (in pratica la finestra del browser).

Attualmente le media queries sono supportate da quasi tutti i browser, per circa l'83% degli utenti, a partire da queste versioni:

  • Internet Explorer 9.0
  • Firefox 3.5
  • Chrome 4.0
  • Safari 3.1 parziale, ok da 4.0
  • Opera 9.5
  • IOS Safari 3.2
  • Opera Mini 5.0
  • Android Browser 2.1
  • Blackberry Browser 7.0
  • Opera Mobile 10.0
  • Chrome for Android 18
  • Firefox for Android 15

Tabella completa qui: http://caniuse.com/css-mediaqueries

 

Cosa va cambiato riducendo il layout

Abbiamo capito come fare le Media Query e come fare dei range basati sulla grandezza della finestra. Ora pensiamo a cosa dobbiamo cambiare nel layout scalando la grandezza fino ad arrivare alla versione mobile.

  • Ridurre sia le dimensioni che le spaziature, cioè margin e padding, dei vari elementi.
  • Rimuovere gli stati hover poiché le versioni tablet e mobile usano il touch screen.
  • Aggiustare le colonne, che si ridurranno togliendo per esempio dei float, fino ad arrivare a singola colonna nel mobile.
  • Fare in modo che le immagini non siano troppo grandi nel mobile, che al massimo occupino la larghezza della finestra.
  • Aggiustare la grandezza anche dei font, quando potrebbero essere troppo grandi nei mobile o troppo piccoli nelle risoluzioni alte.
  • Rimuovere le proprietà box-shadow. Nel mobile riducono le performance della pagina.
  • Rimuovere i cambi di opacity. Le trasparenze con alpha riducono le performance nel mobile.
  • Usare il CSS flex box model box-ordinal-group per cambiare l'ordine degli elementi nella pagina. Questo sistema funziona senza bisogno di cambiare il markup html ma purtroppo in IE9 non è ancora supportato.


Queste cose le approfondisco in altri articoli del mio blog, possiamo ottimizzare la pagina in modo più o meno scrupoloso, creare siti responsive che si adattano è uno sforzo sia tecnico che di creatività.

 

Domenica 11 Novembre 2012
(0 commenti)
CSS

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento