CSS3をちょっと触ってみる

今度はCSS3

　HTML5の周辺技術というよりもうHTML5そのものとして語られる事の多いCSS3ですが、策定時期が近いだけで、特にペアで使う必要はありません。
　とはいえ、最新技術、使ってみたいものじゃございませんか。

CSS3の概要

　ところで、9年前はまだまだテーブルレイアウト全盛だったかと思います。
　今、テーブルでレイアウトしてると笑われかねませんが、現状は結局テーブル要素が<div>に変わっただけ、というか装飾のために2重3重に<div>で囲うなどして、余計複雑化してるじゃないですか。
　そこで、代表的なデザイン要素はCSSで指定できるようにして、HTMLの方で変な裏技を使わなくて良いようにしよう、というのがCSS3までの流れ。

　ちなみに、XMLで記述するスタイルシートXSLってのがあって、XHTMLとXSLで組むのが書式が統一されて便利だろ、いろんなXMLにも使えるし、って考え方もあるんですが、ぜんぜん広まってないですね。
　XMLの構造を書き換えるXSLTは、結構便利かなと思うんですけどね。
　Mac OS XだったらAppleScriptのOSAXのXSLT Tools Scripting Additionなんか使うと便利だよ。
　XalanというJavaのコマンドラインベースのツールも、xsltprocというシェルのツールも、今のMac OS Xなら標準で入ってる。

新機能

　CSSの場合は、バージョンによる違いはあんまり気にする必要が無いというか、結局現在のブラウザがどの程度対応しているかという実装状況が大事。
　CSS、CSS2、CSS3と基本的には仕様の追加による変化なので、使えるヤツ使っときゃ良い、という感じ。
　HTMLの場合は、ほとんど概念レベルから違ってるので、自分がどの仕様のHTML書いてるか意識する必要があるのとは対照的。

　従来のCSSで裏技で作ってた装飾の代表的なものは「角丸」でして、CSS3ではborder-radius属性で使える、わーい。
　もうCSS3はこれが使えるようになったということ以外は、もうおまけみたいなもんでしょ。

　あと、影をCSSだけで表現できなくて、同じ文字をHTMLで2回描いてから重ねるという荒技が使われてた、text-shadowとか、それのブロック版box-shadowとかもある。
　このあたりは結構前からSafariにはベンダープレフィックス(先行実装時に属性の前に付けておく開発ごとの接頭辞)つきだけど存在してて使ったこともあるので、個人的にはさほど珍しくない。

　それから背景にグラデーション付けられるようになった…けどこれはまだ書式が統一されてないので使いにくい。

　もうひとつ、ボックスレイアウトってのが導入されて、floatより簡単に段組みができる、という事みたい。
　これもまた各ブラウザの実装状況が微妙な雰囲気。

　他に、新たな属性だけでなく、適用要素の指定方法も増えて、多彩で柔軟な要素指定ができるようになった、ということ。
　属性の内容を正規表現で指定するとか、もー凄いことになってます。
　完全にプログラミングの領域に入ってきてますな。

　そもそもの話、私はCSS2もあんまり使い込んでいなかったので、基礎からやり直した方がいいような気がしてきた。