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: lastest correctiosn. rebase on master Created July 17, 2017, 12:46 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>

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