Question

I have an application where I allow users to add a snippet of code onto their website which in turn adds a small widget to the site allowing their users to interact with the application etc.

What i’m doing now is placing all of my html in a container that they place on the site with (hopefully) a unique id. Lets say ts-container. Then, in the css that gets loaded on the site that is meant to style my elements, I place #ts-container in front of every selector in the style sheet. Is this the best and only method of protecting my css from affecting their page elements, or is there some way to wrap the entire style sheet without having to actually id every class? Is there a way to place the style sheet in the wrapper container and have it only affect those elements or something? Should I be doing this in an iframe or something similar instead?

Just looking for some suggestions in case I am missing a best practise in my situation.

Answer 1

You can do a sub-reset of the CSS:

#ts-container * {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: normal;
    background-color: white;
    color: black;
}

You might need to enter some extra styles, but this should prevent any CSS from the parent document from affecting your widget.

iframes are a much easier way to do this, though. Whether you use them or not is a design choice.