去年くらいから話題になり始めているCSSの次期バージョンCSS3。
現時点ではFirefox3以降やWindows版のSafari3以降、その他Opera、GoogleChrome、IE8などで実装されつつあります。
CSS3ではどんなプロパティが追加されるか、いくつか挙げてみると…
■::selection
選択された要素に対してCSSの効果を効かす
■:target
リンク先の要素に対してCSSの効果を効かす
■:first-child last-child nth-child
liなどで子要素に対して指定を付ける
■text-shadow
テキストに影(CSS2では定義されていたがCSS2.1で削除されたもの。今回CSS3で再定義)
■text-stroke
テキストのアウトラインを定義
■box-shadow
ボックスに影
■border-radius
ボーダーで角丸表示
■transform
ボックスの回転やズーム、位置、角度を調整
■opaciy
透明度を調整
■web-fonts
サーバー上のfontを利用可能に
などなど。
ボーダーに対しての指定やBOXへの指定で追加されるプロパティは、ちょっと便利になりそうです。
それぞれプロパティを使用する際にはプリフィックスを先頭につける必要があります。
■Firefoxの場合:-moz-
■safari、Google Chromeの場合:-webkit-
■IEの場合:-ms-
例としてborder-radiusプロパティを使う際の書き方は、
—————————-
-moz-border-radius:
-webkit-border-radius:
-ms-border-radius:
—————————-
の様な記述方法になります。
CSS3では要素に対して細かく制御が可能になりますが、まだまだ普及するまでにはCSSファイル内に記述が増えてしまうことが想定されます。。。
いろいろあるCSS3プロパティから面白そうなものを試してみました。
以下の画面を確認するにはWindows版Safari3.0以降やFirefox3.0以降でご覧ください。
(IEで見ても何も起こりません。。。)
ボーダーの角丸は結構使えそうです。
…が、やはりIE6、IE7がブラウザシェアの大部分を占めている今の時代。
ブラウザが進化したとしてもそれを使うユーザーが増えないことには意味がない様に思ってしまいます。
インターネットが爆発的に普及した時代にシェアを独占したIE6。
このIE6がWeb上から消え去り、CSS3レベルのものが標準として使うことができる日は何十年後の話なのでしょう…