Salta al contenuto ID

CSS3 media query

L’idea di identificare il tipo di dispositivo dell’utente e utilizzare determinate regole css era stata introdotta già da 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 tutti ignoravano e i siti venivano fatti semplicemente con il tipo “screen“. Meglio non mischiare le cose, i browser potrebbero comportarsi in modi imprevedibili:

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

In CSS3 vengono a salvarci 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

Metodi di inclusione e linee guida

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

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

L’altro modo è usando le query nel tag link in 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="screen and (max-width: 800px)" href="/css/mobile.css" />

Esistono online molti framework css che sfruttano le Media Query (il più famoso è Bootstrap), e hanno l’obiettivo di creare un sistema di regole in grado di posizionare e dimensionare degli elementi con precisione. Nulla ci vieta di fare i nostri ritocchi in override sulle impostazioni dei framework, o aggiungere Media Query nostre agli stili CSS.

Proprietà delle media query

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

Caratteristica Value Prefisso min/max Descrizione
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 1, il device è basato su grid, come un terminale o un telefono che ha un solo 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, conosciuta come viewport.

Attualmente le media queries sono supportate da tutti i browser, 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

Questo articolo ha 0 commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Torna su