CSS3のMulti-columnレイアウトを先取りする方法

該当記事は
A List Apart: Articles: Introducing the CSS3 Multi-Column Moduleです。

最初の方では、多段コラムが再び光を浴びてきた事情や、実際にCSS3に加わった際にどういったプロパティになるか、などの解説になります。

そして、「An interim measure for experimentation」の部分から、JavaScriptで一時的に多段カラムを実現する方法の部分になります。

実際どうしたらよいか

まず、サンプルページがCSS3 Multi-Colum Layout Demonstration and Documentation - CSScripting.comです。ここのTestCaseの部分から各サンプルページに行くことができます。

これを実現するには、一枚のjsファイルを外部から読み込むだけです。それだけで、後はCSS３のカラム周りのセレクタを使えるようになります。例えば

.article {
column-count: 2;
column-gap: 20px;
}

の様に。
実際にローカルでやってみましたが、ちゃんと再現されました（当たり前か）。

気をつけること

JavaScriptがDOM経由でCSSを取得して処理するので、JSファイルを読み出す前にCSSを外部から読み込んでおかないといけません。なので、header内での順番に注意です。

また、あまり複雑なセレクタだと上手くスタイルを取得できないようです。できるだけシンプルなセレクタにするべきだそうです。

それに気をつけていれば、ひとまずOKっぽいです。視線の動きにさえ注意して上手く使えば段組は確実に可読性を向上させると思いますし、デザインの幅も広がりますので、よさげではないでしょうか( ´-｀)