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^=""] * {
  background-color: revert !important;
  color: revert !important;
  font-size: revert !important;
html[stopthemadness-href^=""] a {
  border-style: none !important;
  text-decoration: underline !important;


This rule blocks the "You're signed out of YouTube" and "Looking for autoplay?" popups.

html[stopthemadness-href^=""] yt-tooltip-renderer {
  display: none !important;

This rule blocks the advertisement for YouTube premium.

html[stopthemadness-href^=""] ytd-mealbar-promo-renderer {
  display: none !important;

New York Times

This rule hides the footer on New York Times articles.

html[stopthemadness-href^=""] div[data-testid="expanded-dock"] {
  display: none !important;

Support: Safari Support

Home: Home Page