Chromeのデベロッパーツールに出てくる「user agent stylesheet」とは

Google ChromeのデベロッパーツールでWebサイト内のスタイルを確認していると、CSSルールの中に「user agent stylesheet」と設定されたものが存在する時があります。

パソコンをチェックする男性

自分で設定したスタイルではないし…これはなんぞや?ということで調べてみました。

user agent stylesheetとは

こいつです。

これはブラウザごとに定義されたデフォルトのCSS設定です。

ブラウザごとにマージンやパディングなど、見え方が微妙に異なるのはご存知だと思いますが、その原因の一つがこのuser agent stylesheet。SafariやChrome等、WebKit系列のブラウザはこのuser agent stylesheetを使っています。

WebKit(ウェブキット)は、アップルが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称である。HTML、CSS、JavaScript、SVG、MathMLなどを解釈する。

LINK:WebKit – Wikipedia

リセットCSSやノーマライズCSSを使っていても出てくることがありますので、その場合はスタイルを上書きして修正するようにしましょう。

created by Rinker
¥2,486 (2023/11/23 10:55:30時点 Amazon調べ-詳細)
Related Posts