pages/filter-cheatsheet.html - Issue 29482703: Issue 5353 - Add advanced element hiding filters documentation

Delta Between Two Patch Sets: pages/filter-cheatsheet.html

Issue 29482703: Issue 5353 - Add advanced element hiding filters documentation (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org/

Left Patch Set: Updated Created July 13, 2017, 8:17 p.m.

Right Patch Set: Added [header] Created July 28, 2017, 8:03 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 title=Adblock Plus filters explained	1 title=Adblock Plus filters explained

2	2

3 <head>	3 <head>

4 <style type="text/css">	4 <style type="text/css">

5 #content	5 #content

6 {	6 {

7 max-width: none;	7 max-width: none;

8 }	8 }

9	9

10 canvas	10 canvas

(...skipping 779 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
790 <td><code>##div[style$="width:300px;height:250px;"]</code></td>	790 <td><code>##div[style$="width:300px;height:250px;"]</code></td>

791 <td>{{s137 Matches div elements that end the style specified}}</td>	791 <td>{{s137 Matches div elements that end the style specified}}</td>

792 </tr>	792 </tr>

793 <tr>	793 <tr>

794 <td><code>##div[style*="width:300px;height:250px;"]</code></td>	794 <td><code>##div[style*="width:300px;height:250px;"]</code></td>

795 <td>{{s138 Matches div elements that containing the style specified}}</td>	795 <td>{{s138 Matches div elements that containing the style specified}}</td>

796 </tr>	796 </tr>

797 </table>	797 </table>

798 <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 Fi refox can be used for element hiding.}}</p>	798 <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 Fi refox can be used for element hiding.}}</p>

799	799

800 <h3 id="elementhideemulation">{{abp-pseudo-select-title Extended CSS selectors ( Adblock Plus specific)}}</h3>	800 <h3 id="elementhideemulation">{{ abp-pseudo-select-heading[heading] Extended CSS selectors (Adblock Plus specific) }}</h3>

801	801

802 <p>{{abp-pseudo-select-explanation-p1 <code><fix>#?#</fix></code> indicate an ad vanced pseudo-selector rule. Unlike the element hiding rules, these require to b e specific and therefor to have <a href="#elementdomains">domain selection</a> n ot be empty. When used with a valid CSS selector, it will hide the elements dire ctly. All the examples of <a href="#elementselection">element selection</a> abov e apply (replace <code><fix>##</fix></code> with <code><fix>#?#</fix></code>). T hese filters also support advanced pseudo-selector that are Adblock Plus extensi ons to CSS.}}</p>	802 <p>{{ abp-pseudo-select-1 In some situations standard CSS selectors are not suff icient, for those cases you can also use the following Adblock Plus specific pse udo-selectors: }}</p>
kzar 2017/07/17 13:44:29 How about this? "In some situations standard CSS How about this? "In some situations standard CSS selectors are not sufficient, for those cases you can also use the following Adblock Plus specific psuedo-selectors: [Table] When writing element hiding filters that use those you must use the `#?#` syntax (replace ## with #?#). You must also make those such filter specific to one or more domains. Some examples: [Table]" hub 2017/07/17 18:19:13 Done. Show quoted text On 2017/07/17 13:44:29, kzar wrote: > How about this? > > "In some situations standard CSS selectors are not sufficient, for those cases > you can also use the following Adblock Plus specific psuedo-selectors: > > [Table] > > When writing element hiding filters that use those you must use the `#?#` syntax > (replace ## with #?#). You must also make those such filter specific to one or > more domains. Some examples: > > [Table]" Done.
803

804 <p>{{abp-pseudo-select-explanation-p2 This is a new feature in Adblock Plus 1.13 .3 for Chrome and Opera}}.</p>

805

806 <p>{{abp-pseudo-select-explanation-p3 Here are the AdBlock Plus specific pseudo- selectors implemented.}}</p>

807	803

808 <table>	804 <table>

809 <col class="selector">	805 <col class="selector">

810 <col class="selectorPurpose">	806 <col class="selectorPurpose">

811 <tr>	807 <tr>

812 <th>{{pseudo-class-header Pseudo-class}}</th>	808 <th>{{ pseudo-class-header[header] Pseudo-class }}</th>

813 <th>{{s127 Purpose}}</th>	809 <th>{{ s127 Purpose }}</th>

814 </tr>	810 </tr>

815 <tr>	811 <tr>

816 <td><code>:-abp-properties()</code></td>	812 <td><code>:-abp-properties()</code></td>

817 <td>{{abp-properties-purpose Select an element if its CSS style properties m atch the one specified}}</td>	813 <td>{{ abp-properties-purpose Select an element if its CSS style properties match what's specified }}</td>

818 </tr>	814 </tr>

819 <tr>	815 <tr>

820 <td><code>:-abp-has()</code></td>	816 <td><code>:-abp-has()</code></td>

821 <td>{{abp-has-purpose Select an element if its content subtree match the sel ector specified}}</td>	817 <td>{{ abp-has-purpose Select an element if its content subtree match the se lector specified }}</td>

822 </tr>	818 </tr>

823 </table>	819 </table>

824	820

825 <p>{{abp-pseudo-select-explanation-p4 These few examples show how to use these p seudo-selectors.}}</p>	821 <p>{{ abp-pseudo-select-2 When writing element hiding filters that make use thos e you must use the <code>#?#</code> syntax (replace <code>##</code> with <code># ?#</code>) and take care to specify one or more domains. Some examples: }}</p>

826	822

827 <table>	823 <table>

828 <col class="selector">	824 <col class="selector">

829 <col class="selectorPurpose">	825 <col class="selectorPurpose">

830 <tr>	826 <tr>

831 <th>{{s126 Selector}}</th>	827 <th>{{ s126 Selector }}</th>

832 <th>{{s127 Purpose}}</th>	828 <th>{{ s127 Purpose }}</th>

833 </tr>	829 </tr>

834 <tr>	830 <tr>

835 <td><code>example.com#?#div:-abp-properties(width:300px;height:250px;)</code ></td>	831 <td><code>example.com#?#div:-abp-properties(width:300px;height:250px;)</code ></td>

836 <td>{{abp-properties-example1 Matches <code><fix>div</fix></code> elements w hose style contain the specified properties}}</td>	832 <td>{{ abp-properties-example Matches <code><fix>div</fix></code> elements w hose style contain the specified properties }}</td>

837 </tr>	833 </tr>

838 <tr>	834 <tr>

839 <td><code>example.com#?#div:-abp-has(> div > img.advert)</code></td>	835 <td><code>example.com#?#div:-abp-has(> div > img.advert)</code></td>

840 <td>{{abp-has-example1 Matches <code><fix>div</fix></code> elements that con tain as a direct descendant a <code><fix>div</fix></code> containing an <code><f ix>img</fix></code> with the class "advert"}}</td>	836 <td>{{ abp-has-example1 Matches <code><fix>div</fix></code> elements that co ntain as a direct descendant a <code><fix>div</fix></code> element whose direct descendant is an <code><fix>img</fix></code> with the class "advert" }}</td>

841 </tr>	837 </tr>

842 <tr>	838 <tr>

843 <td><code>example.com#?#div:-abp-has(> div > img:-abp-properties(width :300px;height:250px;))</code><br><code>example.com#?#div:-abp-has(> div > img:-abp-properties(WidTh:300px;hEigHt:250px;))</code></td>	839 <td><code>example.com#?#div:-abp-has(> div > img:-abp-properties(width :300px;height:250px;))</code></td>

844 <td>{{abp-has-example2 Both these filters match <code><fix>div</fix></code> elements that contain as a direct descendant element matching the selector: a <c ode><fix>div</fix></code> that has a child <code><fix>img</fix></code> whose sty le properties contain the specified properties. The CSS properties are checked c ase-insensitively}}</td>	840 <td>{{ abp-has-example2 Matches <code><fix>div</fix></code> elements that co ntain as a direct descendant a <code><fix>div</fix></code> element whose direct descendant is an <code><fix>img</fix></code> element whose style properties cont ain the specified properties, a <code><fix>width</fix></code> of 300 pixels and an <code><fix>height</fix></code> of 250 pixels }}</td>

	841 </tr>

	842 <tr>

	843 <td><code>example.com#?#div:-abp-has(> div > img:-abp-properties(WidTh :300px;hEigHt:250px;))</code></td>

	844 <td>{{ abp-has-example3 Since the CSS properties are matched case-insensitiv ely, this filter matches the same thing as above }}</td>

845 </tr>	845 </tr>

846 <tr>	846 <tr>

847 <td><code>example.com#?#div > img:-abp-properties(width:*px;height:250px; )</code></td>	847 <td><code>example.com#?#div > img:-abp-properties(width:*px;height:250px; )</code></td>

848 <td>By using a wildcard <code>*</code>, this filter matches <code>img</code> whose CSS style properties have <code>width</code> specified in pixels and <cod e>height</code> of 250 pixels</td>	848 <td>{{ abp-properties-example1 By using a wildcard <code>*</code>, this filt er matches an <code>img</code> whose CSS style properties have a <code>width</co de> specified in pixels and a <code>height</code> of 250 pixels }}</td>

849 </tr>	849 </tr>

850 <tr>	850 <tr>

851 <td><code>example.com#?#div > img:-abp-properties(/width: 3[2-8]px;/)</co de></td>	851 <td><code>example.com#?#div > img:-abp-properties(/width: 3[2-8]px;/)</co de></td>

852 <td>By using a regular expression, this filter matches <code>img</code> whos e CSS style properties have <code>width</code> between 32 and 38 pixels</td>	852 <td>{{ abp-properties-example2 By using a regular expression, this filter ma tches an <code>img</code> whose CSS style properties have a <code>width</code> b etween 32 and 38 pixels }}</td>

853 </tr>	853 </tr>

854 </table>	854 </table>

855	855

LEFT	RIGHT