#24 そろそろオレの考えたさいきょうのリセットCSS作ってみる【ぴよぴよコーダーの開発日記】
エリックメイヤーから、そろそろ10年。リセットCSSを見直してみようと思う。最近はモダンブラウザ向けに、新しいreset.cssが出てきているようなので、それらを比較しつつイイトコ取りをしてみるぞ。
比較したものは、モダンブラウザに最適化したA Modern CSS Reset、ブラウザの後方互換にも対応しているCSS Remedy、それからみんな大好きEric Meyer's Reset CSS です。
noteってtableタグ使えないんだね。。ってことで残念だけど比較画像を貼ります。
上から、何が最適かを検討していこうと思います。
box-size：すごい重要なので、どのreset.cssにも書かれている。これは必要。
余白：Eric Mayerはhgroupとかなくなったタグもあるので冗長かな。CSS remedyはbodyだけだから足りなすぎ！figureがUAスタイルシートで40pxの余白つくのとかすごい嫌なので選択するとしたら、Modern CSS resetかな。
リストスタイル：ul, olもUAスタイルシートの余白調整がつらいので、こちらもModern CSS resetを選びたい。
HTML5のタグ：今のところ、display:blockにならないのって、IE11ではmainタグだけだし、IE11以上の推奨環境なら main { display:block } だけでいいかな。なので、どこのも選択しない。
フォーム系：CSS remedyの余白指定はIE10向けなので、モダンブラウザでは考慮しなくてよさそう。Modern CSS resetのfont-familyの指定も、現状指定しないことで困ったことはないかな。
body：Eric MayerとModern CSS resetでline-heightを指定しているけど、1.0では読みづらいし、ここで指定しなくてもよさそう。Modern CSS resetに、いくつか初見のプロパティがでてきたので調べてみる。
「scroll-behavior:smooth;」⇒ これはJS書かなくてもCSSだけでアンカーリンクにスムーススクロールしてくれるらしい（でもChromeとFFでしか動かないから、現状はあまり使えない）。
「text-rendering : optimizeSpeed;」⇒ 文字を気持ち程度読みやすくカーニングしてくれるらしい。これは実証してから使うかなぁ。
リンク：Modern CSS resetだけが、「text-decoration-skip-ink: auto;」をつけている。これは、アルファベットのベースラインよりも下に突き出す文字（gとか jとか）の部分をスキップしてアンダーラインを引くらしい。実証したところChromeのUAでは、もともとスキップされているし、英語圏で必要な指定かな。
table：Eric Mayerさんの指定。自分もたいていこれは使うからアリかな。
画像や動画など：Modern CSS resetのimgをblockにしたり、altないのはblurにしたりって、作者の好みか？っていうスタイルなのかな。レスポンシブ案件では、width:100%使いまくるので、それだけは入れてもよさそう。
アニメーション：prefers-reduced-motion:reduce というモードは何かっていうと、スマホのアクセシビリティの設定で「視差効果を減らす」にチェック入れている人向けの指定だったのですね。今後はこういった検証も必要になってきそうなので、入れましょう。
font-size：フォントサイズは、ここで指定すると後々面倒なので、指定しません。
その他：preのwhite-space:pre-wrapくらいは入れてもいいかもだけど、商業デザインのサイトではあまり使うことがなさそう。
ここまでは、各リセットCSSからイイトコどりを検討しましたが、ここからは、ぜひとも自分が入れたいプロパティを追加。
body：
body { font-family: sans-serif; }
これを書かないと、iOSで明朝体になるからなぁ。。。
リンク：
a { color: inherit; }これを書かんと、後々リンク色の指定が面倒くさくなる。
そんなわけでオレの考えたさいきょうのリセットCSSはこんな感じ。
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}
body{font-family:sans-serif;}
a{color:inherit;}
table {border-collapse:collapse;border-spacing:0;}
img{width:100%} /* for responsive */
@media(prefers-reduced-motion:reduce){
*{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}リスペクト：ぼくのかんがえたさいきょうのしーえしゅえしゅ
参考：古いCSSリセットからはもう卒業！モダンブラウザに適した新しいCSSリセット
参考：CSSリセットにも新しい動きが！最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
参考：CSSのメディアクエリprefers-reduced-motionメディア特性の利用
後日談：半年前に自分が書いたリセットCSSを発見したので晒してみる。
@charset "UTF-8";
html{
font-size: 62.5%
}
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
list-style: none;
outline:0;
box-sizing: border-box;
font-size: 1.6rem;
}
body {
font-family: sans-serif;
}
a {
color: inherit;
text-decoration: none;
}うーん。やっぱりこれでもいいかなぁって、気もしてきた。