CSS3

CSS3のmedia queriesを使ってスタイルシートを振り分ける場合、
IEではCSS3がサポートされていないので使用できませんが、
以下のjavascriptを読み込むことで、
IEでもmedia queriesを使用することが可能になります。

css3-mediaqueries.js

tableを角丸のデザインにしたい場合、
画像やCSSの背景画像を使って―というやり方が一般的（？）でしたが、
CSS3のborder-radiusを使って、
簡単に角丸のデザインのtableを実装することができるようになりました。

単純にtableにborder-radiusを指定するだけなのですが、
1点だけ注意が必要です。

それは、
｢border-collapseでcollapseを指定すると角丸が効かない｣
ということです。

CSS3のプロパティをIE8でも反映させて使うことができる、
とても便利なbehaviorスクリプトCSS3 PIE（pie.htc）。

http://css3pie.com/

角丸やドロップシャドウの処理は、
画像よりCSS3でやる方がスマートなので使っていたのですが、
IEで印刷した時にレイアウトが大きく崩れるという現象にハマってしまいました。

CSS3を使ってボックスにドロップシャドウをかけたい場合、
基本的には以下のような記述になります。
W3C CSS3準拠のwebkit系（Safari, Chrome）とMozzilea系（Firefox）に分けての記述です。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

FirefoxなどMozilla系ブラウザに対する記述

-moz-box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

CSS3の記述

box-shadow: 横方向のサイズ 縦方向のサイズ ぼかしの半径 色指定;

表示例は次のようになります。

HTML5＆CSS3辞典

CSSで背景をグラデーションにしたい場合、
CSS3を使って背景をグラデーションにしますが、
その際にはCSS3に対応していないIEではそのまま書いても反映されません。

IEは無視する、behaviorスクリプトを読み込んで反映させるなどの対応がありますが、
この他にIEの独自仕様である「filter（画像・テキストにフィルタ効果を与える）」プロパティを使って、
CSS3と同じように表示させることができる方法があります。

IEをCSS3対応にしたい場合に使われる、
CSS3 PIE_ CSS3 decorations for IEなどの,
javascript（.htcファイル）を使った方法ですが、
使う場合に注意する点があります。

CSSでグラデーション背景を指定する場合の書き方には2種類あり、
W3C CSS3準拠のwebkit系（Safari, Chrome）とMozzilea系（Firefox）を
それぞれ指定します。（角丸の場合と同じ）
基礎的な書き方としては以下のような書き方になります。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-gradient(linear, 開始する位置, 終了する位置, from(開始する色), to(#ff0)終了する色));

FirefoxなどMozilla系ブラウザに対する記述

-moz-linear-gradient(方向, 開始する色, 終了する色);

指定できる要素は『background』と『background-image』です。

CSS3以前は要素に背景画像を引き何かとちょっとしたところで使いたくても面倒だった角丸の処理ですが、
CSS3簡単な記述で表示が可能です。

Safari3など用のwebkit（W3C CSS3準拠）に対する記述

-webkit-border-radius: ○px;

FirefoxなどMozilla系ブラウザに対する記述

-moz-border-radius: ○px;

角丸のサイズによって以下の表示例一覧のように見え方が変わります。

CSS3で要素の角丸を実現する機会も増えてきていますが、
IEでも表示できるようにするには、
Google Codeで配布されているhtcファイルを利用します。

マウスオーバーした時に画像置換しなくても光るように見せる方法。

pacityはCSS3で追加される予定のプロパティです。

CSS3に関する情報サイトで、
コードの一覧などが見やすくまとめられています。

Cascading Style Sheets, level 3 (CSS3)
CSS3では全体がモジュール化され、ユーザーエージェントがどのモジュールに対応し、どのモジュールに対応しないか自由に選択できるようになる他、縦方向の書字や、HTML以外の規格にまで関与した内容となっている。現在、どのモジュールも勧告には至っていない。