Sun, 02 Dec 2012 09:55:19 -0800
[css3-cascade] Make style attrs a separate origin. Plug some holes in specificity and ordering regarding style attrs.
css3-cascade/Overview.html | file | annotate | diff | comparison | revisions | |
css3-cascade/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-cascade/Overview.html Fri Nov 30 20:24:22 2012 -0800 1.2 +++ b/css3-cascade/Overview.html Sun Dec 02 09:55:19 2012 -0800 1.3 @@ -1,1224 +1,7 @@ 1.4 -<!DOCTYPE html> 1.5 - 1.6 -<html lang=en> 1.7 - <head> 1.8 - <meta content="text/html" http-equiv=Content-Type> 1.9 - <title>CSS Cascading and Inheritance Level 3</title> 1.10 - <!-- 1.11 - <link href="http://purl.org/dc/terms/" rel="schema.dcterms"> 1.12 - <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel="dcterms.rights"> 1.13 - --> 1.14 - 1.15 - <meta content="CSS Cascading and Inheritance Level 3" name=dcterms.title> 1.16 - <meta content=text name=dcterms.type> 1.17 - <meta content=2012-11-08 name=dcterms.issued> 1.18 - <meta content="http://dev.w3.org/csswg/css3-cascade/" name=dcterms.creator> 1.19 - <meta content=W3C name=dcterms.publisher> 1.20 - <meta content="http://www.w3.org/TR/2012/ED-css3-cascade-20121108/" 1.21 - name=dcterms.identifier> 1.22 - <link href="../default.css" rel=stylesheet type="text/css"> 1.23 - <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet 1.24 - type="text/css"> 1.25 - 1.26 - <body> 1.27 - <div class=head> <!--begin-logo--> 1.28 - <p><a href="http://www.w3.org/"><img alt=W3C height=48 1.29 - src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> 1.30 - 1.31 - <h1>CSS Cascading and Inheritance Level 3</h1> 1.32 - 1.33 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 November 1.34 - 2012</h2> 1.35 - 1.36 - <dl> 1.37 - <dt>This version: 1.38 - 1.39 - <dd><a 1.40 - href="http://www.w3.org/TR/2012/ED-css3-cascade-20121108/">http://www.w3.org/TR/2012/ED-css3-cascade-20121108/</a> 1.41 - 1.42 - <dt>Latest version: 1.43 - 1.44 - <dd><a 1.45 - href="http://www.w3.org/TR/css3-cascade">http://www.w3.org/TR/css3-cascade</a> 1.46 - 1.47 - <dt>Editor's draft: 1.48 - 1.49 - <dd><a 1.50 - href="http://dev.w3.org/csswg/css3-cascade/">http://dev.w3.org/csswg/css3-cascade/</a> 1.51 - 1.52 - <dt>Previous version: 1.53 - 1.54 - <dd><a 1.55 - href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a> 1.56 - 1.57 - <dt>Editors: 1.58 - 1.59 - <dd class=vcard> <a class="email fn" 1.60 - href="mailto:howcome@opera.com">Håkon Wium Lie</a> (<span 1.61 - class=org>Opera Software</span>) 1.62 - 1.63 - <dd class=vcard> <a class="url fn" 1.64 - href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (<span 1.65 - class=org>Mozilla</span>) 1.66 - 1.67 - <dd class=vcard> <a class="url fn" 1.68 - href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span 1.69 - class=org>Google</span>) 1.70 - </dl> 1.71 - <!--begin-copyright--> 1.72 - <p class=copyright><a 1.73 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" 1.74 - rel=license>Copyright</a> © 2012 <a href="http://www.w3.org/"><abbr 1.75 - title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a 1.76 - href="http://www.csail.mit.edu/"><abbr 1.77 - title="Massachusetts Institute of Technology">MIT</abbr></a>, <a 1.78 - href="http://www.ercim.eu/"><abbr 1.79 - title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, 1.80 - <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a 1.81 - href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, 1.82 - <a 1.83 - href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> 1.84 - and <a 1.85 - href="http://www.w3.org/Consortium/Legal/copyright-documents">document 1.86 - use</a> rules apply.</p> 1.87 - <!--end-copyright--> 1.88 - <hr title="Separator for header"> 1.89 - </div> 1.90 - 1.91 - <h2 class="no-num no-toc" id=abstract>Abstract</h2> 1.92 - 1.93 - <p> This CSS3 module describes how to collate style rules and assign values 1.94 - to all properties on all elements. Values either come from style sheets or 1.95 - the property's initial value. By way of cascading and inheritance, values 1.96 - are propagated to all properties on all elements. 1.97 - 1.98 - <h2 class="no-num no-toc" id=status-of-this-document> Status of this 1.99 - document</h2> 1.100 - <!--begin-status--> 1.101 - 1.102 - <p>This is a public copy of the editors' draft. It is provided for 1.103 - discussion only and may change at any moment. Its publication here does 1.104 - not imply endorsement of its contents by W3C. Don't cite this document 1.105 - other than as work in progress. 1.106 - 1.107 - <p>The (<a 1.108 - href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public 1.109 - mailing list <a 1.110 - href="mailto:www-style@w3.org?Subject=%5Bcss3-cascade%5D%20PUT%20SUBJECT%20HERE"> 1.111 - www-style@w3.org</a> (see <a 1.112 - href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for 1.113 - discussion of this specification. When sending e-mail, please put the text 1.114 - “css3-cascade” in the subject, preferably like this: 1.115 - “[<!---->css3-cascade<!---->] <em>…summary of comment…</em>” 1.116 - 1.117 - <p>This document was produced by the <a href="/Style/CSS/members">CSS 1.118 - Working Group</a> (part of the <a href="/Style/">Style Activity</a>). 1.119 - 1.120 - <p>This document was produced by a group operating under the <a 1.121 - href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent 1.122 - Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" 1.123 - rel=disclosure>public list of any patent disclosures</a> made in 1.124 - connection with the deliverables of the group; that page also includes 1.125 - instructions for disclosing a patent. An individual who has actual 1.126 - knowledge of a patent which the individual believes contains <a 1.127 - href="/Consortium/Patent-Policy-20040205/#def-essential">Essential 1.128 - Claim(s)</a> must disclose the information in accordance with <a 1.129 - href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the 1.130 - W3C Patent Policy</a>.</p> 1.131 - <!--end-status--> 1.132 - 1.133 - <h2 class="no-num no-toc" id=table-of-contents> Table of contents</h2> 1.134 - <!--begin-toc--> 1.135 - 1.136 - <ul class=toc> 1.137 - <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> 1.138 - 1.139 - <li><a href="#at-import"><span class=secno>2. </span> Importing style 1.140 - sheets: the ‘<code class=css>@import</code>’ rule</a> 1.141 - 1.142 - <li><a href="#shorthand"><span class=secno>3. </span> Shorthand 1.143 - Properties</a> 1.144 - <ul class=toc> 1.145 - <li><a href="#all-shorthand"><span class=secno>3.1. </span> Resetting 1.146 - All Properties: the ‘<code class=css>all</code>’ property</a> 1.147 - </ul> 1.148 - 1.149 - <li><a href="#cascade-and-inheritance"><span class=secno>4. </span> 1.150 - Cascading and Inheritance</a> 1.151 - <ul class=toc> 1.152 - <li><a href="#filter-declarations"><span class=secno>4.1. </span> 1.153 - Filtering Declarations</a> 1.154 - 1.155 - <li><a href="#cascade"><span class=secno>4.2. </span> Cascading 1.156 - Declarations</a> 1.157 - <ul class=toc> 1.158 - <li><a href="#cascading-origins"><span class=secno>4.2.1. </span> 1.159 - Cascading Origins</a> 1.160 - 1.161 - <li><a href="#important-rules"><span class=secno>4.2.2. </span> 1.162 - ‘<code class=css>!important</code>’ rules</a> 1.163 - 1.164 - <li><a href="#preshint"><span class=secno>4.2.3. </span> Precedence of 1.165 - Non-CSS Presentational Hints</a> 1.166 - 1.167 - <li><a href="#cascaded-value"><span class=secno>4.2.4. </span> The 1.168 - Cascaded Value</a> 1.169 - </ul> 1.170 - 1.171 - <li><a href="#defaulting"><span class=secno>4.3. </span> Inheritance and 1.172 - Defaulting</a> 1.173 - <ul class=toc> 1.174 - <li><a href="#initial"><span class=secno>4.3.1. </span> Initial value: 1.175 - the ‘<code class=css>initial</code>’ keyword </a> 1.176 - 1.177 - <li><a href="#inheritance"><span class=secno>4.3.2. </span> 1.178 - Inheritance: the ‘<code class=css>inherit</code>’ keyword </a> 1.179 - 1.180 - <li><a href="#default-keyword"><span class=secno>4.3.3. </span> 1.181 - Rolling back the cascade: the ‘<code class=css>default</code>’ 1.182 - keyword</a> 1.183 - </ul> 1.184 - </ul> 1.185 - 1.186 - <li><a href="#value-stages"><span class=secno>5. </span> Stages of Value 1.187 - Computation</a> 1.188 - <ul class=toc> 1.189 - <li><a href="#specified"><span class=secno>5.1. </span> Finding the 1.190 - specified value</a> 1.191 - 1.192 - <li><a href="#computed"><span class=secno>5.2. </span> Finding the 1.193 - computed value</a> 1.194 - 1.195 - <li><a href="#used"><span class=secno>5.3. </span> Finding the used 1.196 - value</a> 1.197 - 1.198 - <li><a href="#actual"><span class=secno>5.4. </span> Finding the actual 1.199 - value</a> 1.200 - 1.201 - <li><a href="#stages-examples"><span class=secno>5.5. </span> 1.202 - Examples</a> 1.203 - </ul> 1.204 - 1.205 - <li><a href="#conformance"><span class=secno>6. </span>Conformance</a> 1.206 - 1.207 - <li class=no-num><a href="#acknowledgments">Acknowledgments</a> 1.208 - 1.209 - <li class=no-num><a href="#references">References</a> 1.210 - <ul class=toc> 1.211 - <li class=no-num><a href="#normative-references">Normative 1.212 - references</a> 1.213 - 1.214 - <li class=no-num><a href="#other-references">Other references</a> 1.215 - </ul> 1.216 - 1.217 - <li class=no-num><a href="#index">Index</a> 1.218 - 1.219 - <li class=no-num><a href="#property-index">Property index</a> 1.220 - </ul> 1.221 - <!--end-toc--> 1.222 - 1.223 - <hr> 1.224 - 1.225 - <h2 id=introduction><span class=secno>1. </span>Introduction</h2> 1.226 - 1.227 - <p> One of the fundamental design principles of CSS is <em>cascading</em>, 1.228 - which allows several style sheets to influence the presentation of a 1.229 - document. When different declarations try to set a value for the same 1.230 - element/property combination, the conflicts must somehow be resolved. 1.231 - 1.232 - <p> The opposite problem arises when no declarations try to set a the value 1.233 - for an element/property combination. In this case, a value must be found 1.234 - by way of <em>inheritance</em> or by looking at the property's <a 1.235 - href="#initial-value"><em>initial value</em></a>. 1.236 - 1.237 - <p> The rules for finding the specified value for all properties on all 1.238 - elements are described in this specification. The rules for finding the 1.239 - specified values in the page context and the margin boxes are described in 1.240 - <a href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>. 1.241 - 1.242 - <h2 id=at-import><span class=secno>2. </span> Importing style sheets: the 1.243 - ‘<a href="#atimport"><code class=css>@import</code></a>’ rule</h2> 1.244 - 1.245 - <p> The <dfn id=atimport>‘<code class=css>@import</code>’</dfn> rule 1.246 - allows users to import style rules from other style sheets. Any ‘<a 1.247 - href="#atimport"><code class=css>@import</code></a>’ rules must follow 1.248 - all ‘<code class=css>@charset</code>’ rules and precede all other 1.249 - at-rules and rule sets in a style sheet. The ‘<a href="#atimport"><code 1.250 - class=css>@import</code></a>’ keyword must be followed by the URI of the 1.251 - style sheet to include. A string is also allowed; it will be interpreted 1.252 - as if it had url(…) around it. 1.253 - 1.254 - <div class=example> 1.255 - <p> The following lines are equivalent in meaning and illustrate both 1.256 - ‘<a href="#atimport"><code class=css>@import</code></a>’ syntaxes 1.257 - (one with ‘<code class=css>url()</code>’ and one with a bare string): 1.258 - 1.259 - <pre><!-- 1.260 - -->@import "mystyle.css"; 1.261 -<!-- 1.262 - -->@import url("mystyle.css");</pre> 1.263 - </div> 1.264 - 1.265 - <p> So that user agents can avoid retrieving resources for unsupported 1.266 - media types, authors may specify media-dependent ‘<a 1.267 - href="#atimport"><code class=css>@import</code></a>’ rules. These <dfn 1.268 - id=conditional-imports 1.269 - title="conditional import|media-dependent import">conditional 1.270 - imports</dfn> specify comma-separated “media queries” after the URI. 1.271 - 1.272 - <div class=example> 1.273 - <p> The following rules illustrate how ‘<a href="#atimport"><code 1.274 - class=css>@import</code></a>’ rules can be made media-dependent: 1.275 - 1.276 - <pre><!-- 1.277 - -->@import url("fineprint.css") print; 1.278 -<!-- 1.279 - -->@import url("bluish.css") projection, tv; 1.280 -<!-- 1.281 - -->@import url("narrow.css") handheld and (max-width: 400px);</pre> 1.282 - </div> 1.283 - 1.284 - <p> The full syntax of the expressions after the URL is defined by the 1.285 - Media Queries specification <a href="#MEDIAQ" 1.286 - rel=biblioentry>[MEDIAQ]<!--{{!MEDIAQ}}--></a>. 1.287 - 1.288 - <p> In the absence of any media queries, the import is unconditional. 1.289 - Specifying ‘<a href="#all"><code class=css>all</code></a>’ for the 1.290 - medium has the same effect. 1.291 - 1.292 - <h2 id=shorthand><span class=secno>3. </span> Shorthand Properties</h2> 1.293 - 1.294 - <p> Some properties are <dfn id=shorthand-properties>shorthand 1.295 - properties</dfn>, meaning that they allow authors to specify the values of 1.296 - several properties with a single property. A shorthand property sets all 1.297 - of its longhand sub-properties, exactly as if expanded in place. 1.298 - 1.299 - <div class=example> 1.300 - <p> For example, the CSS 2.1 ‘<code class=property>font</code>’ 1.301 - property is a shorthand property for setting ‘<code 1.302 - class=property>font-style</code>’, ‘<code 1.303 - class=property>font-variant</code>’, ‘<code 1.304 - class=property>font-weight</code>’, ‘<code 1.305 - class=property>font-size</code>’, ‘<code 1.306 - class=property>line-height</code>’, and ‘<code 1.307 - class=property>font-family</code>’ all at once. The multiple style 1.308 - rules of this example: 1.309 - 1.310 - <pre> 1.311 -h1 { 1.312 - font-weight: bold; 1.313 - font-size: 12pt; 1.314 - line-height: 14pt; 1.315 - font-family: Helvetica; 1.316 - font-variant: normal; 1.317 - font-style: normal; 1.318 -}</pre> 1.319 - 1.320 - <p>can therefore be rewritten as 1.321 - 1.322 - <pre>h1 { font: bold 12pt/14pt Helvetica }</pre> 1.323 - </div> 1.324 - 1.325 - <p> When values are omitted from a shorthand form, unless otherwise 1.326 - defined, each "missing" sub-property is assigned its <a 1.327 - href="#initial-value"><i>initial value</i></a>. 1.328 - 1.329 - <p class=note> This means that a shorthand property declaration always sets 1.330 - <em title="">all</em> of its subproperties, even those that are not 1.331 - explicitly set. Carelessly used, this might result in inadvertently 1.332 - resetting some sub-properties. Carefully used, a shorthand can guarantee a 1.333 - "blank slate" by resetting sub-properties inadvertently cascaded from 1.334 - other sources. For example, writing ‘<code class=css>background: 1.335 - green</code>’ rather than ‘<code class=css>background-color: 1.336 - green</code>’ ensures that the background color overrides any earlier 1.337 - declarations that might have set the background to an image. 1.338 - 1.339 - <p> In some cases, a shorthand might have different syntax or special 1.340 - keywords that don't directly correspond to values of its sub-properties. 1.341 - (In such cases, the shorthand will explicitly define the expansion of its 1.342 - values.) 1.343 - 1.344 - <p> If a shorthand is specified as one of the <a 1.345 - href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide 1.346 - keywords</a>, it sets all of its sub-properties to that keyword. (Note 1.347 - that these keywords cannot be combined with other values in a single 1.348 - declaration, not even in a shorthand.) 1.349 - 1.350 - <p> Declaring a shorthand property to be ‘<code 1.351 - class=css>!important</code>’ is equivalent to declaring all of its 1.352 - sub-properties to be "!important". 1.353 - 1.354 - <h3 id=all-shorthand><span class=secno>3.1. </span> Resetting All 1.355 - Properties: the ‘<a href="#all"><code class=css>all</code></a>’ 1.356 - property</h3> 1.357 - 1.358 - <table class=propdef> 1.359 - <tbody> 1.360 - <tr> 1.361 - <th>Name: 1.362 - 1.363 - <td><dfn id=all>all</dfn> 1.364 - 1.365 - <tr> 1.366 - <th>Value: 1.367 - 1.368 - <td>initial | inherit | default 1.369 - 1.370 - <tr> 1.371 - <th>Initial: 1.372 - 1.373 - <td>See individual properties 1.374 - 1.375 - <tr> 1.376 - <th>Applies to: 1.377 - 1.378 - <td>See individual properties 1.379 - 1.380 - <tr> 1.381 - <th>Inherited: 1.382 - 1.383 - <td>See individual properties 1.384 - 1.385 - <tr> 1.386 - <th>Percentages: 1.387 - 1.388 - <td>See individual properties 1.389 - 1.390 - <tr> 1.391 - <th>Media: 1.392 - 1.393 - <td>See individual properties 1.394 - 1.395 - <tr> 1.396 - <th>Computed value: 1.397 - 1.398 - <td>See individual properties 1.399 - 1.400 - <tr> 1.401 - <th>Animatable: 1.402 - 1.403 - <td>See individual properties 1.404 - </table> 1.405 - 1.406 - <p> The ‘<a href="#all"><code class=css>all</code></a>’ property is a 1.407 - shorthand that resets <em title="">all</em> CSS properties. It only 1.408 - accepts the <a 1.409 - href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide 1.410 - keywords</a>. 1.411 - 1.412 - <div class=example> 1.413 - <p> For example, if an author specifies ‘<code class=css>all: 1.414 - default</code>’ on an element it will block all inheritance and reset 1.415 - all properties, as if no rules appeared in the author level of the 1.416 - cascade. 1.417 - 1.418 - <p> This can be useful for the root element of a "widget" included in a 1.419 - page, which does not wish to inherit the styles of the outer page. 1.420 - </div> 1.421 - 1.422 - <h2 id=cascade-and-inheritance><span class=secno>4. </span> Cascading and 1.423 - Inheritance</h2> 1.424 - 1.425 - <p> The cascading and inheritance process takes a set of declarations as 1.426 - input, and outputs a specified value for each property on each element. 1.427 - 1.428 - <h3 id=filter-declarations><span class=secno>4.1. </span> Filtering 1.429 - Declarations</h3> 1.430 - 1.431 - <p> In order to find the specified values, implementations must first 1.432 - identify all declarations that apply to each element. A declaration 1.433 - applies to an element if: 1.434 - 1.435 - <ul> 1.436 - <li> It belongs to a stylesheet that currently applies to this document. 1.437 - 1.438 - <li> It is not qualified by a conditional rule <a href="#CSS3-CONDITIONAL" 1.439 - rel=biblioentry>[CSS3-CONDITIONAL]<!--{{!CSS3-CONDITIONAL}}--></a> with a 1.440 - false condition. 1.441 - 1.442 - <li> It belongs to a ruleset whose selector matches the element. <a 1.443 - href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> (Taking <a 1.444 - href="http://www.w3.org/TR/selectors4/#scoping">scoping</a> into account, 1.445 - if necessary.) 1.446 - </ul> 1.447 - 1.448 - <p> The remaining declarations form, for each property on each element, an 1.449 - unordered list of values. The next section, the cascade process, orders 1.450 - these lists. 1.451 - 1.452 - <h3 id=cascade><span class=secno>4.2. </span> Cascading Declarations</h3> 1.453 - 1.454 - <p> The cascade algorithm takes an unordered list of declarations for a 1.455 - given property on an element and sorts it by precedence as determined 1.456 - below. 1.457 - 1.458 - <p> User agents must sort declarations according to the following criteria, 1.459 - in descending order of importance: 1.460 - 1.461 - <dl> 1.462 - <dt>Origin 1.463 - 1.464 - <dd> The origin of a declaration is based on where it comes from and 1.465 - whether or not it is declared ‘<code class=css>!important</code>’ 1.466 - (see below). The precedence of the various origins is, in descending 1.467 - order: 1.468 - <ol> 1.469 - <li>Transition declarations <a href="#CSS3-TRANSITIONS" 1.470 - rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a> 1.471 - 1.472 - <li>Important user agent declarations 1.473 - 1.474 - <li>Important user declarations 1.475 - 1.476 - <li>Important override declarations <a href="#DOM-LEVEL-2-STYLE" 1.477 - rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{!DOM-LEVEL-2-STYLE}}--></a> 1.478 - 1.479 - <li>Important author declarations 1.480 - 1.481 - <li>Animation declarations <a href="#CSS3-ANIMATIONS" 1.482 - rel=biblioentry>[CSS3-ANIMATIONS]<!--{{!CSS3-ANIMATIONS}}--></a> 1.483 - 1.484 - <li>Normal override declarations <a href="#DOM-LEVEL-2-STYLE" 1.485 - rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{!DOM-LEVEL-2-STYLE}}--></a> 1.486 - 1.487 - <li>Normal author declarations 1.488 - 1.489 - <li>Normal user declarations 1.490 - 1.491 - <li>Normal user agent declarations 1.492 - </ol> 1.493 - 1.494 - <p> Declarations from origins earlier in this list win over declarations 1.495 - from later origins. 1.496 - 1.497 - <dt>Scope 1.498 - 1.499 - <dd> If a declaration belongs to a ruleset with a <a 1.500 - href="http://www.w3.org/TR/selectors4/#scoping">scoped selector</a>, the 1.501 - element it is scoped to can affect the cascade. For the purpose of this 1.502 - step, all other declarations are considered to be scoped to the root 1.503 - element. 1.504 - <p> If the <a 1.505 - href="http://www.w3.org/TR/selectors4/#scoping-element">scoping 1.506 - elements</a> of two declarations have an ancestor/descendant 1.507 - relationship, the declaration whose scoping element is the descendant 1.508 - wins. 1.509 - 1.510 - <dt>Specificity 1.511 - 1.512 - <dd> The <a href="http://www.w3.org/TR/selectors/#specificity">Selectors 1.513 - module</a> <a href="#SELECT" 1.514 - rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> and the <a 1.515 - href="http://www.w3.org/TR/css-style-attr/#interpret">Style Attributes 1.516 - module</a> [[CSS-STYLE-ATTR]] describe how to compute the specificity. 1.517 - The declaration with the highest specificity wins. 1.518 - 1.519 - <dt>Order of appearance. 1.520 - 1.521 - <dd> Rules from imported style sheets are treated as if their stylesheets 1.522 - were substituted in place of the ‘<a href="#atimport"><code 1.523 - class=css>@import</code></a>’ rule. Stylesheets independently linked by 1.524 - the originating document are treated as if they were concatenated in 1.525 - linking order, as determined by the host document language. The last 1.526 - declaration wins. 1.527 - </dl> 1.528 - 1.529 - <p> The <dfn id=output-of-the-cascade>output of the cascade</dfn> is a 1.530 - (potentially empty) sorted list of declarations for each property on each 1.531 - element. 1.532 - 1.533 - <h4 id=cascading-origins><span class=secno>4.2.1. </span> Cascading Origins</h4> 1.534 - 1.535 - <p> Each style rule has an origin, which determines where it enters the 1.536 - cascade. CSS defines three core origins: 1.537 - 1.538 - <dl> 1.539 - <dt>Author 1.540 - 1.541 - <dd> The author specifies style sheets for a source document according to 1.542 - the conventions of the document language. For instance, in HTML, style 1.543 - sheets may be included in the document or linked externally. 1.544 - 1.545 - <dt>User 1.546 - 1.547 - <dd> The user may be able to specify style information for a particular 1.548 - document. For example, the user may specify a file that contains a style 1.549 - sheet or the user agent may provide an interface that generates a user 1.550 - style sheet (or behaves as if it did). 1.551 - 1.552 - <dt>User agent 1.553 - 1.554 - <dd> Conforming user agents must apply a default style sheet (or behave as 1.555 - if they did). A user agent's default style sheet should present the 1.556 - elements of the document language in ways that satisfy general 1.557 - presentation expectations for the document language (e.g., for visual 1.558 - browsers, the EM element in HTML is presented using an italic font). See 1.559 - e.g. the <a 1.560 - href="http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">HTML 1.561 - user agent style sheet</a>. 1.562 - </dl> 1.563 - 1.564 - <p> Extensions to CSS define the following additional origins: 1.565 - 1.566 - <dl> 1.567 - <dt>Override 1.568 - 1.569 - <dd> <a>DOM Level 2 Style</a> <a href="#DOM-LEVEL-2-STYLE" 1.570 - rel=biblioentry>[DOM-LEVEL-2-STYLE]<!--{{!DOM-LEVEL-2-STYLE}}--></a> 1.571 - defines an interface for "override" styles, which enter the cascade at a 1.572 - higher level than other author rules. 1.573 - 1.574 - <dt>Animation 1.575 - 1.576 - <dd> CSS Animations <a href="#CSS3-ANIMATIONS" 1.577 - rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a> generate 1.578 - "virtual" rules representing their effects when running. 1.579 - 1.580 - <dt>Transition 1.581 - 1.582 - <dd> Like CSS Animations, CSS Transitions <a href="#CSS3-TRANSITIONS" 1.583 - rel=biblioentry>[CSS3-TRANSITIONS]<!--{{CSS3-TRANSITIONS}}--></a> 1.584 - generate "virtual" rules representing their effects when running. 1.585 - </dl> 1.586 - 1.587 - <h4 id=important-rules><span class=secno>4.2.2. </span> ‘<code 1.588 - class=css>!important</code>’ rules</h4> 1.589 - 1.590 - <p> CSS attempts to create a balance of power between author and user style 1.591 - sheets. By default, rules in an author's style sheet override those in a 1.592 - user's style sheet. 1.593 - 1.594 - <p> However, for balance, an "!important" declaration takes precedence over 1.595 - a normal declaration. Author and user style sheets may contain 1.596 - "!important" declarations, with user "!important" rules overriding author 1.597 - "!important" rules. This CSS feature improves accessibility of documents 1.598 - by giving users with special requirements (large fonts, color 1.599 - combinations, etc.) control over presentation. 1.600 - 1.601 - <p> A declaration is "!important" if the last two tokens in its value are 1.602 - the delimiter token ‘<code class=css>!</code>’ followed by the 1.603 - identifier token ‘<code class=css>important</code>’. Declaring a 1.604 - shorthand property (e.g., ‘<code class=property>background</code>’) to 1.605 - be "!important" is equivalent to declaring all of its sub-properties to be 1.606 - "!important". 1.607 - 1.608 - <p> User agent stylesheets may also contain "!important" rules. These 1.609 - override all author and user rules. 1.610 - 1.611 - <div class=example> 1.612 - <p> The first rule in the user's style sheet in the following example 1.613 - contains an "!important" declaration, which overrides the corresponding 1.614 - declaration in the author's style sheet. The second declaration will also 1.615 - win due to being marked "!important". However, the third rule in the 1.616 - user's style sheet is not "!important" and will therefore lose to the 1.617 - second rule in the author's style sheet (which happens to set style on a 1.618 - shorthand property). Also, the third author rule will lose to the second 1.619 - author rule since the second rule is "!important". This shows that 1.620 - "!important" declarations have a function also within author style 1.621 - sheets. 1.622 - 1.623 - <pre> 1.624 -/* From the user's style sheet */ 1.625 -p { text-indent: 1em !important } 1.626 -p { font-style: italic !important } 1.627 -p { font-size: 18pt } 1.628 - 1.629 -/* From the author's style sheet */ 1.630 -p { text-indent: 1.5em !important } 1.631 -p { font: normal 12pt sans-serif !important } 1.632 -p { font-size: 24pt }</pre> 1.633 - </div> 1.634 - 1.635 - <h4 id=preshint><span class=secno>4.2.3. </span> Precedence of Non-CSS 1.636 - Presentational Hints</h4> 1.637 - 1.638 - <p> The UA may choose to honor presentational hints in a source document's 1.639 - markup, for example the <code>bgcolor</code> attribute or 1.640 - <code><s></code> element in [[HTML]]. All document language-based 1.641 - styling must be translated to corresponding CSS rules and either enter the 1.642 - cascade at the user agent level or be treated as author level rules with a 1.643 - specificity of zero placed at the start of the author style sheet. A 1.644 - document language may define whether a presentational hint enters at the 1.645 - UA or author level of the cascade; if so, the UA must behave accordingly. 1.646 - For example, <a href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a> 1.647 - maps its presentation attributes into the author level. 1.648 - 1.649 - <p class=note> Presentational hints entering the cascade at the UA level 1.650 - can be overridden by user styles. Presentational hints entering the 1.651 - cascade at the author level can be overridden by the author's use of the 1.652 - ‘<code class=css>default</code>’ keyword. Host languages should choose 1.653 - the appropriate level for presentational hints with these considerations 1.654 - in mind. 1.655 - 1.656 - <h4 id=cascaded-value><span class=secno>4.2.4. </span> The Cascaded Value</h4> 1.657 - 1.658 - <p> The <dfn id=cascaded-value0>cascaded value</dfn> represents the result 1.659 - of the cascade. It is the value of the highest declaration in the <a 1.660 - href="#output-of-the-cascade"><i>output of the cascade</i></a> (after any 1.661 - rollback steps have been performed, see below). If the <a 1.662 - href="#output-of-the-cascade"><i>output of the cascade</i></a> is an empty 1.663 - list, the <a href="#cascaded-value0"><i>cascaded value</i></a> is the 1.664 - ‘<code class=css>inherit</code>’ keyword if the property is an <a 1.665 - href="#inherited-properties"><i>inherited property</i></a> (as defined by 1.666 - its property definition table) or the ‘<code class=css>initial</code>’ 1.667 - keyword otherwise. 1.668 - 1.669 - <h3 id=defaulting><span class=secno>4.3. </span> Inheritance and Defaulting</h3> 1.670 - 1.671 - <p> In most cases, the <a href="#specified-value"><i>specified 1.672 - value</i></a> is the <a href="#cascaded-value0"><i>cascaded value</i></a>. 1.673 - However, the ‘<code class=css>initial</code>’, ‘<code 1.674 - class=css>inherit</code>’, and ‘<code class=css>default</code>’ 1.675 - values are handled specially when they are the <a 1.676 - href="#cascaded-value0"><i>cascaded value</i></a> of a property. 1.677 - 1.678 - <h4 id=initial><span class=secno>4.3.1. </span> Initial value: the ‘<code 1.679 - class=css>initial</code>’ keyword</h4> 1.680 - 1.681 - <p> Each property has an <dfn id=initial-value>initial value</dfn>, defined 1.682 - in the property's definition table. If the <a 1.683 - href="#cascaded-value0"><i>cascaded value</i></a> is the ‘<code 1.684 - class=css>initial</code>’ keyword, the property's <a 1.685 - href="#initial-value"><i>initial value</i></a> becomes its <a 1.686 - href="#specified-value"><i>specified value</i></a>. 1.687 - 1.688 - <h4 id=inheritance><span class=secno>4.3.2. </span> Inheritance: the 1.689 - ‘<code class=css>inherit</code>’ keyword</h4> 1.690 - 1.691 - <p> Some properties are <dfn id=inherited-properties 1.692 - title="inherited property|inherited properties">inherited 1.693 - properties</dfn>, as defined in their property definition table. This 1.694 - means that, unless the cascade results in a value, the value will be 1.695 - determined by inheritance. 1.696 - 1.697 - <p> Inheritance propagates property values from parent elements to their 1.698 - children. The <dfn id=inherited-value>inherited value</dfn> of a property 1.699 - on an element is the <a href="#computed-value"><i>computed value</i></a> 1.700 - of the property on the element's parent element. For the root element, 1.701 - which has no parent element, the <a href="#inherited-value"><i>inherited 1.702 - value</i></a> is the <a href="#initial-value"><i>initial value</i></a> of 1.703 - the property. 1.704 - 1.705 - <p> Pseudo-elements inherit according to a fictional tag sequence described 1.706 - for each pseudo-element <a href="#SELECT" 1.707 - rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>. 1.708 - 1.709 - <p class=note> Note that inheritance follows the document tree and is not 1.710 - intercepted by <a 1.711 - href="http://www.w3.org/TR/CSS21/visuren.html#box-gen">anonymous 1.712 - boxes</a>, or otherwise affected by manipulations of the box tree. 1.713 - 1.714 - <p> If the <a href="#cascaded-value0"><i>cascaded value</i></a> of a 1.715 - property is the ‘<code class=css>inherit</code>’ keyword, the <a 1.716 - href="#inherited-value"><i>inherited value</i></a> becomes the property's 1.717 - <i>specified</i> and <a href="#computed-value"><i>computed values</i></a>. 1.718 - 1.719 - <h4 id=default-keyword><span class=secno>4.3.3. </span> Rolling back the 1.720 - cascade: the ‘<code class=css>default</code>’ keyword</h4> 1.721 - 1.722 - <p> CSS Cascading and Inheritance Level 3 introduces the ‘<code 1.723 - class=css>default</code>’ keyword as a <a 1.724 - href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide 1.725 - keyword</a> accepted by all properties. 1.726 - 1.727 - <p> If the <a href="#cascaded-value0"><i>cascaded value</i></a> is the 1.728 - ‘<code class=css>default</code>’ keyword, then the origin level to 1.729 - which it belongs is discarded from the cascade, resulting in a new <a 1.730 - href="#cascaded-value0"><i>cascaded value</i></a>. This continues until 1.731 - the <a href="#cascaded-value0"><i>cascaded value</i></a> is not ‘<code 1.732 - class=css>default</code>’ or until the <a 1.733 - href="#output-of-the-cascade"><i>output of the cascade</i></a> is empty. 1.734 - 1.735 - <h2 id=value-stages><span class=secno>5. </span> Stages of Value 1.736 - Computation</h2> 1.737 - 1.738 - <p> Once a user agent has parsed a document and constructed a document 1.739 - tree, it must assign, for every element in the tree, a value to every 1.740 - property that applies to the target media type. 1.741 - 1.742 - <p> The final value of a CSS3 property for a given element is the result of 1.743 - a four-step calculation: 1.744 - 1.745 - <ul> 1.746 - <li> First, cascading and inheritance yields the <a 1.747 - href="#specified-value"><i>specified value</i></a>. 1.748 - 1.749 - <li> Second, relative values are computed into absolute values as far as 1.750 - possible without formatting the document, thereby yielding the <a 1.751 - href="#computed-value"><i>computed value</i></a>. 1.752 - 1.753 - <li> The computed value is transformed into the <a 1.754 - href="#used-value"><i>used value</i></a> in the formatting process. 1.755 - 1.756 - <li> Finally, the computed value is transformed to the <a 1.757 - href="#actual-value"><i>actual value</i></a> based on constraints of 1.758 - local environment. 1.759 - </ul> 1.760 - 1.761 - <h3 id=specified><span class=secno>5.1. </span> Finding the specified value</h3> 1.762 - 1.763 - <p> The <dfn id=specified-value>specified value</dfn> is the output of the 1.764 - <a href="#cascade-and-inheritance">cascading and inheritance process</a>. 1.765 - 1.766 - <p> The cascading and inheritance process guarantees that a <a 1.767 - href="#specified-value"><i>specified value</i></a> exists for every 1.768 - property on every element. 1.769 - 1.770 - <h3 id=computed><span class=secno>5.2. </span> Finding the computed value</h3> 1.771 - 1.772 - <p> A <a href="#specified-value"><i>specified value</i></a> can be either 1.773 - absolute (i.e., not relative to another value, as in ‘<code 1.774 - class=property>red</code>’ or ‘<code class=css>2mm</code>’) or 1.775 - relative (i.e., relative to another value, as in ‘<code 1.776 - class=property>auto</code>’, ‘<code class=css>2em</code>’). 1.777 - 1.778 - <p> For absolute values, no extra processing is needed to find the computed 1.779 - value. For relative values, on the other hand, computation is necessary to 1.780 - find the computed value: percentages must be multiplied by a reference 1.781 - value (each property defines which value that is), values with relative 1.782 - units (em, ex, vh, vw) must be made absolute by multiplying with the 1.783 - appropriate reference size, certain keywords (e.g., ‘<code 1.784 - class=property>smaller</code>’, ‘<code 1.785 - class=property>bolder</code>’) must be replaced according to their 1.786 - definitions, and valid relative URLs must be resolved to become absolute. 1.787 - See examples (f), (g) and (h) in the <a href="#stages-examples">table 1.788 - below</a>. 1.789 - 1.790 - <p> The <dfn id=computed-value>computed value</dfn> is the result of 1.791 - resolving the <a href="#specified-value"><i>specified value</i></a> as 1.792 - defined in the "Computed Value" line of the property definition table. 1.793 - Generally, this means resolving the <a 1.794 - href="#specified-value"><i>specified value</i></a> insofar as possible 1.795 - without formatting the document. 1.796 - 1.797 - <p class=note> The <a href="#computed-value"><i>computed value</i></a> is 1.798 - the value that is transferred from parent to child during 1.799 - <i>inheritance</i>. 1.800 - 1.801 - <p> The <a href="#computed-value"><i>computed value</i></a> exists even 1.802 - when the property does not apply (as defined by the "Applies To" line). 1.803 - However, some properties may define the <a 1.804 - href="#computed-value"><i>computed value</i></a> of a property for an 1.805 - element to depend on whether the property applies to that element. 1.806 - 1.807 - <h3 id=used><span class=secno>5.3. </span> Finding the used value</h3> 1.808 - 1.809 - <p> <a href="#computed-value"><i>Computed values</i></a> are processed as 1.810 - far as possible without formatting the document. Some values, however, can 1.811 - only be determined when the document is being laid out. For example, if 1.812 - the width of an element is set to be a certain percentage of its 1.813 - containing block, the width cannot be determined until the width of the 1.814 - containing block has been determined. The <dfn id=used-value>used 1.815 - value</dfn> is the result of taking the <a 1.816 - href="#computed-value"><i>computed value</i></a> and resolving any 1.817 - remaining dependencies into an absolute value. 1.818 - 1.819 - <h3 id=actual><span class=secno>5.4. </span> Finding the actual value</h3> 1.820 - 1.821 - <p> A <a href="#used-value"><i>used value</i></a> is in principle ready to 1.822 - be used, but a user agent may not be able to make use of the value in a 1.823 - given environment. For example, a user agent may only be able to render 1.824 - borders with integer pixel widths and may therefore have to approximate 1.825 - the computed width. Also, the font size of an element may need adjustment 1.826 - based on the availability of fonts or the value of the ‘<code 1.827 - class=property>font-size-adjust</code>’ property. The <dfn 1.828 - id=actual-value>actual value</dfn> is the used value after any such 1.829 - approximations have been made. 1.830 - 1.831 - <p class=note> By probing the actual values of elements, much can be 1.832 - learned about how the document is laid out. However, not all information 1.833 - is recorded in the actual values. For example, the actual value of the 1.834 - ‘<code class=property>page-break-after</code>’ property does not 1.835 - reflect whether there is a page break or not after the element. Similarly, 1.836 - the actual value of ‘<code class=property>orphans</code>’ does not 1.837 - reflect how many orphan lines there is in a certain element. See examples 1.838 - (j) and (k) in the <a href="#stages-examples">table below</a>. 1.839 - 1.840 - <h3 id=stages-examples><span class=secno>5.5. </span> Examples</h3> 1.841 - 1.842 - <table class=data> 1.843 - <thead> 1.844 - <tr> 1.845 - <th> 1.846 - 1.847 - <th>Property 1.848 - 1.849 - <th>Winning declaration <!-- <th>Cascaded value --> 1.850 - 1.851 - <th>Specified value 1.852 - 1.853 - <th>Computed value 1.854 - 1.855 - <th>Used value 1.856 - 1.857 - <th>Actual value 1.858 - 1.859 - <tbody> 1.860 - <tr> 1.861 - <td>(a) 1.862 - 1.863 - <th>‘<code class=property>text-align</code>’ 1.864 - 1.865 - <td><code class=declaration>text-align: left</code> <!-- <td>''left''--> 1.866 - 1.867 - <td>‘<code class=css>left</code>’ 1.868 - 1.869 - <td>‘<code class=css>left</code>’ 1.870 - 1.871 - <td>‘<code class=css>left</code>’ 1.872 - 1.873 - <td>‘<code class=css>left</code>’ 1.874 - 1.875 - <tr> 1.876 - <td>(b) 1.877 - 1.878 - <th>‘<code class=property>border-top-width</code>’, ‘<code 1.879 - class=property>border-right-width</code>’, ‘<code 1.880 - class=property>border-bottom-width</code>’, ‘<code 1.881 - class=property>border-left-width</code>’ 1.882 - 1.883 - <td><code class=declaration>border-width: inherit</code> 1.884 - <!-- <td>''inherit'' --> 1.885 - 1.886 - <td class=say>‘<code class=css>4.2px</code>’ 1.887 - 1.888 - <td>‘<code class=css>4.2px</code>’ 1.889 - 1.890 - <td>‘<code class=css>4.2px</code>’ 1.891 - 1.892 - <td>‘<code class=css>4px</code>’ 1.893 - 1.894 - <tr> 1.895 - <td>(c) 1.896 - 1.897 - <th>‘<code class=property>width</code>’ 1.898 - 1.899 - <td><small>(none)</small> <!-- <td><small>(none)</small>--> 1.900 - 1.901 - <td>‘<code class=css>auto</code>’ <small>(initial value)</small> 1.902 - 1.903 - <td>‘<code class=css>auto</code>’ 1.904 - 1.905 - <td>‘<code class=css>120px</code>’ 1.906 - 1.907 - <td>‘<code class=css>120px</code>’ 1.908 - 1.909 - <tr> 1.910 - <td>(d) 1.911 - 1.912 - <th>‘<code class=property>list-style-position</code>’ 1.913 - 1.914 - <td><code class=declaration>list-style-position: inherit</code> 1.915 - <!-- <td>''inherit'' --> 1.916 - 1.917 - <td class=say>‘<code class=css>inside</code>’ 1.918 - 1.919 - <td>‘<code class=css>inside</code>’ 1.920 - 1.921 - <td>‘<code class=css>inside</code>’ 1.922 - 1.923 - <td>‘<code class=css>inside</code>’ 1.924 - 1.925 - <tr> 1.926 - <td>(e) 1.927 - 1.928 - <th>‘<code class=property>list-style-position</code>’ 1.929 - 1.930 - <td><code class=declaration>list-style-position: initial</code> 1.931 - <!-- <td>''initial''--> 1.932 - 1.933 - <td>‘<code class=css>outside</code>’ <small>(initial value)</small> 1.934 - 1.935 - <td>‘<code class=css>outside</code>’ 1.936 - 1.937 - <td>‘<code class=css>outside</code>’ 1.938 - 1.939 - <td>‘<code class=css>outside</code>’ 1.940 - 1.941 - <tr> 1.942 - <td>(f) 1.943 - 1.944 - <th>‘<code class=property>font-size</code>’ 1.945 - 1.946 - <td><code class=declaration>font-size: 1.2em</code> 1.947 - <!-- <td>''1.2em''--> 1.948 - 1.949 - <td>‘<code class=css>1.2em</code>’ 1.950 - 1.951 - <td class=say>‘<code class=css>14.1px</code>’ 1.952 - 1.953 - <td>‘<code class=css>14.1px</code>’ 1.954 - 1.955 - <td>‘<code class=css>14px</code>’ 1.956 - 1.957 - <tr> 1.958 - <td>(g) 1.959 - 1.960 - <th>‘<code class=property>width</code>’ 1.961 - 1.962 - <td><code class=declaration>width: 80%</code> <!-- <td>''80%''--> 1.963 - 1.964 - <td>‘<code class=css>80%</code>’ 1.965 - 1.966 - <td>‘<code class=css>80%</code>’ 1.967 - 1.968 - <td class=say>‘<code class=css>354.2px</code>’ 1.969 - 1.970 - <td>‘<code class=css>354px</code>’ 1.971 - 1.972 - <tr> 1.973 - <td>(h) 1.974 - 1.975 - <th>‘<code class=property>width</code>’ 1.976 - 1.977 - <td><code class=declaration>width: auto</code> <!-- <td>''auto''--> 1.978 - 1.979 - <td>‘<code class=css>auto</code>’ 1.980 - 1.981 - <td>‘<code class=css>auto</code>’ 1.982 - 1.983 - <td class=say>‘<code class=css>134px</code>’ 1.984 - 1.985 - <td>‘<code class=css>134px</code>’ 1.986 - 1.987 - <tr> 1.988 - <td>(i) 1.989 - 1.990 - <th>‘<code class=property>height</code>’ 1.991 - 1.992 - <td><code class=declaration>height: auto</code> <!-- <td>''auto''--> 1.993 - 1.994 - <td>‘<code class=css>auto</code>’ 1.995 - 1.996 - <td>‘<code class=css>auto</code>’ 1.997 - 1.998 - <td class=say>‘<code class=css>176px</code>’ 1.999 - 1.1000 - <td>‘<code class=css>176px</code>’ 1.1001 - 1.1002 - <tr> 1.1003 - <td>(j) 1.1004 - 1.1005 - <th>‘<code class=property>page-break-after</code>’ 1.1006 - 1.1007 - <td><small>(none)</small> <!-- <td><small>(none)</small>--> 1.1008 - 1.1009 - <td>‘<code class=css>auto</code>’ <small>(initial value)</small> 1.1010 - 1.1011 - <td>‘<code class=css>auto</code>’ 1.1012 - 1.1013 - <td>‘<code class=css>auto</code>’ 1.1014 - 1.1015 - <td>‘<code class=css>auto</code>’ 1.1016 - 1.1017 - <tr> 1.1018 - <td>(k) 1.1019 - 1.1020 - <th>‘<code class=property>orphans</code>’ 1.1021 - 1.1022 - <td><code class=declaration>orphans: 3</code> <!-- <td>''3''--> 1.1023 - 1.1024 - <td>‘<code class=css>3</code>’ 1.1025 - 1.1026 - <td>‘<code class=css>3</code>’ 1.1027 - 1.1028 - <td>‘<code class=css>3</code>’ 1.1029 - 1.1030 - <td>‘<code class=css>3</code>’ 1.1031 - </table> 1.1032 - 1.1033 - <h2 id=conformance><span class=secno>6. </span>Conformance</h2> 1.1034 - 1.1035 - <p>[TBD] 1.1036 - 1.1037 - <h2 class=no-num id=acknowledgments>Acknowledgments</h2> 1.1038 - 1.1039 - <p>David Baron contributed to this specification. 1.1040 - 1.1041 - <h2 class=no-num id=references>References</h2> 1.1042 - 1.1043 - <h3 class=no-num id=normative-references>Normative references</h3> 1.1044 - <!--begin-normative--> 1.1045 - <!-- Sorted by label --> 1.1046 - 1.1047 - <dl class=bibliography> 1.1048 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.1049 - <!----> 1.1050 - 1.1051 - <dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS] 1.1052 - 1.1053 - <dd>Dean Jackson; et al. <a 1.1054 - href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/"><cite>CSS 1.1055 - Animations.</cite></a> 3 April 2012. W3C Working Draft. (Work in 1.1056 - progress.) URL: <a 1.1057 - href="http://www.w3.org/TR/2012/WD-css3-animations-20120403/">http://www.w3.org/TR/2012/WD-css3-animations-20120403/</a> 1.1058 - </dd> 1.1059 - <!----> 1.1060 - 1.1061 - <dt id=CSS3-CONDITIONAL>[CSS3-CONDITIONAL] 1.1062 - 1.1063 - <dd>L. David Baron. <a 1.1064 - href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/"><cite>CSS 1.1065 - Conditional Rules Module Level 3.</cite></a> 1 September 2011. W3C 1.1066 - Working Draft. (Work in progress.) URL: <a 1.1067 - href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/">http://www.w3.org/TR/2011/WD-css3-conditional-20110901/</a> 1.1068 - </dd> 1.1069 - <!----> 1.1070 - 1.1071 - <dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS] 1.1072 - 1.1073 - <dd>Dean Jackson; et al. <a 1.1074 - href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/"><cite>CSS 1.1075 - Transitions.</cite></a> 3 April 2012. W3C Working Draft. (Work in 1.1076 - progress.) URL: <a 1.1077 - href="http://www.w3.org/TR/2012/WD-css3-transitions-20120403/">http://www.w3.org/TR/2012/WD-css3-transitions-20120403/</a> 1.1078 - </dd> 1.1079 - <!----> 1.1080 - 1.1081 - <dt id=DOM-LEVEL-2-STYLE>[DOM-LEVEL-2-STYLE] 1.1082 - 1.1083 - <dd>Chris Wilson; Philippe Le Hégaret; Vidur Apparao. <a 1.1084 - href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113"><cite>Document 1.1085 - Object Model (DOM) Level 2 Style Specification.</cite></a> 13 November 1.1086 - 2000. W3C Recommendation. URL: <a 1.1087 - href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113">http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113</a> 1.1088 - </dd> 1.1089 - <!----> 1.1090 - 1.1091 - <dt id=MEDIAQ>[MEDIAQ] 1.1092 - 1.1093 - <dd>Florian Rivoal. <a 1.1094 - href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media 1.1095 - Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a 1.1096 - href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a> 1.1097 - </dd> 1.1098 - <!----> 1.1099 - 1.1100 - <dt id=SELECT>[SELECT] 1.1101 - 1.1102 - <dd>Tantek Çelik; et al. <a 1.1103 - href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors 1.1104 - Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a 1.1105 - href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a> 1.1106 - </dd> 1.1107 - <!----> 1.1108 - </dl> 1.1109 - <!--end-normative--> 1.1110 - 1.1111 - <h3 class=no-num id=other-references>Other references</h3> 1.1112 - <!--begin-informative--> 1.1113 - <!-- Sorted by label --> 1.1114 - 1.1115 - <dl class=bibliography> 1.1116 - <dt style="display: none"><!-- keeps the doc valid if the DL is empty --> 1.1117 - <!----> 1.1118 - 1.1119 - <dt id=CSS3PAGE>[CSS3PAGE] 1.1120 - 1.1121 - <dd>Håkon Wium Lie; Melinda Grant. <a 1.1122 - href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module: 1.1123 - Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in 1.1124 - progress.) URL: <a 1.1125 - href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a> 1.1126 - </dd> 1.1127 - <!----> 1.1128 - 1.1129 - <dt id=SVG11>[SVG11] 1.1130 - 1.1131 - <dd>Erik Dahlström; et al. <a 1.1132 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable 1.1133 - Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011. 1.1134 - W3C Recommendation. URL: <a 1.1135 - href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a> 1.1136 - </dd> 1.1137 - <!----> 1.1138 - </dl> 1.1139 - <!--end-informative--> 1.1140 - 1.1141 - <h2 class=no-num id=index>Index</h2> 1.1142 - <!--begin-index--> 1.1143 - 1.1144 - <ul class=indexlist> 1.1145 - <li>actual value, <a href="#actual-value" 1.1146 - title="actual value"><strong>5.4.</strong></a> 1.1147 - 1.1148 - <li>all, <a href="#all" title=all><strong>3.1.</strong></a> 1.1149 - 1.1150 - <li>cascaded value, <a href="#cascaded-value0" 1.1151 - title="cascaded value"><strong>4.2.4.</strong></a> 1.1152 - 1.1153 - <li>computed value, <a href="#computed-value" 1.1154 - title="computed value"><strong>5.2.</strong></a> 1.1155 - 1.1156 - <li>conditional import, <a href="#conditional-imports" 1.1157 - title="conditional import"><strong>2.</strong></a> 1.1158 - 1.1159 - <li>‘<a href="#atimport"><code class=css>@import</code></a>’, <a 1.1160 - href="#atimport" title="''@import''"><strong>2.</strong></a> 1.1161 - 1.1162 - <li>inherited properties, <a href="#inherited-properties" 1.1163 - title="inherited properties"><strong>4.3.2.</strong></a> 1.1164 - 1.1165 - <li>inherited property, <a href="#inherited-properties" 1.1166 - title="inherited property"><strong>4.3.2.</strong></a> 1.1167 - 1.1168 - <li>inherited value, <a href="#inherited-value" 1.1169 - title="inherited value"><strong>4.3.2.</strong></a> 1.1170 - 1.1171 - <li>initial value, <a href="#initial-value" 1.1172 - title="initial value"><strong>4.3.1.</strong></a> 1.1173 - 1.1174 - <li>media-dependent import, <a href="#conditional-imports" 1.1175 - title="media-dependent import"><strong>2.</strong></a> 1.1176 - 1.1177 - <li>output of the cascade, <a href="#output-of-the-cascade" 1.1178 - title="output of the cascade"><strong>4.2.</strong></a> 1.1179 - 1.1180 - <li>shorthand properties, <a href="#shorthand-properties" 1.1181 - title="shorthand properties"><strong>3.</strong></a> 1.1182 - 1.1183 - <li>specified value, <a href="#specified-value" 1.1184 - title="specified value"><strong>5.1.</strong></a> 1.1185 - 1.1186 - <li>used value, <a href="#used-value" 1.1187 - title="used value"><strong>5.3.</strong></a> 1.1188 - </ul> 1.1189 - <!--end-index--> 1.1190 - 1.1191 - <h2 class=no-num id=property-index>Property index</h2> 1.1192 - <!--begin-properties--> 1.1193 - 1.1194 - <table class=proptable> 1.1195 - <thead> 1.1196 - <tr> 1.1197 - <th>Property 1.1198 - 1.1199 - <th>Values 1.1200 - 1.1201 - <th>Initial 1.1202 - 1.1203 - <th>Applies to 1.1204 - 1.1205 - <th>Inh. 1.1206 - 1.1207 - <th>Percentages 1.1208 - 1.1209 - <th>Media 1.1210 - 1.1211 - <tbody> 1.1212 - <tr> 1.1213 - <th><a class=property href="#all">all</a> 1.1214 - 1.1215 - <td>initial | inherit | default 1.1216 - 1.1217 - <td>See individual properties 1.1218 - 1.1219 - <td>See individual properties 1.1220 - 1.1221 - <td>See individual properties 1.1222 - 1.1223 - <td>See individual properties 1.1224 - 1.1225 - <td>See individual properties 1.1226 - </table> 1.1227 - <!--end-properties--> 1.1228 +<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> 1.1229 +<html><head> 1.1230 +<title>302 Found</title> 1.1231 +</head><body> 1.1232 +<h1>Found</h1> 1.1233 +<p>The document has moved <a href="https://cgi.w3.org/member-bin/process.cgi">here</a>.</p> 1.1234 +</body></html>
2.1 --- a/css3-cascade/Overview.src.html Fri Nov 30 20:24:22 2012 -0800 2.2 +++ b/css3-cascade/Overview.src.html Sun Dec 02 09:55:19 2012 -0800 2.3 @@ -300,6 +300,7 @@ 2.4 <li>Important author declarations 2.5 <li>Animation declarations [[!CSS3-ANIMATIONS]] 2.6 <li>Normal override declarations [[!DOM-LEVEL-2-STYLE]] 2.7 + <li>Inline style attributes [[!CSSSTYLEATTR]] 2.8 <li>Normal author declarations 2.9 <li>Normal user declarations 2.10 <li>Normal user agent declarations 2.11 @@ -322,14 +323,20 @@ 2.12 2.13 <dt>Specificity 2.14 <dd> 2.15 - The <a href="http://www.w3.org/TR/selectors/#specificity">Selectors module</a> [[!SELECT]] and the <a href="http://www.w3.org/TR/css-style-attr/#interpret">Style Attributes module</a> [[CSS-STYLE-ATTR]] describe how to compute the specificity. 2.16 - The declaration with the highest specificity wins. 2.17 + The <a href="http://www.w3.org/TR/selectors/#specificity">Selectors module</a> [[!SELECT]] describes how to compute the specificity of a selector. 2.18 + For the purpose of this step, 2.19 + a ruleset without a selector 2.20 + (such as the contents of a style attribute) 2.21 + is considered to have a selector with specificity 0. 2.22 + The declaration belonging to a ruleset whose selector has the highest specificity wins. 2.23 + 2.24 2.25 <dt>Order of appearance. 2.26 <dd> 2.27 Rules from imported style sheets are treated as if their stylesheets were substituted in place of the ''@import'' rule. 2.28 Stylesheets independently linked by the originating document are treated as if they were concatenated in linking order, 2.29 as determined by the host document language. 2.30 + Style attributes are treated as if their rulesets were concatenated in document order, after any stylesheets. 2.31 The last declaration wins. 2.32 </dl> 2.33