How to insulate HTML widget from external CSS
I have developed an instant messaging component using AngularJS which adds instant messaging functionality to any web page. The component is quite complex, its stylesheet runs up to about 800 lines.
I am having a problem when a component is deployed to third party sites. Sometimes the CSS from the host website affects the styles of the chat widget.
The screenshot is used when the component is added to a new Wordpress installation. You can see the button text is overridden by the uppercase wordpress style.
The problem is that this component will be deployed to tens of thousands of websites, so it would be impractical to tackle every little problem on a case-by-case basis. It would also be impossible to know if these changes might affect another site.
The approach I am currently considering is to create a very complex reset stylesheet - I would override all possible styles for all elements. This would give me a new canvas to start with.
This seems like a pretty daunting task, so I was wondering if anyone has come up with a better solution?
Note:
iFrame not possible as the chat has to overlay the original webpage
source to share
As Luke suggested, using the correct answer is the correct answer.
As long as you can use! important or iframe, I don't like both of these answers and here's why.
Why you shouldn't use! important
- Your goal is to create CSS that cannot be overridden. Using! The important thing doesn't really solve this problem. I can still use the same specifics as yours. It is, however, pain.
- Mozilla specifically recommends that you do not do this.
- As you said yourself, this can be used on 100k + sites. The chances are high that you are going to override some other style. Using! It will be important to ruin their day. You've effectively taken cascading from CSS. As a general rule, use the least amount of specificity that you can comfortably get away with. It makes life easier for everyone.
Why iframe is not the answer
I almost don't mind using an iframe as I have to use! important, but there are some negatives that you need to be aware of.
- iframes give you control (plugin creator) at the expense of the user. e.g. User has no choice to match your iframe response with their site. It is likely that some user will have a specific breakpoint that won't play well with your plugin.
- Your style cannot be overridden. This point can be considered positive for you, but I think it is negative for the user. The ability to style your plugin's colors helps make the plugin part of the site. This is a guarantee that your plugin colors won't adhere well to some sites. Allowing the user to change colors is necessary for me.
Using namespaces
The idea is pretty simple. Let's say your application is called SuperIM2000. All you do is make sure there is a container with the same class name and use it to customize your style. This has the added benefit of allowing very simple class names such as. Button.
Html
<div class="superIM2000">
<input class="button" />
</div>
CSS
.superIM2000 .button{
color:#000;
}
As you can see, the specificity is very low. However, the likelihood that you are going to override someone else's style is extremely low. It will also benefit the user. It is possible that the button class is already in use in your site and can use any inheritance that you have not overridden.
source to share