user agent stylesheetについて

  • 作成日 2019.08.21
  • 更新日 2022.08.09
  • CSS
user agent stylesheetについて

CSSの調整でちょっとこいつがうっとしかったので、無効にする方法を記載

user agent stylesheetとは

各ブラウザがページを読み込むときに既定で適用されている、CSSのことです。

Google Chromeのデベロッパーツール でスタイルを確認するとでてくるやつです

無効化する方法

差異をあらかじめリセットするための、リセットCSSと呼ばれるものが、複数存在するので、こちらを利用することにより対応可能となってます。

人気のリセットCSS

Eric Meyer’s CSS reset

一番人気のようです。また、必要最低限のタグだけなため軽い。利用者は多いようです
公式サイト

HTML5 Doctor CSS Reset

Eric Meyer’s CSS resetがベース。 HTML5に特化したリセット。上記リセットもHTML5には対応しているので、HTML5のプロジェクトであればオススメ
公式サイト

normalize.css

リセットとは違い、完全にリセットするのではなく、平たく言えばブラウザのCSSのいいところを残しつつ、調整してくれる。
normalize.css

sanitize.css

「Normalize.css」の共同開発者であるJonathan Nealの新しいプロジェクトのようです。 特徴として、ブラウザのバグを吸収してくれる。
sanitize.css

参考 CSSの優先順位

ちなみに「CSS」は、以下の表の点数を計算して合計が高いのものが優先されるようになってます。

指定方法点数
ユニバーサルセレクタ *0
タイプセレクタp1
擬似要素:first-child1
擬似クラス[type=”text”]10
classセレクタ.hoge10
idセレクタ#hoge100
要素に直書きstyle=””1000

計算例

li.last-childタイプセレクタ + 疑似要素1+1011
div#wrap タイプセレクタ + idセレクタ1+100101

ちなみに!importantを指定すると計算が無視され、最優先となります。

p {
  background: #FFF !important;
}