I like to read. All sorts of stuff. Especially social media posts. I can sit for hours scrolling thru threads, but it gets annoying when there is someone spamming or pushing an agenda, or just being stupid in general. So I looked back my notes and remembered that most browsers can be customized with user-defined stylesheets. This tutorial explains an easy way to use your own custom CSS to block unwanted content on any website. It works without requiring logging in and sacrificing your privacy. So block the idiots AND stay anonymous is the name of the game :)
Contents
I like to read. All sorts of stuff. Especially social media posts. I can sit for hours scrolling thru threads, but it gets annoying when there is someone spamming or pushing an agenda, or just being stupid in general. So I looked back my notes and remembered that most browsers can be customized with user-defined stylesheets. This tutorial explains an easy way to use your own custom CSS to block unwanted content on any website. It works without requiring logging in and sacrificing your privacy. So block the idiots AND stay anonymous is the name of the game :)
Contents
..buT wHy?
Why is this useful? Can’t I simply click “block user” inside the site settings? After all, many social media sites provide some sort of filtering or blocking feature that makes it easy to “hide” any unwanted content. Yes, but — and this is key — using a website’s built-in blocking functionality requires that you register and log in to an account. Which of course is fine depending on the site. But for sites where you want to remain anonymous and not have to register, give up your email address, and/or log in to an account, blocking content via browser extension is the way.
This technique works for any website, page, post, whatever.. you just need a basic understanding of HTML and ability to crack open your browser’s code inspector.
Step 1: Install browser extension
The first thing is to install a browser extension or addon that makes it easy to add your own custom CSS/styles. For example, I use a free browser addon called Stylus. It’s one of those simple browser extensions that “just works”. So that’s the first step to blocking unwanted content: install the Stylus extension, or alternately any addon that enables you to add custom stylesheets and CSS rules. You can download Stylus for Chrome and Firefox here:
Note that most extensions work with many browsers, not just Chrome and Firefox. For example, I am using the Brave browser for browsing social media and the Chrome version of this extension is working great.
Step 2: Inspect markup and add custom styles
Next step. Enable the Stylus extension and follow the steps to add your own custom CSS/styles. Unfortunately the Stylus UI is a bit confusing, and can take some time to figure out. Once you get it dialed in and are able to add your own styles, you can block virtually any unwanted content on any website directly in the browser.
How it works in a nutshell: Open your browser’s code inspector and find the page element that you want to block. Then use a bit of CSS to hide that content on the page. This is easiest using display: none;, but there are other ways to do it.
Quick example for those familiar with CSS and HTML, say you want to hide every social media post that has a class named after a specific user, annoying-guy. You would add the following snippet via Stylus (or similar browser extension):
.annoying-guy { display: none; }
And done. Depending on page structure, you may need to tweak the CSS selector to match the markup, so some fiddling might be required to completely disappear any unwanted content. But, that’s the basic idea: add your own custom styles to anonymously improve your doom-scrolling experience.
And: The nice thing about adding custom stylesheets to your browser is that they are permanent. So after adding the styles for a site, you don’t have to keep adding them for every visit. Simply add one time and they will remain active until removed.
👉 A more elaborate example
If you’re familiar with basic CSS, HTML, and inspecting code via your browser, you’re probably saying, “yeah I get it, thanks.” For the initiated, inspecting markup and adding custom styles is actually a very simple concept. But for those who may be new to the game, the technique may prove a bit mysterious. So, to give you a better idea, let’s walk through a more elaborate, real-world example..
The context
Say we’re at some social-media site where users post whatever they want, and visitors can scroll through threads and read everything. Like Facebook, Twitter, and many others. While scrolling through, you try to ignore the morons, but sometimes they post aggressively with many posts. So the goal is to hide all posts from the spamming loser, which we’ll name, “SpammingLoser”.
The inspection
In order to target (and hide) all posts from SpammingLoser, crack open the browser’s code inspector and examine the markup. Specifically, look for the user’s name in the markup, and look for identifying selectors that can be used to target the element via CSS. It takes some practice, but if you dig for a bit, you will start to notice patterns that can be used to craft the necessary CSS.
For this example, the markup of the social-media posts looks something like this:
.
.
.
<div class="parent-class"></div>
<div class="parent-class"></div>
<div class="parent-class"></div>
<div class="parent-class"></div>
<div class="parent-class">
<div>
<div>
<div>
<a href="https://example.com/user-id/SpammingLoser" title="SpammingLoser">SpammingLoser</a>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
</div>
</div>
<div class="parent-class"></div>
<div class="parent-class"></div>
<div class="parent-class"></div>
<div class="parent-class"></div>
.
.
.
In the real-world, there would be many other attributes (e.g., titles, classes, ids, etc.) sprinkled throughout the above code, but I have removed them for clarity.
The custom styles
When inspecting markup, the goal is to find the specific selector that enables you to target all of the unwanted posts, without interfering with anything else. Depending on the page structure, finding usable selectors can take some time. And in some cases, it requires getting fancy with some relatively advanced CSS, like the :has selector, maybe combined with an attribute selector (or two). For example:
div[class*=parent-class]:has(a[title*=SpammingLoser]) { display: none; }
Given our example HTML, this slice of CSS uses :has to target the parent class based on whether or not it contains the string SpammingLoser in the user link. If so, the parent div is hidden with display: none;, which means effectively that all posts from SpammingLoser no longer are visible. So now you can resume lazy scrolling through posts while ignoring the nonsense :)
Note about markup
Just a note that some social-media sites use much better/clearer markup and include identifying class names in the parent element for each post. This makes it possible to block users more directly and efficiently. Quick example of this, if the site structures their posts like this:
.
.
.
<div class="parent-class username-someone"></div>
<div class="parent-class username-anyone"></div>
<div class="parent-class username-nobody"></div>
<div class="parent-class username-spammer"></div>
<div class="parent-class username-someone"></div>
<div class="parent-class username-whoever"></div>
<div class="parent-class username-spammer"></div>
<div class="parent-class username-etcetera"></div>
.
.
.
That sort of convenient, clear, and clean markup may be hard to find. But if you are lucky enough to encounter it, you can block any user very simply:
.username-spammer { display: none; }
The CSS that’s required depends entirely on the page structure and markup. In some cases, it will be straightforward, in other cases more complex rules will be required. In any case, knowing that it’s possible to block unwanted content on any page using a browser extension and bit of CSS is a very useful tool to have at your disposal.
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.