Support cosmetic filters with explicit style properties

[gorhill]

Issue reek/anti-adblock-killer#639 made me realize it could be very useful to support explicit style properties for cosmetic filters. Conceptually, all block cosmetic filters implicitly apply the display: none !important; style property.

However, in the cat and mouse game between blockers and anti-blockers, some sites will actually hide the legitimate content by default, and un-hide it if and only if the page does not detect a blocker -- this is what is happening with reek/anti-adblock-killer#639.

Supporting explicit style properties for specific block cosmetic filters is an elegant extension to cosmetic filtering, and I expect this will often result in not having to use a user script to make a page works fine. For the specific example mentioned above, the new cosmetic filters would look like:

freeskier.com###adb-not-enabled {display: block;}
freeskier.com###videoContainer {display: block;}

And this would allow to do away with the use of Tampermonkey/Greasemonkey with a specific user script.

[taman10]

Will this be implemented in a future release?

[gorhill]

Maybe, if more and more cases are found to be solved by this. If ever this is implemented, this will be in a restrictive way, i.e. only for specific cosmetic filters, and only for the smallest necessary set of style properties would be allowed to be tampered (display in above example).

[dungsaga]

I think this can be solved by injecting JavaScript to show legitimate content (available with "resource library" of uBlock Origin 1.4). But list maintainers cannot update "resource library", and writing JS is not as easy and straightforward as writing CSS.

[HLFH]

@gorhill Hi. For example, the republican newspaper le Figaro (well-known in France) contributes to the GESTE / mafia initiative. For this moment, on lefigaro.fr, I'm using the Stylish extension on Chrome to block the anti-adblock system.

It would be great that uBlock Origin supports style blocking directly. (I would also be pleased to block every website belonging to the GESTE mafia but that's another story)

[gorhill]

@HLFH No need for Stylish rules, just update your filter lists, fixes were published earlier this morning (EDT).

[HLFH]

@gorhill Yes, everything was simply fixed the same day by the updated filter lists. Thanks.

[haarp]

Another use case for this would be blocking the privacy dialog on Youtube. It is an unwanted element, just like ads could be, so I'd say it still falls within Ublock's scope.

Anyway, you can block

youtube.com##div#yt-consent-dialog
youtube.com##div#yt-dialog-bg

But that leaves a CSS rule which prevents scrolling (activated by a class in the main element)

body.yt-dialog-active {
    height:100%;
    overflow:hidden
}

Currently there's no way to fix this with Ublock alone.

[goteppo]

+1

This could also be useful for implementing an "ad shader" rather than an "ad blocker".

And by ad shader I mean when ads remain visible and functional, but can for example have their opacity set to less than 1 to make them less noticable and less distracting, or the opposite of that and having the ads stand out more from the rest of the content (think of the search engines that have removed background colors from the sponsored listings, or native ads that are intentionally blended with actual content).

The usefulness of this vs plain ad blocking of course assumes that you find ads beneficial in the first place (which I do for certain search ads for example), and are not worried about malicious ads or tracking that this would not protect against.

[tophf]

Does it work with :has()?

This is what I've tried:

somehost.com###container>*:style(display:none)
somehost.com###container>*:has(#contentinner):style(display:block!important)

[gorhill]

Does it work with :has()?

Not yet. I did re-factor the code to possibly support this in a future version, but for now I prefer to minimize the changes. What is important here is to try as much as possible to use plain, standard cosmetic filtering syntax. When all of this fail, make use of the new syntax. And only if also this fail, then I will consider extending the new syntax if enough cases arise. We are far from there at this point.

somehost.com###container>*:style(display:none)

This filter is pointless, it can be re-written using the mroe standard cosmetic filter syntax, which default purpose is to hide DOM elements:

somehost.com###container>*

[haarp]

I just got to test this with the release of 1.8.0. It works beautifully, thank you!

[cobrafast]

How can I use the :style() thing to add CSS to the body element?

I tried domain.com##body:style(overflow: visible !important) but uBlock seems to ignore the rule.

[gorhill]

I tried domain.com##body:style(overflow: visible !important) but uBlock seems to ignore the rule.

Should work. How do know uBO ignores the rule? If the rule is inserted and nothing happens, it's not uBO ignoring the rule, it's something else. Could be your rule is superseded by a more specific CSS rule. Without details of where the rule is inserted, I can't provide insights.

[Ulver84]

I've been searching for a description of how to use this feature in the FAQ but I can't find anything. Am I completely missing something? I am very new when it comes to HTML, CSS and I can't understand what I'm doing wrong based on eg. cobrafast's post. I have a website that says "adblocker detected, please turn in off" in a huge overlay. I've added this overlay to my blocked elements, but now I can't scroll. With Firefox inspect element, I've nailed it down to overflow: hidden !important; in the body tag. But how do I block it? I've tried different combinations and none of them have worked, and so far I've just settled with www.filmz.dk##body:style(overflow: visible !important) until I can figure out how to do so. I'd really like to learn how to block css elements. Thanks.

[gorhill]

Forced to lock this thread -- filter issues must not be reported here.

There are places for such questions, and as usual, keep in mind that nobody can help without all the details of where a filter issue occurs.