XUL チュートリアル - スタイルシートを追加する

これまでに作った要素の外見を変更することはほとんどして来ませんでした。XUL は、要素をカスタマイズするのに CSS (Cascading Style Sheet) を使います。

スタイルシート

スタイルシートとは、要素のスタイル情報をもつファイルです。これは、もともと、HTML 要素のためにデザインされましたが、要素にスタイルを付けることに関しては、XUL 要素にも、どんな XML にも適用できます。スタイルシートは、フォント、カラー、境界、要素のサイズなどの情報をもちます。

Mozilla は、個々のウィンドウにデフォルトのスタイルシートを適用します。多くの場合、デフォルトをそのままにしておけば十分です。しかし、カスタムスタイルシートを提供したい場合も数多くあります。一般的に言えば、一つのスタイルシートを個々の XUL ファイルに関連付けることになるでしょう。

スタイルシートはどこに置いても構いません。XUL ファイルを別の場所に保存し、それに HTTP URL を使ってアクセスする場合と同じことが、スタイルシートでもできます。クロムシステムの一部としてインストールする XUL パッケージを作っている場合、選択肢は 2 つあります。まず、スタイルシートを XUL ファイルと同じディレクトリーに保存することです。この方法には、アプリケーションにスキンが付けられない場合に、難点があります。2 番目の方法は、ファイルをスキンの一部とすることです。

スキンを付けることができる「ファイル検索」ダイアログを作っているとしましょう。「ファイル検索」ダイアログは、chrome://findfile/content/findfile.xul という URL を使って参照できます。そのため、スタイルシートは、chrome://findfile/skin/filefile.css として保存します。唯一の違いは、ディレクトリーが content ではなく skin であることです。

これまでの XUL の例はすべて、実際には、既にスタイルシートを使ってきました。2 行目はいつも次のようなものでした。

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

この行は、chrome://global/skin が提供するスタイルを使用することを指示しています。Mozilla では、これは、XUL 要素のデフォルトのスタイル情報をもつ global.css ファイルに翻訳されます。この行を取り去っても、要素は動作しますが、かなり平坦なものになるでしょう。スタイルシートは、要素をもっと適した形で見せるため、様々なフォント、カラー、境界を適用します。

スタイルを変更する

しかしながら、要素のデフォルトの外見では、望みの外見にならない場合も数多くあります。この場合は、自分自身のスタイルシートを追加する必要があります。これまで、要素に 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">
    <label control="searchtype" value="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"/>
      <box context="editpopup" flex="1">
        <textbox id="find-text" flex="1" context="editpopup"/>
      </box>
  ...
<progressmeter id="progmeter" value="50%" style="display:none;"/>
  ...
<button id="find-button" label="Find" default="true"
   onclick="doFind();"/>
<button id="cancel-button" label="Cancel" onclick="window.close();"/>

新しい xml-stylesheet を使って、スタイルシートをインポートしています。ここでスタイルを指定して、スタイルを直接 XUL ファイルに置くことはしません。同じ方法で必要な数のスタイルシートをインクルードできます。ここでは、スタイルシートは findfile.xul と同じディレクトリーに置いてあります。

上のコードでは、スタイルの幾つかを削除しました。削除しなかったのは、progressmeter の display プロパティーです。これは、スクリプトが変更します。そのため、プログレスバーを最初から見えるようにしておくのは意味がないので、それはそのままにしてあります。これは、実際に必要なら、別のスタイルシートに置くこともできます。他から参照できるように、スペーサーに class を追加しました。

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

#progmeter {
  margin: 4px;
}

#find-button {
  width: 8ex;
}

#cancel-button {
  width: 8ex;
}

.springspace {
  width: 10px;
}

.titlespace {
  height: 10px;
}

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

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

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