Negli ultimi tempi abbiamo assistito alla nascita di svariati dispositivi per l'accesso al web con risoluzioni molto diverse tra loro: smartphone, Iphone, dispositivi Nintendo, Hdtv ecc.
Avere un completo controllo sul layout di un sito è per il web designer un compito sempre più arduo, ma anche in questo caso i CSS3 corrono in nostro aiuto con la proprietà media queries.

Già nei CSS2 è presente il supporto media per associare diversi fogli di stile a seconda del tipo di media usato, attraverso il tag <link> oppure definire regole CSS all'interno del foglio di stile attraverso la sintassi @media:

<link rel="stylesheet" type="text/css" media="screen" href="per-video.css"><br />    @media screen { * { font-family: sans-serif } }

CSS3 introduce i cosiddetti “Media Query” che applicano un foglio di stile o determinate regole CSS in base non solo al tipo di supporto, ma anche se si presentano determinate condizioni.

<link rel="stylesheet" media="screen and (color)"href="esempio.css" /><br />    @import url(esempio.css) screen and (color);

Il foglio di stile “esempio” verrà caricato sul supporto “screen” a condizione che lo schermo sia anche a colori. (Nel primo caso usando il tag <link> nel secondo usando la regola CSS @import.)

La lista completa delle condizioni possibili

Vediamo di seguito la lista completa delle possibili opzioni :

  • Width e Height – Larghezza e lunghezza
    Valore: grandezza espressa in pixel, em, cm

@media screen and (min-width: 400px) and (max-width: 700px) { }
Le regole verranno applicate su dispositivi video con una risoluzione compresa tra 400 e 700 pixel di larghezza.

  • Device-width e Device-height – Ampiezza e lunghezza della superficie di prestazione del dispositivo di output
    Valore: grandezza espressa in pixel, em e cm
  • Orientation – Definisce se il monitor è orizzontale o verticale
    Valore: portrait (verticale) landscape (orizzontale)
  • Aspect-ratio – Rapporto tra larghezza e altezza del media
  • Device-aspect-ratio – Rapporto tra device-width e device-height
    Valore: rapporto (es. 16/9, 4/3 ecc.)
  • Color – Per definire un dispositivo a colori, è possibile anche specificare il numero di bit per colore
    Valore: numeri interi e non negativi (accetta prefisso "min" o "max")

@media all and (color) { }<br />    @media all and (min-color: 1) { }
Le regole CSS verranno applicate ai dispositivi a colori (se il valore è uguale o superiore a 1 si indica un dispositivo a colori.)

@media all and (min-color: 2) { }
Le regole in questo caso saranno applicate a dispositivi con 2 o più bit per colore.

  • Color-index – Indica il numero di voci nella tabella di ricerca del colore della periferica di output
    Valore: come “Color”
  • Monochrome – Indica se il supporto è monocromatico (è possibile specificare il numero di bit per pixel in un frame buffer bianco e nero)
    Valore: come “Color” (se il valore è 0 il dispositivo non è monocromatico)
  • Resolution – Esprime la risoluzione del dispositivo di output
    Valore: risoluzione espressa in dpi o dpcm, supporta i valori min e max
  • Scan – Descrive il processo di scansione per il media "tv"
    Valore: progressive | interlace

@media tv and (scan: progressive) { }
CSS verranno applicati su dispositivi TV con scansione progressiva

  • Grid chiede se il dispositivo di output è griglia o bitmap.
    Valore: 0 o 1

(Un dispositivo grid-based è ad esempio, un terminale "tty", o un display del telefono con un solo tipo di carattere fisso)

@media handheld and (grid) and (max-width: 15em) { }
CSS verranno applicati sui palmari grind-based con larghezza massima di 15em