CSS Template Layout Moduleの面影を追う

CSS Flexible Boxをはじめ、CSS Grid Layoutなど柔軟にレイアウト変更ができるCSSモジュールがブラウザ上で使えるようになってきました。その柔軟性に関心を持ち、使い方を紹介している記事を多く目にします。

そんな要素の配置を指定するCSSの中で日の目を見ることがなかったCSS Template Layout ModuleというCSSモジュールを紹介します。CSS Template Layout Moduleは、2005年にCSS3 Advanced Layout Moduleとして策定が始まり、2015年3月26日にWorking Group Note扱いとなってしまいました。

CSS Template Layout ModuleはCSS内に記述した文字列の順に沿ってレイアウトが決まります。「文字列を記述することでレイアウトが決まる」といってもなかなかイメージがつかみにくく、実際に手を動かすことで筆者もCSS Template Layoutの面白さを実感できました。

現在どのブラウザにも実装されていないため、擬似的に実装できるjQuery Pluginを使用していくつかのレイアウトを作成してみます。

以下のHTML構造をベースとします。

<div class="container">
<header>
<p>ヘッダー</p>
</header>
<main>
<p>メインコンテンツ</p>
</main>
<aside>
<p>サブコンテンツ</p>
</aside>
<footer>
<p>フッター</p>
</footer>
</div>

各要素に対して配置される場所を示すflowプロパティを記述します。そして、gridプロパティに配置したいレイアウト構造を記述します。gridの中の記述順を変更して今回は3パターンのレイアウトを作成してみます。

.container {
  grid: "";
}
.container header {
  flow: a;
}
.container main {
  flow: c;
}
.container aside {
  flow: b;
}
.container footer {
  flow: d;
}

上記レイアウトパターン1のようなレイアウトを組む場合のgridのプロパティ値は以下になります。

.container {
  grid: "a a a"
        "b c c"
        "d d d";
}

上記レイアウトパターン2ならgridのプロパティ値は以下になります。

.container {
  grid: "a a b"
        "d c c";
}

上記レイアウトパターン3のような特殊なレイアウトを組む場合は他とは違いgridのプロパティ値に「.」を間に入れることで可能となります。

.container {
  grid: "a a a"
        "c . b"
        "d d d";
}

最後に

このアスキーアートのような感覚でレイアウトが組めるアプローチは面白さもありながら、flowのプロパティ値の命名規則などチーム内で決めるのが大変そうだなというのが第一印象でした。

Working Group Noteという扱いになった経緯は、Jon Rimmer氏の「[css3-layout] Drop it?」からこの仕様について問題提起が始まっているようです。
CSS Template Layout Moduleの実装に各ブラウザベンダーが乗り気でなかったこと、CSS Grid Layoutは実装へ向けて動いているブラウザベンダーがいたこと、CSS Grid Layoutと実現したいことが似ていたこと、さらにその使い分けに利用者の混乱を招くことが、Working Group Noteへと変更された主な要因なようです。

面白い仕様でありながら、CSS Grid Layoutに取って代わられたTemplate Layout Module。Working Group NoteとなったCSSはTemplate Layout Module以外にもあったりします。最新の動向を追いつつも、 W3CのCSS Current StatusでWorking Group Noteを見つけては廃止となった機能に思いにふけるのも一興といえるでしょう。