CSS3 Background-size e IE8

Con i CSS3 aquisiamo alcune nuove proprietà ed una di queste è background-size che ha due valori (oltre alla specifica dimensioni di resize) molto interessanti:

  • cover: Scala un immagine in modo da comprire completamente tutto il background dell’elemente in cui e contenuta.
  • contain: Scala un immagine inmodo da renderla il più grande possibile ma sempre completamente visibile come background dell’elemento in cui è contentuta.

Questa utilissima proprietà si scontra, come è sempre accaduto negli ultimi anni con la compatibilità dei browser e come sempre, la famiglia di browser che crea maggio problema è quella di Microsoft.
La casa di Redmond con la versione di Internet Explorer 10 si è occupata di rendere compatibile il loro browser con le specifiche CSS3 senza però tener conto del fatto che i più utilizzati rimangono comunque le versioni 8/9 di IE.
Le altre case, hanno reso compatibili i loro browser con le specifiche CSS3 se non da subito quantomento grazie all’utilizzo dei prefissi: -webkit-, -moz-, oppure -o-

Per sopperire a questa mancanza siamo costretti, ad utilizzare delle alternative:

  • una di queste è l’uso di Jquery, tramite uno script scritto apposta per la compatibilità con le versioni più vecchie di IE. Tramite “jquery.backgroundSize”:http://louisremi.github.io/jquery.backgroundSize.js/demo/ possiamo bypassare il problema
  • un secondo metodo è l’utilizzo dei filtri forniti con IE che rende compatibile il metodo con IE5 o superiori:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
 src='images/logo.gif',
 sizingMethod='scale');
 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
 src='images/logo.gif',
 sizingMethod='scale')";
  • è presente anche una terza possibilità, legata all’uso dei polyfill. L’utilizzo è abbastanza semplice:
.selector {
 background-size: cover;
 -ms-behavior: url(/backgroundsize.min.htc);
 }

Leave a Comment