box-sizing

暗黒時代は終わった。ついに、計算なんてしたくないというという意思のもと、新しいCSSプロパティbox-sizingを人々は作りだした。要素にbox-sizing: border-box;を設定すると、要素のpaddingとborderの幅が要素のwidthを増やすようなことはもはやない。 これは前のページと同じ例だ。だが、両方の要素に対して、box-sizing: border-box;を適用している:

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

これはかなりいい。だから、自分のページ内の全要素に対して、この設定を適用したいと考える人が現れてもおかしくはない。そんな人は、以下のようなCSSを書くと良い:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

これでページ内の全要素に対して、いつでも直感的にサイズ指定できるようになった。

box-sizingはとても新しいプロパティだ。だから、今のところ、例に示したような-webkit-や-moz-といったプレフィックスを使った方が良い。プレフィックスを使う事で、ブラウザ独自の実験的フィーチャーを利用することができる。また、IE8+の存在についても忘れてはならない。