Removing underline style for Stack Exchange links without flicker

Question

As part of the rollout of new network site themes, many of the Stack Exchange sites I visit regularly now have links in posts and comments underlined.

Preferring the non-underlined look, and since I primarily use Chrome (68.0.3440.106 (Official Build) (64-bit)) and Edge (42.17692.1004.0), which do not appear to have a global override setting, I installed Tampermonkey and wrote a small userscript, based on an example I found on Stack Apps, and some related code I found via searching this site for a solution:

// ==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);
})();

This seems basically to work pretty well, though I do notice brief link underlining on page load sometimes, before it is replaced with the non-underlined look.

Is there something I can do to make my preferred look appear more immediately, without the brief flash of underlining?

I tried // @run-at document-start, which removed the flashing, but sometimes this fails to apply the style change at all.

I have no experience in this area, beyond hacking together this first userscript, so please explain the benefits and risks of any proposed changes.

I chose (and tagged) Tampermonkey for compatibility with my browsers of choice, and to enable me to run other userscripts in future (including scripts not limited to styling changes).

Brock Adams · Accepted Answer · 2018-08-19T19:28:05.860

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

For pure CSS/style changes, Stylus is a better fit, and usually outperforms Tampermonkey.

Anyway, to avoid/reduce flicker with Tampermonkey you do need @run-at document-start. Otherwise, the page will be substantially rendered before your styles are added.

However, if this occasionally fails to work, it's most likely that it fires before document.head is available in those instances. (And you would ideally see an error on the browser console.)

There is also a small chance that the page CSS (or another extension) is using !important; or applying CSS via a link's style attribute. If your script fails, inspect the page source for this (as well as the aforementioned browser console).

Anyway, injecting CSS per the linked answer -- and eliminating the unneeded cruft -- your script becomes:

// ==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;}` );

Or, if you are cursed to need to support 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);

Removing underline style for Stack Exchange links without flicker

1 Answers1