o2project / reset-css-friends Goto Github PK

http://friends.o2p.jp/ch02.html#h2-2

Eric MeyerというCSSへ対しとても貢献している人がいます。最近だとその貢献が認められ、CSS Color Module Level 4に彼の亡くなってしまった娘の名前を元にした「rebeccapurple」という色の名前が入ったということでも有名です*3。

少し本の虫の解説に引っ張られすぎているのかな、という印象を受けました。（早世してしまった娘さんの悲しみを分かち合うべく、Eric Meyerへの敬意と哀悼の意を込めてCSSカラーをわりあてたというのが私個人の理解です。）

Wikipediaに単独の記事がある[1]程度にはすごい人なので、彼の経歴[2]を眺めながら、もう少し説明を揉んでもよいのかなと思います。

[1] https://en.wikipedia.org/wiki/Eric_A._Meyer
[2] https://www.linkedin.com/in/meyerweb

http://friends.o2p.jp/ch01.html#h1-1

Firefoxではセリフがないフォントで表示されています（図1.1）が、Safariではセリフがあるフォントで表示されます（図1.2）。

説明としては正しいですが、想定読者は「セリフ」という単語を知っている、ということでしょうか。読者は必ずしもフォントに精通しているわけではないと思いますので、個人的には補足説明があってもよいように感じました。

1. はじめに
2. Reset CSSとは
   1. なぜReset CSSを使うのか
      1. ブラウザ間の差異を吸収するため
      2. 単一のレンダリングエンジンだけがある環境では使わなくてよい
3. Reset CSSの特色
   1. Hard reset
   2. Eric Meyer
   3. YUI 3
   4. HTML5 Docter
   5. Normalize
   6. Sanitize
   7. ress
   8. 使わない
4. Reset CSSは何をresetしているのか
   1. Hard reset
   2. Eric Meyer
   3. YUI 3
   4. HTML5 Docter
   5. normalize.css
   6. sanitize.css
   7. ress
5. まとめ

reset.cssとは

• Hard reset
  • https://web.archive.org/web/20150905184045/http://leftjustified.net/journal/2004/10/07/css-negotiation/

なぜreset.cssを使うのか

• http://sixrevisions.com/css/the-history-of-css-resets/
• それぞれのuser agent stylesheetの差異を吸収するため

Eric Meyerのreset.css

自分はこうやってresetするよと出したものが思ったより使われてしまった

使わないという選択肢

reset.cssには不要な指定もあるのでパフォーマンスをより気をつけるのであれば個別にリセットするというのもある

user agent stylesheetの存在

• Chrome: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Safari: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
• Firefox: https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
• Edge: http://www.iecss.com/edgehtml-13.10586.css

解説する要素候補

html, body, img,
ul, ol, li,
table, tr, td,
h1, p, a, blockquote, br,
section, article, nav, aside,
header, footer, main,
form, input, textarea, button, select

• かばんちゃんとサーバルのような解説
• アメリカビーバーとオグロプレーリードッグのような解説
• アフリカオオコノハズクとワシミミズクのような解説

http://friends.o2p.jp/ch03.html

何をリセットしているのか、というのは（このReset CSSフレンズの核となるお話なので）もちろん重要ですが、なぜリセットできるのか、にも焦点を当ててはどうでしょうか。

本題に入る前に仕様に触れつつ説明するのもよいのかもしれません。
https://www.w3.org/TR/css-cascade-3/#cascading-origins