StopTheMadness for Safari
Style sheet

Safari allows you to set your own style sheet, which is a .css file containing CSS rules.

Safari Advanced Preferences

These CSS rules apply to every website you visit in Safari. What if you want to apply CSS rules only to a specific site? StopTheMadness allows you to do this with its "Style sheet" website option. Enabling "Style sheet" in the "Default options for all websites" will allow you to add new site-specific CSS at any time, but if you want to restrict this feature just to specific sites, then enable "Style sheet" in the custom website options for those sites.

StopTheMadness 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. You can then use this attribute in your CSS to write site-specific rules. Below I'll illustrate how this works with several useful examples. If you want you can download my Safari style sheet. Remember that every style sheet file should have this line at the top, before the rules:

@charset "UTF-8";

Daring Fireball

Here's how I customize Daring Fireball in my Safari style sheet so that the color scheme and fonts are easier for me to read.

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;
}

YouTube

This rule eliminates the custom video controls on YouTube. As a result, it also eliminates YouTube video ads! You may want to enable "Show video controls" in the StopTheMadness Website Options to show Safari's built-in video controls.

html[stopthemadness-href^="https://www.youtube.com"] div.html5-video-container ~ div {
  display: none !important;
}

This rule blocks popups on YouTube such as "You're signed out of YouTube", as well as the advertisement for YouTube premium. The is especially useful when browsing YouTube in a Safari private window.

html[stopthemadness-href^="https://www.youtube.com"] ytd-popup-container {
  display: none !important;
}

New York Times

These rules hide the header and footer on New York Times articles.
(Note that the rules may not work in the future if the NYT changes its site layout.)

html[stopthemadness-href^="https://www.nytimes.com/"] main > div > style + div {
  display: none !important;
}
html[stopthemadness-href^="https://www.nytimes.com/"] div[data-testid="expanded-dock"] {
  display: none !important;
}

Twitter

These rules hide the lists of trends and suggestions of who to follow in the Twitter sidebar.

html[stopthemadness-href^="https://twitter.com"] div[data-testid="sidebarColumn"] div[aria-label="Timeline: Trending now"] {
  display: none !important;
}
html[stopthemadness-href^="https://twitter.com"] div[data-testid="sidebarColumn"] aside[aria-label="Who to follow"] {
  display: none !important;
}

By default on Twitter, links in tweets have abbreviated titles.

Tweet with abbreviated URL link

These rules force Twitter to show the full URL of links in tweets.

html[stopthemadness-href^="https://twitter.com"] a span[aria-hidden="true"] {
  font-size: inherit !important;
}
html[stopthemadness-href^="https://twitter.com"] a span[aria-hidden="true"]:last-child {
  display: none !important;
}
html[stopthemadness-href^="https://twitter.com"] a span[aria-hidden="true"]:first-child {
  display: inline !important;
}

Tweet with full URL link

The change is important not just for visual purposes. When the link title has the full URL, you can use the StopTheMadness Copy Link Title contextual menu item to copy the URL. This allows you to avoid the https://t.co redirect that Twitter uses for every link.

Safari contextual menu

Support: Safari Support

Home: Home Page