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 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);
}

Leggi il contenuto originale su Kreatore.it - blog