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: more changes Created July 17, 2017, 6:19 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 In some situations standard CSS selectors are not sufficient, for those cases you can also use the following Adblock Plus specific pseudo-selectors:}}</p>

	803

	804 <table>

	805 <col class="selector">

	806 <col class="selectorPurpose">

	807 <tr>

	808 <th>{{pseudo-class-header Pseudo-class}}</th>

	809 <th>{{s127 Purpose}}</th>

	810 </tr>

	811 <tr>

	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>
	kzar 2017/07/18 10:26:39 I think it should be "...match what's specified", I think it should be "...match what's specified", since you can specify multiple CSS properties. hub 2017/07/18 15:50:17 Done. Show quoted text On 2017/07/18 10:26:39, kzar wrote: > I think it should be "...match what's specified", since you can specify multiple > CSS properties. Done.
	814 </tr>

	815 <tr>

	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>

	818 </tr>

	819 </table>

	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>
	kzar 2017/07/18 10:26:39 A couple of small tweaks: "When writing element h A couple of small tweaks: "When writing element hiding filters that make use of those selectors you must use the #?# syntax (replace ## with #?#) and take case to specify one or more domains. Some examples:" hub 2017/07/18 15:50:17 Done. Show quoted text On 2017/07/18 10:26:39, kzar wrote: > A couple of small tweaks: > > "When writing element hiding filters that make use of those selectors you must > use the #?# syntax (replace ## with #?#) and take case to specify one or more > domains. Some examples:" Done.
	822

	823 <table>

	824 <col class="selector">

	825 <col class="selectorPurpose">

	826 <tr>

	827 <th>{{s126 Selector}}</th>

	828 <th>{{s127 Purpose}}</th>

	829 </tr>

	830 <tr>

	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>

	833 </tr>

	834 <tr>

	835 <td><code>example.com#?#div:-abp-has(> div > 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>

	837 </tr>

	838 <tr>

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

	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>
	kzar 2017/07/18 10:26:39 I think you should add "an" after "descendant.". I think you should add "an" after "descendant.". kzar 2017/07/18 10:26:39 Please break the second example off into its own r Please break the second example off into its own row, I think it makes things confusing having them next to each other. Initially I thought it was one huge example filter! kzar 2017/07/18 10:26:40 I think the part about the selector needs to be ex I think the part about the selector needs to be explained a bit better, right now I found that very confusing. (You wrote a similar explanation for the writing filters page which is much easier to understand IMO.) hub 2017/07/18 15:50:17 Done. Show quoted text On 2017/07/18 10:26:39, kzar wrote: > I think you should add "an" after "descendant.". Done. hub 2017/07/18 15:50:17 Done. Show quoted text On 2017/07/18 10:26:39, kzar wrote: > Please break the second example off into its own row, I think it makes things > confusing having them next to each other. Initially I thought it was one huge > example filter! Done. hub 2017/07/18 15:50:17 ok Show quoted text On 2017/07/18 10:26:40, kzar wrote: > I think the part about the selector needs to be explained a bit better, right > now I found that very confusing. (You wrote a similar explanation for the > writing filters page which is much easier to understand IMO.) ok
	841 </tr>

	842 <tr>

	843 <td><code>example.com#?#div > 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>
	kzar 2017/07/18 10:26:40 Please add "an" before "img", "a" before "width" a Please add "an" before "img", "a" before "width" and "height", and "of" after "width" and "height". (Same for the next example.) hub 2017/07/18 15:50:17 Done. Show quoted text On 2017/07/18 10:26:40, kzar wrote: > Please add "an" before "img", "a" before "width" and "height", and "of" after > "width" and "height". (Same for the next example.) Done.
	845 </tr>

	846 <tr>

	847 <td><code>example.com#?#div > 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>

	849 </tr>

	850 </table>

	851

OLD	NEW

« no previous file with comments | « no previous file | pages/filters.html » ('j') | no next file with comments »