Board Thread:Support Requests - Getting Technical/@comment-3335785-20130220124714/@comment-4674838-20130220162017

If the CSS in question is only meant to affect HTML elements that are added by the script itself, let your script insert the stylesheet directly into the DOM (synchronous) rather than depending on importArticles (asynchronous, no way of knowing when it will complete)

e.g. at the top of your script (you want it to run before any other stuff in your script so the CSS will be ready when you need it):

or, even faster, use an internal stylesheet by putting your CSS directly into your script with a &lt;style> tag rather than loading it from a separate page with a &lt;link> tag:

A couple notes:
 * Both of these pieces of code are manipulating HTML in the document, so naturally they should be placed inside a $(document).ready function for safety (if you don't do this, your script will still work because Resource Loader happens to load scripts at the bottom of the &lt;body> tag, but you should not depend on this). e.g.
 * A number of examples of scripts using these approaches can be found on the Wikia Developer's Wiki
 * In w:c:dev:FloatingToc/code.js you can see that Pecoes has created himself an "initStyles" function inside of which he's using both these approaches to insert both an external stylesheet and an internal one.
 * Another example is w:c:dev:StarRatings/ui.js -- look near the bottom of the script for the line commented with // load "Berkshire Swash" typeface and define .preset1
 * Type  into your JavaScript console and you'll see the source code for MediaWiki's own   function, which inserts an external stylesheet (&lt;link> tag), albiet with native JavaScript rather than jQuery.