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

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

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>
	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

	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') | pages/filters.html » ('J')