そんな大層なことですか。
生活に絡んでくるようなことですか。
でも楽になるんだからいいじゃない。
一度は経験したことがあるであろう「えーとーpaddingが6pxでーborderが1pxだからーえーとwidthはーーー」
下山みたいにベテランになると年季の入ったマイメロの電卓がお手伝いをしてくれるわけですけど、この電卓もいつまでシゴトしてくれるか分からないのでbox-sizing使っちゃおうってお話です。
box-sizingのブラウザ対応はどうなってるのか？
IE8があれですねー。
IE8のシェアは？
去年の6月から今年7月のデータです。
StatCounterのデータによればIE8のシェアは3.29%です。
考え方は色々だと思いますけど、この3.29%をどう取るかです。
box-sizing使うと100人に3～4人は崩れちゃうのか～、もしくは100人にたった3～4人か～。
下山個人はもう後者でいいような気がします。ような気がします。
本題に戻ります。
margin、padding、borderは本来どう解釈されるか
通常ボックスなどmargin、padding、borderを使って形成する要素の総サイズ(横幅)は全てのサイズを足したものになります。
.hoge {
width:200px;
padding:10px;
margin:10px;
border:1px solid #888;
}box-sizing(border-box)を使うと
paddingとborderはwidthに飲み込まれてしまいます。
.hoge {
width:200px;
padding:10px;
margin:10px;
border:1px solid #888;
box-sizing:border-box;
}まとめ
使いどころといえば、グローバルメニュー。
See the Pen GJdOWL by mitsuki sagayama (@sagayama) on CodePen.
小技すぎて分かりづらいですが、幅900pxに幅180pxのメニューを並べてるんですが、メニューとメニューの間に1pxをborderが入ってます。
border-leftで入れてfirst-childで先頭だけ消してるのはヨシとしてこれだけスマートにhtmlとcssを書けてるのは「box-sizing:border-box;」のナセル技だと思います。
「box-sizing:border-box;」なしで実現しようとすれば1つだけメニューのサイズを1px小さくするしか、全体を899pxにするかですね。
今日のまとめはまとめらしいくてステキですねw
