DN*BLOG

W3Cのサイトを何気なく見ていたら、とても興味深い記事を発見！

Template-based positioning

全部英文なんで書いてある記事はよくわかりませんが、内容は例文でわかりました。
まずは下記のソースをご覧下さい。

CSSソース

<style type="text/css">

dl { display: "ab"
　　　　　　　"cd" }
  #sym1 { position: a }
  #lab1 { position: b }
  #sym2 { position: c }
  #lab2 { position: d }
</style>

htmlソース

<dl>
  <dt id=sym1>A
  <dd id=lab1>A is een aapje
  <dt id=sym2>B
  <dd id=lab2>B is de bakker
</dl>

まず、CSSですが。
dlにdisplayでレイアウトを構成するテンプレートを記述をしています。
そして、それぞれのIDに配置したい場所の「a,b,c,d」をpositionで記述。

htmlは普段通りに書けばOK

これで上記の画像のレイアウトができるみたいです。
もう、floatとか必要なくなるんですかね。floatってレイアウトが崩れる原因の一つでもあるのでそれが使わなくてすむようになるならすごく楽になるんではないですかね。

全体のレイアウトを構成する例文も載っていました。

CSSソース

@media all
{
  body { display: "aaa"
　　　　　　　　　"bcd" }
  #head { position: a }
  #nav { position: b }
  #adv { posiiton: c }
  #body { position: d }
}

@media all and (max-width: 500px)
{
  body { display: "a"
　　　　　　　　　"b"
　　　　　　　　　"c" }
  #head { position: a }
  #nav { position: b }
  #adv { display: none }
  #body { position: c }
}

上記の例文は3カラムのレイアウトでしょうか。
下記は1カラムですね。

例文はこの他にも沢山のっています。
タブボックスや、フォーム、新聞のようなレイアウト等。最後の方はソースがすごい事になっていました・・・。
全部のせてたらきりがないので興味ある方はW3Cのサイトでご確認下さい。

最後の方の例文は使いづらそうだ・・・。
IEだとすごいレイアウト崩れちゃいそう（笑）

W3C – CSS Advanced Layout Module