CSS Independent Content

Any HTML you inject into a site is subject to the CSS rules of that site. This is often what you want: the elements you inject will fit in nicely. But if you inject something – perhaps a configuration panel – that should look the same to pages where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites (e.g. @include *), you may find that you want it exempt from the site CSS.

The solution is to add your panel inside an iframe. Example code:

// Position:fixed means stay fixed even the page scrolls. z-index keeps your iframe on top.
// The remainder of the line smacks the panel into the bottom left corner, out of your way.
// Overflow (in combination with the setTimeout) ensures the iframe fits your entire panel.
var css = 'position:fixed; z-index:9999; bottom:0; left:0; border:0; margin:0; padding:0; ' +
  'overflow:hidden;'

var iframe = document.createElement('iframe');
iframe.setAttribute('style', css);

// The about:blank page becomes a blank(!) canvas to modify
iframe.src = 'about:blank');

document.body.appendChild(iframe);

// setTimeout( cb, 0 ) lets Firefox initialize the DOM before we try to use it.
setTimeout( function() {

    var doc = iframe.contentDocument;
    doc.body.style.background = 'red';
    doc.body.innerHTML = 'Test.';
    iframe.style.height = doc.body.offsetHeight + "px";
    iframe.style.width = doc.body.offsetWidth + "px";

}, 0 );

A variant on a more intrusive interface (perhaps invoked from a menu item) might be a lightbox style panel, mid-screen. Just drop the last two iframe.style lines and change the CSS to:

// Margin, top, left, width and height centers the iframe horizontally and vertically:
var css = 'position:fixed; z-index:9999; border:1px solid black; ' +
  'top:50%; left:50%; width:30em; margin:-15em; 0 0 -10em; height:20em;';