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

Delta Between Two Patch Sets: pages/filters.html

Issue 29615667: Issue 6069 - Add documentation for :-abp-contains() selector (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org/
Left Patch Set: Created Nov. 22, 2017, 9:28 p.m.
Right Patch Set: Use the proper dash Created Nov. 30, 2017, 7:28 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 | « pages/filter-cheatsheet.html ('k') | no next file » | 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=Writing Adblock Plus filters 1 title=Writing Adblock Plus filters
2 2
3 3
4 <p>{{s1 Current Adblock Plus versions allow you to "tweak" your filters in many different ways. This document explains the choices that you have and how they ca n be used.}}</p> 4 <p>{{s1 Current Adblock Plus versions allow you to "tweak" your filters in many different ways. This document explains the choices that you have and how they ca n be used.}}</p>
5 5
6 <p>{{s2 <em>Disclaimer</em>: All filter examples given here are really only ex amples and are not meant to be used.}}</p> 6 <p>{{s2 <em>Disclaimer</em>: All filter examples given here are really only ex amples and are not meant to be used.}}</p>
7 7
8 <h2 id="introduction">{{s3 Introduction to Adblock Plus filters}}</h2> 8 <h2 id="introduction">{{s3 Introduction to Adblock Plus filters}}</h2>
9 9
10 <p>{{s4 The options described in this section should be enough for users who h ave to create a filter occasionally.}}</p> 10 <p>{{s4 The options described in this section should be enough for users who h ave to create a filter occasionally.}}</p>
(...skipping 219 matching lines...) Expand 10 before | Expand all | Expand 10 after
230 230
231 <h3 id="elemhide_css">{{s95 Advanced selectors}}</h3> 231 <h3 id="elemhide_css">{{s95 Advanced selectors}}</h3>
232 232
233 <p>{{s97 In general, any CSS selector supported by Firefox can be used for ele ment hiding. For example the following rule will hide anything following a div e lement with class "adheader": <code><fix>##.adheader + *</fix></code>. For a ful l list of CSS list see <a href="{{s97-link http://www.w3.org/TR/css3-selectors/} }">W3C CSS specification</a> (note that not all selectors are supported by Firef ox yet).}} {{advanced-selectors-2 Please keep in mind that browsers are slower t o process these selectors than selectors based on <code><fix>class</fix></code> or <code><fix>id</fix></code> attribute only.}}</p> 233 <p>{{s97 In general, any CSS selector supported by Firefox can be used for ele ment hiding. For example the following rule will hide anything following a div e lement with class "adheader": <code><fix>##.adheader + *</fix></code>. For a ful l list of CSS list see <a href="{{s97-link http://www.w3.org/TR/css3-selectors/} }">W3C CSS specification</a> (note that not all selectors are supported by Firef ox yet).}} {{advanced-selectors-2 Please keep in mind that browsers are slower t o process these selectors than selectors based on <code><fix>class</fix></code> or <code><fix>id</fix></code> attribute only.}}</p>
234 234
235 <p>{{s98 <em>Note</em>: This functionality is for advanced users only, you sho uld be comfortable with CSS selectors to use it. Adblock Plus won't be able to c heck the syntax of the selector you are adding, if you use invalid CSS syntax yo u might break other (valid) rules you have. Check JavaScript Console for CSS err ors.}}</p> 235 <p>{{s98 <em>Note</em>: This functionality is for advanced users only, you sho uld be comfortable with CSS selectors to use it. Adblock Plus won't be able to c heck the syntax of the selector you are adding, if you use invalid CSS syntax yo u might break other (valid) rules you have. Check JavaScript Console for CSS err ors.}}</p>
236 236
237 <h3 id="elemhide-emulation">{{ elemhide-emulation-heading[heading] Extended CSS selectors (Adblock Plus specific) }}</h3> 237 <h3 id="elemhide-emulation">{{ elemhide-emulation-heading[heading] Extended CSS selectors (Adblock Plus specific) }}</h3>
238 238
239 <p> 239 <p>
240 {{ elemhide-emulation-1 Sometimes the standard CSS selectors aren't powerful e nough to hide an advertisement, for those cases we have added some new ones, nam ely <code><fix>:-abp-has()</fix></code>, <code><fix>:-abp-contains()</fix></code > and <code><fix>:-abp-properties()</fix></code> (requires Adblock Plus 1.13.3 f or Chrome and Opera or higher). }} 240 {{ elemhide-emulation-1 Sometimes the standard CSS selectors aren't powerful e nough to hide an advertisement. For those cases we have added some new selectors , namely <code><fix>:-abp-has()</fix></code>, <code><fix>:-abp-contains()</fix>< /code> and <code><fix>:-abp-properties()</fix></code> (requires Adblock Plus 1.1 3.3 or higher for Chrome and Opera). }}
241 </p> 241 </p>
242 <p> 242 <p>
243 {{ elemhide-emulation-2 When writing an element hiding filter that makes use o f these extended selectors you must use the <code><fix>#?#</fix></code> syntax, e.g. <code><fix>example.com#?#selector</fix></code>. But it's important to note that doing so carries a performance impact, so do so sparingly and make sure tho se filters are specific to as few domains and elements as possible. }} 243 {{ elemhide-emulation-2 When writing an element hiding filter that makes use o f these extended selectors you must use the <code><fix>#?#</fix></code> syntax, e.g. <code><fix>example.com#?#selector</fix></code>. But it's important to note that doing so carries a performance impact, so do so sparingly and make sure tho se filters are specific to as few domains and elements as possible. }}
244 </p> 244 </p>
245 <h4>:-abp-properties()</h4> 245 <h4>:-abp-properties()</h4>
246 <p> 246 <p>
247 {{ abp-properties-1 <code><fix>:-abp-properties(properties)</fix></code> will select elements based upon stylesheet properties. For example <code><fix>:-abp-p roperties(width:300px;height:250px;)</fix></code> will select elements that have a corresponding CSS rule in a stylesheet which sets the <code><fix>width</fix>< /code> and <code><fix>height</fix></code> to the values <code><fix>300px</fix></ code> and <code><fix>250px</fix></code> respectively. Property names are matched case-insensitively. Furthermore, wildcards can be used so that <code><fix>:-abp -properties(width:*px;height:250px;)</fix></code> will match any width specified in pixels and a height of 250 pixels. }} 247 {{ abp-properties-1 <code><fix>:-abp-properties(properties)</fix></code> will select elements based upon stylesheet properties. For example <code><fix>:-abp-p roperties(width:300px;height:250px;)</fix></code> will select elements that have a corresponding CSS rule in a stylesheet which sets the <code><fix>width</fix>< /code> and <code><fix>height</fix></code> to the values <code><fix>300px</fix></ code> and <code><fix>250px</fix></code> respectively. Property names are matched case-insensitively. Furthermore, wildcards can be used so that <code><fix>:-abp -properties(width:*px;height:250px;)</fix></code> will match any width specified in pixels and a height of 250 pixels. }}
248 </p> 248 </p>
249 <p> 249 <p>
250 {{ abp-properties-2 You can also use <a href="https://developer.mozilla.org/en -US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a> by su rrounding the properties expression with "/". For example, <code><fix>:-abp-prop erties(/width:30[2-8]px;height:250px;/)</fix></code> will match widths between 3 02 and 308 pixels and a height of 250 pixels. }} 250 {{ abp-properties-2 You can also use <a href="https://developer.mozilla.org/en -US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expressions</a> by su rrounding the properties expression with "/". For example, <code><fix>:-abp-prop erties(/width:30[2-8]px;height:250px;/)</fix></code> will match widths between 3 02 and 308 pixels and a height of 250 pixels. }}
251 </p> 251 </p>
252 <p> 252 <p>
253 {{ abp-properties-3 <em>Note</em>: The <a href="https://adblockplus.org/develo pment-builds/new-css-property-filter-syntax">older syntax</a> for the CSS proper ty filters is deprecated and will be automatically converted to the new format&n bsp;. The syntax to select the style properties remain the same. For example, <c ode><fix>[-abp-properties='width:300px;height:250px;']</fix></code> will be conv erted to <code><fix>:-abp-properties(width:300px;height:250px;)</fix></code>. }} 253 {{ abp-properties-3 <em>Note</em>: The <a href="https://adblockplus.org/develo pment-builds/new-css-property-filter-syntax">older syntax</a> for the CSS proper ty filters is deprecated and will be automatically converted to the new format&n bsp;. The syntax to select the style properties remain the same. For example, <c ode><fix>[-abp-properties='width:300px;height:250px;']</fix></code> will be conv erted to <code><fix>:-abp-properties(width:300px;height:250px;)</fix></code>. }}
254 </p> 254 </p>
255 <h4>:-abp-has()</h4> 255 <h4>:-abp-has()</h4>
256 <p> 256 <p>
257 {{ abp-has-1 <code><fix>:-abp-has(selector)</fix></code> will select elements based on their content. For example <code><fix>:-abp-has(> div > a.advertiser)</ fix></code> will select elements that contain as a direct descendant a <code><fi x>&lt;div&gt;</fix></code> that contains an <code><fix>&lt;a&gt;</fix></code> wi th the class <code><fix>advertiser</fix></code>. The inner selector can be relat ive to the element scope, and can use any of the pseudo-selectors, including <co de><fix>:-abp-has()</fix></code> and will determine whether the selection will o ccur. }} 257 {{ abp-has-1 <code><fix>:-abp-has(selector)</fix></code> will select elements based on their content. For example <code><fix>:-abp-has(> div > a.advertiser)</ fix></code> will select elements that contain as a direct descendant a <code><fi x>&lt;div&gt;</fix></code> that contains an <code><fix>&lt;a&gt;</fix></code> wi th the class <code><fix>advertiser</fix></code>. The inner selector can be relat ive to the element scope, and can use any of the pseudo-selectors, including <co de><fix>:-abp-has()</fix></code> and will determine whether the selection will o ccur. }}
258 </p> 258 </p>
259 <h4>:-abp-contains()</h4> 259 <h4>:-abp-contains()</h4>
260 <p> 260 <p>
261 {{ abp-contains-1 <code><fix>:-abp-contains(text)</fix></code> will select ele ments based on their text content. For example <code><fix>div.sidebar > span:-ab p-contains(Advertisment)</fix></code> will select the <code><fix>&lt;span&gt;</ fix></code> elements within a <code><fix>&lt;div&gt;</fix></code> with a class o f <code><fix>sidebar</fix></code> that contains the word "Advertisment". In prac tice you'd want to combine this with a <code><fix>:-abp-has()</fix></code> to se lect the outer container. Something like <code><fix>div.sidebar > div:-abp-has(s pan:-abp-contains(Advertisment))</fix></code> to select the container that would contain an advertisement label. }} 261 {{ abp-contains-1 <code><fix>:-abp-contains(text)</fix></code> will select ele ments based on their text content. For example, <code><fix>div.sidebar > span:-a bp-contains(Advertisment)</fix></code> will select the <code><fix>&lt;span&gt;< /fix></code> elements within a <code><fix>&lt;div&gt;</fix></code>, with a class of <code><fix>sidebar</fix></code> that contains the word "Advertisment". In pr actice, you'd want to combine this with a <code><fix>:-abp-has()</fix></code> to select the outer container — something like <code><fix>div.sidebar > div:-abp-h as(span:-abp-contains(Advertisment))</fix></code> to select the container that w ould contain an advertisement label. }}
262 </p> 262 </p>
263 263
264 <h3 id="elemhide_exceptions">{{s99 Exception rules}}</h3> 264 <h3 id="elemhide_exceptions">{{s99 Exception rules}}</h3>
265 265
266 <p> 266 <p>
267 {{s100 Exception rules can disable existing rules on particular domains.}} {{s 101 These are mostly 267 {{s100 Exception rules can disable existing rules on particular domains.}} {{s 101 These are mostly
268 useful to filter subscription authors who are extending another filter subscri ption that they 268 useful to filter subscription authors who are extending another filter subscri ption that they
269 cannot change.}} {{s102 For example, the rule <code><fix>##.textad</fix></code > can be 269 cannot change.}} {{s102 For example, the rule <code><fix>##.textad</fix></code > can be
270 disabled on <code><fix>example.com</fix></code> using the exception rule 270 disabled on <code><fix>example.com</fix></code> using the exception rule
271 <code><fix>example.com#@#.textad</fix></code>.}} {{s103 The combination of the se two 271 <code><fix>example.com#@#.textad</fix></code>.}} {{s103 The combination of the se two
(...skipping 24 matching lines...) Expand all
296 {{s110 The data used for creating the signature is a concatenated list of requ est variables (namely URI, host and user agent) separated by the <code><fix>NUL< /fix></code> character "\0". For example:}} 296 {{s110 The data used for creating the signature is a concatenated list of requ est variables (namely URI, host and user agent) separated by the <code><fix>NUL< /fix></code> character "\0". For example:}}
297 </p> 297 </p>
298 298
299 <pre> 299 <pre>
300 /index.html?q=foo\0www.example.com\0Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv :30.0) Gecko/20100101 Firefox/30.0 300 /index.html?q=foo\0www.example.com\0Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv :30.0) Gecko/20100101 Firefox/30.0
301 </pre> 301 </pre>
302 302
303 <p> 303 <p>
304 {{s111 Finally, generate the signature for this string by using the signature algorithm SEC_OID_ISO_SHA_WITH_RSA_SIGNATURE (default when using OpenSSL).}} 304 {{s111 Finally, generate the signature for this string by using the signature algorithm SEC_OID_ISO_SHA_WITH_RSA_SIGNATURE (default when using OpenSSL).}}
305 </p> 305 </p>
LEFTRIGHT

Powered by Google App Engine
This is Rietveld