homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

wipe out css styles on all descendents

 8:15 am on Mar 19, 2008 (gmt 0)

This is a tricky one. I want to have all decendents of a particular element have the default styles, rather than whatever is defined in the style sheets.

This is for something that people can easily drop into their site, and it much look the same on all sites, regardless of what wacky stylesheets they are using. Any styles I apply inline will apply, but ones defined in the style sheet won't.

I tried this:

Create a div, give it class "defaultstyles". Within it, give elements styles with inline style attributes as needed.

Then add a style rule to the page (as the very last one), that looks something like this:

defaultstyles * {
position: auto !important; color: auto !important; background-color: auto !important; padding: auto !important; margin: auto !important; border: auto !important; font: auto !important; font-weight: auto !important; font-style: auto !important; text-align: auto !important; line-height: auto !important; text-decoration: auto !important; letter-spacing: auto !important; text-indent: auto !important; white-space: auto !important;

But that doesn't work. I thought the "auto" might wipe out any styles (say, if they have a style that applies to every td), but no such luck. I don't want to have to define every style individually for every type of element I might use, if I can avoid it.

( If you are interested in knowing, this is all being done with javascript within a bookmarklet and/or firefox extension (aardvark [karmatics.com]) that can be run on any site, and needs to have dhtml "dialog boxes" that look the same on any site. But that shouldn't matter, I know how to do the javascript, I just don't know how to do the css. )



 10:13 am on Mar 19, 2008 (gmt 0)

Since you know javascript, I'll cut to the chase.
if (element.style) for (p in element.style) element.style[p] = '';
will clear all the styles of element without needing to test whether element has style (text nodes don't).


 1:30 pm on Mar 19, 2008 (gmt 0)

>This is for something that people can easily drop into their site, and it much look the same on all site<

Catt: I am thinking about how to do this myself , so people can just grab a snippet of js from my site, place it in their blog, and done. Content is loaded from my site, and shows a newsfeed-kinda interface. Would you mind sharing your solution with me? Please pm me


 3:16 pm on Mar 19, 2008 (gmt 0)

Welcome to WebmasterWorld catbutt!

I wonder if it could be a specificity problem? you could try making the selector as specific as you can..

Create a div, give it class "defaultstyles".

change that class to an ID then try

try: html body div#defaultstyles *

if you know any more ascendant ID's that would be the way to make it even more specific, but I take it that you will not know them?

anyway try that and let us know

PS: just noticed you don't have the class '.' (or ID #) symbol before defaultstyles in the stylesheet.. is that just a typo?

[edited by: SuzyUK at 3:27 pm (utc) on Mar. 19, 2008]


 6:50 pm on Mar 19, 2008 (gmt 0)

Mark, I'm quite sure that won't work. What if they have a rule like this?

td { font-family: comic sans ms; }

Now if I have a td within my dialog box, it is going to get comic sans, whether or not I wipe clean all inline styles on the element. (there's no need to wipe out styles on these elements anyway, since I "own" them and they wouldn't have styles on them that I didn't put there. What I don't "own" is the page itself, which has style rules that can apply to my elements)

Suzy, you are right that the missing dot is a typo, its correct in my own code. As for specificity, I'll try. However, I think the problem is that "auto" doesn't do what I want, not that it isn't getting applied. I guess if I really needed to make it more specific by getting the whole path of element types and ids up to the body, I could do that since it is all being done dynamically. Not confident that will get me far though....


 7:08 pm on Mar 19, 2008 (gmt 0)

oh gosh.. you're right..
auto will have a bearing too, never even noticed that bit as I just saw the specificity thing :o

what you will probably need is the default values for each property you want to reset


 1:31 am on Mar 20, 2008 (gmt 0)

> Mark, I'm quite sure that won't work.
And I'm quite sure that it will (and does) work.

IE throws an exception for this:
myElement.style.width = 'auto'
but this:
myElement.style.width = ''
will accomplish the same thing.

If you try to change color back to the default like this:
myElement.style.color = 'inherit'
IE hurls chunks, but it will allow you to do this:
myElement.style.color = ''

if (element.style) for (p in element.style) element.style[p] = ''
in a recursive childNode iterator. You'll be pleasantly surprised. I know I was when, in try-anything desperation, I first tried it.


 1:48 am on Mar 20, 2008 (gmt 0)

Mark, I tried it and both firefox and IE don't like it. Firefox complains that I am "setting a property that only has a getter" and IE just says "invalid procedure call or argument".

I'm also concerned that this will wipe out any inline styles I give the elements, but maybe I could deal with that somehow if this actually works.


 6:34 pm on Mar 20, 2008 (gmt 0)

I don't know if it's any help catbutt put you can put a <style> declaration 'inline' too ie. right above the html block you want it apply to.

so could you get the JS to output that along with the code for the boxes?


 6:43 pm on Mar 20, 2008 (gmt 0)

Suzy, are you suggesting an inline style declaration will only apply to the part of the page that follows? that would not be my understanding....


 7:13 pm on Mar 20, 2008 (gmt 0)

yes it should only apply to that (trying to remember my ebay listing hack days here though ;)).. but the block/box would still have to wrapped in your 'defaultstyles' id (or call it something much more weird/unique) and targeted like your first post using the wrapper ID - it would become a simple stylesheet and should only apply to the block you're injecting - allowing you to apply your desired styles in stylesheet fashion as opposed to using inline (attribute) styles. With a bit of thinking it could then override defaults at the same time, it would be a long ruleset perhaps but done carefully would ensure your styles took preference (you can't overrule a:hover etc styles as actual inline style (attribute) IIRC)

I know I'm not getting this :o - I've no experience of scripting extensions,

but is your intention to inject your HTML dialog block/box into an "any old how" styled page - and can you/your extension write the styles as if they were in the <head>, i.e. guaranteed last in the users CSS cascade?

the reason for my suggestion would just help ensure the style block suggestions (for 'defaultstyles') were last in the cascade perhaps?

there is no CSS way to do a "wipe out" - possibly a very complex script to check on the style status of each property, for each element used, compare to the browsers default and reset.. long laborious and possibly unnecessary.. so I'm trying to think what it is you need this to achieve ..


 7:59 pm on Mar 20, 2008 (gmt 0)

> Mark, I tried it and both firefox and IE don't like it.
I swear I've done this:
myElement.style.myStyleProp =''; successfully and with the result that it initialized the style property to it's default value.

> ..."setting a property that only has a getter"...
There are undoubtedly some style properties that can't be overloaded. Try this:
if (element.style) for (p in element.style) try {element.style[p] = ''} catch(e) {continue}
to skip them. If the property doesn't have a setter, it would probably not make any difference.

> I'm also concerned that this will wipe out any inline styles...
It sure will. You'll need to save the computed styles (myElement.currentStyle[propname] - .getComputedStyle(myElement, propname)) and compare that list to the specified styles (myElement.style[propname]). For each propname, if the specified style exists, skip that propname, otherwise, overload it with a nil-string.


 8:04 pm on Mar 20, 2008 (gmt 0)

Suzy > compare to the browsers default
Unfortunately, there's no way to get the browser's default for a style property. And some of the style properties depend upon other style properties of that element (example: the default {border-color:...} is the element's current {color:...} ...so what's the default of the current element's color? Ans: you don't know and can't find out.


 8:07 pm on Mar 20, 2008 (gmt 0)

Suzy, yes you have my intentions correct. jelle76 above mentions a need for the same thing, it would make things so nice. Except at least with jelle's issue, the person creating the page could make needed changes to make it work. In my case, the person creating the page isn't in the picture....it's the end user using the bookmarklet/extension that decides to run my code.

For what it's worth, in previous versions I solved the problem in an ugly way, I used an iframe (on an absolutely positioned layer) for my dialog boxes. Aside from the "drag bar" above the frame, I don't have to worry about styles in the page affecting the display. Unfortunately, this doesn't seem to work in Firefox 3 beta, all kinds of weirdness arises (in the extension only, for some reason the bookmarklet version works ok)

If you want to see an example of what I am doing, go to [karmatics.com...] , click "run the demo", and you'll see a little popup thingee done with an iframe. Then press 'h' or 'v' to see more elaborate draggable popup things.

Mark I will try to catch the exceptions and let you know if that works.



 8:15 pm on Mar 20, 2008 (gmt 0)

Oh, wait. It's easier than what I wrote about currentStyle
if (element.style) for (p in element.style) if (element.style[p] != '') try {element.style[p] = ''} catch(e) {continue};

PS: I've never tried doing a bulk reinitialization, just single style property reinitialization. That's why the confusion regarding my suggested technique. Sorry for any confusion.

[edited by: MarkFilipak at 8:24 pm (utc) on Mar. 20, 2008]


 8:58 pm on Mar 20, 2008 (gmt 0)

Ok, well it runs without error, but it has no effect other than to wipe out the inline styles I defined. Try it:

Go to [karmalita.com...] , add the link as a bookmark, then run the bookmark in various sites. The thing that pops up will look different in different sites. For instance it looks very different in this site vs. in [karmatics.com...]

You can view the code at [karmalita.com...]


 9:23 pm on Mar 20, 2008 (gmt 0)

> ...no effect other than to wipe out the inline styles I defined.
Something's not right. It should be skipping those (!= fails). Obviously, the inline styles are not going into the specified style, but into the cascade.

I've got an idea. Create a private attribute (call it: "aardvarkStyle") and set it to a (long?) CSV-string of your desired styles. Assuming you can run javascript in the target UA - can you? - hammer the element.style and then feed in aardvarkStyle.

I really can't see a way that you can create a style-shield to block the target's "wacky stylesheets".

I eagerly await your success and want to share in the knowledge gained. :)

PS: "element.style" in paragraph 2 was "currentStyle" - oops (you know what I mean?)

[edited by: MarkFilipak at 9:33 pm (utc) on Mar. 20, 2008]


 3:59 pm on Mar 21, 2008 (gmt 0)

>>Unfortunately, there's no way to get the browser's default for a style property.

I didn't think so, but I don't know scripts.. however scripts or not if you look at the properties in the CSS spec itself my logic would say a 'wipe out' can't be done for CSS as there isn't such a thing as consistent "auto" or default value, and then there's inheritance

take the color property as one example

Value: <color>  inherit 
Initial: depends on user agent
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified

you can see that 'auto' cannot be a value for this property (which is why a sweeping auto wipe out will not work) and the initial value is UA Dependant so straight of the bat you need to set it somewhere

however if a site author has defined a color on the e.g. the <body> but nowhere else in their sheet, that color will be inherited, passed onto all elements all the way through the document including into any dhtml popup.. so for any element whether in your dhtml popup or not, there is no way to 'reset' it unless you specifically override it. It is inherited by default. Even say there was/is a way to find out which element was setting the "default" color for your <p> inside the popup and even if you did manage to 'take it off' the body element you would then be affecting the rest of the document too.

So my logic no matter, how you apply it scriptwise, tells me that in order to have your own styles apply within the popups you will still have to write a stylesheet in which the first rule would be no more than custom reset, if you like, still using specificity (wrapper id) & !important in order to successfully override user settings. In other words you will need extra "reset" style rules in order to cover all or most possibilities first like catbutt posted in the OP as opposed to trying to wipe out your required ones?

A reset rule will be longer as it should contain all properties whether you intend to use them or not in order to cover all possible author stylesheet settings.. but it should be possible to create one

You won't be able to use the word "auto" for them all reason explained above,

you would need to do a bit of research to find the default/initial values for most and for those properties that don't have one you would "reset" these to suit your extension needs - e.g. color could be #000 if that's the color you predominantly want to use inside the popup.. then you only need override that inline when required.. you will however then need to use !important on your 'inline' rules as well.

Then use the script to either embed either a link to a full stylesheet into the <head> of the page, or embed the CSS itself in the document head. I note there are lots of different styled "boxes" in the aardvark extension and cat might not want a call to a large stylesheet so after the resets rule is injected could you then simply inject your custom css on a box by box basis as required along with the 'box' html.

I really can't see a way that you can create a style-shield to block the target's "wacky stylesheets".

You can ;).. as explained above..

I have already sent catbutt some links to a bookmarklet I use which does something like this, Modi Dom Inspector, I use it a lot and sometimes the user defaults slip through - have never bothered about it much as the BM is still usable but I do think think it might be possible to create a better "global" reset which might improve modi's CSS and also help catbutt use less rules for the individual elements he would need to use.. am off to play to see if I can come up with an optimal one ..


[edited by: SuzyUK at 4:00 pm (utc) on Mar. 21, 2008]


 8:27 pm on Mar 21, 2008 (gmt 0)

playing is proving fruitful.. there's a few wee things that need special attention and obviously it's the wee things that would be extension specific, (you know what it needs so some of the general overrules may not quite be the same for your needs) but anyway as a start off: a reset/wipeout rule

#aardvarkstyles * {
/* add in your default preferences in here - color, list styles, font family etc.. */
position: static !important;
z-index: auto !important;

color: #000 !important;
background: transparent none repeat scroll 0 0 !important;

float: none !important;
clear: none !important;

padding: 0 !important;
margin: 0 !important;
border: 0 solid #000 !important;

min-height: 0 !important;
max-height: none !important;
height: auto !important;

min-width: 0 !important;
max-width: none !important;
width: auto !important;

font: normal normal normal 11px/1.5 arial, verdana, sans-serif !important;
list-style: disc outside none !important;
letter-spacing: normal !important;
text-align: left !important;
text-decoration: none !important;
text-indent: 0 !important;
text-transform: none !important;
white-space: normal !important;
word-spacing: normal !important;
vertical-align: baseline !important;

unicode-bidi: normal !important;
direction: ltr !important;

clip: auto !important;
overflow: visible !important;
visibility: visible !important;
outline: invert none medium !important;

/** odditites which will need specified separately for each property that it goes against **/
display: inline !important;
cursor: auto !important;

/* if any of the elements are to be draggable you cannot set these
you should however take care and set all four even if auto in the individual positioned elements
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;

absolute containers needs a width
or a min and max width
or at least the parent one does..

/* extension specific general resets */

#aardvarkstyles div,
#aardvarkstyles ul,
#aardvarkstyles dl,
#aardvarkstyles dt,
#aardvarkstyles dd,
#aardvarkstyles h2,
#aardvarkstyles h3,
#aardvarkstyles {
display: block !important;

#aardvarkstyles li {
display: list-item !important;

/* table display properties would need to go in here if tables are used in your DHTML */

#aardvarkstyles b,
#aardvarkstyles strong {font-weight: bold !important;}

#aardvarkstyles i,
#aardvarkstyles em {font-style: italic !important;}

#aardvarkstyles h2,
#aardvarkstyles h3 {
font-weight: bold !important;

there's likely some more general resets that would need to be made, and it assumes that you have a wrapper div called #aardvarkstyles which takes no part in the actual positioning/styling

however @rip, what did I miss? and at last I fixed my "quick" dom inspector so it was not wasted regardless!


[edited by: SuzyUK at 8:31 pm (utc) on Mar. 21, 2008]


 8:46 pm on Mar 21, 2008 (gmt 0)

Wow Suzy thanks so much. You rock. I will try this and get back, sorry if a bit slow on the response. And sorry I didn't know about the link policy. :)


 7:55 pm on Mar 23, 2008 (gmt 0)

Interesting problem.

the only way I can see this as being foolproof is by using a style block that resets every property that can be set on any element that may be contained within the parent div. (Or whatever tag the parent is.)

#defaultstyles div,p,span,select,textarea,table... etc..{

- all possible properties re-set here. -


Putting together a "default" style sheet for the browser defaults could be done by creating a page containing each and every tag there is and then querying (in IE, at least) the currentStyle of each property of each element using a "property in currentStyle object" loop, and then seeing which properties could be allowed to inherit down to what elements, etc.. so you could collate and tidy up the rules.

Boy, what a job.

Would anything be gained by scripting a change of id and class on the parent element so as to avoid having rules inherit down to it?

Just thoughts...

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved