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 |
タイプセレクタ | p | 1 |
擬似要素 | :first-child | 1 |
擬似クラス | [type=”text”] | 10 |
classセレクタ | .hoge | 10 |
idセレクタ | #hoge | 100 |
要素に直書き | style=”” | 1000 |
計算例
li.last-child | タイプセレクタ + 疑似要素 | 1+10 | 11 |
div#wrap | タイプセレクタ + idセレクタ | 1+100 | 101 |
ちなみに!importantを指定すると計算が無視され、最優先となります。
p {
background: #FFF !important;
}
-
前の記事
HYPER-V クイックマイグレーション 2019.08.20
-
次の記事
Hyper-V インストール 2019.08.21
コメントを書く