[解決済み] Normalize.cssとReset CSSの違いは何ですか?
質問
CSS Resetは知っていますが、最近、Normalize.cssというのがあることを知りました。
とはどのような違いがあるのでしょうか? Normalize.css と CSSのリセット ?
CSSの正規化とCSSのリセットの違いは何ですか?
CSSリセットの新しいバズワードに過ぎない?
解決するには?
normalize.cssで作業しています。
主な違いは以下の通りです。
-
Normalize.cssは、すべてをスタイル解除するのではなく、有用なデフォルトを維持します。 例えば、以下のような要素です。
sup
またはsub
reset.cssを含むと視覚的に通常のテキストと区別がつかなくなるのに対し、normalize.cssを含むとちょうど動く(そして実際より堅牢になる)。だから、normalize.cssはあなたに視覚的な出発点(均質性)を強制するものではありません。これは、すべての人の好みに合うとは限りません。行うための最善のことは、両方で実験し、あなたの好みに合わせてゲルを参照してくださいです。 -
Normalize.cssは、reset.cssの範囲外であるいくつかの一般的なバグを修正します。 reset.cssよりも範囲が広く、以下のような一般的な問題のバグフィックスも提供します:HTML5要素の表示設定。
font
の修正、フォーム要素による継承font-size
に対するレンダリングpre
や、IE9でのSVGオーバーフロー、そしてbutton
iOSのスタイリングバグ -
Normalize.cssは、あなたの開発ツールを乱雑にすることはありません。 reset.cssを使用する際によくあるイライラが、ブラウザのCSSデバッグツールで表示される大きな継承の連鎖です。これは、ターゲットとなるスタイリングのため、normalize.cssでそのような問題ではありません。
-
Normalize.cssはよりモジュール化されています。 このプロジェクトは、比較的独立したセクションに分割されており、あなたのウェブサイトで決して必要とされないことが分かっている場合、セクション(フォームの正規化など)を削除することが容易にできます。
-
Normalize.cssはより良いドキュメントを持っています。 normalize.css のコードはインラインでドキュメント化されており、さらに包括的なドキュメントとして GitHub Wiki . つまり、各コードが何をしているのか、なぜそれが含まれているのか、ブラウザ間でどのような違いがあるのかを知ることができ、より簡単に独自のテストを行うことができるのです。このプロジェクトは、ブラウザがデフォルトで要素をどのようにレンダリングするかについて人々を教育し、人々が改善の提案に参加しやすくすることを目的としています。
これについては、以下の記事で詳しく紹介しています。 normalize.cssについて
関連
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] visibility:hiddenとdisplay:noneの違いは何ですか?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] CSSセレクタの「+」(プラス記号)の意味は何ですか?
-
[解決済み] display: inlineとdisplay: inline-blockの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル】 css border add four corners コード
-
[CSSチュートリアル】CSSアニメーション 途中で止める方法とポーズを維持する方法
-
[CSSチュートリアル】resizeで画像のプレビューを切り替える方法
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】CSSもこんな風に遊べる?気まぐれグラデーションの極意
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[解決済み] ユーザーエージェントスタイルシートとは何ですか?