user agent stylesheetについて

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の優先順位

点数を計算して合計が高いのものが優先される

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

計算例

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

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