[css3-cascade] Make style attrs a separate origin. Plug some holes in specificity and ordering regarding style attrs.

Sun, 02 Dec 2012 09:55:19 -0800

author
Tab Atkins <jackalmage@gmail.com>
date
Sun, 02 Dec 2012 09:55:19 -0800
changeset 7079
692c54ee5a46
parent 7078
71bf538648a4
child 7080
7bb5f7c099c3
child 7106
f8f9038adff3

[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>&lt;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  

mercurial