読者です 読者をやめる 読者になる 読者になる

5000兆円ください。

生産性の無い情報を発信しています。5000兆円くれると喜びます。

CSSのuser agent stylesheetとは。

技術情報

最近は学校の授業の関係上、HTML / CSS / JavaScript / PHP あたりをよく使うのですが、その中のCSSで新しい発見があったのでここに記録しておきたいと思います。

 

ブラウザ毎に定義されているデフォルトCSSuser agent stylesheetというものがあるのですが、これが今回の記事での敵です。

GoogleChromeに搭載されているデベロッパーツールを使うことでその存在を確認できるかと思います。

f:id:Q_tyokinuhata:20160527003907p:plain

画像を見ると分かるように、HTMLbody要素に対応するセレクタの中に、勝手に余白を挿入しています。

しかし、私は全称セレクタですでにmarginpaddingの初期化を行っていました。

それなのに何故適用されなかったのでしょうか。

それは、CSS詳細度という概念によって、セレクタ強さが定められているからでした。

全称セレクタ

タイプセレクタ

クラスセレクタ

属性セレクタ

擬似クラス

IDセレクタ

インラインスタイル

セレクタは主にこのように分類されるのですが、下にいくほど力が強くなります。

つまり、全称セレクタで書いたmarginやpaddingの初期化がタイプセレクタ(この場合はbody)によって上書きされていたのです。

なのでbodyでmarginを初期化してやると、user agent stylesheetが入れたmarginに打ち消し線が引かれるかと思います。

f:id:Q_tyokinuhata:20160527010222p:plain

 

user agent stylesheet詳細度など、本当にめんどくさい概念でてんこ盛りですが、CSSを設計するときは気をつけないと駄目だということを知り、とても勉強になりました。

Yahoo! User Interface Library(YUI3)のreset.cssなど、便利なものもあるらしいのでそちらもチェックしてみると良いかもしれません。

CSS Reset - YUI Library

 

詳細度の詳細については、以下のリンクを参照してみてください。

developer.mozilla.org

 

何か誤りがあればご指摘お願いします。

それでは。