Kevin Wolski

Modifying core CSS components on massive websites managed by many distributed teams of admins, developers and designers, has a way of being disruptive. I created a simple Greasemonkey script which replaces a specific stylesheet with another “test” stylesheet stored on the same filesystem. Simple, straight forward and unpolished.

This comes in handy if the CSS changes you are making/testing are extensive and would be annoying to perform in Firebug. I use this method to hash out some of my invasive changes before I migrate them into files, which, will affect other content areas controlled by other teams.

Installation

This method works under Firefox using the Greasemonkey extension. It hasn’t been tested under Greasemetal or GreaseKit, though I expect it would work.

I recommend changing the @include value to the domain where you are using the script, or it will fire for all domains. Update the two variables: orig and newFile, specifying the file name of the stylesheet to be replace and the path of the test stylesheet you would like to “inject” after page load. Save as *.user.js and drag it into Firefox to install. You can leave newFile blank, an the script will then just remove the target CSS contents.

↓ Download inject-css.user.js or copy the source here:

// ==UserScript==
// @name              Inject CSS File
// @namespace     http://www.kdwolski.com/
// @description     Replaces a specific CSS file with an alt.
// @include           *
// @version           0.1.0
// @contributor     kdwolski
// ==/UserScript==

//CSS filename to replace:
var orig = "style.css";

//Path to replacement CSS file on filesystem:
var newFile = "path/to/test/css-file";

for(i=0;(l=document.getElementsByTagName("link")[i]);i++){
if(l.getAttribute("href").indexOf(orig)>=0){
l.href=newFile;
}
}

Feel free to leave any comments about this post below. You can also find me on Twitter: @kdwolski