Can I definite a gadgrt like this (if I were admin): a gadget using a.css, b.css and c.css. It displays for all users, but gadget-b.css only works for Vector users and c.css only works for Monobook users?
i do not know the answer to the question as phrased, but i think the same goal can be achieved rather simply:
each of the skins' bodies declares a class, e.g., for vector, it's "skin-vector" and so on and so forth.
you can define a single css for the gadget, and precede each of the rules (or rather, each of the rules which are "skin specific") with .skin_XXX, so each of those rules in your unified css, will apply to specific skin only.
i understand this is not what you asked, exactly, but if i understood correctly what you are trying to do, i think "my" solution is simple and straightforward.
There is a way to specify that the entire gadget is considered only if the current skin matches this or that particular one.
However, this was not your question. You want to run the gadget for every skin, but load particular resources depending on current skin.
Well, the current skin is known to the JS gadget, and depending on that you may load different CSS pages by mw.loader.load(). However, CSS definitions then arrive quite late and might change the first presentation in an undesirable way.
The suggestion made before is better: Load one common CSS resource from the first beginning, and distinguish by classes .skin-vector those rules which are not appropriate for all skins.
Alternatively, you could split your gadget into a single common gadget and skin-specific gadgets (so for your example you would end up with three gadgets), which would avoid the load timing issues of PerfektesChaos' suggestion. However, it would then require your users to enable separate gadgets for the same functionality (or require you to set multiple gadgets to active by default and maybe hidden depending on what you're after).
So again, the suggestion to use skin-specific classes in a single CSS file is the best option here.
It is almost impossible to wait until CSS has been loaded and is in effect, then beginning to insert your HTML elements.
There are classes depending on user groups, like sysop or not anonymous, but IIRC they need to be defined by project. German Wikipedia can limit CSS visible to sysop only, e.g. a block user button which is meaningless for everybody else, or do not offer user preferences to anonymous users.
Another approach would be to use the ostracised inline style="" and create HTML elements only under certain conditions and provide specific CSS. Such inline style is present together with the element and does not depend on style sheets arriving later. By smart programming they allow centralised maintenance like class rules.
I'm a coding guy from several wikis at FANDOM (formerly known as Wikia). FANDOM is running MediaWiki v1.19 (what a shame), so it's technically able to use the Gadgets extension. I was wondering when I did an api request to get all my activated gadgets, what query.gadgets.metadata.settings.shared means. Is it something like the current "dependencies" option?
close, but this won't create the desired effect exactly - what the OP asked for would allow for registered users to "opt-in", while your solution does not. however, this is the closest i can think of with a single script.
alternatively, you could play a little variation on the above: call the gadget directly from common.js under the condition "mw.user.anonymous()", and make the gadget non-default.
I'd recommend do making it as a gadget to allow optimized loading of it as well as internalization. Simply make it a normal gadget that doesn't have [default] but does have [ResourceLoader]. And from MediaWiki:Common.js (as קיפודנחש suggested), call mw.loader.load('gadget.YOUR_GADGET_ID') under a conditional:
For the record: the mw.loader.load can also be in a default gadget hidden from preferences with the "|rights=hidden" hack (example) or with the native "hidden" option from the next version of the gadgets extension.