CSS3ついて

2010年7月14日

CSS3についてのメモですー。
CSS3対応のIE9が出ても対応がvista以上の様子なので、どうやらこの方法などはしばらくの間必要不可欠だと思います。
友達以上恋人未満的な感じで非常にもどかしい。
これからはIE以外で行きましょう!お願い!ほんとに!w

■CSS3をIEに対応させるメモ。
方法としては、簡単な方法は2つあってひとつは、htcファイルの指定をcssに記述してIEも読んでね対応させてあげること。

もう一つはjavascriptで対応してあげるということ。
こちらはコリスさんの記事をどうぞ。

htcファイルをテストしてみた。

1.ここからie-css3.htcをダウンロードする。

2.ie-css3.htcを任意の場所に入れる。私はテーマ内のstyle.cssがある同じ場所にそのまま入れた。

ちなみに対応できる、CSS3の種類は限られていて、

角丸:border-radius
ボックスシャドウ:box-shadow
テキストシャドウ:text-shadow

の3種類です。
ひとまず代表的なものはこれで対応できるかな、と思います。

	behavior: url(http://アドレス/フォルダまでのパス/ie-css3.htc);

重要:
相対パスだと、サーバーによってhtcファイルを認識してくれない場合があるので、絶対パスで記述する。
今のところ2つサーバーでテストして2つとも絶対パスじゃないと駄目だった。
HTCファイル使用の注意点
background-repeat:no-repeatが効かなくなったり、ウィンドウのリサイズで不具合が出たりするので注意。

上記を、border-radiusやtext-shadow、box-shadowの記載がされている要素に1行加えてあげるとOKです。

でも、設定の仕方が悪いんだろうと思うのですが、場所によって反映されない場所もある。
もうちょっと色々やってみます。

今のところ、IEではタグ、カテゴリの角丸、エントリー写真の影が反映されました。
ブログタイトルや、右部分のウィジェットの影、などは反映されません。。
IEの影汚いし。。要するにIEは使わないでくださいってこと!

IEとsafari比較

■CSS3の記述メモ

box-shadowの場合

	-webkit-box-shadow: 5px 5px 15px #999;
	-moz-box-shadow: 5px 5px 15px #999;
	box-shadow: 5px 5px 15px #999;

-webkit はwebkit系(safari等)
-moz はmozira系(opera、firefox等)
に対応させるスタイルです。

ちなみに上記の方法でIEにも対応させる場合には、

	-webkit-box-shadow: 5px 5px 15px #999;
	-moz-box-shadow: 5px 5px 15px #999;
	box-shadow: 5px 5px 15px #999;
	behavior: url(http://アドレス/フォルダまでのパス/ie-css3.htc);

で1セットになります。


タグ: , ,