Gradienti in Internet Explorer 9

Qualcuno conosce il prefisso del fornitore per i gradienti all'interno di IE9 o dovremmo ancora utilizzare i loro 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?

È ancora necessario utilizzare i 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%);

Fonte: 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*/ 

IE9 attualmente non supporta il gradiente CSS3. Tuttavia, ecco una bella soluzione alternativa utilizzando PHP per restituire invece un gradiente SVG (verticale lineare), che ci consente di mantenere il nostro design nei nostri fogli di stile.

<?php

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

header('Content-type: image/svg+xml; charset=utf-8');

echo '<?xml version="1.0"?>
';

?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

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

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

Questo può essere usato insieme ai tuoi 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 di "filtro" proprietario:

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

Ovviamente puoi modificare il codice PHP per aggiungere più interruzioni al 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;

Sarà necessario specificare un'altezza o zoom: 1applicare hasLayoutall'elemento affinché funzioni in IE.

Aggiornare:

Ecco una versione LESS Mixin (CSS) per tutti voi utenti LESS 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 gradiente, così come altre funzionalità CSS.

Il W3C CSS Working Group non ha nemmeno finito con CSS 2.1, lo sapete tutti, giusto? Abbiamo intenzione di finire molto presto. CSS3 è modulare precisamente 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 chiamato "miglioramento progressivo": i browser con il maggior supporto ottengono la migliore esperienza. L'altra parte di questo è il "degrado grazioso", il che significa che l'esperienza sarà piacevole ma forse non la migliore o la più attraente fino a quando quel browser non avrà implementato il modulo, o parti del modulo che sono rilevanti per ciò che si desidera fare.

Questo crea una situazione piuttosto strana che sfortunatamente gli sviluppatori front-end sono estremamente frustrati da: tempistica incoerente sulle implementazioni. Quindi è una vera sfida da entrambe le parti: incolpi le società di browser, il W3C o, peggio ancora, te stesso (il cielo sa che non possiamo sapere tutto!) Fa quelli di noi che lavorano per una società di browser e il gruppo W3C membri incolpano noi stessi? Tu?

Ovviamente no. È sempre un gioco di equilibrio e, per ora, come industria non abbiamo capito dove sia realmente quel punto di equilibrio. Questa è la gioia di lavorare nella tecnologia evolutiva :)

Capisco che IE9 non supporterà ancora i gradienti CSS. Il che è un peccato, perché supporta tantissime altre fantastiche novità.

Potresti voler esaminare CSS3Pie come un modo per far sì che tutte le versioni di IE supportino varie funzionalità CSS3 (inclusi i gradienti, ma anche il raggio del bordo e l'ombra del riquadro) con il minimo sforzo.

Credo che CSS3Pie funzioni con IE9 (l'ho provato nelle versioni pre-rilascio, ma non ancora nella beta attuale).

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

• http://www.opera.com/docs/specs/presto26/#css

Nessuna occorrenza di "gradiente" in quella pagina.

C'è un ottimo articolo di Robert Nyman su come far funzionare i gradienti CSS in tutti i browser che non sono Opera:

• http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

Non sono sicuro che possa essere esteso per utilizzare un'immagine come riserva.

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 che all'interno di Opera).

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