Google Chromeの"user agent stylesheet"はどこにあるの?

この記事は Google Chrome に内蔵されているスタイルシートを探す記事で、「Custom.css」を編集する話では無いです。来ていただいた方のために Mac 版 Google Chrome の「Custom.css」の場所を記載しておきます。

~/Library/Application Support/Google/Chrome/Default/User StyleSheets


Google Chrome の「デベロッパ ツール」を使っているとブラウザに内蔵されているスタイルをよく目にする。背景がグレーになっていて編集出来ない部分。

Google Chrome Develeper Tool

「これって何処に格納されているんだろう?」と思って調べてみたけど見つからず。Firefox の場合は「resorce:///」から閲覧出来るけど Google Chrome はどこにあるか探せなかった。

何がしたいのかって言うと「リセット CSS を書くのが面倒だからブラウザ内蔵のスタイルシートをパクろう参考にしよう」と思ったわけです(ベンダー プレフィックス部分は編集するけど)。デベロッパ ツールからコピペしてもいいけどめんどくさい。「YUI の Reset CSS でも使えばいいやん」とも思いますけど好奇心でやってみたいだけです。

いい加減見つからないので「あぁ、オープン ソースの『Chromium』の方なら何かわかるかもしれない」と思って調べてみたら Webkit Open Source Project で公開されていました。

/trunk/Source/WebCore/css/html.css – WebKit

中身を見てみたらだいたい Google Chrome のユーザー エージェント スタイルシートと同じっぽい。ページ下のリンクからソースのダウンロードも可能ですねぇ。でもちょっと Webkit 独自仕様で書かれている部分が多いから実用的ではないかも。Firefox の方がもうちょっとシンプルな気がする。

ちなみに単位の __qem というのはマージンの相殺を無効にする独自仕様なんだそうな。