Difference between revisions of "CSS Independent Content"

From GreaseSpot Wiki
Jump to navigationJump to search
 
(Made explanation more to the point.)
Line 1: Line 1:
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).
Any HTML you inject into a site is subject to the CSS rules of that site. For many modifications, this is 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 across an entire site where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites, you may find that you want it exempt from the site CSS.


One solution: do your stugg in an iframes; sketchy code example:
One solution is to do your stuff in an iframe:


  /* Creates and returns an element by name and sets its attributes from a hash */
   function tag( name, attr ) {
   function tag( name, attr ) {
     var node = doc.createElement( name );
     var node = doc.createElement( name );
Line 10: Line 11:
     return node;
     return node;
   }
   }
 
   var css = "opacity:0.95; position:fixed; left:0; bottom:0; border:0; " +
   var css = "position:fixed; left:0; bottom:0; border:0; " +
     "margin:0; padding:0; overflowY:auto; overflowX:hidden";
     "margin:0; padding:0; overflowY:auto; overflowX:hidden";
 
   var doc = document;
   var doc = document;
   var iframe = tag( "iframe", { style:css, src:"about:blank" } );
   var iframe = tag( "iframe", { style:css, src:"about:blank" } );

Revision as of 04:07, 3 June 2007

Any HTML you inject into a site is subject to the CSS rules of that site. For many modifications, this is 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 across an entire site where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites, you may find that you want it exempt from the site CSS.

One solution is to do your stuff in an iframe:

 /* Creates and returns an element by name and sets its attributes from a hash */
 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 = "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";