Although many of the web’s visual scars can be eliminated with the help of an
ad blocker, there are still times when you’ll want to change a page’s actual
appearance. Because there’s no official way to do this, there are a variety of
solutions. I think Firefox’s is pretty good: wrap a stylesheet in an
@-moz-document rule and you can target your editing. But Safari
doesn’t support this (and doesn’t even offer a corresponding
@-webkit-document rule, to my knowledge), so we need to find an alternate
solution.
I personally use GreaseKit for this; I create a script that simply adds a
stylesheet <link> to selected pages — effectively a three-layer hack (custom
CSS, GreaseMonkey,
SIMBL), but it works well.
These directions assume that you’re using OS Ⅹ; that GreaseKit is installed; and that you have Apache (‘Web Sharing’) running.
The loader
Create the GreaseMonkey loader script. Copy and paste the following
into a plain text editor such as TextEdit. Replace the bracketed portions with
the website you want to change — e.g. youtube.com.
Save the file as [website].user.js, and move it into the GreaseKit folder
(~/Library/Application Support/GreaseKit). Open Safari, open the GreaseKit
menu, and click ‘Reload All User Scripts’. Open the menu again; your new script
should be in the list. Click it to enable it.
// ==UserScript==
// @name [name of target website]
// @include http://*.[website]/*
// @include http://[website]/*
// ==/UserScript==
(function () {
var head = document.getElementsByTagName('head')[0];
/* add custom stylesheet */
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('href', 'http://localhost/[website].css');
if (typeof stylesheet != 'undefined')
head.appendChild(stylesheet);
})();
An explanation of the code: we create an anonymous function that finds
the <head> element (or the first, if the page accidentally includes several),
then create a <link> element and supply with the necessary information
to load a CSS file.
The stylesheet
Now that we’ve got the loader prepared, we need to set up the stylesheet it loads. For this, you’ll probably want to use the web inspector to track down the various things you want to change.
Once you’re done, save the file as [website].css (replacing the brackets as
above), and put it into the Apache directory (~/Sites). Reload the site you’ve
made the script for, and your changes should be in effect.
And so
Even though we had to route around various missing parts, it’s pretty simple to set up Safari with targeted custom CSS. The major downsides are that this is a hacky solution, and that you’ll need to create a new script for each site you want to change.
But until such time as we have a better solution, this works.
