#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;
}

うーん。やっぱりこれでもいいかなぁって、気もしてきた。

参考：-webkit-text-size-adjust: none を絶対に設定してはいけない理由

参考：font-size:62.5%で要素の幅や高さにrem使用は注意