XUL チュートリアル - XBL スタイル

このセクションでは、XBL 要素にスタイルを追加する方法を学ぶことにしましょう。

無名内容のスタイルを変更する

XBL content 要素内に置かれた要素のスタイルは、他の要素の場合と同様に変更できます。id と class 属性が必要に応じて使えます。CSS の観点からすれば、内容は、実際には、無名ではありません。内側の内容にスタイルを付けるのに子供の選択子が使えます。

XBL ファイルに XUL の場合と同様に直接スタイルシートをインポートできますが、これは実際には行なうべきではありません。カスタムスキンを作っているのなら、global.css のスタイルを変更するだけにする方がよいでしょう。

以下の例では、三重の境界をもつボタンを作ります。

XBL:

<binding id="triplebox">
  <content>
    <xul:box class="outer-triplebox">
      <xul:box class="inner-triplebox">
        <xul:button class="triplebutton" inherits="label,crop,accesskey"/>
      </xul:box>
    </xul:box>
  </content>
</binding>

CSS:

.outer-triplebox {
  border: 2px solid red;
  margin: 3px;
}

.inner-triplebox {
  border: 2px solid blue;
  margin: 1px;
}

.triplebutton {
  border: 2px solid green;
  margin: 1px;
}

ボタンの周囲に境界を追加し、2 つのボックスがボタンを取り囲んでいます。境界を区切るため、マージンを少し加えました。お望みのどんなスタイルプロパティーでも追加することができます。これによって、CSS でできるよりもはるかに精密な外見をもつ要素が作れます。これができることによって、特定のプラットフォームにあるような十分な調整を施された 3 次元ボタンを作ることができます。

無名内容は、それにスタイルをつけた場合、特別扱いされません。以下の XUL では、内側の内容に簡単にスタイルを付けることができます。

XUL:

<box class="triplebox"/>

CSS:

.triplebox > .outer-triplebox {
  border-top: 2px solid yellow;
  border-left: 2px solid yellow;
  border-right: 2px solid orange;
  border-bottom: 2px solid orange;
}

このスタイルルールは、クラス triplebox をもつ要素の子供の outer-triplebox クラスをもつ要素の境界を変更します。これは、外側のボックスが XUL で定義され、内部のボックスが XBL で定義されている場合でも、XBL ファイルにあるボックスの一つにマッチします。

(進む) 次のセクションでは、既にある XBL 定義を拡張する方法を見ることにしましょう。