Stamattina ho perso non poco tempo nel debugging di un progetto web in cui ho utilizzato delle semplici tecniche di layout responsivo con le CSS3 Media Query.
Ovviamente il problema è relativo a Internet Explorer nelle sue più nobili versioni: IE6, IE7 e IE8!
L’argomento:
Queste versioni di Internet Explorer non supportano le Media Query (nè HTML5… anzi, non supportano nulla!) ma fortunatamente esistono delle librerie che – via javascript – risolvono il problema.
- css3-mediaqueries-js - supporto esteso alle media query CSS3
- respond.js – supporto ottimizzato alle media query CSS3 per il “mobile first” responsive design
Io utilizzo respond.js perchè mi interessa solamente intercettare le dimensioni dello schermo ed agire di conseguenza sulla presentazione della pagina web ed è proprio su questa libreria che si concentra l’errore segnalato in questo post.
L’errore:
Questa libreria va in errore quando il foglio di stile contiene delle regole vuote:
body {}
La soluzione:
La semplicissima soluzione consiste nell’inserire almeno uno spazio all’interno delle parentesi graffe:
body { }
Conclusioni:
Molti di voi sostengono – a ragione – che questo tipo di istruzioni non dovrebbero esistere in un foglio di stile in quanto sono un semplice spreco di spazio e di tempo di caricamento. Sono pienamente d’accordo!
Tuttavia in piena fase di sviluppo molti sviluppatori usano scrivere il set completo di “css handler” per definire le regole interne in un secondo momento. In questo caso – in progettazione – questo bug può far perdere tempo prezioso e la soluzione proposta in questo articolo diventa utilissima!
