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: Added links to sections in the documentation. Created July 7, 2017, 6:26 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
@@ -242,16 +242,39 @@
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.}}
</p>
+<h3 id="elemhide_emulation">{{s112 Advanced element hiding}}</h3>
kzar 2017/07/10 13:09:18 Please give strings human-friendly names when maki
hub 2017/07/10 14:52:32 ok.
+
+<p>
+ {{s113 Advanced hiding rules will hide elements that matches the CSS selector directly.}}
+ {{s114 <code><fix>example.com#?#div.textad</fix></code> will directly hide <code><fix>&lt;div&gt;</fix></code> elements with the <code><fix>textad</fix></code> class.}}
+ {{s115 These filters only exist as <a href="#generic-specific">specific filters</a>: a domain is mandatory.}}
+</p>
+<p>
+ {{s116 <a href="#elemhide_exceptions">Exception rules</a> above can be applied to the advanced hiding rules the same way.}}
+</p>
+<p>
+ {{s117 Advanced hiding rules also introduce new pseudo-class selectors for when a plain CSS selector isn't enough.}} {{s117 <code><fix>:-abp-has(selector)</fix></code> will select the element whose content match the enclosed selector.}} {{s118 <code><fix>:-abp-properties(properties)</fix></code> will match elements based on their CSS style properties.}}
+</p>
+<p>
+ {{s118 <code><fix>:-abp-properties(properties)</fix></code> will select elements based on properties of their stylesheet.}}
+ {{s119 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.}}
+ {{s120 The <a href="https://adblockplus.org/development-builds/new-css-property-filter-syntax">older syntax</a> for the filters is deprecated and will be automatically converted to the new format&nbsp;; the syntax to select the style properties remain the same.}}
+</p>
+<p>
+ {{s121 <code><fix>:-abp-has(selector)</fix></code> will select elements based on their content.}}
+ {{s122 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 matching determine whether the selection occur. It is important that <code><fix>:-abp-has()</fix></code> be applied to a restricted number of elements to avoid performance issues. Like any regular pseudo-class you can combine it with the CSS selector syntax.}}
+</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>
<p>{{generic-specific-explanation-p1 With the <code><fix>$generichide</fix></code> and <code><fix>$genericblock</fix></code> filter options the distinction between generic and specific filters becomes important.}}</p>
<p>{{generic-specific-explanation-p2 We classify a filter to be <strong>specific</strong> if it matches one or more domains or matches a sitekey. If a filter has no domains specified (or only domain exceptions) and no sitekey then it counts as <strong>generic</strong>. For example, <code><fix>example.com##div.textad</fix></code> is a specific filter, whereas both <code><fix>##div.textad</fix></code> and <code><fix>~example.com##div.textad</fix></code> are generic.}}</p>
« 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