A Comparison of Stylish and uBlock to Remove Web Page Elements

My web browser required a reinstall and, in doing so, I needed to update the extensions I use – Stylish and uBlock Origin – to trim the noise on web pages I visit.  I’ve written a couple of times about how I use Stylish to remove site elements:  house ads, annoying “suggested based on” activities or network contacts that are not personalized.  I’ve even used Stylish to demonstrate to immigration lawyers how to make Canada’s online immigration forms suck less.  But I’ve never really played around with uBlock, so I took this opportunity to look at how it performs the same function.

uBlock is an ad-blocker that has additional features.  Stylish is not an ad blocker, although it can be set up to filter out ads.  You can train both of them – within the browser – to stop displaying page elements.

The approach is pretty much the same, although Stylish is more technical because you are going to write a bit of a style sheet (CSS) to overwrite the style the page is using.

Select the Noise

The first thing to do is to select the content you want to remove.  I’m using LinkedIn as an example because it displays suggested people to follow – like a Saudi prince, and a Fortune 500 CEO – that I would never follow.  It’s this sort of personalization failure that creates visual noise on social sites.

For Stylish, you need to pop open the web browser’s developer view (you can access it any time by hitting your F12 key in most browsers) to inspect the element.  But to avoid paging through the code, right click on the page element – “Who to Follow”, for example – you want to remove.  On the menu that appears, choose Inspect Element.

Select the element by right-clicking your mouse on it. But if you’re not sure, mouse over the HTML code in the bottom pane to select more or less.

You can see that the black arrows point to a line of code that inserts the “right-rail-container”.  If you move your mouse over different elements of code, you’ll see that blue highlighted box on the page move.  This is how you can pinpoint what to remove.  In this case, the element I selected was NOT the one I wanted – that’s why you can see a dark blue bar going across the code.  That was the initial element.  But I moved my mouse up line by line until I reached the one creating the “right-rail-container” because that did capture everything I wanted to remove.

On uBlock, it’s a bit easier.  You still right-click the element to remove, but then you just select Block Element from the menu – you’ll see the uBlock icon next to it.

Right click on the element to remove and select Block Element.

I found that uBlock tended to select the smallest amount of the element and so my initial selection was not correct, just as with Inspect Element.  To resize the area that uBlock is going to remove, click in the selection it has made, and resize it to cover the entire element.  No code involved.  Once you’ve selected everything, click outside the selection.  You should now see a box appear that has a Create button.  This creates the rule to remove the element.

The rule will show you the code – similar to Stylish’s style – that will remove the element.

In this case, it has selected the same element (“right-rail-container”) but in other cases it didn’t, although it appeared to select the same portion of the screen.  For example, in Stylish, to remove the MOMENTS navigation button (because I never look at Twitter moments), I use:

li.moments {display: none};

On uBlock, if you select the navigation button, and reselect to get more than the word, you end up creating a rule that will look like this on your uBlock dashboard:

twitter.com##.js-moments-tab.moments > .js-dynamic-tooltip.js-tooltip.js-nav

If you’re using uBlock, so long as you selected what you want to remove, I wouldn’t sweat whether the element is entirely removed at the code level.

Remove the Noise

uBlock will automatically remove the element as soon as you create that rule.  In Stylish, you still need to add the CSS line to the style sheet.  Because it requires a degree of coding ability, because sometimes even having the element’s name isn’t enough, uBlock is an easier tool to remove content elements.

The two arrows point FROM the original code (Inspect Element) and TO the style written in a Stylish style sheet.  The pink box shows what’s been removed.

In this case, because the original code was:

<div class=”right-rail-container”>

the style in Stylish is

div.right-rail-container { display: none; }

You can see, in the image above, that I have a single style sheet that contains tweaks to lots of different sites.

Portability

One thing I have appreciated about Stylish is that, once I have created a style sheet, I can share it with others.  It can be cut-and-pasted into someone else’s Stylish app or you can save it to a web server so that mobile users with Stylish can import the URL.  This means that, once you’ve done the legwork on one device, you can reuse that work on other systems.

uBlock is similar.  When you access the extension’s dashboard, you’ll see a tab called My Rules.  It will list the custom element removals you’ve made.  You can export this list and import it into other web browsers running uBlock.

uBlock is an all-in-one tool if all you want to do is block.  As soon as you install it, you will see ads drop from web sites and you can use Block Element to remove other noise.  I still prefer Stylish’s flexibility – because I can leave elements in place but change their background, opacity, placement on the page, and so on – because it can do more than just block.  But it’s definitely more work.

Leave a Reply

Your email address will not be published. Required fields are marked *