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

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: Updated Created July 13, 2017, 8:17 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | pages/filters.html » ('j') | pages/filters.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
785 <tr> 789 <tr>
786 <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>
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*=&quot;width:300px;height:250px;&quot;]</code></td> 794 <td><code>##div[style*=&quot;width:300px;height:250px;&quot;]</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>
kzar 2017/07/17 13:44:29 How about this? "In some situations standard CSS
hub 2017/07/17 18:19:13 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
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(&gt; div &gt; 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(&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>
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 &gt; 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 &gt; 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
OLDNEW
« no previous file with comments | « no previous file | pages/filters.html » ('j') | pages/filters.html » ('J')

Powered by Google App Engine
This is Rietveld