CODEWITHSUNDEEP
javascripthtmlcss
Omar Abid
Omar Abid

Reputation: 15976

How to avoid CSS interference in an HTML page

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?

Upvotes: 0

Views: 3067

Answers (5)

Dan Davies Brackett
Dan Davies Brackett

Reputation: 10071

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.

Upvotes: 0

rob
rob

Reputation: 10119

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".

Upvotes: 1

Tom
Tom

Reputation: 30698

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.

Upvotes: 0

marcio
marcio

Reputation: 10512

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;
}

Upvotes: 0

Jeremy
Jeremy

Reputation: 1

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.

Upvotes: 0

Related Questions