Normalize.css vs Reset.css

2912 ワード
Normalize.cssは従来のCSS resetに比べて、現代的でHTML 5のために準備された良質な代替案である.ブラウザは、すべての要素をより一貫して表示し、現代の基準に合致し、規範化が必要なスタイルだけを対象としています.非常に軽量で、ソースコードも6 KB程度しかありません.Twitter Bootstrap、HTML 5 Boilerplate、GOV.UK、Rdio、CSS Tricks、その他多くのフレームワーク、ツール、Webサイトで使用されています.
概要
Normalize.cssはCSS resetsの代替案である.@necolasと@jon nealが数百時間かけて異なるブラウザのデフォルトスタイルの違いを研究した結果、このプロジェクトはついに今のようになった.
Normalize.cssのターゲット:
  • は、削除するのではなく、有用なブラウザのデフォルトスタイルを保護します.
  • より多くのHTML要素にサービスを提供するためにスタイルを正常化します.
  • ブラウザのBugを修復し、ブラウザの一貫性を確保する.
  • は、微細な改良によって可用性を最適化する.
  • は、注釈および詳細なドキュメントを介してコードを解釈する.

    • HTML 5要素、レイアウト、リスト、埋め込みコンテンツ、フォーム、テーブルを仕様したCSSなど、ほとんどのブラウザ(モバイルブラウザを含む)をサポートします.
    このプロジェクトは正規化の原則に基づいているが、より実用的なデフォルト値が適切な場所で使用されている.
    Normalize vs Reset
    Normalizeと従来のCSS resetsの違いについてもっと知る必要があります.
    Normalize.css保護に役立つデフォルト値
    Resetsはほとんどの要素のデフォルトスタイルを再設定し、デフォルトスタイルを同じ視覚効果に強制的に設定します.ノーマルに比べてcssは、ブラウザの多くのデフォルトスタイルを保持します.これは、一般的なレイアウト要素のスタイルを再宣言する必要がないことを意味します.
    HTML要素が異なるブラウザで異なるデフォルトスタイルがある場合、Normalize.cssの目的は、これらのスタイルをよりよく一致させ、現代のブラウザの基準に合致させることです.
    Normalize.cssはブラウザのBugを修復しました
    デスクトップとモバイルブラウザの一般的なバグを解決します.もちろん、これらのバグはResetsの範囲を超えています.これらのバグには、HTML 5要素の表示設定、プリフォーマットされたテキストのフォントサイズ、IE 9のSVGのオーバーフロー、およびブラウザおよびオペレーティングシステムの多くのフォームに関連するバグが含まれます.
    例えば、以下、Normalize.cssはHTML 5 inputのsearchタイプのブラウザ間一貫性とスタイルのバグを修正しました:
    /**
 * 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;
}

    Resetsは通常、すべてのブラウザを一致させる設定要素の表示方法を誤っています.特にフォームについてはNormalize.cssはより良い重要な助けを提供します.
    Normalize.cssはデバッグツールを混乱させません
    Resetを使用する場合、最大の災害は、ブラウザCSSデバッグツールで大きなセグメントの継承チェーンを使用することです.
    いいえcssにはこのような問題はありません.私たちの準則ではマルチセレクタの使用に非常に慎重であり、要素にスタイルを設定する目的しかありません.
    Normalize.cssはモジュール化されています
    このプロジェクトはすでに複数の相対的に独立した部分に分割されており、どの要素が特定のスタイルを設定しているかをより簡単に区別できます.また、フォームモジュールなど、不要な部分を除去することができます.
    Normalize.cssは豊富なドキュメントを持っています
    Normalize.cssのコードはブラウザ間での設計とシステム的なテストに基づいている.Github Wikiには詳細なドキュメントと説明があります.これは、各行のコードの意味を知ることができることを意味します.なぜこれらのコード、ブラウザの間の違いがあり、自分のテストで簡単に実行できるのかを意味します.
    このプロジェクトは、ブラウザがデフォルトで要素をレンダリングする方法を理解し、より容易に参加し、改善することを目的としています.
    使用方法
    まず、インストールまたはGitHubからNormalizeをダウンロードする.cssは、次の2つの方法で使用されます.
  • 用Normalize.cssはあなた自身の基礎スタイルとして、カスタムスタイル値はデザイナーの基準に合致します.
  • Normalizeを導入する.cssソースコードをベースに構築し、必要に応じて自分のCSSでデフォルト値を上書きする必要があります.

    • 終わりの言葉
    Normalize.cssはCSS resetと適用範囲が大きく異なる.あなたの開発方法と好みに合っているかどうかを試してみる価値があります.
    きっと強くなるよ
    Oracle--JDBC Oracle LONG RAWタイプフィールド挿入ピクチャの読み込み
    jQloaderオープンソース、ajax、history、loading、orderTemplateのページモジュール化ツールを統合