2012-04-03 5 views
5

Come tutti sapete, Internet Explorer è in grado di gestire gradienti semplici. Ecco un frammento da Twitter Bootstrap, ad esempio:CSS: Semplici gradienti in Internet Explorer <= 8

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); 

Tuttavia, ho visto alcune persone usano due regole CSS (uno per IE < 8 e uno per IE 8), in questo modo:

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f'); /* For Internet Explorer 5.5 - 7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f')"; /* For Internet Explorer 8 */ 

La mia domanda è, la seconda regola è davvero necessaria? Twitter Bootstrap è abbastanza completo, ma non utilizza alcuna regola "-ms-filter". In base a this page, l'attributo -ms-filter è un'estensione ai CSS e può essere utilizzato come sinonimo del filtro nella modalità Standard IE8..

risposta

3

Il mio suggerimento:

Usa CSS3Pie - http://css3pie.com/

Questa è una libreria JavaScript per IE6, IE7 e IE8 che le patch di supporto per diverse funzionalità CSS3, tra cui pendenze.

Sì, è possibile utilizzare l'orribile stile filter specifico IE, se lo si desidera, ma CSS3Pie consente di utilizzare stili CSS standard per queste funzionalità. Molto più facile.

Per rispondere alla tua domanda in realtà diretta:

Sì, lo stile -ms-filter è di solito necessario. IE8 ci sarà sempre al posto di filter, che viene utilizzato principalmente per IE6 e IE7. In alcuni casi, filter funzionerà in IE8, ma non tutti, quindi è meglio utilizzare -ms-filter per garantire la compatibilità IE8.

[EDITED] Perché l'hanno modificato? Perché quando hanno rilasciato IE8, Microsoft ha fatto un grande sforzo nel cercare di essere "conformi agli standard".

Per un browser conforme allo standard, è necessario utilizzare un prefisso del fornitore per qualsiasi proprietà CSS supportata che non sia uno standard W3C finalizzato. Quindi, aggiungendo il prefisso -ms-, Microsoft stava cercando di annullare (in ritardo) il loro inquinamento dello spazio dei nomi CSS globale.

Inoltre, sono state aggiunte le virgolette, poiché la vecchia sintassi filter senza le virgolette non era valida CSS (principalmente a causa dei due punti dopo progid) e causava problemi con alcuni browser. (Ho avuto un'istanza qualche tempo fa con Firefox 3.6 in cui è stato rilasciato tutti gli stili seguendo uno stile filter che ruotava un elemento - ci sono voluti anni per capire cosa stava succedendo).

Il fatto che Microsoft abbia mantenuto la compatibilità con la sintassi originale filter, era in gran parte una questione di pragmatismo. MS non poteva permettersi di rompere tutti i siti usando la vecchia sintassi. Ma c'era una forte implicazione da parte di Microsoft che gli sviluppatori dovrebbero usare entrambi perché abbandonerebbero il supporto per il vecchio stile filter nelle successive versioni di IE. Come si è scoperto, hanno abbandonato il supporto sia per filter e -ms-filer in un colpo solo, ma le implicazioni fornite al rilascio di IE8 erano sufficienti per diventare pratica consigliata per fornire entrambe le sintassi nel foglio di stile.

Nel momento in cui è stato rilasciato IE8, XHTML era il nuovo sapore del mese e scrivere codice che si convalidava perfettamente era il top della lista per molti sviluppatori. Questo è stato probabilmente un elemento trainante nel cambio di sintassi per includere le virgolette. A causa dei due punti, è impossibile scrivere CSS che convalida utilizzando il vecchio stile filter. L'utilizzo dei nuovi stili -ms-filter consentiva invece alle persone di scrivere CSS validi. Come buone idee, questo non ha funzionato, perché ovviamente le persone dovevano continuare ad usare la vecchia sintassi comunque, ma l'intento era buono.

Vale la pena sottolineare che altri stili proprietari hanno ricevuto lo stesso trattamento. Ad esempio, è possibile utilizzare -ms-behavior in IE8 invece del vecchio stile behavior. Nessuno lo usa. Perché? Non lo so davvero.

Un altro fatto che vale la pena conoscere è che il W3C sta per standardizzare uno CSS property called filter. Farà un lavoro completamente diverso nello stile Microsoft filter e funzionerà in modo completamente diverso. Se/quando è standardizzato e i browser iniziano a supportarlo, ci sarà uno scontro esplicito tra le due sintassi.

+2

Non mi piace molto CSS3Pie. Vedi [qui] (http://stackoverflow.com/a/7668408/937084) e [qui] (https://twitter.com/#!/grantmccall/status/117649720297525248). Nel caso delle sfumature, la versione ** filter ** funziona in IE6, IE7, IE8 e IE9. Nell'anteprima consumer di IE10, funziona solo in modalità compatibilità. La versione ** - ms-filter ** funziona in IE8 e IE9, ma * non * IE10, anche in modalità di compatibilità. IE10 utilizza ** - ms-linear-gradient **. Sembra che la versione ** - ms-filter ** sia valida solo per IE8 e IE9, ma entrambi supportano ** filter **, quindi perché preoccuparsi della versione ** - ms-filter **? – Nick

+1

Ho aggiornato la risposta con molti più dettagli sui perché e sui come -ms-filter. – Spudley

+0

BTW - Hai ragione, CSS3Pie può essere lento. Ma così sono i filtri. Nessuno dei due è lento, a meno che tu non li usi eccessivamente. E CSS3Pie ha un grande vantaggio dei filtri in quanto supporta i colori del canale alfa per i tuoi gradienti, che non è lo stile di filtro di MS. L'altra opzione, naturalmente, è semplicemente quella di utilizzare un fallback a colori piatto per il vecchio IE. A meno che non rovini totalmente il design del tuo sito, o il tuo pubblico abbia una percentuale molto alta di utenti di IE, a volte è più semplice lasciare che abbiano colori piatti e angoli quadrati. – Spudley

0

Sembra che tu abbia risposto alla tua stessa domanda. Sì, sono necessari. Microsoft cerca di essere più in linea con gli standard significa che alcune versioni di IE hanno le loro regole di sintassi leggermente diverse per la proprietà del filtro.

In IE7 solo filter: seguito da progid:DXIma... ecc funzionerà. Ma per IE8 + esiste il fallback IE7 che può essere utilizzato in modalità di compatibilità e la proprietà -ms- più prefissata per il filtro, che denota una proprietà css specifica del fornitore e il suo valore all'interno di qoutes.

+0

La versione ** filter ** funziona in IE6, IE7, IE8 e IE9, ma * non * IE10. La versione ** - ms-filter ** non funziona nemmeno in IE10. IE10 utilizza ** - ms-linear-gradient **. Naturalmente, IE10 non è ancora ufficiale, quindi è soggetto a modifiche. Ad ogni modo, se la versione 6-9 supporta tutti la versione ** filter **, allora perché preoccuparsi della versione ** - ms-filter **? – Nick

+0

Devo aggiungere che la ** versione ** del filtro funziona nella modalità di compatibilità di IE10, ma la versione ** - ms-filter ** non funziona mai in IE10, anche in modalità di compatibilità. – Nick

+0

Microsoft ha 2 politiche in conflitto al momento. Il primo è che vogliono essere più conformi agli standard. Questo è ciò che li ha fatti introdurre '-ms-filter' perché è più o meno considerato corretto. Quindi la seconda politica è quella di supportare la propria piattaforma e le proprie funzionalità per lunghi tempi, questo è il motivo della compatibilità e di un'intera gamma di proprietà che continuano a funzionare perché Microsoft calcola di poter prevedere con precisione ciò che qualcuno voleva fare anche se era targetted a una versione più vecchia di IE. Sta davvero chiedendo confusione: s – sg3s

0

Che danno farebbe lasciarlo?

Se il browser non comprende la riga di CSS, la ignorerà.

Queste due righe di CSS sono quasi identiche. Mi azzardo a pensare che Microsoft abbia deciso di cambiare la sintassi per i CSS proprietari da IE8 in poi utilizzando il prefisso - (trattino) che altri browser hanno utilizzato per yonks.

Tecnicamente il CSS non è compatibile con W3C in entrambi i casi, quindi un'altra riga di CSS proprietario non può recare danno.

Non vale la pena provare a capire IE nel migliore dei casi!

+0

Hai già bisogno di così tante linee ripetitive per una singola sfumatura, quindi perché aggiungere un'altra linea quando non è necessaria? Inoltre, mantenendo la versione ** - ms-filter ** quando la versione ** filter ** funziona bene va contro il principio KISS e si aggiunge alla dimensione del file. Sono solo curioso di sapere se gli sviluppatori che usano entrambe le versioni hanno una ragione logica per farlo. – Nick

+0

Oh sì, e come da consumer preview di IE10, la versione ** - ms-filter ** non è più supportata, quindi è apparentemente valida solo per IE8 e IE9. – Nick