I’ve created userscript for Tampermonkey to style unvisited links with blue color, visited links with violet color, and red for hovered/active/focused links.
It was created primarily for my researches on Wikipedia.
Below are shown 3 implementations. The first one is very simple and shown just for demonstration purposes.
My actual question is about 2nd and 3rd implementations. I don’t sure which choose from them. Which is better?
1st and 2nd implementations
// ==UserScript== // @name Test // @match *://*/* // ==/UserScript== /* Preferences =============================================== */ var links = 2; // Set to "1" to style only simple links (example: a:link) // Set to "2" to style also hidden links (example: a:link *) /* Functions =============================================== */ function AddGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) return; style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); } function Links(blue, violet, red) { AddGlobalStyle( blue + '{' + 'color: rgb(0, 138, 206) !important;' + 'text-decoration: none !important;' + '}' ); AddGlobalStyle( violet + '{' + 'color: rgb(180, 14, 180) !important;' + '}' ); AddGlobalStyle( red + '{' + 'color: rgb(204, 0, 0) !important;' + '}' ); } /* Main part =============================================== */ /* 1st way. Simple and works fine. Shown here just to show an idea ----------------- */ /* if (links == 1) Links('a:link', 'a:visited', 'a:hover, a:focus, a:active'); if (links == 2) { Links('a:link', 'a:visited', 'a:hover, a:focus, a:active'); Links('a:link *', 'a:visited *', 'a:hover *, a:focus *, a:active *'); } */ /* 2nd way ----------------- */ const plusX = s => s + ' *'; var args = ['a:link', 'a:visited', 'a:hover, a:focus, a:active']; var modifiedArgs = args.map( s => s .split(',') .map(plusX) .join(',') ); if (links == 1) Links(...args); if (links == 2) { Links(...args); Links(...modifiedArgs); }
The resulting rules in the head section will be as follows:
<style> a:link { color: rgb(0, 138, 206) !important; text-decoration: none !important; } </style> <style> a:visited { color: rgb(180, 14, 180) !important; text-decoration: none !important; } </style> <style> a:hover, a:focus, a:active { color: rgb(204, 0, 0) !important; text-decoration: none !important; } </style> <style> a:link * { color: rgb(0, 138, 206) !important; text-decoration: none !important; } </style> <style> a:visited * { color: rgb(180, 14, 180) !important; text-decoration: none !important; } </style> <style> a:hover *, a:focus *, a:active * { color: rgb(204, 0, 0) !important; text-decoration: none !important; } </style>
3rd implementation
// ==UserScript== // @name Test // @match *://*/* // ==/UserScript== /* Preferences =============================================== */ var links = 2; // Set to "1" to style only simple links (example: a:link) // Set to "2" to style also hidden links (example: a:link *) /* Functions =============================================== */ // This function is the same changed function AddGlobalStyle(css) { var head, style; head = document.getElementsByTagName('head')[0]; if (!head) return; style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; head.appendChild(style); } // But this one have changed function Links(blue, violet, red) { if (links == 2) { blue = blue + ',' + blue + ' *'; violet = violet + ',' + violet + ' *'; redArray = red.split(',') const plusX = s => s + ' *'; redNew = redArray.map( s => s .split(',') .map(plusX) .join(',') ); red = red + ',' + redNew; } AddGlobalStyle( blue + '{' + 'color: rgb(0, 138, 206) !important;' + 'text-decoration: none !important;' + '}' ); AddGlobalStyle( violet + '{' + 'color: rgb(180, 14, 180) !important;' + '}' ); AddGlobalStyle( red + '{' + 'color: rgb(204, 0, 0) !important;' + '}' ); } /* Main part =============================================== */ /* 3rd way ----------------- */ Links('a:link', 'a:visited', 'a:hover, a:focus, a:active');
The resulting rules in the head section will be as follows:
<style> a:link, a:link * { color: rgb(0, 138, 206) !important; text-decoration: none; } </style> <style> a:visited, a:visited * { color: rgb(180, 14, 180) !important; text-decoration: none; } </style> <style> a:hover, a:focus, a:active, a:hover *, a:focus *, a:active * { color: rgb(204, 0, 0) !important; text-decoration: none; } </style>