Internet Explorer 9のグラデーション

IE9内のグラデーションのベンダープレフィックスを知っている人はいますか？それとも、まだ独自のフィルターを使用しているはずですか？

他のブラウザについて私が持っているのは：

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

おまけとして、誰もがOperaのベンダープレフィックスも知っていますか？

IE9ベータ1以降、独自のフィルターを使用する必要があります。

私はパーティーに少し遅れるように見えますが、ここにいくつかのトップブラウザの例があります：

/* 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%);

ソース：http : //ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html

注：これらのブラウザーはすべて、16進表記の代わりにrgb / rgbaもサポートしています。

最適なクロスブラウザソリューションは

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は現在CSS3グラデーションのサポートを欠いています。ただし、これはPHPを使用して代わりにSVG（垂直線形）グラデーションを返す優れた回避策ソリューションであり、スタイルシートでデザインを維持できます。

<?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>

サーバーにアップロードして、次のようにURLを呼び出します。

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

これは、次のようなCSS3グラデーションと組み合わせて使用​​できます。

.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);
}

IE9以下をターゲットにする必要がある場合でも、古い独自の 'filter'メソッドを使用できます。

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

もちろん、PHPコードを修正してグラデーションのストップを追加したり、より洗練されたもの（放射状グラデーション、透明度など）にしたりできますが、これはこれらの単純な（垂直）線形グラデーションに最適です。

すべてのブラウザーのグラデーションに使用するコード：

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;

これをIEで機能させるには、高さを指定するか、要素zoom: 1に適用する必要がありますhasLayout。

更新：

以下に、LESSユーザーのLESSミックスイン（CSS）バージョンを示します。

.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は、他のCSS機能だけでなく、グラデーションのサポートを含むビルドをすぐに利用できるようになります。

W3C CSSワーキンググループは、CSS 2.1でさえ完成していません。間もなく終了する予定です。CSS3は正確にモジュール化されているため、仕様全体ではなく、実装までのモジュールをより速く移動できます。

すべてのブラウザ会社は、異なるソフトウェアサイクルの方法論、テストなどを使用しています。したがって、プロセスには時間がかかります。

CSS3で何かを使用している場合、「プログレッシブエンハンスメント」と呼ばれるものを実行していることを、多くの読者がよく知っていると思います。サポートが最も多いブラウザが最高のエクスペリエンスを実現します。それ以外の部分は「優雅な低下」です。つまり、ブラウザがモジュールまたはモジュールの一部を実装するまでは、エクスペリエンスは快適ですが、おそらく最良または最も魅力的ではありません。

これは非常に奇妙な状況を生み出し、残念ながらフロントエンドの開発者は、実装のタイミングの不整合によって非常にイライラします。したがって、どちらの側でも本当の挑戦です-あなたはブラウザ会社、W3C、またはさらに悪いことにあなた自身を責めますか？メンバーは自分のせい？君は？

もちろん違います。それは常にバランスのゲームであり、今のところ、私たちは業界として、そのバランスのポイントが実際にどこにあるのかを理解していません。それが進化技術で働く喜びです:)

IE9はまだCSSグラデーションをサポートしないことを理解しています。それは残念なことです。なぜなら、それは他の多くの素晴らしい新しいものをサポートしているからです。

IE3のすべてのバージョンにさまざまなCSS3機能（グラデーションを含むが、border-radiusとbox-shadowも含む）を最小限の手間でサポートさせる方法として、CSS3Pieを検討することをお勧めします。

CSS3PieはIE9で動作すると思います（プレリリースバージョンで試しましたが、現在のベータ版ではまだ試していません）。

IE9については不明ですが、Operaはまだグラデーションをサポートしていないようです：

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

そのページには「勾配」はありません。

Opera以外のすべてのブラウザでCSSグラデーションを機能させる方法については、Robert Nymanによるすばらしい記事があります。

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

画像をフォールバックとして使用するように拡張できるかどうかはわかりません。

バージョン11以降、Operaは-o-ベンダープレフィックスを持つ線形グラデーションをサポートしています。Chris MillsがDev.Operaに関する記事を書いています：http ://dev.opera.com/articles/view/css3-linear-gradients/

放射状グラデーションはまだ作業中です（仕様とOperaの両方で）。

グラデーションジェネレーターを使用してください-そして、すべてが完璧になります;） http://www.colorzilla.com/gradient-editor/