Kreatore.it

Sviluppo applicativi Lamp

CSS3 Background-size e IE8

Scritto da: | Categorie: ,

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);
}
Tags: , , , , , , , , ,

Articoli Simili

Cerca per tag

Cerca per categoria

© 2011 Kreatore.it :: Sito web realizzato da Marco Casalegno

TXP | Admin | Home | Back to Top

Tutte le informazioni e le immagini sono rilasciate sotto licenza secondo la Creative Commons License 2.0.