Sfumature in Internet Explorer 9

Qualcuno conosce il prefisso del venditore per i gradienti all’interno di IE9 o dovremmo ancora continuare a utilizzare i filtri proprietari?

Quello che ho per gli altri browser è:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */ 

Come bonus qualcuno conosce anche il prefisso del venditore di Opera?

Hai ancora bisogno di usare i loro filtri proprietari a partire da IE9 beta 1.

Sembra che io sia un po ‘in ritardo per la festa, ma ecco un esempio per alcuni dei migliori browser:

 /* IE10 */ background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* Opera */ background-image: -o-linear-gradient(top, #444444 0%, #999999 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%); /* Proposed W3C Markup */ background-image: linear-gradient(top, #444444 0%, #999999 100%); 

Origine: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Nota: tutti questi browser supportano anche rgb / rgba al posto della notazione esadecimale.

La migliore soluzione cross-browser è

 background: #fff; background: -moz-linear-gradient(#fff, #000); background: -webkit-linear-gradient(#fff, #000); background: -o-linear-gradient(#fff, #000); background: -ms-linear-gradient(#fff, #000);/*For IE10*/ background: linear-gradient(#fff, #000); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ height: 1%;/*For IE7*/ 

Attualmente, IE9 manca del supporto per il gradiente CSS3. Tuttavia, ecco una soluzione alternativa che utilizza PHP per restituire invece un gradiente SVG (verticale lineare), che ci consente di mantenere il nostro design nei nostri fogli di stile.

  '; ?>          

Basta caricarlo sul tuo server e chiamare l’URL in questo modo:

 gradient.php?from=f00&to=00f 

Questo può essere usato in combinazione con i gradienti CSS3 come questo:

 .my-color { background-color: #f00; background-image: url(gradient.php?from=f00&to=00f); background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f)); background-image: -webkit-linear-gradient(top, #f00, #00f); background-image: -moz-linear-gradient(top, #f00, #00f); background-image: linear-gradient(top, #f00, #00f); } 

Se devi scegliere come target sotto IE9, puoi comunque utilizzare il vecchio metodo “filtro” proprietario:

 .ie7 .my-color, .ie8 .my-color { filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff"); } 

Ovviamente è ansible modificare il codice PHP per aggiungere più fermi sul gradiente o renderlo più sofisticato (gradienti radiali, trasparenza, ecc.) Ma questo è ottimo per quei semplici gradienti lineari (verticali).

Il codice che uso per tutti i gradienti del browser:

 background: #0A284B; background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); background: -webkit-linear-gradient(#0A284B, #135887); background: -moz-linear-gradient(top, #0A284B, #135887); background: -ms-linear-gradient(#0A284B, #135887); background: -o-linear-gradient(#0A284B, #135887); background: linear-gradient(#0A284B, #135887); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); zoom: 1; 

Dovrai specificare un’altezza o uno zoom: 1 per applicare hasLayout all’elemento affinché questo funzioni in IE.


Aggiornare:

Ecco una versione di LESS Mixin (CSS) per tutti gli utenti MENO là fuori:

 .gradient(@start, @end) { background: mix(@start, @end, 50%); filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")"; background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); background: -webkit-linear-gradient(@start, @end); background: -moz-linear-gradient(top, @start, @end); background: -ms-linear-gradient(@start, @end); background: -o-linear-gradient(@start, @end); background: linear-gradient(@start, @end); zoom: 1; } 

Opera inizierà presto ad avere build disponibili con supporto del gradiente e altre funzionalità CSS.

Il W3C CSS Working Group non ha ancora finito con CSS 2.1, lo sapete, giusto? Intendiamo essere finiti molto presto. CSS3 è modulare in modo preciso in modo che possiamo spostare i moduli fino all’implementazione più velocemente piuttosto che un’intera specifica.

Ogni azienda di browser utilizza una diversa metodologia del ciclo del software, test e così via. Quindi il processo richiede tempo.

Sono sicuro che molti, molti lettori sanno bene che se stai usando qualcosa in CSS3, stai facendo quello che viene definito “miglioramento progressivo” – i browser con il maggior supporto ottengono la migliore esperienza. L’altra parte di questo è “graceful degradation” che significa che l’esperienza sarà gradevole ma forse non la migliore o la più attraente fino a quando il browser non avrà implementato il modulo, o parti del modulo che sono rilevanti per ciò che si vuole fare.

Ciò crea una situazione piuttosto strana che sfortunatamente gli sviluppatori front-end sono estremamente frustrati da: tempistiche incoerenti nelle implementazioni. Quindi è una vera sfida per entrambe le parti: incolpi le società di browser, il W3C o, peggio ancora, te stesso (chissà che non possiamo sapere tutto!) Chi di noi lavora per una società di browser e un gruppo W3C? i membri si danno la colpa a noi stessi? Tu?

Ovviamente no. È sempre un gioco di equilibrio, e fino ad ora, non abbiamo capito come il punto di equilibrio sia realmente. Questa è la gioia di lavorare nella tecnologia evolutiva 🙂

Capisco che IE9 continuerà a non supportare i gradienti CSS. Il che è un peccato, perché supporta molte altre grandi novità.

Potresti voler considerare CSS3Pie come un modo per far sì che tutte le versioni di IE supportino varie funzionalità di CSS3 (inclusi gradienti, ma anche border-radius e box-shadow) con il minimo sforzo.

Credo che CSS3Pie funzioni con IE9 (l’ho provato nelle versioni preliminari, ma non ancora nella beta corrente).

Non sono sicuro di IE9, ma Opera non sembra avere ancora alcun supporto per il gradiente:

Nessuna occorrenza di “gradiente” su quella pagina.

C’è un grande articolo di Robert Nyman sull’ottenere che i gradienti CSS funzionino in tutti i browser che non sono Opera però:

Non so se questo può essere esteso per usare un’immagine come fallback.

A partire dalla versione 11, Opera supporta gradienti lineari con il prefisso -o- vendor. Chris Mills ha scritto un articolo su Dev.Opera: http://dev.opera.com/articles/view/css3-linear-gradients/

I gradienti radiali sono ancora in lavorazione (sia nelle specifiche, sia all’interno di Opera).

Usa un generatore di gradienti e tutto sarà perfetto;) http://www.colorzilla.com/gradient-editor/