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.
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: http://jigsaw.w3.org/css-validator/. This can be very helpful for tracking down syntax errors in stylesheets.
This script offers an optional modernization stylesheet in which gives the Portable CSS Pad a modern Fandom theme to it.
Note: This will remove all icons except the close button, but this will be changed soon so that all buttons will have their new icons and will reappear again with this stylesheet.