0

Firefox add-on. Facing some padding problems for some XUL elements in mac os (windows, linux are okay). I wish to know if there are any css tricks to identify the OS platform and apply a style to an element only for that OS ? From a search, some of the possible options I found are :

  • Create a separate stylesheet file for the OS and modify chrome.manifest to point to that.
  • Use some external js library and use css selectors.
  • Identify platform from the add-on code, and load and register a second style sheet using the style sheet service

First option requires me to duplicate everything in stylesheets. Second one brings in dependency on other libraries. Third option might work, but I want to know if there are any simpler, elegant solutions ?

Thank you!

user3337744
  • 119
  • 7
  • 1
    With first option, you can avoid duplication by putting all common css in one file and then use ````@import()```` in platform specific css files. – Kashif Nov 17 '14 at 21:26
  • Thanks! I wanted to avoid an `@import()` and have lots of stylesheets lying around. But yes, this is one proper way of doing things. – user3337744 Nov 18 '14 at 09:28

1 Answers1

1

Those three options are pretty much it. For the first option you should put all of the common css in to one css file, and load that on all platforms.

erikvold
  • 15,988
  • 11
  • 54
  • 98
  • Thanks! That seems to be a proper way of doing things. But I wanted to avoid lots of stylesheets lying around. At the moment, I'm going with the third option, and load a second sheet only for mac. – user3337744 Nov 18 '14 at 09:30