フロントエンドエンジニアをやるときに、「余計なことはせずEricMeyerのリセットCSSを使おう」と教えてもらってからEricMeyer氏のを使い続けている
困ることはなかったが、もう10年前のやつなのでそろそろと思っていた
そんなとき、以下の記事をみつけた
そしたら出だしが、
For a long time, I used Eric Meyer's famous CSS Reset. It's a solid chunk of CSS, but it's a bit long in the tooth at this point; it hasn't been updated in more than a decade, and a lot has changed since then!
とあり、私とまったく同じ状態だったので導入から興味が湧いた
以下は記事にあったリセットCSSの説明
box-sizingは直感的にわかりやすいborder-boxにする
*, *::before, *::after { box-sizing: border-box; }
デフォルトマージンは消す
* { margin: 0; }
html, bodyの高さを100%とする
mainコンテンツを高さ100%にしたいとき、html, bodyも100%にしておかないと100%にならないため指定する
html, body { height: 100%; }
line-heightの設定とフォントのアンチエイリアス
line-heightはデフォルト値がブラウザによって異なるが、だいたい1.2前後になる傾向があるとのこと
ただWCAG基準は、行の高さは少なくとも1.5でなければならないので1.5を指定する
-webkit-font-smoothing: antialiasedは、AppleがMacOSのMojaveでOS全体でサブピクセルアンチエイリアスを無効にしたが、ややこしいことにMacOSブラウザではサブピクセルアンチエイリアス処理がされるため、それを明示的にOFFする設定とのこと
これは知らなかったので勉強になった
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
メディア
画像は「インライン」要素と見なされるのでdisplay: blockにする
img, picture, video, canvas, svg { display: block; max-width: 100%; }
フォームのフォントをinheritにする
textareaなどはデフォルトのフォントが小さいため、フォームにフォーカスを合わせるとブラウザが自動的にズームインしてしまって使いにくい
これをinheritを設定しておくと自動ズームを回避する
input, button, textarea, select { font: inherit; }
textのオーバーフローを防ぐ
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
isolationでJSフレームワークで生成するコンテンツを常に上に表示させる
isolationプロパティを使用すると、z-indexを設定しなくても他の要素の上に常に表示されることが保証されるらしい
知らなかったので使って検証したい
isolation - CSS: カスケーディングスタイルシート | MDN
#root, #__next { isolation: isolate; }
全部を適用できるかはわからないが、検証して取り入れたい
