Home » Web Development » Responsive Design » Risolviamo il problema dei media queries su IE con css3.mediaqueries.js

Risolviamo il problema dei media queries su IE con css3.mediaqueries.js

Media queries

Come abbiamo già visto uno dei concetti fondamentali su cui si basa il Responsive Design è l’uso dei media queries per riuscire a gestire le diverse larghezze di pagina.

Nonostante i media queries fossero già stati implementati nel CSS2 e poi notevolmente potenziati con l’avvento del CSS3, questo strumento non viene supportato da Internet Explorer se non dalla versione 9. Anche se negli ultimi periodi sembra prendere piede la tendenza di ignorare gli utenti che utilizzano questi browser, è comunque consigliabile permettere a questi utenti di usufruire dei contenuti dei nostri siti, nonostante il loro browser.

Ma come far funzionare i media queries sulle vecchie versioni di Internet Explorer se non li supportano?

Anche questa volta ci viene in aiuto il javascript, con un plugin facilissimo da utilizzare: css3.mediaqueries.js.

Attivare css3.mediaqueries.js è facilissimo: una volta scaricato basterà includerlo nella nostra pagina (possiamo anche aggiungere un controllo per caricarlo solo per i browser a cui serve, così da non ridurre le prestazioni per gli altri browser) e lui si occuperà del resto.

Allo stato attuale questo plugin riesce perfettamente a gestire i media queries implementati all’interno dei nostri fogli di stile. Tuttavia non supporta i media queries all’interno di fogli di stile importati utilizzando l’@import (che dovrebbe comunque essere evitato per motivi di prestazioni) e quelli implementati all’interno dell’attributo media degli elementi link.

Una volta fatto questo, non resterà altro da fare se non andare a sistemare eventuali piccoli errori di visualizzazione con la classica creazione di un css ad hoc per Internet Explorer.

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...