UAスタイルシートとリセットCSS

UAスタイルシートとリセットCSS

Tomoki Kubo株式会社まぼろし

マークアップエンジニア

ブログ: KOJIKA17

Adobe Creative Stationにて、Emmetの連載中

もくじ

• UAスタイルシート- UAスタイルシートの基本 - モダンブラウザのUAスタイルシート

• リセットCSS

- 全称セレクタ- Reset CSS- Normalize.css- リセットCSS と Normalize.css

• まとめ

UAスタイルシート

Webサイトの表示に関わるスタイルシート

1. User Agent Style Sheets

2. Cascading Style Sheets

(User Style Sheets)

HTMLの見た目は、 UAスタイルシートが決めているにすぎない

HTML = 意味付けスタイルシート = 見た目

HTMLとスタイルシートは分離して考えましょう

head, title, meta, style, script要素も

意味付け

HTML（body要素は空）

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style contenteditable="true"> * { display: block; } title { margin: 1em; color: #f00; } style { white-space: pre; } </style> </head> <body></body> </html>

ブラウザの表示

UAスタイルシートの見本Default style sheet for HTML 4http://www.w3.org/TR/CSS2/sample.html

http://www.w3.org/TR/CSS2/sample.html

基本的に上下のmargin指定が

ついている

モダンブラウザの UAスタイルシート

HTML5の新要素の UAスタイルシートは?

2009年頃

• Internet Explorer 8, Firefox 2HTML5の新要素のDOMをうまく作れなかった

• Firefox 3.x, Safari, Google Chrome UAスタイルシートに新要素の記述がまだない

現在もちろん、ばらつきがある

html5jグループにて「IE11 でmain 要素のwidth,height 指定が無視されるのはなぜでしょうか？」

display: block;以外も追加されている要素がある

margin-before?after?

論理方向プロパティ

• margin-start / margin-end

• margin-before / margin-after

• padding-start /padding-end

• padding-before /padding-after

論理方向プロパティ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

before

after

start end

writing-mode: lr-tb;

beforeafter

start

end

論理方向プロパティwriting-mode: tb-rl;

モダンブラウザ h1要素の見た目

HTML

<h1>Lv 1</h1>

<section> <h1>Lv 2</h1>

<section> <h1>Lv 3</h1> </section>

</section>

ブラウザの表示

h1要素の見た目はセクショニング・コンテンツの

深度によって変わる

Firefoxresource://gre-resources/html.css

resource://gre-resources/html.css

WebKit html.csshttp://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

アウトライン・アルゴリズムは視覚的にわかりやすくなっているだけ

HTMLとスタイルシートを混同しない

リセットCSS各ブラウザの差異を埋める手法

リセットCSSの目的

ブラウザ間の表示を統一させる

全称セレクタ

* { margin: 0; padding: 0; border: none; font-size: 100%; }

すべての要素の値をまとめて指定できる意図しない要素までリセットする可能性がある

Reset CSS

• Eric Meyer’s "Reset CSS" 2.0

• Yahoo! (YUI 3) Reset CSS

• HTML5 Doctor CSS Reset

Normalize.css

• UAスタイルシートを生かすことを目的としたCSS

• ブラウザのスタイルシートの差異を修正

• コード内のコメントに、詳細な説明が入っている

Firefox 40が2015年8月11日にリリース• <abbr>、<acronym> 要素に text-decoration プロパティが使われるようになった

• 具体的に、border-block-end: dotted 1px が text-decoration: dotted underline に置き換えられた

• Google Chrome は border-bottom を使用している

• Normalize.css が、修正対象になっている

Rest CSSや Normalize.cssも

たまには見直しが必要

Rest CSSと Normalize.cssの折衷

sanitize.cssやReboot

Rest CSS と Normalize.css

好きな方を使えば、いいと思う

もし使い分けるなら

Nicolas Gallagher – Blog & Ephemera

http://nicolasgallagher.com

http://nicolasgallagher.com/

UAスタイルシートを生かしたまま、要素をひとつのモジュールとして

機能させられるサイト

楽天市場http://www.rakuten.co.jp

http://www.rakuten.co.jp

プロパティを初期化した方が構築しやすいなら

Rest CSS

まとめ

• UAスタイルシートは、HTMLの変化が出やすい

• Rest CSSやNormalize.cssを重複して読んでいなければ、なんでもいいと思う

ありがとうございました。

Technology

UAスタイルシートと リセットCSS

UAスタイルシートとリセットCSS