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

admin, ajax, android, apache, app, audio, backup, beta, blog, bordi, browser, caffè, calcolo, calibre, categorie, cd, chrome, clienti, cloud, cms, condivisione, css3, csv, database, debian, desktop, download, drive, driver, dump, e-reader, evolution, file, firefox, flash, font, foto, freelance, funzioni, gd, gedit, gimp, htc, html5, iexplorer, immagini, indirizzo, inkscape, internet, ip, iphone, java, javascript, jquery, kivy, kv, less, lettura, link, linux, live, mac, macchina, mail, menu, mobile, mod, mp3, mysql, nautilus, network, newsletter, ombra, open office, opera, os, paypal, pdf, picasa, plugin, python, safari, skype, smartphone, smf, ssh, stampante, tabs, tag, tastiera, terminale, test, testo, textile, textpattern, theme, ubuntu, usb, video, web editor, website, windows, wysiwyg, xfce4, youtube

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.