崖っぷちの男

たぶん技術っぽいネタ。ブログ名が決められない

CSS3 の column-count とか使いたかった。のに

 CSS を書くだけでいい感じにコンテンツを複数列にしてくれる CSS Multi-column Layout Module なんですが、使ってみて分かったのは


特定の要素について途中で分割させない (列をまたがせない) ような設定が Firefox ではできない (少なくとも Firefox 7 ではまだ)


ということ。他のブラウザについてはどうかというと

  • Webkit 系の ChromeSafari は -webkit-column-break-inside で可能。
  • Opera (11.10) は break-inside で可能。ベンダープレフィクスもなくて素敵。
  • IE は今のところはできないのが分かりきっているし誰もそんなことは期待してないので逆に問題なし。 IE10 からは break-inside で可能っぽいけどまだ入れてないので未確認。

※ちなみにこのページ( E BISUCOM TECH LAB : CSS3プロパティ&ブラウザ対応一覧 )がとても役立ちました。

何の問題ですか? *1

 で何が問題かというと、Firefox は -moz-column-count とか、複数列のプロパティ自体には対応しているんです。3.6 あたりから。とするとこういう CSS の記述に対応しているかどうかで処理を変えられる JavaScript ライブラリの Modernizr: the feature detection library for HTML5/CSS3 を使ったときに当然 Firefox は複数列 CSS 使えます! って判断されるんですね。


 でも Firefox では列をまたがせない要素は指定できないので、指定したいなら jQuery なんかで

$.browser.mozilla !== undefined

みたいな条件で Firefox では問答無用で (9 以下の IE と同じく) JS で複数列を再現しないといけないと。Firefox は最初から break-inside 込みで複数列 CSS を入れてくれるか、あるいは全く対応しないでいてくれた方がよかったなーなんて。table とかもすぱすぱ分割してくれるので break-inside はあった方がいいです。

JS で複数列

 で Firefox や今の IE で複数列をやりたい場合の JS に何使うかですが、長いものにはまかれろということは jQuery でしょうということで、jQuery 用のプラグイン Columnizer jQuery Plugin を使ってみました。


 これを使うときの注意点は column-gap がない ってことです。上の url のコメント欄に jQuery で最初の列以外にあとから margin-left を指定して間を空ける方法が書いてあるのですが、要は float なので最後の列が回り込んでくれなかったりしてイヤン。最初から margin-right やら margin-left やら指定しておいた方が自分の場合はよさげでした。


 あと件の分割したくない要素には dontsplit クラスをつけとけば OK です。


 あと気をつけるとしたら lastNeverTallest は Never って言ってる割には結構 last を Tallest にしてくれる こと。lastNeverTallest は要は最後の列が最長になるのをできれば防ぐ、というプロパティです。


 最後の列が最長になっちゃうのは「jquery.columnizer.js」の最後の方のこの部分を見てると、「adjustment < 100」が false になる時のようです。要は調整幅が基準の 100 を超えると調整してくれないと。なんでこの 100 を自分で増やせばもうちょっとがんばってくれます。要素のサイズによりますが自分は 200 から 250 あたりにして丁度いいくらいでした。ちなみにこの部分は min の方でも全然探せるので無問題です。

                              adjustment += 30;
                              if(adjustment < 100){
                                   targetHeight = targetHeight + 30;
                                   if(loopCount == maxLoops-1) maxLoops++;
                              }else{
                                   debugger;
                                   loopCount = maxLoops;
                              }


 ついでにこの lastNeverTallest を true にする場合、buildOnce も true にした方がいいかもしれません。ウインドウをリサイズしたら結局 last が Tallest に戻っちゃったりしたので。この辺ちゃんと調べてませんが。




 まあそんな感じでアニメーションとかおもしろいので CSS3 使っていきたいけど各ブラウザの対応考えると結局 JS か…と思ってしまいました。Mac & iPhone ユーザ的には…


 みんな Webkit 系になあれ。
 こっちには伸び盛りの Chrome さんとあと伸びきってる気もする MobileSafari さんがついているんだ!

*1:[http://dic.nicovideo.jp/a/%E4%BD%95%E3%81%AE%E5%95%8F%E9%A1%8C%E3%81%A7%E3%81%99%E3%81%8B%3F:title]