私が読んだいくつかの記事で* {margin:0; padding:0;}
は、Webサイトのパフォーマンスに影響を与えるため、使用をお勧めしません。それで私はreset.css
スタイルシートに目を向けました。
しかし、私は疑問に思っています、それはパフォーマンスにどのように影響しますか?
この背後にある理由は、このEricMeyerの投稿で説明されています。
これが、非常に多くの人々がユニバーサルセレクターを介してすべてのパディングとマージンをゼロにする理由です。これは良いスタートですが、残念ながら、textareasやtext inputなどのフォーム要素を含め、すべての要素のパディングとマージンがゼロになることを意味します。一部のブラウザでは、これらのスタイルは無視されます。その他の場合、明らかな影響はありません。さらに、入力の外観が変更されている場合もあります。残念ながら、それを知る方法はありません。これは、今後数年間で状況が大きく変化する可能性が高い分野です。
そのため、ユニバーサルセレクターを使用したくないのですが、代わりに、リセットする要素を明示的にリストします。このように、フォーム要素の変更について心配する必要はありません。(私は本当にフォーム要素に固有の奇妙さについて書く必要がありますが、それは別の日のためです。)
とは言うものの、このSteve Soudersの投稿の次のグラフは、ユニバーサルセレクターを使用したテストページと、子孫セレクターを使用したページの読み込み時間の違いを示しています。
ブラウザエンジンがページ上のすべての要素にこのスタイルを適用する必要があるため、パフォーマンスに影響します。これにより、要素が多い大きなページで特に大量のレンダリングが発生します。この方法も、良いものを削除する可能性があるため、悪い習慣です。一部の要素のデフォルトスタイル
このような問題を引き起こすいくつかの要素で使用するように、コードの範囲を縮小することで、このコードを最適化できます。
h1,ul
{
margin:0;
padding:0;
}
あなたが読んだウェブサイトでは、頭をチェックする必要があると思います。リセットスタイルシートは、競争の場を平準化するための方法です。オーバーヘッドはごくわずかであるため、特に最新のブラウザでは違いはありません。
で使用*{margin:0;padding:0;}
してstylesheet
もパフォーマンスに影響はなく、さまざまなフォーマットの問題に取り組むのに役立ちます。
別reset.css
のファイルを使用すると、サーバーにもう1つのファイルを要求するようにユーザーに強制するため、パフォーマンスの問題が発生します。物事の壮大な計画では、高速回線上の数kbは何もありません。しかし、モバイルブラウザ上の誰かのための別のファイルは多すぎる可能性があります。
body {padding:0;margin:0;}
それを使用せずに私たちがしなければならないので、それはウェブページの表示に影響を与えます
margin-left:-7px;
margin-top:-7px;
ウェブページの左右にある狭い白い帯を避けるための置換のようなもの。