さあ、Normalize.css_html/css_WEB-ITnose について話しましょう

この記事は http://nicolasgallagher.com/about-normalize-css/ から翻訳されたものです
もともと私のブログで公開されたものです: http://jerryzou.com/posts/aboutNormalizeCss/

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 上でオープンソースとして開発されています。誰でも問題レポートを送信したり、パッチを送信したりできます。プロジェクトの開発プロセス全体が誰でも見ることができ、各変更の理由もコミット情報に書き込まれ、追跡可能です。

関連書籍

その他のデフォルト UA スタイルの詳細:

HTML ドキュメントのレンダリングに関する WHATWG の提案

Internet Explorer ユーザー エージェント スタイル シート

CSS2.1 ユーザー エージェント スタイル シートのデフォルト