web-dev-qa-db-ja.com

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のベンダープレフィックスも知っていますか？

csscss3backgroundinternet-explorer-9gradient
111
Sniffer

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

44
Gaurav

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

/* 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もサポートしています。

57
Kevin Arthur

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

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

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以下をターゲットにする必要がある場合でも、古い独自の「フィルター」メソッドを使用できます。

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

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

37
neave

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

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 Mixin（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;
}
11
Blowsie

Operaは、他のCSS機能と同様に、勾配サポートを備えたビルドをすぐに利用できるようになります。

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

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

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

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

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

6
mollydotcom

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

IEのすべてのバージョンを取得する方法として CSS3Pie を調べて、さまざまなCSS3機能（グラデーション、境界線半径、ボックス影など）をサポートすることができます。大騒ぎの最小。

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

4
Spudley

IE9についてはわかりませんが、Operaはまだ勾配をサポートしていないようです：

そのページに「グラデーション」は発生しません。

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

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

2
Paul D. Waite

バージョン11では、Operaは、ベンダー接頭辞-o-を使用した線形グラデーションをサポートしています。クリス・ミルズは、それについてDev.Operaの記事を書きました： http://dev.opera.com/articles/view/css3-linear-gradients/

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

2
webinista

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

1
Jules