0

I'm building a script that will add some HTML code to the page. That HTML code has style, let say I added

<div class="myplayer">
</div>

The code was added using JavaScript, but I also add styling, through CSS

.myplayer {
 a_property: #fdfdfd;
}

Everything is fine. But wait, my script is expected to run on pages I don't have control over, someone while designing his pages put this code

.myplayer {
 another_property: crap;
}

or

* {
 that_property: crap;
}

That crap is now appearing on my script, because I'm assigining it. I could do in my CSS Class

.myplayer {
 iterate_over_all_properties: default;
}

but the number of properties is a little bit overwhelming and I need to study each one a part. How do I avoid that interference?

Dan Davies Brackett
  • 9,811
  • 2
  • 32
  • 54
Omar Abid
  • 15,753
  • 28
  • 77
  • 108
  • Possible Duplicate of [Is there a way to “sandbox” an html block away from its page's CSS without using iframes?](http://stackoverflow.com/questions/3529513) – Pekka Nov 05 '10 at 22:57
  • How is the second, 'incorrect', set of styles getting into the page? An included css file in the header? Another method? Why can't you prevent users from uploading their own css? – Anthony Corbelli Nov 05 '10 at 23:00
  • Oo It's a script they'll integrate in their website – Omar Abid Nov 05 '10 at 23:11
  • So your script adds html and css tags to the document, or theirs does? – Anthony Corbelli Nov 05 '10 at 23:23

5 Answers5

1

Presumably you want to wipe out css on only the elements that are "yours". You can do this by applying a style that applies to elements of a particular class name, and all its children, using the wildcard. For instance:

.reset * {
border: 0 !important;
background: transparent !important;
/* etc */
}

Then you will typically have to make creative use of !important on your own css styles.

It's never pretty, but can generally be done.

Google "css reset".

rob
  • 9,933
  • 7
  • 42
  • 73
0

Best and most dependable I can think of is to either set the CSS properties with JS or throw an "!important" at the end of your styles to make sure they apply. Of course, if they apply a style after that and use "!important" as well then theirs will stick.

.myplayer {
 iterate_over_all_properties: default !important;
}

Maybe, as another alternative, you can ensure that your scripts and styles are being put in just inside the closing body tag to make sure you overwrite anything the other user might have done in the previous parts of the page.

Jeremy
  • 1
  • 2
  • yeah, knows that, but it's a real pain in the ass to iterate over them all – Omar Abid Nov 05 '10 at 23:04
  • In case they apply the !important style after yours you might still be able to override theirs by making your style both !important and the selector more specific than theirs. – ThiefMaster Nov 05 '10 at 23:07
0

You should set the CSS properties through Javascript or inline CSS. Remember inline CSS will always be applied over external CSS.

Another solution would be choosing a class name with less chance to be used or to reset all possible properties that would format your element in an undesirable way. Like this:

.myplayer {
 color:#000;
 text-decoration:none;
 line-height:1em;
 font-weight:normal;
 border:none;
 padding:0;
 margin:0;
 other-properties: default;
}

.myplayer{
 your-property:your-value;
}
marcio
  • 10,002
  • 11
  • 54
  • 83
0

The simplest would probably be to do a "global reset", either by including this in the <head> part of the HTML document (after declarations for external stylesheets). Calling your own stylesheet that does a reset might also work, if it comes as the last stylesheet declaration. You can use JavaScript to trigger these.

You can find examples of a global reset here which you can adapt to your needs:

http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

And one more alternative might be to create a container for your HTML and styles that is fully reset of other styles, and then apply only your styles to it. The container might be a <div> for example.

Tom
  • 30,090
  • 27
  • 90
  • 124
0

If you want your work isolated from a style perspective, put it in an iframe or use a plugin like Flash. If you don't, you should accept the styles the page has decided to apply. After all, it's not your page!

For properties that are really important to the functionality of your widget, you might need to use a reset (as has been suggested already), but when it comes right down to it, you have to rely on the good will of the pages hosting your widget not to screw you over.

Dan Davies Brackett
  • 9,811
  • 2
  • 32
  • 54