Importing CSS pages on FANDOM
There are different ways to import CSS. Continue reading below to learn how to efficiently batch import scripts to speed up performance and make your code look cleaner.
If your CSS page has several lines of code that say
@import, you may be able to combine them! By batch importing a collection of scripts with a single import, your CSS will load faster and look cleaner. Consider the examples below: on the left there is an example of several imports using the classic @import rule; on the right is how you can merge them in a single command, which will minify them, thus increasing performance:| Classic imports | Combined imports |
|---|---|
<span class="co1">@import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");</span>
<span class="co1">@import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");</span>
<span class="co1">@import url("http://dev.wikia.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");</span> | <span class="co1">@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css")</span> |
Note: CSS imports rules must be stated at the beginning of the page, before any other rule. Otherwise they won't work. Here's an example of the correct placement:
| Wrong placement | Correct placement |
|---|---|
<span class="coMULTI">/* BEGINNING OF THE PAGE */</span>
<span class="coMULTI">/** other styles **/</span>
<span class="re1">.example</span> <span class="br0">{</span>
styling
<span class="br0">}</span>
<span class="coMULTI">/** imports **/</span>
<span class="co1">@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");</span> | <span class="coMULTI">/* BEGINNING OF THE PAGE */</span>
<span class="coMULTI">/** imports **/</span>
<span class="co1">@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");</span>
<span class="coMULTI">/** other styles **/</span>
<span class="re1">.example</span> <span class="br0">{</span>
styling
<span class="br0">}</span> |
But these are not the only ways to import CSS! It's also possible to import CSS using JavaScript pages through importArticles. Read more on:
You might also want to check other helpful pages on CSS: