さあ、Normalize.css_html/css_WEB-ITnose について話しましょう-htmlチュートリアル-php.cn

概要

Normalize vs Reset

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

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

3. Normalize.css を使用すると、デバッグツールが乱雑になることはありません

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

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

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