web-dev-qa-db-ja.com

どのHTML5リセットCSSを使用しますか？その理由は何ですか？

どのHTML5リセットCSSを使用しますか？その理由は何ですか？より多くのケースをカバーしていることがわかっているものはありますか？

私はHTML5 Doctorの使用を開始しました： http://html5doctor.com/html-5-reset-stylesheet/ うまくいくようですが、私はそこにもっと良いものがあるのだろうか。

csshtml5css-reset
122
Darryl Hein

実際の話：値下げ kaikai が正しいにもかかわらず、* padding＆marginを0にリセットするだけです。

残念ながら、私たちの99％には、数百のブラウザバージョンに対応するためのリソースや人材がありません。そのため、典型的なWebサイトにはリセットシートが不可欠です。

html5reset：（干渉しすぎています）

http://html5reset.org/ を見たところです

img,
object,
embed {max-width: 100%;}

そして：

html {overflow-y: scroll;}

私はそれが良い意図を持っていることを理解していますが、それはリセットシートの仕事ではありません。あまりにも多くの仮定を行っています。

ブループリントのリセット:(文字通りブループリント）

body {
  line-height: 1.5;
  background: white;
}

1.5の最新情報。そして、なぜ背景が白なのでしょうか？

Normalize.css：（正常ではない）

https://github.com/necolas/normalize.css/blob/master/normalize.css

いくつかのwebkit/ieハックでうまくいきましたが、

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

すべてのヘッダータグが対象です。 ＆彼らは体の行の高さをリセットしません。

上記のすべてが意図した仕事を上手くこなしていると思いますが、おそらく必要以上に上書きされるでしょう。

エリック・マイヤー

YUI

HTML5Boilerplate

上記は、ボイラープレートが（あまりにもフレンドリーな）側に傾いているプロ向けです。現時点では、カスタマイズしたリセットの80％は定型です。

3つすべてを少しずつ行って自分で作成しますが、それはロケット科学ではありません。

40
Undefined

Normalize.css は、デスクトップブラウザーとモバイルブラウザーの両方に最適で、多くの一般的なHTMLテンプレートで使用されています。

しかし、allとunicode-bidiを除くCSSプロパティをリセットするCSS directionプロパティを使用するのはどうでしょうか？そうすれば、追加のファイルを含める必要はありません。

{
    all: unset
}

CSS all はIE/Edgeを除き、幅広いサポートを提供します。同様に unset を使用します。

19
Matt Smith

reset.css で使用される Blueprint CSS フレームワークは適切に機能し、HTML5要素を含みます。 screen.css ファイルに含まれます。

ブループリントは、新しいサイトのラピッドプロトタイピングに役立つリソースであり、そのソースコードはよく整理されており、学ぶ価値があります。

6
calvinf
  1. 多くのCSSリセットとは異なり、便利なデフォルトを保持します。
  2. さまざまなHTML要素のスタイルを正規化します。
  3. バグと一般的なブラウザーの不整合を修正します。
  4. 微妙な改善により使いやすさが向上しました。
  5. 詳細なコメントを使用して、コードの機能を説明します。

normalize.css

3
zzart

Eric Meyerは、CSSリセットのv2もリリースしました（ほぼ1年前にリリースしました）。

http://meyerweb.com/eric/tools/css/reset/

3
Illes Peter

HTML5仕様には、CSS対応ブラウザーの 推奨CSS宣言 が含まれています。それの楽しみのために、私はそれらを取り、それらを元に戻しました、それは理にかなっています。結果を表示できます この記事では 。

ただし、、本番環境での使用はお勧めしません。これは概念実証であり、汎用リセットスタイルシートとして機能するよりもヒントを提供するために使用した方がよい場合があります。前に他の提案のいずれかが良い選択かもしれません。

2
Boldewyn
* {
    margin: 0;
    padding: 0;
}

シンプルだが完全に効果的。おそらく投げる：

body {
    font-size: small;
}

良い測定のために。

2
kaikai

NormalizeまたはHTML5 Doctorからのリセットを使用し、作業中のプロジェクトに合わせて変更します。

ところで、多かれ少なかれ標準になっているのは、リセットを使用するという概念だけです。

0
cornishninja