KOJIKA17

floatを使わなくてもよくなる。
Template Layout Module が素敵すぎる今後の話

まだどのブラウザも実装されていないですが、Template Layout Moduleが素敵なので紹介します。

Template Layout Module とは

CSSコードに直接、アスキーアートでレイアウトを描き、そこにコンテンツを流し込む実験的な仕様です。
現段階ではCSS3のモジュールです。

簡単な具体例

この例ではCSSのdisplayプロパティのところで、2x2のスロットを用意しました。
そこにCSSのpositionプロパティで割り振った値を、割り振っています。

<style type="text/css">
body {
display: "aa"
         "bc"; }
head { 
  position: a;
  text-align:center;}
nav { position: b; }
#content { position: c; }
</style>

<head>
  <h1>Position A</h1>
</head>
<nav>position B</nav>
<div id="content">position C</div>
表示されるレイアウトです。分かりやすいように色をつけてます。

floatを使わずに、レイアウトを行うことができます。
一見、単純に見えるTemplate Layoutですが、displayプロパティにさらに値を加えることで複雑なレイアウトもCSS上で可視的に制作することができます。

Template Layout Module - displayプロパティと擬似要素

基本形

上記の図のようにスロットを用意し、対応させたいセレクタにpositionプロパティをセットすれば適用されることになります。
また、この仕様はHTMLの順序は気にせずに扱うことができるので柔軟性の高いCSSを書くことができます。

擬似要素

Template Layout Moduleでは新たな擬似要素が作られています。

::slot()

この要素はpositionプロパティで決められた値を取り出して、その要素に対してプロパティをさらに追加することができます。例は以下の通りです。

body { display: "aabb";}
#a { position: a;}
#b { position: b;}
body::slot(a) { padding: 10px;}

上の例では"a" "b" のみですが、さらに要素が増え、id名class名もちゃんとしたものにした場合、どの要素がどこにかかっているかわかりにくくなるので、メンテナンス性を考え、このような擬似要素が作られたのだと予想してます。

便利なTemplate Layout Moduleだけど...?

冒頭にも記載しましたが、どのブラウザも実装されていません。 各ブラウザベンダーもほとんど話題を聞かず、半年前ぐらいにOperaのCTOのHåkon Wium Lie氏がインタビューで言及したぐらいしか私は知りません。(知っていらっしゃる方がいらしたら、教えて欲しいです。。。)

しかし色々調べているうちにTemplate Layout Moduleの擬似的に実装できる、jQuery pluginを見つけました。

css-template-layout pluginを試してみましたが、現場で使うには厳しいレベルのように思えます。
backgroundとborderを引いた状態で、paddingを指定してやると背景ずれたりするので、子の要素に対して細かい指定をしなければなりません。
現段階でどうしても使いたい場合は、アウトラインのみに絞るべきだと思います。

ただしCSSで実際に行えるようになれば利便性はかなりよくなると思います。
display:boxよりも高機能なことが、簡単に行えるようになるので今後の策定に期待です。