Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Come inculcare le query @media nei browser più zucconi
Scritto da Luca Domenichini il 27-04-2011 ore 08:45
Seminario Intel
Le query @media sono state introdotte fin dal linguaggio CSS2 allo scopo di rendere i siti portabili su dispositivi differenti. Utilizzare le media query nella propria pagina HTML aiuta infatti nella definizione delle caratteristiche tecniche che lo user agent deve avere per visualizzare correttamente la pagina. Per esempio:
  1. <link rel="stylesheet" media="screen and (color)" href="example.css" />
In questo caso si richiede di caricare il foglio di stile example.css sui dispositivi di un certo tipo (screen = provvisti di schermo) e con una specifica funzionalità (color = ossia a colori). Le media query possono essere utilizzate anche come @import-rule:
  1. @import url(color.css) screen and (color);
Si tratta quindi di espressioni logiche di tipo booleano (valore vero o falso), che possono essere sfruttate a proprio vantaggio come selettori nell'applicazione degli stili:
  1. @media all and (min-width:500px) { … }
  2. @media (min-width:500px) { … }
  3. @media screen and (color), projection and (color) { … }
  4. @media not screen and (color) { … }
  5. @media only screen and (color) { … }
Purtroppo, non tutti i browser supportano appieno questa funzionalità (uno fra tutti Internet Explorer), e per evitare incongruenze è necessario prendere le giuste precauzioni. Esistono infatti soluzioni, create in JavaScript, che garantiscono una buona gestione delle media query in ogni browser.

La prima, proposta da Scott Gilbertson nel suo articolo su Webmonkey è Respond, una libreria polyfill dalle dimensioni molto contenute (1 KB), che elabora — se lo user-agent non lo può fare — le query min-width e max-width e i vari media type.

La seconda soluzione è più robusta e completa: si chiama css3-mediaqueries.js e permette un supporto pressoché totale delle media query. Il lato negativo da tener presente sono le dimensioni, che in questo caso raggiungono i 15,6 KB per la versione compressa.

Infine, il programmatore Jeremy Keith suggerisce un'allettante alternativa che esclude completamente l'uso di Javascript, applicata al suo Huffduffer.
Precedente: ACCU Conference 2011: pubblicate le slide e i video
Successiva: Implementare la geolocalizzazione tramite IP con IPInfoDB
Copyright Programmazione.it™ 1999-2014. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.206 secondi.