CSS Independent Content

If you have ever tried appending some neat HTML user interface to web pages with a script set to run on not just one site, but perhaps anywhere (a button that invokes some feature in your script, perhaps), after using it some time, you will probably have noticed that it doesn't look the same way everywhere. This is because the CSS rules of the page author's apply to your interface HTML too, overriding the default CSS rules (there are dozens of CSS rules, all of which may be overridden for every single tag you add).

One solution: do your stugg in an iframes; sketchy code example:

 function tag( name, attr ) {
   var node = doc.createElement( name );
   attr = attr || {};
   for( var i in attr )
     node.setAttribute( i, attr[i] );
   return node;
 }

 var css = "opacity:0.95; position:fixed; left:0; bottom:0; border:0; " +
   "margin:0; padding:0; overflowY:auto; overflowX:hidden";

 var doc = document;
 var iframe = tag( "iframe", { style:css, src:"about:blank" } );
 doc.body.appendChild( iframe );
 var win = unsafeWindow.frames[unsafeWindow.frames.length-1];
 doc = win.document;
 /* add things to doc.body */
 iframe.style.height = (16 + doc.body.offsetHeight) + "px";
 iframe.style.width = (16 + doc.body.offsetWidth) + "px";