changeset
(merge)
Mon, 27 Aug 2012 17:50:16 +0200
- author
- Bert Bos <bert@w3.org>
- date
- Mon, 27 Aug 2012 17:50:16 +0200
- changeset 6578
- 0d07002aa2e9
- parent 6577
- 39813b8a4b36
- parent 6569
- 590c03978e93
- child 6579
- e00229e97dcb
(merge)
1.1 --- a/css-variables/Overview.html Mon Aug 27 17:46:13 2012 +0200 1.2 +++ b/css-variables/Overview.html Mon Aug 27 17:50:16 2012 +0200 1.3 @@ -22,15 +22,15 @@ 1.4 1.5 <h1>CSS Variables Module Level 1</h1> 1.6 1.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 June 2012</h2> 1.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 August 2012</h2> 1.9 1.10 <dl> 1.11 <dt>This version: 1.12 - <!--<dd><a href="http://www.w3.org/TR/2012/WD-css-variables-20120615/">http://www.w3.org/TR/2012/ED-css-variables-20120615/</a>--> 1.13 + <!--<dd><a href="http://www.w3.org/TR/2012/WD-css-variables-20120824/">http://www.w3.org/TR/2012/ED-css-variables-20120824/</a>--> 1.14 1.15 1.16 <dd><a href="http://dev.w3.org/csswg/css-variables/">Editor's draft</a> 1.17 - (version of 15 June 2012) 1.18 + (version of 24 August 2012) 1.19 1.20 <dt>Latest version: 1.21 1.22 @@ -137,34 +137,17 @@ 1.23 </ul> 1.24 1.25 <li><a href="#defining-variables"><span class=secno>2. </span> Defining 1.26 - Variables With Variable Properties</a> 1.27 + Custom Properties: the ‘<code class=css>var-*</code>’ family of 1.28 + properties</a> 1.29 1.30 <li><a href="#using-variables"><span class=secno>3. </span> Using 1.31 - Variables</a> 1.32 + Variables - the ‘<code class=css>var()</code>’ notation</a> 1.33 <ul class=toc> 1.34 - <li><a href="#var-glyph"><span class=secno>3.1. </span> The $ Prefix</a> 1.35 - 1.36 - 1.37 - <li><a href="#var-function"><span class=secno>3.2. </span> Default 1.38 - Values - the ‘<code class=css>var()</code>’ notation</a> 1.39 - 1.40 - <li><a href="#parent-var-notation"><span class=secno>3.3. </span> 1.41 - Getting the Parent's Variable - the ‘<code 1.42 - class=css>parent-var()</code>’ notation</a> 1.43 - 1.44 - <li><a href="#using-invalid-variables"><span class=secno>3.4. </span> 1.45 + <li><a href="#using-invalid-variables"><span class=secno>3.1. </span> 1.46 Using Invalid Variables</a> 1.47 </ul> 1.48 1.49 <li><a href="#cssom"><span class=secno>4. </span> CSSOM</a> 1.50 - <ul class=toc> 1.51 - <li><a href="#cssom-cssvariable"><span class=secno>4.1. </span> 1.52 - Interface CSSVariableComponentValue</a> 1.53 - 1.54 - <li><a href="#cssstyledeclaration-interface"><span class=secno>4.2. 1.55 - </span> Additions to the <code>CSSStyleDeclaration</code> Interface</a> 1.56 - 1.57 - </ul> 1.58 1.59 <li><a href="#conformance"><span class=secno>5. </span> Conformance</a> 1.60 <ul class=toc> 1.61 @@ -215,16 +198,16 @@ 1.62 across multiple files), and may not be amenable to Find-and-Replace. 1.63 1.64 <p> This module introduces a family of custom author-defined properties 1.65 - known collectively as <a href="#variable-property"><i>variable 1.66 + known collectively as <a href="#custom-property"><i>custom 1.67 properties</i></a>, which allow an author to assign arbitrary values to a 1.68 property with an author-chosen name, and <a 1.69 href="#variable"><i>variables</i></a>, which allow an author to then use 1.70 those values in other properties elsewhere in the document. This makes it 1.71 easier to read large files, as seemingly-arbitrary values now have 1.72 informative names, and makes editing such files much easier and less 1.73 - error-prone, as one only has to change the value once, at the variable 1.74 - definition site, and the change will propagate to all uses of that 1.75 - variable automatically. 1.76 + error-prone, as one only has to change the value once, in the <a 1.77 + href="#custom-property"><i>custom property</i></a>, and the change will 1.78 + propagate to all uses of that variable automatically. 1.79 1.80 <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> 1.81 1.82 @@ -245,12 +228,13 @@ 1.83 when combined with this module, expands the definition of the 1.84 <color> value type as used in this specification. 1.85 1.86 - <h2 id=defining-variables><span class=secno>2. </span> Defining Variables 1.87 - With Variable Properties</h2> 1.88 + <h2 id=defining-variables><span class=secno>2. </span> Defining Custom 1.89 + Properties: the ‘<a href="#var-"><code class=css>var-*</code></a>’ 1.90 + family of properties</h2> 1.91 1.92 <p> This specification defines an open-ended set of properties called <a 1.93 - href="#variable-property"><i>variable properties</i></a>, which are used 1.94 - to define <a href="#variable"><i>variables</i></a>. 1.95 + href="#custom-property"><i>custom properties</i></a>, which are used to 1.96 + define <a href="#variable"><i>variables</i></a>. 1.97 1.98 <table class=propdef> 1.99 <tbody> 1.100 @@ -262,7 +246,7 @@ 1.101 <tr> 1.102 <th>Values: 1.103 1.104 - <td><a href="#value-type"><var><value></var></a> 1.105 + <td><var><value></var> 1.106 1.107 <tr> 1.108 <th>Initial: 1.109 @@ -291,53 +275,61 @@ 1.110 <td>all 1.111 </table> 1.112 1.113 - <p> The <dfn id=value-type><var><value></var></dfn> type used in the 1.114 - syntax above is defined as anything matching the "value" production in <a 1.115 - href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS 2.1 Chapter 1.116 - 4.1</a> <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 1.117 - This puts almost no restrictions on what kinds of values you can store in 1.118 - variables. Obviously, any valid property value or component of a property 1.119 - is allowed. Additionally, this allows things that aren't yet valid CSS, 1.120 - like unknown keywords or functions, blocks, at-rules, and other kinds of 1.121 - custom micro-syntaxes like what's allowed in calc(). There <em>are</em> 1.122 - still rules, however; for example, unbalanced parentheses are invalid. 1.123 + <p> A <dfn id=custom-property 1.124 + title="custom property|custom properties">custom property</dfn> is any 1.125 + property whose name is composed of "var-" followed by an 1.126 + <code><ident></code> <a href="#CSS3VAL" 1.127 + rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> <a 1.128 + href="#custom-property"><i>Custom properties</i></a> are solely for use by 1.129 + authors and users; CSS will never give them a meaning beyond what is 1.130 + presented here. 1.131 1.132 - <p> The term <dfn id=variable-property 1.133 - title="variable property|variables properties">variable property</dfn> 1.134 - refers to any property whose name is composed of a "var-" prefix followed 1.135 - by something matching the IDENT production in <a 1.136 - href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS2.1 Chapter 1.137 - 4</a>. A <a href="#variable-property"><i>variable property</i></a> defines 1.138 - a value for a corresponding <a href="#variable"><i>variable</i></a> with 1.139 - the same name as the property except that the "var-" prefix is replaced 1.140 - with a "$" prefix. 1.141 + <p> <a href="#custom-property"><i>Custom properties</i></a> have an 1.142 + extremely permissive value grammar, defined as the "value" production in 1.143 + <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS 2.1 1.144 + Chapter 4.1</a> <a href="#CSS21" 1.145 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. This implies that any valid 1.146 + CSS value can be used, but it's much wider than that. Roughly, anything 1.147 + can be used except for unclosed quotes, parens, braces, or square 1.148 + brackets, or any character that would normally end a declaration (a 1.149 + top-level semicolon or close brace). 1.150 1.151 - <p> The initial value of a <a href="#variable-property"><i>variable 1.152 - property</i></a> is an empty invalid value. This means that, until a <a 1.153 - href="#variable-property"><i>variable property</i></a> is explicitly 1.154 - defined otherwise by a style sheet, it defines an <a 1.155 - href="#invalid-variable"><i>invalid variable</i></a> 1.156 + <p class=issue> This should be defined as "any sequence of tokens that can 1.157 + be parsed, starting from the ‘<code class=css>declarative-value 1.158 + mode</code>’ in Syntax, without switching out of that mode". 1.159 1.160 - <p class=issue> As defined here, the syntax for variable usage is different 1.161 - from the syntax for variable definition (i.e. var-foo for definition, $foo 1.162 - for usage). It might be nice to have the syntaxes match, using "$foo" as 1.163 - the property name as well. This would require a minor change in the Core 1.164 - Grammar. 1.165 + <p class=note> Note: Custom properties can contain a trailing ‘<code 1.166 + class=css>!important</code>’, but this is automatically removed from the 1.167 + property's value by the CSS parser, and makes the custom property 1.168 + "important" in the CSS cascade. 1.169 1.170 - <p> <a href="#variable-property"><i>Variable properties</i></a> are defined 1.171 - to be valid but meaningless as they are meant solely for allowing authors 1.172 - to pass custom data around their page, similar to the <a 1.173 - href="http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes">custom 1.174 - data attributes</a> in HTML. Other specifications and user agents must not 1.175 - assign a particular meaning to <a href="#variable-property"><i>variable 1.176 - properties</i></a> or attach a specific effect to them beyond the bare 1.177 - minimum that comes from them being valid properties. 1.178 + <p> There are an infinity of <a href="#custom-property"><i>custom 1.179 + properties</i></a>, but the initial value of a <a 1.180 + href="#custom-property"><i>custom property</i></a> is an empty invalid 1.181 + value. This means that, until a <a href="#custom-property"><i>custom 1.182 + property</i></a> is explicitly defined otherwise by a style sheet, it 1.183 + defines an <a href="#invalid-variable"><i>invalid variable</i></a>. 1.184 1.185 - <p> For each <a href="#variable-property"><i>variable property</i></a>, 1.186 - there is an associated variable with the same name save for the "var-" 1.187 - prefix. For example, a variable property named "var-foo" is associated 1.188 - with the variable named "foo". See the next chapter for details on how to 1.189 - use variables. 1.190 + <p> The primary purpose of <a href="#custom-property"><i>custom 1.191 + properties</i></a> is to define <a href="#variable"><i>variables</i></a>. 1.192 + In CSS, a <dfn id=variable>variable</dfn> is a value that can be 1.193 + substituted into other properties, allowing authors to "abstract" parts of 1.194 + their page's CSS out. Every <a href="#custom-property"><i>custom 1.195 + property</i></a> defines a corresponding <a 1.196 + href="#variable"><i>variable</i></a> with the same name, minus the "var-" 1.197 + prefix. For example, the custom property ‘<code 1.198 + class=property>var-foo</code>’ defines a variable named ‘<code 1.199 + class=css>foo</code>’. See the next chapter for details on how to use 1.200 + variables. 1.201 + 1.202 + <p> <a href="#custom-property"><i>Custom properties</i></a> can be put to 1.203 + several other uses, of course. For example, they can be used to 1.204 + conveniently attach values to elements so that JavaScript can later use 1.205 + those values. Another example is providing "custom CSS" by treating "var-" 1.206 + as a kind of "author prefix" (similar to a vendor prefix) that allows an 1.207 + author to write custom CSS properties without having them thrown away as 1.208 + invalid by the CSS parser, and then having JavaScript come along afterward 1.209 + to actually implement the functionality. 1.210 1.211 <div class=example> 1.212 <p> This style rule: 1.213 @@ -347,13 +339,13 @@ 1.214 var-header-color: #06c; 1.215 }</pre> 1.216 1.217 - <p> declares a <a href="#variable-property"><i>variable property</i></a> 1.218 - named "var-header-color" on the root element, and assigns to it the value 1.219 + <p> declares a <a href="#custom-property"><i>custom property</i></a> named 1.220 + "var-header-color" on the root element, and assigns to it the value 1.221 "#06c". This property is then inherited to the elements in the rest of 1.222 the document. Its value can be referenced via the "header-color" 1.223 variable: 1.224 1.225 - <pre>h1 { background-color: $header-color; }</pre> 1.226 + <pre>h1 { background-color: var(header-color); }</pre> 1.227 1.228 <p> The preceding rule is equivalent to writing ‘<code 1.229 class=css>background-color: #06c;</code>’, except that the variable 1.230 @@ -363,53 +355,65 @@ 1.231 class=property>var-header-color</code>’ property on the root element. 1.232 </div> 1.233 1.234 - <p> Variable properties are ordinary properties, so they can be declared on 1.235 + <p> Custom properties are ordinary properties, so they can be declared on 1.236 any element, are resolved with the normal inheritance and cascade rules, 1.237 can be made conditional with ‘<code class=css>@media</code>’ and other 1.238 conditional rules, can be used in HTML's <code>style</code> attribute, can 1.239 be read or set using the CSSOM, etc.. 1.240 1.241 <div class=example> 1.242 - <p> If a <a href="#variable-property"><i>variable property</i></a> is 1.243 - declared multiple times, the standard cascade rules help resolve it. 1.244 - Variables always draw from the computed value of the associated variable 1.245 - property on the same element: 1.246 + <p> If a <a href="#custom-property"><i>custom property</i></a> is declared 1.247 + multiple times, the standard cascade rules help resolve it. Variables 1.248 + always draw from the computed value of the associated custom property on 1.249 + the same element: 1.250 1.251 - <pre> 1.252 -:root { var-color: blue; } 1.253 -div { var-color: green; } 1.254 -#alert { var-color: red; } 1.255 -* { color: $color; } 1.256 - 1.257 -<p>I inherited blue from the root element!</p> 1.258 -<div>I got green set directly on me!</div> 1.259 -<div id='alert'> 1.260 - While I got red set directly on me! 1.261 - <p>I'm red too, because of inheritance!</p> 1.262 -</div></pre> 1.263 + <pre><!-- 1.264 + -->:root { var-color: blue; } 1.265 +<!-- 1.266 + -->div { var-color: green; } 1.267 +<!-- 1.268 + -->#alert { var-color: red; } 1.269 +<!-- 1.270 + -->* { color: var(color); } 1.271 +<!-- 1.272 + --> 1.273 +<!-- 1.274 + --><p>I inherited blue from the root element!</p> 1.275 +<!-- 1.276 + --><div>I got green set directly on me!</div> 1.277 +<!-- 1.278 + --><div id='alert'> 1.279 +<!-- 1.280 + --> While I got red set directly on me! 1.281 +<!-- 1.282 + --> <p>I'm red too, because of inheritance!</p> 1.283 +<!-- 1.284 + --></div></pre> 1.285 </div> 1.286 1.287 - <p> <a href="#variable-property"><i>Variable properties</i></a> may use 1.288 + <p> <a href="#custom-property"><i>Custom properties</i></a> may use 1.289 variables in their own values to build up composite variables. This can 1.290 create cyclic dependencies where two or more <a 1.291 - href="#variable-property"><i>variable properties</i></a> each attempt to 1.292 - use the variable that the other defines; doing so makes all the <a 1.293 - href="#variable-property"><i>variable properties</i></a> involved in the 1.294 - cycle compute to their initial value (which is a guaranteed-invalid 1.295 - value). 1.296 + href="#custom-property"><i>custom properties</i></a> each attempt to use 1.297 + the variable that the other defines; doing so makes all the <a 1.298 + href="#custom-property"><i>custom properties</i></a> involved in the cycle 1.299 + compute to their initial value (which is a guaranteed-invalid value). 1.300 1.301 <div class=example> 1.302 - <p> This example shows a variable property safely using a variable: 1.303 + <p> This example shows a custom property safely using a variable: 1.304 1.305 - <pre> 1.306 -:root { 1.307 - var-main-color: #c06; 1.308 - var-accent-background: linear-gradient(to top, $main-color, white); 1.309 -}</pre> 1.310 + <pre><!-- 1.311 + -->:root { 1.312 +<!-- 1.313 + --> var-main-color: #c06; 1.314 +<!-- 1.315 + --> var-accent-background: linear-gradient(to top, var(main-color), white); 1.316 +<!-- 1.317 + -->}</pre> 1.318 1.319 <p> The ‘<code class=property>var-accent-background</code>’ property 1.320 (along with any other properties that use ‘<code 1.321 - class=css>$main-color</code>’) will automatically update when the 1.322 + class=css>var(main-color)</code>’) will automatically update when the 1.323 ‘<code class=property>var-main-color</code>’ property is changed. 1.324 </div> 1.325 1.326 @@ -417,11 +421,14 @@ 1.327 <p> On the other hand, this example shows an invalid instance of variables 1.328 depending on each other: 1.329 1.330 - <pre> 1.331 -:root { 1.332 - var-one: calc($two + 20px); 1.333 - var-two: calc($one - 20px); 1.334 -}</pre> 1.335 + <pre><!-- 1.336 + -->:root { 1.337 +<!-- 1.338 + --> var-one: calc(var(two) + 20px); 1.339 +<!-- 1.340 + --> var-two: calc(var(one) - 20px); 1.341 +<!-- 1.342 + -->}</pre> 1.343 1.344 <p> Both ‘<code class=property>var-one</code>’ and ‘<code 1.345 class=property>var-two</code>’ now define <a 1.346 @@ -429,24 +436,27 @@ 1.347 lengths. 1.348 </div> 1.349 1.350 - <p> It is important to note that <a href="#variable-property"><i>variable 1.351 + <p> It is important to note that <a href="#custom-property"><i>custom 1.352 properties</i></a> resolve any <a href="#variable"><i>variables</i></a> in 1.353 their values at computed-value time, which occurs <em>before</em> the 1.354 value is inherited. In general, cyclic dependencies occur only when 1.355 - multiple variable properties on the same element refer to each other; 1.356 - variable properties defined on elements higher in the element tree can 1.357 - never cause a cyclic reference with properties defined on elements lower 1.358 - in the element tree. 1.359 + multiple custom properties on the same element refer to each other; custom 1.360 + properties defined on elements higher in the element tree can never cause 1.361 + a cyclic reference with properties defined on elements lower in the 1.362 + element tree. 1.363 1.364 <div class=example> 1.365 - <p> For example, given the following structure, these variable properties 1.366 + <p> For example, given the following structure, these custom properties 1.367 are <strong>not</strong> cyclic, and all define valid variables: 1.368 1.369 - <pre> 1.370 -<one><two><three /></two></one> 1.371 -one { var-foo: 10px; } 1.372 -two { var-bar: calc($foo + 10px); } 1.373 -three { var-foo: calc($bar + 10px); }</pre> 1.374 + <pre><!-- 1.375 + --><one><two><three /></two></one> 1.376 +<!-- 1.377 + -->one { var-foo: 10px; } 1.378 +<!-- 1.379 + -->two { var-bar: calc(var(foo) + 10px); } 1.380 +<!-- 1.381 + -->three { var-foo: calc(var(bar) + 10px); }</pre> 1.382 1.383 <p> The <one> element defines a value for ‘<code 1.384 class=property>var-foo</code>’. The <two> element inherits this 1.385 @@ -491,14 +501,17 @@ 1.386 gggggg 1.387 --> 1.388 1.389 - <h2 id=using-variables><span class=secno>3. </span> Using Variables</h2> 1.390 + <h2 id=using-variables><span class=secno>3. </span> Using Variables - the 1.391 + ‘<code class=css>var()</code>’ notation</h2> 1.392 1.393 - <p> A <dfn id=variable>variable</dfn> allows the value of a <a 1.394 - href="#variable-property"><i>variable property</i></a> on an element to be 1.395 - substituted into another property on the element. There are several ways 1.396 - to use variables: by name, via the ‘<code class=css>var()</code>’ 1.397 - notation, or via the ‘<code class=css>parent-var()</code>’ notation to 1.398 - get at a variable on the element's parent. 1.399 + <p> Every <a href="#custom-property"><i>custom property</i></a> 1.400 + automatically defines a corresponding <a 1.401 + href="#variable"><i>variable</i></a>, which can then be substituted into 1.402 + another property with the ‘<code class=css>var()</code>’ function. The 1.403 + syntax of ‘<code class=css>var()</code>’ is: 1.404 + 1.405 + <pre><dfn 1.406 + id=default-var-type><variable></dfn> = var( <var>variable-name</var> [, <var><value></var> ]? )</pre> 1.407 1.408 <p> A variable can be used in place of any component value in any property 1.409 on an element. Variables can not be used as property names, selectors, or 1.410 @@ -507,6 +520,54 @@ 1.411 attribute selector, produces a valid value that nonetheless has no 1.412 relation to the variable of that name. 1.413 1.414 + <div class=example> 1.415 + <p> For example, the following code incorrectly attempts to use a variable 1.416 + as a property name: 1.417 + 1.418 + <pre><!-- 1.419 + -->.foo { 1.420 +<!-- 1.421 + --> var-side: margin-top; 1.422 +<!-- 1.423 + --> var(side): 20px; 1.424 +<!-- 1.425 + -->}</pre> 1.426 + 1.427 + <p> This is <em>not</em> equivalent to setting ‘<code 1.428 + class=css>margin-top: 20px;</code>’. Instead, the second declaration is 1.429 + simply thrown away as a syntax error for having an invalid property name. 1.430 + 1.431 + 1.432 + <p> Similarly, you can't build up a single component value where part of 1.433 + it is provided by a variable: 1.434 + 1.435 + <pre><!-- 1.436 + -->.foo { 1.437 +<!-- 1.438 + --> var-gap: 20; 1.439 +<!-- 1.440 + --> margin-top: var(gap)px; 1.441 +<!-- 1.442 + -->}</pre> 1.443 + 1.444 + <p> Again, this is <em>not</em> equivalent to setting ‘<code 1.445 + class=css>margin-top: 20px;</code>’ (a length). Instead, it's 1.446 + equivalent to ‘<code class=css>margin-top: 20 px;</code>’ (a number 1.447 + followed by an ident), which is simply an invalid value for the ‘<code 1.448 + class=property>margin-top</code>’ property. Note, though, that ‘<code 1.449 + class=css>calc()</code>’ can be used to validly achieve the same thing, 1.450 + like so: 1.451 + 1.452 + <pre><!-- 1.453 + -->.foo { 1.454 +<!-- 1.455 + --> var-gap: 20; 1.456 +<!-- 1.457 + --> margin-top: calc(var(gap) * 1px); 1.458 +<!-- 1.459 + -->}</pre> 1.460 + </div> 1.461 + 1.462 <p> A variable is substituted for its value in the property value at 1.463 computed-value time. If a declaration, once all variables are substituted 1.464 in, is invalid, the declaration is <a 1.465 @@ -517,47 +578,22 @@ 1.466 <p> For example, the following usage is fine from a syntax standpoint, but 1.467 results in nonsense when the variable is substituted in: 1.468 1.469 - <pre> 1.470 -:root { var-looks-valid: 20px; } 1.471 -p { background-color: $looks-valid; }</pre> 1.472 + <pre><!-- 1.473 + -->:root { var-looks-valid: 20px; } 1.474 +<!-- 1.475 + -->p { background-color: var(looks-valid); }</pre> 1.476 1.477 <p> Since ‘<code class=css>20px</code>’ is an invalid value for 1.478 ‘<code class=property>background-color</code>’, this instance of the 1.479 property computes to ‘<code class=property>transparent</code>’ (the 1.480 initial value for ‘<code class=property>background-color</code>’) 1.481 instead. 1.482 + 1.483 + <p> If the property was one that's inherited by default, such as ‘<code 1.484 + class=property>color</code>’, it would compute to the inherited value 1.485 + rather than the initial value. 1.486 </div> 1.487 1.488 - <h3 id=var-glyph><span class=secno>3.1. </span> The $ Prefix</h3> 1.489 - 1.490 - <p> The simplest way to use a variable is to refer to it by its name, which 1.491 - is the same as the <a href="#variable-property"><i>variable 1.492 - property</i></a> defining it, except with the "var-" prefix swapped out 1.493 - for a "$" prefix. Formally, the syntax of a variable is: 1.494 - 1.495 - <pre><dfn id=type-var><var></dfn> = "$" <var>IDENT</var></pre> 1.496 - 1.497 - <p> ...where <var>IDENT</var> is anything matching the IDENT production in 1.498 - <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS2.1 1.499 - Chapter 4</a>. 1.500 - 1.501 - <div class=example> 1.502 - <p> For example, the following code defines and uses a variable named 1.503 - "main-color". 1.504 - 1.505 - <pre> 1.506 -:root { 1.507 - var-main-color: blue; 1.508 -} 1.509 - 1.510 -h1 { 1.511 - color: $main-color; 1.512 -}</pre> 1.513 - </div> 1.514 - 1.515 - <h3 id=var-function><span class=secno>3.2. </span> Default Values - the 1.516 - ‘<code class=css>var()</code>’ notation</h3> 1.517 - 1.518 <p> In some cases, it can be useful to provide a "default" value for a 1.519 variable in case the variable isn't defined or is invalid. 1.520 1.521 @@ -568,12 +604,16 @@ 1.522 about, rather than being forced to provide values for all of them. 1.523 1.524 <p> The ‘<code class=css>var()</code>’ notation allows a default value 1.525 - to be specified when referencing a variable. The syntax of ‘<code 1.526 - class=css>var()</code>’ is: 1.527 + to be specified when referencing a variable. After the variable name, 1.528 + insert a comma and then provide any value, just like the value of a <a 1.529 + href="#custom-property"><i>custom property</i></a>. 1.530 1.531 - <pre><dfn id=default-var-type><default-var></dfn> = var( <a 1.532 - href="#type-var"><var><var></var></a> [, <a 1.533 - href="#value-type"><var><value></var></a> ]? )</pre> 1.534 + <p class=issue> The syntax for custom properties and var fallbacks are 1.535 + actually slightly different - you can't use an unbalanced ) in the 1.536 + fallback, since it ends a function, but you *can* use a semicolon or an 1.537 + unbalanced }. This should be defined as "any sequence of tokens that can 1.538 + be parsed by the ‘<code class=css>consume a function</code>’ algo in 1.539 + Syntax without returning the function". 1.540 1.541 <p> If the variable named by the first argument is valid, the variable's 1.542 value is substituted as normal. If it's invalid, and a second argument was 1.543 @@ -581,95 +621,16 @@ 1.544 Otherwise, the ‘<code class=css>var()</code>’ represents an <a 1.545 href="#invalid-variable"><i>invalid variable</i></a>. 1.546 1.547 - <p class=note> Note that using ‘<code class=css>var()</code>’ without a 1.548 - second argument offers no benefits over using the variable by itself. This 1.549 - is allowed for consistency with ‘<code class=css>parent-var()</code>’, 1.550 - which <em>does</em> do something useful with only one argument. Future 1.551 - variable functions will likely be similar. 1.552 - 1.553 - <h3 id=parent-var-notation><span class=secno>3.3. </span> Getting the 1.554 - Parent's Variable - the ‘<code class=css>parent-var()</code>’ notation</h3> 1.555 - 1.556 - <p> Several advanced use-cases for variables need the ability to reference 1.557 - the value that a variable has on the element's parent, rather than on the 1.558 - element itself. This can be accomplished with the ‘<code 1.559 - class=css>parent-var()</code>’ notation: 1.560 - 1.561 - <pre><dfn 1.562 - id=parent-var-notation-type><parent-var></dfn> = parent-var( <a 1.563 - href="#type-var"><var><var></var></a> [, <a 1.564 - href="#value-type"><var><value></var></a> ]? )</pre> 1.565 - 1.566 - <p> If the element has a parent, and the variable named by the first 1.567 - argument is valid on the parent, the variable's value on the parent is 1.568 - substituted as normal. Otherwise, if a second argument was provided, the 1.569 - value of the second argument is substituted instead. Otherwise, the 1.570 - ‘<code class=css>parent-var()</code>’ represents an <a 1.571 - href="#invalid-variable"><i>invalid variable</i></a>. 1.572 - 1.573 - <div class=example> 1.574 - <p> For example, ‘<code class=css>parent-var()</code>’ can be used to 1.575 - implement a behavior that's very similar to the ‘<code 1.576 - class=css>toggle()</code>’ notation from [[CSS3VALUES]]. In this 1.577 - example, each nested comment alternates between a white and silver 1.578 - background. 1.579 - 1.580 - <pre> 1.581 -<div class='comment'> 1.582 - <div class='main'> 1.583 - ... 1.584 - </div> 1.585 - <div class='actions'><a>Reply</a> <a>Comment</a> ...</div> 1.586 -</div> 1.587 -<div class='comment'> 1.588 - <div class='main'> 1.589 - <div class='comment'> 1.590 - <div class='main'> 1.591 - ... 1.592 - </div> 1.593 - <div class='actions'><a>Reply</a> <a>Comment</a> ...</div> 1.594 - </div> 1.595 - </div> 1.596 - <div class='actions'><a>Reply</a> <a>Comment</a> ...</div> 1.597 -</div> 1.598 -<style> 1.599 -.comment { 1.600 - var-bg: parent-var($bg2, white); 1.601 - var-bg2: parent-var($bg, silver); 1.602 - background: url(comment.png) $bg; 1.603 -} 1.604 -</style></pre> 1.605 - 1.606 - <p> The ‘<code class=css>toggle()</code>’ notation can't be used here, 1.607 - because ‘<code class=property>background-color</code>’ isn't 1.608 - inherited (and thus the nested comments see the initial value of ‘<code 1.609 - class=css>transparent</code>’ rather than ‘<code 1.610 - class=css>white</code>’ or ‘<code class=css>silver</code>’). Even 1.611 - if the author explicitly sets ‘<code 1.612 - class=css>background-color:inherit</code>’ on <code><div 1.613 - class='main'></code> so that ‘<code class=css>toggle()</code>’ can 1.614 - actually see the right value, that will make the ".main" elements cover 1.615 - up the ‘<code class=property>background-image</code>’ that ".comment" 1.616 - has on it as well. Because variables don't have any effect on rendering 1.617 - until they're used, they can pass these values through the document 1.618 - without these kinds of side effects. 1.619 - 1.620 - <p> The ‘<code class=css>var()</code>’ notation can't be used here 1.621 - either as it would immediately produce a cycle between $bg and $bg2, 1.622 - making them both invalid. 1.623 - </div> 1.624 - 1.625 - <h3 id=using-invalid-variables><span class=secno>3.4. </span> Using Invalid 1.626 + <h3 id=using-invalid-variables><span class=secno>3.1. </span> Using Invalid 1.627 Variables</h3> 1.628 1.629 - <p> When a <a href="#variable-property"><i>variable property</i></a> has 1.630 - its initial value, the <a href="#variable"><i>variable</i></a> it defines 1.631 + <p> When a <a href="#custom-property"><i>custom property</i></a> has its 1.632 + initial value, the <a href="#variable"><i>variable</i></a> it defines 1.633 represents an <dfn id=invalid-variable>invalid variable</dfn>. Using an <a 1.634 href="#invalid-variable"><i>invalid variable</i></a> in a property value 1.635 - (including other <a href="#variable-property"><i>variable 1.636 - properties</i></a>) makes the declaration <a 1.637 - href="#invalid-at-computed-value-time"><i>invalid at computed-value 1.638 - time</i></a>. 1.639 + (including other <a href="#custom-property"><i>custom properties</i></a>) 1.640 + makes the declaration <a href="#invalid-at-computed-value-time"><i>invalid 1.641 + at computed-value time</i></a>. 1.642 1.643 <p> A declaration can be <dfn id=invalid-at-computed-value-time>invalid at 1.644 computed-value time</dfn> if it uses an invalid <a 1.645 @@ -683,10 +644,12 @@ 1.646 <div class=example> 1.647 <p> For example, in the following code: 1.648 1.649 - <pre> 1.650 -:root { var-not-a-color: 20px; } 1.651 -p { background-color: red; } 1.652 -p { background-color: $not-a-color; }</pre> 1.653 + <pre><!-- 1.654 + -->:root { var-not-a-color: 20px; } 1.655 +<!-- 1.656 + -->p { background-color: red; } 1.657 +<!-- 1.658 + -->p { background-color: var(not-a-color); }</pre> 1.659 1.660 <p> the <p> elements will have transparent backgrounds (the initial 1.661 value for ‘<code class=property>background-color</code>’), rather 1.662 @@ -708,57 +671,17 @@ 1.663 1.664 <h2 id=cssom><span class=secno>4. </span> CSSOM</h2> 1.665 1.666 - <p> <a href="#variable-property"><i>Variable properties</i></a> are 1.667 - ordinary properties, and can be read or modified using all of the existing 1.668 - CSSOM APIs for reading or modifying properties. 1.669 + <p> <a href="#custom-property"><i>Custom properties</i></a> are ordinary 1.670 + properties, and can be read or modified using all of the existing CSSOM 1.671 + APIs for reading or modifying properties. 1.672 1.673 - <p> The specification extends the IDL definitions in the CSSOM spec to 1.674 - represent the use of the ‘<code class=css>var()</code>’ function. 1.675 - 1.676 - <h3 id=cssom-cssvariable><span class=secno>4.1. </span> Interface 1.677 - CSSVariableComponentValue</h3> 1.678 - 1.679 - <p> The CSSVariableComponentValue interface represents a use of the 1.680 - ‘<code class=css>var()</code>’ function. 1.681 - 1.682 - <dl> 1.683 - <dt>IDL Definition 1.684 - 1.685 - <dd> 1.686 - <pre class=idl> 1.687 -[NoInterfaceObject] interface CSSVariableComponentValue { 1.688 - attribute DOMString variableName; 1.689 - readonly attribute any variableValue; 1.690 -}</pre> 1.691 - 1.692 - <dt>Attributes 1.693 - 1.694 - <dd> 1.695 - <dl> 1.696 - <dt><code>variableName</code> of type <code>DOMString</code> 1.697 - 1.698 - <dd>This attribute represents the argument to the function. Changing 1.699 - this attribute changes the <a href="#variable-property"><i>variable 1.700 - property</i></a> being referred to. 1.701 - 1.702 - <dt><code>variableValue</code> of type <code>any</code>, readonly 1.703 - 1.704 - <dd>This attribute represents the value of the <a 1.705 - href="#variable-property"><i>variable property</i></a> the function is 1.706 - referencing. 1.707 - </dl> 1.708 - </dl> 1.709 - 1.710 - <h3 id=cssstyledeclaration-interface><span class=secno>4.2. </span> 1.711 - Additions to the <code>CSSStyleDeclaration</code> Interface</h3> 1.712 - 1.713 - <p class=issue> The set of variable properties is open-ended, so it's not 1.714 - clear how best to represent this. Ideally, the CSSOM would expose the 1.715 - current set of properties with a non-initial value and allow setting of 1.716 - arbitrary properties. The most natural way seems to be to first, set up a 1.717 - getter behavior on the interface somehow that deals with variable 1.718 - properties, and second, set up a <code>vars</code> map that exposes the 1.719 - variable properties that aren't set to their initial value. 1.720 + <p class=issue> Right now, the CSSStyleDeclaration interface can be specced 1.721 + and implemented as a normal interface that just has a *ton* of attributes. 1.722 + (In practice, we don't spec it this way, because it was difficult to 1.723 + extend before partial interfaces were created, but I think it's 1.724 + implemented this way.) However, variables mess this up - there's an 1.725 + infinite number of them. Ideally we'd only expose the valid ones (those 1.726 + set to a non-initial value). How to spec this? 1.727 1.728 <h2 id=conformance><span class=secno>5. </span> Conformance</h2> 1.729 1.730 @@ -958,6 +881,16 @@ 1.731 </dd> 1.732 <!----> 1.733 1.734 + <dt id=CSS3VAL>[CSS3VAL] 1.735 + 1.736 + <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 1.737 + href="http://www.w3.org/TR/2012/WD-css3-values-20120308/"><cite>CSS 1.738 + Values and Units Module Level 3.</cite></a> 8 March 2012. W3C Working 1.739 + Draft. (Work in progress.) URL: <a 1.740 + href="http://www.w3.org/TR/2012/WD-css3-values-20120308/">http://www.w3.org/TR/2012/WD-css3-values-20120308/</a> 1.741 + </dd> 1.742 + <!----> 1.743 + 1.744 <dt id=RFC2119>[RFC2119] 1.745 1.746 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key 1.747 @@ -1005,18 +938,18 @@ 1.748 <li>authoring tool, <a href="#authoring-tool" 1.749 title="authoring tool"><strong>5.2.</strong></a> 1.750 1.751 - <li><default-var>, <a href="#default-var-type" 1.752 - title="<default-var>"><strong>3.2.</strong></a> 1.753 + <li>custom properties, <a href="#custom-property" 1.754 + title="custom properties"><strong>2.</strong></a> 1.755 + 1.756 + <li>custom property, <a href="#custom-property" 1.757 + title="custom property"><strong>2.</strong></a> 1.758 1.759 <li>invalid at computed-value time, <a 1.760 href="#invalid-at-computed-value-time" 1.761 - title="invalid at computed-value time"><strong>3.4.</strong></a> 1.762 + title="invalid at computed-value time"><strong>3.1.</strong></a> 1.763 1.764 <li>invalid variable, <a href="#invalid-variable" 1.765 - title="invalid variable"><strong>3.4.</strong></a> 1.766 - 1.767 - <li><parent-var>, <a href="#parent-var-notation-type" 1.768 - title="<parent-var>"><strong>3.3.</strong></a> 1.769 + title="invalid variable"><strong>3.1.</strong></a> 1.770 1.771 <li>renderer, <a href="#renderer" title=renderer><strong>5.2.</strong></a> 1.772 1.773 @@ -1027,21 +960,12 @@ 1.774 title="style sheet, as conformance class"><strong>5.2.</strong></a> 1.775 </ul> 1.776 1.777 - <li><a href="#value-type"><var><value></var></a>, <a href="#value-type" 1.778 - title="<value>"><strong>2.</strong></a> 1.779 - 1.780 - <li><var>, <a href="#type-var" 1.781 - title="<var>"><strong>3.1.</strong></a> 1.782 - 1.783 <li>var-*, <a href="#var-" title="var-*"><strong>2.</strong></a> 1.784 1.785 - <li>variable, <a href="#variable" title=variable><strong>3.</strong></a> 1.786 + <li>variable, <a href="#variable" title=variable><strong>2.</strong></a> 1.787 1.788 - <li>variable property, <a href="#variable-property" 1.789 - title="variable property"><strong>2.</strong></a> 1.790 - 1.791 - <li>variables properties, <a href="#variable-property" 1.792 - title="variables properties"><strong>2.</strong></a> 1.793 + <li><variable>, <a href="#default-var-type" 1.794 + title="<variable>"><strong>3.</strong></a> 1.795 </ul> 1.796 <!--end-index--> 1.797 1.798 @@ -1069,7 +993,7 @@ 1.799 <tr> 1.800 <th><a class=property href="#var-">var-*</a> 1.801 1.802 - <td><value> 1.803 + <td> 1.804 1.805 <td>(nothing, see prose) 1.806 1.807 @@ -1077,8 +1001,7 @@ 1.808 1.809 <td>yes 1.810 1.811 - <td>specified value with variables substituted (but see prose for 1.812 - "invalid variables") 1.813 + <td> 1.814 1.815 <td>all 1.816 </table>
2.1 --- a/css-variables/Overview.src.html Mon Aug 27 17:46:13 2012 +0200 2.2 +++ b/css-variables/Overview.src.html Mon Aug 27 17:50:16 2012 +0200 2.3 @@ -83,7 +83,7 @@ 2.4 and may not be amenable to Find-and-Replace. 2.5 2.6 <p> 2.7 - This module introduces a family of custom author-defined properties known collectively as <i>variable properties</i>, 2.8 + This module introduces a family of custom author-defined properties known collectively as <i>custom properties</i>, 2.9 which allow an author to assign arbitrary values to a property with an author-chosen name, 2.10 and <i>variables</i>, 2.11 which allow an author to then use those values in other properties elsewhere in the document. 2.12 @@ -91,7 +91,7 @@ 2.13 as seemingly-arbitrary values now have informative names, 2.14 and makes editing such files much easier and less error-prone, 2.15 as one only has to change the value once, 2.16 - at the variable definition site, 2.17 + in the <i>custom property</i>, 2.18 and the change will propagate to all uses of that variable automatically. 2.19 2.20 <h3 id="placement"> 2.21 @@ -114,10 +114,10 @@ 2.22 expands the definition of the <color> value type as used in this specification. 2.23 2.24 <h2 id="defining-variables"> 2.25 -Defining Variables With Variable Properties</h2> 2.26 +Defining Custom Properties: the 'var-*' family of properties</h2> 2.27 2.28 <p> 2.29 - This specification defines an open-ended set of properties called <i>variable properties</i>, 2.30 + This specification defines an open-ended set of properties called <i>custom properties</i>, 2.31 which are used to define <i>variables</i>. 2.32 2.33 <table class='propdef'> 2.34 @@ -145,55 +145,55 @@ 2.35 </table> 2.36 2.37 <p> 2.38 - The <dfn id='value-type'><var><value></var></dfn> type used in the syntax above is defined as 2.39 - anything matching the "value" production in <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS 2.1 Chapter 4.1</a> [[!CSS21]]. 2.40 - This puts almost no restrictions on what kinds of values you can store in variables. 2.41 - Obviously, any valid property value 2.42 - or component of a property 2.43 - is allowed. 2.44 - Additionally, this allows things that aren't yet valid CSS, 2.45 - like unknown keywords or functions, 2.46 - blocks, 2.47 - at-rules, 2.48 - and other kinds of custom micro-syntaxes like what's allowed in calc(). 2.49 - There <em>are</em> still rules, however; 2.50 - for example, 2.51 - unbalanced parentheses are invalid. 2.52 + A <dfn title="custom property|custom properties">custom property</dfn> is any property 2.53 + whose name is composed of "var-" followed by an <code><ident></code> [[!CSS3VAL]] 2.54 + <i>Custom properties</i> are solely for use by authors and users; 2.55 + CSS will never give them a meaning beyond what is presented here. 2.56 2.57 <p> 2.58 - The term <dfn title="variable property|variables properties">variable property</dfn> refers to any property 2.59 - whose name is composed of a "var-" prefix 2.60 - followed by something matching the IDENT production in <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS2.1 Chapter 4</a>. 2.61 - A <i>variable property</i> defines a value for a corresponding <i>variable</i> 2.62 - with the same name as the property except that the "var-" prefix is replaced with a "$" prefix. 2.63 + <i>Custom properties</i> have an extremely permissive value grammar, 2.64 + defined as the "value" production in <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS 2.1 Chapter 4.1</a> [[!CSS21]]. 2.65 + This implies that any valid CSS value can be used, 2.66 + but it's much wider than that. 2.67 + Roughly, anything can be used except for unclosed quotes, parens, braces, or square brackets, 2.68 + or any character that would normally end a declaration 2.69 + (a top-level semicolon or close brace). 2.70 + 2.71 + <p class='issue'> 2.72 + This should be defined as 2.73 + "any sequence of tokens that can be parsed, 2.74 + starting from the 'declarative-value mode' in Syntax, 2.75 + without switching out of that mode". 2.76 + 2.77 + <p class='note'> 2.78 + Note: Custom properties can contain a trailing ''!important'', 2.79 + but this is automatically removed from the property's value by the CSS parser, 2.80 + and makes the custom property "important" in the CSS cascade. 2.81 2.82 <p> 2.83 - The initial value of a <i>variable property</i> is an empty invalid value. 2.84 + There are an infinity of <i>custom properties</i>, 2.85 + but the initial value of a <i>custom property</i> is an empty invalid value. 2.86 This means that, 2.87 - until a <i>variable property</i> is explicitly defined otherwise by a style sheet, 2.88 - it defines an <i>invalid variable</i> 2.89 - 2.90 - <p class='issue'> 2.91 - As defined here, 2.92 - the syntax for variable usage is different from the syntax for variable definition 2.93 - (i.e. var-foo for definition, $foo for usage). 2.94 - It might be nice to have the syntaxes match, 2.95 - using "$foo" as the property name as well. 2.96 - This would require a minor change in the Core Grammar. 2.97 + until a <i>custom property</i> is explicitly defined otherwise by a style sheet, 2.98 + it defines an <i>invalid variable</i>. 2.99 2.100 <p> 2.101 - <i>Variable properties</i> are defined to be valid but meaningless 2.102 - as they are meant solely for allowing authors to pass custom data around their page, 2.103 - similar to the <a href="http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes">custom data attributes</a> in HTML. 2.104 - Other specifications and user agents must not assign a particular meaning to <i>variable properties</i> 2.105 - or attach a specific effect to them beyond the bare minimum that comes from them being valid properties. 2.106 + The primary purpose of <i>custom properties</i> is to define <i>variables</i>. 2.107 + In CSS, a <dfn>variable</dfn> is a value that can be substituted into other properties, 2.108 + allowing authors to "abstract" parts of their page's CSS out. 2.109 + Every <i>custom property</i> defines a corresponding <i>variable</i> 2.110 + with the same name, minus the "var-" prefix. 2.111 + For example, the custom property 'var-foo' defines a variable named ''foo''. 2.112 + See the next chapter for details on how to use variables. 2.113 2.114 <p> 2.115 - For each <i>variable property</i>, 2.116 - there is an associated variable with the same name save for the "var-" prefix. 2.117 - For example, 2.118 - a variable property named "var-foo" is associated with the variable named "foo". 2.119 - See the next chapter for details on how to use variables. 2.120 + <i>Custom properties</i> can be put to several other uses, of course. 2.121 + For example, they can be used to conveniently attach values to elements 2.122 + so that JavaScript can later use those values. 2.123 + Another example is providing "custom CSS" by treating "var-" as a kind of "author prefix" 2.124 + (similar to a vendor prefix) 2.125 + that allows an author to write custom CSS properties without having them thrown away as invalid by the CSS parser, 2.126 + and then having JavaScript come along afterward to actually implement the functionality. 2.127 2.128 <div class=example> 2.129 <p> 2.130 @@ -205,12 +205,12 @@ 2.131 }</pre> 2.132 2.133 <p> 2.134 - declares a <i>variable property</i> named "var-header-color" on the root element, 2.135 + declares a <i>custom property</i> named "var-header-color" on the root element, 2.136 and assigns to it the value "#06c". 2.137 This property is then inherited to the elements in the rest of the document. 2.138 Its value can be referenced via the "header-color" variable: 2.139 2.140 - <pre>h1 { background-color: $header-color; }</pre> 2.141 + <pre>h1 { background-color: var(header-color); }</pre> 2.142 2.143 <p> 2.144 The preceding rule is equivalent to writing ''background-color: #06c;'', 2.145 @@ -221,7 +221,7 @@ 2.146 </div> 2.147 2.148 <p> 2.149 - Variable properties are ordinary properties, 2.150 + Custom properties are ordinary properties, 2.151 so they can be declared on any element, 2.152 are resolved with the normal inheritance and cascade rules, 2.153 can be made conditional with ''@media'' and other conditional rules, 2.154 @@ -230,44 +230,44 @@ 2.155 2.156 <div class='example'> 2.157 <p> 2.158 - If a <i>variable property</i> is declared multiple times, 2.159 + If a <i>custom property</i> is declared multiple times, 2.160 the standard cascade rules help resolve it. 2.161 - Variables always draw from the computed value of the associated variable property on the same element: 2.162 + Variables always draw from the computed value of the associated custom property on the same element: 2.163 2.164 - <pre> 2.165 -:root { var-color: blue; } 2.166 -div { var-color: green; } 2.167 -#alert { var-color: red; } 2.168 -* { color: $color; } 2.169 - 2.170 -<p>I inherited blue from the root element!</p> 2.171 -<div>I got green set directly on me!</div> 2.172 -<div id='alert'> 2.173 - While I got red set directly on me! 2.174 - <p>I'm red too, because of inheritance!</p> 2.175 -</div></pre> 2.176 + <pre><!-- 2.177 + -->:root { var-color: blue; }
<!-- 2.178 + -->div { var-color: green; }
<!-- 2.179 + -->#alert { var-color: red; }
<!-- 2.180 + -->* { color: var(color); }
<!-- 2.181 + -->
<!-- 2.182 + --><p>I inherited blue from the root element!</p>
<!-- 2.183 + --><div>I got green set directly on me!</div>
<!-- 2.184 + --><div id='alert'>
<!-- 2.185 + --> While I got red set directly on me!
<!-- 2.186 + --> <p>I'm red too, because of inheritance!</p>
<!-- 2.187 + --></div></pre> 2.188 </div> 2.189 2.190 <p> 2.191 - <i>Variable properties</i> may use variables in their own values to build up composite variables. 2.192 + <i>Custom properties</i> may use variables in their own values to build up composite variables. 2.193 This can create cyclic dependencies 2.194 - where two or more <i>variable properties</i> each attempt to use the variable that the other defines; 2.195 - doing so makes all the <i>variable properties</i> involved in the cycle 2.196 + where two or more <i>custom properties</i> each attempt to use the variable that the other defines; 2.197 + doing so makes all the <i>custom properties</i> involved in the cycle 2.198 compute to their initial value (which is a guaranteed-invalid value). 2.199 2.200 <div class='example'> 2.201 <p> 2.202 - This example shows a variable property safely using a variable: 2.203 + This example shows a custom property safely using a variable: 2.204 2.205 - <pre> 2.206 -:root { 2.207 - var-main-color: #c06; 2.208 - var-accent-background: linear-gradient(to top, $main-color, white); 2.209 -}</pre> 2.210 + <pre><!-- 2.211 + -->:root {
<!-- 2.212 + --> var-main-color: #c06;
<!-- 2.213 + --> var-accent-background: linear-gradient(to top, var(main-color), white);
<!-- 2.214 + -->}</pre> 2.215 2.216 <p> 2.217 The 'var-accent-background' property 2.218 - (along with any other properties that use ''$main-color'') 2.219 + (along with any other properties that use ''var(main-color)'') 2.220 will automatically update when the 'var-main-color' property is changed. 2.221 </div> 2.222 2.223 @@ -276,11 +276,11 @@ 2.224 On the other hand, 2.225 this example shows an invalid instance of variables depending on each other: 2.226 2.227 - <pre> 2.228 -:root { 2.229 - var-one: calc($two + 20px); 2.230 - var-two: calc($one - 20px); 2.231 -}</pre> 2.232 + <pre><!-- 2.233 + -->:root {
<!-- 2.234 + --> var-one: calc(var(two) + 20px);
<!-- 2.235 + --> var-two: calc(var(one) - 20px);
<!-- 2.236 + -->}</pre> 2.237 2.238 <p> 2.239 Both 'var-one' and 'var-two' now define <i>invalid variables</i> rather than lengths. 2.240 @@ -288,24 +288,24 @@ 2.241 2.242 <p> 2.243 It is important to note that 2.244 - <i>variable properties</i> resolve any <i>variables</i> in their values at computed-value time, 2.245 + <i>custom properties</i> resolve any <i>variables</i> in their values at computed-value time, 2.246 which occurs <em>before</em> the value is inherited. 2.247 In general, 2.248 - cyclic dependencies occur only when multiple variable properties on the same element refer to each other; 2.249 - variable properties defined on elements higher in the element tree can never cause a cyclic reference with properties defined on elements lower in the element tree. 2.250 + cyclic dependencies occur only when multiple custom properties on the same element refer to each other; 2.251 + custom properties defined on elements higher in the element tree can never cause a cyclic reference with properties defined on elements lower in the element tree. 2.252 2.253 <div class='example'> 2.254 <p> 2.255 For example, 2.256 given the following structure, 2.257 - these variable properties are <strong>not</strong> cyclic, 2.258 + these custom properties are <strong>not</strong> cyclic, 2.259 and all define valid variables: 2.260 2.261 - <pre> 2.262 -<one><two><three /></two></one> 2.263 -one { var-foo: 10px; } 2.264 -two { var-bar: calc($foo + 10px); } 2.265 -three { var-foo: calc($bar + 10px); }</pre> 2.266 + <pre><!-- 2.267 + --><one><two><three /></two></one>
<!-- 2.268 + -->one { var-foo: 10px; }
<!-- 2.269 + -->two { var-bar: calc(var(foo) + 10px); }
<!-- 2.270 + -->three { var-foo: calc(var(bar) + 10px); }</pre> 2.271 2.272 <p> 2.273 The <one> element defines a value for 'var-foo'. 2.274 @@ -352,15 +352,14 @@ 2.275 2.276 2.277 <h2 id='using-variables'> 2.278 -Using Variables</h2> 2.279 +Using Variables - the ''var()'' notation</h2> 2.280 2.281 <p> 2.282 - A <dfn>variable</dfn> allows the value of a <i>variable property</i> on an element 2.283 - to be substituted into another property on the element. 2.284 - There are several ways to use variables: 2.285 - by name, 2.286 - via the ''var()'' notation, 2.287 - or via the ''parent-var()'' notation to get at a variable on the element's parent. 2.288 + Every <i>custom property</i> automatically defines a corresponding <i>variable</i>, 2.289 + which can then be substituted into another property with the ''var()'' function. 2.290 + The syntax of ''var()'' is: 2.291 + 2.292 + <pre><dfn id='default-var-type'><variable></dfn> = var( <var>variable-name</var> [, <var><value></var> ]? )</pre> 2.293 2.294 <p> 2.295 A variable can be used in place of any component value in any property on an element. 2.296 @@ -372,6 +371,43 @@ 2.297 in some situations like the attribute value of an attribute selector, 2.298 produces a valid value that nonetheless has no relation to the variable of that name. 2.299 2.300 + <div class='example'> 2.301 + <p> 2.302 + For example, the following code incorrectly attempts to use a variable as a property name: 2.303 + 2.304 + <pre><!-- 2.305 + -->.foo {
<!-- 2.306 + --> var-side: margin-top;
<!-- 2.307 + --> var(side): 20px;
<!-- 2.308 + -->}</pre> 2.309 + 2.310 + <p> 2.311 + This is <em>not</em> equivalent to setting ''margin-top: 20px;''. 2.312 + Instead, the second declaration is simply thrown away as a syntax error 2.313 + for having an invalid property name. 2.314 + 2.315 + <p> 2.316 + Similarly, you can't build up a single component value where part of it is provided by a variable: 2.317 + 2.318 + <pre><!-- 2.319 + -->.foo {
<!-- 2.320 + --> var-gap: 20;
<!-- 2.321 + --> margin-top: var(gap)px;
<!-- 2.322 + -->}</pre> 2.323 + 2.324 + <p> 2.325 + Again, this is <em>not</em> equivalent to setting ''margin-top: 20px;'' (a length). 2.326 + Instead, it's equivalent to ''margin-top: 20 px;'' (a number followed by an ident), 2.327 + which is simply an invalid value for the 'margin-top' property. 2.328 + Note, though, that ''calc()'' can be used to validly achieve the same thing, like so: 2.329 + 2.330 + <pre><!-- 2.331 + -->.foo {
<!-- 2.332 + --> var-gap: 20;
<!-- 2.333 + --> margin-top: calc(var(gap) * 1px);
<!-- 2.334 + -->}</pre> 2.335 + </div> 2.336 + 2.337 <p> 2.338 A variable is substituted for its value in the property value at computed-value time. 2.339 If a declaration, 2.340 @@ -385,51 +421,23 @@ 2.341 the following usage is fine from a syntax standpoint, 2.342 but results in nonsense when the variable is substituted in: 2.343 2.344 - <pre> 2.345 -:root { var-looks-valid: 20px; } 2.346 -p { background-color: $looks-valid; }</pre> 2.347 + <pre><!-- 2.348 + -->:root { var-looks-valid: 20px; }
<!-- 2.349 + -->p { background-color: var(looks-valid); }</pre> 2.350 2.351 <p> 2.352 Since ''20px'' is an invalid value for 'background-color', 2.353 this instance of the property computes to 'transparent' 2.354 (the initial value for 'background-color') 2.355 instead. 2.356 + 2.357 + <p> 2.358 + If the property was one that's inherited by default, 2.359 + such as 'color', 2.360 + it would compute to the inherited value 2.361 + rather than the initial value. 2.362 </div> 2.363 2.364 - 2.365 -<h3 id='var-glyph'> 2.366 -The $ Prefix</h3> 2.367 - 2.368 - <p> 2.369 - The simplest way to use a variable is to refer to it by its name, 2.370 - which is the same as the <i>variable property</i> defining it, 2.371 - except with the "var-" prefix swapped out for a "$" prefix. 2.372 - Formally, the syntax of a variable is: 2.373 - 2.374 - <pre><dfn id='type-var'><var></dfn> = "$" <var>IDENT</var></pre> 2.375 - 2.376 - <p> 2.377 - ...where <var>IDENT</var> is anything matching the IDENT production in <a href="http://www.w3.org/TR/CSS2/syndata.html#tokenization">CSS2.1 Chapter 4</a>. 2.378 - 2.379 - <div class='example'> 2.380 - <p> 2.381 - For example, 2.382 - the following code defines and uses a variable named "main-color". 2.383 - 2.384 - <pre> 2.385 -:root { 2.386 - var-main-color: blue; 2.387 -} 2.388 - 2.389 -h1 { 2.390 - color: $main-color; 2.391 -}</pre> 2.392 - </div> 2.393 - 2.394 - 2.395 -<h3 id='var-function'> 2.396 -Default Values - the ''var()'' notation</h3> 2.397 - 2.398 <p> 2.399 In some cases, 2.400 it can be useful to provide a "default" value for a variable 2.401 @@ -444,9 +452,16 @@ 2.402 2.403 <p> 2.404 The ''var()'' notation allows a default value to be specified when referencing a variable. 2.405 - The syntax of ''var()'' is: 2.406 + After the variable name, 2.407 + insert a comma 2.408 + and then provide any value, 2.409 + just like the value of a <i>custom property</i>. 2.410 2.411 - <pre><dfn id='default-var-type'><default-var></dfn> = var( <var><var></var> [, <var><value></var> ]? )</pre> 2.412 + <p class='issue'> 2.413 + The syntax for custom properties and var fallbacks are actually slightly different - 2.414 + you can't use an unbalanced ) in the fallback, since it ends a function, 2.415 + but you *can* use a semicolon or an unbalanced }. 2.416 + This should be defined as "any sequence of tokens that can be parsed by the 'consume a function' algo in Syntax without returning the function". 2.417 2.418 <p> 2.419 If the variable named by the first argument is valid, 2.420 @@ -455,91 +470,16 @@ 2.421 the value of the second argument is substituted instead. 2.422 Otherwise, the ''var()'' represents an <i>invalid variable</i>. 2.423 2.424 - <p class='note'> 2.425 - Note that using ''var()'' without a second argument offers no benefits 2.426 - over using the variable by itself. 2.427 - This is allowed for consistency with ''parent-var()'', 2.428 - which <em>does</em> do something useful with only one argument. 2.429 - Future variable functions will likely be similar. 2.430 - 2.431 - 2.432 -<h3 id='parent-var-notation'> 2.433 -Getting the Parent's Variable - the ''parent-var()'' notation</h3> 2.434 - 2.435 - <p> 2.436 - Several advanced use-cases for variables need 2.437 - the ability to reference the value that a variable has on the element's parent, 2.438 - rather than on the element itself. 2.439 - This can be accomplished with the ''parent-var()'' notation: 2.440 - 2.441 - <pre><dfn id='parent-var-notation-type'><parent-var></dfn> = parent-var( <var><var></var> [, <var><value></var> ]? )</pre> 2.442 - 2.443 - <p> 2.444 - If the element has a parent, 2.445 - and the variable named by the first argument is valid on the parent, 2.446 - the variable's value on the parent is substituted as normal. 2.447 - Otherwise, if a second argument was provided, 2.448 - the value of the second argument is substituted instead. 2.449 - Otherwise, the ''parent-var()'' represents an <i>invalid variable</i>. 2.450 - 2.451 - <div class='example'> 2.452 - <p> 2.453 - For example, 2.454 - ''parent-var()'' can be used to implement a behavior that's very similar to the ''toggle()'' notation from [[CSS3VALUES]]. 2.455 - In this example, 2.456 - each nested comment alternates between a white and silver background. 2.457 - 2.458 - <pre> 2.459 -<div class='comment'> 2.460 - <div class='main'> 2.461 - ... 2.462 - </div> 2.463 - <div class='actions'><a>Reply</a> <a>Comment</a> ...</div> 2.464 -</div> 2.465 -<div class='comment'> 2.466 - <div class='main'> 2.467 - <div class='comment'> 2.468 - <div class='main'> 2.469 - ... 2.470 - </div> 2.471 - <div class='actions'><a>Reply</a> <a>Comment</a> ...</div> 2.472 - </div> 2.473 - </div> 2.474 - <div class='actions'><a>Reply</a> <a>Comment</a> ...</div> 2.475 -</div> 2.476 -<style> 2.477 -.comment { 2.478 - var-bg: parent-var($bg2, white); 2.479 - var-bg2: parent-var($bg, silver); 2.480 - background: url(comment.png) $bg; 2.481 -} 2.482 -</style></pre> 2.483 - 2.484 - <p> 2.485 - The ''toggle()'' notation can't be used here, 2.486 - because 'background-color' isn't inherited 2.487 - (and thus the nested comments see the initial value of ''transparent'' rather than ''white'' or ''silver''). 2.488 - Even if the author explicitly sets ''background-color:inherit'' on <code><div class='main'></code> 2.489 - so that ''toggle()'' can actually see the right value, 2.490 - that will make the ".main" elements cover up the 'background-image' that ".comment" has on it as well. 2.491 - Because variables don't have any effect on rendering until they're used, 2.492 - they can pass these values through the document without these kinds of side effects. 2.493 - 2.494 - <p> 2.495 - The ''var()'' notation can't be used here either 2.496 - as it would immediately produce a cycle between $bg and $bg2, 2.497 - making them both invalid. 2.498 - </div> 2.499 2.500 <h3 id='using-invalid-variables'> 2.501 Using Invalid Variables</h3> 2.502 2.503 <p> 2.504 - When a <i>variable property</i> has its initial value, 2.505 + When a <i>custom property</i> has its initial value, 2.506 the <i>variable</i> it defines 2.507 represents an <dfn>invalid variable</dfn>. 2.508 Using an <i>invalid variable</i> in a property value 2.509 - (including other <i>variable properties</i>) 2.510 + (including other <i>custom properties</i>) 2.511 makes the declaration <i>invalid at computed-value time</i>. 2.512 2.513 <p> 2.514 @@ -559,10 +499,10 @@ 2.515 <p> 2.516 For example, in the following code: 2.517 2.518 - <pre> 2.519 -:root { var-not-a-color: 20px; } 2.520 -p { background-color: red; } 2.521 -p { background-color: $not-a-color; }</pre> 2.522 + <pre><!-- 2.523 + -->:root { var-not-a-color: 20px; }
<!-- 2.524 + -->p { background-color: red; }
<!-- 2.525 + -->p { background-color: var(not-a-color); }</pre> 2.526 2.527 <p> 2.528 the <p> elements will have transparent backgrounds 2.529 @@ -588,52 +528,15 @@ 2.530 CSSOM</h2> 2.531 2.532 <p> 2.533 - <i>Variable properties</i> are ordinary properties, 2.534 + <i>Custom properties</i> are ordinary properties, 2.535 and can be read or modified using all of the existing CSSOM APIs for reading or modifying properties. 2.536 2.537 - <p> 2.538 - The specification extends the IDL definitions in the CSSOM spec to represent the use of the ''var()'' function. 2.539 - 2.540 -<h3 id='cssom-cssvariable'> 2.541 -Interface CSSVariableComponentValue</h3> 2.542 - 2.543 - <p> 2.544 - The CSSVariableComponentValue interface represents a use of the ''var()'' function. 2.545 - 2.546 - <dl> 2.547 - <dt>IDL Definition 2.548 - <dd> 2.549 - <pre class='idl'> 2.550 -[NoInterfaceObject] interface CSSVariableComponentValue { 2.551 - attribute DOMString variableName; 2.552 - readonly attribute any variableValue; 2.553 -}</pre> 2.554 - 2.555 - <dt>Attributes 2.556 - <dd> 2.557 - <dl> 2.558 - <dt><code>variableName</code> of type <code>DOMString</code> 2.559 - <dd>This attribute represents the argument to the function. Changing this attribute changes the <i>variable property</i> being referred to. 2.560 - 2.561 - <dt><code>variableValue</code> of type <code>any</code>, readonly 2.562 - <dd>This attribute represents the value of the <i>variable property</i> the function is referencing. 2.563 - </dl> 2.564 - </dl> 2.565 - 2.566 -<h3 id='cssstyledeclaration-interface'> 2.567 -Additions to the <code>CSSStyleDeclaration</code> Interface</h3> 2.568 - 2.569 <p class='issue'> 2.570 - The set of variable properties is open-ended, 2.571 - so it's not clear how best to represent this. 2.572 - Ideally, 2.573 - the CSSOM would expose the current set of properties 2.574 - with a non-initial value 2.575 - and allow setting of arbitrary properties. 2.576 - The most natural way seems to be to first, 2.577 - set up a getter behavior on the interface somehow that deals with variable properties, 2.578 - and second, 2.579 - set up a <code>vars</code> map that exposes the variable properties that aren't set to their initial value. 2.580 + Right now, the CSSStyleDeclaration interface can be specced and implemented as a normal interface that just has a *ton* of attributes. 2.581 + (In practice, we don't spec it this way, because it was difficult to extend before partial interfaces were created, but I think it's implemented this way.) 2.582 + However, variables mess this up - there's an infinite number of them. 2.583 + Ideally we'd only expose the valid ones (those set to a non-initial value). 2.584 + How to spec this? 2.585 2.586 <h2 id="conformance"> 2.587 Conformance</h2>
3.1 --- a/css3-gcpm/Overview.html Mon Aug 27 17:46:13 2012 +0200 3.2 +++ b/css3-gcpm/Overview.html Mon Aug 27 17:50:16 2012 +0200 3.3 @@ -21,13 +21,13 @@ 3.4 3.5 <h1>CSS Generated Content for Paged Media Module</h1> 3.6 3.7 - <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 17 August 2012</h2> 3.8 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 23 August 2012</h2> 3.9 3.10 <dl> 3.11 <dt>This version: 3.12 3.13 <dd><a 3.14 - href="http://www.w3.org/TR/2012/ED-css3-gcpm-20120817/">http://www.w3.org/TR/2012/ED-css3-gcpm-20120817/</a> 3.15 + href="http://www.w3.org/TR/2012/ED-css3-gcpm-20120823/">http://www.w3.org/TR/2012/ED-css3-gcpm-20120823/</a> 3.16 3.17 <dt>Latest version: 3.18 3.19 @@ -194,6 +194,16 @@ 3.20 marks and bleed area</a> 3.21 3.22 <li><a href="#bookmarks"><span class=secno>7. </span>Bookmarks</a> 3.23 + <ul class=toc> 3.24 + <li><a href="#bookmark-level"><span class=secno>7.1. </span>‘<code 3.25 + class=property>bookmark-level</code>’</a> 3.26 + 3.27 + <li><a href="#bookmark-label"><span class=secno>7.2. </span>‘<code 3.28 + class=property>bookmark-label</code>’</a> 3.29 + 3.30 + <li><a href="#bookmark-state"><span class=secno>7.3. </span>‘<code 3.31 + class=property>bookmark-state</code>’</a> 3.32 + </ul> 3.33 3.34 <li><a href="#cmyk-colors"><span class=secno>8. </span>CMYK colors</a> 3.35 3.36 @@ -255,9 +265,12 @@ 3.37 <li><a href="#selecting-lines"><span class=secno>18. </span>Selecting 3.38 lines</a> 3.39 3.40 - <li><a href="#conformance"><span class=secno>19. </span>Conformance</a> 3.41 - 3.42 - <li><a href="#appendix-a-default-style-sheet"><span class=secno>20. 3.43 + <li><a href="#conditional-text"><span class=secno>19. </span>Conditional 3.44 + text</a> 3.45 + 3.46 + <li><a href="#conformance"><span class=secno>20. </span>Conformance</a> 3.47 + 3.48 + <li><a href="#appendix-a-default-style-sheet"><span class=secno>21. 3.49 </span>Appendix A: Default style sheet</a> 3.50 3.51 <li class=no-num><a href="#acknowledgments">Acknowledgments</a> 3.52 @@ -486,9 +499,8 @@ 3.53 <p>The name space of named strings is different from other sets of names in 3.54 CSS. 3.55 3.56 - <p>The ‘<a href="#string-set"><code 3.57 - class=property>string-set</code></a>’ property copies text as well as 3.58 - white-space into the named string. 3.59 + <p>The textual content is processed as if ‘<code class=css>white-space: 3.60 + normal</code>’ had been set. 3.61 3.62 <div class=example> 3.63 <pre> 3.64 @@ -2405,17 +2417,23 @@ 3.65 <h2 id=bookmarks><span class=secno>7. </span>Bookmarks</h2> 3.66 3.67 <p>Some document formats have the capability of holding bookmarks. 3.68 - Bookmarks are typically shown outside the document itself, often a 3.69 - tree-structured and clickable table of contents to help navigate in the 3.70 - electronic version of the document. To generate bookmarks, these 3.71 - properties are defined: 3.72 + Bookmarks are typically shown outside the document itself, often in a 3.73 + tree-structured and clickable table of contents. To generate bookmarks, 3.74 + these properties are defined: ‘<a href="#bookmark-level0"><code 3.75 + class=property>bookmark-level</code></a>’, ‘<a 3.76 + href="#bookmark-label0"><code class=property>bookmark-label</code></a>’, 3.77 + and ‘<a href="#bookmark-state0"><code 3.78 + class=property>bookmark-state</code></a>’. 3.79 + 3.80 + <h3 id=bookmark-level><span class=secno>7.1. </span>‘<a 3.81 + href="#bookmark-level0"><code class=property>bookmark-level</code></a>’</h3> 3.82 3.83 <table class=propdef> 3.84 <tbody> 3.85 <tr> 3.86 <td><em>Name:</em> 3.87 3.88 - <td><dfn id=bookmark-level>bookmark-level</dfn> 3.89 + <td><dfn id=bookmark-level0>bookmark-level</dfn> 3.90 3.91 <tr> 3.92 <td><em>Value:</em> 3.93 @@ -2454,9 +2472,21 @@ 3.94 </table> 3.95 3.96 <p>This property describes what level a certain bookmark has in a 3.97 - hierarchical bookmark structure. The highest level is ‘<code 3.98 - class=css>1</code>’, then ‘<code class=css>2</code>’, ‘<code 3.99 - class=css>3</code>’ etc. 3.100 + hierarchical bookmark structure. The values are: 3.101 + 3.102 + <dl> 3.103 + <dt>none 3.104 + 3.105 + <dd>no bookmark is generated 3.106 + 3.107 + <dt><integer> 3.108 + 3.109 + <dd>Indicates the level of the bookmark; the highest level is ‘<code 3.110 + class=css>1</code>’, then ‘<code class=css>2</code>’, ‘<code 3.111 + class=css>3</code>’ etc. A bookmark will be generated only if ‘<a 3.112 + href="#bookmark-label0"><code class=property>bookmark-label</code></a>’ 3.113 + also has a value different from ‘<code class=property>none</code>’. 3.114 + </dl> 3.115 3.116 <div class=example> 3.117 <pre> 3.118 @@ -2466,17 +2496,20 @@ 3.119 </pre> 3.120 </div> 3.121 3.122 + <h3 id=bookmark-label><span class=secno>7.2. </span>‘<a 3.123 + href="#bookmark-label0"><code class=property>bookmark-label</code></a>’</h3> 3.124 + 3.125 <table class=propdef> 3.126 <tbody> 3.127 <tr> 3.128 <td><em>Name:</em> 3.129 3.130 - <td><dfn id=bookmark-label>bookmark-label</dfn> 3.131 + <td><dfn id=bookmark-label0>bookmark-label</dfn> 3.132 3.133 <tr> 3.134 <td><em>Value:</em> 3.135 3.136 - <td>[ <content-list> ]+ | none 3.137 + <td><content-list> | none 3.138 3.139 <tr> 3.140 <td><em>Initial:</em> 3.141 @@ -2510,9 +2543,19 @@ 3.142 </table> 3.143 3.144 <p>This property specifies the label of the bookmark, i.e., the text that 3.145 - will represent the bookmark in the bookmark structure. <content-list> 3.146 - is defined on the ‘<a href="#string-set"><code 3.147 - class=property>string-set</code></a>’ property. 3.148 + will represent the bookmark in the bookmark structure. The values are: 3.149 + 3.150 + <dl> 3.151 + <dt><content-list>, as defined on the ‘<a href="#string-set"><code 3.152 + class=property>string-set</code></a>’ property. A bookmark will be 3.153 + generated only if ‘<a href="#bookmark-level0"><code 3.154 + class=property>bookmark-level</code></a>’ also has a value different 3.155 + from ‘<code class=property>none</code>’. 3.156 + 3.157 + <dt>none 3.158 + 3.159 + <dd>no bookmark is generated 3.160 + </dl> 3.161 3.162 <div class=example> 3.163 <pre> 3.164 @@ -2523,55 +2566,39 @@ 3.165 #frog { bookmark-label: "The green frog" } 3.166 </pre> 3.167 </div> 3.168 - 3.169 - <table class=propdef> 3.170 - <tbody> 3.171 + <!-- 3.172 + 3.173 +<table class=propdef> 3.174 <tr> 3.175 - <td><em>Name:</em> 3.176 - 3.177 - <td><dfn id=bookmark-target>bookmark-target</dfn> 3.178 - 3.179 + <td><em>Name:</em> 3.180 + <td><dfn>bookmark-target</dfn> 3.181 <tr> 3.182 - <td><em>Value:</em> 3.183 - 3.184 - <td>none | <uri> 3.185 - 3.186 + <td><em>Value:</em> 3.187 + <td>none | <uri> 3.188 <tr> 3.189 - <td><em>Initial:</em> 3.190 - 3.191 - <td>none 3.192 - 3.193 + <td><em>Initial:</em> 3.194 + <td>none 3.195 <tr> 3.196 - <td><em>Applies to:</em> 3.197 - 3.198 - <td>all elements 3.199 - 3.200 + <td><em>Applies to:</em> 3.201 + <td>all elements 3.202 <tr> 3.203 - <td><em>Inherited:</em> 3.204 - 3.205 - <td>no 3.206 - 3.207 + <td><em>Inherited:</em> 3.208 + <td>no 3.209 <tr> 3.210 - <td><em>Percentages:</em> 3.211 - 3.212 - <td>N/A 3.213 - 3.214 + <td><em>Percentages:</em> 3.215 + <td>N/A 3.216 <tr> 3.217 - <td><em>Media:</em> 3.218 - 3.219 - <td>all 3.220 - 3.221 + <td><em>Media:</em> 3.222 + <td>all 3.223 <tr> 3.224 - <td><em>Computed value:</em> 3.225 - 3.226 - <td>For URI values, the absolute URI; for ‘<code 3.227 - class=property>none</code>’, as specified. 3.228 - </table> 3.229 - 3.230 - <p>This property specifies the target of the bookmark link. 3.231 - 3.232 - <div class=example> 3.233 - <pre> 3.234 + <td><em>Computed value:</em> 3.235 + <td>For URI values, the absolute URI; for 'none', as specified. 3.236 +</table> 3.237 + 3.238 +<p>This property specifies the target of the bookmark link. 3.239 + 3.240 +<div class=example> 3.241 +<pre> 3.242 .bookmark { 3.243 bookmark-label: attr(title); 3.244 bookmark-target: attr(href url); 3.245 @@ -2579,17 +2606,23 @@ 3.246 ... 3.247 <a class="bookmark" title="The green pear" href="#pears"/> 3.248 </pre> 3.249 - </div> 3.250 - 3.251 - <div class=example> .example { bookmark-target: url(http://www.example.com) 3.252 - }</div> 3.253 +</div> 3.254 + 3.255 +<div class=example> 3.256 +.example { bookmark-target: url(http://www.example.com) } 3.257 +</div> 3.258 + 3.259 +--> 3.260 + 3.261 + <h3 id=bookmark-state><span class=secno>7.3. </span>‘<a 3.262 + href="#bookmark-state0"><code class=property>bookmark-state</code></a>’</h3> 3.263 3.264 <table class=propdef> 3.265 <tbody> 3.266 <tr> 3.267 <td><em>Name:</em> 3.268 3.269 - <td><dfn id=bookmark-state>bookmark-state</dfn> 3.270 + <td><dfn id=bookmark-state0>bookmark-state</dfn> 3.271 3.272 <tr> 3.273 <td><em>Value:</em> 3.274 @@ -2958,46 +2991,63 @@ 3.275 <dt>bottom-corner 3.276 3.277 <dd>similar to ‘<code class=property>top-corner</code>’, exept the box 3.278 - is floated to the bottom 3.279 - 3.280 - <dt>snap(<length>) 3.281 - 3.282 - <dd>same as ‘<code class=property>top</code>’ if the box is naturally 3.283 - near the top; same as ‘<code class=property>bottom</code>’ if the box 3.284 - is naturally near the bottom. If the box naturally leads to a 3.285 - (page/column) break, the box is floated to the top of the next 3.286 - page/column. The length value specifies how far from the top/bottom the 3.287 - element can be influenced. 3.288 - <div class=example> 3.289 - <p>In this example, tables will snap to the top/bottom if the top/bottom 3.290 - of the border box is closer than ‘<code class=css>3em</code>’ from 3.291 - the top/bottom of the page/column. 3.292 - 3.293 - <pre> 3.294 + is floated to the bottom <!-- 3.295 +<dt>snap(<length>, [top | bottom]) 3.296 + 3.297 +<dd>same as 'top' if the box is naturally near the top; same as 3.298 +'bottom' if the box is naturally near the bottom. If the box naturally 3.299 +leads to a (page/column) break, the box is floated to the top of the 3.300 +next page/column. The first optionaloptional length value specifies how far from the 3.301 +top/bottom the element can be influenced, The second 3.302 +--> 3.303 + 3.304 + 3.305 + <dt>snap(<length> <length>? [, top | bottom | near ]?) 3.306 + 3.307 + <dd> 3.308 + <p>Makes the element float to the top or bottom if it naturally appears 3.309 + within a certain distance from the top or bottom. The length value(s) 3.310 + specifies the maxium distance from the top/bottom that an element must 3.311 + be within in order to be floated; one length value specifies the 3.312 + distance from both the top and the bottom, two length values specify the 3.313 + distance from the top and bottom, respectively. If an element is within 3.314 + the specified distance from both the top and the bottom, bottom wins. 3.315 + 3.316 + <p>The optional keyword value specifies where the element is floated: 3.317 + top, bottom, or the nearest of the two. The initial value is ‘<code 3.318 + class=property>near</code>’. 3.319 + 3.320 + <p>An element is considered to be a float if it has a snap() value, even 3.321 + if the element does not appear within the specified distance. This way, 3.322 + it can be determined whether an element is float or not without laying 3.323 + out the document. 3.324 + 3.325 + <dt>snap 3.326 + 3.327 + <dd>same as <tt>snap(2em, near)</tt> 3.328 + </dl> 3.329 + 3.330 + <div class=example> 3.331 + <p>In this example, tables will snap to the top/bottom if the top/bottom 3.332 + of the border box is closer than ‘<code class=css>3em</code>’ from 3.333 + the top/bottom of the page/column. 3.334 + 3.335 + <pre> 3.336 +table { float: snap } 3.337 table { float: snap(3em) } 3.338 +table { float: snap(3em, bottom) } 3.339 +table { float: snap(3em 2em, bottom) } 3.340 </pre> 3.341 - </div> 3.342 - 3.343 - <p>If the functional notation is not used, an implementation-dependent 3.344 - value is used. 3.345 - 3.346 - <div class=example> 3.347 - <pre> 3.348 -table { float: snap } 3.349 -</pre> 3.350 - </div> 3.351 - 3.352 - <p class=issue>Should we define a reasonable default (say, 3em) instead 3.353 - of relying on implementation-specific values? 3.354 - 3.355 - <p class=issue>Do numberic values make sense, like for orphans/widows 3.356 - 3.357 - <p class=issue>Does the "snap" solution address all use cases for 3.358 - "unless-room"/"unless-fit"? 3.359 - </dl> 3.360 - <!-- 3.361 + </div> 3.362 + 3.363 + <p class=issue>Should we define a reasonable default (say, 3em) instead of 3.364 + relying on implementation-specific values? 3.365 + 3.366 + <p class=issue>Do numberic values (in addition to length values) make 3.367 + sense, like for orphans/widows <!-- 3.368 The 'widows'/'orphans' properties may be consulted to determine if the box is near the top/bottom. 3.369 --> 3.370 + 3.371 3.372 <p>These new keywords only apply in paged media; in continous media 3.373 declarations with these keywords are ignored. 3.374 @@ -3981,11 +4031,21 @@ 3.375 </pre> 3.376 </div> 3.377 3.378 - <h2 id=conformance><span class=secno>19. </span>Conformance</h2> 3.379 + <h2 id=conditional-text><span class=secno>19. </span>Conditional text</h2> 3.380 + 3.381 + <div class=example> 3.382 + <pre> 3.383 + a:target-layout(attr(href url), same-page) { content: " on this page" } 3.384 + a:target-layout(attr(href url), next-page) { content: " on the next page" } 3.385 + a:target-layout(attr(href url), previous-page) { content: " on the previous page" } 3.386 +</pre> 3.387 + </div> 3.388 + 3.389 + <h2 id=conformance><span class=secno>20. </span>Conformance</h2> 3.390 3.391 <p>TBD 3.392 3.393 - <h2 id=appendix-a-default-style-sheet><span class=secno>20. </span>Appendix 3.394 + <h2 id=appendix-a-default-style-sheet><span class=secno>21. </span>Appendix 3.395 A: Default style sheet</h2> 3.396 3.397 <pre> 3.398 @@ -4027,7 +4087,8 @@ 3.399 Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr., Jacob Grundtvig Refstrup, 3.400 James Elmore, Ian Tindale, Murakami Shinyu, Paul E. Merrell, Philip 3.401 Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek Çelik, Florian 3.402 - Rivoal, Alex Mogilevsky. 3.403 + Rivoal, Alex Mogilevsky, Simon Sapin, Cameron McCormack, Liam R E Quin, 3.404 + Peter Moulder. 3.405 3.406 <h2 class=no-num id=references>References</h2> 3.407 3.408 @@ -4087,17 +4148,14 @@ 3.409 <ul class=indexlist> 3.410 <li>bleed, <a href="#bleed" title=bleed><strong>6.</strong></a> 3.411 3.412 - <li>bookmark-label, <a href="#bookmark-label" 3.413 - title=bookmark-label><strong>7.</strong></a> 3.414 - 3.415 - <li>bookmark-level, <a href="#bookmark-level" 3.416 - title=bookmark-level><strong>7.</strong></a> 3.417 - 3.418 - <li>bookmark-state, <a href="#bookmark-state" 3.419 - title=bookmark-state><strong>7.</strong></a> 3.420 - 3.421 - <li>bookmark-target, <a href="#bookmark-target" 3.422 - title=bookmark-target><strong>7.</strong></a> 3.423 + <li>bookmark-label, <a href="#bookmark-label0" 3.424 + title=bookmark-label><strong>7.2.</strong></a> 3.425 + 3.426 + <li>bookmark-level, <a href="#bookmark-level0" 3.427 + title=bookmark-level><strong>7.1.</strong></a> 3.428 + 3.429 + <li>bookmark-state, <a href="#bookmark-state0" 3.430 + title=bookmark-state><strong>7.3.</strong></a> 3.431 3.432 <li>clear-side, <a href="#clear-side" 3.433 title=clear-side><strong>14.3.</strong></a> 3.434 @@ -4155,9 +4213,9 @@ 3.435 <td>visual 3.436 3.437 <tr> 3.438 - <th><a class=property href="#bookmark-label">bookmark-label</a> 3.439 - 3.440 - <td>[ <content-list> ]+ | none 3.441 + <th><a class=property href="#bookmark-label0">bookmark-label</a> 3.442 + 3.443 + <td><content-list> | none 3.444 3.445 <td>none 3.446 3.447 @@ -4170,7 +4228,7 @@ 3.448 <td>all 3.449 3.450 <tr> 3.451 - <th><a class=property href="#bookmark-level">bookmark-level</a> 3.452 + <th><a class=property href="#bookmark-level0">bookmark-level</a> 3.453 3.454 <td>none | <integer> 3.455 3.456 @@ -4185,7 +4243,7 @@ 3.457 <td>all 3.458 3.459 <tr> 3.460 - <th><a class=property href="#bookmark-state">bookmark-state</a> 3.461 + <th><a class=property href="#bookmark-state0">bookmark-state</a> 3.462 3.463 <td>open | closed 3.464 3.465 @@ -4200,21 +4258,6 @@ 3.466 <td>all 3.467 3.468 <tr> 3.469 - <th><a class=property href="#bookmark-target">bookmark-target</a> 3.470 - 3.471 - <td>none | <uri> 3.472 - 3.473 - <td>none 3.474 - 3.475 - <td>all elements 3.476 - 3.477 - <td>no 3.478 - 3.479 - <td>N/A 3.480 - 3.481 - <td>all 3.482 - 3.483 - <tr> 3.484 <th><a class=property href="#clear-side">clear-side</a> 3.485 3.486 <td>auto | both
4.1 --- a/css3-gcpm/Overview.src.html Mon Aug 27 17:46:13 2012 +0200 4.2 +++ b/css3-gcpm/Overview.src.html Mon Aug 27 17:50:16 2012 +0200 4.3 @@ -255,8 +255,8 @@ 4.4 <p>The name space of named strings is different from other sets of 4.5 names in CSS. 4.6 4.7 -<p>The 'string-set' property copies text as well as white-space into 4.8 -the named string. 4.9 +<p>The textual content is processed as if 'white-space: normal' had been set. 4.10 + 4.11 4.12 <div class="example"> 4.13 <pre> 4.14 @@ -2097,10 +2097,12 @@ 4.15 <h2>Bookmarks</h2> 4.16 4.17 <p>Some document formats have the capability of holding bookmarks. 4.18 -Bookmarks are typically shown outside the document itself, often a 4.19 -tree-structured and clickable table of contents to help navigate in 4.20 -the electronic version of the document. To generate bookmarks, these 4.21 -properties are defined: 4.22 +Bookmarks are typically shown outside the document itself, often in a 4.23 +tree-structured and clickable table of contents. To generate 4.24 +bookmarks, these properties are defined: 'bookmark-level', 4.25 +'bookmark-label', and 'bookmark-state'. 4.26 + 4.27 +<h3>'bookmark-level'</h3> 4.28 4.29 <table class=propdef> 4.30 <tr> 4.31 @@ -2129,9 +2131,22 @@ 4.32 <td>specified value 4.33 </table> 4.34 4.35 + 4.36 <p>This property describes what level a certain bookmark has in a 4.37 -hierarchical bookmark structure. The highest level is ''1'', then 4.38 -''2'', ''3'' etc. 4.39 +hierarchical bookmark structure. The values are: 4.40 + 4.41 +<dl> 4.42 + 4.43 +<dt>none 4.44 + 4.45 +<dd>no bookmark is generated 4.46 + 4.47 +<dt><integer> 4.48 + 4.49 +<dd>Indicates the level of the bookmark; the highest level is ''1'', then ''2'', ''3'' etc. A bookmark will be generated only if 'bookmark-label' also has a value different from 'none'. 4.50 + 4.51 +</dl> 4.52 + 4.53 4.54 <div class="example"> 4.55 <pre> 4.56 @@ -2142,13 +2157,15 @@ 4.57 </div> 4.58 4.59 4.60 +<h3>'bookmark-label'</h3> 4.61 + 4.62 <table class=propdef> 4.63 <tr> 4.64 <td><em>Name:</em> 4.65 <td><dfn>bookmark-label</dfn> 4.66 <tr> 4.67 <td><em>Value:</em> 4.68 - <td>[ <content-list> ]+ | none 4.69 + <td><content-list> | none 4.70 <tr> 4.71 <td><em>Initial:</em> 4.72 <td>none 4.73 @@ -2169,7 +2186,18 @@ 4.74 <td>specified value 4.75 </table> 4.76 4.77 -<p>This property specifies the label of the bookmark, i.e., the text that will represent the bookmark in the bookmark structure. <content-list> is defined on the 'string-set' property. 4.78 +<p>This property specifies the label of the bookmark, i.e., the text that will represent the bookmark in the bookmark structure. The values are: 4.79 + 4.80 +<dl> 4.81 + 4.82 +<dt><content-list>, as defined on the 'string-set' property. A bookmark will be generated only if 'bookmark-level' also has a value different from 'none'. 4.83 + 4.84 +<dt>none 4.85 + 4.86 +<dd>no bookmark is generated 4.87 + 4.88 +</dl> 4.89 + 4.90 4.91 <div class="example"> 4.92 <pre> 4.93 @@ -2181,6 +2209,8 @@ 4.94 </pre> 4.95 </div> 4.96 4.97 +<!-- 4.98 + 4.99 <table class=propdef> 4.100 <tr> 4.101 <td><em>Name:</em> 4.102 @@ -2225,6 +2255,9 @@ 4.103 .example { bookmark-target: url(http://www.example.com) } 4.104 </div> 4.105 4.106 +--> 4.107 + 4.108 +<h3>'bookmark-state'</h3> 4.109 4.110 <table class=propdef> 4.111 <tr> 4.112 @@ -2569,36 +2602,44 @@ 4.113 <dt>bottom-corner 4.114 <dd>similar to 'top-corner', exept the box is floated to the bottom 4.115 4.116 -<dt>snap(<length>) 4.117 +<!-- 4.118 +<dt>snap(<length>, [top | bottom]) 4.119 4.120 <dd>same as 'top' if the box is naturally near the top; same as 4.121 'bottom' if the box is naturally near the bottom. If the box naturally 4.122 leads to a (page/column) break, the box is floated to the top of the 4.123 -next page/column. The length value specifies how far from the 4.124 -top/bottom the element can be influenced. 4.125 +next page/column. The first optionaloptional length value specifies how far from the 4.126 +top/bottom the element can be influenced, The second 4.127 +--> 4.128 + 4.129 +<dt>snap(<length> <length>? [, top | bottom | near ]?) 4.130 + 4.131 +<dd><p>Makes the element float to the top or bottom if it naturally appears within a certain distance from the top or bottom. The length value(s) specifies the maxium distance from the top/bottom that an element must be within in order to be floated; one length value specifies the distance from both the top and the bottom, two length values specify the distance from the top and bottom, respectively. If an element is within the specified distance from both the top and the bottom, bottom wins. 4.132 + 4.133 +<p>The optional keyword value specifies where the element is floated: top, bottom, or the nearest of the two. The initial value is 'near'. 4.134 + 4.135 +<p>An element is considered to be a float if it has a snap() value, even if the element does not appear within the specified distance. This way, it can be determined whether an element is float or not without laying out the document. 4.136 + 4.137 +<dt>snap 4.138 + 4.139 +<dd>same as <tt>snap(2em, near)</tt> 4.140 + 4.141 +</dl> 4.142 4.143 <div class=example> 4.144 <p>In this example, tables will snap to the top/bottom if the top/bottom of the border box is closer than '3em' from the top/bottom of the page/column. 4.145 4.146 <pre> 4.147 +table { float: snap } 4.148 table { float: snap(3em) } 4.149 +table { float: snap(3em, bottom) } 4.150 +table { float: snap(3em 2em, bottom) } 4.151 </pre> 4.152 </div> 4.153 4.154 -<p>If the functional notation is not used, an implementation-dependent value is used. 4.155 - 4.156 -<div class=example> 4.157 -<pre> 4.158 -table { float: snap } 4.159 -</pre> 4.160 -</div> 4.161 - 4.162 <p class=issue>Should we define a reasonable default (say, 3em) instead of relying on implementation-specific values? 4.163 -<p class=issue>Do numberic values make sense, like for orphans/widows 4.164 -<p class=issue>Does the "snap" solution address all use cases for "unless-room"/"unless-fit"? 4.165 - 4.166 - 4.167 -</dl> 4.168 +<p class=issue>Do numberic values (in addition to length values) make sense, like for orphans/widows 4.169 + 4.170 4.171 <!-- 4.172 The 'widows'/'orphans' properties may be consulted to determine if the box is near the top/bottom. 4.173 @@ -3578,6 +3619,16 @@ 4.174 </pre> 4.175 </div> 4.176 4.177 +<h2>Conditional text</h2> 4.178 + 4.179 +<div class=example> 4.180 +<pre> 4.181 + a:target-layout(attr(href url), same-page) { content: " on this page" } 4.182 + a:target-layout(attr(href url), next-page) { content: " on the next page" } 4.183 + a:target-layout(attr(href url), previous-page) { content: " on the previous page" } 4.184 +</pre> 4.185 +</div> 4.186 + 4.187 4.188 <h2>Conformance</h2> 4.189 4.190 @@ -3623,7 +3674,7 @@ 4.191 Miller, Werner Donné, Tarquin (Mark) Wilton-Jones, Michel Fortin, 4.192 Christian Roth, Brady Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr., 4.193 Jacob Grundtvig Refstrup, James Elmore, Ian Tindale, Murakami Shinyu, Paul E. 4.194 -Merrell, Philip Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek Çelik, Florian Rivoal, Alex Mogilevsky.</p> 4.195 +Merrell, Philip Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek Çelik, Florian Rivoal, Alex Mogilevsky, Simon Sapin, Cameron McCormack, Liam R E Quin, Peter Moulder.</p> 4.196 4.197 <h2 class=no-num id=references>References</h2> 4.198
5.1 --- a/css3-lists/Overview.html Mon Aug 27 17:46:13 2012 +0200 5.2 +++ b/css3-lists/Overview.html Mon Aug 27 17:50:16 2012 +0200 5.3 @@ -25,12 +25,12 @@ 5.4 5.5 <h1>CSS Lists and Counters Module Level 3</h1> 5.6 5.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 August 2012</h2> 5.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 25 August 2012</h2> 5.9 5.10 <dl> 5.11 <dt>This version: 5.12 5.13 - <dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20120820">http://www.w3.org/TR/2012/WD-css3-lists-20120820</a>--> 5.14 + <dd><!--<a href="http://www.w3.org/TR/2012/WD-css3-lists-20120825">http://www.w3.org/TR/2012/WD-css3-lists-20120825</a>--> 5.15 <a 5.16 href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a> 5.17 5.18 @@ -172,8 +172,8 @@ 5.19 ‘<code class=css>marker</code>’ value for ‘<code 5.20 class=property>position</code>’</a> 5.21 5.22 - <li><a href="#marker-attachment"><span class=secno>7.2. </span> The 5.23 - ‘<code class=property>marker-attachment</code>’ property</a> 5.24 + <li><a href="#marker-side"><span class=secno>7.2. </span> The ‘<code 5.25 + class=property>marker-side</code>’ property</a> 5.26 </ul> 5.27 5.28 <li><a href="#counter"><span class=secno>8. </span> Automatic Counters and 5.29 @@ -354,12 +354,13 @@ 5.30 class=css>::marker</code>’ pseudo-elements; no other elements do. 5.31 5.32 <p> Additionally, <a href="#list-item"><i>list items</i></a> automatically 5.33 - increment the special ‘<code class=css>list-item</code>’ 5.34 - <i>counter</i>. Unless the ‘<a href="#counter-increment"><code 5.35 + increment the special ‘<code class=css>list-item</code>’ <a 5.36 + href="#counter0"><i>counter</i></a>. Unless the ‘<a 5.37 + href="#counter-increment"><code 5.38 class=property>counter-increment</code></a>’ property manually specifies 5.39 - a different increment for the ‘<code class=css>list-item</code>’ 5.40 - <i>counter</i>, it must be incremented by 1 on every <a 5.41 - href="#list-item"><i>list item</i></a>, at the same time that 5.42 + a different increment for the ‘<code class=css>list-item</code>’ <a 5.43 + href="#counter0"><i>counter</i></a>, it must be incremented by 1 on every 5.44 + <a href="#list-item"><i>list item</i></a>, at the same time that 5.45 <i>counters</i> are normally incremented. (This has no effect on the 5.46 values of the ‘<code class=css>counter-*</code>’ properties.) 5.47 5.48 @@ -1282,16 +1283,16 @@ 5.49 5.50 <dd> 5.51 <p> If the <a href="#ancestor-list-item"><i>ancestor list item</i></a> 5.52 - has ‘<code class=css>marker-attachment:list-item</code>’, the <a 5.53 + has ‘<code class=css>marker-side:list-item</code>’, the <a 5.54 href="#marker-positioning-reference-element"><i>marker positioning 5.55 reference element</i></a> is the <a 5.56 href="#ancestor-list-item"><i>ancestor list item</i></a>. 5.57 5.58 <p> Otherwise, if the <a href="#ancestor-list-item"><i>ancestor list 5.59 - item</i></a> has ‘<code 5.60 - class=css>marker-attachment:list-container</code>’ and has a parent 5.61 - element, the <a href="#marker-positioning-reference-element"><i>marker 5.62 - positioning reference element</i></a> is the <a 5.63 + item</i></a> has ‘<code class=css>marker-side:list-container</code>’ 5.64 + and has a parent element, the <a 5.65 + href="#marker-positioning-reference-element"><i>marker positioning 5.66 + reference element</i></a> is the <a 5.67 href="#ancestor-list-item"><i>ancestor list item's</i></a> parent. 5.68 5.69 <p> Otherwise, the <a 5.70 @@ -1331,8 +1332,8 @@ 5.71 5.72 <p class=note> Note: The purpose of this somewhat convoluted definition is 5.73 to position the marker flush against its list item, and then when 5.74 - "marker-attachment:list-container", keep all the markers for a given list 5.75 - on the same side of their list items even in mixed-direction text, so that 5.76 + "marker-side:list-container", keep all the markers for a given list on the 5.77 + same side of their list items even in mixed-direction text, so that 5.78 authors can specify padding on only one side of the list container and 5.79 still ensure their markers are visible. And on top of all that, do 5.80 something sane in the face of potentially differing writing-modes on the 5.81 @@ -1415,11 +1416,11 @@ 5.82 confident that the reference will always be resolvable. 5.83 </div> 5.84 5.85 - <h3 id=marker-attachment><span class=secno>7.2. </span> The ‘<a 5.86 - href="#marker-attachment0"><code 5.87 - class=property>marker-attachment</code></a>’ property</h3> 5.88 - 5.89 - <p>By default, elements or ‘<code class=css>::marker</code>’ 5.90 + <h3 id=marker-side><span class=secno>7.2. </span> The ‘<a 5.91 + href="#marker-side0"><code class=property>marker-side</code></a>’ 5.92 + property</h3> 5.93 + 5.94 + <p> By default, elements or ‘<code class=css>::marker</code>’ 5.95 pseudo-elements with ‘<code class=css>position:marker</code>’ position 5.96 themselves according to their list item's directionality. However, if the 5.97 list item is grouped with several other list items which may have 5.98 @@ -1427,18 +1428,17 @@ 5.99 "dir" attributes in an <ol> in HTML), it is sometimes more useful to 5.100 have all the markers line up on one side, so the author can specify a 5.101 single "gutter" on that side and be assured that all the markers will lie 5.102 - in that gutter and be visible. The ‘<a href="#marker-attachment0"><code 5.103 - class=property>marker-attachment</code></a>’ property defined in this 5.104 - section allows an author to control this, switching list items to 5.105 - positioning their markers based off the list container's directionality 5.106 - instead. 5.107 + in that gutter and be visible. The ‘<a href="#marker-side0"><code 5.108 + class=property>marker-side</code></a>’ property defined in this section 5.109 + allows an author to control this, switching list items to positioning 5.110 + their markers based off the list container's directionality instead. 5.111 5.112 <table class=propdef> 5.113 <tbody> 5.114 <tr> 5.115 <th>Property: 5.116 5.117 - <td><dfn id=marker-attachment0>marker-attachment</dfn> 5.118 + <td><dfn id=marker-side0>marker-side</dfn> 5.119 5.120 <tr> 5.121 <th>Value: 5.122 @@ -1453,7 +1453,7 @@ 5.123 <tr> 5.124 <th>Applies to: 5.125 5.126 - <td><a href="#list-item"><i title="list item">list items</i></a> 5.127 + <td><a href="#list-item"><i>list items</i></a> 5.128 5.129 <tr> 5.130 <th>Inherited: 5.131 @@ -1476,34 +1476,38 @@ 5.132 <td>specified value 5.133 </table> 5.134 5.135 - <p>When a list item has ‘<code 5.136 - class=css>marker-attachment:list-item</code>’, any <a 5.137 + <p> When a list item has ‘<code 5.138 + class=css>marker-side:list-item</code>’, any <a 5.139 href="#markers-associated-with-that-list-item"><i 5.140 title=associated-marker>markers associated with the list item</i></a> base 5.141 their positioning off of the directionality of the list item. When a list 5.142 - item has ‘<code class=css>marker-attachment:list-container</code>’, 5.143 - the <a href="#markers-associated-with-that-list-item"><i 5.144 + item has ‘<code class=css>marker-side:list-container</code>’, the <a 5.145 + href="#markers-associated-with-that-list-item"><i 5.146 title=associated-marker>associated markers</i></a> instead base their 5.147 positioning off of the directionality of the list item's parent element. 5.148 The normative meaning of this is specified in the section defining <a 5.149 href="#position-marker">position:marker</a>. 5.150 5.151 <div class=example> 5.152 - <p>Here is a visual rendering of the effect that ‘<a 5.153 - href="#marker-attachment0"><code 5.154 - class=property>marker-attachment</code></a>’ can have on a list. Both 5.155 - of the following renderings are generated from the following HTML, with 5.156 - the only difference being the value of ‘<a 5.157 - href="#marker-attachment0"><code 5.158 - class=property>marker-attachment</code></a>’ on the list: 5.159 - 5.160 - <pre> 5.161 -<ul> 5.162 - <li>english one 5.163 - <li dir=rtl>OWT WERBEH 5.164 - <li>english three 5.165 - <li dir=rtl>RUOF WERBEH 5.166 -</ul></pre> 5.167 + <p> Here is a visual rendering of the effect that ‘<a 5.168 + href="#marker-side0"><code class=property>marker-side</code></a>’ can 5.169 + have on a list. Both of the following renderings are generated from the 5.170 + following HTML, with the only difference being the value of ‘<a 5.171 + href="#marker-side0"><code class=property>marker-side</code></a>’ on 5.172 + the list: 5.173 + 5.174 + <pre><!-- 5.175 + --><ul> 5.176 +<!-- 5.177 + --> <li>english one 5.178 +<!-- 5.179 + --> <li dir=rtl>OWT WERBEH 5.180 +<!-- 5.181 + --> <li>english three 5.182 +<!-- 5.183 + --> <li dir=rtl>RUOF WERBEH 5.184 +<!-- 5.185 + --></ul></pre> 5.186 5.187 <table class=data style="width: 35em;"> 5.188 <thead> 5.189 @@ -1546,27 +1550,33 @@ 5.190 ‘<a href="#counter-reset"><code 5.191 class=property>counter-reset</code></a>’ properties</h2> 5.192 5.193 - <p>Automatic numbering in CSS2 is controlled with three properties: ‘<a 5.194 - href="#counter-increment"><code 5.195 + <p> A <dfn id=counter0>counter</dfn> is a special numeric object used, 5.196 + among other things, to automatically number list items in CSS. 5.197 + 5.198 + <p> A <a href="#counter0"><i>counter</i></a> has an integer value and a <a 5.199 + href="#scope"><i>scope</i></a> which dictates which elements share a given 5.200 + counter. The value of a <a href="#counter0"><i>counter</i></a> can be 5.201 + different on different elements in the document, allowing list items to 5.202 + generate successive numbers in their markers. They are created and 5.203 + manipulated with the ‘<a href="#counter-increment"><code 5.204 class=property>counter-increment</code></a>’, ‘<a 5.205 href="#counter-set"><code class=property>counter-set</code></a>’ and 5.206 ‘<a href="#counter-reset"><code 5.207 - class=property>counter-reset</code></a>’. The <dfn id=counters 5.208 - title="list counter">counters</dfn> defined by these properties are used 5.209 - with the ‘<code class=css>counter()</code>’ and ‘<code 5.210 - class=css>counters()</code>’ functions. 5.211 + class=property>counter-reset</code></a>’ properties, and used with the 5.212 + ‘<a href="#counter0"><code class=css>counter()</code></a>’ and 5.213 + ‘<code class=css>counters()</code>’ functions. 5.214 5.215 <table class=propdef> 5.216 <tbody> 5.217 <tr> 5.218 <th>Name: 5.219 5.220 - <td><dfn id=counter-increment>counter-increment</dfn> 5.221 + <td><dfn id=counter-reset>counter-reset</dfn> 5.222 5.223 <tr> 5.224 <th>Value: 5.225 5.226 - <td>[ <identifier> <integer>? ]+ | none 5.227 + <td>[ <ident> <integer>? ]+ | none 5.228 5.229 <tr> 5.230 <th>Initial: 5.231 @@ -1599,6 +1609,28 @@ 5.232 <td>specified value 5.233 </table> 5.234 5.235 + <p> The ‘<a href="#counter-reset"><code 5.236 + class=property>counter-reset</code></a>’ property creates new counters, 5.237 + with new associated <a href="#scope"><i>scopes</i></a>. Its values are 5.238 + defined as follows: 5.239 + 5.240 + <dl> 5.241 + <dt>none 5.242 + 5.243 + <dd> This element does not establish any new counters. 5.244 + 5.245 + <dt><code><ident> <integer>?</code> 5.246 + 5.247 + <dd> The element <a href="#establishes-a-counter"><i 5.248 + title="establishes a counter">establishes one or more new 5.249 + counters</i></a>. Each <code><ident></code> names a new counter which 5.250 + is created. 5.251 + <p> If an <code><integer></code> is provided after an 5.252 + <code><ident></code>, the newly established counter's value is set to 5.253 + that integer.. Otherwise, the starting value of the new counter is 5.254 + ‘<code class=css>0</code>’. 5.255 + </dl> 5.256 + 5.257 <table class=propdef> 5.258 <tbody> 5.259 <tr> 5.260 @@ -1609,7 +1641,7 @@ 5.261 <tr> 5.262 <th>Value: 5.263 5.264 - <td>[ <identifier> <integer>? ]+ | none 5.265 + <td>[ <ident> <integer>? ]+ | none 5.266 5.267 <tr> 5.268 <th>Initial: 5.269 @@ -1647,12 +1679,12 @@ 5.270 <tr> 5.271 <th>Name: 5.272 5.273 - <td><dfn id=counter-reset>counter-reset</dfn> 5.274 + <td><dfn id=counter-increment>counter-increment</dfn> 5.275 5.276 <tr> 5.277 <th>Value: 5.278 5.279 - <td>[ <identifier> <integer>? ]+ | none 5.280 + <td>[ <ident> <integer>? ]+ | none 5.281 5.282 <tr> 5.283 <th>Initial: 5.284 @@ -1685,37 +1717,39 @@ 5.285 <td>specified value 5.286 </table> 5.287 5.288 - <p>The ‘<a href="#counter-increment"><code 5.289 - class=property>counter-increment</code></a>’ property accepts one or 5.290 - more names of counters (identifiers), each one optionally followed by an 5.291 - integer. The integer indicates by how much the counter is incremented for 5.292 - the element it's set on. The default increment is ‘<code 5.293 - class=css>1</code>’. 5.294 - 5.295 - <p>The ‘<a href="#counter-set"><code 5.296 + <p> The ‘<a href="#counter-set"><code 5.297 class=property>counter-set</code></a>’ and ‘<a 5.298 - href="#counter-reset"><code class=property>counter-reset</code></a>’ 5.299 - properties also contains a list of one or more names of counters, each one 5.300 - optionally followed by an integer. The integer gives the value that the 5.301 - counter is set to on the element it's set on. The default is ‘<code 5.302 - class=css>0</code>’. 5.303 - 5.304 - <p>On all of these properties, a value of ‘<a 5.305 - href="#list-style-type-none"><code class=property>none</code></a>’ means 5.306 - that no counters are incremented, set, or reset, respectively. Counter 5.307 - names must not be ‘<code class=property>initial</code>’, ‘<code 5.308 - class=property>inherit</code>’, or ‘<a 5.309 - href="#list-style-type-none"><code class=property>none</code></a>’; 5.310 - using one of these keywords as a counter name makes the property invalid. 5.311 - 5.312 - <p>‘<a href="#counter-reset"><code 5.313 - class=property>counter-reset</code></a>’ always establishes a new <a 5.314 - href="#counter-scope"><i>counter scope</i></a> on the element it's set on. 5.315 - ‘<a href="#counter-increment"><code 5.316 - class=property>counter-increment</code></a>’ and ‘<a 5.317 - href="#counter-set"><code class=property>counter-set</code></a>’ 5.318 - sometimes establish a new <a href="#counter-scope"><i>counter 5.319 - scope</i></a> on the element they're set on. 5.320 + href="#counter-increment"><code 5.321 + class=property>counter-increment</code></a>’ properties manipulate the 5.322 + value of existing counters. They only create new counters if there is no 5.323 + counter of the given name on the element yet. Their values are defined as 5.324 + follows: 5.325 + 5.326 + <dl> 5.327 + <dt>none 5.328 + 5.329 + <dd> This element does not alter the value of any counters. 5.330 + 5.331 + <dt><code><ident> <integer>?</code> 5.332 + 5.333 + <dd> The element alters the value of one or more counters on it. If there 5.334 + is not currently a counter of the given name on the element, the element 5.335 + <a href="#establishes-a-counter"><i>establishes a counter</i></a> of the 5.336 + given name and initally sets its value to ‘<code class=css>0</code>’ 5.337 + (though it may then immediately set or increment that value to something 5.338 + different). 5.339 + <p> If an <code><integer></code> is provided after an 5.340 + <code><ident></code>, it sets the named counter to that integer (for 5.341 + ‘<a href="#counter-set"><code 5.342 + class=property>counter-set</code></a>’) or increments the value of the 5.343 + named counter by that integer (for ‘<a href="#counter-increment"><code 5.344 + class=property>counter-increment</code></a>’). Otherwise, the 5.345 + counter's value is set to ‘<code class=css>0</code>’ (for ‘<a 5.346 + href="#counter-set"><code class=property>counter-set</code></a>’) or 5.347 + incremented by ‘<code class=css>1</code>’ (for ‘<a 5.348 + href="#counter-increment"><code 5.349 + class=property>counter-increment</code></a>’). 5.350 + </dl> 5.351 5.352 <div class=example> 5.353 <p>This example shows a way to number chapters and sections with "Chapter 5.354 @@ -1733,13 +1767,13 @@ 5.355 }</pre> 5.356 </div> 5.357 5.358 - <p>Resetting a counter is done <em>before</em> setting a counter, which is 5.359 - done <em>before</em> incrementing a counter, which is done <em>before</em> 5.360 - using a counter (for example, in the ‘<code 5.361 + <p> Resetting a counter must be done <em>before</em> setting a counter, 5.362 + which must be done <em>before</em> incrementing a counter, which must be 5.363 + done <em>before</em> using a counter (for example, in the ‘<code 5.364 class=property>content</code>’ property). 5.365 5.366 <div class=note> 5.367 - <p>The counter properties follow the cascading rules as normal. Thus, due 5.368 + <p> The counter properties follow the cascading rules as normal. Thus, due 5.369 to cascading, the following style sheet: 5.370 5.371 <div class=example> 5.372 @@ -1748,14 +1782,14 @@ 5.373 H1 { counter-reset: imagenum 99 }</pre> 5.374 </div> 5.375 5.376 - <p>will only reset ‘<code class=property>imagenum</code>’. To reset 5.377 + <p> will only reset ‘<code class=property>imagenum</code>’. To reset 5.378 both counters, they have to be specified together: 5.379 5.380 <div class=example> 5.381 <pre>H1 { counter-reset: section -1 imagenum 99 }</pre> 5.382 </div> 5.383 5.384 - <p>The same principles apply to the ‘<a href="#counter-set"><code 5.385 + <p> The same principles apply to the ‘<a href="#counter-set"><code 5.386 class=property>counter-set</code></a>’ and ‘<a 5.387 href="#counter-increment"><code 5.388 class=property>counter-increment</code></a>’ properties. 5.389 @@ -1764,47 +1798,55 @@ 5.390 <h3 id=nested-counters><span class=secno>8.1. </span> Nested counters and 5.391 scope</h3> 5.392 5.393 - <p>Counters are "self-nesting", in the sense that resetting a counter in a 5.394 - child element automatically creates a new instance of the counter. This is 5.395 - important for situations like lists in HTML, where lists can be nested 5.396 - inside lists to arbitrary depth. It would be impossible to define uniquely 5.397 - named counters for each level. 5.398 + <p> Every <a href="#counter0"><i>counter</i></a> is associated with a <dfn 5.399 + id=scope title="scope|scopes">scope</dfn>, which defines which elements in 5.400 + the document share a given counter. 5.401 + 5.402 + <p> <a href="#scope"><i>Scopes</i></a> have a name, which is the same as 5.403 + their associated counter, a root element, which is the element that 5.404 + establishes the counter, and a set of contained elements, which are the 5.405 + elements that share the given counter. When an element <dfn 5.406 + id=establishes-a-counter>establishes a counter</dfn>, it creates a counter 5.407 + and scope of the given name, sets the scope's root element to the element 5.408 + that establishes it, and sets the contained elements to the element and 5.409 + its descendants, all following siblings of the root element up to but not 5.410 + including the first sibling that establishes a counter of the same name, 5.411 + and all descendants of those siblings. 5.412 + 5.413 + <p> The value of a counter can change across its scope. Whenever an element 5.414 + sets the value of a counter, the altered value is what is seen by all 5.415 + elements contained in the scope that are later in document order (unless, 5.416 + of course, another element between the two further alters the counter's 5.417 + value). 5.418 + 5.419 + <p> Counters are "self-nesting"; establishing a counter in an element 5.420 + already contained in the scope of another counter of the same name simply 5.421 + creates a new instance of the counter. This is important for situations 5.422 + like lists in HTML, where lists can be nested inside lists to arbitrary 5.423 + depth. It would be impossible to define uniquely named counters for each 5.424 + level. As explained in a later section, the ‘<a href="#counter0"><code 5.425 + class=css>counter()</code></a>’ function only uses the innermost counter 5.426 + of a given name on the element, but the ‘<code 5.427 + class=css>counters()</code>’ function uses all counters of a given name 5.428 + that contain the element. 5.429 5.430 <div class=example> 5.431 - <p>Thus, the following suffices to number nested list items. The result is 5.432 - very similar to that of setting ‘<code 5.433 + <p> Thus, the following suffices to number nested list items. The result 5.434 + is very similar to that of setting ‘<code 5.435 class=css>display:list-item</code>’ and ‘<code class=css>list-style: 5.436 inside</code>’ on the LI element: 5.437 5.438 <pre> 5.439 -OL { counter-reset: item } 5.440 -LI { display: block } 5.441 -LI:before { content: counter(item) ". "; counter-increment: item }</pre> 5.442 +ol { counter-reset: item } 5.443 +li { display: block } 5.444 +li::before { content: counter(item) ". "; counter-increment: item }</pre> 5.445 + 5.446 + <p> In this example, an OL will create a counter, and all children of the 5.447 + OL will refer to that counter. 5.448 </div> 5.449 5.450 - <p>The self-nesting is based on the principle that every element or 5.451 - pseudo-element that has a ‘<a href="#counter-reset"><code 5.452 - class=property>counter-reset</code></a>’ for a counter X, creates a 5.453 - fresh counter X, the <dfn id=counter-scope 5.454 - title="scope|counter scope">scope</dfn> of which is the element or 5.455 - pseudo-element, its following siblings up to but not including the first 5.456 - one that resets the same counter, and all the descendants of those 5.457 - elements. 5.458 - 5.459 - <p>Additionally, if an element has a ‘<a href="#counter-set"><code 5.460 - class=property>counter-set</code></a>’ or ‘<a 5.461 - href="#counter-increment"><code 5.462 - class=property>counter-increment</code></a>’ for a counter that is not 5.463 - in scope for the element, it establishes a scope for that counter 5.464 - identically to if ‘<a href="#counter-reset"><code 5.465 - class=property>counter-reset</code></a>’ were used on the element to 5.466 - reset the counter to ‘<code class=css>0</code>’. 5.467 - 5.468 - <p>In the example above, an OL will create a counter, and all children of 5.469 - the OL will refer to that counter. 5.470 - 5.471 - <div class=html-example> 5.472 - <p>If we denote by item[<var>n</var>] the <var>n</var><sup>th</sup> 5.473 + <div class=example> 5.474 + <p> If we denote by item[<var>n</var>] the <var>n</var><sup>th</sup> 5.475 instance of the "item" counter, and by "(" and ")"the beginning and end 5.476 of a scope, then the following HTML fragment will use the indicated 5.477 counters. (We assume the style sheet as given in the example above). 5.478 @@ -1830,24 +1872,9 @@ 5.479 <LI>item <!-- increment item[4] to 1 --> 5.480 <LI>item <!-- increment item[4] to 2 --> 5.481 </OL> <!-- ) --></pre> 5.482 - </div> 5.483 - 5.484 - <p>As explained in a later section, the ‘<code 5.485 - class=css>counter()</code>’ function generates a string based off of the 5.486 - innermost scope of the named counter, while the ‘<code 5.487 - class=css>counters()</code>’ function generates a string based on the 5.488 - values of <em>all</em> the in-scope counters with a given name. 5.489 - 5.490 - <div class=example> 5.491 - <p> 5.492 - 5.493 - <p>The following style sheet numbers nested list items as "1", "1.1", 5.494 - "1.1.1", etc. 5.495 - 5.496 - <pre> 5.497 -OL { counter-reset: item } 5.498 -LI { display: block } 5.499 -LI:before { content: counters(item, "."); counter-increment: item }</pre> 5.500 + 5.501 + <p class=issue> Rewrite this example as an image showing the scopes 5.502 + visually. 5.503 </div> 5.504 5.505 <h3 id=counters-without-boxes><span class=secno>8.2. </span> Counters in 5.506 @@ -1876,12 +1903,12 @@ 5.507 so do not apply here. 5.508 5.509 <h2 id=counter-function><span class=secno>9. </span> Printing Counters: the 5.510 - ‘<code class=css>counter()</code>’ and ‘<code 5.511 - class=css>counters()</code>’ functions</h2> 5.512 + ‘<a href="#counter0"><code class=css>counter()</code></a>’ and 5.513 + ‘<code class=css>counters()</code>’ functions</h2> 5.514 5.515 <p>Counters have no visible effect by themselves, but their values can be 5.516 - used in the ‘<code class=css>counter()</code>’ and ‘<code 5.517 - class=css>counters()</code>’ functions to generate counter 5.518 + used in the ‘<a href="#counter0"><code class=css>counter()</code></a>’ 5.519 + and ‘<code class=css>counters()</code>’ functions to generate counter 5.520 representations. This happens automatically in the default contents of 5.521 ‘<code class=css>::marker</code>’ pseudo-elements, but can be used by 5.522 an author anywhere that accepts a string. Their syntax is: 5.523 @@ -1903,10 +1930,10 @@ 5.524 named counter's value using the function's ‘<code 5.525 class=css><counter-style></code>’. If there are multiple counters of 5.526 that name in scope, the one whose scoping element is closest in 5.527 - document-order to the element on which ‘<code 5.528 - class=css>counter()</code>’ appears is used. If there are no counters of 5.529 - that name in scope, use the value ‘<code class=css>0</code>’ to 5.530 - generate the counter representation. If ‘<a 5.531 + document-order to the element on which ‘<a href="#counter0"><code 5.532 + class=css>counter()</code></a>’ appears is used. If there are no 5.533 + counters of that name in scope, use the value ‘<code 5.534 + class=css>0</code>’ to generate the counter representation. If ‘<a 5.535 href="#list-style-type-none"><code class=css>none</code></a>’ is 5.536 provided as the second argument, the ‘<a 5.537 href="#ltcounter-function"><code 5.538 @@ -2053,7 +2080,8 @@ 5.539 this in an open-ended manner, by allowing the author to define their own 5.540 counter styles. These styles can then be used in the ‘<a 5.541 href="#list-style-type"><code class=property>list-style-type</code></a>’ 5.542 - property or in the ‘<code class=css>counter()</code>’ and ‘<code 5.543 + property or in the ‘<a href="#counter0"><code 5.544 + class=css>counter()</code></a>’ and ‘<code 5.545 class=css>counters()</code>’ functions. 5.546 5.547 <p>A <dfn id=counter-style0>counter style</dfn> defines how to construct 5.548 @@ -3304,7 +3332,7 @@ 5.549 display: block; 5.550 margin: 1em 0; 5.551 padding-left: 40px; 5.552 - marker-attachment: list-container; 5.553 + marker-side: list-container; 5.554 } 5.555 5.556 ol ol, ol ul, ul ul, ul ol { 5.557 @@ -3456,7 +3484,7 @@ 5.558 <tr> 5.559 <th><a class=property href="#counter-increment">counter-increment</a> 5.560 5.561 - <td>[ <identifier> <integer>? ]+ | none 5.562 + <td>[ <ident> <integer>? ]+ | none 5.563 5.564 <td>none 5.565 5.566 @@ -3471,7 +3499,7 @@ 5.567 <tr> 5.568 <th><a class=property href="#counter-reset">counter-reset</a> 5.569 5.570 - <td>[ <identifier> <integer>? ]+ | none 5.571 + <td>[ <ident> <integer>? ]+ | none 5.572 5.573 <td>none 5.574 5.575 @@ -3486,7 +3514,7 @@ 5.576 <tr> 5.577 <th><a class=property href="#counter-set">counter-set</a> 5.578 5.579 - <td>[ <identifier> <integer>? ]+ | none 5.580 + <td>[ <ident> <integer>? ]+ | none 5.581 5.582 <td>none 5.583 5.584 @@ -3633,6 +3661,8 @@ 5.585 5.586 <li>circle, <a href="#circle" title=circle><strong>12.</strong></a> 5.587 5.588 + <li>counter, <a href="#counter0" title=counter><strong>8.</strong></a> 5.589 + 5.590 <li>counter-algorithm, <a href="#algorithm" 5.591 title=counter-algorithm><strong>10.</strong></a> 5.592 5.593 @@ -3660,9 +3690,6 @@ 5.594 <li>counter-reset, <a href="#counter-reset" 5.595 title=counter-reset><strong>8.</strong></a> 5.596 5.597 - <li>counter scope, <a href="#counter-scope" 5.598 - title="counter scope"><strong>8.1.</strong></a> 5.599 - 5.600 <li>counter-set, <a href="#counter-set" 5.601 title=counter-set><strong>8.</strong></a> 5.602 5.603 @@ -3702,6 +3729,9 @@ 5.604 5.605 <li>disc, <a href="#disc" title=disc><strong>12.</strong></a> 5.606 5.607 + <li>establishes a counter, <a href="#establishes-a-counter" 5.608 + title="establishes a counter"><strong>8.1.</strong></a> 5.609 + 5.610 <li>fallback, <a href="#descdef-fallback" 5.611 title=fallback><strong>10.6.</strong></a> 5.612 5.613 @@ -3730,9 +3760,6 @@ 5.614 <li>inside, <a href="#list-style-position-inside" 5.615 title=inside><strong>4.</strong></a> 5.616 5.617 - <li>list counter, <a href="#counters" 5.618 - title="list counter"><strong>8.</strong></a> 5.619 - 5.620 <li>list item, <a href="#list-item" 5.621 title="list item"><strong>2.</strong></a> 5.622 5.623 @@ -3766,9 +3793,6 @@ 5.624 <li>lower-roman, <a href="#lower-roman" 5.625 title=lower-roman><strong>12.</strong></a> 5.626 5.627 - <li>marker-attachment, <a href="#marker-attachment0" 5.628 - title=marker-attachment><strong>7.2.</strong></a> 5.629 - 5.630 <li>marker positioning edge, <a href="#marker-positioning-edge" 5.631 title="marker positioning edge"><strong>7.1.</strong></a> 5.632 5.633 @@ -3776,6 +3800,9 @@ 5.634 href="#marker-positioning-reference-element" 5.635 title="marker positioning reference element"><strong>7.1.</strong></a> 5.636 5.637 + <li>marker-side, <a href="#marker-side0" 5.638 + title=marker-side><strong>7.2.</strong></a> 5.639 + 5.640 <li>negative, <a href="#descdef-negative" 5.641 title=negative><strong>10.2.</strong></a> 5.642 5.643 @@ -3792,7 +3819,9 @@ 5.644 <li>range, <a href="#descdef-range" title=range><strong>10.5.</strong></a> 5.645 5.646 5.647 - <li>scope, <a href="#counter-scope" title=scope><strong>8.1.</strong></a> 5.648 + <li>scope, <a href="#scope" title=scope><strong>8.1.</strong></a> 5.649 + 5.650 + <li>scopes, <a href="#scope" title=scopes><strong>8.1.</strong></a> 5.651 5.652 <li>square, <a href="#square" title=square><strong>12.</strong></a> 5.653
6.1 --- a/css3-lists/Overview.src.html Mon Aug 27 17:46:13 2012 +0200 6.2 +++ b/css3-lists/Overview.src.html Mon Aug 27 17:50:16 2012 +0200 6.3 @@ -778,11 +778,11 @@ 6.4 <dt><dfn>marker positioning reference element</dfn> 6.5 <dd> 6.6 <p> 6.7 - If the <i>ancestor list item</i> has ''marker-attachment:list-item'', 6.8 + If the <i>ancestor list item</i> has ''marker-side:list-item'', 6.9 the <i>marker positioning reference element</i> is the <i>ancestor list item</i>. 6.10 6.11 <p> 6.12 - Otherwise, if the <i>ancestor list item</i> has ''marker-attachment:list-container'' and has a parent element, 6.13 + Otherwise, if the <i>ancestor list item</i> has ''marker-side:list-container'' and has a parent element, 6.14 the <i>marker positioning reference element</i> is the <i>ancestor list item's</i> parent. 6.15 6.16 <p> 6.17 @@ -811,7 +811,7 @@ 6.18 6.19 <p class='note'> 6.20 Note: The purpose of this somewhat convoluted definition is to position the marker flush against its list item, 6.21 - and then when "marker-attachment:list-container", 6.22 + and then when "marker-side:list-container", 6.23 keep all the markers for a given list on the same side of their list items even in mixed-direction text, 6.24 so that authors can specify padding on only one side of the list container and still ensure their markers are visible. 6.25 And on top of all that, 6.26 @@ -873,15 +873,24 @@ 6.27 and be confident that the reference will always be resolvable. 6.28 </div> 6.29 6.30 -<h3 id='marker-attachment'> 6.31 -The 'marker-attachment' property</h3> 6.32 - 6.33 - <p>By default, elements or ''::marker'' pseudo-elements with ''position:marker'' position themselves according to their list item's directionality. However, if the list item is grouped with several other list items which may have different directionality (for example, multiple <li>s with different "dir" attributes in an <ol> in HTML), it is sometimes more useful to have all the markers line up on one side, so the author can specify a single "gutter" on that side and be assured that all the markers will lie in that gutter and be visible. The 'marker-attachment' property defined in this section allows an author to control this, switching list items to positioning their markers based off the list container's directionality instead. 6.34 +<h3 id='marker-side'> 6.35 +The 'marker-side' property</h3> 6.36 + 6.37 + <p> 6.38 + By default, elements or ''::marker'' pseudo-elements with ''position:marker'' 6.39 + position themselves according to their list item's directionality. 6.40 + However, if the list item is grouped with several other list items which may have different directionality 6.41 + (for example, multiple <li>s with different "dir" attributes in an <ol> in HTML), 6.42 + it is sometimes more useful to have all the markers line up on one side, 6.43 + so the author can specify a single "gutter" on that side 6.44 + and be assured that all the markers will lie in that gutter and be visible. 6.45 + The 'marker-side' property defined in this section allows an author to control this, 6.46 + switching list items to positioning their markers based off the list container's directionality instead. 6.47 6.48 <table class="propdef"> 6.49 <tr> 6.50 <th>Property: 6.51 - <td><dfn>marker-attachment</dfn> 6.52 + <td><dfn>marker-side</dfn> 6.53 <tr> 6.54 <th>Value: 6.55 <td>list-item | list-container 6.56 @@ -890,7 +899,7 @@ 6.57 <td>list-item 6.58 <tr> 6.59 <th>Applies to: 6.60 - <td><i title="list item">list items</i> 6.61 + <td><i>list items</i> 6.62 <tr> 6.63 <th>Inherited: 6.64 <td>yes 6.65 @@ -905,18 +914,26 @@ 6.66 <td>specified value 6.67 </table> 6.68 6.69 - <p>When a list item has ''marker-attachment:list-item'', any <i title='associated-marker'>markers associated with the list item</i> base their positioning off of the directionality of the list item. When a list item has ''marker-attachment:list-container'', the <i title='associated-marker'>associated markers</i> instead base their positioning off of the directionality of the list item's parent element. The normative meaning of this is specified in the section defining <a href="#position-marker">position:marker</a>. 6.70 + <p> 6.71 + When a list item has ''marker-side:list-item'', 6.72 + any <i title='associated-marker'>markers associated with the list item</i> base their positioning off of the directionality of the list item. 6.73 + When a list item has ''marker-side:list-container'', 6.74 + the <i title='associated-marker'>associated markers</i> instead base their positioning off of the directionality of the list item's parent element. 6.75 + The normative meaning of this is specified in the section defining <a href="#position-marker">position:marker</a>. 6.76 6.77 <div class='example'> 6.78 - <p>Here is a visual rendering of the effect that 'marker-attachment' can have on a list. Both of the following renderings are generated from the following HTML, with the only difference being the value of 'marker-attachment' on the list: 6.79 - 6.80 - <pre> 6.81 -<ul> 6.82 - <li>english one 6.83 - <li dir=rtl>OWT WERBEH 6.84 - <li>english three 6.85 - <li dir=rtl>RUOF WERBEH 6.86 -</ul></pre> 6.87 + <p> 6.88 + Here is a visual rendering of the effect that 'marker-side' can have on a list. 6.89 + Both of the following renderings are generated from the following HTML, 6.90 + with the only difference being the value of 'marker-side' on the list: 6.91 + 6.92 + <pre><!-- 6.93 + --><ul>
<!-- 6.94 + --> <li>english one
<!-- 6.95 + --> <li dir=rtl>OWT WERBEH
<!-- 6.96 + --> <li>english three
<!-- 6.97 + --> <li dir=rtl>RUOF WERBEH
<!-- 6.98 + --></ul></pre> 6.99 6.100 <table class=data style="width: 35em;"> 6.101 <thead> 6.102 @@ -949,15 +966,25 @@ 6.103 <h2 id='counter'> 6.104 Automatic Counters and Numbering: the 'counter-increment', 'counter-set' and 'counter-reset' properties</h2> 6.105 6.106 - <p>Automatic numbering in CSS2 is controlled with three properties: 'counter-increment', 'counter-set' and 'counter-reset'. The <dfn title="list counter">counters</dfn> defined by these properties are used with the ''counter()'' and ''counters()'' functions. 6.107 + <p> 6.108 + A <dfn>counter</dfn> is a special numeric object 6.109 + used, among other things, to automatically number list items in CSS. 6.110 + 6.111 + <p> 6.112 + A <i>counter</i> has an integer value 6.113 + and a <i>scope</i> which dictates which elements share a given counter. 6.114 + The value of a <i>counter</i> can be different on different elements in the document, 6.115 + allowing list items to generate successive numbers in their markers. 6.116 + They are created and manipulated with the 'counter-increment', 'counter-set' and 'counter-reset' properties, 6.117 + and used with the ''counter()'' and ''counters()'' functions. 6.118 6.119 <table class="propdef"> 6.120 <tr> 6.121 <th>Name: 6.122 - <td><dfn>counter-increment</dfn> 6.123 + <td><dfn>counter-reset</dfn> 6.124 <tr> 6.125 <th>Value: 6.126 - <td>[ <identifier> <integer>? ]+ | none 6.127 + <td>[ <ident> <integer>? ]+ | none 6.128 <tr> 6.129 <th>Initial: 6.130 <td>none 6.131 @@ -978,13 +1005,34 @@ 6.132 <td>specified value 6.133 </table> 6.134 6.135 + <p> 6.136 + The 'counter-reset' property creates new counters, 6.137 + with new associated <i>scopes</i>. 6.138 + Its values are defined as follows: 6.139 + 6.140 + <dl> 6.141 + <dt>none 6.142 + <dd> 6.143 + This element does not establish any new counters. 6.144 + 6.145 + <dt><code><ident> <integer>?</code> 6.146 + <dd> 6.147 + The element <i title="establishes a counter">establishes one or more new counters</i>. 6.148 + Each <code><ident></code> names a new counter which is created. 6.149 + 6.150 + <p> 6.151 + If an <code><integer></code> is provided after an <code><ident></code>, 6.152 + the newly established counter's value is set to that integer.. 6.153 + Otherwise, the starting value of the new counter is ''0''. 6.154 + </dl> 6.155 + 6.156 <table class="propdef"> 6.157 <tr> 6.158 <th>Name: 6.159 <td><dfn>counter-set</dfn> 6.160 <tr> 6.161 <th>Value: 6.162 - <td>[ <identifier> <integer>? ]+ | none 6.163 + <td>[ <ident> <integer>? ]+ | none 6.164 <tr> 6.165 <th>Initial: 6.166 <td>none 6.167 @@ -1008,10 +1056,10 @@ 6.168 <table class="propdef"> 6.169 <tr> 6.170 <th>Name: 6.171 - <td><dfn>counter-reset</dfn> 6.172 + <td><dfn>counter-increment</dfn> 6.173 <tr> 6.174 <th>Value: 6.175 - <td>[ <identifier> <integer>? ]+ | none 6.176 + <td>[ <ident> <integer>? ]+ | none 6.177 <tr> 6.178 <th>Initial: 6.179 <td>none 6.180 @@ -1032,13 +1080,33 @@ 6.181 <td>specified value 6.182 </table> 6.183 6.184 - <p>The 'counter-increment' property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for the element it's set on. The default increment is ''1''. 6.185 - 6.186 - <p>The 'counter-set' and 'counter-reset' properties also contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on the element it's set on. The default is ''0''. 6.187 - 6.188 - <p>On all of these properties, a value of 'none' means that no counters are incremented, set, or reset, respectively. Counter names must not be 'initial', 'inherit', or 'none'; using one of these keywords as a counter name makes the property invalid. 6.189 - 6.190 - <p>'counter-reset' always establishes a new <i>counter scope</i> on the element it's set on. 'counter-increment' and 'counter-set' sometimes establish a new <i>counter scope</i> on the element they're set on. 6.191 + <p> 6.192 + The 'counter-set' and 'counter-increment' properties 6.193 + manipulate the value of existing counters. 6.194 + They only create new counters if there is no counter of the given name on the element yet. 6.195 + Their values are defined as follows: 6.196 + 6.197 + <dl> 6.198 + <dt>none 6.199 + <dd> 6.200 + This element does not alter the value of any counters. 6.201 + 6.202 + <dt><code><ident> <integer>?</code> 6.203 + <dd> 6.204 + The element alters the value of one or more counters on it. 6.205 + If there is not currently a counter of the given name on the element, 6.206 + the element <i>establishes a counter</i> of the given name 6.207 + and initally sets its value to ''0'' 6.208 + (though it may then immediately set or increment that value to something different). 6.209 + 6.210 + <p> 6.211 + If an <code><integer></code> is provided after an <code><ident></code>, 6.212 + it sets the named counter to that integer (for 'counter-set') 6.213 + or increments the value of the named counter by that integer (for 'counter-increment'). 6.214 + Otherwise, 6.215 + the counter's value is set to ''0'' (for 'counter-set') 6.216 + or incremented by ''1'' (for 'counter-increment'). 6.217 + </dl> 6.218 6.219 <div class="example"> 6.220 <p>This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc. 6.221 @@ -1055,10 +1123,16 @@ 6.222 }</pre> 6.223 </div> 6.224 6.225 - <p>Resetting a counter is done <em>before</em> setting a counter, which is done <em>before</em> incrementing a counter, which is done <em>before</em> using a counter (for example, in the 'content' property). 6.226 + <p> 6.227 + Resetting a counter must be done <em>before</em> setting a counter, 6.228 + which must be done <em>before</em> incrementing a counter, 6.229 + which must be done <em>before</em> using a counter 6.230 + (for example, in the 'content' property). 6.231 6.232 <div class='note'> 6.233 - <p>The counter properties follow the cascading rules as normal. Thus, due to cascading, the following style sheet: 6.234 + <p> 6.235 + The counter properties follow the cascading rules as normal. 6.236 + Thus, due to cascading, the following style sheet: 6.237 6.238 <div class='example'> 6.239 <pre> 6.240 @@ -1066,39 +1140,83 @@ 6.241 H1 { counter-reset: imagenum 99 }</pre> 6.242 </div> 6.243 6.244 - <p>will only reset 'imagenum'. To reset both counters, they have to be specified together: 6.245 + <p> 6.246 + will only reset 'imagenum'. 6.247 + To reset both counters, 6.248 + they have to be specified together: 6.249 6.250 <div class='example'> 6.251 <pre>H1 { counter-reset: section -1 imagenum 99 }</pre> 6.252 </div> 6.253 6.254 - <p>The same principles apply to the 'counter-set' and 'counter-increment' properties. 6.255 + <p> 6.256 + The same principles apply to the 'counter-set' and 'counter-increment' properties. 6.257 </div> 6.258 6.259 6.260 <h3 id="nested-counters"> 6.261 Nested counters and scope</h3> 6.262 6.263 - <p>Counters are "self-nesting", in the sense that resetting a counter in a child element automatically creates a new instance of the counter. This is important for situations like lists in HTML, where lists can be nested inside lists to arbitrary depth. It would be impossible to define uniquely named counters for each level. 6.264 + <p> 6.265 + Every <i>counter</i> is associated with a <dfn title="scope|scopes">scope</dfn>, 6.266 + which defines which elements in the document share a given counter. 6.267 + 6.268 + <p> 6.269 + <i>Scopes</i> have a name, 6.270 + which is the same as their associated counter, 6.271 + a root element, 6.272 + which is the element that establishes the counter, 6.273 + and a set of contained elements, 6.274 + which are the elements that share the given counter. 6.275 + When an element <dfn>establishes a counter</dfn>, 6.276 + it creates a counter and scope of the given name, 6.277 + sets the scope's root element to the element that establishes it, 6.278 + and sets the contained elements to the element and its descendants, 6.279 + all following siblings of the root element up to but not including the first sibling that establishes a counter of the same name, 6.280 + and all descendants of those siblings. 6.281 + 6.282 + <p> 6.283 + The value of a counter can change across its scope. 6.284 + Whenever an element sets the value of a counter, 6.285 + the altered value is what is seen by all elements contained in the scope 6.286 + that are later in document order 6.287 + (unless, of course, another element between the two further alters the counter's value). 6.288 + 6.289 + <p> 6.290 + Counters are "self-nesting"; 6.291 + establishing a counter in an element already contained in the scope of another counter of the same name 6.292 + simply creates a new instance of the counter. 6.293 + This is important for situations like lists in HTML, 6.294 + where lists can be nested inside lists to arbitrary depth. 6.295 + It would be impossible to define uniquely named counters for each level. 6.296 + As explained in a later section, 6.297 + the ''counter()'' function only uses the innermost counter of a given name on the element, 6.298 + but the ''counters()'' function uses all counters of a given name that contain the element. 6.299 6.300 <div class="example"> 6.301 - <p>Thus, the following suffices to number nested list items. The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element: 6.302 + <p> 6.303 + Thus, the following suffices to number nested list items. 6.304 + The result is very similar to that of setting 'display:list-item' and 'list-style: inside' on the LI element: 6.305 6.306 <pre> 6.307 -OL { counter-reset: item } 6.308 -LI { display: block } 6.309 -LI:before { content: counter(item) ". "; counter-increment: item }</pre> 6.310 +ol { counter-reset: item } 6.311 +li { display: block } 6.312 +li::before { content: counter(item) ". "; counter-increment: item }</pre> 6.313 + 6.314 + <p> 6.315 + In this example, 6.316 + an OL will create a counter, 6.317 + and all children of the OL will refer to that counter. 6.318 </div> 6.319 6.320 - <p>The self-nesting is based on the principle that every element or pseudo-element that has a 'counter-reset' for a counter X, creates a fresh counter X, the <dfn id="counter-scope" title="scope|counter scope">scope</dfn> of which is the element or pseudo-element, its following siblings up to but not including the first one that resets the same counter, and all the descendants of those elements. 6.321 - 6.322 - <p>Additionally, if an element has a 'counter-set' or 'counter-increment' for a counter that is not in scope for the element, it establishes a scope for that counter identically to if 'counter-reset' were used on the element to reset the counter to ''0''. 6.323 - 6.324 - <p>In the example above, an OL will create a counter, and all children of the OL will refer to that counter. 6.325 - 6.326 - <div class="html-example"> 6.327 - 6.328 - <p>If we denote by item[<var>n</var>] the <var>n</var><sup>th</sup> instance of the "item" counter, and by "(" and ")"the beginning and end of a scope, then the following HTML fragment will use the indicated counters. (We assume the style sheet as given in the example above). 6.329 + 6.330 + <div class="example"> 6.331 + 6.332 + <p> 6.333 + If we denote by item[<var>n</var>] the <var>n</var><sup>th</sup> instance of the "item" counter, 6.334 + and by "(" and ")"the beginning and end of a scope, 6.335 + then the following HTML fragment will use the indicated counters. 6.336 + (We assume the style sheet as given in the example above). 6.337 6.338 <pre> 6.339 <OL> <!-- (set item[0] to 0 --> 6.340 @@ -1121,18 +1239,9 @@ 6.341 <LI>item <!-- increment item[4] to 1 --> 6.342 <LI>item <!-- increment item[4] to 2 --> 6.343 </OL> <!-- ) --></pre> 6.344 - </div> 6.345 - 6.346 - <p>As explained in a later section, the ''counter()'' function generates a string based off of the innermost scope of the named counter, while the ''counters()'' function generates a string based on the values of <em>all</em> the in-scope counters with a given name. 6.347 - 6.348 - <div class="example"><p> 6.349 - <p>The following style sheet numbers nested list items 6.350 - as "1", "1.1", "1.1.1", etc. 6.351 - 6.352 - <pre> 6.353 -OL { counter-reset: item } 6.354 -LI { display: block } 6.355 -LI:before { content: counters(item, "."); counter-increment: item }</pre> 6.356 + 6.357 + <p class='issue'> 6.358 + Rewrite this example as an image showing the scopes visually. 6.359 </div> 6.360 6.361 6.362 @@ -2234,7 +2343,7 @@ 6.363 display: block; 6.364 margin: 1em 0; 6.365 padding-left: 40px; 6.366 - marker-attachment: list-container; 6.367 + marker-side: list-container; 6.368 } 6.369 6.370 ol ol, ol ul, ul ul, ul ol {
7.1 --- a/css3-syntax/Overview.html Mon Aug 27 17:46:13 2012 +0200 7.2 +++ b/css3-syntax/Overview.html Mon Aug 27 17:50:16 2012 +0200 7.3 @@ -36,7 +36,7 @@ 7.4 7.5 <h1>CSS Syntax Module Level 3</h1> 7.6 7.7 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 August 2012</h2> 7.8 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 August 2012</h2> 7.9 7.10 <dl> 7.11 <dt>This version: 7.12 @@ -160,7 +160,8 @@ 7.13 <li><a href="#syntax-description"><span class=secno>2. </span> Description 7.14 of CSS's Syntax</a> 7.15 7.16 - <li><a href="#parsing"><span class=secno>3. </span> Parsing</a> 7.17 + <li><a href="#tokenizing-and-parsing-css"><span class=secno>3. </span> 7.18 + Tokenizing and Parsing CSS</a> 7.19 <ul class=toc> 7.20 <li><a href="#overview-of-the-parsing-model"><span class=secno>3.1. 7.21 </span> Overview of the Parsing Model</a> 7.22 @@ -483,7 +484,8 @@ 7.23 special syntaxes of individual <a href="#at-rules"><i>at-rules</i></a> can 7.24 be found in the specs that define them. 7.25 7.26 - <h2 id=parsing><span class=secno>3. </span> Parsing</h2> 7.27 + <h2 id=tokenizing-and-parsing-css><span class=secno>3. </span> Tokenizing 7.28 + and Parsing CSS</h2> 7.29 7.30 <p> User agents must use the parsing rules described in this section to 7.31 generate the CSSOM trees from text/css resources. Together, these rules 7.32 @@ -636,22 +638,21 @@ 7.33 behavior. 7.34 7.35 <dl> 7.36 - <dt>the <dfn id=supports-scientific-notation>supports scientific 7.37 - notation</dfn> flag 7.38 - 7.39 - <dd> This flag is set if the tokenizer supports scientific notation in 7.40 - numbers. When this is set, a sequence of characters like "12e3" will 7.41 - tokenize as a number token with the value "12000". (Without the flag, 7.42 - they would tokenize as a dimension token with value "12" and unit "e3".) 7.43 - <p> Currently, this flag is only set when parsing SVG presentational 7.44 - attributes. 7.45 - 7.46 <dt>the <dfn id=transform-function-whitespace>transform function 7.47 whitespace</dfn> flag 7.48 7.49 <dd> This flag is set when parsing SVG's <code>transform</code> attribute. 7.50 When this is set, whitespace is allowed between the name of a transform 7.51 function and its opening parenthesis. 7.52 + 7.53 + <dt>the <dfn id=quirks-mode>quirks mode</dfn> flag 7.54 + 7.55 + <dd> This flag is set when the host document is in quirks mode. When this 7.56 + is set, the parser allows <a 7.57 + href="#consume-a-primitive-with-the-hashless-co">hash colors without the 7.58 + # character</a> and <a 7.59 + href="#consume-a-primitive-with-the-unitless-le">pixel lengths without 7.60 + the ‘<code class=property>px</code>’ unit</a> in some circumstances. 7.61 </dl> 7.62 7.63 <h4 id=definitions><span class=secno>3.4.2. </span> Definitions</h4> 7.64 @@ -1387,21 +1388,13 @@ 7.65 7.66 <dt>U+0065 LATIN SMALL LETTER E (e) 7.67 7.68 - <dd> If the parser <i title=supports-scientific-notation>doesn't support 7.69 - scientific notation</i>, create a dimension token with its representation 7.70 - set to the number token's representation, its value set to the number 7.71 - produced by interpreting the number token's representation as a base-10 7.72 - number, and a unit initially set to the <a 7.73 - href="#current-input-character"><i>current input character</i></a>. 7.74 - Switch to the <a href="#dimension-state0"><i>dimension state</i></a>. 7.75 - <p> Otherwise, if the <a href="#next-input-character"><i>next input 7.76 - character</i></a> is a <a href="#digit"><i>digit</i></a>, or the <a 7.77 - href="#next-input-character"><i title="next input character">next 2 7.78 - input characters</i></a> are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS 7.79 - (-) followed by a <a href="#digit"><i>digit</i></a>, consume them and 7.80 - append them to the number token's representation. switch to the <a 7.81 - href="#sci-notation-state0"><i>sci-notation state</i></a>. 7.82 - 7.83 + <dd> If the <a href="#next-input-character"><i>next input 7.84 + character</i></a> is a <a href="#digit"><i>digit</i></a>, or the <a 7.85 + href="#next-input-character"><i title="next input character">next 2 input 7.86 + characters</i></a> are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-) 7.87 + followed by a <a href="#digit"><i>digit</i></a>, consume them and append 7.88 + them to the number token's representation. Switch to the <a 7.89 + href="#sci-notation-state0"><i>sci-notation state</i></a>. 7.90 <p> Otherwise, create a dimension token with its representation set to 7.91 the number token's representation, its value set to the number produced 7.92 by interpreting the number token's representation as a base-10 number, 7.93 @@ -1509,21 +1502,13 @@ 7.94 7.95 <dt>U+0065 LATIN SMALL LETTER E (e) 7.96 7.97 - <dd> If the parser <i title=supports-scientific-notation>doesn't support 7.98 - scientific notation</i>, create a dimension token with its representation 7.99 - set to the number token's representation, its value set to the number 7.100 - produced by interpreting the number token's representation as a base-10 7.101 - number, and a unit initially set to the <a 7.102 - href="#current-input-character"><i>current input character</i></a>. 7.103 - Switch to the <a href="#dimension-state0"><i>dimension state</i></a>. 7.104 - <p> Otherwise, if the <a href="#next-input-character"><i>next input 7.105 - character</i></a> is a <a href="#digit"><i>digit</i></a>, or the <a 7.106 - href="#next-input-character"><i title="next input character">next 2 7.107 - input characters</i></a> are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS 7.108 - (-) followed by a <a href="#digit"><i>digit</i></a>, consume them and 7.109 - append them to the number token's representation. switch to the <a 7.110 - href="#sci-notation-state0"><i>sci-notation state</i></a>. 7.111 - 7.112 + <dd> If the <a href="#next-input-character"><i>next input 7.113 + character</i></a> is a <a href="#digit"><i>digit</i></a>, or the <a 7.114 + href="#next-input-character"><i title="next input character">next 2 input 7.115 + characters</i></a> are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-) 7.116 + followed by a <a href="#digit"><i>digit</i></a>, consume them and append 7.117 + them to the number token's representation. Switch to the <a 7.118 + href="#sci-notation-state0"><i>sci-notation state</i></a>. 7.119 <p> Otherwise, create a dimension token with its representation set to 7.120 the number token's representation, its value set to the number produced 7.121 by interpreting the number token's representation as a base-10 number, 7.122 @@ -2006,10 +1991,10 @@ 7.123 be unintentional. 7.124 7.125 <p> Note that the point of this spec is to match reality; changes from 7.126 - CSS2.1‘<code class=css>s tokenizer are nearly always because the 7.127 - tokenizer specified something that doesn</code>’t match actual browser 7.128 - behavior, or left something unspecified. If some detail doesn't match 7.129 - browsers, please let me know as it's almost certainly unintentional. 7.130 + CSS2.1's tokenizer are nearly always because the tokenizer specified 7.131 + something that doesn't match actual browser behavior, or left something 7.132 + unspecified. If some detail doesn't match browsers, please let me know as 7.133 + it's almost certainly unintentional. 7.134 7.135 <ol> 7.136 <li> The DASHMATCH and INCLUDES tokens have been removed. They can instead 7.137 @@ -2031,9 +2016,10 @@ 7.138 token is mentioned in other specs). The only consequence of this is that 7.139 comments can no longer be inserted between the sign and the number. 7.140 7.141 - <li> Several flags have been added for SVG-compatible tokenizing, so that 7.142 - a single state machine can be used for both "vanilla" and SVG CSS 7.143 - parsing. 7.144 + <li> Some flags have been added for SVG-compatible tokenizing, so that a 7.145 + single state machine can be used for both "vanilla" and SVG CSS parsing. 7.146 + 7.147 + <li> Scientific notation is supported for numbers, per WG resolution. 7.148 </ol> 7.149 <!-- 7.150 PPPPPPPPPPPPPPPPP AAA RRRRRRRRRRRRRRRRR SSSSSSSSSSSSSSS EEEEEEEEEEEEEEEEEEEEEERRRRRRRRRRRRRRRRR 7.151 @@ -2441,17 +2427,18 @@ 7.152 7.153 <dt>anything else 7.154 7.155 - <dd> If the document is in quirks mode and the <a 7.156 - href="#current-declaration"><i>current declaration's</i></a> name is on 7.157 - the <a href="#hashless-color-quirk-list"><i>hashless color quirk 7.158 + <dd> If the <a href="#quirks-mode"><i>quirks mode</i></a> flag is set, and 7.159 + the <a href="#current-declaration"><i>current declaration's</i></a> name 7.160 + is on the <a href="#hashless-color-quirk-list"><i>hashless color quirk 7.161 list</i></a>, <a 7.162 href="#consume-a-primitive-with-the-hashless-co0"><i>consume a primitive 7.163 with the hashless color quirk</i></a> and append the returned value to 7.164 the value of the <a href="#current-declaration"><i>current 7.165 declaration</i></a>. Remain in this mode. 7.166 - <p> Otherwise, if the document is in quirks mode and the <a 7.167 - href="#current-declaration"><i>current declaration's</i></a> name is on 7.168 - the <a href="#unitless-length-quirk-list"><i>unitless length quirk 7.169 + <p> Otherwise, if the <a href="#quirks-mode"><i>quirks mode</i></a> flag 7.170 + is set, and the <a href="#current-declaration"><i>current 7.171 + declaration's</i></a> name is on the <a 7.172 + href="#unitless-length-quirk-list"><i>unitless length quirk 7.173 list</i></a>, <a 7.174 href="#consume-a-primitive-with-the-unitless-le0"><i>consume a primitive 7.175 with the unitless length quirk</i></a> and append the returned value to 7.176 @@ -2749,11 +2736,12 @@ 7.177 7.178 <dt>number token 7.179 7.180 - <dd> If the document is in quirks mode and the function's name is "rect", 7.181 - <a href="#consume-a-primitive-with-the-unitless-le0"><i>consume a 7.182 - primitive with the unitless length quirk</i></a> and append the returned 7.183 - value to the value fo the <a href="#current-argument"><i>current 7.184 - argument</i></a>. 7.185 + <dd> If the <a href="#quirks-mode"><i>quirks mode</i></a> flag is set, and 7.186 + the function's name is "rect", <a 7.187 + href="#consume-a-primitive-with-the-unitless-le0"><i>consume a primitive 7.188 + with the unitless length quirk</i></a> and append the returned value to 7.189 + the value of the <a href="#current-argument"><i>current argument</i></a>. 7.190 + 7.191 <p> Otherwise, <a href="#consume-a-primitive0"><i>consume a 7.192 primitive</i></a> and append the returned value to the value of the <a 7.193 href="#current-argument"><i>current argument</i></a>. 7.194 @@ -2837,6 +2825,16 @@ 7.195 <li> No whitespace or comments are allowed between the DELIM(!) and 7.196 IDENT(important) tokens when processing an !important directive at the 7.197 end of a style rule. 7.198 + 7.199 + <li> The handling of some miscellanous ‘<code 7.200 + class=property>special</code>’ tokens (like an unmatched } token) 7.201 + showing up in various places in the grammar has been specified with some 7.202 + reasonable behavior shown by at least one browser. Previously, 7.203 + stylesheets with those tokens in those places just didn't match the 7.204 + stylesheet grammar at all, so their handling was totally undefined. 7.205 + 7.206 + <li> Quirks mode parsing differences are now officially recognized in the 7.207 + parser. 7.208 </ol> 7.209 <!-- 7.210 7.211 @@ -3252,6 +3250,9 @@ 7.212 <li>Pop the current rule, <a href="#pop-the-current-rule0" 7.213 title="Pop the current rule"><strong>3.6.18.</strong></a> 7.214 7.215 + <li>quirks mode, <a href="#quirks-mode" 7.216 + title="quirks mode"><strong>3.4.1.</strong></a> 7.217 + 7.218 <li>renderer, <a href="#renderer" title=renderer><strong>4.2.</strong></a> 7.219 7.220 7.221 @@ -3288,9 +3289,6 @@ 7.222 title="style sheet, as conformance class"><strong>4.2.</strong></a> 7.223 </ul> 7.224 7.225 - <li>supports scientific notation, <a href="#supports-scientific-notation" 7.226 - title="supports scientific notation"><strong>3.4.1.</strong></a> 7.227 - 7.228 <li>Switch to the current rule's content mode, <a 7.229 href="#switch-to-the-current-rules-content-mode0" 7.230 title="Switch to the current rule's content mode"><strong>3.6.17.</strong></a>
8.1 --- a/css3-syntax/Overview.src.html Mon Aug 27 17:46:13 2012 +0200 8.2 +++ b/css3-syntax/Overview.src.html Mon Aug 27 17:50:16 2012 +0200 8.3 @@ -210,7 +210,7 @@ 8.4 The special syntaxes of individual <i>at-rules</i> can be found in the specs that define them. 8.5 8.6 <h2> 8.7 -Parsing</h2> 8.8 +Tokenizing and Parsing CSS</h2> 8.9 8.10 <p> 8.11 User agents must use the parsing rules described in this section to generate the CSSOM trees from text/css resources. 8.12 @@ -384,20 +384,18 @@ 8.13 The tokenizer can be run with any of several flags that alter its behavior. 8.14 8.15 <dl> 8.16 - <dt>the <dfn>supports scientific notation</dfn> flag 8.17 - <dd> 8.18 - This flag is set if the tokenizer supports scientific notation in numbers. 8.19 - When this is set, a sequence of characters like "12e3" will tokenize 8.20 - as a number token with the value "12000". 8.21 - (Without the flag, they would tokenize as a dimension token with value "12" and unit "e3".) 8.22 - 8.23 - <p> 8.24 - Currently, this flag is only set when parsing SVG presentational attributes. 8.25 - 8.26 <dt>the <dfn>transform function whitespace</dfn> flag 8.27 <dd> 8.28 This flag is set when parsing SVG's <code>transform</code> attribute. 8.29 When this is set, whitespace is allowed between the name of a transform function and its opening parenthesis. 8.30 + 8.31 + <dt>the <dfn>quirks mode</dfn> flag 8.32 + <dd> 8.33 + This flag is set when the host document is in quirks mode. 8.34 + When this is set, 8.35 + the parser allows <a href="#consume-a-primitive-with-the-hashless-co">hash colors without the # character</a> 8.36 + and <a href="#consume-a-primitive-with-the-unitless-le">pixel lengths without the 'px' unit</a> 8.37 + in some circumstances. 8.38 </dl> 8.39 8.40 <h4> 8.41 @@ -1247,23 +1245,12 @@ 8.42 <dt>U+0045 LATIN CAPITAL LETTER E (E) 8.43 <dt>U+0065 LATIN SMALL LETTER E (e) 8.44 <dd> 8.45 - If the parser <i title="supports-scientific-notation">doesn't support scientific notation</i>, 8.46 - create a dimension token 8.47 - with its representation set to the number token's representation, 8.48 - its value set to the number 8.49 - produced by interpreting the number token's representation 8.50 - as a base-10 number, 8.51 - and a unit initially set to the <i>current input character</i>. 8.52 - Switch to the <i>dimension state</i>. 8.53 - 8.54 - <p> 8.55 - Otherwise, 8.56 - if the <i>next input character</i> is a <i>digit</i>, 8.57 - or the <i title="next input character">next 2 input characters</i> 8.58 - are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-) followed by a <i>digit</i>, 8.59 - consume them 8.60 - and append them to the number token's representation. 8.61 - switch to the <i>sci-notation state</i>. 8.62 + If the <i>next input character</i> is a <i>digit</i>, 8.63 + or the <i title="next input character">next 2 input characters</i> 8.64 + are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-) followed by a <i>digit</i>, 8.65 + consume them 8.66 + and append them to the number token's representation. 8.67 + Switch to the <i>sci-notation state</i>. 8.68 8.69 <p> 8.70 Otherwise, 8.71 @@ -1406,23 +1393,12 @@ 8.72 <dt>U+0045 LATIN CAPITAL LETTER E (E) 8.73 <dt>U+0065 LATIN SMALL LETTER E (e) 8.74 <dd> 8.75 - If the parser <i title="supports-scientific-notation">doesn't support scientific notation</i>, 8.76 - create a dimension token 8.77 - with its representation set to the number token's representation, 8.78 - its value set to the number 8.79 - produced by interpreting the number token's representation 8.80 - as a base-10 number, 8.81 - and a unit initially set to the <i>current input character</i>. 8.82 - Switch to the <i>dimension state</i>. 8.83 - 8.84 - <p> 8.85 - Otherwise, 8.86 - if the <i>next input character</i> is a <i>digit</i>, 8.87 - or the <i title="next input character">next 2 input characters</i> 8.88 - are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-) followed by a <i>digit</i>, 8.89 - consume them 8.90 - and append them to the number token's representation. 8.91 - switch to the <i>sci-notation state</i>. 8.92 + If the <i>next input character</i> is a <i>digit</i>, 8.93 + or the <i title="next input character">next 2 input characters</i> 8.94 + are U+002B PLUS SIGN (+) or U+002D HYPHEN-MINUS (-) followed by a <i>digit</i>, 8.95 + consume them 8.96 + and append them to the number token's representation. 8.97 + Switch to the <i>sci-notation state</i>. 8.98 8.99 <p> 8.100 Otherwise, 8.101 @@ -1981,7 +1957,7 @@ 8.102 8.103 <p> 8.104 Note that the point of this spec is to match reality; 8.105 - changes from CSS2.1's tokenizer are nearly always because the tokenizer specified something that doesn't match actual browser behavior, 8.106 + changes from CSS2.1's tokenizer are nearly always because the tokenizer specified something that doesn't match actual browser behavior, 8.107 or left something unspecified. 8.108 If some detail doesn't match browsers, 8.109 please let me know 8.110 @@ -2011,9 +1987,13 @@ 8.111 The only consequence of this is that comments can no longer be inserted between the sign and the number. 8.112 8.113 <li> 8.114 - Several flags have been added for SVG-compatible tokenizing, 8.115 + Some flags have been added for SVG-compatible tokenizing, 8.116 so that a single state machine can be used for both "vanilla" and SVG CSS parsing. 8.117 8.118 + <li> 8.119 + Scientific notation is supported for numbers, 8.120 + per WG resolution. 8.121 + 8.122 </ol> 8.123 8.124 8.125 @@ -2458,7 +2438,7 @@ 8.126 8.127 <dt>anything else 8.128 <dd> 8.129 - If the document is in quirks mode 8.130 + If the <i>quirks mode</i> flag is set, 8.131 and the <i>current declaration's</i> name is on the <i>hashless color quirk list</i>, 8.132 <i>consume a primitive with the hashless color quirk</i> 8.133 and append the returned value 8.134 @@ -2467,7 +2447,7 @@ 8.135 8.136 <p> 8.137 Otherwise, 8.138 - if the document is in quirks mode 8.139 + if the <i>quirks mode</i> flag is set, 8.140 and the <i>current declaration's</i> name is on the <i>unitless length quirk list</i>, 8.141 <i>consume a primitive with the unitless length quirk</i> 8.142 and append the returned value 8.143 @@ -2748,11 +2728,11 @@ 8.144 8.145 <dt>number token 8.146 <dd> 8.147 - If the document is in quirks mode 8.148 + If the <i>quirks mode</i> flag is set, 8.149 and the function's name is "rect", 8.150 <i>consume a primitive with the unitless length quirk</i> 8.151 and append the returned value 8.152 - to the value fo the <i>current argument</i>. 8.153 + to the value of the <i>current argument</i>. 8.154 8.155 <p> 8.156 Otherwise, 8.157 @@ -2851,6 +2831,17 @@ 8.158 <li> 8.159 No whitespace or comments are allowed between the DELIM(!) and IDENT(important) tokens 8.160 when processing an !important directive at the end of a style rule. 8.161 + 8.162 + <li> 8.163 + The handling of some miscellanous 'special' tokens 8.164 + (like an unmatched } token) 8.165 + showing up in various places in the grammar 8.166 + has been specified with some reasonable behavior shown by at least one browser. 8.167 + Previously, stylesheets with those tokens in those places just didn't match the stylesheet grammar at all, 8.168 + so their handling was totally undefined. 8.169 + 8.170 + <li> 8.171 + Quirks mode parsing differences are now officially recognized in the parser. 8.172 </ol> 8.173 8.174
9.1 --- a/css3-text/Overview.html Mon Aug 27 17:46:13 2012 +0200 9.2 +++ b/css3-text/Overview.html Mon Aug 27 17:50:16 2012 +0200 9.3 @@ -32,7 +32,7 @@ 9.4 9.5 <h1>CSS Text Level 3</h1> 9.6 9.7 - <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 14 August 9.8 + <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 26 August 9.9 2012</h2> 9.10 9.11 <dl> 9.12 @@ -42,7 +42,7 @@ 9.13 --> 9.14 9.15 <dd><a 9.16 - href="http://www.w3.org/TR/2012/WD-css3-text-20120814/">http://www.w3.org/TR/2012/WD-css3-text-20120814/</a> 9.17 + href="http://www.w3.org/TR/2012/WD-css3-text-20120826/">http://www.w3.org/TR/2012/WD-css3-text-20120826/</a> 9.18 9.19 <dt>Latest version: 9.20 9.21 @@ -602,10 +602,11 @@ 9.22 Thus the usual case mappings between “I” and “i” are replaced 9.23 with a different set of mappings to their respective undotted/dotted 9.24 counterparts, which do not exist in English. This mapping must only take 9.25 - effect if the language is known to be Turkish (or another Turkic language 9.26 - that uses Turkish casing rules); in other languages, the usual mapping of 9.27 - “I” and “i” is required. This rule is thus conditionally defined 9.28 - in Unicode's SpecialCasing.txt file. 9.29 + effect if the <a href="#content-language"><i>content language</i></a> is 9.30 + known to be Turkish (or another Turkic language that uses Turkish casing 9.31 + rules); in other languages, the usual mapping of “I” and “i” is 9.32 + required. This rule is thus conditionally defined in Unicode's 9.33 + SpecialCasing.txt file. 9.34 </div> 9.35 <!-- 9.36 <div class="example"> 9.37 @@ -1318,7 +1319,8 @@ 9.38 <li>breaks before the Katakana-Hiragana prolonged sound mark: 9.39 ー U+30FC 9.40 </ul> 9.41 - If the language is known to be Chinese or Japanese, then additionally: 9.42 + If the <a href="#content-language"><i>content language</i></a> is known 9.43 + to be Chinese or Japanese, then additionally: 9.44 <ul> 9.45 <li>breaks before hyphens:<br> 9.46 ‐ U+2010, – U+2013, 〜 U+301C, ゠ U+30A0 9.47 @@ -1335,7 +1337,8 @@ 9.48 <li>breaks between some inseparable characters:<br> 9.49 ‥ U+2025, … U+2026 9.50 </ul> 9.51 - If the language is known to be Chinese or Japanese, then additionally: 9.52 + If the <a href="#content-language"><i>content language</i></a> is known 9.53 + to be Chinese or Japanese, then additionally: 9.54 <ul> 9.55 <li>breaks before certain centered punctuation marks:<br> 9.56 : U+003A, ; U+003B, ・ U+30FB, ： U+FF1A, ； U+FF1B,
10.1 --- a/css3-text/Overview.src.html Mon Aug 27 17:46:13 2012 +0200 10.2 +++ b/css3-text/Overview.src.html Mon Aug 27 17:50:16 2012 +0200 10.3 @@ -314,7 +314,7 @@ 10.4 case mappings between “I” and “i” are 10.5 replaced with a different set of mappings to their respective 10.6 undotted/dotted counterparts, which do not exist in English. This 10.7 - mapping must only take effect if the language is known to be Turkish 10.8 + mapping must only take effect if the <i>content language</i> is known to be Turkish 10.9 (or another Turkic language that uses Turkish casing rules); 10.10 in other languages, the usual mapping of “I” 10.11 and “i” is required. This rule is thus conditionally 10.12 @@ -885,7 +885,7 @@ 10.13 <li>breaks before the Katakana-Hiragana prolonged sound mark: 10.14 ー U+30FC 10.15 </ul> 10.16 - If the language is known to be Chinese or Japanese, then additionally: 10.17 + If the <i>content language</i> is known to be Chinese or Japanese, then additionally: 10.18 <ul> 10.19 <li>breaks before hyphens:<br> 10.20 ‐ U+2010, – U+2013, 〜 U+301C, 10.21 @@ -900,7 +900,7 @@ 10.22 <li>breaks between some inseparable characters:<br> 10.23 ‥ U+2025, … U+2026 10.24 </ul> 10.25 - If the language is known to be Chinese or Japanese, then additionally: 10.26 + If the <i>content language</i> is known to be Chinese or Japanese, then additionally: 10.27 <ul> 10.28 <li>breaks before certain centered punctuation marks:<br> 10.29 : U+003A, ; U+003B, ・ U+30FB,
11.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 11.2 +++ b/css4-pseudo/Makefile Mon Aug 27 17:50:16 2012 +0200 11.3 @@ -0,0 +1,50 @@ 11.4 +# $Id: Makefile,v 1.5 2008/02/06 14:05:15 mike Exp $ 11.5 +# 11.6 +# http://dev.w3.org/buildtools/css3-module-postprocessor/Makefile 11.7 +# 11.8 +# This is a makefile for generating output using the CSS3 module 11.9 +# postprocessor. Details about that are here: 11.10 +# 11.11 +# http://www.w3.org/Style/Group/css3-src/bin/postprocess 11.12 +# 11.13 +# To use this makefile, you need to have the "make" and "curl" 11.14 +# programs installed. If you are running a Windows/MS-DOS system, 11.15 +# you can download the "make" and "curl" programs from here: 11.16 +# 11.17 +# http://gnuwin32.sourceforge.net/downlinks/make.php 11.18 +# http://curl.haxx.se/dlwiz/?type=bin&os=Win32&flav=-&ver=2000/XP 11.19 +# 11.20 +# You also need to install either a .curlrc (*NIX/*BSD) or _curlrc 11.21 +# (MS-DOS ) file in your HOME directory, with at minimum the 11.22 +# following contents: 11.23 +# 11.24 +# user = foo:bar 11.25 +# 11.26 +# ...where "foo" and "bar" are your W3C username and password. 11.27 + 11.28 +SOURCEFILE=Overview.src.html 11.29 +OUTPUTFILE=Overview.html 11.30 +PROCESSCGI=http://cgi.w3.org/member-bin/process.cgi 11.31 +CURL=curl 11.32 +CURLFLAGS= 11.33 + 11.34 +# if you want to set a publication date other than today's date, 11.35 +# invoke make like this: "make PUBDATE=2008-03-19" 11.36 +PUBMSG= 11.37 +PUBDATE= 11.38 +USER= 11.39 + 11.40 +W3C_CSS_DIR=~/work/W3C/cvs/dev.w3.org/csswg/css4-pseudo 11.41 + 11.42 +all: $(OUTPUTFILE) 11.43 + 11.44 +$(OUTPUTFILE): $(SOURCEFILE) 11.45 +ifeq (,$(PUBDATE)) 11.46 + $(CURL) $(CURLFLAGS) --user $(USER) -F file="@$<" -o "$@" -F group=CSS -F output=html -F method=file $(PROCESSCGI) 11.47 +else 11.48 + $(CURL) $(CURLFLAGS) --user $(USER) -F file="@$<" -o "$@" -F group=CSS -F output=html -F method=file $(PROCESSCGI) -F date=$(PUBDATE) 11.49 +endif 11.50 + 11.51 + 11.52 + 11.53 +
12.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 12.2 +++ b/css4-pseudo/Overview.html Mon Aug 27 17:50:16 2012 +0200 12.3 @@ -0,0 +1,1044 @@ 12.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 12.5 +"http://www.w3.org/TR/html4/strict.dtd"> 12.6 + 12.7 +<html lang=en> 12.8 + <head profile="http://www.w3.org/2006/03/hcard"><meta 12.9 + content="text/html; charset=UTF-8" http-equiv=Content-Type> 12.10 + 12.11 + <title>CSS Pseudo-elements Module Level 4</title> 12.12 + <script defer=defer src="css-pseudochildren_files/annotate.js" 12.13 + type="text/javascript"></script> 12.14 + <link href="http://dev.w3.org/csswg/shared/style/alternate-spec-style.css" 12.15 + id=st rel=stylesheet title="alternate spec style" type="text/css"> 12.16 + <link href="http://www.w3.org/StyleSheets/TR/w3c-unofficial.css" 12.17 + rel=stylesheet type="text/css"> 12.18 + 12.19 + <body class=example> 12.20 + <p><br> 12.21 + 12.22 + <div class=head id=div-head> 12.23 + <h1 id=css-pseudochildren-module>CSS Pseudo-elements Module Level 4</h1> 12.24 + 12.25 + <h2 class="no-num no-toc" id=longstatus-date>22 June 2012</h2> 12.26 + 12.27 + <dl> 12.28 + <dt>This version: 12.29 + 12.30 + <dd>TBD 12.31 + 12.32 + <dt>Latest version: 12.33 + 12.34 + <dd>27 August 2012 12.35 + 12.36 + <dt>Previous version: 12.37 + 12.38 + <dd>TBD 12.39 + 12.40 + <dt>Editors: 12.41 + 12.42 + <dd class=vcard><span class=fn>Daniel Glazman</span>, on behalf of <span 12.43 + class=org>Adobe Systems, Inc.</span> 12.44 + 12.45 + <dd class=vcard><span class=fn>Alan Stearns</span>, <span class=org>Adobe 12.46 + Systems, Inc.</span>, <span class=email>stearns@adobe.com</span> 12.47 + 12.48 + <dt>Issues List: 12.49 + 12.50 + <dd>TBD 12.51 + 12.52 + <dt>Discussion: 12.53 + 12.54 + <dd><a 12.55 + href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 12.56 + with subject line "<code>[css4-pseudo] message topic</code>" 12.57 + </dl> 12.58 + 12.59 + <p class=copyright><a 12.60 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 12.61 + rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 12.62 + title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 12.63 + href="http://www.csail.mit.edu/"><abbr 12.64 + title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 12.65 + href="http://www.ercim.eu/"><abbr 12.66 + title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 12.67 + <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 12.68 + href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 12.69 + <a 12.70 + href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 12.71 + and <a 12.72 + href="http://www.w3.org/Consortium/Legal/copyright-documents">document 12.73 + use</a> rules apply.</p> 12.74 + 12.75 + <hr title="Separator for header"> 12.76 + </div> 12.77 + 12.78 + <h2 class="no-num no-toc" id=abstract>Abstract</h2> 12.79 + 12.80 + <div> 12.81 + <p>This document extracts the notion of pseudo-elements from the Selectors 12.82 + 3 specification and proposes to extend it to be able to create and style 12.83 + an arbitrary number of pseudo-elements <em>before</em>, <em>after</em> an 12.84 + element.<br> 12.85 + </p> 12.86 + </div> 12.87 + 12.88 + <h2 class="no-num no-toc" id=status-of-this-document>Status of this 12.89 + document</h2> 12.90 + 12.91 + <p>This document is a submission by Adobe Systems Inc. to the CSS Working 12.92 + Group for discussion. 12.93 + 12.94 + <h2 class="no-num no-toc" id=table-of-contents>Table of contents</h2> 12.95 + <!--begin-toc--> 12.96 + 12.97 + <ul class=toc> 12.98 + <li><a href="#pseudo-elements"><span class=secno>1. 12.99 + </span>Pseudo-elements</a> 12.100 + <ul class=toc> 12.101 + <li><a href="#first-line"><span class=secno>1.1. </span>The ::first-line 12.102 + pseudo-element</a> 12.103 + <ul class=toc> 12.104 + <li><a href="#first-formatted-line"><span class=secno>1.1.1. 12.105 + </span>First formatted line definition in CSS</a> 12.106 + </ul> 12.107 + 12.108 + <li><a href="#first-letter"><span class=secno>1.2. </span>The 12.109 + ::first-letter pseudo-element</a> 12.110 + <ul class=toc> 12.111 + <li><a href="#application-in-css"><span class=secno>1.2.1. 12.112 + </span>Application in CSS</a> 12.113 + </ul> 12.114 + 12.115 + <li><a href="#gen-content"><span class=secno>1.3. </span>The ::before 12.116 + and ::after pseudo-elements</a> 12.117 + <ul class=toc> 12.118 + <li><a href="#ordinal-before-and-after"><span class=secno>1.3.1. 12.119 + </span>Multiple ::before and ::after pseudo-elements using 12.120 + ordinals</a> 12.121 + 12.122 + <li><a href="#the-nth-before-nth-after-nth-last-before"><span 12.123 + class=secno>1.3.2. </span>The ::nth-before(), ::nth-after(), 12.124 + ::nth-last-before() and ::nth-last-after() pseudo-elements </a> 12.125 + </ul> 12.126 + </ul> 12.127 + 12.128 + <li><a href="#additions-to-the-css-object-model"><span class=secno>2. 12.129 + </span>Additions to the CSS Object Model</a> 12.130 + <ul class=toc> 12.131 + <li><a href="#interface-csspseudoelement"><span class=secno>2.1. 12.132 + </span>Interface CSSPseudoElement</a> 12.133 + 12.134 + <li><a href="#interface-csspseudoelementlist"><span class=secno>2.2. 12.135 + </span>Interface CSSPseudoElementList</a> 12.136 + 12.137 + <li><a href="#addition-to-the-window"><span class=secno>2.3. 12.138 + </span>Addition to the window</a> 12.139 + </ul> 12.140 + 12.141 + <li class=no-num><a href="#ACKS">Acknowledgements</a> 12.142 + 12.143 + <li class=no-num><a href="#references"> References</a> 12.144 + <ul class=toc> 12.145 + <li class=no-num><a href="#normative-references"> Normative 12.146 + references</a> 12.147 + 12.148 + <li class=no-num><a href="#other-references"> Other references</a> 12.149 + </ul> 12.150 + 12.151 + <li class=no-num><a href="#index"> Index</a> 12.152 + </ul> 12.153 + <!--end-toc--> 12.154 + 12.155 + <h2 id=pseudo-elements><span class=secno>1. </span>Pseudo-elements</h2> 12.156 + 12.157 + <p>Pseudo-elements create abstractions about the document tree beyond those 12.158 + specified by the document language. For instance, document languages do 12.159 + not offer mechanisms to access the first letter or first line of an 12.160 + element's content. Pseudo-elements allow authors to refer to this 12.161 + otherwise inaccessible information. Pseudo-elements may also provide 12.162 + authors a way to refer to content that does not exist in the source 12.163 + document (e.g., the <code>::before</code> and <code>::after</code> 12.164 + pseudo-elements give access to generated content). <br> 12.165 + 12.166 + <p>Pseudo-elements can be placed anywhere relatively to the element 12.167 + creating them although the state of the art currently allows only the 12.168 + following : 12.169 + 12.170 + <ul> 12.171 + <li>inside the element and before the element's content 12.172 + 12.173 + <li>inside the element and after the element's content 12.174 + 12.175 + <li>inside the element's contents at any depth 12.176 + </ul> 12.177 + 12.178 + <p> 12.179 + 12.180 + <p>The notation for a pseudo-element is made of two colons 12.181 + (<code>::</code>) followed by the name of the pseudo-element, possibly 12.182 + immediately followed by a block of parenthesis containing comma-separated 12.183 + arguments.<br> 12.184 + 12.185 + <p>For compatibility with existing style sheets, user agents must also 12.186 + accept the previous one-colon notation for pseudo-elements introduced in 12.187 + CSS levels 1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a> and 12.188 + 2 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> (namely 12.189 + <code>:first-line</code>, <code>:first-letter</code>, <code>:before</code> 12.190 + and <code>:after</code>). This compatibility is not allowed for the new 12.191 + pseudo-elements introduced in this specification. 12.192 + 12.193 + <h3 id=first-line><span class=secno>1.1. </span>The ::first-line 12.194 + pseudo-element</h3> 12.195 + 12.196 + <p>The <code>::first-line</code> pseudo-element describes the contents of 12.197 + the first formatted line of an element. 12.198 + 12.199 + <div class=example> 12.200 + <p>CSS example:</p> 12.201 + 12.202 + <pre>p::first-line { text-transform: uppercase }</pre> 12.203 + 12.204 + <p>The above rule means "change the letters of the first line of every 12.205 + <code>p</code> element to uppercase".</p> 12.206 + 12.207 + <p>The selector <code>p::first-line</code> does not match any real 12.208 + document element. It does match a pseudo-element that conforming user 12.209 + agents will insert at the beginning of every <code>p</code> element.</p> 12.210 + </div> 12.211 + 12.212 + <p>Note that the length of the first line depends on a number of factors, 12.213 + including the width of the page, the font size, etc. Thus, an ordinary 12.214 + HTML <a href="#HTML5" rel=biblioentry>[HTML5]<!--{{HTML5}}--></a> 12.215 + paragraph such as: 12.216 + 12.217 + <pre><P>This is a somewhat long HTML 12.218 paragraph that will be broken into several 12.219 lines. The first line will be identified 12.220 by a fictional tag sequence. The other lines 12.221 will be treated as ordinary lines in the 12.222 paragraph.</P> 12.223 </pre> 12.224 + 12.225 + <p>the lines of which happen to be broken as follows: 12.226 + 12.227 + <pre>THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT 12.228 will be broken into several lines. The first 12.229 line will be identified by a fictional tag 12.230 sequence. The other lines will be treated as 12.231 ordinary lines in the paragraph. 12.232 </pre> 12.233 + 12.234 + <p>This paragraph might be "rewritten" by user agents to include the 12.235 + <em>fictional tag sequence</em> for <code>::first-line</code>. This 12.236 + fictional tag sequence helps to show how properties are inherited. 12.237 + 12.238 + <pre><P><b><P::first-line></b> This is a somewhat long HTML 12.239 paragraph that <b></P::first-line></b> will be broken into several 12.240 lines. The first line will be identified 12.241 by a fictional tag sequence. The other lines 12.242 will be treated as ordinary lines in the 12.243 paragraph.</P> 12.244 </pre> 12.245 + 12.246 + <p>If a pseudo-element breaks up a real element, the desired effect can 12.247 + often be described by a fictional tag sequence that closes and then 12.248 + re-opens the element. Thus, if we mark up the previous paragraph with a 12.249 + <code>span</code> element: 12.250 + 12.251 + <pre><P><b><SPAN class="test"></b> This is a somewhat long HTML 12.252 paragraph that will be broken into several 12.253 lines.<b></SPAN></b> The first line will be identified 12.254 by a fictional tag sequence. The other lines 12.255 will be treated as ordinary lines in the 12.256 paragraph.</P> 12.257 </pre> 12.258 + 12.259 + <p>the user agent could simulate start and end tags for <code>span</code> 12.260 + when inserting the fictional tag sequence for <code>::first-line</code>. 12.261 + 12.262 + <pre><P><P::first-line><b><SPAN class="test"></b> This is a 12.263 somewhat long HTML 12.264 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class="test"></b> be 12.265 broken into several 12.266 lines.<b></SPAN></b> The first line will be identified 12.267 by a fictional tag sequence. The other lines 12.268 will be treated as ordinary lines in the 12.269 paragraph.</P> 12.270 </pre> 12.271 + 12.272 + <h4 id=first-formatted-line><span class=secno>1.1.1. </span><dfn 12.273 + id=first-formatted-line0>First formatted line</dfn> definition in CSS</h4> 12.274 + 12.275 + <p>In CSS, the <code>::first-line</code> pseudo-element can only have an 12.276 + effect when attached to a block-like container such as a block box, 12.277 + inline-block, table-caption, or table-cell. 12.278 + 12.279 + <p>The first formatted line of an element may occur inside a block-level 12.280 + descendant in the same flow (i.e., a block-level descendant that is not 12.281 + out-of-flow due to floating or positioning). For example, the first line 12.282 + of the <code>DIV</code> in <code><DIV><P>This 12.283 + line...</P></DIV></code> is the first line of the 12.284 + <code>P</code> (assuming that both <code>P</code> and <code>DIV</code> are 12.285 + block-level). 12.286 + 12.287 + <p>The first line of a table-cell or inline-block cannot be the first 12.288 + formatted line of an ancestor element. Thus, in <code><DIV><P 12.289 + STYLE="display: inline-block">Hello<BR>Goodbye</P> 12.290 + etcetera</DIV></code> the first formatted line of the <code>DIV 12.291 + </code> is not the line "Hello". 12.292 + 12.293 + <p class=note><span class=note-prefix>Note </span> Note that the first 12.294 + line of the <code>p</code> in this fragment: 12.295 + <code><p><br>First...</code> doesn't contain any letters 12.296 + (assuming the default style for <code>br</code>). The word "First" is not 12.297 + on the first formatted line. 12.298 + 12.299 + <p>A User-Agent should act as if the fictional start tags of the 12.300 + <code>::first-line</code> pseudo-elements were nested just inside the 12.301 + innermost enclosing block-level element. (Since CSS1 and CSS2 were silent 12.302 + on this case, authors should not rely on this behavior.) For example, the 12.303 + fictional tag sequence for 12.304 + 12.305 + <pre><DIV> 12.306 <P>First paragraph</P> 12.307 <P>Second paragraph</P> 12.308 </DIV> 12.309 </pre> 12.310 + 12.311 + <p>is 12.312 + 12.313 + <pre><DIV> 12.314 <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P> 12.315 <P><P::first-line>Second paragraph</P::first-line></P> 12.316 </DIV> 12.317 </pre> 12.318 + 12.319 + <p>The <code>::first-line</code> pseudo-element is similar to an 12.320 + inline-level element, but with certain restrictions. The following CSS 12.321 + properties apply to a <code>::first-line</code> pseudo-element: font 12.322 + properties, color property, background properties, ‘<code 12.323 + class=property>word-spacing</code>’, ‘<code 12.324 + class=property>letter-spacing</code>’, ‘<code 12.325 + class=property>text-decoration</code>’, ‘<code 12.326 + class=property>vertical-align</code>’, ‘<code 12.327 + class=property>text-transform</code>’, ‘<code 12.328 + class=property>line-height</code>’. User-Agents may apply other 12.329 + properties as well. 12.330 + 12.331 + <p>During CSS inheritance, the portion of a child element that occurs on 12.332 + the first line only inherits properties applicable to the 12.333 + <code>::first-line</code> pseudo-element from the 12.334 + <code>::first-line</code> pseudo-element. For all other properties 12.335 + inheritence is from the non-pseudo-element parent of the first line pseudo 12.336 + element. (The portion of a child element that does not occur on the first 12.337 + line always inherits from the parent of that child.) 12.338 + 12.339 + <h3 id=first-letter><span class=secno>1.2. </span>The ::first-letter 12.340 + pseudo-element</h3> 12.341 + 12.342 + <p>The <code>::first-letter</code> pseudo-element represents the first 12.343 + letter of an element, if it is not preceded by any other content (such as 12.344 + images or inline tables) on its line. The ::first-letter pseudo-element 12.345 + may be used for "initial caps" and "drop caps", which are common 12.346 + typographical effects. 12.347 + 12.348 + <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps), 12.349 + "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation 12.350 + classes), that precedes or follows the first letter should be included. <a 12.351 + href="#UNICODE" rel=biblioentry>[UNICODE]<!--{{!UNICODE}}--></a> 12.352 + 12.353 + <div class=figure> 12.354 + <p><img alt="Quotes that precede the first letter should be included." 12.355 + src="http://www.w3.org/TR/selectors/first-letter2.png"></p> 12.356 + </div> 12.357 + 12.358 + <p>The <code>::first-letter</code> also applies if the first letter is in 12.359 + fact a digit, e.g., the "6" in "67 million dollars is a lot of money." 12.360 + 12.361 + <p class=note><span class=note-prefix>Note </span> In some cases the 12.362 + <code>::first-letter</code> pseudo-element should include more than just 12.363 + the first non-punctuation character on a line. For example, combining 12.364 + characters must be kept with their base character. Additionally, some 12.365 + languages may have specific rules about how to treat certain letter 12.366 + combinations. The User-Agent definition of <code>::first-letter</code> 12.367 + should include at least the default grapheme cluster as defined by UAX29 12.368 + and may include more than that as appropriate. In Dutch, for example, if 12.369 + the letter combination "ij" appears at the beginning of an element, both 12.370 + letters should be considered within the <code>::first-letter</code> 12.371 + pseudo-element. <a href="#UAX29" 12.372 + rel=biblioentry>[UAX29]<!--{{UAX29}}--></a> 12.373 + 12.374 + <p>If the letters that would form the <code>::first-letter</code> are not 12.375 + in the same element, such as "‘<code class=css>T" in 12.376 + <code><p>'<em>T...</code>, the User-Agent may create a 12.377 + <code>::first-letter</code> pseudo-element from one of the elements, both 12.378 + elements, or simply not create a pseudo-element.</code> 12.379 + 12.380 + <p>Similarly, if the first letter(s) of the block are not at the start of 12.381 + the line (for example due to bidirectional reordering), then the 12.382 + User-Agent need not create the pseudo-element(s). 12.383 + 12.384 + <div class=example> 12.385 + <p>Example:</p> 12.386 + 12.387 + <p><a name=overlapping-example></a>The following CSS and HTML example 12.388 + illustrates how overlapping pseudo-elements may interact. The first 12.389 + letter of each P element will be green with a font size of ’24pt'. The 12.390 + rest of the first formatted line will be ‘<code 12.391 + class=property>blue</code>’ while the rest of the paragraph will be 12.392 + ‘<code class=property>red</code>’.</p> 12.393 + 12.394 + <pre>p { color: red; font-size: 12pt } 12.395 p::first-letter { color: green; font-size: 200% } 12.396 p::first-line { color: blue } 12.397 12.398 <P>Some text that ends up on two lines</P></pre> 12.399 + 12.400 + <p>Assuming that a line break will occur before the word "ends", the <span 12.401 + class=index-inst id=fictional-tag-sequence 12.402 + title="fictional tag sequence">fictional tag sequence</span> for this 12.403 + fragment might be:</p> 12.404 + 12.405 + <pre><P> 12.406 <P::first-line> 12.407 <P::first-letter> 12.408 S 12.409 </P::first-letter>ome text that 12.410 </P::first-line> 12.411 ends up on two lines 12.412 </P></pre> 12.413 + 12.414 + <p>Note that the <code>::first-letter</code> element is inside the 12.415 + <code>::first-line</code> element. Properties set on 12.416 + <code>::first-line</code> are inherited by <code>::first-letter</code>, 12.417 + but are overridden if the same property is set on 12.418 + <code>::first-letter</code>.</p> 12.419 + </div> 12.420 + 12.421 + <p>The first letter must occur on the <a href="#first-formatted-line">first 12.422 + formatted line.</a> For example, in this HTML fragment: 12.423 + <code><p><br>First...</code> the first line doesn't contain 12.424 + any letters and <code>::first-letter</code> doesn't match anything 12.425 + (assuming the default style for <code>br</code> in HTML 4). In particular, 12.426 + it does not match the "F" of "First." 12.427 + 12.428 + <h4 id=application-in-css><span class=secno>1.2.1. </span>Application in 12.429 + CSS</h4> 12.430 + 12.431 + <p>In CSS, the <code>::first-letter</code> pseudo-element applies to 12.432 + block-like containers such as block, list-item, table-cell, table-caption, 12.433 + and inline-block elements. <span class=note><strong>Note:</strong> A 12.434 + future version of this specification may allow this pseudo-element to 12.435 + apply to more display types.</span> 12.436 + 12.437 + <p>The <code>::first-letter</code> pseudo-element can be used with all such 12.438 + elements that contain text, or that have a descendant in the same flow 12.439 + that contains text. A User-Agent should act as if the fictional start tag 12.440 + of the ::first-letter pseudo-element is just before the first text of the 12.441 + element, even if that first text is in a descendant. 12.442 + 12.443 + <div class=example> 12.444 + <p>Example:</p> 12.445 + 12.446 + <p>The fictional tag sequence for this HTML fragment:</p> 12.447 + 12.448 + <pre><div> 12.449 <p>The first text.</pre> 12.450 + 12.451 + <p>is:</p> 12.452 + 12.453 + <pre><div> 12.454 <p><div::first-letter><p::first-letter>T</...></...>he first text.</pre> 12.455 + </div> 12.456 + 12.457 + <p>In CSS the first letter of a table-cell or inline-block cannot be the 12.458 + first letter of an ancestor element. Thus, in <code><DIV><P 12.459 + STYLE="display: inline-block">Hello<BR>Goodbye</P> 12.460 + etcetera</DIV></code> the first letter of the <code>DIV</code> is 12.461 + not the letter "H". In fact, the <code>DIV</code> doesn't have a first 12.462 + letter. 12.463 + 12.464 + <p>If an element is a list item (‘<code class=css>display: 12.465 + list-item</code>’), the <code>::first-letter</code> applies to the first 12.466 + letter in the principal box after the marker. User-Agents may ignore 12.467 + <code>::first-letter</code> on list items with ‘<code 12.468 + class=css>list-style-position: inside</code>’. If an element has 12.469 + <code>::before</code> or <code>::after</code> content, the 12.470 + <code>::first-letter</code> applies to the first letter of the element 12.471 + <em>including</em> that content. 12.472 + 12.473 + <div class=example> 12.474 + <p>Example:</p> 12.475 + 12.476 + <p>After the rule <code>p::before {content: "Note: "}</code>, the selector 12.477 + <code>p::first-letter</code> matches the "N" of "Note".</p> 12.478 + </div> 12.479 + 12.480 + <p>In CSS a ::first-line pseudo-element is similar to an inline-level 12.481 + element if its ‘<code class=property>float</code>’ property is 12.482 + ‘<code class=property>none</code>’; otherwise, it is similar to a 12.483 + floated element. The following properties that apply to 12.484 + <code>::first-letter</code> pseudo-elements: font properties, ‘<code 12.485 + class=property>text-decoration</code>’, ‘<code 12.486 + class=property>text-transform</code>’, ‘<code 12.487 + class=property>letter-spacing</code>’, ‘<code 12.488 + class=property>word-spacing</code>’ (when appropriate), ‘<code 12.489 + class=property>line-height</code>’, ‘<code 12.490 + class=property>float</code>’, ‘<code 12.491 + class=property>vertical-align</code>’ (only if ‘<code 12.492 + class=property>float</code>’ is ‘<code class=property>none</code>’), 12.493 + margin properties, padding properties, border properties, color property, 12.494 + background properties. User-Agents may apply other properties as well. To 12.495 + allow User-Agents to render a typographically correct drop cap or initial 12.496 + cap, the User-Agent may choose a line-height, width and height based on 12.497 + the shape of the letter, unlike for normal elements. 12.498 + 12.499 + <div class=example> 12.500 + <p>Example:</p> 12.501 + 12.502 + <p>This CSS and HTML example shows a possible rendering of an initial cap. 12.503 + Note that the ‘<code class=property>line-height</code>’ that is 12.504 + inherited by the <code>::first-letter</code> pseudo-element is 1.1, but 12.505 + the User-Agent in this example has computed the height of the first 12.506 + letter differently, so that it doesn't cause any unnecessary space 12.507 + between the first two lines. Also note that the fictional start tag of 12.508 + the first letter is inside the <span>span</span>, and thus the font 12.509 + weight of the first letter is normal, not bold as the <span>span</span>:</p> 12.510 + 12.511 + <pre>p { line-height: 1.1 } 12.512 p::first-letter { font-size: 3em; font-weight: normal } 12.513 span { font-weight: bold } 12.514 ... 12.515 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> 12.516 Erbarremt over my en mijn benaeuwde vesten<br> 12.517 En arme burgery, en op mijn volcx gebed<br> 12.518 En dagelix geschrey de bange stad ontzet. 12.519 </pre> 12.520 + 12.521 + <div class=figure> 12.522 + <p><img alt="Image illustrating the ::first-letter pseudo-element" 12.523 + src="http://www.w3.org/TR/selectors/initial-cap.png"></p> 12.524 + </div> 12.525 + </div> 12.526 + 12.527 + <div class=example> 12.528 + <p>The following CSS will make a drop cap initial letter span about two 12.529 + lines:</p> 12.530 + 12.531 + <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 12.532 <HTML> 12.533 <HEAD> 12.534 <TITLE>Drop cap initial letter</TITLE> 12.535 <STYLE type="text/css"> 12.536 P { font-size: 12pt; line-height: 1.2 } 12.537 P::first-letter { font-size: 200%; font-weight: bold; float: left } 12.538 SPAN { text-transform: uppercase } 12.539 </STYLE> 12.540 </HEAD> 12.541 <BODY> 12.542 <P><SPAN>The first</SPAN> few words of an article 12.543 in The Economist.</P> 12.544 </BODY> 12.545 </HTML> 12.546 </pre> 12.547 + 12.548 + <p>This example might be formatted as follows:</p> 12.549 + 12.550 + <div class=figure> 12.551 + <p><img 12.552 + alt="Image illustrating the combined effect of the ::first-letter and ::first-line pseudo-elements" 12.553 + src="http://www.w3.org/TR/selectors/first-letter.png"></p> 12.554 + </div> 12.555 + 12.556 + <p>The <span class=index-inst id=fictional-tag-sequence0 12.557 + title="fictional tag sequence">fictional tag sequence</span> is:</p> 12.558 + 12.559 + <pre><P> 12.560 <SPAN> 12.561 <P::first-letter> 12.562 T 12.563 </P::first-letter>he first 12.564 </SPAN> 12.565 few words of an article in the Economist. 12.566 </P> 12.567 </pre> 12.568 + 12.569 + <p>Note that the <code>::first-letter</code> pseudo-element tags abut the 12.570 + content (i.e., the initial character), while the ::first-line 12.571 + pseudo-element start tag is inserted right after the start tag of the 12.572 + block element.</p> 12.573 + </div> 12.574 + 12.575 + <p>In order to achieve traditional drop caps formatting, user agents may 12.576 + approximate font sizes, for example to align baselines. Also, the glyph 12.577 + outline may be taken into account when formatting. 12.578 + 12.579 + <h3 id=gen-content><span class=secno>1.3. </span>The ::before and ::after 12.580 + pseudo-elements</h3> 12.581 + 12.582 + <p>The <code>::before</code> and <code>::after</code> pseudo-elements can 12.583 + be used to describe generated content before or after an element's 12.584 + content. They are explained in CSS 2.1 <a href="#CSS21" 12.585 + rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 12.586 + 12.587 + <p>When the <code>::first-letter</code> and <code>::first-line</code> 12.588 + pseudo-elements are applied to an element having content generated using 12.589 + <code>::before</code> or <code>::after</code> pseudo-elements, they apply 12.590 + to the first letter or line of the element including the generated 12.591 + content. 12.592 + 12.593 + <p> 12.594 + 12.595 + <p>A <a href="http://www.w3.org/TR/CSS2/syndata.html#rule-sets">CSS 12.596 + rule</a> using <code>::before</code> or <code>::after</code> creates a 12.597 + pseudo-element only if the <a 12.598 + href="http://www.w3.org/TR/CSS2/cascade.html#computed-value">computed 12.599 + values</a> of the ‘<code class=css><a 12.600 + href="http://www.w3.org/TR/CSS2/generate.html#content">content</a></code>’ 12.601 + property and the ‘<code class=css><a 12.602 + href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"><span 12.603 + class=property>flow-from</span></a></code>’ property <a 12.604 + href="#CSS3-REGIONS" 12.605 + rel=biblioentry>[CSS3-REGIONS]<!--{{CSS3-REGIONS}}--></a> are not both 12.606 + ‘<code class=property>none</code>’. 12.607 + 12.608 + <div class=issue> 12.609 + <p>There are a11y issues with ::before and ::after pseudo-elements and 12.610 + generated content that were raised in the discussion of the following 12.611 + sections.</p> 12.612 + </div> 12.613 + 12.614 + <h4 id=ordinal-before-and-after><span class=secno>1.3.1. </span>Multiple 12.615 + ::before and ::after pseudo-elements using ordinals</h4> 12.616 + 12.617 + <p>More than one ::before or ::after pseudo-element can be created or 12.618 + accessed by adding a positive integer called the <strong>ordinal</strong> 12.619 + in parentheses. 12.620 + 12.621 + <div class=issue> 12.622 + <p>Using ordinals solves issues of insertion order, but does not provide a 12.623 + meaningful name for a particular ::before or ::after element. A named 12.624 + psuedo-element could provide better meaning, at the expense of ordering.</p> 12.625 + </div> 12.626 + 12.627 + <p>The ordinal 1 has a special meaning:<code> </code> 12.628 + 12.629 + <ul> 12.630 + <li><code>::before(1)</code> and <a 12.631 + href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::before</code></a> 12.632 + are strictly equivalent 12.633 + 12.634 + <li><code>::after(1)</code> and <a 12.635 + href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::after</code></a> 12.636 + are also strictly equivalent. 12.637 + </ul> 12.638 + 12.639 + <p><code>::before()</code> and <code>::after()</code> pseudo-elements are 12.640 + ordered by increasing ordinal from the nearest element's contents 12.641 + boundaries. For example: 12.642 + 12.643 + <div class=example> 12.644 + <p>Let's take the example of a div element creating two ::before 12.645 + pseudo-elements at ordinals 1 and 4, and three ::after pseudo-elements at 12.646 + ordinals 1, 5 and 8. The rules would look like this: 12.647 + 12.648 + <pre> 12.649 div::before(1) {} 12.650 div::before(4) {} 12.651 div::after(1) {} 12.652 div::after(5) {} 12.653 div::after(8) {} 12.654 </pre> 12.655 + The pseudo-elements and the contents of the element are then ordered in 12.656 + this way: 12.657 + <pre> 12.658 -- element's boundary -- 12.659 [ ordinal 4, before ] 12.660 [ ::before, ordinal 1, before ] 12.661 -- element's contents boundary -- 12.662 12.663 -- element's contents boundary -- 12.664 [ ::after, ordinal 1, after ] 12.665 [ ordinal 5, after ] 12.666 [ ordinal 8, after ] 12.667 -- element's boundary -- 12.668 </pre> 12.669 + </div> 12.670 + 12.671 + <div class=example> 12.672 + <p>One use of multiple <code>::before</code> and <code>::after</code> 12.673 + elements is to mix generated content with graphical effects. 12.674 + Pseudo-elements are used in quotes both for adding quotation marks in 12.675 + generated content OR for drawing a speech bubble arrow. With multiple 12.676 + <code>::before</code> and <code>::after</code> elements you can get both.</p> 12.677 + 12.678 + <p>This effect: <img src="images/quote-arrow.png"> can be achieved with 12.679 + this code:</p> 12.680 + 12.681 + <pre> 12.682 div::before { 12.683 content: "“"; 12.684 } 12.685 12.686 div::after { 12.687 content: "”"; 12.688 } 12.689 12.690 div::after(2) { 12.691 content: "."; 12.692 position: absolute; 12.693 bottom: -10px; 12.694 right: 20%; 12.695 border-left: 10px solid transparent; 12.696 border-right: 10px solid transparent; 12.697 border-top: 10px solid #111; 12.698 width: 0; 12.699 height: 0; 12.700 } 12.701 12.702 div{ 12.703 position: relative; 12.704 float: left; 12.705 background: #111; 12.706 padding: 1em; 12.707 border-radius: 1em; 12.708 color: white; 12.709 } 12.710 12.711 <div>I'm talking about CSS Pseudo-elements.</div> 12.712 </pre> 12.713 + 12.714 + <p>And if you have a single quote from multiple speakers, more arrows can 12.715 + be added by adding more <code>::after()</code> pseudo-elements: <img 12.716 + src="images/multiple-arrows.png"></p> 12.717 + 12.718 + <p>In general, there's no longer a limitation to two instances for 12.719 + whatever a <code>::before</code> or <code>::after</code> pseudo-element 12.720 + can be used (generated content, graphic effects, clearfix, etc.). 12.721 + </div> 12.722 + 12.723 + <div class=example> 12.724 + <p>Another use of multiple <code>::before</code> and <code>::after</code> 12.725 + pseudo-elements is to change the style of pieces of generated content. If 12.726 + a citation appended to a quote should be in a different font than the 12.727 + quotation mark, two ::after() pseudo-elements can be used.</p> 12.728 + <img src="images/multiple-styles.png"> 12.729 + <pre> 12.730 blockquote::before { 12.731 content: "“"; 12.732 } 12.733 12.734 blockquote::after { 12.735 content: "”"; 12.736 } 12.737 12.738 blockquote::after(2) { 12.739 content: " - " attr(data-author); 12.740 font: normal 0.8em sans-serif; 12.741 } 12.742 12.743 <blockquote data-author="Mark Twain">The funniest things are the forbidden.</blockquote> 12.744 </pre> 12.745 + </div> 12.746 + 12.747 + <div class=issue> 12.748 + <p>An issue has been raised on the previous example, questioning whether 12.749 + using attr(data-author) in this way is appropriate for use in an example.</p> 12.750 + </div> 12.751 + 12.752 + <div class=example> 12.753 + <p>A use for ordinals is to allow muliple stylesheets to add their own 12.754 + <code>::before</code> and <code>::after</code> pseudo-elements and 12.755 + coordinate insertion positions.</p> 12.756 + 12.757 + <p>If one stylesheet uses a single <code>::before(10) {}</code> rule, then 12.758 + another stylesheet gets the option to</p> 12.759 + 12.760 + <ul> 12.761 + <li>Add to or redefine that rule 12.762 + 12.763 + <li>Add an additional pseudo-element before that one with 12.764 + <code>::before(5) {}</code> 12.765 + 12.766 + <li>Add an additional pseudo-element after that one with 12.767 + <code>::before(15) {}</code> 12.768 + </ul> 12.769 + </div> 12.770 + 12.771 + <div class=example> 12.772 + <p>Pseudo-elements can be used to generate boxes in CSS for a <a 12.773 + href="http://dev.w3.org/csswg/css3-regions/#region-chain">region 12.774 + chain</a>. Allowing more than two such boxes per element could allow the 12.775 + main CSS Regions <a 12.776 + href="http://dev.w3.org/csswg/css3-regions/#named-flows-and-regions">example</a> 12.777 + to be <a 12.778 + href="http://dev.w3.org/csswg/css3-regions/#intro-example-code">written</a> 12.779 + without empty divs for the regions in the markup.</p> 12.780 + 12.781 + <p>Region chains with a fixed number of regions (usually with an 12.782 + auto-height region at the end of the chain) can be defined entirely in 12.783 + CSS using multiple pseudo-elements.</p> 12.784 + 12.785 + <pre> 12.786 <style> 12.787 #grid { 12.788 width: 80vw; 12.789 height: 60vw; 12.790 grid-template: "aaa.d" 12.791 "....d" 12.792 "bbb.d" 12.793 "....d" 12.794 "ccc.d"; 12.795 grid-rows: 52% 4% 20% 4% 20%; 12.796 grid-columns: 30% 5% 30% 5% 30%; 12.797 } 12.798 #grid::before(2) { grid-cell: a; } 12.799 #grid::before { grid-cell: b; } 12.800 #boxA { grid-cell: c; } 12.801 #grid::after { grid-cell: d; } 12.802 12.803 #body::after { 12.804 width: 80vw; 12.805 } 12.806 12.807 #grid::before { 12.808 column-count: 2; 12.809 } 12.810 12.811 article { 12.812 flow-into: article_flow; 12.813 } 12.814 12.815 #grid::before(2), #grid::before, #grid::after, #body::after { 12.816 flow-from: article_flow; 12.817 } 12.818 12.819 </style> 12.820 12.821 <article> 12.822 <h1>Introduction</h1> 12.823 <p>This is an example ...</p> 12.824 12.825 <h2>More Details</h2> 12.826 <p>This illustrates ...</p> 12.827 <p>Then, the example ...</p> 12.828 <p>Finally, this ...</p> 12.829 </article> 12.830 12.831 <div id="grid"> 12.832 <div id="boxA"></div> 12.833 </div> 12.834 </pre> 12.835 + </div> 12.836 + 12.837 + <div class=issue> 12.838 + <p>Several choices of syntax for declaring multiple ::before and ::after 12.839 + pseudo-elements have been considered.</p> 12.840 + 12.841 + <ul> 12.842 + <li>Brackets - <code>::before[2]</code> 12.843 + <ul></ul> 12.844 + 12.845 + <p>Benefits 12.846 + 12.847 + <li>Can reserve bracket syntax for ordinals 12.848 + 12.849 + <li>Could be appended to an otherwise-parenthesized pseudo 12.850 + <code>::hypothetical(args)[ordinal]</code> 12.851 + </ul> 12.852 + 12.853 + <ul></ul> 12.854 + 12.855 + <p>Drawbacks 12.856 + 12.857 + <ul> 12.858 + <li>Looks too much like attribute selectors 12.859 + </ul> 12.860 + 12.861 + <ul> 12.862 + <li>Add a generic ordinal syntax - ::pseudo(before, 2) 12.863 + <ul></ul> 12.864 + 12.865 + <p>Benefits 12.866 + 12.867 + <li>Easily extensible to addition pseudos 12.868 + 12.869 + <li>Parallel to ::nth-pseudo() syntax 12.870 + </ul> 12.871 + 12.872 + <ul></ul> 12.873 + 12.874 + <p>Drawbacks 12.875 + 12.876 + <ul> 12.877 + <li>Only used for ::before and ::after so far 12.878 + 12.879 + <li>More to type 12.880 + </ul> 12.881 + 12.882 + <ul> 12.883 + <li>Parentheses - <code>::before(2)</code> 12.884 + <ul></ul> 12.885 + 12.886 + <p>Benefits 12.887 + 12.888 + <li>No attribute selector confusion 12.889 + 12.890 + <li>Previous attempts have used this syntax 12.891 + </ul> 12.892 + 12.893 + <ul></ul> 12.894 + 12.895 + <p>Drawbacks 12.896 + 12.897 + <ul> 12.898 + <li>Perhaps harder to distinguish ordinal from index? 12.899 + </ul> 12.900 + </div> 12.901 + 12.902 + <div class=issue> 12.903 + <p>We arbitrarily chose the order here. Pseudo-elements could be ordered 12.904 + differently, for example as in:<br> 12.905 + </p> 12.906 + 12.907 + <pre> 12.908 -- element's boundary -- 12.909 [ ::before, ordinal 1, before ] 12.910 [ ordinal 4, before ] 12.911 -- element's contents boundary -- 12.912 12.913 -- element's contents boundary -- 12.914 [ ordinal 8, after ] 12.915 [ ordinal 5, after ] 12.916 [ ::after, ordinal 1, after ] 12.917 -- element's boundary -- 12.918 </pre> 12.919 + 12.920 + <p>or</p> 12.921 + 12.922 + <pre> 12.923 -- element's boundary -- 12.924 [ ::before, ordinal 1, before ] 12.925 [ ordinal 4, before ] 12.926 -- element's contents boundary -- 12.927 12.928 -- element's contents boundary -- 12.929 [ ::after, ordinal 1, after ] 12.930 [ ordinal 5, after ] 12.931 [ ordinal 8, after ] 12.932 -- element's boundary -- 12.933 </pre> 12.934 + 12.935 + <p>We expect to resolve this issue with the CSS Working Group.</p> 12.936 + </div> 12.937 + 12.938 + <h4 id=the-nth-before-nth-after-nth-last-before><span class=secno>1.3.2. 12.939 + </span>The ::nth-before(), ::nth-after(), ::nth-last-before() and 12.940 + ::nth-last-after() pseudo-elements</h4> 12.941 + 12.942 + <p>The new <code>::nth-before()</code>, <code>::nth-after()</code>, 12.943 + <code>::nth-last-before()</code> and <code>::nth-last-after()</code> 12.944 + pseudo-elements select ::before and ::after pseudo-elements based on 12.945 + indices, not ordinals. They all take a single mandatory argument: 12.946 + 12.947 + <ol> 12.948 + <li>a mandatory <strong>index</strong> in the form of <a 12.949 + href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">an 12.950 + <code>an+b</code> syntax or the <code>odd</code> or <code>even</code> 12.951 + keywords</a> 12.952 + </ol> 12.953 + 12.954 + <div class=issue> 12.955 + <p>Extensions to selector syntax may allow pseudo-classes after a 12.956 + pseudo-element. In that case, the syntax in this section could change to 12.957 + something like <code>::before:nth()</code>, <code>::after:nth()</code>, 12.958 + <code>::before:nth-last()</code> and <code>::after:nth-last()</code>.</p> 12.959 + </div> 12.960 + 12.961 + <div class=issue> 12.962 + <p>Is ::nth-before(n) to access all ::before pseudo-elements enough of an 12.963 + override mechanism?</p> 12.964 + </div> 12.965 + 12.966 + <div class=example> 12.967 + <p>Let's reuse the example in Example 8 above and let's show the indices:</p> 12.968 + 12.969 + <pre> 12.970 -- element's boundary -- 12.971 [ ordinal 4, before, nth index 2, last-nth index 1 ] 12.972 [ ::before, ordinal 1, before, nth index 1, last-nth index 2 ] 12.973 -- element's contents boundary -- 12.974 12.975 -- element's contents boundary -- 12.976 [ ::after, ordinal 1, after, nth index 1, last-nth index 3 ] 12.977 [ ordinal 5, after, nth index 2, last-nth index 2 ] 12.978 [ ordinal 8, after, nth index 3, last-nth index 1 ] 12.979 -- element's boundary -- 12.980 </pre> 12.981 + </div> 12.982 + 12.983 + <p><code>::nth-*()</code> syntax cannot create a new pseudo-element and the 12.984 + ‘<code class=property>content</code>’ and ‘<code 12.985 + class=property>flow-from</code>’properties do not apply to them. 12.986 + 12.987 + <p>They are allowed as the second parameter of 12.988 + <code>ViewCSS.getComputedStyle()</code> if and only if the index parameter 12.989 + can select only one pseudo-element: for instance <code>12</code> or 12.990 + <code>0n+5</code>. 12.991 + 12.992 + <h2 id=additions-to-the-css-object-model><span class=secno>2. 12.993 + </span>Additions to the CSS Object Model</h2> 12.994 + 12.995 + <p>Pseudo-elements should be reachable by script, stylable from script, and 12.996 + available as event targets. 12.997 + 12.998 + <p class=note><span class=note-prefix>Note </span>We may extend this 12.999 + section in the future to allow creation of pseudo-elements from script. 12.1000 + 12.1001 + <h3 id=interface-csspseudoelement><span class=secno>2.1. </span>Interface 12.1002 + CSSPseudoElement</h3> 12.1003 + 12.1004 + <p>The <code>CSSPseudoElement</code> interface allows pseudo-elements to be 12.1005 + styleable from script and makes them event targets. 12.1006 + 12.1007 + <div class=issue> 12.1008 + <p>The approach in this draft is to start with a bare minimum for the 12.1009 + CSSPseudoElement interface and build up from there. Another more radical 12.1010 + approach could take everything that's common between a pseudo-element and 12.1011 + a node and create a new base class for both Node and CSSPseudoElement.</p> 12.1012 + </div> 12.1013 + 12.1014 + <pre 12.1015 + class=idl>interface CSSPseudoElement {<br> readonly attribute unsigned long <a 12.1016 + href="#dom-csspseudochild-ordinal">ordinal</a>;<br> // the ordinal of a column is its index<br> readonly attribute DOMString <a 12.1017 + href="#dom-csspseudochild-type">type</a>;<br> readonly attribute <a 12.1018 + href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> <a 12.1019 + href="#dom-csspseudochild-style">style</a>;<br>};<br><br>CSSPseudoElement implements EventTarget;<br></pre> 12.1020 + 12.1021 + <p><a name=dom-csspseudochild-ordinal></a>The 12.1022 + <code><strong><em>ordinal</em></strong></code> attribute represents the 12.1023 + ordinal of the pseudo-element for the object's type. It is a strictly 12.1024 + positive integer. The value <code>1</code> for the <code>before</code> 12.1025 + (or <code>after</code>, <code>letter</code> and <code>line</code>) types 12.1026 + represents the <code>::before</code> (or <code>::after</code>, 12.1027 + <code>::first-letter</code> and <code>::first-line</code>) 12.1028 + pseudo-elements. 12.1029 + 12.1030 + <p><a name=dom-csspseudochild-type></a>The 12.1031 + <code><strong><em>type</em></strong></code> attribute is a string 12.1032 + representing the type of the pseudo-element. This can be one of the 12.1033 + following values: 12.1034 + 12.1035 + <dl> 12.1036 + <dt>‘before’ 12.1037 + 12.1038 + <dd>The pseudo-element was created before the element's contents 12.1039 + 12.1040 + <dt>‘after’ 12.1041 + 12.1042 + <dd>The pseudo-element was created after the element's contents 12.1043 + 12.1044 + <dt>‘letter’ 12.1045 + 12.1046 + <dd>The pseudo-element is the first letter of the element; the only valid 12.1047 + ordinal is 1. 12.1048 + 12.1049 + <dt>‘line’ 12.1050 + 12.1051 + <dd>The pseudo-element is the first line of the element; the only valid 12.1052 + ordinal is 1. 12.1053 + 12.1054 + <dt>‘column’ 12.1055 + 12.1056 + <dd>The pseudo-element is a column created by the element through the CSS 12.1057 + Multi-column Layout Module. In that case its 12.1058 + <code><strong><em>ordinal</em></strong></code> is the index of column in 12.1059 + the collection of columns created by the element. 12.1060 + </dl> 12.1061 + 12.1062 + <p><a name=dom-csspseudochild-style></a>The 12.1063 + <code><strong><em>style</em></strong></code> attribute is a 12.1064 + <code>CSSStyleDeclaration</code> <a href="#CSSOM" 12.1065 + rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> allowing to set directly 12.1066 + style information (inline styles) onto the pseudo-element. Inline styles 12.1067 + on a <code>CSSPseudoElement</code> have precedence over all style rules 12.1068 + styling that pseudo-element. 12.1069 + 12.1070 + <p>The <a 12.1071 + href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a> 12.1072 + interface <a href="#DOM-LEVEL-2-EVENTS" 12.1073 + rel=biblioentry>[DOM-LEVEL-2-EVENTS]<!--{{!DOM-LEVEL-2-EVENTS}}--></a> 12.1074 + must be implemented by all instances of <code>CSSPseudoElement</code> in 12.1075 + an in implementation which supports the current specification. 12.1076 + 12.1077 + <h3 id=interface-csspseudoelementlist><span class=secno>2.2. 12.1078 + </span>Interface CSSPseudoElementList</h3> 12.1079 + 12.1080 + <p>The <code>CSSPseudoElementList</code> represents an ordered collection 12.1081 + of <code> CSSPseudoElement</code> instances. 12.1082 + 12.1083 + <pre 12.1084 + class=idl>interface CSSPseudoElementList {<br> readonly attribute unsigned long <a 12.1085 + href="#dom-csspseudochildlist-length">length</a>;<br> CSSPseudoElement <a 12.1086 + href="#dom-csspseudochildlist-item">item</a>(unsigned long index);<br> CSSPseudoElement <a 12.1087 + href="#dom-csspseudochildlist-getbyordinalandtype">getByOrdinalAndType</a>(unsigned long ordinal,<br> DOMString type);<br> // replies null if no pseudo-element does not exist for<br> // the requested ordinal and type<br>};</pre> 12.1088 + 12.1089 + <p><a name=dom-csspseudochildlist-length></a>The 12.1090 + <code><strong><em>length</em></strong></code> attribute represents the 12.1091 + number of <code>CSSPseudoElement</code> in the collection or zero if it is 12.1092 + empty. 12.1093 + 12.1094 + <p><a name=dom-csspseudochildlist-item></a>The method 12.1095 + <code><strong><em>item()</em></strong></code> is used to retrieve a 12.1096 + <code>CSSPseudo</code><code>Element</code> by index. It takes one 12.1097 + parameter being the requested index into the collection. Its return value 12.1098 + is the <code>CSSPseudo</code><code>Element</code> at the requested index 12.1099 + in the collection or null if that is not a valid index. 12.1100 + 12.1101 + <p><a name=dom-csspseudochildlist-getbyordinalandtype></a>The method 12.1102 + <code><strong><em>getByOrdinalAndType()</em></strong></code> is used to 12.1103 + retrieve a <code>CSSPseudo</code><code>Element</code> by its ordinal and 12.1104 + type. It takes two parameters: first, the requested ordinal; second a 12.1105 + type. Its return value is the <code>CSSPseudo</code><code>Element</code> 12.1106 + at the requested index in the collection or null if there is no 12.1107 + <code>CSSPseudo</code><code>Element</code> in the collection for that 12.1108 + index and type. 12.1109 + 12.1110 + <h3 id=addition-to-the-window><span class=secno>2.3. </span>Addition to the 12.1111 + window</h3> 12.1112 + 12.1113 + <p>A new method is added to the <code>Window</code> interface to retrieve 12.1114 + pseudo-elements created by a given element for a given type: 12.1115 + 12.1116 + <pre class=idl>partial interface Window {<br> CSSPseudoElementList <a 12.1117 + href="#dom-window-getpseudochildren">getPseudoElements</a>(Element elt,<br> DOMString type);<br>};</pre> 12.1118 + 12.1119 + <p><a name=dom-window-getpseudochildren></a>The method 12.1120 + <code>getPseudoElements()</code> is used to retrieve all 12.1121 + <code>CSSPseudoElement</code> instances created by the element 12.1122 + <code>elt</code> for the type <code>type</code>. Its return value is a 12.1123 + <code>CSSPseudoElementList</code>, potentially empty if no pseudo-element 12.1124 + exists for the given element and the given type. 12.1125 + 12.1126 + <h2 class=no-num id=ACKS>Acknowledgements</h2> 12.1127 + 12.1128 + <p>The editors would like to thank the following individuals for their 12.1129 + contributions, either during the conception of the specification or during 12.1130 + its development and specification review process: 12.1131 + 12.1132 + <blockquote> 12.1133 + <p>Tab Atkins, Razvan Caliman, Chris Coyier, Anders Grimsrud, Vincent 12.1134 + Hardy and the CSS Working Group members. 12.1135 + </blockquote> 12.1136 + 12.1137 + <h2 class=no-num id=references> References</h2> 12.1138 + 12.1139 + <h3 class=no-num id=normative-references> Normative references</h3> 12.1140 + <!--begin-normative--> 12.1141 + <!-- Sorted by label --> 12.1142 + 12.1143 + <dl class=bibliography> 12.1144 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 12.1145 + <!----> 12.1146 + 12.1147 + <dt id=CSS21>[CSS21] 12.1148 + 12.1149 + <dd>Bert Bos; et al. <a 12.1150 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style 12.1151 + Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 12.1152 + 2011. W3C Recommendation. URL: <a 12.1153 + href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> 12.1154 + </dd> 12.1155 + <!----> 12.1156 + 12.1157 + <dt id=CSSOM>[CSSOM] 12.1158 + 12.1159 + <dd>Anne van Kesteren. <a 12.1160 + href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a> 12.1161 + 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a 12.1162 + href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a> 12.1163 + </dd> 12.1164 + <!----> 12.1165 + 12.1166 + <dt id=DOM-LEVEL-2-EVENTS>[DOM-LEVEL-2-EVENTS] 12.1167 + 12.1168 + <dd>Tom Pixley. <a 12.1169 + href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113"><cite>Document 12.1170 + Object Model (DOM) Level 2 Events Specification.</cite></a> 13 November 12.1171 + 2000. W3C Recommendation. URL: <a 12.1172 + href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113">http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113</a> 12.1173 + </dd> 12.1174 + <!----> 12.1175 + 12.1176 + <dt id=UNICODE>[UNICODE] 12.1177 + 12.1178 + <dd>The Unicode Consortium. <a 12.1179 + href="http://www.unicode.org/standard/versions/enumeratedversions.html"><cite>The 12.1180 + Unicode Standard.</cite></a> 2003. Defined by: The Unicode Standard, 12.1181 + Version 4.0 (Boston, MA, Addison-Wesley, ISBN 0-321-18578-1), as updated 12.1182 + from time to time by the publication of new versions URL: <a 12.1183 + href="http://www.unicode.org/standard/versions/enumeratedversions.html">http://www.unicode.org/standard/versions/enumeratedversions.html</a> 12.1184 + </dd> 12.1185 + <!----> 12.1186 + </dl> 12.1187 + <!--end-normative--> 12.1188 + 12.1189 + <h3 class=no-num id=other-references> Other references</h3> 12.1190 + <!--begin-informative--> 12.1191 + <!-- Sorted by label --> 12.1192 + 12.1193 + <dl class=bibliography> 12.1194 + <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 12.1195 + <!----> 12.1196 + 12.1197 + <dt id=CSS1>[CSS1] 12.1198 + 12.1199 + <dd>Håkon Wium Lie; Bert Bos. <a 12.1200 + href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style 12.1201 + Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C 12.1202 + Recommendation. URL: <a 12.1203 + href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a> 12.1204 + </dd> 12.1205 + <!----> 12.1206 + 12.1207 + <dt id=CSS3-REGIONS>[CSS3-REGIONS] 12.1208 + 12.1209 + <dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a 12.1210 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/"><cite>CSS 12.1211 + Regions Module Level 3.</cite></a> 23 August 2012. W3C Working Draft. 12.1212 + (Work in progress.) URL: <a 12.1213 + href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">http://www.w3.org/TR/2012/WD-css3-regions-20120823/</a> 12.1214 + </dd> 12.1215 + <!----> 12.1216 + 12.1217 + <dt id=HTML5>[HTML5] 12.1218 + 12.1219 + <dd>Ian Hickson. <a 12.1220 + href="http://www.w3.org/TR/2011/WD-html5-20110525/"><cite>HTML5.</cite></a> 12.1221 + 25 May 2011. W3C Working Draft. (Work in progress.) URL: <a 12.1222 + href="http://www.w3.org/TR/2011/WD-html5-20110525/">http://www.w3.org/TR/2011/WD-html5-20110525/</a> 12.1223 + </dd> 12.1224 + <!----> 12.1225 + 12.1226 + <dt id=UAX29>[UAX29] 12.1227 + 12.1228 + <dd>Mark Davis. <a 12.1229 + href="http://www.unicode.org/reports/tr29/"><cite>Unicode Text 12.1230 + Segmentation.</cite></a> 24 January 2012. Unicode Standard Annex #29. 12.1231 + URL: <a 12.1232 + href="http://www.unicode.org/reports/tr29/">http://www.unicode.org/reports/tr29/</a> 12.1233 + </dd> 12.1234 + <!----> 12.1235 + </dl> 12.1236 + <!--end-informative--> 12.1237 + 12.1238 + <h2 class=no-num id=index> Index</h2> 12.1239 + <!--begin-index--> 12.1240 + 12.1241 + <ul class=indexlist> 12.1242 + <li>fictional tag sequence, <a href="#fictional-tag-sequence" 12.1243 + title="fictional tag sequence">1.2.</a>, <a 12.1244 + href="#fictional-tag-sequence0" title="fictional tag sequence">1.2.1.</a> 12.1245 + 12.1246 + 12.1247 + <li>First formatted line, <a href="#first-formatted-line0" 12.1248 + title="First formatted line"><strong>1.1.1.</strong></a> 12.1249 + </ul> 12.1250 + <!--end-index--> 12.1251 + <!-- 12.1252 <h2 class="no-num" id="property-index"> 12.1253 Property index</h2> 12.1254 --> 12.1255 + <!--begin-properties--> 12.1256 + 12.1257 + <table class=proptable> 12.1258 + <thead> 12.1259 + <tr> 12.1260 + <th>Property 12.1261 + 12.1262 + <th>Values 12.1263 + 12.1264 + <th>Initial 12.1265 + 12.1266 + <th>Applies to 12.1267 + 12.1268 + <th>Inh. 12.1269 + 12.1270 + <th>Percentages 12.1271 + 12.1272 + <th>Media 12.1273 + 12.1274 + <tbody> 12.1275 + </table> 12.1276 + <!--end-properties--> 12.1277 +</html> 12.1278 +<!-- Keep this comment at the end of the file 12.1279 Local variables:mode: sgmlsgml-declaration:"~/SGML/HTML4.decl"sgml-default-doctype-name:"html"sgml-minimize-attributes:tsgml-nofill-elements:("pre" "style" "br")sgml-live-element-indicator:tsgml-omittag:nil 12.1280 sgml-shorttag:nilsgml-namecase-general:tsgml-general-insert-case:lowersgml-always-quote-attributes:tsgml-indent-step:nilsgml-indent-data:tsgml-parent-document:nilsgml-exposed-tags:nil 12.1281 sgml-local-catalogs:nilsgml-local-ecat-files:nilEnd:-->
13.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 13.2 +++ b/css4-pseudo/Overview.src.html Mon Aug 27 17:50:16 2012 +0200 13.3 @@ -0,0 +1,1 @@ 13.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 13.5 <html lang="en"> 13.6 <head profile="http://www.w3.org/2006/03/hcard"> 13.7 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 13.8 <title>CSS Pseudo-elements Module Level 4</title> 13.9 <script defer="defer" src="css-pseudochildren_files/annotate.js" type="text/javascript"></script> 13.10 <link href="http://dev.w3.org/csswg/shared/style/alternate-spec-style.css" id="st" 13.11 rel="stylesheet" 13.12 title="alternate spec style" 13.13 type="text/css"> 13.14 <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/w3c-unofficial.css"> 13.15 </head> 13.16 <body class="example"><br> 13.17 <div class="head" id="div-head"> 13.18 13.19 <h1 id="css-pseudochildren-module">CSS Pseudo-elements Module Level 4</h1> 13.20 13.21 <h2 class="no-num no-toc" id="longstatus-date">22 13.22 June 2012</h2> 13.23 <dl> 13.24 <dt>This version: </dt> 13.25 <dd>TBD </dd> 13.26 <dt>Latest version: </dt> 13.27 <dd>27 August 2012 </dd> 13.28 <dt>Previous version: </dt> 13.29 <dd>TBD </dd> 13.30 <dt>Editors: </dt> 13.31 <dd class="vcard"><span class="fn">Daniel Glazman</span>, on behalf of <span 13.32 class="org">Adobe 13.33 Systems, Inc.</span></dd> 13.34 <dd class="vcard"><span class="fn">Alan Stearns</span>, 13.35 <span class="org">Adobe Systems, Inc.</span>, <span class= 13.36 "email">stearns@adobe.com</span></dd> 13.37 <dt>Issues List: </dt> 13.38 <dd>TBD </dd> 13.39 <dt>Discussion: </dt> 13.40 <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a> 13.41 with subject line "<code>[css4-pseudo] message topic</code>" </dd> 13.42 </dl> 13.43 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 13.44 rel="license">Copyright</a> 13.45 © 2012 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> 13.46 (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, 13.47 <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 13.48 <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 13.49 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 13.50 <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 13.51 and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document 13.52 use</a> rules apply.</p> 13.53 <hr title="Separator for header"> </div> 13.54 13.55 <h2 class="no-num no-toc" id="abstract">Abstract</h2> 13.56 <div> 13.57 <p>This document extracts the notion 13.58 of pseudo-elements 13.59 from the Selectors 3 specification 13.60 and proposes to extend it 13.61 to be able to create and style 13.62 an arbitrary number of pseudo-elements 13.63 <em>before</em>, <em>after</em> an element.<br> 13.64 </p> 13.65 </div> 13.66 13.67 <h2 class="no-num no-toc" id="status-of-this-document">Status of this 13.68 document</h2> 13.69 <p>This document is a submission by Adobe Systems Inc. to the CSS Working 13.70 Group for discussion.</p> 13.71 13.72 <h2 class="no-num no-toc" id="table-of-contents">Table of contents</h2> 13.73 <!--begin-toc--><!--end-toc--> 13.74 13.75 <h2 id="pseudo-elements">Pseudo-elements</h2> 13.76 <p>Pseudo-elements create abstractions about the document tree beyond those 13.77 specified by the document language. For instance, document languages do 13.78 not offer mechanisms to access the first letter or first line of an 13.79 element's content. Pseudo-elements allow authors to refer to this 13.80 otherwise inaccessible information. Pseudo-elements may also provide 13.81 authors a way to refer to content that does not exist in the source 13.82 document (e.g., the <code>::before</code> and <code>::after</code> 13.83 pseudo-elements give access to generated content). <br> 13.84 </p> 13.85 <p>Pseudo-elements can be placed anywhere relatively to the element creating 13.86 them although the state of the art currently allows only the following :</p> 13.87 <ul> 13.88 <li>inside the element and before the element's content</li> 13.89 <li>inside the element and after the element's content</li> 13.90 <li>inside the element's contents at any depth</li> 13.91 </ul> 13.92 <p></p> 13.93 <p>The notation for a pseudo-element is made of two colons (<code>::</code>) 13.94 followed by the name of the pseudo-element, possibly immediately followed 13.95 by a block of parenthesis containing comma-separated arguments.<br> 13.96 </p> 13.97 <p>For compatibility with existing style sheets, user agents must also 13.98 accept the previous one-colon notation for pseudo-elements introduced in 13.99 CSS levels 1 [[CSS1]] and 2 [[CSS21]] 13.100 (namely <code>:first-line</code>, <code>:first-letter</code>, <code>:before</code> 13.101 and <code>:after</code>). This compatibility is not allowed for the new 13.102 pseudo-elements introduced in this specification. </p> 13.103 13.104 <h3 id="first-line">The ::first-line pseudo-element</h3> 13.105 <p>The <code>::first-line</code> pseudo-element describes the contents of 13.106 the first formatted line of an element. </p> 13.107 <div class="example"> 13.108 <p>CSS example:</p> 13.109 <pre>p::first-line { text-transform: uppercase }</pre> 13.110 <p>The above rule means "change the letters of the first line of every <code>p</code> 13.111 element to uppercase".</p> 13.112 <p>The selector <code>p::first-line</code> does not match any real 13.113 document element. It does match a pseudo-element that conforming user 13.114 agents will insert at the beginning of every <code>p</code> element.</p> 13.115 </div> 13.116 <p>Note that the length of the first line depends on a number of factors, 13.117 including the width of the page, the font size, etc. Thus, an ordinary 13.118 HTML [[HTML5]] paragraph such as: </p> 13.119 <pre><P>This is a somewhat long HTML 13.120 paragraph that will be broken into several 13.121 lines. The first line will be identified 13.122 by a fictional tag sequence. The other lines 13.123 will be treated as ordinary lines in the 13.124 paragraph.</P> 13.125 </pre> 13.126 <p>the lines of which happen to be broken as follows: </p> 13.127 <pre>THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT 13.128 will be broken into several lines. The first 13.129 line will be identified by a fictional tag 13.130 sequence. The other lines will be treated as 13.131 ordinary lines in the paragraph. 13.132 </pre> 13.133 <p>This paragraph might be "rewritten" by user agents to include the <em>fictional 13.134 tag sequence</em> for <code>::first-line</code>. This fictional tag 13.135 sequence helps to show how properties are inherited. </p> 13.136 <pre><P><b><P::first-line></b> This is a somewhat long HTML 13.137 paragraph that <b></P::first-line></b> will be broken into several 13.138 lines. The first line will be identified 13.139 by a fictional tag sequence. The other lines 13.140 will be treated as ordinary lines in the 13.141 paragraph.</P> 13.142 </pre> 13.143 <p>If a pseudo-element breaks up a real element, the desired effect can 13.144 often be described by a fictional tag sequence that closes and then 13.145 re-opens the element. Thus, if we mark up the previous paragraph with a <code>span</code> 13.146 element: </p> 13.147 <pre><P><b><SPAN class="test"></b> This is a somewhat long HTML 13.148 paragraph that will be broken into several 13.149 lines.<b></SPAN></b> The first line will be identified 13.150 by a fictional tag sequence. The other lines 13.151 will be treated as ordinary lines in the 13.152 paragraph.</P> 13.153 </pre> 13.154 <p>the user agent could simulate start and end tags for <code>span</code> 13.155 when inserting the fictional tag sequence for <code>::first-line</code>. 13.156 </p> 13.157 <pre><P><P::first-line><b><SPAN class="test"></b> This is a 13.158 somewhat long HTML 13.159 paragraph that will <b></SPAN></b></P::first-line><b><SPAN class="test"></b> be 13.160 broken into several 13.161 lines.<b></SPAN></b> The first line will be identified 13.162 by a fictional tag sequence. The other lines 13.163 will be treated as ordinary lines in the 13.164 paragraph.</P> 13.165 </pre> 13.166 13.167 <h4 id="first-formatted-line"><dfn id="first-formatted-line0">First formatted line</dfn> 13.168 definition in CSS</h4> 13.169 <p>In CSS, the <code>::first-line</code> pseudo-element can only have an 13.170 effect when attached to a block-like container such as a block box, 13.171 inline-block, table-caption, or table-cell. </p> 13.172 <p>The first formatted line of an element may occur inside a block-level 13.173 descendant in the same flow (i.e., a block-level descendant that is not 13.174 out-of-flow due to floating or positioning). For example, the first line 13.175 of the <code>DIV</code> in <code><DIV><P>This 13.176 line...</P></DIV></code> is the first line of the <code>P</code> 13.177 (assuming that both <code>P</code> and <code>DIV</code> are 13.178 block-level). </p> 13.179 <p>The first line of a table-cell or inline-block cannot be the first 13.180 formatted line of an ancestor element. Thus, in <code><DIV><P 13.181 STYLE="display: inline-block">Hello<BR>Goodbye</P> 13.182 etcetera</DIV></code> the first formatted line of the <code>DIV </code> 13.183 is not the line "Hello". </p> 13.184 <p class="note"><span class="note-prefix">Note </span> Note that the 13.185 first line of the <code>p</code> in this fragment: <code><p><br>First...</code> 13.186 doesn't contain any letters (assuming the default style for <code>br</code>). 13.187 The word "First" is not on the first formatted line. </p> 13.188 <p>A User-Agent should act as if the fictional start tags of the <code>::first-line</code> 13.189 pseudo-elements were nested just inside the innermost enclosing 13.190 block-level element. (Since CSS1 and CSS2 were silent on this case, 13.191 authors should not rely on this behavior.) For example, the fictional tag 13.192 sequence for </p> 13.193 <pre><DIV> 13.194 <P>First paragraph</P> 13.195 <P>Second paragraph</P> 13.196 </DIV> 13.197 </pre> 13.198 <p>is </p> 13.199 <pre><DIV> 13.200 <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P> 13.201 <P><P::first-line>Second paragraph</P::first-line></P> 13.202 </DIV> 13.203 </pre> 13.204 <p>The <code>::first-line</code> pseudo-element is similar to an 13.205 inline-level element, but with certain restrictions. The following CSS 13.206 properties apply to a <code>::first-line</code> pseudo-element: font 13.207 properties, color property, background properties, ‘<code class="property">word-spacing</code>’, 13.208 ‘<code class="property">letter-spacing</code>’, ‘<code class="property">text-decoration</code>’, 13.209 ‘<code class="property">vertical-align</code>’, ‘<code class="property">text-transform</code>’, 13.210 ‘<code class="property">line-height</code>’. User-Agents may apply other 13.211 properties as well. </p> 13.212 <p>During CSS inheritance, the portion of a child element that occurs on the 13.213 first line only inherits properties applicable to the <code>::first-line</code> 13.214 pseudo-element from the <code>::first-line</code> pseudo-element. For all 13.215 other properties inheritence is from the non-pseudo-element parent of the 13.216 first line pseudo element. (The portion of a child element that does not 13.217 occur on the first line always inherits from the parent of that child.) </p> 13.218 13.219 <h3 id="first-letter">The ::first-letter pseudo-element</h3> 13.220 <p>The <code>::first-letter</code> pseudo-element represents the first 13.221 letter of an element, if it is not preceded by any other content (such as 13.222 images or inline tables) on its line. The ::first-letter pseudo-element 13.223 may be used for "initial caps" and "drop caps", which are common 13.224 typographical effects. </p> 13.225 <p>Punctuation (i.e, characters defined in Unicode in the "open" (Ps), 13.226 "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation 13.227 classes), that precedes or follows the first letter should be included. [[!UNICODE]] 13.228 </p> 13.229 <div class="figure"> 13.230 <p><img alt="Quotes that precede the first letter should be included." src="http://www.w3.org/TR/selectors/first-letter2.png"></p> 13.231 </div> 13.232 <p>The <code>::first-letter</code> also applies if the first letter is in 13.233 fact a digit, e.g., the "6" in "67 million dollars is a lot of money." </p> 13.234 <p class="note"><span class="note-prefix">Note </span> In some cases 13.235 the <code>::first-letter</code> pseudo-element should include more than 13.236 just the first non-punctuation character on a line. For example, combining 13.237 characters must be kept with their base character. Additionally, some 13.238 languages may have specific rules about how to treat certain letter 13.239 combinations. The User-Agent definition of <code>::first-letter</code> 13.240 should include at least the default grapheme cluster as defined by UAX29 13.241 and may include more than that as appropriate. In Dutch, for example, if 13.242 the letter combination "ij" appears at the beginning of an element, both 13.243 letters should be considered within the <code>::first-letter</code> 13.244 pseudo-element. [[UAX29]] </p> 13.245 <p>If the letters that would form the <code>::first-letter</code> are not 13.246 in the same element, such as "‘<code class="css">T" in <code><p>'<em>T...</code>, 13.247 the User-Agent may create a <code>::first-letter</code> pseudo-element 13.248 from one of the elements, both elements, or simply not create a 13.249 pseudo-element.</code> </p> 13.250 <p>Similarly, if the first letter(s) of the block are not at the start of 13.251 the line (for example due to bidirectional reordering), then the 13.252 User-Agent need not create the pseudo-element(s). </p> 13.253 <div class="example"> 13.254 <p>Example:</p> 13.255 <p><a name="overlapping-example"></a>The following CSS and HTML example 13.256 illustrates how overlapping pseudo-elements may interact. The first 13.257 letter of each P element will be green with a font size of ’24pt'. The 13.258 rest of the first formatted line will be ‘<code class="property">blue</code>’ 13.259 while the rest of the paragraph will be ‘<code class="property">red</code>’.</p> 13.260 <pre>p { color: red; font-size: 12pt } 13.261 p::first-letter { color: green; font-size: 200% } 13.262 p::first-line { color: blue } 13.263 13.264 <P>Some text that ends up on two lines</P></pre> 13.265 <p>Assuming that a line break will occur before the word "ends", the <span 13.266 class="index-inst" 13.267 id="fictional-tag-sequence" 13.268 title="fictional tag 13.269 sequence">fictional tag sequence</span> for this fragment might be:</p> 13.270 <pre><P> 13.271 <P::first-line> 13.272 <P::first-letter> 13.273 S 13.274 </P::first-letter>ome text that 13.275 </P::first-line> 13.276 ends up on two lines 13.277 </P></pre> 13.278 <p>Note that the <code>::first-letter</code> element is inside the <code>::first-line</code> 13.279 element. Properties set on <code>::first-line</code> are inherited by <code>::first-letter</code>, 13.280 but are overridden if the same property is set on <code>::first-letter</code>.</p> 13.281 </div> 13.282 <p>The first letter must occur on the <a href="#first-formatted-line">first 13.283 formatted line.</a> For example, in this HTML fragment: <code><p><br>First...</code> 13.284 the first line doesn't contain any letters and <code>::first-letter</code> 13.285 doesn't match anything (assuming the default style for <code>br</code> in 13.286 HTML 4). In particular, it does not match the "F" of "First." </p> 13.287 13.288 <h4 id="application-in-css">Application in CSS</h4> 13.289 <p>In CSS, the <code>::first-letter</code> pseudo-element applies to 13.290 block-like containers such as block, list-item, table-cell, table-caption, 13.291 and inline-block elements. <span class="note"><strong>Note:</strong> A 13.292 future version of this specification may allow this pseudo-element to 13.293 apply to more display types.</span> </p> 13.294 <p>The <code>::first-letter</code> pseudo-element can be used with all such 13.295 elements that contain text, or that have a descendant in the same flow 13.296 that contains text. A User-Agent should act as if the fictional start tag 13.297 of the ::first-letter pseudo-element is just before the first text of the 13.298 element, even if that first text is in a descendant. </p> 13.299 <div class="example"> 13.300 <p>Example:</p> 13.301 <p>The fictional tag sequence for this HTML fragment: </p> 13.302 <pre><div> 13.303 <p>The first text.</pre> 13.304 <p>is: </p> 13.305 <pre><div> 13.306 <p><div::first-letter><p::first-letter>T</...></...>he first text.</pre> 13.307 </div> 13.308 <p>In CSS the first letter of a table-cell or inline-block cannot be the 13.309 first letter of an ancestor element. Thus, in <code><DIV><P 13.310 STYLE="display: inline-block">Hello<BR>Goodbye</P> 13.311 etcetera</DIV></code> the first letter of the <code>DIV</code> is 13.312 not the letter "H". In fact, the <code>DIV</code> doesn't have a first 13.313 letter. </p> 13.314 <p>If an element is a list item (‘<code class="css">display: list-item</code>’), 13.315 the <code>::first-letter</code> applies to the first letter in the 13.316 principal box after the marker. User-Agents may ignore <code>::first-letter</code> 13.317 on list items with ‘<code class="css">list-style-position: inside</code>’. 13.318 If an element has <code>::before</code> or <code>::after</code> content, 13.319 the <code>::first-letter</code> applies to the first letter of the 13.320 element <em>including</em> that content. </p> 13.321 <div class="example"> 13.322 <p>Example:</p> 13.323 <p>After the rule <code>p::before {content: "Note: "}</code>, the 13.324 selector <code>p::first-letter</code> matches the "N" of "Note".</p> 13.325 </div> 13.326 <p>In CSS a ::first-line pseudo-element is similar to an inline-level 13.327 element if its ‘<code class="property">float</code>’ property is ‘<code class="property">none</code>’; 13.328 otherwise, it is similar to a floated element. The following properties 13.329 that apply to <code>::first-letter</code> pseudo-elements: font 13.330 properties, ‘<code class="property">text-decoration</code>’, ‘<code class="property">text-transform</code>’, 13.331 ‘<code class="property">letter-spacing</code>’, ‘<code class="property">word-spacing</code>’ 13.332 (when appropriate), ‘<code class="property">line-height</code>’, ‘<code class="property">float</code>’, 13.333 ‘<code class="property">vertical-align</code>’ (only if ‘<code class="property">float</code>’ 13.334 is ‘<code class="property">none</code>’), margin properties, padding 13.335 properties, border properties, color property, background properties. 13.336 User-Agents may apply other properties as well. To allow User-Agents to 13.337 render a typographically correct drop cap or initial cap, the User-Agent 13.338 may choose a line-height, width and height based on the shape of the 13.339 letter, unlike for normal elements. </p> 13.340 <div class="example"> 13.341 <p>Example:</p> 13.342 <p>This CSS and HTML example shows a possible rendering of an initial cap. 13.343 Note that the ‘<code class="property">line-height</code>’ that is 13.344 inherited by the <code>::first-letter</code> pseudo-element is 1.1, but 13.345 the User-Agent in this example has computed the height of the first 13.346 letter differently, so that it doesn't cause any unnecessary space 13.347 between the first two lines. Also note that the fictional start tag of 13.348 the first letter is inside the <span>span</span>, and thus the font 13.349 weight of the first letter is normal, not bold as the <span>span</span>: 13.350 </p> 13.351 <pre>p { line-height: 1.1 } 13.352 p::first-letter { font-size: 3em; font-weight: normal } 13.353 span { font-weight: bold } 13.354 ... 13.355 <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br> 13.356 Erbarremt over my en mijn benaeuwde vesten<br> 13.357 En arme burgery, en op mijn volcx gebed<br> 13.358 En dagelix geschrey de bange stad ontzet. 13.359 </pre> 13.360 <div class="figure"> 13.361 <p><img alt="Image illustrating the ::first-letter pseudo-element" src="http://www.w3.org/TR/selectors/initial-cap.png"> 13.362 </p> 13.363 </div> 13.364 </div> 13.365 <div class="example"> 13.366 <p>The following CSS will make a drop cap initial letter span about two 13.367 lines:</p> 13.368 <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 13.369 <HTML> 13.370 <HEAD> 13.371 <TITLE>Drop cap initial letter</TITLE> 13.372 <STYLE type="text/css"> 13.373 P { font-size: 12pt; line-height: 1.2 } 13.374 P::first-letter { font-size: 200%; font-weight: bold; float: left } 13.375 SPAN { text-transform: uppercase } 13.376 </STYLE> 13.377 </HEAD> 13.378 <BODY> 13.379 <P><SPAN>The first</SPAN> few words of an article 13.380 in The Economist.</P> 13.381 </BODY> 13.382 </HTML> 13.383 </pre> 13.384 <p>This example might be formatted as follows:</p> 13.385 <div class="figure"> 13.386 <p><img alt="Image illustrating the combined effect of the ::first-letter 13.387 and ::first-line pseudo-elements" src="http://www.w3.org/TR/selectors/first-letter.png"></p> 13.388 </div> 13.389 <p>The <span class="index-inst" id="fictional-tag-sequence0" title="fictional 13.390 tag sequence">fictional tag sequence</span> is:</p> 13.391 <pre><P> 13.392 <SPAN> 13.393 <P::first-letter> 13.394 T 13.395 </P::first-letter>he first 13.396 </SPAN> 13.397 few words of an article in the Economist. 13.398 </P> 13.399 </pre> 13.400 <p>Note that the <code>::first-letter</code> pseudo-element tags abut the 13.401 content (i.e., the initial character), while the ::first-line 13.402 pseudo-element start tag is inserted right after the start tag of the 13.403 block element.</p> 13.404 </div> 13.405 <p>In order to achieve traditional drop caps formatting, user agents may 13.406 approximate font sizes, for example to align baselines. Also, the glyph 13.407 outline may be taken into account when formatting. </p> 13.408 13.409 <h3 id="gen-content">The ::before and ::after pseudo-elements</h3> 13.410 <p>The <code>::before</code> and <code>::after</code> pseudo-elements can 13.411 be used to describe generated content before or after an element's 13.412 content. They are explained in CSS 2.1 [[!CSS21]]. 13.413 </p> 13.414 <p>When the <code>::first-letter</code> and <code>::first-line</code> 13.415 pseudo-elements are applied to an element having content generated using <code>::before</code> 13.416 or <code>::after</code> pseudo-elements, they apply to the first letter or line of the 13.417 element including the generated content. </p> 13.418 <p></p> 13.419 13.420 <p>A <a href="http://www.w3.org/TR/CSS2/syndata.html#rule-sets">CSS rule</a> 13.421 using <code>::before</code> or <code>::after</code> creates a pseudo-element only if 13.422 the <a href="http://www.w3.org/TR/CSS2/cascade.html#computed-value">computed 13.423 values</a> of the '<a href="http://www.w3.org/TR/CSS2/generate.html#content">content</a>' 13.424 property and the '<a href="http://www.w3.org/TR/css3-regions/#the-flow-from-property"><span 13.425 class="property">flow-from</span></a>' 13.426 property [[CSS3-REGIONS]] are not both 'none'.</p> 13.427 13.428 <div class="issue"> 13.429 <p>There are a11y issues 13.430 with ::before and ::after pseudo-elements and generated content 13.431 that were raised in the discussion of the following sections.</p> 13.432 </div> 13.433 13.434 <h4 id="ordinal-before-and-after">Multiple ::before and ::after pseudo-elements using ordinals</span></h4> 13.435 13.436 <p>More than one ::before or ::after pseudo-element 13.437 can be created or accessed 13.438 by adding a positive integer 13.439 called the <strong>ordinal</strong> 13.440 in parentheses.</p> 13.441 13.442 <div class="issue"> 13.443 <p>Using ordinals solves issues of insertion order, 13.444 but does not provide a meaningful name 13.445 for a particular ::before or ::after element. 13.446 A named psuedo-element could provide better meaning, 13.447 at the expense of ordering.</p> 13.448 </div> 13.449 13.450 <p>The ordinal 1 has a special meaning:<code> </code></p> 13.451 <ul> 13.452 <li><code>::before(1)</code> and <a href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::before</code></a> 13.453 are strictly equivalent</li> 13.454 <li><code>::after(1)</code> and <a href="http://www.w3.org/TR/CSS2/generate.html#before-after-content"><code>::after</code></a> 13.455 are also strictly equivalent.</li> 13.456 </ul> 13.457 13.458 <p><code>::before()</code> and <code>::after()</code> pseudo-elements 13.459 are ordered by increasing ordinal 13.460 from the nearest element's 13.461 contents boundaries. 13.462 For example:</p> 13.463 <div class="example"> 13.464 <p>Let's take the example of 13.465 a div element creating 13.466 two ::before pseudo-elements 13.467 at ordinals 1 and 4, 13.468 and three ::after pseudo-elements 13.469 at ordinals 1, 5 and 8. 13.470 The rules would look like this: 13.471 <pre> 13.472 div::before(1) {} 13.473 div::before(4) {} 13.474 div::after(1) {} 13.475 div::after(5) {} 13.476 div::after(8) {} 13.477 </pre> 13.478 The pseudo-elements 13.479 and the contents 13.480 of the element 13.481 are then ordered 13.482 in this way:</p> 13.483 <pre> 13.484 -- element's boundary -- 13.485 [ ordinal 4, before ] 13.486 [ ::before, ordinal 1, before ] 13.487 -- element's contents boundary -- 13.488 13.489 -- element's contents boundary -- 13.490 [ ::after, ordinal 1, after ] 13.491 [ ordinal 5, after ] 13.492 [ ordinal 8, after ] 13.493 -- element's boundary -- 13.494 </pre> 13.495 </div> 13.496 13.497 <div class="example"> 13.498 <p>One use of multiple <code>::before</code> and <code>::after</code> elements 13.499 is to mix generated content 13.500 with graphical effects. 13.501 Pseudo-elements are used 13.502 in quotes both 13.503 for adding quotation marks 13.504 in generated content 13.505 OR for drawing a 13.506 speech bubble arrow. 13.507 With multiple <code>::before</code> and <code>::after</code> elements 13.508 you can get both.</p> 13.509 13.510 <p>This effect: <img src="images/quote-arrow.png"> can be achieved with this code: </p> 13.511 13.512 <pre> 13.513 div::before { 13.514 content: "“"; 13.515 } 13.516 13.517 div::after { 13.518 content: "”"; 13.519 } 13.520 13.521 div::after(2) { 13.522 content: "."; 13.523 position: absolute; 13.524 bottom: -10px; 13.525 right: 20%; 13.526 border-left: 10px solid transparent; 13.527 border-right: 10px solid transparent; 13.528 border-top: 10px solid #111; 13.529 width: 0; 13.530 height: 0; 13.531 } 13.532 13.533 div{ 13.534 position: relative; 13.535 float: left; 13.536 background: #111; 13.537 padding: 1em; 13.538 border-radius: 1em; 13.539 color: white; 13.540 } 13.541 13.542 <div>I'm talking about CSS Pseudo-elements.</div> 13.543 </pre> 13.544 13.545 <p>And if you have a single quote 13.546 from multiple speakers, 13.547 more arrows can be added 13.548 by adding more <code>::after()</code> pseudo-elements: 13.549 <img src="images/multiple-arrows.png"></p> 13.550 13.551 <p>In general, 13.552 there's no longer a limitation 13.553 to two instances 13.554 for whatever 13.555 a <code>::before</code> or <code>::after</code> pseudo-element 13.556 can be used 13.557 (generated content, 13.558 graphic effects, 13.559 clearfix, etc.). 13.560 </div> 13.561 13.562 <div class="example"> 13.563 <p>Another use of multiple 13.564 <code>::before</code> and <code>::after</code> pseudo-elements 13.565 is to change the style 13.566 of pieces of generated content. 13.567 If a citation appended to a quote 13.568 should be in a different font 13.569 than the quotation mark, 13.570 two ::after()</code> pseudo-elements 13.571 can be used.</p> 13.572 <img src="images/multiple-styles.png"> 13.573 <pre> 13.574 blockquote::before { 13.575 content: "“"; 13.576 } 13.577 13.578 blockquote::after { 13.579 content: "”"; 13.580 } 13.581 13.582 blockquote::after(2) { 13.583 content: " - " attr(data-author); 13.584 font: normal 0.8em sans-serif; 13.585 } 13.586 13.587 <blockquote data-author="Mark Twain">The funniest things are the forbidden.</blockquote> 13.588 </pre> 13.589 </div> 13.590 13.591 <div class="issue"> 13.592 <p>An issue has been raised on the previous example, 13.593 questioning whether using attr(data-author) in this way 13.594 is appropriate for use in an example.</p> 13.595 </div> 13.596 13.597 <div class="example"> 13.598 <p>A use for ordinals 13.599 is to allow muliple stylesheets 13.600 to add their own <code>::before</code> and <code>::after</code> pseudo-elements 13.601 and coordinate insertion positions.</p> 13.602 <p>If one stylesheet uses 13.603 a single <code>::before(10) {}</code> rule, 13.604 then another stylesheet gets 13.605 the option to</p> 13.606 <ul> 13.607 <li>Add to or redefine that rule</li> 13.608 <li>Add an additional pseudo-element before that one with <code>::before(5) {}</code></li> 13.609 <li>Add an additional pseudo-element after that one with <code>::before(15) {}</code></li> 13.610 </ul> 13.611 </div> 13.612 13.613 <div class="example"> 13.614 <p>Pseudo-elements can be used 13.615 to generate boxes in CSS 13.616 for a <a href="http://dev.w3.org/csswg/css3-regions/#region-chain">region chain</a>. 13.617 Allowing more than two 13.618 such boxes per element could allow 13.619 the main CSS Regions <a href="http://dev.w3.org/csswg/css3-regions/#named-flows-and-regions">example</a> 13.620 to be <a href="http://dev.w3.org/csswg/css3-regions/#intro-example-code">written</a> 13.621 without empty divs 13.622 for the regions 13.623 in the markup.</p> 13.624 <p>Region chains 13.625 with a fixed number of regions 13.626 (usually with an auto-height region 13.627 at the end of the chain) 13.628 can be defined entirely in CSS 13.629 using multiple pseudo-elements.</p> 13.630 <pre> 13.631 <style> 13.632 #grid { 13.633 width: 80vw; 13.634 height: 60vw; 13.635 grid-template: "aaa.d" 13.636 "....d" 13.637 "bbb.d" 13.638 "....d" 13.639 "ccc.d"; 13.640 grid-rows: 52% 4% 20% 4% 20%; 13.641 grid-columns: 30% 5% 30% 5% 30%; 13.642 } 13.643 #grid::before(2) { grid-cell: a; } 13.644 #grid::before { grid-cell: b; } 13.645 #boxA { grid-cell: c; } 13.646 #grid::after { grid-cell: d; } 13.647 13.648 #body::after { 13.649 width: 80vw; 13.650 } 13.651 13.652 #grid::before { 13.653 column-count: 2; 13.654 } 13.655 13.656 article { 13.657 flow-into: article_flow; 13.658 } 13.659 13.660 #grid::before(2), #grid::before, #grid::after, #body::after { 13.661 flow-from: article_flow; 13.662 } 13.663 13.664 </style> 13.665 13.666 <article> 13.667 <h1>Introduction</h1> 13.668 <p>This is an example ...</p> 13.669 13.670 <h2>More Details</h2> 13.671 <p>This illustrates ...</p> 13.672 <p>Then, the example ...</p> 13.673 <p>Finally, this ...</p> 13.674 </article> 13.675 13.676 <div id="grid"> 13.677 <div id="boxA"></div> 13.678 </div> 13.679 </pre> 13.680 </div> 13.681 <div class="issue"> 13.682 <p>Several choices of syntax 13.683 for declaring multiple 13.684 ::before and ::after pseudo-elements 13.685 have been considered.</p> 13.686 <ul> 13.687 <li>Brackets - <code>::before[2]</code> 13.688 <ul>Benefits 13.689 <li>Can reserve bracket syntax for ordinals</li> 13.690 <li>Could be appended to 13.691 an otherwise-parenthesized pseudo 13.692 <code>::hypothetical(args)[ordinal]</code></li> 13.693 </ul> 13.694 <ul>Drawbacks 13.695 <li>Looks too much like attribute selectors</li> 13.696 </ul> 13.697 </li> 13.698 <li>Add a generic ordinal syntax - ::pseudo(before, 2) 13.699 <ul>Benefits 13.700 <li>Easily extensible to addition pseudos</li> 13.701 <li>Parallel to ::nth-pseudo() syntax</li> 13.702 </ul> 13.703 <ul>Drawbacks 13.704 <li>Only used for ::before and ::after so far</li> 13.705 <li>More to type</li> 13.706 </ul> 13.707 </li> 13.708 <li>Parentheses - <code>::before(2)</code> 13.709 <ul>Benefits 13.710 <li>No attribute selector confusion</li> 13.711 <li>Previous attempts have used this syntax</li> 13.712 </ul> 13.713 <ul>Drawbacks 13.714 <li>Perhaps harder to distinguish ordinal from index?</li> 13.715 </ul> 13.716 </li> 13.717 </ul> 13.718 </div> 13.719 <div class="issue"> 13.720 <p>We arbitrarily chose the order here. Pseudo-elements could be 13.721 ordered differently, for example as in:<br> 13.722 </p> 13.723 <pre> 13.724 -- element's boundary -- 13.725 [ ::before, ordinal 1, before ] 13.726 [ ordinal 4, before ] 13.727 -- element's contents boundary -- 13.728 13.729 -- element's contents boundary -- 13.730 [ ordinal 8, after ] 13.731 [ ordinal 5, after ] 13.732 [ ::after, ordinal 1, after ] 13.733 -- element's boundary -- 13.734 </pre> 13.735 <p>or</p> 13.736 <pre> 13.737 -- element's boundary -- 13.738 [ ::before, ordinal 1, before ] 13.739 [ ordinal 4, before ] 13.740 -- element's contents boundary -- 13.741 13.742 -- element's contents boundary -- 13.743 [ ::after, ordinal 1, after ] 13.744 [ ordinal 5, after ] 13.745 [ ordinal 8, after ] 13.746 -- element's boundary -- 13.747 </pre> <p>We expect to resolve this issue with the CSS Working Group.</p> 13.748 </div> 13.749 13.750 <h4>The ::nth-before(), ::nth-after(), ::nth-last-before() and ::nth-last-after() pseudo-elements</h3> 13.751 <p>The new <code>::nth-before()</code>, 13.752 <code>::nth-after()</code>, 13.753 <code>::nth-last-before()</code> 13.754 and <code>::nth-last-after()</code> 13.755 pseudo-elements select ::before and ::after pseudo-elements 13.756 based on indices, not ordinals. 13.757 They all take a single mandatory argument:</p> 13.758 <ol> 13.759 <li>a mandatory <strong>index</strong> in the form of <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">an 13.760 <code>an+b</code> syntax or the <code>odd</code> or <code>even</code> 13.761 keywords</a></li> 13.762 </ol> 13.763 <div class="issue"> 13.764 <p>Extensions to selector syntax may allow pseudo-classes after a pseudo-element. 13.765 In that case, the syntax in this section could change to something like 13.766 <code>::before:nth()</code>, 13.767 <code>::after:nth()</code>, 13.768 <code>::before:nth-last()</code> 13.769 and <code>::after:nth-last()</code>.</p> 13.770 </div> 13.771 <div class="issue"> 13.772 <p>Is ::nth-before(n) to access all ::before pseudo-elements enough of an override mechanism?</p> 13.773 </div> 13.774 13.775 <div class="example"> 13.776 <p>Let's reuse the example in Example 8 above and let's show the indices:</p> 13.777 <pre> 13.778 -- element's boundary -- 13.779 [ ordinal 4, before, nth index 2, last-nth index 1 ] 13.780 [ ::before, ordinal 1, before, nth index 1, last-nth index 2 ] 13.781 -- element's contents boundary -- 13.782 13.783 -- element's contents boundary -- 13.784 [ ::after, ordinal 1, after, nth index 1, last-nth index 3 ] 13.785 [ ordinal 5, after, nth index 2, last-nth index 2 ] 13.786 [ ordinal 8, after, nth index 3, last-nth index 1 ] 13.787 -- element's boundary -- 13.788 </pre> 13.789 </div> 13.790 <p><code>::nth-*()</code> syntax cannot create a new pseudo-element 13.791 and the 'content' and 'flow-from'properties do not apply to them.</p> 13.792 <p>They are allowed as the second parameter of <code>ViewCSS.getComputedStyle()</code> 13.793 if and only if the index parameter can select only one pseudo-element: for 13.794 instance <code>12</code> or <code>0n+5</code>.</p> 13.795 13.796 <h2>Additions to the CSS Object Model</h2> 13.797 <p>Pseudo-elements should be 13.798 reachable by script, 13.799 stylable from script, 13.800 and available as event targets.</p> 13.801 <p class="note"><span class="note-prefix">Note </span>We may extend this 13.802 section in the future to allow creation of pseudo-elements from script.</p> 13.803 13.804 <h3>Interface CSSPseudoElement</h3> 13.805 <p>The <code>CSSPseudoElement</code> interface 13.806 allows pseudo-elements to be styleable from script 13.807 and makes them event targets.</p> 13.808 13.809 <div class="issue"> 13.810 <p>The approach in this draft 13.811 is to start with a bare minimum 13.812 for the CSSPseudoElement interface 13.813 and build up from there. 13.814 Another more radical approach 13.815 could take everything that's common 13.816 between a pseudo-element and a node 13.817 and create a new base class 13.818 for both Node and CSSPseudoElement.</p> 13.819 </div> 13.820 13.821 <pre class="idl">interface CSSPseudoElement {<br> readonly attribute unsigned long <a 13.822 href="#dom-csspseudochild-ordinal">ordinal</a>;<br> // the ordinal of a column is its index<br> readonly attribute DOMString <a 13.823 href="#dom-csspseudochild-type">type</a>;<br> readonly attribute <a 13.824 href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">CSSStyleDeclaration</a> <a 13.825 href="#dom-csspseudochild-style">style</a>;<br>};<br><br>CSSPseudoElement implements EventTarget;<br></pre> 13.826 <p><a name="dom-csspseudochild-ordinal"></a>The <code><strong><em>ordinal</em></strong></code> 13.827 attribute represents the ordinal of the pseudo-element for the object's type. 13.828 It is a strictly positive integer. The value <code>1</code> for the <code>before</code> 13.829 (or <code>after</code>, <code>letter</code> and <code>line</code>) 13.830 types represents the <code>::before</code> (or <code>::after</code>, 13.831 <code>::first-letter</code> and <code>::first-line</code>) 13.832 pseudo-elements.</p> 13.833 <p><a name="dom-csspseudochild-type"></a>The <code><strong><em>type</em></strong></code> 13.834 attribute is a string representing the type of the pseudo-element. This can be one 13.835 of the following values:</p> 13.836 <dl> 13.837 <dt>‘before’</dt> 13.838 <dd>The pseudo-element was created before the element's contents</dd> 13.839 <dt>‘after’</dt> 13.840 <dd>The pseudo-element was created after the element's contents</dd> 13.841 <dt>‘letter’</dt> 13.842 <dd>The pseudo-element is the first letter of the element; the only valid 13.843 ordinal is 1.</dd> 13.844 <dt>‘line’</dt> 13.845 <dd>The pseudo-element is the first line of the element; the only valid 13.846 ordinal is 1.</dd> 13.847 <dt>‘column’</dt> 13.848 <dd>The pseudo-element is a column created by the element through the CSS 13.849 Multi-column Layout Module. In that case its <code><strong><em>ordinal</em></strong></code> 13.850 is the index of column in the collection of columns created by the 13.851 element.</dd> 13.852 </dl> 13.853 <p><a name="dom-csspseudochild-style"></a>The <code><strong><em>style</em></strong></code> 13.854 attribute is a <code>CSSStyleDeclaration</code> [[!CSSOM]] allowing 13.855 to set directly style information (inline styles) onto the pseudo-element. 13.856 Inline styles on a <code>CSSPseudoElement</code> have precedence over all 13.857 style rules styling that pseudo-element.</p> 13.858 <p>The <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a> 13.859 interface [[!DOM-LEVEL-2-EVENTS]] must be 13.860 implemented by all instances of <code>CSSPseudoElement</code> in an in 13.861 implementation which supports the current specification.</p> 13.862 13.863 <h3>Interface CSSPseudoElementList</h3> 13.864 <p>The <code>CSSPseudoElementList</code> represents an ordered collection 13.865 of <code> CSSPseudoElement</code> instances.</p> 13.866 <pre class="idl">interface CSSPseudoElementList {<br> readonly attribute unsigned long <a 13.867 href="#dom-csspseudochildlist-length">length</a>;<br> CSSPseudoElement <a 13.868 href="#dom-csspseudochildlist-item">item</a>(unsigned long index);<br> CSSPseudoElement <a 13.869 href="#dom-csspseudochildlist-getbyordinalandtype">getByOrdinalAndType</a>(unsigned long ordinal,<br> DOMString type);<br> // replies null if no pseudo-element does not exist for<br> // the requested ordinal and type<br>};</pre> 13.870 <p><a name="dom-csspseudochildlist-length"></a>The <code><strong><em>length</em></strong></code> 13.871 attribute represents the number of <code>CSSPseudoElement</code> in the 13.872 collection or zero if it is empty.</p> 13.873 <p><a name="dom-csspseudochildlist-item"></a>The method <code><strong><em>item()</em></strong></code> 13.874 is used to retrieve a <code>CSSPseudo</code><code>Element</code> by 13.875 index. It takes one parameter being the requested index into the 13.876 collection. Its return value is the <code>CSSPseudo</code><code>Element</code> 13.877 at the requested index in the collection or null if that is not a valid 13.878 index.</p> 13.879 <p><a name="dom-csspseudochildlist-getbyordinalandtype"></a>The method <code><strong><em>getByOrdinalAndType()</em></strong></code> 13.880 is used to retrieve a <code>CSSPseudo</code><code>Element</code> by its 13.881 ordinal and type. It takes two parameters: first, the requested 13.882 ordinal; second a type. Its return value is the <code>CSSPseudo</code><code>Element</code> 13.883 at the requested index in the collection or null if there is no <code>CSSPseudo</code><code>Element</code> 13.884 in the collection for that index and type.</p> 13.885 13.886 <h3>Addition to the window</h3> 13.887 <p>A new method is added to the <code>Window</code> interface to retrieve 13.888 pseudo-elements created by a given element for a given type:</p> 13.889 <pre class="idl">partial interface Window {<br> CSSPseudoElementList <a href="#dom-window-getpseudochildren">getPseudoElements</a>(Element elt,<br> DOMString type);<br>};</pre> 13.890 <p><a name="dom-window-getpseudochildren"></a>The method <code>getPseudoElements()</code> 13.891 is used to retrieve all <code>CSSPseudoElement</code> instances created 13.892 by the element <code>elt</code> for the type <code>type</code>. 13.893 Its return value is a <code>CSSPseudoElementList</code>, potentially 13.894 empty if no pseudo-element exists for the given element and the given 13.895 type.</p> 13.896 13.897 <h2 class="no-num" id="ACKS">Acknowledgements</h2> 13.898 <p>The editors would like to thank the following individuals for their 13.899 contributions, either during the conception of the specification or during 13.900 its development and specification review process: </p> 13.901 <blockquote>Tab Atkins, 13.902 Razvan Caliman, 13.903 Chris Coyier, 13.904 Anders Grimsrud, 13.905 Vincent Hardy 13.906 and the CSS Working Group members.</blockquote> 13.907 13.908 13.909 <h2 class=no-num id="references"> 13.910 References</h2> 13.911 13.912 <h3 class="no-num" id="normative-references"> 13.913 Normative references</h3> 13.914 <!--normative--> 13.915 13.916 <h3 class="no-num" id="other-references"> 13.917 Other references</h3> 13.918 <!--informative--> 13.919 13.920 <h2 class="no-num" id="index"> 13.921 Index</h2> 13.922 <!--index--> 13.923 13.924 <!-- 13.925 <h2 class="no-num" id="property-index"> 13.926 Property index</h2> 13.927 --> 13.928 <!-- properties --> 13.929 13.930 </body> 13.931 </html> 13.932 <!-- Keep this comment at the end of the file 13.933 Local variables:mode: sgmlsgml-declaration:"~/SGML/HTML4.decl"sgml-default-doctype-name:"html"sgml-minimize-attributes:tsgml-nofill-elements:("pre" "style" "br")sgml-live-element-indicator:tsgml-omittag:nil 13.934 sgml-shorttag:nilsgml-namecase-general:tsgml-general-insert-case:lowersgml-always-quote-attributes:tsgml-indent-step:nilsgml-indent-data:tsgml-parent-document:nilsgml-exposed-tags:nil 13.935 sgml-local-catalogs:nilsgml-local-ecat-files:nilEnd:--> 13.936 \ No newline at end of file
14.1 Binary file css4-pseudo/images/multiple-arrows.png has changed
15.1 Binary file css4-pseudo/images/multiple-styles.png has changed
16.1 Binary file css4-pseudo/images/quote-arrow.png has changed
