2011年3月3日木曜日

Firefoxで display: -moz-box 指定が効かないときの回避策

CSS3では、3カラムレイアウトなんかが簡単にできる、子要素が横並びに並んでくれるdisplay: boxってのがあります。

参考サイト: CSS3 でのレイアウトで使える box 系プロパティのまとめ | CSS Lecture

例えばこんなCSS指定とタグを書くと、
<style>
#container {
width: 100%;
display: -webkit-box;
display: -moz-box;
}

#left {
border:1px solid red;
width: 100px;
}

#center {
border:1px solid green;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}

#right {
border:1px solid blue;
width: 150px;
}
</style>

<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>

対応ブラウザでは以下のようになるわけです(生でタグ書いてるので対応してればきれいに横並びになってるはずです)。


left

center

right



しかし、これがFirefoxでうまくいかないときがあります。
次のように、親要素にposition指定をしてみます。メニューバーをdisplay: boxで作ってposition: fixedで、なんて使い方とかあると思います。

上で出した例の#containerにposition: fixedを入れてみます。
#container {
width: 100%;
position: fixed; /* add */
display: -webkit-box;
display: -moz-box;
}


すると、先ほどは横に揃っていた子要素達が、Firefoxではこうなります(今度は生タグじゃなくて画像)。

SafariやChromeの場合、横並びのままなんですが、Firefoxだとdisplay: -moz-boxが効いてません。

理由はわかりませんが、Firefoxでは親要素(「僕の子らは同じ1つのbox(すなわち親である私)内に収まりますよ」と指定しているやつ=本エントリでは"id=container")にrelative以外のposition指定をすると、boxとして揃ってくれません。Firefox 3.6.14でも、Firefox 4 beta2でも、この現象はでます。

これを回避するには問題となってるposition指定を外すことです。でもそれだと本来のposition(fixedとかabsoluteとかで指定したかった位置)が意味なくなります。
そこで、こんな風にさらに親要素をひとつつけてやって、それにpositionの役割を果たしてもらうことで、うまくいくようになります。


<style>
#parentBox {
position: fixed;
}

#container {
width: 100%;
display: -webkit-box;
display: -moz-box;
}

#left {
border:1px solid red;
width: 100px;
}

#center {
border:1px solid green;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}

#right {
border:1px solid blue;
width: 150px;
}
</style>

<div id="parentBox">
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</div>


…で済めばいいんですが、サイトのデザインによっては、さらにいろいろ微調整が必要になることも考えられます。widthとか。そこはまあがんばってください(投げ)。


icotileのFirefox対応検討中、この現象に遭遇しました。何が影響してるか検証した結果positionと判明したので、ならばと回避策を考えてみた次第です。

icotileとは:
Twitter のフォローしている人/されている人やリストを iTunes のような操作感で管理でき、また各ユーザーに対して自分だけのメモも残せる Web アプリケーション。Developed by @ogaoga / Designed by @piyotori
ってことで、最近icotileのデザイン周りでCSS3あれこれ調べたり、ビジュアル的なデザイン面以外でも普通にJavaScriptのロジック部分も書いたり、やってます。(そしてCSS3楽しーってなると勢いあまってシャルロッテとか作るわけです(前回エントリ参照))

2011年3月2日水曜日

CSS3でまどか☆マギカのシャルロッテを描いた

CSS3(webkitのみ)でまどか☆マギカのシャルロッテを作る、の続きです。

今朝未明のエントリでは力尽きて耳というか羽というかまでは作れませんでしたが、あとちょっとだしということで、付けました。

この完成版で、background-colorやらborderやらの指定を取り除き、border:1px solid whiteのみ適用してみると、こうなります。


だいたい、border-radiusを2角にだけかけたdivを、rotateして位置はabsoluteでチマチマ合わせてます。
目はradialタイプのgradientで色分け。
ひんまがった口には、border-radiusめいっぱいかけたdiv=円のborderを2辺だけ表示にして半円にし、それにskewやらscaleやらrotateやら適用してます。たぶん。


汚いソース見たい奇特な方は下記ページを開きブラウザの「ソースを表示」等からどうぞ。
実際のページ
※リンク先ページ内オブジェクトクリック危険

CSS3でまみまみしたい

CSS3で描いたよ!canvasとか使ってないよ!
まどか☆マギカ見たいと思ってるけどまだ見てなくて実はよく知らないよ!


汚いソース見たい奇特な方は下記ページを開きブラウザの「ソースを表示」等からどうぞ。
実際のページ
※リンク先ページ内オブジェクトクリック危険
※webkit限定

羽みたいのはもう疲れたから付けない。
付けました(2011/03/02 22:30)