Adblock Plus and (a little) more

New CSS property filter syntax · 2015-12-16 17:42 by Dave Vandyke

We have created a new element hiding rule syntax which allows for the matching of elements based upon the rules applied to them from any stylesheets¹. The new syntax is available now in development builds of Adblock Plus for Chrome, Opera and Safari as of 1.9.4.1500 and will be released early next year in version 1.10. Support in Adblock Plus for Firefox is under development and will follow.

This is an advanced and experimental feature that is still subject to change.

“the matching of elements based upon the rules applied to them from any stylesheets.” is quite a mouthful! What does that mean?

Well let’s say there’s a webpage https://example.com/example.html that has the following stylesheet:

.foobar {
  width: 32px;
}

…and the following HTML fragment somewhere in the page:

<div class="foobar"><p>Hello world</p></div>

You could write a CSS property based element hiding rule to hide the div like this:

example.com##[-abp-properties='width: 32px;']

Wildcards are also supported, so any of these would work as well:

example.com##[-abp-properties='width: *px;']
example.com##[-abp-properties='*: 32px;']
example.com##[-abp-properties='width: 3*px;']

They can also be combined with selector matching. This rule would hide just the child paragraph tag:

example.com##[-abp-properties='width: 32px;'] > p

Syntactically they are just like normal element hiding rules, the magic is in the special -abp-properties “attribute”². Its value is checked against any rules from all stylesheets that apply to the element. For our examples the property width: 32px; of the rule in our stylesheet does match and so the element is hidden.

That all seems pretty convoluted, why couldn’t we just write a rule that matched for the foobar class directly?

It’s true that in the previous example we could have matched the foobar class much more easily with a rule like this:

example.com##.foobar

The problem is that there is not always an easy way to match elements with a standard selector. Some websites have started to randomize their page structure in an attempt to circumvent ad blockers. The new CSS property filters should empower filter authors to hide adverts consisting of dynamically generated HTML and CSS as long as some of the values and/or properties of applied CSS rules are predictable.

Caution! CSS property filters are slower than normal filters and will slow down the page they are applied on. They must always be restricted to a domain and should only be used as a last resort.

To the install page

¹ As originally given in the stylesheet. Not to be confused with computed styles as shown by the inspector.

² Actually for older versions of Adblock Plus that don’t yet support CSS property filters this rule really will be interpreted as matching elements with a matching -abp-properties attribute. This way filter lists can contain CSS property filters whilst still being otherwise backwards-compatible with versions of Adblock Plus that don’t support them yet.

Tags: adblock plus adblock plus chrome

Comment

Commenting is closed for this article.