Normalize.cssの使い方（テーブルリセット）_html/css_WEB-ITnose

この記事は Normalize.css の公式 Web サイトから翻訳されたものです: http://nicolasgallagher.com/about-normalize-css/

Normalize.css は単なる小さな CSS ファイルですが、デフォルトの HTML 要素スタイル。ブラウザーの高い一貫性。従来の CSS リセットと比較して、Normalize.css は HTML5 用に用意された最新の高品質な代替手段です。 Normalize.css は現在、Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks、その他多くのフレームワーク、ツール、Web サイトで使用されています。

Normalize.css プロジェクトのアドレス

GitHub の Normalize.css ソース コード

概要

Normalize.css は CSS リセットの代替手段です。 @necolas と @jon_neal が何百時間もかけてブラウザ間のデフォルト スタイルの違いを研究した結果、このプロジェクトは最終的に現在の形になりました。

次の目的でnormalize.cssを作成しました:

便利なブラウザのデフォルトスタイルを完全に削除するのではなく保持します

一般化されたスタイル: ほとんどのHTML要素に提供されます

ブラウザ自体のバグを修正し、ブラウザ間での一貫性を確保します

CSSを最適化します使いやすさ: いくつかのヒントを使用してください

コードの説明: コメントと詳細なドキュメントを使用してください

Normalize.css はモバイル ブラウザを含む多くのブラウザをサポートしていますが、HTML5 要素、タイポグラフィ、リスト、埋め込みコンテンツ、フォーム、テーブルは一般化されています。このプロジェクトは一般原則に基づいていますが、必要に応じてより実用的なデフォルトを使用しています。

Normalize vs Reset

Normalize.css と従来の Reset の違いを知ることは非常に価値があります。

1. Normalize.css は貴重なデフォルト値を保護します。

Reset は、ほぼすべての要素にデフォルト スタイルを適用することで、要素に同じ視覚効果を強制します。対照的に、Normalize.css は多くのデフォルトのブラウザー スタイルを維持します。これは、一般的なタイポグラフィ要素をすべて再スタイルする必要がなくなったことを意味します。要素のデフォルト値がブラウザごとに異なる場合、Normalize.css はそれらのスタイルの一貫性を保ち、可能な限り最新の標準に準拠するよう努めます。

2. Normalize.css はブラウザのバグを修正します

一般的なデスクトップおよびモバイル ブラウザのバグを修正します。これは多くの場合、リセットで実行できる範囲を超えています。この点に関して、Normalize.css によって修正される問題には、HTML5 要素の表示設定、書式設定されたテキストのフォント サイズの問題、IE9 の SVG オーバーフロー、およびさまざまなブラウザーやオペレーティング システムで発生する多くのフォーム関連の問題が含まれます。

次の例を見て、Normalize.css が HTML5 の新しい入力タイプ検索のブラウザー間の一貫性をどのように確保するかを確認できます。

/** * 1. Addresses appearance set to searchfield in S5, Chrome * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box;}/** * Removes inner padding and search cancel button in S5, Chrome on OS X */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none;}

3. Normalize.css によってデバッグ ツールが乱雑になることはありません

Reset を使用する際の最も厄介な部分は、以下に示すように、ブラウザ デバッグ ツールの大きな継承チェーンです。 Normalize.css ではそのような問題はありません。これは、ガイドラインでは複数のセレクターの使用に細心の注意を払っており、目的の要素のみを意図的にスタイル設定しているためです。

4. Normalize.css はモジュール式です

このプロジェクトは複数の関連する独立した部分に分割されているため、どの要素が特定の値に設定されているかを簡単かつ明確に知ることができます。これにより、アプリケーションの決して使用されない特定の部分 (フォームの一般化など) を選択的に削除できます。

5. Normalize.css には詳細なドキュメントがあります

Normalize.css のコードは、詳細かつ包括的なクロスブラウザーの調査とテストに基づいています。詳細なコードの説明はこのファイルにあり、さらに詳しくは Github Wiki で説明されています。これは、コードの各行が何を行うのか、コードが書かれた理由、ブラウザ間の違いを正確に知ることができ、独自のテストをより簡単に実行できることを意味します。

このプロジェクトの目標は、ブラウザーがデフォルトで要素をレンダリングする方法を人々が理解できるようにすると同時に、ブラウザーのレンダリングを改善する方法を簡単に理解できるようにすることです。

normalize.css の使い方

まず、Normalize.css をインストールまたは Github からダウンロードし、その後、主に 2 つの使用方法があります。

戦略 1: 独自のプロジェクトの基本 CSS として Normalize.css を使用し、デザイナーのニーズを満たすようにスタイル値をカスタマイズします。

戦略 2:normalize.css ソース コードを導入し、それを基にして構築し、必要に応じて独自の CSS でデフォルト値を上書きします。

結論

アプリケーションのスコープや実装の観点から見ても、Normalize.cssとResetは大きく異なります。両方の方法を試して、どちらが開発の好みに適しているかを確認する価値があります。このプロジェクトは Github 上でオープンソースとして開発されています。誰でも問題レポートを送信したり、パッチを送信したりできます。プロジェクトの開発プロセス全体が誰でも見ることができ、各変更の理由もコミット情報に書き込まれ、追跡可能です。

転載アドレス: http://jerryzou.com/posts/aboutNormalizeCss/