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
MediaWiki:ImportJS provides a plain text article in which to specify JavaScript article names. 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 this 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

@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:

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 done through JavaScript. Additionally, loading CSS in this way creates a flicker effect as the CSS is applied after the page is initially displayed. For best results, use the @import method.

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