xulxulrunner

Implement OS-based stylesheets in XUL


I'm a friend clean GUI's. Unfortunately I need to overwrite the "chrome://global/skin" stylesheets for some reason.

What's the best method, to implement different os-based stylesheets into xul-documents - eg. for GUI's like windows xp, windows aero or macosx aqua (overlay-aero.css, overlay-aqua.css...).

Does Mozilla provide any standards for os-based stylesheet-implementing?


Solution

  • Without really knowing how you intend to overlay the styles: yes, the usual approach would be using manifest flags. For example, if you define a style overlay in your extension's chrome.manifest file, you would do it like this:

    style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-win.css os=WINNT
    style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-osx.css os=Darwin
    style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-linux.css os=Linux
    

    You can also use Mozilla-specific media features to distinguish between different themes of one OS in your stylesheet. For example:

    @media all and (-moz-windows-classic)
    {
      ...
    }
    @media all and (-moz-windows-theme: aero)
    {
      ...
    }
    @media all and (-moz-windows-compositor)
    {
      ...
    }