The title of this article is tongue-in-cheek. I have no desire to stop Daring Fireball. Quite the opposite! I'm grateful that DF exists and thrives. But "Stop the [Thing]" has become a kind of personal brand. It's said that naming things is one of the hardest problems in computing, and that seems right, because my app names are becoming derivative: StopTheMadness, StopTheNews, and StopTheTwitter. Today I released StopTheMadness version 15.0 in the Mac App Store with a new feature: support for site-specific CSS in Safari's user style sheet! The inspiration for this new feature was none other than Daring Fireball.
As a regular reader of Daring Fireball, I have to admit that I find it… hard to read. I'm not talking about the writing, I'm talking about the formatting. My eyes are not what they used to be, and the color scheme on the site just doesn't work well for me. I need more contrast between text and background. To be fair, perhaps Gruber is committed to the style of DF because it's part of his personal brand. After all, Gruber's brand is much bigger and more established than my brand! I've set Safari Website Preferences to open DF in Reader mode, but that's not ideal, for several reasons. Reader mode doesn't work on the front page of the site. It's too easy to accidentally exit Reader mode by clicking outside the "page". And Reader mode hides the advertising on DF, which can't be good for Gruber, because the site is funded by advertising.
As the developer of a Safari extension, I was in a unique position to solve this problem. I could have just included a custom CSS file for Daring Fireball, as I still do for The Outline (which sadly is now defunct) to remove its animated squiggly lines. However, I decided to solve a broader problem instead. How can a Safari user customize the CSS for specific web sites? If you open Safari's Preferences window to the Advanced tab, you can set your own .css file as the style sheet. The problem is that this style sheet applies to every web site you visit, not just to the web sites you want to tweak. So I added a new feature to StopTheMadness. You just need to enable the new "Style sheet" website option, either in the "Default options for all websites" or for a specific site such as daringfireball.net by creating new customized website options. When the "Style sheet" option is enabled, StopTheMadness adds a new attribute stopthemadness-href to the html element of a web page. The value of the attribute is the URL of the page. To illustrate, here's how I use the new feature to customize DF in my Safari style sheet:
@charset "UTF-8";
html[stopthemadness-href^="https://daringfireball.net"] * {
background-color: revert !important;
color: revert !important;
font-size: revert !important;
}
html[stopthemadness-href^="https://daringfireball.net"] a {
border-style: none !important;
text-decoration: underline !important;
}If you want, you can download my style sheet. Maybe John will mock me for this (read the comment at the top of fireball_screen.css), but my CSS makes the site much easier on my eyes, and thus makes it more likely that I'll visit! It's a win-win IMHO. In any case, please check out the latest StopTheMadness. It also got some great new features in the previous version 14.0, such as the ability to automatically open clicked links in Safari with other apps. You can specify which external app will open when you click a link with a certain URL or URL scheme!