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

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

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

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

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を使っていても出てくることがありますので、その場合はスタイルを上書きして修正するようにしましょう。

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント