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

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: more updates Created July 17, 2017, 6:15 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
« no previous file with change/comment | « no previous file | pages/filters.html » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
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
790 <td><code>##div[style$=&quot;width:300px;height:250px;&quot;]</code></td> 790 <td><code>##div[style$=&quot;width:300px;height:250px;&quot;]</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*=&quot;width:300px;height:250px;&quot;]</code></td> 794 <td><code>##div[style*=&quot;width:300px;height:250px;&quot;]</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 In some situations standard CSS selectors are not sufficient, for those cases you can also use the following Adblock Plus specific pseudo-selectors:}}</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 803
804 <table> 804 <table>
805 <col class="selector"> 805 <col class="selector">
806 <col class="selectorPurpose"> 806 <col class="selectorPurpose">
807 <tr> 807 <tr>
808 <th>{{pseudo-class-header Pseudo-class}}</th> 808 <th>{{ pseudo-class-header[header] Pseudo-class }}</th>
809 <th>{{s127 Purpose}}</th> 809 <th>{{ s127 Purpose }}</th>
810 </tr> 810 </tr>
811 <tr> 811 <tr>
812 <td><code>:-abp-properties()</code></td> 812 <td><code>:-abp-properties()</code></td>
813 <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>
814 </tr> 814 </tr>
815 <tr> 815 <tr>
816 <td><code>:-abp-has()</code></td> 816 <td><code>:-abp-has()</code></td>
817 <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>
818 </tr> 818 </tr>
819 </table> 819 </table>
820 820
821 <p>{{abp-pseudo-select-explanation-p2 When writing element hiding filters that u se those you must use the <code>#?#</code> syntax (replace <code>##</code> with <code>#?#</code>). You must also make those such filter specific to one or more domains. Some examples:}}</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>
822 822
823 <table> 823 <table>
824 <col class="selector"> 824 <col class="selector">
825 <col class="selectorPurpose"> 825 <col class="selectorPurpose">
826 <tr> 826 <tr>
827 <th>{{s126 Selector}}</th> 827 <th>{{ s126 Selector }}</th>
828 <th>{{s127 Purpose}}</th> 828 <th>{{ s127 Purpose }}</th>
829 </tr> 829 </tr>
830 <tr> 830 <tr>
831 <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>
832 <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>
833 </tr> 833 </tr>
834 <tr> 834 <tr>
835 <td><code>example.com#?#div:-abp-has(&gt; div &gt; img.advert)</code></td> 835 <td><code>example.com#?#div:-abp-has(&gt; div &gt; img.advert)</code></td>
836 <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>
837 </tr> 837 </tr>
838 <tr> 838 <tr>
839 <td><code>example.com#?#div:-abp-has(&gt; div &gt; img:-abp-properties(width :300px;height:250px;))</code><br><code>example.com#?#div:-abp-has(&gt; div &gt; img:-abp-properties(WidTh:300px;hEigHt:250px;))</code></td> 839 <td><code>example.com#?#div:-abp-has(&gt; div &gt; img:-abp-properties(width :300px;height:250px;))</code></td>
840 <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(&gt; div &gt; 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>
841 </tr> 845 </tr>
842 <tr> 846 <tr>
843 <td><code>example.com#?#div &gt; img:-abp-properties(width:*px;height:250px; )</code></td> 847 <td><code>example.com#?#div &gt; img:-abp-properties(width:*px;height:250px; )</code></td>
844 <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>
845 </tr> 849 </tr>
846 <tr> 850 <tr>
847 <td><code>example.com#?#div &gt; img:-abp-properties(/width: 3[2-8]px;/)</co de></td> 851 <td><code>example.com#?#div &gt; img:-abp-properties(/width: 3[2-8]px;/)</co de></td>
848 <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>
849 </tr> 853 </tr>
850 </table> 854 </table>
851 855
LEFTRIGHT
« no previous file | pages/filters.html » ('j') | Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Toggle Comments ('s')

Powered by Google App Engine
This is Rietveld