title: Resetting css to browser defaults for a single item in google chrome
body: <p>My browser extension embeds a div item to webpages opened by browser on the fly. div contains several children items such as buttons, spans, input boxes etc. </p>
  
  <p>Problem is when div is inserted to page, page's css affects the div and it's contents. </p>
  
  <p>For example if the page has a css such as :</p>
  
  <pre><code>span {
   text-shadow: 1px 1px 1px blue;
  }
  </code></pre>
  
  <p>then the spans in my on the fly added div have blue text shadows. What i'm doing to fix this is to set any possible directive that might affect my div's content with !important, like </p>
  
  <pre><code>mydiv span {
    text-shadow: none !important;
  }
  </code></pre>
  
  <p>and it's rubbish.</p>
  
  <p>Is there any sane way to override css for a given item, that'll take it back to browser (google-chrome) defaults?</p>
  
  <p>Thanks.</p>