Skip to main content

Visit Mozilla.org

Using the Stylesheet Service

出典: MDC


目次

[編集] はじめに

Firefox 1.5 では、userContent.css ファイルや userChrome.css ファイルを使うことなくユーザスタイルシートや UA スタイルシートを 拡張機能 で扱えるようにする API が追加されました。この API は nsIStyleSheetService.idl で定義されています。

そのようなスタイルシートの追加や除去はページが次にロードされるときに効果を現します。登録されたスタイルシートは再起動時には登録が解除されます。

このサービスを使用して追加されたスタイルシートは、chrome 文書にも content 文書にも適用されます。XUL 文書にスタイルシートを適用したい場合は、正しい名前空間を宣言するのを忘れないでください。

この文書での例はすべて XPCOM を使った JavaScript で示します。

[編集] API の使用

以下の例の "chrome://myext/content/myext.css" という文字列はただの例です。それをロードしたい CSS ファイルの URL に置換してください。

USER_SHEET を AGENT_SHEET に置き換えることもできます。これは CSS カスケードにおいてシートをどこに配置したいかによります。詳しくは CSS の仕様 をご覧ください。

[編集] スタイルシートの追加

スタイルシートサービスを使用するには、サービスへの参照を取得し、URI を作成し、その URI をスタイルシートサービスの loadAndRegisterSheet メソッドに渡してください。 

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
                    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("chrome://myext/content/myext.css", null, null);
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
注意：loadAndRegisterSheet は同期してスタイルシートをロードするため、ローカル URI を使ったこのメソッドしか呼び出すべきではありません。

[編集] シートがロードされたかどうかの判定

拡張機能を作成し、onload ハンドラ内でスタイルシートを追加する場合は、シートがすでに追加されているかどうかを確かめるべきです。それを確かめないと、ウィンドウがロードされるたびにシートを追加してしまうことになります。 

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
                    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("chrome://myext/content/myext.css", null, null);
if(!sss.sheetRegistered(uri, sss.USER_SHEET))
  sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

[編集] 以前に登録されたスタイルシートの除去

以前に登録したスタイルシートを除去したい場合、単純に unregisterSheet メソッドを使用してください。 

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
                    .getService(Components.interfaces.nsIIOService);
var u = ios.newURI("chrome://myext/content/myext.css", null, null);
if(sss.sheetRegistered(u, sss.USER_SHEET))
  sss.unregisterSheet(u, sss.USER_SHEET);

[編集] 後方互換性

Firefox 1.0 (Gecko 1.7) 系のブラウザをサポートする必要がある場合、その新しいスタイルシートサービスが利用できるかどうかを確かめる必要があります。Components.classes オブジェクトにそのコントラクト ID があるかどうかを探すことで確かめることができます。たとえば： 

if("@mozilla.org/content/style-sheet-service;1" in Components.classes)
{
  // 新しいスタイルシート API が利用可能
}
else
{
  // 利用不可
}
"http://developer.mozilla.org/ja/docs/Using_the_Stylesheet_Service" より作成