Writing Skinnable XUL and CSS

以下の文書ではスキンを書く際に遵守すべき規則を概説します。Mozilla は Navigator, Sidebar, Editor といくらでも UI パッケージをインストールできます。各パッケージはその外観を決定する CSS ファイルと画像による個別のスキンを含んでいます。

特に Mozilla のスキンについてはグローバルと呼ばれる特別なパッケージがあります。このパッケージにはグローバルスキンと呼ばれるスキンが含まれています。あなたのパッケージを他のパッケージと融合させたいのであれば、パッケージ間のコピー量を減らし UI を全体として切り替えやすくするため、あなたのパッケージ用のスキンはグローバルスキンから設定値を継承すべきです。

パッケージ用 CSS ファイルの書き方

1. CSS を学べ！ これは自明なようではあるが、我々が目にしてきた極めてやっかいな問題の多くは、バグがあったり文法的におかしい CSS を書く人々によって引き起こされている。 仕様書を読め！本から学べ！知るんだ！愛するんだ！君の一部にしてしまうんだ！ 【訳注: CSSを取り扱った日本語の書籍としては、もはや少々古いと言わざるを得ませんが、すみけんたろう著 "スタイルシートWebデザイン CSS2完全解説" (技術評論社) が入門書としてお薦めです。HTMLの説明などは少々冗長ですが、価格も手ごろ(1980円)ですので元は取れます。本書で基本を理解したところで仕様書を読むというのが訳者の個人的お薦めコース。 # 訳者は筆者や出版社と無関係です。(^^;】 https://www2.gihyo.co.jp/books/bookinfo.asp?ID=306
2. 各スキンにはマスタースキンファイルがあります。パッケージのスキンには必ずパッケージ名と一致する名前のマスタースキンファイルがあります。例えば、Navigator パッケージのスキンはこのパッケージによる XUL ウィンドウ全体の外観を決める navigator.css というファイルを含めるべきです。
3. グローバルスキンを継承するのであれば、明示的にグローバルスキンの取り込みをしなければなりません。スキンファイルにグローバルスキンを継承させたいのであれば、グローバルスキンを明示的に取り込むべきです。ファイル最初に @import 命令を書くことよってこれを行います。

   @import url(chrome://global/skin/)
   ... rest of skin file ...
   

   【訳注: グローバルスキンはその名前が暗示するものとは違い、自動的に読み込まれるものではないということです。また、グローバルスキンを継承する他のスキンを読み込むことで段階的にグローバルスキンを継承することも可能だが、依存性などを考慮して直接取り込むようにするべきだということも含意すると思います。】

4. スキンの CSS ファイルは2つの区分に分けられます。ベーススキンファイルと派生スキンファイルです。他のスキンファイルを取り込む CSS ファイルのことを派生スキンファイルといいます。他のスキンファイルを取り込まない CSS ファイルはベーススキンファイルといいます。この規則には重要な例外が一つあります。他のスキンファイルを取り込まないが、他のコンポーネントのスキンに於いてのみ使用される予定であるスキンファイルも、それらは暗黙的に他のコンポーネントのスキンから設定値を取り込むので、派生スキンファイルとします。この種のファイルは典型的には再利用可能オーバーレイウィジェットとして使用されます(例えば、サイドバー)。
5. XUL オーバーレイで読み込まれるのであれば、CSS ファイルは他のスキンファイルを取り込んではなりません。 XULオーバーレイに使用される CSS ファイルは決してグローバルスキンを(或いはより正確には他のいかなるスキンも)取り込んではなりません。既に派生しているスキンであり、それ故グローバルから継承をしてはならないのです。そうする代わりに、描画される場所の色、フォント、境界線の設定値に対応するべきなのです。例えばサイドバーは Messenger でも Navigator でも使用されるのでグローバルスキンを取り込むべきではありません(両者は全く異なるカラースキームを持っていることがあります)。もしグローバルスキンを取り込んでしまうと、Navigator でオーバーレイした際にクラッシュする可能性があります(現在のユーザの選択した Navigator スキンがグローバルから継承をしていなかった場合に)。
6. 派生スキンファイルはフォント、配色、境界線の設定値を含んではなりません。これらの設定はベーススキンファイルでのみ行われるべきです。 その代わりに派生スキンファイルではベーススキンファイルを継承して適切なフォント、配色、境界線の設定値を得るべきです。この制限に従うことで、パッケージはほぼ完全にグローバル初期値を変更するだけで切り替え可能になります。この規則はまた他のコンポーネントでオーバーレイされる UI コンポーネントの CSS ファイル設計にも適用されます。以下にそれぞれの場合の例を挙げます。

   例1: Navigator パッケージにはポップアップメニューボタンのあるパーソナルツールバーがあります。ツールバーとボタンの配色は XUL の適切な要素に class 属性を指定することでグローバルを元に描画されるべきです。navigator.css 中にはパーソナルツールバーのヘッダやメニューボタンの境界線について配色、フォントその他を定めるルールが存在してはなりません。

   例2: Messenger パッケージには全てのウィンドウのタスクバーに現れる Messenger ボタンの外観を記述する CSS ファイルがあります。Messenger の CSS ファイルはこのボタンの境界線や配色を記述しようとしてはなりません。アイコンのみを記述するべきなのです。このボタンは Navigator ウィンドウで(オーバーレイを通して)使用されるもので、用いられるフォント/配色は Messenger で記述されるべきではないからです。こうすることで使用場所への依存を最小限にしてこのボタンが合成できるようになります。

   この規則の重要性を強調しすぎることはありません。派生スキンファイルは配色、フォント、境界線についてのルールを一切含んではなりません。特定プロダクト中に限って許す場合にはこの規則に反することが認められます。現設計の Mozilla スキンでは(グローバルは別だが) 全て各 CSS ファイルは派生スキンファイルであり、このルールはあなたのCSS全てに適用されることに注意して下さい!!!

7. 派生スキンファイルはウィジェットの外観初期設定を変えようとしてはなりません。 例えば、派生スキンファイルには <tt>tagName {...};</tt> という形式の CSS ルールが決してあってはなりません。そのようなことをすればウィジェットの外観初期設定を再定義したこととなり、同じベーススキンファイルから正しく継承した他ウィンドウの UI と あなたのウィンドウの UI とが異なるものとなってしまいます。
8. 子孫セレクタは禁止されています。 初めに認められたルールを使用する場合を除き子孫セレクタは決して使用してはなりません。これらのルールへのマッチは(細心の注意を払わない限り)能率が悪く、一般的なタグ名しか使わなければ、明らかに馬鹿げたものになります。 数ヶ月前に私がグローバルスキンに含めてツリーを遅くしてしまった有害なルールを紹介しましょう。

   treehead treerow treecell { <font color="#FF0000">'''ダメ! 有害! 終わってる!
                        '''</font>  ...
   }
   

   この有害なルールによってスタイルシステムは treehead 中にない全 treecell (事実上典型的なツリーでの全 treecell) に対して、スタイルルールがマッチしないことを判断するために全ての親チェーンをドキュメントルートまで這い上がっていく羽目になりました。

   本当は子セレクタを代わりに使いたい人がこのルールを間違って使用していることがよく見られます。前述のルールで私がした間違いもそれです。私は <tt>treehead > treerow > treecell</tt> を使用するべきだったのです。詰まるところ、私が意図していたのはそれだったのです。

9. クラス属性に対しては決して属性セレクタルールを用いないこと。 これは非効率であり、代わりに単にクラス記法(ドット記法)を用いるべきです。

切り替え可能 XUL の書き方

1. ウィンドウを記述する XUL ファイルは必ずそのパッケージのマスタースキンファイルを取り込みます。 例えば、Navigator パッケージのウィンドウを記述する XUL ファイルは全て navigator.css を明示的に取り込む行を含むべきです。とはいえ XUL オーバーレイは他のスキン中で使用されるだから、含まないべきです。
2. XUL ファイルは決してそのパッケージ外からスキンファイルを取り込みません。 パッケージ中に存在しない XUL からスキンファイルを読み込むのは破廉恥で忌まわしい(Netscape の泉の前で公開むち打ち刑に処すべき)冒涜です。例えば、Navigator XUL ファイルは決してグローバルスキンやサイドバースキンから読み込んではなりません。
3. 他のパッケージの存在が保証され得る場合を除き XUL ファイルは他のパッケージから明示的にファイルを読み込みません。 例えば、サイドバー UI が常に Navigator と共にインストールされる場合にのみ Navigator XUL ファイルはサイドバーオーバーレイを明示的に読み込むことが出来ます。もしサイドバーがインストールされることもされないこともある独立したコンポーネントとすることが出来れば、XUL ファイル中にオーバーレイが存在してはなりません。代わりにクロムレジストリを通して為されなければなりません。 クロムレジストリを使用して為されるべきオーバーレイにはセキュリティ錠アイコンや Navigator ウィンドウに於ける Messenger UI が含まれます。
4. 許可がない限り XUL ファイルで style="..." の使用は禁止されています。 インラインスタイルの使用は何であれ、取り込んだスキンを上書きするので極めて危険であり、その使用が認められるに先立って承認を受けねばなりません。
5. 画像のクロム URL は決して XUL 中に存在してはなりません。 スキンの画像を参照するクロム URL は何であれ XUL に於いては厳格に禁じられています。スキンから画像を表示する必要があることが分かったら、<html:img> を使用する代わりに <titledbutton> とスタイルを使用しなさい。ここでの問題はスキンへの制限を生じてしまうことです。この制限というのは、指定した通りの名前の画像を提供するようスキンデザイナーに強いることです。不健康です。 クロム URL を DTD に記入する特に悪質な人々もいることに注意して下さい。これは更に一層悪いもので、同様に厳格に禁じられています。