Firefoxアドオンの開発手法スタイル
スタイルの指定方法
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
- alert-icon - Mozilla | MDN
- error-icon - Mozilla | MDN
- message-icon - Mozilla | MDN
- question-icon - Mozilla | MDN
コンテナのサイズに合わせた伸縮
ある要素のサイズを、そのコンテナのサイズに合わせて自動で伸縮するようにするには、そのコンテナにflex属性を指定します。flex - XUL | MDN
<prefpane flex="1"> ...
<hbox flex="1"> ...
なお、これはCSSによるスタイルとは無関係です。