* { box-sizing: border-box } でいいんじゃね？
wozitto初期値である box-sizing: content-box だと、要素がコンテンツの幅 + padding + border を足したサイズになるので、widthを計算するのが大変、レイアウト組みにくい
なので以下のように全ての要素にbox-sizing: border-boxを指定して、widthを計算、予想しやすくした方がいいのではないか
* {
box-sizing: border-box
}
ひとまずざっと参考になりそうな資料を
wozittoUI ライブラリはどうしてるんだろうか、実装をのぞいてみる
wozittobox-sizing: border-box はブラウザーが <table>, <select>, <button> の各要素、また <input> 要素のうち type が radio, checkbox, reset, button, submit, color, search であるものに対して使用する既定のスタイル付けです。
wozittoふむ
要素をレイアウトする際には、 box-sizing を border-box に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 position: relative または position: absolute を使用する場合、 box-sizing: content-box を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。
wozittoThe content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified <length-percentage>.
wozitto逆にユニバーサルセレクターでbox-sizing: border-boxを指定して問題になることはないのか
wozitto要素の幅や余白を%で指定したいときに、borderを加えると親要素からはみ出てしまうことがある
marginとwidthを%で指定して、paddingだけpxで指定すると親要素からはみ出てしまうことがある
https://saruwakakun.com/html-css/reference/box-sizing
wozittoこれはなるほどな〜。
この指定だと、全ての要素に固有の値を指定することになる。
なので、自然な継承にはならない。
* {
box-sizing: border-box;
}
例えば、border-boxのデフォルト値はcontent-boxなので以下のような実装は、このような継承になる
.wrapper {
...
box-sizing: border-box;
}
<div class="wrapper"> <!-- I'm border-box -->
<div class="inner">hogehoge</div> <!-- I'm border-box -->
</div>
しかし以下の実装をすると、継承はこのようになる。
* {
box-sizing: border-box;
}
.wrapper {
...
box-sizing: content-box;
}
<div class="wrapper"> <!-- I'm content-box -->
<div class="inner">hogehoge</div> <!-- I'm border-box -->
</div>
なのでbox-sizingの値を自然に継承させるには、以下のように書くといいね
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
あれでも box-sizing は継承なしプロパティーなので、設計的には継承されないのが自然じゃないのかな
wozittoまず前提としてレイアウトを組みやすくするため全ての要素は box-sizing: border-boxであった方が良い。と
次に box-sizing は標準では継承なしだが、これを継承ありにしても良いのか。という問題が出てくる。と
wozittoOne potential gripe with it is that box-sizing isn’t normally inherited, so it’s specialized behavior, not quite the same as something you’d normally put in a reset.
https://css-tricks.com/box-sizing/
なるほどCSSの標準に手を加えているのは理解した上で、利便性向上のため意図的にやっていることなのか
wozittoまぁ標準の仕様に従うより、オーバーライドした方が使いやすくなることはあるか
wozittobootstrapも同様
wozitto実装もされていたがマージされずCloseされてる、いろいろ辛そう
Chromeでは、box-sizingの継承がdetails要素で正しく行われないバグがあるらしい
detailsを使う場合は要注意だ
wozittoCodePen
wozitto時系列が逆だな。
正しくはこう
①元々は以下のような実装だった。
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
②details要素では正しく継承されないバグを発見。
以下に変更
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-boz;
}
③経緯を知らない人が、inheritで実装することを提案したが、以上のような流れがあったのでClose
wozittoantdにはissueがないので実装してPR送ってみよ