Normalize vs Reset

2978 ワード

2. Normalize vs Reset


2.3 css resetとnormalize.cssの違いは何ですか?


2.3.1 normalizeを創造する.cssのいくつかの目的

  • は、
  • を完全に削除するのではなく、有用なブラウザのデフォルトスタイルを保護します.
  • 一般化されたスタイル:ほとんどのHTML要素に
  • を提供する
  • ブラウザ自身のバグを修復し、各ブラウザの一貫性を保証する
  • CSS可用性の最適化:いくつかのテクニック
  • 解釈コード:注釈と詳細なドキュメントで
  • 2.3.2 Normalize vs Reset

  • Normalize.cssは価値のあるデフォルト値Resetを保護し、ほとんどの要素にデフォルトスタイルを適用することで、要素に同じ視覚効果を強制的に与える.それに比べてcssは多くのデフォルトのブラウザスタイルを維持しています.これは、すべての共通のレイアウト要素にスタイルを再設定する必要がないことを意味します.ある要素が異なるブラウザで異なるデフォルト値を持っている場合、Normalize.cssはこれらのスタイルを一致させ、できるだけ現代の基準に合致させるように努力します.
  • Normalize.cssはブラウザのバグを修復します.一般的なデスクトップとモバイルブラウザのバグを修復します.これは往々にしてResetができる範疇を超えている.それについてcssで修正された問題には、HTML 5要素の表示設定、プリフォーマットされた文字のfont-size問題、IE 9でのSVGのオーバーフロー、各ブラウザやオペレーティングシステムに現れるフォーム関連のバグが多数含まれています.HTML 5に新しく登場するinputタイプsearch,Normalizeについて、以下の例を見ることができる.cssは、ブラウザ間での一貫性をどのように保証するか.
    /**
    *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;
    }
    
  • Normalize.cssがデバッグツールを乱さずにResetを使用するのに最も困っているのは、ブラウザデバッグツールの大きなセグメントの継承チェーンです.下図に示します.いいえcssではこのような問題はありません.私たちのガイドラインでは、マルチセレクタの使用に非常に慎重であり、ターゲット要素にスタイルを設定する目的しかありません.
  • Normalize.cssはモジュール化されたこのプロジェクトが複数の関連しているが独立した部分に分割されているため、どの要素が特定の値を設定されているかを簡単に知ることができます.したがって、フォームの一般化など、永遠に使用されない部分を選択的に削除することができます.
  • Normalize.cssは詳細なドキュメントを持っています.cssのコードは詳細で包括的なブラウザ間研究とテストに基づいている.このファイルには詳細なコードの説明があり、Github Wikiにはさらに説明があります.これは、各行のコードが具体的にどのような仕事を終えたのか、なぜこのコードを書くのか、ブラウザの違いを見つけることができ、自分のテストをより簡単に行うことができることを意味します.

  • このプロジェクトの目的は、ブラウザのデフォルトが要素をどのようにレンダリングしているかを理解し、ブラウザのレンダリングを改善する方法を簡単に理解することです.