Firefox の中身を少し覗いてみる
blog移行しました。新しいblogで更新を続けています。
Firefox のアドレスバーに
- resource://gre/res/html.css
- resource://gre/res/quirk.css
- resource://gre/res/forms.css
- resource://gre/res/viewsource.css
などを入力すると CSS のソースが表示されます。これは、Firefox がもっているデフォルトの CSS です。Standard mode の場合は html.css を参照し、Quirks mode 時は quirk.css を参照するようです。他にも MathML や SVG 用の CSS もありました。
これらの CSS は Windows の場合、 C:\Program Files\Mozilla Firefox\res に格納されています。そして、C:\Program Files\Mozilla Firefox\res に格納されている html.css などをリネームするなどして Firefox が参照できないようにすると、レンダリングされる HTML 要素はすべて inline 表示となります。
resource://gre/res/html.css は Web サイト制作時のリセット (ベース) 用の CSS を書くときの参考になります。
ちなみに GRE は Gecko Runtime Environment のことみたいです。
Mozilla 独自拡張について
これらの CSS では、Mozilla 独自拡張がたくさん使われています。例えば html.css の中では…
dd {
display: block;
-moz-margin-start: 40px;
}とか
center {
display: block;
text-align: -moz-center;
}などを見つけることができます。これは、現在用意されている CSS のプロパティと値だけでは足りなさそうということがわかります。Appendix A. A sample style sheet for HTML 4.0 のような CSS では足りないので独自拡張を使う必要があった感じ。
center 要素の挙動については centerを甘くみちゃいけない – vantguarde – web:g が参考になります。
XBL について
form.css にはビジュアル表現に関するもののほかに、-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas");のように Firefox の操作と結びつけるものもありました。
これは XBL といって、CSS をつかって、要素を動的に操作するための言語です。これを使えば、CSS から JavaScript を実行することもできます。
e.g.
XBL を適用する HTML のソースコード
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XBL のデモ</title>
<style type="text/css">
p {
-moz-binding: url("demo.xml#test");
}
</style>
</head>
<body>
<p>1個目のp</p>
<p>2個目のp</p>
<p>3個目のp</p>
<p>4個目のp</p>
</body>
</html>上記の HTML から参照される demo.xml のソースコード
<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="test">
<implementation>
<constructor>
<![CDATA[
alert(this.innerHTML);
this.style.color='red';
]]>
</constructor>
</implementation>
</binding>
</bindings>XBL は後の要素から適用されていくような挙動だった。実行されるのは少なくとも DOM が完成した後なのかな..。
この XBL ととてもよく似た実装が IE にもあります。IE では HTC を使うことで、CSS をつかって、要素を動的に操作することができます。HTC はかなり昔のものなので、XML に似ている書き方をします。
e.g.
HTC を適用する HTML のソースコード
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTC のデモ</title>
<style type="text/css">
p {
behavior: url("demo.htc");
}
</style>
</head>
<body>
<p>1個目のp</p>
<p>2個目のp</p>
<p>3個目のp</p>
<p>4個目のp</p>
</body>
</html>上記の HTML から参照される demo.htc のソースコード
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<public:component xmlns="http://www.w3.org/1999/xhtml" xmlns:public="urn:HTMLComponent">
<script type="text/javascript">
//<![CDATA[
alert(this.innerHTML);
this.style.color='red';
//]]>
</script>
</public:component>z-index の上限
resource://gre/res/EditorOverride.css には z-index: 2147483647; /* max value for this property */ という箇所がありました。どうやら Firefox での z-index の値は 2147483647 が上限らしいです。 (ちなみに 2147483647 = 2^31 – 1 = 0×7FFFFFFF で符号付き 32bit 整数の最大値)
z-index の値を 2147483648 として上限を超える場合を試してみると、Firefox 2 では該当の要素はレンダリングされませんでした。Firefox 3 では 2147483648 は 2147483647 として処理されるような挙動でした。
e.g.
<div style="background:#ff0; position:absolute; z-index:2147483648; width:100px; height:100px; top:0; left:0;">Fx 2 では消える</div> <div style="background:#f0f; position:absolute; z-index:2147483647; width:100px; height:100px; top:50px; left:0;">前面に表示される</div> <div style="background:#0ff; position:absolute; z-index:2147483646; width:100px; height:100px; top:25px; left:50px;">背面に表示される</div>
ちなみに IE の場合は、2147483648 以上は 2147483647 として扱われる挙動でした。
また、Safari (Webkit), Opera では、2147483647 と 2147483646 を重ねた場合、2147483646 が前面に表示されました。z-index が大きすぎる場合はすべて最大値として処理されるのでしょうか。
Firefox には他にも
- chrome://browser/content/browser.xul
- chrome://browser/skin/browser.css
- chrome://global/content/xul.css
などがあります。
Firefox のアドレスバーに chrome://browser/content/browser.xul を入力すると Firefox の表示領域にもう一つのFirefox の UI が表示されます。新しく表示された Firefox の UI アドレスバーに再度 chrome://browser/content/browser.xul を入力するとさらに表示されます。拡張子からもわかりますが、Firefox は XUL で構成されています。
chrome:// スキームから始まっているリソースは browser.jar などのようにハードコートされているので browser.jar を解凍するとそれぞれのファイルを実際にのぞくことができます。
C:\Program Files\Mozilla Firefox\chrome にある browser.jar を任意の場所にコピー、ペーストし、ファイル名を browser.jar から browser.zip に変更した後、zip ファイルとして解凍すると content というフォルダが現れます。chrome://browser/content/browser.xul は content/brouser/browser.xul に入っています。
このソースコードを覗いてみると、UI には XUL と CSS が使われていることがわかります。
トラックバックURI
http://www.yomotsu.net/wp/wp-trackback.php?p=509
この記事へのコメントはまだありません
コメントフォーム