Have you thought about your user stylesheet lately? I cannot blame you if you have not, especially if you have no idea what I mean when I write “user stylesheet”. Here is Jennifer Kyrnin’s great explanation of what that is:
In the past, the internet was filled with bad web design, unreadable fonts, colors that clashed, and nothing adapted to fit the screen size. At that time, web browsers allowed users to write CSS style sheets that the browser used to override the styling choices made by page designers. This user style sheet set the font at a consistent size and set pages to display a specified color background. It was all about consistency and usability.
As Kyrnin writes, web designers usually do a better job these days, and most browsers no longer support user stylesheets by default. Google removed them from Chrome nine years ago and they were made optional in Firefox in 2019. But Safari, my browser of choice, still makes user stylesheets easily visible and, if you have the inclination, I recommend its use for a low-effort way of blocking irritations and overriding bad design choices.
For example, while I frequently use and appreciate the services of the Internet Archive, and the reporting of the Intercept and ProPublica, I find their modal nags to be more intrusive than necessary. So I have this section in my user stylesheet to override those elements:
#donato,
html>body #donato,
#donate_banner,
html>body #donate_banner,
/* same for the intercept */
#third-party--viewport-takeover,
html>body #third-party--viewport-takeover{
display: none !important;
height: 0 !important;
position: absolute !important;
left: -99999em !important;
}
.InterceptWrapper .Post-body--truncated{
max-height: none !important;
overflow: visible !important;
}
.InterceptWrapper .Post-body--truncated:before{
content: unset !important;
}
/* propublica nag */
body.app iframe.syndicated-modal{
display: none !important;
}
I pulled these specific selectors by finding the bothersome elements on these websites using Safari’s Web Inspector.
For those of you with some CSS knowledge, the above rules might look like overkill. The logic of including both display: none and left: -99999em seems to make no sense. The only explanation I have is that some of these rules are more applicable to the Internet Archive donation nag while others apply to the Intercept’s email box.
Also, this stylesheet has the cruft of fifteen years of new rules and changing websites, so that may also be a factor.
Here is another example of the power of user stylesheets: you know those awful “sign in with Google” prompts that became more aggressive this year? You can turn them off if you remain signed into your Google account, but you can also style them out of view:
#credential_picker_container,
iframe[title="Sign in with Google Dialog"]{
display: none;
position: relative;
}
This is the kind of lightweight solution that I love. It is unnerving to know Google has so much power over the web that it offers users the trade-off of staying logged into their account or be nagged on major websites that offer Google’s login option. It is rewarding to defeat it with five lines of CSS.
But user stylesheets have drawbacks and are evidently from an earlier era of the web. The ways you might employ user styles today are often similar to browser extensions like StopTheMadness or any number of ad blockers. Modern extensions are far more powerful, too, as rules can be tailored to individual websites or run globally. The biggest advantage to the user stylesheet is also its Achilles’ heel: it only works globally, meaning the same rules are applied to all websites. That means your CSS selectors need to be highly specific. If another website has the app class on the <body> element which contains an <iframe> with the syndicated-modal class, it will also get hidden in the same way as it does for me on ProPublica. Finally, many modern websites are built with ugly generated markup which can change any time the code base is updated.
Still, I rely on this user stylesheet to keep my sanity when browsing the web today. Unlike browser extensions, there are no security or privacy questions to worry about, and it is entirely controlled by the user. I saved my stylesheet in my iCloud Drive so it syncs between my Macs; Safari for iOS does not support user styles. It is a feature that will probably be deprecated across all browsers sooner than I would like, but I will be using it until that day arrives. If you have even a passing knowledge of CSS, I encourage you to experiment with its possibilities.