Help:Including additional CSS and JS

This help page will explain the recommended ways to include additional CSS and JavaScript on your community.

ImportJS
MediaWiki:ImportJS provides an interface for including articles that contain scripts - both local and from Dev Wiki - on a community.

The wiki does not need custom JS enabled for ImportJS to work.

Usage
ImportJS is a plain text article in which article names to import are specified line-by-line. All local files and Dev Wiki imports must be in the MediaWiki namespace to work. When stating files to import, the MediaWiki namespace should not be included in the name.

The system attempts to load each line, ignoring invalid titles. Thus you can achieve comments by prefixing a line with, or  , or any other invalid title character. Example:

 //local JS file, located at "MediaWiki:Cat.js" Cat.js

// Dev Wiki script, located at "MediaWiki:UploadMultipleFiles.js" dev:UploadMultipleFiles.js

The functionality of ImportJS is similar to that of, which can import several articles from local and external communities, bundling them into one network request and minifying them. Both  and ImportJS reduce file size and web traffic, effectively making a community with a large number of additional files load much more quickly.

Load order
When using ImportJS, the pages within will be loaded last. The full load order is:
 * 1) Common.js
 * 2) Fandomdesktop.js
 * 3) Imported scripts through Common.js
 * 4) Imported scripts through Fandomdesktop.js
 * 5) ImportJS

Common.js and Fandomdesktop.js is guaranteed to be executed before any imports. As such, many dev scripts use these pages for configuration purposes.

For groups of imports (being each separate call to,  , or the ImportJS definition), the order above determines what order they are requested, but not necessarily what order they are executed in. This is because they are downloaded asynchronously, and executed as soon as they are loaded.

However, multiple scripts within a single import do have a predictable execution order:
 * In  and   methods, scripts are executed alphabetically.
 * In, scripts are executed sequentially in the order that they appear on the page.

If writing code that depends on the existence of an imported script, you should never rely on the execution order. Instead, always use the callback or promise returned by  or , which fires/resolves when the script(s) are loaded and executed. See advanced usage for more information.

@import method
Using the, styles can be imported from any CSS file hosted on a wiki or on other websites (ending with .css on the url and contains changes for the default skin elements on the file). The syntax is as follows:

Per the above example, to import Local.css into Common.css, place this at the top of your Common.css file (it must be before any other rules):

For a non-English wiki, include the language path at the start of the URL:

An alternative way, which will make it easier to spot files loaded in the "Network" tab of your browser's "Web Developer" tool is to use:

@import is render-blocking, meaning that the site will wait until the CSS file is fully loaded before anything is displayed. This ensures that there is no flicker that might occur as a result of styles taking affect after the site has already been rendered on the user's device. However using imports can slow down page loads, particularly if multiple import statements are present as they will occur sequentially instead of concurrently.

You can read more on this method here.

importArticles
In lieu of the above method, importArticles will only be discussed here in regards to CSS imports. For JS imports, please see this page.

importArticles can still be used to import CSS styles. However, they will be subject to JS review since it has to be implemented through JavaScript.

Unlike @import, importArticles can occur in the background, and the presentation of the page isn't blocked. Loading CSS in this way can result in faster load times, but may result in a flicker effect as the styles are applied after the page is initially displayed.

Which method you use comes down to your use case. If you're applying styles that drastically affect the appearance of every page and need to avoid flicker; use the @import method. If your styles aren't important, need to be conditionally loaded, or affect parts of the page that aren't always visible immediately; use importArticles.

Example
Importing a local CSS file through importArticles:

Further help and feedback
de:Hilfe:Einbinden von zusätzlichem CSS und JS es:Ayuda:Incluyendo JavaScript y CSS adicional fi:Ohje:Ylimääräisen JavaScriptin ja CSS:n lisääminen fr:Aide:Inclure du CSS et JS supplémentaire hi:सहायता:अतिरिक्त CSS और JS का उपयोग id:Bantuan:Menyertakan CSS dan JS tambahan it:Aiuto:Includere CSS e JS aggiuntivi ja:ヘルプ:追加のJavaScriptとCSSをインクルードする ko:도움말:자바 스크립트 및 CSS 불러오기 nl:Help:Bijkomende JavaScript en CSS laden pl:Pomoc:Importowanie CSS i JS pt:Ajuda:Como incluir JavaScript e CSS adicionais ru:Справка:Включение дополнительных JS и CSS tr:Yardım:Ek CSS ve JS dahil uk:Довідка:Ввімкнення додаткових JS і CSS vi:Trợ giúp:Bao gồm JavaScript và CSS bổ sung zh:Help:導入更多JavaScript與CSS