谁或什么将“数据对比”范围注入我的网站（晚上）以及如何阻止它？

Question

我注意到我正在帮助的网站有时会span在注入元素时出现问题。这些跨度将打破空白并使文本难以阅读。这些跨度看起来像这样：

<span data-contrast="auto">words</span>
<span data-contrast="auto">,</span>
<span data-contrast="auto">b</span>
<span data-contrast="auto">ut</span>
<span data-contrast="auto">sometimes also only single chars</span>

The website is run with/by WordPress, but that does not seem to be the cause because the affected posts look fine and show no sign of this markup in the post editor or database.

Also, those spans only seem to occur at nighttime. I tried to nail that down, but as so often, I couldn't really verify it yet, as it did not occur again to me, not even at night. Right now everything is fine and none of these spans are present.

I'm guessing it has got something to do with night-mode in browsers (although behaviour was the same in Edge and Firefox) or the night-mode in Windows but then on the other hand I haven't noticed this on any other page yet.

So, this is somewhat strange and hard to nail down, but you'll find copied texts that contain the same markup, when you use a search engine and search for "data-contrast span". So, at least I'm not the only one with this problem.

Any ideas how to nail this down and find out what causes it?

Answer 1

浏览器插件通常被授予在运行时修改页面源的权限。我猜罪魁祸首是像Night Eye或Dark Reader这样的跨浏览器扩展。

通常，<span>除非您的 CSS 将跨度属性更改为远离浏览器默认值，否则添加 a不应弄乱您的布局。

选项1

您可以通过添加 CSS 来控制布局的外观来解决此问题：

span[data-contrast="auto"] {...} 

这将选择具有该数据属性的所有跨度。然后添加样式以抵消您看到的布局问题。也就是说，由于扩展程序是在页面呈现后添加代码，因此它可能会覆盖您所做的任何事情。

选项 2

更好的解决方案是创建自己的暗模式。如果您提供自己的主题选项，大多数插件/操作系统夜间模式都不会干扰您的代码。“黑暗”主题是 2020 版的移动响应；当用户、浏览器制造商和操作系统做出自己的决定时，您应该在代码中提供它或承担后果。

如果您需要帮助创建替代主题，CSS Tricks 有一个很好的文章。