旧ブログからインポートしたエントリーなのでリンクが切れている場合があります。画像はインポートしていません。
Safari 3.1を使ってCSS3を体験してみる
現在出回っているブラウザの大半はのCSS1とCSS2に対応している。CSSとはカスケーディング・スタイル・シートなどと呼ばれているもので、大雑把に言えばHTMLが文書の骨格（設計）にあたるプログラムで、CSSはその装飾（背景や文字、配置など）を司るものだと思えば良いと思う。これはインターネットで使われている技術の標準化を推進する団体（W3C）による勧告に基づいている（＝W3Cの勧告に準拠していればブラウザが異なっても表示結果に大きな違いは出ない：じゃあIEは…）。
で、CSS3というのは次世代の規格、ということになる。まだまだこの仕様に準拠したブラウザは少ないが、Safariではv3.1からこの規格に準拠した（Firefoxでも一部は既に採用されている）。まだ私もよく分かっていないのだが、とりあえずCSSでアニメーション効果を与えることが出来るそうなので早速試してみた（詳しくはSurfin' Safariを参照）。
以下に３つのボックスが表示されていると思うが、それぞれ異なるCSSを記述してあり、各々違った挙動を示すので試してみて欲しい。ただし、アニメーションをしてくれるのはWebKitをレンダリングエンジンとしているSafari（多分Windows用もOK）とRealPlayer（Mac OS X）のみ。Firefoxなどではアニメーションの過程は反映されず、それ以外のブラウザでは未確認ですが正常には動作しないと思う。
さて、こういう演出はどうやって使えば良いのかしら？
【参考】Safari 3.1の新機能を試すことが出来るサイト＠Macin' Blogさん
マウスカーソル外すとフェードインします（設定時間３秒）
体験できなかった人用のキャプチャ動画（ソフトウェアの都合上、マウスカーソルはキャプチャされていませんのでご了承下さい）。
［追記］旧ブログからインポートしたエントリのため、上記ギミックは現在動作しません
