1° step: Ads, 2° step: Web elements, 3° step: ?

[barbudo2005]

Currently two steps are used to improve the visualization of a web page:

FIRST STEP: Eliminates ads.

All Vivaldi users use this enhancement, either through the built-in adblocker, uBO, uBOL or Adguard MV3 .

SECOND STEP: Element picker

This step is more elaborate and therefore is used only by a fraction of users, who have it available through uBO, Adguard MV3 or using a script.

Or even by a smaller group of users who use the Inspect element in Dev Tools, and incorporate it into Stylus.

Hopefully Vivaldi will incorporate it in its goal to improve the built-in adblocker.

What is the purpose of this step?

To remove from the page all those elements that distract from what the user cares to read.

It is undoubtedly very effective in minimizing eye strain from long periods of time in front of the screen.

What I want to propose in this post is to take the next step in the rest of the eyes, and something more important in the rest of the mind.

Unlike paper newspapers that had a limited number of pages, web pages are unlimited in what they display.

Thus, we are inundated with national and international information that does not interest us and distracts us from looking at the web page.

THIRD STEP: Eliminate news, thread or posts that do not interest us.

This can be done through the Stylus extension with a simple code like the following:

.col_center_noticia:has(a[href*="Tendencias"])

{display: none !important;}

But it has the big problem that the URL of the news is often a summary of the headline and therefore does not always contain the keyword.

Or in the more critical case where the text is not part of a selector or attribute:

uBO and Adguard use an extended version of CSS that incorporates contains() or its equivalent has-text(), which the built-in adblocker will undoubtedly incorporate sooner rather than later.

Just choose the selector that contains all the news (image, text and summary) and use the following code:

En Adguard (that I am testing):

domain#?#selector:contains(/\b(word1|word2|word3)['‘’´:,;]?s\b/i)

En uBO:

domain##selector:has-text("/\b(word1|word2|word3)['‘’´:,;]?s\b/i")

News or posts containing the keywords word1, word2 or word3 will not appear on the web page.

And if you want to take advantage of the list for several sites use:

domain1,domain2,domain3#?#:is(selector1,selector2,selector3):contains(/\b(word1|word2|word3)['‘’´:,;]?s\b/i)

In my case I use:

latercera.com,biobiochile.cl,emol.com,x.com#?#:is(article.card, article, [id*="ucHomePage"]):contains(/\b(word1|word2|word3)['‘’´:,;]?s\b/i)

Some clarifications:

1.- The selectors do not have to be in correlative order with the domains.

2.- In my case two domains use article, so it is not necessary to repeat it twice.

3.- The command i in the regex means case-insensitive.

4.- The command s? means that it incorporates the plural of the words.

5.- The command [‘’‘’:,;] considers the case when the word is in quotes or the case when it is followed by “:”, “,” or “;”.

6.- There are some sites that use different selectors on the page, but keep a common word. This is the case of emol.com and therefore I use the following code that includes those that have the word ”ucHomePage"

[id*="ucHomePage"]

Without code:

With code with the word bancada:

[Pathduck]

@barbudo2005 Or, as I prefer to do it....

ul.posts li[data-username="barbudo2005"] {
    display: none;
}

[barbudo2005]

@Pathduck

You never finish knowing people.