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:Fandomdesktop.css caching issues.
While this script is not a replacement for 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.
Installation
Usage
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 (exclamation point) | Adds !important to all CSS properties
|
| Unimportant (exclamation point with red line) | Removes !important from all CSS properties
|
| Beautify (yellow star) | Beautifies (nicely formats) all CSS in the textarea |
| Minifiy (compacting icon) | Minifies (removes comments and whitespace) CSS to reduce file size |
| Validate (W3C text) | 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 |
Other
Validation
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:Fandomdesktop.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: https://jigsaw.w3.org/css-validator/. This can be very helpful for tracking down syntax errors in stylesheets.
WDS restyling
This script offers an optional modernization stylesheet in which gives the PortableCSSPad 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.
Updated FDS styling
This script offers an improved modernization stylesheet which has better specificity so it can be loaded before PortableCSSPad itself, and offers an redesigned text area in addition to a more minimalist container. All tools except for the on/off button and the close button have been removed, and due to their limited utility there are currently no plans to add them back.