DOCTYPEスイッチによるレンダリングモード別デフォルトCSSについて

css firefox


ブラウザにCSSの初期値があるのは知っているのですが、具体的にブラウザのCSSの初期値はどのようになっているのでしょうか。ということで調べてみました。

確認環境

すべて、Mac OS X 10.6.3(Snow Leopard) Firefox 3.6.3 です。

CSS適用前のブラウザのデフォルト値とは？

Webページをデザインする場合、1pxも狂うことなくデザインしたいとする場合、「ブラウザのCSSデフォルト値」が邪魔をすることがあります。例えば、以下のHTMLを見てみましょう。

<html>
  <head>
    <title>ナイスデザインのWebページ</title>
  </head>
  <body>
    このテキストはブラウザ左上に隙間なしに表示したい。
  </body>
</html>


「テキストをブラウザ左上に隙間なしに表示したい。」というデザイナの要望があるが、何もスタイルシートを指定していないにも関わらず、上に隙間が空いてしまっています。これは、ブラウザが持つデフォルトのCSSが適用されているためです。

デフォルトCSSを知る

それでは、デフォルトCSSはどのようになっているのでしょうか。アドレスバーに次を入力すると見ることが出来ます。

resource://gre/res/html.css

１種類ではなく、数種類あります。このCSSのファイルはどこに設置されているのでしょうか。また、それぞれどのような役割があるのでしょうか。

デフォルトCSSの設置場所

以下のディレクトリにあります。

/Applications/Firefox.app/Contents/MacOS/res/

ls -a | grep .css で CSS ファイルを絞ると以下のようになります。かなりありますね。それぞれ、アドレスバーに resource://gre/res/*****.css を入力することで見ることができます。

/Applications/Firefox.app/Contents/MacOS/res% ls -a | grep .css
EditorOverride.css
contenteditable.css
designmode.css
forms.css
html.css
mathml.css
quirk.css
svg.css
ua.css
viewsource.css

各CSSの適用条件は？

たくさんCSSがありますが、どのように適用されているのでしょうか。resource://gre/res/html.css をアドレスバーに入力して、CSSファイルに書かれているコメントを読んでみましょう・・・とコメントを読んでみましたが、ライセンスに関することがたくさんかいてあり、このファイルがどのような場合に適用されるのかは示されていませんでした。Mozillaのデベロッパーページに書いてありました。

Firefoxなどの多くのブラウザにはレンダリングモードが複数があり（レンダリングモードについては上記のwikipediaを参照してください）、レンダリングモードによって適用するCSSを変化させています。レンダリングモードの変更はDOCTYPEによって変化させています。これを「DOCTYPEスイッチ」といいます。

DOCTYPEによって本当にレンダリングモードが変化するのか確かめる

javascriptを利用して、レンダリングモードを確認することができます。一番最初に利用したHTMLを確認してみましょう。

<html>
  <head>
    <title>ナイスデザインのWebページ</title>
  </head>
  <body>
    このテキストはブラウザ左上に隙間なしに表示したい。(Quirks mode)
 
  <script type="text/javascript">alert(document.compatMode)</script>
  </body>
</html>


「BackCompat」と出ました。「BackCompat」とは「互換モード」ということです。 上記の場合はこちらの「DOCTYPE を伴わない XML 宣言 (疑似公開識別子)」に当てはまり、「Quirks モード」となります。

では、次に以下のHTMLを試してみましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <title>ナイスデザインのWebページ</title>
  </head>
  <body>
    このテキストはブラウザ左上に隙間なしに表示したい。(Full Standards mode)
 
  <script type="text/javascript">alert(document.compatMode)</script>
  </body>
</html>

「CSS1Compat」と出ました。「CSS1Compat」とは「標準モード」ということです。 上記の場合はこちらの「DTD の指定のない DOCTYPE 宣言全て。」に当てはまり、「Full Standards モード」となります。

それでは、もう一つ実験してみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
  <head>
    <title>ナイスデザインのWebページ</title>
  </head>
  <body>
    このテキストはブラウザ左上に隙間なしに表示したい。(Almost Standards mode)
 
  <script type="text/javascript">alert(document.compatMode)</script>
  </body>
</html>

「CSS1Compat」と出ました。「CSS1Compat」とは「標準モード」ということでしたね。上記の場合はこちらの「公開識別子 "-//W3C//DTD XHTML 1.0 Transitional//EN"」に当てはまり、正確には「Almost Standards モード」、つまり「準互換モード」になります。

CSS別の役割について

DOCTYPEスイッチによるレンダリングモードの変化がわかりましたので、そろそろCSS別に役割を見ていきましょう。

CSSファイル名 Full Standards モード Quirks モード Almost Standards モード 役割
forms.css ◯ ◯ ◯ すべてのモードで利用される。主に form 関連のCSS
html.css ◯ ◯ ◯ すべてのモードで利用される
quirk.css × ◯ × Quirksモードの時のみ利用される
viewsource.css ◯ ◯ ◯ ソースコード閲覧時に利用される

上記の結果は、各レンダリングモードのHTMLファイルを用意し、CSSを直接変更して（そしてFirefoxを再起動して再読込）して変化があるかどうかというパワープレイで実験しましたｗ

EditorOverride.css, contenteditable.css, mathml.css, designmode.css, svg.css, ua.css についてはよくわかりませんでした・・・ご存じの方教えてくださいm(_ _)m

FirefoxのデフォルトCSSと同じ名前でCSSを設置したらどうなるか

影響なかったです。まったく別に扱われますので、名前の重複などの心配は不要ですね。

ブラウザのデフォルトCSSを変更（具体例）

html.css の body は以下のように設定されています。これを少し変更してみましょう。

 77 body {
 78   display: block;
 79   margin: 8px;
 80 }

以下のようにしてみましょう。

 77 body {
 78   display: block;
 79   margin: 0px;
 80 }

変更後、forefoxを再起動します。すると、一番最初に示したHTMLの表示が変わります。merginがなくなった分隙間がなくなりました。

※編集した html.css はしっかりと元に戻しましょう。

デフォルトCSSのファイル名を変更したり削除したりするとFirefoxがちゃんと起動しない。

以下のようになってしまったりするので、デフォルトCSSの名前の変更や削除はやめましょう。


chrome://browser/skin/browser.css というのはなに？

アドレスバーに下記を入力すると CSS が表示されます。これは、先程まで見てきた html.css とは違うのでしょうか。

chrome://browser/skin/browser.css
chrome://global/content/xul.css

上記は、FirefoxのGUIを制御するもの。XUL(XML-based User-interface Language, ズール)はXMLに基づいたGUI記述言語です。今回の趣旨とは異なるので飛ばします。

HTML5について

HTML 5 の HTML 構文では、ブラウザがページを標準モードで描画することを保証するため、以下のDOCTYPEが必須となります。

<!DOCTYPE HTML>

参考情報