如何将HTML小部件与外部CSS隔离 [英] How to insulate HTML widget from external CSS

问题描述

我已经使用AngularJS开发了即时消息组件，该组件将即时消息功能添加到任何网页.该组件相当复杂，其样式表需要大约800行.

I've developed an instant messaging component using AngularJS that adds instant messaging functionality to any web page. The component is fairly complex it's style sheet runs to about 800 lines.

将组件部署到第三方网站时出现问题.有时，来自宿主网站的CSS会影响聊天小部件的样式.

I'm having a problem when the component is deployed to third party websites. Sometimes the CSS from the host website affects the styles of the chat widget.

将组件添加到全新的Wordpress安装中时，将使用屏幕截图.您会看到按钮文本被Wordpress样式覆盖为大写.

The screenshot is used when the component is added to a fresh Wordpress install. You can see that the button text is overridden by the Wordpress style to be upper case.

问题在于此组件将被部署到成千上万的网站，因此，逐案解决每个小问题并不切实际.还不可能知道这些更改是否会对其他网站产生影响.

The problem is this component will be deployed to tens of thousands of websites so it wouldn't be practical to solve each small issue on a case by case basis. It would also be impossible to know if these changes would have a knock on affect to another website.

我目前正在考虑的方法是创建一个非常全面的重置样式表-我将覆盖所有元素上的所有可能样式.那会给我一个崭新的画布.

The approach I'm currently considering is to create a very comprehensive reset stylesheet - I'd override all possible styles on all elements. That would give me a fresh canvas to start with.

这似乎是一项艰巨的任务，所以我想知道是否有人设计出了更好的解决方案?

This seems like a pretty onerous task so I was wondering if anyone had devised a better solution?

注意:

无法使用iFrame，因为聊天必须覆盖原始网页

An iFrame isn't possible because the chat has to overlay the original web page

推荐答案

像Luca建议的那样，使用名称空间是正确的答案.

Like Luca suggested, using a namespace is the correct answer.

虽然您可以使用！important或iframe，但我不喜欢这两个答案，这就是原因.

While you could use !important or an iframe I dislike both of those answers and here's why.

1. 您的目标是创建无法覆盖的CSS.使用！important 并不能真正解决这个问题.我仍然可以超越你 通过使用与您相同的特异性进行样式设置.但是，这样做很痛苦.
2. Mozilla特别建议您不这样做
3. 正如您自己说的那样，可以在超过10万个网站上使用.您将要覆盖其他人的样式的可能性非常高.使用！important会毁了他们的日子.您已经有效地将层叠从CSS中移除了.通常，请使用您可以轻松摆脱的最少的特异性.这使每个人的生活更加轻松.

1. Your goal is to create CSS that can't be overridden. Using !important doesn't actually solve that problem. I could still override your styling by using the same specificity that you have. It is however, a pain to do.
2. Mozilla specifically recommends that you don't do it.
3. As you've said yourself, this could be used on 100k+ websites. The likelihood that you're going to override someone else's styling is pretty high. Using !important is going to ruin their day. You've effectively taken the cascading out of CSS. As a rule, use the least amount of specificity that you can comfortably get away with. This makes everyone's life easier.

为什么iframe不是答案

我使用iframe不像使用！important那样重要，但是您需要注意一些负面因素.

Why an iframe is not the answer

I'm not nearly as opposed to using an iframe as I am to using !important but there is some negatives that you need to be aware of.

1. iframe将控制权交给您(插件制造商)，而这需要用户付费.例如用户别无选择，无法将iframe的响应能力与其网站相匹配.某些用户很可能会遇到一个特定的断点，而该断点不能与您的插件配合使用.
2. 您的样式无法覆盖.这一点可能对您有利，但我发现这对用户不利.能够设置插件颜色的样式有助于使插件成为网站的一部分.这可以确保您的插件的颜色无法与某些网站很好地融合在一起.对我来说，让用户更改颜色是必须的.

使用命名空间

这个想法很简单.假设您的应用程序称为SuperIM2000.您要做的就是确保有一个具有相同类名的容器，并使用它来指定样式.这具有允许您使用非常简单的类名的额外好处，例如按钮.

Using Namespaces

The idea is pretty simple. Let's say that your app is called SuperIM2000. All you do is make sure that there's a container with the same class name and that you use it to target your styling. This has the added benefit of allowing you to use very simple class names e.g. button.

<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're going to override someone else's styling is extremely low. This has a benefit to the user as well. It's possible that the button class is already used in their site and it can take advantage of any inheritance that you haven't overridden.

这篇关于如何将HTML小部件与外部CSS隔离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！