Supporta la proprietà 'background-size' sui vecchi browser?

Question

C'è un modo per utilizzare la proprietà 'Background-Size' di CSS3 e quindi usare qualcosa come Modernizr per assicurarmi che sia supportato nei browser più vecchi (in particolare voglio usare l'opzione 'background-size: cover')?

Ho dato uno sguardo a cssFx, che è menzionato dal sito di Modernizr, ma questo sembra aggiungere solo prefissi di vendor per i browser che hanno bisogno di usare una proprietà, piuttosto che consentire a browser come IE8 di supportare la proprietà della dimensione dello sfondo .

Anche guardato a CSS3Pie, ma quello non sembra attualmente supportare la proprietà di background-size.

[11/10/2011 - Con i vecchi browser sto pensando principalmente di IE7/8, ma idealmente vorrei coprire FF3.6, ecc]

Answer 1

Penso che probabilmente si desidera utilizzare Modernizr per verificare se la proprietà è supportata o meno nel browser corrente. In caso contrario, prova a capire una visualizzazione alternativa del tuo sito/applicazione che sembra ancora buona senza la proprietà della dimensione dello sfondo.

Ovviamente, puoi anche provare un altro approccio che non coinvolge questa proprietà come un div sottostante con un'immagine (che puoi ridimensionare) e il contenuto che si sovrappone a questo div. In bocca al lupo.

Answer 2

Hai ragione che background-size non è supportato su un numero di browser meno recenti.

La soluzione tipica a questo è di simularlo utilizzando un ulteriore <div> o anche un elemento <img> posizionato dietro l'elemento che si desidera avere lo sfondo.

Questo può essere ottenuto semplicemente utilizzando il markup aggiuntivo, ma questa soluzione ha lo svantaggio del significato che verrà utilizzata per tutti i browser, anziché la proprietà background-size. In altre parole, significa deliberatamente degradare il codice per motivi di vecchi browser, che non è l'ideale.

Se si desidera utilizzare la proprietà CSS per i browser che lo supportano, è possibile utilizzare un po 'di Javascript per generare il markup sopra, ma solo se necessario. Ciò significa che i browser moderni possono utilizzare felicemente lo background-size e che solo i browser più vecchi utilizzeranno il fallback.

Ci sono un certo numero di soluzioni Javascript a questo disponibili sul web (un rapido google ha mostrato quanto segue: http://css-tricks.com/766-how-to-resizeable-background-image/ tra gli altri), ma soprattutto è necessario sapere come attivarlo in base al browser.

Qui è dove entra Modernizr. La descrizione che hai dato di Modernizr nella domanda non è del tutto precisa. Quello che fa è produrre un set di classi CSS nel markup HTML e le variabili corrispondenti nel tuo Javascript che rappresentano tutte le funzionalità del browser. Si tratta di flag booleani che indicano se il browser corrente supporta.

Quindi con Modernizr è possibile controllare in Javascript se il browser supporta background-size o meno, e solo eseguire la funzione javascript alternativa se non lo supporta.

if(!Modernizr.backgroundsize) { 
    //do stuff here to simulate the background-size property for older browsers. 
} 

Spero che questo aiuti.

Answer 3

Prima di tutto c'è una facile soluzione per Firefox 3.6.C'è un prefisso fornitore:

-moz-background-size 

Per quanto riguarda una soluzione quando si utilizzano media query: Si potrebbe utilizzare Modernizr per indirizzare un'altra immagine per quando gli utenti stanno visualizzando browser più vecchi, questo significherebbe un'altra richiesta del browser. Tuttavia, presumibilmente caricherete immagini più piccole per ogni query in cui le dimensioni dello schermo si riducono. Poiché Modernizr creerà una situazione in cui queste richieste verranno ignorate nei nuovi browser, si riducono le richieste del server per la maggior parte delle persone che utilizzano i browser più recenti.

Per curiosità, ho provato la soluzione di cui sopra e ha funzionato. Ho applicato le seguenti classi di modernizr come: .no-backgroundsize per supporto non di sfondo e cioè caricato in una nuova immagine. Per tutti gli altri browser ho aggiunto la classe .backgroundsize e incluso la menzione del prefisso in alto per FF. Questo potrebbe essere ripetuto per ogni query multimediale con una nuova immagine per .no-background. Questo è un modo per risolvere il problema.

-Ho modificato questo post dopo averlo provato il 15/12/12.

Answer 4

Si può vedere il supporto per background-size e le sue proprietà a: http://www.standardista.com/css3/css3-background-properties

Questa CSS supporta IE9 +, Firefox 3.6 e versioni successive, Safari, Chrome:

background-size: cover; 
-moz-background-size: cover; 

per IE7/8 supporto, caniuse.com liste questo polyfill: https://github.com/louisremi/background-size-polyfill

Answer 5

Un'altra opzione sarebbe quella Background Size Polyfill:

.selector { 
    background-size: cover; 
    /* The url is relative to the document, not to the css file! */ 
    /* Prefer absolute urls to avoid confusion. */ 
    -ms-behavior: url(/backgroundsize.min.htc); 
} 

Answer 6

migliore esempio per supportare al meglio:

background-image: url(bg-image.png); 

     -webkit-background-size: 100% 100%;   /* Safari 3.0 - Old Chrome - Old Android */ 
     -moz-background-size: 100% 100%;   /* Gecko 1.9.2 (Firefox 3.6) */ 
      -o-background-size: 100% 100%;   /* Opera 9.5 */ 
       background-size: 100% 100%;   /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ 

Non aggiungere questo, perché ha fatto problema nelle nuove versioni di Firefox:

-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) 

Fonte: mozilla.org