CSS3で追加された gradient をIEでも使ってみたいの巻。
【グラデーション】
IE 9
IE 9はHTML5 & CSS3に対応したモダンなブラウザです（噂では）。
CSS3 gradientへの対応はちょっと？？？な感じです。
Compassでグラデーション設定だと…
Compass
@import "compass/css3"; .gradient { @include background(linear-gradient(top, #fcfcfc, #cccccc)); } |
CSS
.gradient { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #fcfcfc, #cccccc); background: -moz-linear-gradient(top, #fcfcfc, #cccccc); background: -o-linear-gradient(top, #fcfcfc, #cccccc); background: linear-gradient(top, #fcfcfc, #cccccc); } |
こんな感じでベンダープレフィックス付けて吐き出してくれます。
あれ、 -ms が無い。
IE 9までは背景にグラデーションが有効にならない仕様らしい。
Compassを使っての指定だと次のようにします。
$experimental-support-for-svg: true; @import "compass/css3"; .gradient { @include background(linear-gradient(top, #fcfcfc, #cccccc)); } |
$experimental-support-for-svg: true;を1行追加します。
.gradient { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #fcfcfc, #cccccc); background: -moz-linear-gradient(top, #fcfcfc, #cccccc); background: -o-linear-gradient(top, #fcfcfc, #cccccc); background: linear-gradient(top, #fcfcfc, #cccccc); } |
IE 9で背景にグラデーションしたかったらSVGでねってことらしいです。
IE 10 ではグラデーション可能らしいですけどねぇ。
MSDN: グラデーション
IE 8以下
IE 8以下へはサードパーティの助けを借りることになります。
CompassにはPIEを使う方法が用意されています。
CSS3 PIE
PIE.htcで有名です。
PIE.htcはIEのCSSでscriptを走らせる機能を利用したツールです。
CSS側にコードを設置するだけで良い点が便利です。
Compassで使用するにはPIEをプロジェクトにインストールします。
お手軽ツールFire.appでインストールしました。
Install… > compass > pie
CSS吐き出しフォルダへ PIE.htc が設置されます。
会わせてサンプルコードのpie.scssも設置されます。
@import "compass/css3/pie"; $pie-behavior: url("/css/PIE.htc"); $pie-base-class: PIE; .PIE { @include pie-element(relative); } .PIEZ { @include pie-element(z-index); } .pieCon { @include pie-container; } $experimental-support-for-svg: true; @import "compass/css3"; .gradient { @include pie; @include background(linear-gradient(top, #fcfcfc, #cccccc)); } |
PIEを使ったCSS。
.PIE, .gradient { behavior: url("/css/PIE.htc"); position: relative; } .pieCon { z-index: 0; position: relative; } .PIEZ { behavior: url("/css/PIE.htc"); z-index: 0; } .gradient { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #cccccc)); background: -webkit-linear-gradient(top, #fcfcfc, #cccccc); background: -moz-linear-gradient(top, #fcfcfc, #cccccc); background: -o-linear-gradient(top, #fcfcfc, #cccccc); -pie-background: linear-gradient(top, #fcfcfc, #cccccc); background: linear-gradient(top, #fcfcfc, #cccccc); } |
-pie-background: linear-gradient(top, #fcfcfc, #cccccc);
が追加されます。
.PIE, .PIEZ, .pieCon もCSSに追加されます。
【注意点】
PIE.htcまでのパスはhtmlからのパスになります。
絶対パスで指定すると良いでしょう。
サーバーが.htcの拡張子を理解できない場合があります。
その場合は .htaccess などで mime typeを追加する必要があります。
AddType text/x-component .htc |
.htaccessが使えないサーバーでは上記 CSS3 PIEから一式ダウンロードするとPIE.phpが用意されています。
headerに”text/x-component”を付けてPIE.htcをechoしてるだけの簡単なファイルですがこれで充分です。
PIE.htcまでのパスを絶対パスに書き換えます。
$pie-behavior: url("/css/PIE.php");
上記はドキュメント ルート直下cssフォルダにPIE.htcを配置しています。
backgroundでないと動きません。
Compass + PIE ではbackground-imageでグラデーションを指定しないようにして下さい。
PIEを指定したコンテナはposition: relative;かz-indexの指定が必要です。
Compass + PIE のデフォルトはposition: relativeです。
既にpositionをabsoluteなどで指定している時はz-indexだけ指定します。
.gradient { @include pie(PIEZ); background: #cccccc; /* 省略 */ } |
【おまけ】
PIEが働かない時のために背景にべた塗りを指定しておくと良いかもです。
.gradient { background: #cccccc; /* 省略 */ } |
PIE.htcを魔法のツールの様に誉めているサイトを見たりしますが、なんか微妙な気がします。
万能のツールで無いと割り切っていないとひどい目に会う可能性がありそうです。
あ、個人の感想です。
ピンバック: CSS3, IE 9のためにSVG付きグラデーション生成サービス « イナヅマTVログ