Side by Side 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: lastest correctiosn. rebase on master
Created July 17, 2017, 12:46 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
pages/filters.html » ('j')
|
no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| 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 152 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 163 } | 163 } |
| 164 th, td | 164 th, td |
| 165 { | 165 { |
| 166 vertical-align: top; | 166 vertical-align: top; |
| 167 padding: 5px; | 167 padding: 5px; |
| 168 } | 168 } |
| 169 td > p:first-child | 169 td > p:first-child |
| 170 { | 170 { |
| 171 margin-top: 0px; | 171 margin-top: 0px; |
| 172 } | 172 } |
| 173 td > code | |
| 174 { | |
| 175 overflow-wrap: break-word; | |
| 176 } | |
| 173 .syntax | 177 .syntax |
| 174 { | 178 { |
| 175 width: 10%; | 179 width: 10%; |
| 176 } | 180 } |
| 177 .purpose | 181 .purpose |
| 178 { | 182 { |
| 179 width: 45%; | 183 width: 45%; |
| 180 } | 184 } |
| 181 .examples | 185 .examples |
| 182 { | 186 { |
| (...skipping 602 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 785 <tr> | 789 <tr> |
| 786 <td><code>##div[style$="width:300px;height:250px;"]</code></td> | 790 <td><code>##div[style$="width:300px;height:250px;"]</code></td> |
| 787 <td>{{s137 Matches div elements that end the style specified}}</td> | 791 <td>{{s137 Matches div elements that end the style specified}}</td> |
| 788 </tr> | 792 </tr> |
| 789 <tr> | 793 <tr> |
| 790 <td><code>##div[style*="width:300px;height:250px;"]</code></td> | 794 <td><code>##div[style*="width:300px;height:250px;"]</code></td> |
| 791 <td>{{s138 Matches div elements that containing the style specified}}</td> | 795 <td>{{s138 Matches div elements that containing the style specified}}</td> |
| 792 </tr> | 796 </tr> |
| 793 </table> | 797 </table> |
| 794 <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 | |
| 800 <h3 id="elementhideemulation">{{abp-pseudo-select-title Extended CSS selectors ( Adblock Plus specific)}}</h3> | |
| 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> | |
| 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 | |
| 808 <table> | |
| 809 <col class="selector"> | |
| 810 <col class="selectorPurpose"> | |
| 811 <tr> | |
| 812 <th>{{pseudo-class-header Pseudo-class}}</th> | |
| 813 <th>{{s127 Purpose}}</th> | |
| 814 </tr> | |
| 815 <tr> | |
| 816 <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> | |
| 818 </tr> | |
| 819 <tr> | |
| 820 <td><code>:-abp-has()</code></td> | |
| 821 <td>{{abp-has-purpose Select an element if its content subtree match the sel ector specified}}</td> | |
| 822 </tr> | |
| 823 </table> | |
| 824 | |
| 825 <p>{{abp-pseudo-select-explanation-p4 These few examples show how to use these p seudo-selectors.}}</p> | |
| 826 | |
| 827 <table> | |
| 828 <col class="selector"> | |
| 829 <col class="selectorPurpose"> | |
| 830 <tr> | |
| 831 <th>{{s126 Selector}}</th> | |
| 832 <th>{{s127 Purpose}}</th> | |
| 833 </tr> | |
| 834 <tr> | |
| 835 <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> | |
| 837 </tr> | |
| 838 <tr> | |
| 839 <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> | |
| 841 </tr> | |
| 842 <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> | |
| 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> | |
| 845 </tr> | |
| 846 <tr> | |
| 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> | |
| 849 </tr> | |
| 850 <tr> | |
| 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> | |
| 853 </tr> | |
| 854 </table> | |
| 855 | |
| OLD | NEW |
« no previous file with comments
|
« no previous file
|
pages/filters.html » ('j')
|
no next file with comments »
