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

Unified Diff: pages/filter-cheatsheet.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 | « no previous file | pages/filters.html » ('j') | pages/filters.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pages/filter-cheatsheet.html
===================================================================
--- a/pages/filter-cheatsheet.html
+++ b/pages/filter-cheatsheet.html
@@ -165,16 +165,20 @@
{
vertical-align: top;
padding: 5px;
}
td > p:first-child
{
margin-top: 0px;
}
+ td > code
+ {
+ overflow-wrap: break-word;
+ }
.syntax
{
width: 10%;
}
.purpose
{
width: 45%;
}
@@ -787,8 +791,59 @@
<td>{{s137 Matches div elements that end the style specified}}</td>
</tr>
<tr>
<td><code>##div[style*=&quot;width:300px;height:250px;&quot;]</code></td>
<td>{{s138 Matches div elements that containing the style specified}}</td>
</tr>
</table>
<p>{{s139 The above filters are only examples of valid element hiding rules. Any <a href="http://www.w3.org/TR/css3-selectors/">CSS selector</a> supported by Firefox can be used for element hiding.}}</p>
+
+<h2 id="elementhideemulation">{{adv-elemhiding-title Advanced element hiding}}</h2>
+
+<p>{{adv-elemhiding-explanation-p1 <code><fix>#?#</fix></code> indicate an advanced element hiding rule. Unlike the element hiding rules, these require to be specific and therefor to have <a href="#elementdomains">domain selection</a> not be empty. When used with a valid CSS selector, it will hide the elements directly. All the examples of <a href="#elementselection">element selection</a> above apply (replace <code><fix>##</fix></code> with <code><fix>#?#</fix></code>). These filters also support advanced element selection that are Adblock Plus extensions to CSS.}}</p>
+
+<p>{{adv-elemhiding-explanation-p2 This is a new feature in Adblock Plus 1.13.3 for Chrome and Opera}}.</p>
+
+<h3>{{adv-elemselect-title Advanced element selection}}</h3>
+
+<p>{{adv-elemselect-explanation-p1 Here are the pseudo-classes implemented for the advanced element selection}}</p>
+
+<table>
+ <col class="selector">
+ <col class="selectorPurpose">
+ <tr>
+ <th>{{pseudo-class-header Pseudo-class}}</th>
+ <th>{{s127 Purpose}}</th>
+ </tr>
+ <tr>
+ <td><code>:-abp-properties()</code></td>
+ <td>{{abp-properties-purpose Select an element if its CSS style properties match the one specified}}</td>
+ </tr>
+ <tr>
+ <td><code>:-abp-has()</code></td>
+ <td>{{abp-has-purpose Select an element if its content subtree match the selector specified}}</td>
+ </tr>
+</table>
+
+<p>{{adv-elemselect-explanation-p2 These few examples show how to use the pseudo-class form of the advanced element selection}}</p>
+
+<table>
+ <col class="selector">
+ <col class="selectorPurpose">
+ <tr>
+ <th>{{s126 Selector}}</th>
+ <th>{{s127 Purpose}}</th>
+ </tr>
+ <tr>
+ <td><code>#?#div:-abp-properties(width:300px;height:250px;)</code></td>
+ <td>{{abp-properties-example1 Matches <code><fix>div</fix></code> elements whose style contain the specified properties}}</td>
+ </tr>
+ <tr>
+ <td><code>#?#div:-abp-has(> div > img.advert)</code></td>
+ <td>{{abp-has-example1 Matches <code><fix>div</fix></code> elements that contain as a direct descendant a <code><fix>div</fix></code> containing an <code><fix>img</fix></code> with the class "advert"}}</td>
+ </tr>
+ <tr>
+ <td><code>#?#div:-abp-has(> div > img:-abp-properties(width:300px;height:250px;))</code></td>
+ <td>{{abp-has-example2 Matches <code><fix>div</fix></code> elements that contain as a direct descendant element matching the selector: a <code><fix>div</fix></code> that has a child <code><fix>img</fix></code> whose style properties contain the specified properties}}</td>
+ </tr>
+</table>
+
« no previous file with comments | « no previous file | pages/filters.html » ('j') | pages/filters.html » ('J')

Powered by Google App Engine
This is Rietveld