Nuvola apps important
This script is for PERSONAL use only!
You are free to install this script for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:Common.js or MediaWiki:Wikia.js), as it would violate FANDOM's Terms of Use.
(See the customization policy)

PortableCSSPad is designed to make testing CSS code easier. The main feature of the script is that it provides a textarea box for typing or copy/pasting CSS rules which will immediately affect the current page. This can be used as a way to preview CSS changes before publishing them, or even as a work around for MediaWiki:Wikia.css caching issues.

While this script is not a replacement for Firebug or other in-browser developer tools, it does provide a few extra features such as minification, beautification, and validation. The pad itself is also resizable and draggable.


To install the script, simply add the following to your global.js on Community Central:

    type: 'script',
    articles: [
importArticles — Best Practices for installing JavaScript on FANDOM
The importArticles statement is designed to combine multiple HTTP requests into a single data transfer, allowing multiple scripts to load and execute faster. If you've been installing several different scripts, your JavaScript file has probably accumulated unnecessary import statements. Click "Expand" to learn how to efficiently batch import scripts to speed up performance and make your code look cleaner. One other approach is by using the MediaWiki:ImportJS.
If your JavaScript file has several lines of code that say importScript, importScriptPage, or importArticles, you may be able to combine them! By batch importing a collection of scripts with a single import, your JavaScript code will load faster and look cleaner. Consider the example below. On the left is an example of what your JavaScript file might currently look like. On the right is how you could improve that code.
Multiple imports — messy and slow One import — clean and efficient
  type: 'script',
  article: 'u:dev:FloatingToc/code.js'
importScriptPage('page1.js', 'wikiname');
importScriptPage('page2.js', 'wikiname');
    type: 'script',
    articles: [
Note: In this example, pay close attention to the placement of commas and other punctuation. For people who aren't familiar with programming (and even those who are!), a common mistake when writing code is to accidentally delete, forget, or misplace critical symbols like commas or quotation marks. This can cause a syntax error that breaks the code. Carefully follow the convention shown here when using importArticles.
But there's much more to importArticles than just this! For more examples and advanced usage, see the help page at Help:Including additional JavaScript and CSS.


A demo of the script is enabled on this page, simply click the PortableCSSPad link in your toolbar to try it out.


Once the script is installed, to open the pad, click on the PortableCSSPad link in your toolbar. The pad itself will look similar to the picture shown on the right. CSS rules can be typed or copy/pasted directly into the text box and will immediately affect the current page. There are also a few other features available by clicking the buttons at the top.

Button What it does
Important (exclaimation point) Adds !important to all CSS properties
Unimportant (exclaimation point with red circle) Removes !important from all CSS properties
Beautify (purple butterfly) Beautifies (nicely formats) all CSS in the textarea
Minifiy (compacting icon) Minifies (removes comments and whitespace) CSS to reduce file size
Validate (W3C logo) Opens the W3C CSS3 validation service in a new tab, you can copy/paste the contents of the textarea into the new tab to validate the CSS.
On/off (green/red button) Toggles the live-update feature on and off. While off, CSS rules in the pad are ignored.
Close (red X) Closes the pad



A small extra feature which is separate from the pad is that, when viewing any article whose page name ends with .css (such as MediaWiki:Wikia.css or MediaWiki:Common.css), a small W3C validator logo will appear next to the title of the article / edit button.

Clicking that logo will automatically feed the stylesheet through the W3C CSS validator: This can be very helpful for tracking down syntax errors in stylesheets.


9 May 2013
Mathmagician added title attributes to the buttons, made some other minor improvements.
8 December 2012
Mathmagician finally published the script.