CSS Regions のデモと解説

何年か前からアドビがW3Cの標準化プロセスに参加して、より自由なウェブを作ろうとしているが、関わっている２つのCSS仕様「Regions」と「Shapes」が最近ブラウザに実装されてきているので軽く紹介したいと思います。

まずはデモだ！しかし本機能はまだ一般的なブラウザには実装されていないので、Chromeのベータ版カナリーを使ってください。また、本機能はまだ実験状態なので、カナリーのアドレスバーに「chrome://flags」を入力し、設定ページで「試験運用版の WebKit 機能を有効にする」という設定を有効にしてください。そうするとデモを見れるはず。

そしてCSSリージョンのデモはこちら。画面の横幅やズームをいじってみてください。エラーメッセージっぽいのが表示されるようならば、上記ステップのブラウザビルドと設定フラグを再度確認してください。

では機能の説明に入りましょう。

CSS リージョンとは、コンテンツのフロー（流れ）の定義と表示を分けるための機能である。図で言うとこんな感じ：

CSS リージョンを使うにはdivの２種類を用意する：コンテンツの中身を定義するdivとコンテンツを表示するためのdiv。ブラウザが前者のdivの中身を後者のdivの形に合わせて表示する。雑誌や新聞によくあるようなレイアウトをウェブで再現するためには欠かせないCSS機能になると思う。

コードでは、中身用のdivを「 flow-into: XYZ; 」で指定し、表示用のdivを「 flow-from: XYZ; 」で指定できる。「XYZ」はコンテンツのフローの名前（どんな文字列でも使える）。ちなみに上記のデモはChromeに合わせてベンダープレフィックスの「-webkit-」を使っている。「-ms-」に変えたら、同じデモがIE10で正しく表示されるはずです。

最後に一言ですが、CSSリージョンを実践的に使うのはまだまだです。現状ではカナリー、Android版Chromeのベータ版、Webkitナイトリー、そしてIE10のみが実装して、全ての場合にベンダープレフィックスが必要。

上記のデモに同じく実装される「CSS シェイプ」は次回の記事で説明したいと。