CSS3 Pre-Reference



何ができる?

CSSバージョン3の登場で、何ができるようになるのか? それを簡潔に解説していきます。

要素を自在に操る

before_after.png

::before(n)を使っていくつでも前方に装飾を追加、::after(n)を使っていくつでも後方に装飾を追加、::outsideを使っていくつでもラッパーを追加。それらにスタイルを指定する事はもちろん、画像、属性の値、カウンター、任意のものを追加する事ができます。

奇数個目の要素、3n+2個目の要素、チェックされた要素、選択中のテキスト。新しいセレクタを使えば、不要なIDやクラスは、最早不要。ソースコードをよりシンプルに。

すべては、自由

高度なアニメーション

今までは、ごく簡単な演出をしたいがためにFlashを実装するはめになってきました。その結果、回線に負荷がかかり、なおかつアクセシビリティを犠牲にしてきていました。

CSS3では、回転・変形・3Dなどの高度な演出、タイムラインの編集も自在にできるようになっています。

それどころか、ごく少量のテキストだけでストレスフリーにアニメーションを展開できます。

このページでも、ごく簡単なアニメーションを実装しています(現状、Safari/Chromeでしか実装されていません)。

デモンストレーション ページ(MacOS X+Safari 4.1以上 以外は表示できません)をご笑覧ください。

demo.png
この画面は、CSS3と1枚の画像のみで実現したページです。

小手先のテクニックは過去のものへ

角丸(角を丸くしたボーダー)、影付け、半透明、高さが揃うボックスを並べる。これらのごく簡単な演出を実現するために、これまで多種多様なテクニックが考案され、紹介されてきました。

CSS3では、border-radius、box(text)-shadow、box-reflect、opacity、display:boxすべてごく簡単なプロパティの記述で実現できます。

実装はまだまだ先

と、夢のような世界を紹介してきましたが、最高の実装度を誇るMacOS+Safariの組み合わせですら実装が30%に満たない状況です。

CSS3では、プロパティ、値や式を一覧すると300もの新しい実装が追加されています。もしかしたら、ブラウザ開発者が諦めてしまう可能性もあります。

現状、アニメーションの実装はタイムラインがアナログな管理となってしまうため、ごくごく簡単な演出にしか利用できません。

今後考えられる展開として、仮にブラウザの実装が進めば、DreamWeaver、FlashなどでのCSS3の実装が実現されるかも知れません。

どちらに転ぶかは、時間が答えを出してくれるでしょう。

投稿されたコメント

コメントする


トラックバック