css - 删除 Stack Exchange 链接的下划线样式而不闪烁

Question

作为 rollout of new network site themes 的一部分，我经常访问的许多 Stack Exchange 站点现在都有 links in posts and comments underlined .

更喜欢无下划线的外观，并且由于我主要使用 Chrome(68.0.3440.106(官方版本)(64 位))和 Edge(42.17692.1004.0)，它们似乎没有全局覆盖设置，所以我安装Tampermonkey并基于 an example I found on Stack Apps 编写了一个小用户脚本，以及我通过搜索此站点寻找解决方案找到的一些相关代码:

// ==UserScript==
// @name         Remove link underlines on Stack Exchange
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        none
// @run-at       document-body
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    var style = document.createElement("style");
    style.appendChild(document.createTextNode("a {text-decoration: none !important;}"));
    document.head.appendChild(style);
})();

这似乎基本上工作得很好，虽然我确实注意到有时在页面加载时带有下划线的简短链接，然后它被替换为无下划线的外观。

我可以做些什么来让我喜欢的外观更直接地出现，而不是下划线的短暂闪烁？

我尝试了 //@run-at document-start，它删除了闪烁，但有时这根本无法应用样式更改。

我在这方面没有经验，除了编写第一个用户脚本之外，所以请解释任何提议的更改的好处和风险。

我选择(并标记)Tampermonkey 是为了与我选择的浏览器兼容，并使我能够在未来运行其他用户脚本(包括不限于样式更改的脚本)。

Answer 1

引用:How to change a class CSS with a Greasemonkey/Tampermonkey script?

对于纯 CSS/样式更改，Stylus更合适，并且通常优于 Tampermonkey。

无论如何，要避免/减少 Tampermonkey 的闪烁您确实需要@run-at document-start。否则，页面将在添加您的样式之前进行充分渲染。

但是，如果这偶尔会失败，它很可能是在 document.head 可用之前触发的。 (理想情况下，您会在浏览器控制台上看到错误。)

页面 CSS(或其他扩展)也有可能使用 !important; 或通过链接的 style 属性应用 CSS。如果您的脚本失败，请为此检查页面源代码(以及上述浏览器控制台)。

无论如何，根据链接的答案注入(inject) CSS——并消除不需要的东西——你的脚本变成:

// ==UserScript==
// @name         Stack Exchange, Remove link underlines
// @version      0.2
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        GM_addStyle
// @run-at       document-start
// ==/UserScript==

GM_addStyle ( `a {text-decoration: none !important;}` );

---

---

或者，如果您被诅咒需要支持 Greasemonkey 4+:

// ==UserScript==
// @name         Stack Exchange, Remove link underlines
// @version      0.2
// @match        *://*.stackexchange.com/*
// @match        *://*.stackoverflow.com/*
// @match        *://*.mathoverflow.com/*
// @match        *://*.serverfault.com/*
// @match        *://*.superuser.com/*
// @match        *://*.stackapps.com/*
// @match        *://*.askubuntu.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

var D               = document;
var newNode         = D.createElement ('style');
newNode.textContent = "a {text-decoration: none !important;}";

var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (newNode);