スタイルシートの追加

これまでに作成してきた要素では、外観についてはほとんど変更しませんでした。 XUL では、要素の外観をカスタマイズするために CSS (Cascading Style Sheets) を使用することになります。

スタイルシート

スタイルシートとは、要素のスタイル情報を含んだファイルのことです。 スタイルシートは、もともとは HTML 要素のために設計されたものですが、 XUL 要素を含めて、任意の XML に適用することが可能です。 スタイルシートには、フォント (font)、色 (color)、境界線 (border)、要素の大きさといった情報が含まれています。

Mozilla では、特に指定が無い場合、各 XUL ウィンドウにデフォルトのスタイルシートを適用します。 多くの場合は、デフォルトのままでも十分ですが、 場合によっては、カスタムスタイルシートを使用したい状況もあるかもしれません。 この場合、通常は、それぞれの XUL ファイルに対して、1 つずつスタイルシートを関連付けることになります。

スタイルシートは、どこでも好きな場所に置くことができます。 例えば、リモートに格納された XUL ファイルを、HTTP の URL でアクセスする場合は、 スタイルシートも同様にリモートに置くことが可能です。 また、chrome システムの一部としてインストールするために XUL パッケージを作成した場合には、2 つの選択肢があります。 1 つめは、XUL ファイルと同じディレクトリにスタイルシートを格納する方法ですが、 この方法には、そのアプリケーションをテーマに対応させることができなくなるという短所があります。 このため、2 つめの方法では、スタイルシートをテーマの一部として含めておくようにします。

なお、スタイルシートは、これまで見てきた XUL の例の中でも既に使われていました。 これらの例の全ての XUL ファイルの 2行目は、いつも下記の内容だったはずです。

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

この行は、chrome://global/skin/ で提供されているスタイルを使用するべきであることを指示しています。 Mozilla では、これは global.css ファイルが指定されたと解釈され、 このファイルに含まれる XUL 要素に対するデフォルトのスタイル情報が読み込まれます。 このスタイルシートでは、たくさんのフォントや、色、境界線の指定を、要素の外観をより良くするために適用しているため、 この行を取り去った場合も機能的には動作しますが、見た目はかなり素気ないものになるはずです。

スタイルを変更する

しかしながら、デフォルトの要素の外観が、望むものではない場合もあると思います。 この場合は、独自のスタイルシートを追加する必要があります。 これまでは、要素上の style 属性を利用して、スタイルを適用してきました。 この方法でも動作はしますが、実際には最良の方法ではありません。 より優れた方法をとる場合は、個別にスタイルシートを作成します。 これによって、外観の変更がスキンを変更するだけで容易に行えるようになります。

しかしながら、限定的ではあるものの、style 属性を使用することが容認される場合もあります。 具体的には、スクリプトからスタイルを変更する場合や、レイアウトの変更が要素の意味にも影響するような場合です。 (といっても、やはり可能な限りこの属性の使用は回避するべきだと思います)。

なお、インストールされているファイルに対しては、マニフェストファイルを作るか、修正してからでないと、スキンをインストールすることはできません。

ファイル検索ダイアログの例

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="findfile.css" type="text/css"?>
  ...
<spacer class="titlespace"/>
  <groupbox orient="horizontal">
    <caption label="Search Criteria"/>

      <menulist id="searchtype">
        <menupopup>
          <menuitem label="Name"/>
          <menuitem label="Size"/>
          <menuitem label="Date Modified"/>
        </menupopup>
      </menulist>
      <spacer class="springspace"/>
      <menulist id="searchmode">
        <menupopup>
          <menuitem label="Is"/>
          <menuitem label="Is Not"/>
        </menupopup>
      </menulist>

      <spacer class="springspace"/>
      <menulist id="find-text" flex="1"
          editable="true"
          datasources="file:///mozilla/recents.rdf"
          ref="https://www.xulplanet.com/rdf/recent/all"/>
  ...
<spacer class="titlespace"/>
<hbox>

  <progressmeter id="progmeter" value="50%" style="display:none;"/>

#find-text {
  min-width: 15em;
}

#progmeter {
  margin: 4px;
}

.springspace {
  width: 10px;
}

.titlespace {
  height: 10px;
}

スタイルシートをインポートする

XUL から、スタイルシートを使用するためにインポートする方法は、少し前にも説明していますが、 以下の例で示すような記述になります。

<?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?>

これは、ブックマークウィンドウ用 XUL ファイルの最初の方に記述されている内容と、おそらくは同じです。 この指定によって、bookmark.css というブックマーク用のスタイルシートをインポートします。 ここでは特定のファイル名を指定していませんが、 Mozilla のスキンシステムは十分洗練されているので、適切なスタイルシートが自動的に選択されます。 なお、同様の指定は、グローバルスタイルシートファイル (chrome://global/skin) のときにも行っています。

また、スタイルシートは CSS の import ディレクティブを使用することで、 他のスタイルシートからインポートすることも可能です。 このため、通常は、各 XUL ファイルからは、それぞれに関連付けられた 1 つのスタイルシートだけをインポートし、 共通のグローバルスタイルシートは、そのスタイルシートからインポートするようにします。 これは、以下に示すコードによって行なうことが可能です。 これによって、XUL ファイルからグローバルスタイルシートをインポートする指定を削除できます。

XUL からのスタイルのインポート:
<?xml-stylesheet href="chrome://global/skin/"  type="text/css"?>

CSS からのスタイルのインポート:
@import url(chrome://global/skin/);

2 つめの構文の方が、XUL ファイル自体と依存関係があるファイル数を減少させることができるので好まれています。

全ての要素は CSS を使うことでスタイルを設定することが可能です。 このとき、スタイルを設定したい要素を選択するためにセレクタ (selector) を使用します。 (セレクタとは、スタイルルールの中括弧 "{" の前の部分のことです)。 以下に、有効なセレクタの一部を一覧にまとめたものを示します。

button

全ての button 要素に適用されます。

#special-button

id が special-button である要素に適用されます。

.bigbuttons

class が bigbuttons である、全ての要素に適用されます。

button.bigbuttons

class が bigbuttons である、全ての button 要素に適用されます。

toolbar > button

toolbar 要素の中に直接置かれた、全ての button 要素に適用されます。

toolbar > button.bigbuttons

toolbar 要素の中に直接置かれた、class が bigbuttons である、全ての button 要素に適用されます。

button.bigbuttons:hover

class が bigbuttons である、全ての button 要素が該当しますが、実際にスタイルが適用されるのはマウスがその要素の上にあるときのみです。

button#special-button:active

id が special-button である要素が該当しますが、適用されるのはアクティブ (その要素上でマウスボタンが押されている状態) のときのみです。

box[orient="horizontal"]

orient 属性が horizontal に設定されている、全ての box 要素に適用されます。

これらのルールは、必要に応じて任意に組み合わせることが可能です。 要素のスタイル付けを指定する際には、いつも可能な限り正確な指定を行うことを心がけてください。 そのほうが効率的ですし、間違った対象にスタイルを付けてしまう可能性も減らすことができるはずです。

次のセクションでは、ツリーにスタイルを適用する方法を見ていきます。