Resetting css to browser defaults for a single item in google chrome

Question

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.

Problem is when div is inserted to page, page's css affects the div and it's contents.

For example if the page has a css such as :

span {
 text-shadow: 1px 1px 1px blue;
}

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

mydiv span {
  text-shadow: none !important;
}

and it's rubbish.

Is there any sane way to override css for a given item, that'll take it back to browser (google-chrome) defaults?

Thanks.

Answer 1

You cannot "reset" css rules, you have to override them (text-shadow:none;)

Answer 2

Is there any sane way to reset the css to browser defaults for only a single item?

Sadly, no. The auto value will act as the default under some conditions, but not always, and you still have to specify it for every possible property. This is something about CSS that really sucks.

One idea comes to mind, though. Seeing as you're asking specifically about Chrome, if you control all the CSS classes and don't mind some clutter, you might be able to work with CSS3's not like so:

span:not(.default) {
 text-shadow: 1px 1px 1px blue;
}

If you use not(.default) in every CSS rule, you can have elements that have the default behaviour if you give them the default class:

<div class="default">

I have no personal experience with CSS 3, but this should work. It will not work in older browsers, so it's not (yet) really mainstream compatible.