FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーをはてなブックマークに追加

各種ブラウザにおけるlinear-gradient対応状況について

ブラウザの種類・バージョンで書式が大きく違って何かとやっかいなlinear-gradient()の
対応状況をまとめてみました。

使用したサンプルはこちら
表示結果比較の画面キャプチャはこちら

【結果】
●-webkit-gradient(linear,left top,left bottom,from(#FC0),to(#fff));
[対応]Chrome/Safari4+/iOS4+/Android2.x/

●-webkit-linear-gradient(top,#FC0,#fff);
[対応]Chrome/Safari5+/iOS5+

●-webkit-linear-gradient(to bottom,#FC0,#fff);
[対応]なし

●-moz-linear-gradient(top,#FC0,#fff);
[対応]FireFox3.6+

●-moz-linear-gradient(to bottom,#FC0,#fff);
[対応]FireFox12+ ※いつから対応したか正確には不明。2012年上半期と思われます。

●linear-gradient(to bottom,#FC0,#fff);
[対応]なし 

【2012年5月下旬時点での状況】
・-webkit-で新しい角度仕様(to bottomなど)に対応したブラウザはまだ無し。
・-moz-は最新版で新しい角度仕様にもプリフィクス付きで対応。
・プリフィクスなしでグラデーション実装したブラウザはまだ無し。
・PC向けの場合、Safari4を切れるなら-webkit-gradient()は不要。
・スマホ向けの場合、iOS4はともかくAndroidは切れないので-webkit-gradient()で実装。現状ではiOS5も-webkit-gradient()をサポートしているがいつまでそうするか不明なので心配なら-webkit-linear-gradient()も併記した方がいいかも?
・IE9は対応してない。IE10は調べてない。(誰か教えてください)
・Operaのことは無かったことにしている。
・Yahoo! Axis?なにそれおいしいの?(´・ω・`)

こんな感じでした。
スマホだとグラデーション特に多用するので、プリフィクス問題はほんと早く解決してほしい。
いっそプリフィクスなしサポートした時点でプリフィクス記述全部サポート外してくれてもいい。
一時大変かもしれないけど、その後は平和が待ってる。。。



このエントリーをはてなブックマークに追加
スポンサーサイト

IE6-8でCSS3のセレクタやプロバティを使う方法

プログレッシブエンハンスメントが叫ばれる今日この頃ですが、
可能ならIE6-8にもCSS3を使いたい、ということでJSで何とかできないか探してみると、
なんだかよさげなものが見つかります。

■IE6でもCSS3のセレクタを使えるようにするもの

(1)IE9.jshttp://code.google.com/p/ie7-js/
IEの挙動を標準準拠させるjsライブラリ。一部のセレクタサポートの他、以下の項目をサポート。

・擬似クラス対応
・属性セレクタ対応
・透過PNG対応
・position:fixed対応
・margin:0 auto;対応
・max-height,width対応
・min-height,width対応
・IE5/6のバグを修正


いろいろ対応してくれてとても便利なIE9.jsですが、これを導入することで出来なくなることもあるようです。
[参考]ie9.jsを使うと出来ること、出来なくなること。

(2)selectivizr.jshttp://selectivizr.com/
jquery.jsやprototype.js等のライブラリと併用することで、IE6-8でもCSS3の擬似クラス・擬似要素を使えるようにしてくれるもの。使うライブラリによって対応する擬似クラス・擬似要素に違いが出るので事前に確認が必要。

↑これらを使うと、属性セレクタや、:before/:after、:first-child/:last-child等がIE6-8でも使えるようになるので、HTMLのソースコードがとてもシンプルに出来ますね♪


■IE6でもCSS3のプロパティを使えるようにするもの

(1)PIE.htchttp://css3pie.com/
たった位置行追加するだけで角丸、ドロップシャドウ、グラデーション、マルチプル背景等がIEでも使えるようにしてくれるbehavior。

(2)ie-css3.htchttp://fetchak.com/ie-css3/
角丸、テキストシャドウ、ボックスシャドウに対応。

.htcは大変便利なのですが、
・サーバによっては.htcを許可していないことがある
・相対パスで呼び出す場合、HTMLからのパスにしないと動かない
・要素にposition:relative;を指定しないと背景やボーダーが消える
などいくつか注意点がありますので気をつけてください。


で、こんな風にJSやhtcでセレクタやプロパティを使うことが出来るなら、
両方使ってやればIE6-8でもモダンブラウザライクにCSS3使えるんじゃね?
と思って意気揚々と設置・・・・・



・・・・・してみたのですが、ダメでしたorz



どうやら、セレクタ系のJSを読ませると、.htc系の指定が全部無効になってしまうみたいです。(つかえねーーー!!)
セレクタ系を取るか、プロパティ系を取るか、結局二者択一が精一杯みたいです。。。(´・ω・`)
残念。


このエントリーをはてなブックマークに追加

CSS3で背景グラデーションをピクセル指定する方法

CSS3を使えば画像を使わずにグラデーションを表示させることはできますが、
その書き方として紹介されている方法は、ボックスサイズに対して%(割合)でグラデーションの幅を指定する方法ばかりです。

参考:http://www.css-lecture.com/log/css3/css3-gradient.html

そこで、「上から100pxまでグラデーションにして残りはベタにしたい」といったピクセルでグラデーションの幅を決めたい場合の書き方を調べてみました。


background-image:-webkit-gradient(
linear,
0 0, /*開始点の位置を座標(X,Y)で指定 */
0 100, /*終了点の位置を座標(X,Y)で指定 */
from(#ffffff),
to(#ff0000)
);

webkitの場合、座標指定に(0 , 100px)のように単位をつけると無効になってしまうので、必ず単位無しで指定するのがポイントです。


background-image: -moz-linear-gradient(
top,
#f30,
#ffc 100px /*終了点の位置をpxで指定*/
);


上記のような書き方をすればピクセル幅固定の2色グラデーションを表現できます。
webkitの場合、color-stop()を使った構文だとうまくグラデーションを作る事ができず、
またwebkitもmozも両方、3色以上のピクセル固定をどうしたら良いのかはまだ不明です。
どなたかご存知の方いらしたら教えていただけると嬉しいです。m(_ _)m

このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。