結論
状態:-
閲覧数:2,732
投稿日:2015-09-05
更新日:2015-09-05
box-sizing設定変更は、サイト全体に対して甚大な影響を及ぼす
・「理解している人が設定変更する場合」は問題ないが、よく分からない人が設定変更すると、泣きを見るかも
※そのサイトの「box-sizing設定が変更されていることを知らない人」、もしくは「box-sizing自体を知らない人(昨日までの私)」が、取り組むとハマる可能性がある
・「理解している人が設定変更する場合」は問題ないが、よく分からない人が設定変更すると、泣きを見るかも
※そのサイトの「box-sizing設定が変更されていることを知らない人」、もしくは「box-sizing自体を知らない人(昨日までの私)」が、取り組むとハマる可能性がある
トラブル遭遇例1 / Bootstrap をアップデートしたら、jQueryで取得される値が変更
Bootstrap 3.3.4
Bootstrap をアップデートしたら、jQuery offsetメソッドで取得される値が変更
・それまで整数で返ってきていた戻り値が、ある日いきなり小数点で返ってくるようになる
原因を特定できない
・ブラウザの問題?
・jQueryの問題?
※原因を想定すら出来ず、苦しむ
犯人はbox-sizing
調査した結果、判明した事実
・bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
具体的には、下記組み合わせの場合において取得値が変更される可能性がある
・box-sizing: border-box;
・SVG viewBox
・border
※いや、普通は分からないでしょう、そんなの
・box-sizing: border-box;
トラブル遭遇例2 / perspective使用時に、どうしても天地左右中央に配置できない
天地左右中央に配置できない
display: table-cell;指定しているのに位置が微妙にズレる
・もしかして、perspectiveだから?
→ 関係なかった
犯人はbox-sizing
bootstrap.cssに記述されていた 下記box-sizingによる影響を受けていた
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
対応
初期値で上書き
* {
box-sizing: content-box;
}
※ライブラリCSSは極力変更しない、という方針に基づき
・floating 3D objects using nested transformations (with preserve-3d)
box-sizing をみんな賞賛し過ぎ! そんなに魅力的なプロパティとは思えない。むしろ出来れば使用を避けたい
絶賛の嵐
タイトルだけを読めば、導入すれば全てが解決するようにもとれる
box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
borderもpaddingの数値も気にしなくていい!!cssのbox-sizing
ネット情報に反論
魔法のプロパティではない
・「ボックスサイズの算出方法」を変更する危険(影響度が大き)なCSSプロパティ
・ある一面だけ見れば魔法のように便利な側面があるかもしれないが、それはあくまでも全体の一部分でしかない
borderやpaddingの数値を気にする必要はある
・従来とは計算方法を変更するだけ
・borderやpaddingの概念や数値が、レイアウトの世界から実際に消えてなくなるわけではない
・つまり、裏では、それに伴う処理が発生している
・単純な例では自動で対応する(?)ようだが、複雑な場合(SVG viewBox × border など)は手動で対応する必要が生じてくる