Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: pages/filters.html

Issue 29482703: Issue 5353 - Add advanced element hiding filters documentation (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org/
Patch Set: Updated following comments Created July 11, 2017, 10:25 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « pages/filter-cheatsheet.html ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pages/filters.html
===================================================================
--- a/pages/filters.html
+++ b/pages/filters.html
@@ -228,28 +228,47 @@
<p>{{s94 Some advertisers don't make it easy for you — their text advertisements have neither an id nor a class attribute. You can use other attributes to hide those, for example <code><fix>##table[width="80%"]</fix></code> will hide tables with width attribute set to 80%. If you don't want to specify the full value of the attribute, <code><fix>##div[title*="adv"]</fix></code> will hide all div elements with title attribute containing the string "adv". You can also check the beginning and the end of an attribute, for example <code><fix>##div[title^="adv"][title$="ert"]</fix></code> will hide div elements with title starting with "adv" and ending with "ert". As you see, you can also use multiple conditions — <code><fix>table[width="80%"][bgcolor="white"]</fix></code> will match tables with width attribute set to 80% and bgcolor attribute set to white.}}</p>
<h3 id="elemhide_css">{{s95 Advanced selectors}}</h3>
<p>{{s97 In general, any CSS selector supported by Firefox can be used for element hiding. For example the following rule will hide anything following a div element with class "adheader": <code><fix>##div.adheader + *</fix></code>. For a full list of CSS list see <a href="{{s97-link http://www.w3.org/TR/css3-selectors/}}">W3C CSS specification</a> (note that not all selectors are supported by Firefox yet).}}</p>
<p>{{s98 <em>Note</em>: This functionality is for advanced users only, you should be comfortable with CSS selectors to use it. Adblock Plus won't be able to check the syntax of the selector you are adding, if you use invalid CSS syntax you might break other (valid) rules you have. Check JavaScript Console for CSS errors.}}</p>
+<h3 id="elemhide-emulation">{{elemhide-emulation-title Advanced pseudo-selectors}}</h3>
+
+<p>
+ {{elemhide-emulation-explanation-p1 Advanced pseudo-selector rules will hide elements that match the CSS selector directly. <code><fix>example.com#?#selector</fix></code> will directly hide elements matching the selector. These filters only exist as <a href="#generic-specific">specific filters</a>, a domain is mandatory.}}
kzar 2017/07/12 10:39:21 The part about domain being mandatory belongs with
kzar 2017/07/12 10:39:21 I think we need to start off by explaining what th
kzar 2017/07/12 10:39:22 I still don't understand what you mean by "Advance
hub 2017/07/12 22:12:49 removed it.
hub 2017/07/12 22:12:49 Acknowledged.
hub 2017/07/12 22:12:49 Acknowledged.
+</p>
+<p>
+ {{elemhide-emulation-explanation-p2 Advanced pseudo-selector rules define new pseudo-class selectors for when a plain CSS selector isn't enough: <code><fix>:-abp-has()</fix></code> and <code><fix>:-abp-properties()</fix></code>. In order to minimise the performance impact, it is important to restrict with a proper CSS selector the number of elements these pseudo-selectors apply to.}}
+</p>
+<p>
+ {{elemhide-emulation-explanation-p3 <code><fix>:-abp-properties(properties)</fix></code> will select elements based on properties of their stylesheet. For example <code><fix>:-abp-properties(width:300px;height:250px;)</fix></code> will select elements that have <code><fix>width</fix></code> and <code><fix>height</fix></code> set to the specified values <code><fix>300px</fix></code> and <code><fix>250px</fix></code> respectively.}}
kzar 2017/07/12 10:39:22 Could you add a sub-heading for this and :has?
hub 2017/07/12 22:12:49 Done.
+</p>
+<p>
+ {{elemhide-emulation-explanation-p4 The <a href="https://adblockplus.org/development-builds/new-css-property-filter-syntax">older syntax</a> for the CSS property filters is deprecated and will be automatically converted to the new format&nbsp;. The syntax to select the style properties remain the same. <code><fix>[-abp-properties='width:300px;height:250px;']</fix></code> will be converted to <code><fix>:-abp-properties(width:300px;height:250px;)</fix></code>.}}
kzar 2017/07/12 10:39:21 Could you prefix this paragraph with "Note:" and i
kzar 2017/07/12 10:39:22 Could you add "For example" before the example?
hub 2017/07/12 22:12:49 Acknowledged.
+</p>
+<p>
+ {{elemhide-emulation-explanation-p5 <code><fix>:-abp-has(selector)</fix></code> will select elements based on their content. For example <code><fix>:-abp-has(> div > a.advertiser)</fix></code> will select elements that contain as a direct descendant a <code><fix>&lt;div&gt;</fix></code> that contains an <code><fix>&lt;a&gt;</fix></code> with the class <code><fix>advertiser</fix></code>. The inner selector can be relative to the element scope, and can use any of the pseudo-selectors, including <code><fix>:-abp-has()</fix></code> and will determine whether the selection occur.}}
+</p>
+
<h3 id="elemhide_exceptions">{{s99 Exception rules}}</h3>
<p>
{{s100 Exception rules can disable existing rules on particular domains.}} {{s101 These are mostly
useful to filter subscription authors who are extending another filter subscription that they
cannot change.}} {{s102 For example, the rule <code><fix>##div.textad</fix></code> can be
disabled on <code><fix>example.com</fix></code> using the exception rule
<code><fix>example.com#@#div.textad</fix></code>.}} {{s103 The combination of these two
rules has exactly the same effect as the single rule
<code><fix>~example.com##div.textad</fix></code>.}} {{s104 It is recommended that you use
exception rules only when you cannot change an overly general element hiding rule, in all the
other cases limiting this rule to the necessary domains is preferable.}}
+ {{exception-rules-p6 These exceptions will be applied to <a href="#elemhide-emulation">advanced pseudo-selector rules</a> as well.}}
</p>
<h3 id="elemhide_simplified">{{s105 Simplified element hiding syntax}}</h3>
<p>{{s106 Adblock Plus supports simplified element hiding syntax (e.g. <code><fix>#div(id=foo)</fix></code>) for backwards compatibility only. Using this syntax is discouraged, usual CSS selectors are preferred. Support for this syntax might be removed at some point.}}</p>
<h3 id="generic-specific">{{generic-specific-title Generic / Specific filters}}</h3>
« no previous file with comments | « pages/filter-cheatsheet.html ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld