krzm.jp
黒住浩司 Webサイト

フレキシブルボックスのメロディ ― CSSの無知への傾向と対策

内容

第三幕
–フレキシブル ボックス レイアウトの仕様変更–

と、決断した直後の2012年3月末、或る驚くべき情報が、さる筋より入ってきました。というより、ほんとうは偶然見つけました。実は、この情報を見つけたことで、私はこの記事を書く気になったのです。

そう、それは、フレキシブル ボックスの仕様変更です。詳細は、W3Cの以下のページ(フレキシブル ボックス レイアウトの仕様書)に記載されています。

http://www.w3.org/TR/css3-flexbox/

これは、2012年3月22日付の作業草案(Working Draft)ですが、たとえばdisplay:boxは、display:flexboxと、値の名称が変更になっています。同様に、プロパティ名もbox-directionがflex-direction、box-ordinal-groupはflex-orderといったように、全面的に変更されています。

先のソースコードでも、本来はdisplay:boxだけのところに、display:-ms-boxのような指定を追加していました。この「-ms-」といった記号は、「ベンダー接頭辞」と呼ばれるもので、まだ仕様が未確定のプロパティや値の前に付けます。msやmozで表されているのは、ブラウザを開発している会社や団体の略称で、ようは、そのブラウザが「試験的に当該スタイルを組み込んでいます」、という表明です。仕様が草案(Draft)段階では、ベンダー接頭辞を付けるべきだと、W3Cが強制ではないけれど、求めています。

ただ、世の中では、犬も杓子も「HTML5」だと浮かれ、その尻馬にちゃっかりと乗ってしまったCSS3も、最早使って当然のものであるように扱われています。そうした解説では、ベンダー接頭辞の意味するものはどこかへ置いておかれ、「Firefoxの場合は-moz-を付け、Safariでは-webkit-を…云々」といった具合に、初めからそうした書式であるかのように扱われることも多々あります。そして、非対応のIEはクズ扱い…。まあ、IE 6だけは、諸君の役割は終わった、諸君は、今後とどまるべき場所へ行け―歴史のくずかごへ!、と宣言されるべきかもしれませんが。

しかし、確定していない仕様に対応していることをどんなに誇っても、あとで面倒が待ちかえまえています。変更されたフレキシブル ボックス レイアウトのプロパティ等は、やはりまだ草案段階ですから、またベンダー接頭辞を付ける必要があるかもしれません。また、草案ですから、元に戻るかもしれません。そうなると、既に指定してしまったものを、大量に書き換えなければならない場合も出てきます。

フィナーレ
-まとめ-

その意味では、Operaのフレキシブル ボックスへの対応(というか対応)は、現時点では正しい選択と言えます。拍手喝采、さすが北欧、ブルーベリーよりビルベリーみたいな感じかもしれません。つまり、この記事で言いたかったことは、CSS3で楽しもう、という話ではなく、CSS3を使うなら、互換性対策がまず必要であり、仕様の完成段階に応じても、そのスタイルの採用を判断しなければならない、ということです。

HTML5にしろ、CSS3にしろ、確かに現時点で利用できるものを試し、その運用スキルを磨くことは大切です。しかし、旧いブラウザを切り捨てて、ただ新しいものばかりを追求するだけでは、結局のところ、IE5ぐらいの時代に、各ブラウザが独自機能の採用に走り仕様が混乱してしまったことを、W3Cの錦の御旗の陰に隠れて、繰り返しているようにしか思えません。「おのれ薩長許すまじ」と、新選組副長・土方歳三も(たぶん)思っています。

そんな時、互換性対策も考えながらHTML5やCSS3の採用を熟慮していくなら、地に足の着いた「先進性」を得られるのではないか、と私は考えている次第です。

1 2 3