User stylesheet in IE

January 20th, 2007. Tagged: bookmarklets, CSS, firebug, firefox, IE, JavaScript, tools

Let's say you want to quickly try out some small stylesheet changes, but you don't want to (or prefer not to, or for some reason temporarily you just can't) modify your application's CSS file(s). In FF it's easy - you have Firebug and you can play with styles until blue in the face. And in case you do get blue in the face and start making so many changes that you get lost, you can create a new clean and tidy CSS file, place it on your hard drive and use Web Developer extension to load it (Menu CSS->Add User Style Sheet). With WebDev Extension you can also Edit CSS right there, although unfortunatelly it's not always working when you have frames.

OK, there are options for Firefox. But how about IE?

In IE you have IE Developer Toolbar, definitelly helpful, but you can only modify element styles, not the stylesheet rules. So? A tiny little bookmarklet to the rescue!

My bookmarklet assumes you have a file called C:\user.css and loads this stylesheet on demand in your page, in every frame, just in case you use frames. Simple, yet useful, I hope. Here's the (readable) code:

javascript:
var css_file = prompt('Which CSS file you want to load today?','c:/user.css');
function addcss(w) {
    var html_doc = w.document.getElementsByTagName('head')[0];
    var css = w.document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', css_file);
    html_doc.appendChild(css);
}
var errors = 0;
function checkFrames(w) {
  if(w.frames && w.frames.length>0){
    for(var i=0;i<w.frames.length;i++){
      var fr=w.frames[i];
      try {
        addcss(fr);
      } catch (e) {
        errors++;
      }
      checkFrames(fr);
    }
  }
}
checkFrames(window);
addcss(window);
if (errors > 0) {
    alert('Could not access ' + errors + ' frame(s)');
}

To install and play around

Right-click this link and add it to your favourites:

Add User StyleSheet

Have in mind that this is IE-only (tested IE7). I don't think FF will allow you to access files on your local drive like this. But for FF you have the tools to do this anyway.

Another option to load local stylesheets in IE is to use the user CSS capability built in the browser, you can find it under Tools/Internet Options/Accessibility, but this will load your user CSS first (as opposed to last as the case is with my bookmarklet), so the "real" style definitions will overwrite yours, unless you always use !important and the "real" styles don't.

Thanks!

Have fun with the custom CSS and let me know how you find it.

Tell your friends about this post: Facebook, Twitter, Google+

6 Responses

  1. [...] User stylesheet in IE – supplies FF’s WebDev Toolbar CSS functionality to IE, allowing local file editing My bookmarklet assumes you have a file called C:user.css and loads this stylesheet on demand in your page, in every frame, just in case you use frames. It loads your CSS last, hence taking effect. (tags: Bookmarklets IE CSS) [...]

  2. You’re saying you can insert this javascript in the HTML of a webpage, but you can’t change the stylesheet definitions for the same HTML?

    Put otherwise, why not add

    @import “c:/user.css”;

    to the HEAD section of HTML ?

    Stephan

  3. That was supposed to read < style type=”text/css” media=”screen”> @import “c:/user.css”; </style&rt;

  4. Hi Stephan, thanks for the comment. You don’t add this JS to the page, you have it as a bookmarklet, so you can execute it and play with the styles on any page, without changing (or even having access to) the page.

  5. I don’t quite understand. I use Firefox web developer extension extensively. This allows me to apply a local style sheet to a remote page. It doesn’t pull in the existing styles to allow me to edit them? I take it I have to do this step myself?

  6. Where were you in 2k6? lol VERY many thanks for such a simple, elegant sol’n to an IE problem that will probably NEVER go away. I make extensive use of DHTML/XHTML locally, often importing web hosted material into a local frame, then processing it. This will replace several applications used to filter objectionable content, whether vulgar or merely consumptive. In case you are not familiar with it, check out Daan Kets’s (no cgi/php/asp) run protocol handler on blackbit.net.

Leave a Reply