同種開発のためのNormalize.cssの使用

ブラウザの互換性は、Web上のアクセシビリティの大部分です。開発者は考慮する必要があります サポートが必要な視聴者とブラウザのバージョンの違い. CSSのリセットは選択肢の1つですが、ほとんどの開発者は、シンプルさと現代のすべてのWebブラウザでの互換性のためにNormalize.cssを好みます。.

この記事ではカバーします Normalizeの基本と一般的なCSSリセットとの比較. これは複雑なライブラリではなく、理解するのに2時間以上かかることはありません。しかし正規化の鍵は学習です どうやって 適切かつ賢明にそれを実行するため.

ブラウザのリセットと正規化

私は何年もの間、Eric MeyerのCSSリセットのカスタマイズ版を使用してきました。これらは私のプロジェクトの大部分にとって十分なものであり、大きな問題を引き起こしていません。しかしNormalizeは私のリセットの見方を変えました。CSSのリセットとは動作が異なるからです。違いを理解することが重要です.

正規化を 衣服はすべてのブラウザに一貫して適用されます, と考える 熱核爆発としてのCSSリセット すべてのブラウザで.

スタイルを標準化し、見出し、段落、ブロック引用符、および共通の要素をフォーマットします。 同一に見える（または十分に近い） サポートされているすべてのブラウザで。 CSSリセットが完全にスレートをきれいに拭くようにあります デフォルトなし 何でも.

CSSをリセットすると、見出しは段落と同じように見えます。要素には、余白、余白、または間隔はありません。 CSSリセット付き あなたは新しいコードを供給しなければなりません スタイルを引き立てます。正規化を使用すると、あなたが得る デザイン済みのスタイル その上に構築することができます.

それで、これらのうちの1つは他より良いですか？議論の1つのポイントは、正規化することを述べていますが、それは熱く議論されているトピックです 互換性のためにより良く機能し、ファイルサイズが小さくなります。.

“正規化は再設定よりも優れていると私は主張しなければなりません。その結果、ネットワークを介して転送されるCSSが少なくなり、UAデフォルトの使用率が向上し、要素がどのようになっているかをよりよく理解できるようになります。 意味した 表示する.”

あなたがNormalizeと恋に落ちるか、典型的なリセットを好むかにかかわらず、少なくとも両側を理解して、最もよく合うものを選ぶことは重要です。ゼロからコーディングを始める開発者はごくわずかなので、現代のフロントエンド開発にはNormalizeまたはCSSのリセットがほとんど必要です。.

あなたがCSSのリセットを試してみたいのであれば、ここにいくつかの一般的な選択肢があります。

エリックマイヤーのリセット
HTML5リセット
HTML5Doctorリセット

設定を正規化

正規化の作成者Nicolas Gallagherが、この声明で紹介する紹介記事を書きました。

“Normalize.cssは、HTML要素のデフォルトのスタイル設定において、ブラウザ間の一貫性を高めるための小さなCSSファイルです。これは、従来のCSSリセットに代わる、最新のHTML 5対応のものです。.”

何年にもわたって、これは世界中の開発者によって使用される信頼できるライブラリへと成長しました。正規化は、ブートストラップとピュアCSSでもある程度使用されています。.

プロジェクトで正規化を使用する方法は2つあります。ソースを編集して独自の正規化スタイルシートをカスタマイズする方法と、それをベースとして使用して最上部にスタイルを追加する方法です。.

前者は、Normalize.cssファイルを参照して、独自のカスタムスタイルシートを作成する必要がないものはすべて削除するという選択方法です。これは、プロジェクトごとにファイルサイズを小さく抑えるのに最適です。.

あるいは、一部の開発者はNormalize.cssファイル全体をインクルードし、その上に独自のスタイルシートを構築します。正規化スタイルシート全体は、圧縮されていない状態で約6.8KBに相当する420行以上のコードにわたります。.

どちらの方法も他の方法よりも優れているわけではなく、各プロジェクトに最適なもの、または好みのワークフローに従うことをお勧めします。.

始めるには、GitHubからNormalizeのコピーをダウンロードするか、外部CDNからホストしてください。次のようにして、NPMからNormalizeの最新バージョンを入手することもできます。

npm install --save normalize.css

ファイルをダウンロードしたくない場合は、ボタンをクリックするだけで正規化を追加できる新しいCodePenプロジェクトを作成することもできます。.

Normalizeはモジュール式なので、一時的にセクションを削除したり、独自のNormalizeのカスタムビルドを作成することもできます。それから、埋め込みコンテンツのスタイルを削除しながら、HTML 5表示要素のような選択部分で各プロジェクトを開始できます。.

各正規化ルールには、それが何をするのか、そしてそれがどの問題を解決するのかを説明するCSSコメントがあります。設定のように明らかなものもあります 表示ブロック 新しいHTML5要素.

Internet Explorerでオーバーフローを隠すこのSVGコードのように、他のユーザーはそれほど明白ではありません。

svg：not（：root）オーバーフロー：非表示;

スタイルシートの動作を正確に確認し、Normalizeがプロジェクトに適しているかどうかを確認するために、スタイルシートをスキムすることを強くお勧めします。.

WebデザインのNormalize.css

Normalize v4.0の最新バージョンは広範なブラウザサポートを提供しています.

Chrome（最後の2つ）
エッジ（最後の2つ）
Firefox（最後の2つ）
Firefox ESR
Internet Explorer 8+
オペラ（最後の2つ）
サファリ6+

私が言うことができることから、正規化はFirefoxのような絶え間ないアップデートでブラウザの古いバージョンをサポートするかもしれません。しかし “公式” サポートはChrome / Edge / FF / Operaの2つの最新バージョンを含みます.

IE6 +とSafari 4+もNormalize v1でサポートされていますが、そのバージョンはもうアップデートされていません.

Google Analyticsなどのツールを使用してブラウザのバージョンを確認することが重要です。これにより、Normalizeが現代のWebデザイン作業に役立つツールになるかどうかがわかりやすくなります。.

その他の資料

Normalizeについて具体的に教えることはそれほど多くありません。そのため、ほとんどの学習は次のようにして行われます。.

そして実際には、スタイルシートを読み、必要に応じてコードをコピーまたは変更しても拾うことができないことを説明することはあまりありません。あなたが他の関連情報を探しているなら、私は以下のリンクを追加しました.

Nicolas Gallagher：Normalize.cssについて
HTML5定型句の紹介
Normalize.cssとReset.css：どちらを使うべきか?

紹介ビデオ