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
Articoli correlati
Comments (0)