スタイル

スタイルの指定方法

CSSをHTMLに適用する方法と同様に、各種の方法でXULにスタイルを適用できます。

CSSによる指定

スタイルをCSSで記述して、それをxml-stylesheet処理命令で読み込みます。これはXMLにスタイルを適用する方法と同じです。

<?xml-stylesheet type="text/css" href="style.css"?>

CSSファイルをXMLファイルと同一のフォルダに配置するならばこの記述で問題ありませんが、一般的にはCSSファイルはskinフォルダに配置します。その場合にはパスをChrome URIで指定し、

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

のように記述します。また、このパスを解決できるようにChrome Manifest

skin sample classic/1.0 chrome/skin/classic/

のようにスキンのパスを指定します。このskin命令の記述がないと、「No chrome package registered for chrome://myPackage/skin/style.css」として、CSSファイルの読み込みに失敗します。

この例ではCSSをclassicフォルダに配置することを想定しているため、CSSファイルは\chrome\skin\classic\style.cssのパスに置きます。もし別のフォルダに配置するならば、skin命令でのパスの指定もそれに合わせます。

CSSの定義

label {
    color: red;
}
#foo {
    width: 30px;
}

XULの名前空間を使用するならば、@namespaceでそれを指定します。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

ブラウザのスタイルなどへの適用

ブラウザのスタイルを指定するuserChrome.cssなどにスタイルを適用するには、Stylesheet Serviceを使用します。これにはXPCOMを利用します。

var Cc = Components.classes;
var Ci = Components.interfaces;

var sss = Cc[ '@mozilla.org/content/style-sheet-service;1' ].getService( Ci.nsIStyleSheetService );
var ios = Cc[ '@mozilla.org/network/io-service;1' ].getService( Ci.nsIIOService );

var uri = ios.newURI( 'chrome://myPackage/skin/style.css' , null, null);
if( !sss.sheetRegistered( uri, sss.USER_SHEET ) )
{
    sss.loadAndRegisterSheet( uri, sss.USER_SHEET );
}

style属性による指定

要素のstyle属性で記述します。

<label value="TEST" style="color: red" />
style - XUL | MDN

style要素による指定

XHTML名前空間を宣言することで、HTMLのstyle要素と同様に記述できます。

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

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml">

<html:style>
#foo {
    color:red;
}
</html:style>

<label id="foo" value="TEST" />

</window>

style命令による指定

Chrome Manifestのstyle命令で記述します。XULとそれに適用するCSSを指定することで、XULにスタイルが適用されます。

style chrome://myPackage/content/sample.xul chrome://myPackage/skin/style.css

既定のスタイル

global.cssに既定のスタイルが定義されています。スタイルの一貫性を保つため、オーバーレイするとき以外はこのスタイルを使用するように指示します。

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

ファイル名を省いた場合には、global.cssが指定されたものとみなされます。よって次のようにファイル名を省略することも可能です。

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

スタイルクラス (Style classes)

global.cssを読み込むことで、いくつかのclass値を使用できるようになります。

<description               >ABC</description>
<description class="header">ABC</description>


スタイルの適用前後

class値の全容はStyle classes - XUL | MDNにあります。またはこれらのclass値が定義されている[chrome://global/skin/global.css]を、Firefoxで開くことでも確認できます。

アイコン

<image class="alert-icon" />alert
<image class="error-icon" />error
<image class="message-icon" />message
<image class="question-icon" />question

コンテナのサイズに合わせた伸縮

ある要素のサイズを、そのコンテナのサイズに合わせて自動で伸縮するようにするには、そのコンテナにflex属性を指定します。flex - XUL | MDN

<prefpane flex="1">
  ...
<hbox flex="1">
  ...

なお、これはCSSによるスタイルとは無関係です。

Firefoxアドオンの情報サイトから、まとめて検索