index.html 90.6 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang=en>
 <head>
  <title>CSS Values and Units Module Level 3</title>

  <style type="text/css">
    code, small { white-space: nowrap }
    .say { color: gray; }
    pre.value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
    #propvalues td { text-align: right; }
    #propvalues td + td { text-align: left; }
  </style>
  <link href=default.css rel=stylesheet type="text/css">
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
  type="text/css">

 <body>
  <div class=head> <!--begin-logo-->
   <p><a href="http://www.w3.org/"><img alt=W3C height=48
    src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

   <h1>CSS Values and Units Module Level 3</h1>

   <h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 6 September
    2011</h2>

   <dl>
    <dt>This version:

    <dd><a
     href="http://www.w3.org/TR/2011/WD-css3-values-20110906/">http://www.w3.org/TR/2011/WD-css3-values-20110906/</a>

    <dt>Latest version:

    <dd><a
     href="http://www.w3.org/TR/css3-values/">http://www.w3.org/TR/css3-values/</a>

    <dt>Previous version:

    <dd><a
     href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>

    <dt>Editors:

    <dd><a href="mailto:howcome@opera.com">H&aring;kon Wium Lie</a> (Opera
     Software)

    <dd><a href="http://www.xanthir.com/contact">Tab Atkins</a> (Google)

    <dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
     (Mozilla)
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2011 <a
    href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
    of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
    title="European Research Consortium for Informatics and
    Mathematics">ERCIM</acronym></a>, <a
    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
    <a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    and <a
    href="http://www.w3.org/Consortium/Legal/copyright-documents">document
    use</a> rules apply.</p>
   <!--end-copyright-->
   <hr title="Separator for header">
  </div>

  <h2 class="no-num no-toc" id=abstract>Abstract</h2>

  <p>This CSS3 module describes the various values and units that CSS
   properties accept. Also, it describes how values are computed from
   "specified" through "computed" and "used" into "actual" values. The main
   purpose of this module is to define common values and units in one
   specification which can be referred to by other modules. As such, it does
   not make sense to claim conformance with this module alone.

  <h2 class="no-num no-toc" id=status>Status of this document</h2>
  <!--begin-status-->

  <p><em>This section describes the status of this document at the time of
   its publication. Other documents may supersede this document. A list of
   current W3C publications and the latest revision of this technical report
   can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
   index at http://www.w3.org/TR/.</a></em>

  <p>Publication as a Working Draft does not imply endorsement by the W3C
   Membership. This is a draft document and may be updated, replaced or
   obsoleted by other documents at any time. It is inappropriate to cite this
   document as other than work in progress.

  <p>The (<a
   href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
   mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
   <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
   for discussion of this specification. When sending e-mail, please put the
   text &#8220;css3-values&#8221; in the subject, preferably like this:
   &#8220;[<!---->css3-values<!---->] <em>&hellip;summary of
   comment&hellip;</em>&#8221;

  <p>This document was produced by the <a
   href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
   the <a href="http://www.w3.org/Style/">Style Activity</a>).

  <p>This document was produced by a group operating under the <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
   2004 W3C Patent Policy</a>. W3C maintains a <a
   href="http://www.w3.org/2004/01/pp-impl/32061/status"
   rel=disclosure>public list of any patent disclosures</a> made in
   connection with the deliverables of the group; that page also includes
   instructions for disclosing a patent. An individual who has actual
   knowledge of a patent which the individual believes contains <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
   Claim(s)</a> must disclose the information in accordance with <a
   href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
   6 of the W3C Patent Policy</a>.</p>
  <!--end-status-->

  <p>All features described in this specification that also exist in CSS 2.1
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> are intended
   to be backwards compatible. In case of conflict between this draft and
   CSS&nbsp;2.1 <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, CSS&nbsp;2.1 probably
   represents the intention of the CSS WG better than this draft (other than
   on values and units that are new to CSS3).

  <p>The following features are at-risk and may be dropped during the CR
   period: &lsquo;<a href="#vh-unit"><code class=css>vh</code></a>&rsquo;,
   &lsquo;<a href="#vw-unit"><code class=css>vw</code></a>&rsquo;, &lsquo;<a
   href="#vm-unit"><code class=css>vm</code></a>&rsquo;, &lsquo;<a
   href="#fr-unit"><code class=css>fr</code></a>&rsquo;, &lsquo;<a
   href="#gr-unit"><code class=css>gr</code></a>&rsquo;, &lsquo;<code
   class=css>cycle()</code>&rsquo;, &lsquo;<code
   class=css>attr()</code>&rsquo;.

  <h2 class="no-num no-toc" id=contents>Table of contents</h2>
  <!--begin-toc-->

  <ul class=toc>
   <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
    <ul class=toc>
     <li><a href="#placement"><span class=secno>1.1. </span> Module
      Interactions</a>
    </ul>

   <li><a href="#value-defs"><span class=secno>2. </span> Value Definition
    Syntax</a>
    <ul class=toc>
     <li><a href="#component-types"><span class=secno>2.1. </span> Component
      value types</a>

     <li><a href="#component-combinators"><span class=secno>2.2. </span>
      Component value combinators</a>

     <li><a href="#component-multipliers"><span class=secno>2.3. </span>
      Component value multipliers</a>

     <li><a href="#component-whitespace"><span class=secno>2.4. </span>
      Component values and white space</a>

     <li><a href="#value-examples"><span class=secno>2.5. </span> Property
      value examples</a>
    </ul>

   <li><a href="#textual-values"><span class=secno>3. </span> Textual Data
    Types</a>
    <ul class=toc>
     <li><a href="#keywords"><span class=secno>3.1. </span> Pre-defined
      Keywords</a>
      <ul class=toc>
       <li><a href="#common-keywords"><span class=secno>3.1.1. </span>
        CSS-wide keywords: &lsquo;<code class=css>initial</code>&rsquo; and
        &lsquo;<code class=css>inherit</code>&rsquo;</a>
      </ul>

     <li><a href="#identifiers"><span class=secno>3.2. </span> User-defined
      Identifiers: the &lsquo;<code
      class=css>&lt;identifier&gt;</code>&rsquo; type</a>

     <li><a href="#strings"><span class=secno>3.3. </span> Quoted Strings:
      the &lsquo;<code class=css>&lt;string&gt;</code>&rsquo; type</a>

     <li><a href="#urls"><span class=secno>3.4. </span> Resource Locators:
      the &lsquo;<code class=css>&lt;url&gt;</code>&rsquo; type</a>
    </ul>

   <li><a href="#numeric-types"><span class=secno>4. </span> Numeric Data
    Types</a>
    <ul class=toc>
     <li><a href="#integers"><span class=secno>4.1. </span> Integers: the
      &lsquo;<code class=css>&lt;integer&gt;</code>&rsquo; type</a>

     <li><a href="#numbers"><span class=secno>4.2. </span> Numbers: the
      &lsquo;<code class=css>&lt;number&gt;</code>&rsquo; type</a>

     <li><a href="#percentages"><span class=secno>4.3. </span> Percentages:
      the &lsquo;<code class=css>&lt;percentage&gt;</code>&rsquo; type</a>
    </ul>

   <li><a href="#lengths"><span class=secno>5. </span> Distance Units: the
    &lsquo;<code class=css>&lt;length&gt;</code>&rsquo; type</a>
    <ul class=toc>
     <li><a href="#relative-lengths"><span class=secno>5.1. </span> Relative
      lengths</a>
      <ul class=toc>
       <li><a href="#font-relative-lengths"><span class=secno>5.1.1. </span>
        Font-relative lengths: the &lsquo;<code class=css>em</code>&rsquo;,
        &lsquo;<code class=css>ex</code>&rsquo;, &lsquo;<code
        class=css>ch</code>&rsquo;, &lsquo;<code class=css>rem</code>&rsquo;
        units</a>

       <li><a href="#viewport-relative-lengths"><span class=secno>5.1.2.
        </span> Viewport-relative lengths: the &lsquo;<code
        class=css>vw</code>&rsquo;, &lsquo;<code class=css>vh</code>&rsquo;,
        &lsquo;<code class=css>vm</code>&rsquo; units</a>
      </ul>

     <li><a href="#absolute-lengths"><span class=secno>5.2. </span> Absolute
      lengths: the &lsquo;<code class=css>cm</code>&rsquo;, &lsquo;<code
      class=css>mm</code>&rsquo;, &lsquo;<code class=css>in</code>&rsquo;,
      &lsquo;<code class=css>pt</code>&rsquo;, &lsquo;<code
      class=css>pc</code>&rsquo;, &lsquo;<code class=css>px</code>&rsquo;
      units</a>
    </ul>

   <li><a href="#other-units"><span class=secno>6. </span> Other Units</a>
    <ul class=toc>
     <li><a href="#angles"><span class=secno>6.1. </span> Angles: the
      &lsquo;<code class=css>&lt;angle&gt;</code>&rsquo; type and
      &lsquo;<code class=css>deg</code>&rsquo;, &lsquo;<code
      class=css>grad</code>&rsquo;, &lsquo;<code class=css>rad</code>&rsquo;,
      &lsquo;<code class=css>turn</code>&rsquo; units</a>

     <li><a href="#time"><span class=secno>6.2. </span> Times: the
      &lsquo;<code class=css>&lt;time&gt;</code>&rsquo; type and &lsquo;<code
      class=css>s</code>&rsquo;, &lsquo;<code class=css>ms</code>&rsquo;
      units</a>

     <li><a href="#frequencies-the-ltfrequencygt-type-and-h"><span
      class=secno>6.3. </span>Frequencies: the &lsquo;<code
      class=css>&lt;frequency&gt;</code>&rsquo; type and &lsquo;<code
      class=css>Hz</code>&rsquo;, &lsquo;<code class=css>kHz</code>&rsquo;
      units</a>
    </ul>

   <li><a href="#defined-elsewhere"><span class=secno>7. </span> Data Types
    Defined Elsewhere</a>
    <ul class=toc>
     <li><a href="#colors"><span class=secno>7.1. </span> Colors: the
      &lsquo;<code class=css>&lt;color&gt;</code>&rsquo; type</a>

     <li><a href="#images"><span class=secno>7.2. </span> Images: the
      &lsquo;<code class=css>&lt;image&gt;</code>&rsquo; type</a>
    </ul>

   <li><a href="#layout-values"><span class=secno>8. </span> Layout-specific
    Data Types</a>
    <ul class=toc>
     <li><a href="#proportions"><span class=secno>8.1. </span> Proportions:
      the &lsquo;<code class=css>&lt;fraction&gt;</code>&rsquo; type and
      &lsquo;<code class=css>fr</code>&rsquo; unit</a>

     <li><a href="#grids"><span class=secno>8.2. </span> Grid Units: the
      &lsquo;<code class=css>&lt;grid&gt;</code>&rsquo; type and &lsquo;<code
      class=css>gr</code>&rsquo; unit</a>
    </ul>

   <li><a href="#functional-notation"><span class=secno>9. </span> Functional
    Notations</a>
    <ul class=toc>
     <li><a href="#calc"><span class=secno>9.1. </span> Calculations:
      &lsquo;<code class=css>calc()</code>&rsquo;, &lsquo;<code
      class=css>min()</code>&rsquo; and &lsquo;<code
      class=css>max()</code>&rsquo;</a>

     <li><a href="#cycle"><span class=secno>9.2. </span> Cycling Values:
      &lsquo;<code class=css>cycle()</code>&rsquo;</a>

     <li><a href="#attr"><span class=secno>9.3. </span> Attribute References:
      &lsquo;<code class=css>attr()</code>&rsquo;</a>
    </ul>

   <li><a href="#value-stages"><span class=secno>10. </span> Stages of Value
    Computation</a>
    <ul class=toc>
     <li><a href="#specified"><span class=secno>10.1. </span> Finding the
      specified value</a>

     <li><a href="#computed"><span class=secno>10.2. </span> Finding the
      computed value</a>

     <li><a href="#finding-the-used-value"><span class=secno>10.3.
      </span>Finding the used value</a>

     <li><a href="#actual"><span class=secno>10.4. </span> Finding the actual
      value</a>

     <li><a href="#stages-examples"><span class=secno>10.5. </span>
      Examples</a>
    </ul>

   <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   <li class=no-num><a href="#references">References</a>
    <ul class=toc>
     <li class=no-num><a href="#normative-references">Normative
      references</a>

     <li class=no-num><a href="#other-references">Other references</a>
    </ul>

   <li class=no-num><a href="#index">Index</a>
  </ul>
  <!--end-toc-->

  <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

  <p>The value definition field of each CSS property can contain keywords,
   data types (which appear between &lsquo;<code class=css>&lt;</code>&rsquo;
   and &lsquo;<code class=css>></code>&rsquo;), and information on how they
   can be combined. Generic data types (<a
   href="#length-value"><code>&lt;length&gt;</code></a> being the most widely
   used) that can be used by many properties are described in this
   specification, while more specific data types (e.g.,
   <code>&lt;spacing-limit&gt;</code>) are described in the corresponding
   modules.

  <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>

  <p>This module replaces and extends the data type definitions in <a
   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <a
   href="http://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, <a
   href="http://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>, and <a
   href="http://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>.

  <h2 id=value-defs><span class=secno>2. </span> Value Definition Syntax</h2>

  <p>The syntax described here is used to define the set of valid values for
   CSS properties. A property value can have one or more components.

  <h3 id=component-types><span class=secno>2.1. </span> Component value types</h3>

  <p>Component value types are designated in several ways:

  <ol>
   <li><a href="#keywords">keyword</a> values (such as &lsquo;<code
    class=css>auto</code>&rsquo;, &lsquo;<code class=css>disc</code>&rsquo;,
    etc.), which appear literally, without quotes (e.g. <code>auto</code>)

   <li>basic data types, which appear between &lsquo;<code
    class=css>&lt;</code>&rsquo; and &lsquo;<code
    class=css>&gt;</code>&rsquo; (e.g., <a
    href="#length-value"><code>&lt;length&gt;</code></a>, <a
    href="#percentage-value"><code>&lt;percentage&gt;</code></a>, etc.).

   <li>types that have the same range of values as a property bearing the
    same name (e.g., <code>&lt;'border-width'&gt;</code>
    <code>&lt;'background-attachment'&gt;</code>, etc.). In this case, the
    type name is the property name (complete with quotes) between the
    brackets. Such a type does <em>not</em> include the value &lsquo;<code
    class=property>inherit</code>&rsquo;.

   <li>non-terminals that do not share the same name as a property. In this
    case, the non-terminal name appears between &lsquo;<code
    class=css>&lt;</code>&rsquo; and &lsquo;<code
    class=css>&gt;</code>&rsquo;, as in <code>&lt;spacing-limit&gt;</code>.
    Notice the distinction between <code>&lt;border-width&gt;</code> and
    <code>&lt;'border-width'&gt;</code>: the latter is defined as the value
    of the &lsquo;<code class=property>border-width</code>&rsquo; property,
    the former requires an explicit expansion elsewhere. The definition of a
    non-terminal is located near its first appearance in the specification.
  </ol>

  <p>Some property value definitions also include the slash (/) and/or the
   comma (,) as literals. These represent their corresponding tokens.

  <p>All CSS properties also accept the keyword values &lsquo;<code
   class=css>inherit</code>&rsquo; and &lsquo;<code
   class=css>initial</code>&rsquo; as their property value, but for
   readability these are not listed explicitly in the property value syntax
   definitions. These keywords cannot be combined with other component values
   in same declaration; such a declaration is invalid. For example,
   &lsquo;<code class=css>background: url(corner.png) no-repeat,
   inherit;</code>&rsquo; is invalid.

  <h3 id=component-combinators><span class=secno>2.2. </span> Component value
   combinators</h3>

  <p>Component values can be arranged into property values as follows:

  <ul>
   <li>Several juxtaposed words mean that all of them must occur, in the
    given order.

   <li>A double ampersand (&&) separates two or more components, all of which
    must occur, in any order.

   <li>A double bar (||) separates two or more options: one or more of them
    must occur, in any order.

   <li>A bar (|) separates two or more alternatives: exactly one of them must
    occur.

   <li>Brackets ([&nbsp;]) are for grouping.
  </ul>

  <p>Juxtaposition is stronger than the double ampersand, the double
   ampersand is stronger than the double bar, and the double bar is stronger
   than the bar. Thus, the following lines are equivalent:

  <pre>
<!---->  a b   |   c ||   d &&   e f
<!---->[ a b ] | [ c || [ d && [ e f ]]]</pre>

  <h3 id=component-multipliers><span class=secno>2.3. </span> Component value
   multipliers</h3>

  <p>Every type, keyword, or bracketed group may be followed by one of the
   following modifiers:

  <ul>
   <li>An asterisk (*) indicates that the preceding type, word, or group
    occurs zero or more times.

   <li>A plus (+) indicates that the preceding type, word, or group occurs
    one or more times.

   <li>A question mark (?) indicates that the preceding type, word, or group
    is optional.

   <li>A pair of numbers in curly braces ({<var>A</var>,<var>B</var>})
    indicates that the preceding type, word, or group occurs at least
    <var>A</var> and at most <var>B</var> times.

   <li>A hash mark (#) indicates that the preceding type, word, or group
    occurs one or more times, separated by comma tokens.
  </ul>

  <h3 id=component-whitespace><span class=secno>2.4. </span> Component values
   and white space</h3>

  <p>Component values are specified in terms of tokens, as described in <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">Chapter 4</a>
   of <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. As the
   grammar allows spaces between tokens in the components of the
   <code>value</code> production, spaces may appear between tokens in
   property values.

  <p class=note>Note: In many cases, spaces will in fact be <em>required</em>
   between tokens in order to distinguish them from each other. For example,
   the value &lsquo;<code class=css>1em2em</code>&rsquo; would be parsed as a
   single <code>DIMEN</code> token with the number &lsquo;<code
   class=css>1</code>&rsquo; and the identifier &lsquo;<code
   class=css>em2em</code>&rsquo;, which is an invalid unit. In this case, a
   space would be required before the &lsquo;<code class=css>2</code>&rsquo;
   to get this parsed as the two lengths &lsquo;<code
   class=css>1em</code>&rsquo; and &lsquo;<code class=css>2em</code>&rsquo;.

  <h3 id=value-examples><span class=secno>2.5. </span> Property value
   examples</h3>

  <p>Below are some examples of properties with their corresponding value
   definition fields

  <div class=example>
   <table class=data id=propvalues>
    <thead>
     <tr>
      <th>Property

      <th>Value definition field

      <th>Example value

    <tbody>
     <tr>
      <td>&lsquo;<code class=property>orphans</code>&rsquo;

      <td>&lt;integer&gt;

      <td>&lsquo;<code class=css>3</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>text-align</code>&rsquo;

      <td>left | right | center | justify

      <td>&lsquo;<code class=css>center</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>padding-top</code>&rsquo;

      <td>&lt;length&gt; | &lt;percentage&gt;

      <td>&lsquo;<code class=css>5%</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>outline-color</code>&rsquo;

      <td>&lt;color&gt; | invert

      <td>&lsquo;<code class=css>#fefefe</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>text-decoration</code>&rsquo;

      <td>none | underline || overline || line-through || blink

      <td>&lsquo;<code class=css>overline underline</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>font-family</code>&rsquo;

      <td>&lt;family-name&gt;#

      <td>&lsquo;<code class=css>"Gill Sans", Futura,
       sans-serif</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>border-width</code>&rsquo;

      <td>[ &lt;length&gt; | thick | medium | thin ]{1,4}

      <td>&lsquo;<code class=css>2px medium 4px</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>text-shadow</code>&rsquo;

      <td>[ inset? && [ &lt;length&gt;{2,4} && &lt;color&gt;? ] ]# | none

      <td>&lsquo;<code class=css>3px 3px rgba(50%, 50%, 50%, 50%),
       lemonchiffon 0 0 4px inset</code>&rsquo;

     <tr>
      <td>&lsquo;<code class=property>voice-pitch</code>&rsquo;

      <td>
       <pre class=value>&lt;frequency> && absolute |
<!--				      -->[[x-low | low | medium | high | x-high] ||
<!--				      --> [&lt;frequency> | &lt;semitones> | &lt;percentage>]]</pre>

      <td>&lsquo;<code class=css>-2st x-low</code>&rsquo;
   </table>
  </div>

  <h2 id=textual-values><span class=secno>3. </span> Textual Data Types</h2>

  <p>An <dfn id=identifier>identifier</dfn> is a sequence of characters
   conforming to the <code>IDENT</code> token in the <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Identifiers
   cannot be quoted; otherwise they would be interpreted as a string.

  <h3 id=keywords><span class=secno>3.1. </span> Pre-defined Keywords</h3>

  <p>In the value definition fields, keywords with a pre-defined meaning
   appear literally. Keywords are CSS <i>identifiers</i> and are interpreted
   case-insensitively within the ASCII range (i.e., [a-z] and [A-Z] are
   equivalent).

  <div class=example>
   <p>For example, here is the value definition for the &lsquo;<code
    class=property>border-collapse</code>&rsquo; property:</p>

   <pre>Value:&nbsp;collapse | separate</pre>

   <p>And here is an example of its use:</p>

   <pre>table { border-collapse: separate }</pre>
  </div>

  <h4 id=common-keywords><span class=secno>3.1.1. </span> CSS-wide keywords:
   &lsquo;<code class=css>initial</code>&rsquo; and &lsquo;<code
   class=css>inherit</code>&rsquo;</h4>

  <p>As defined <a href="#component-types">above</a>, all properties accept
   the &lsquo;<code class=css>initial</code>&rsquo; and &lsquo;<code
   class=css>inherit</code>&rsquo; keywords, which represent value
   computations common to all CSS properties.

  <p>The <dfn id=inherit>&lsquo;<code class=css>inherit</code>&rsquo;</dfn>
   keyword is <a
   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">defined</a>
   in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.

  <p>The <dfn id=initial>&lsquo;<code class=css>initial</code>&rsquo;</dfn>
   keyword represents the specified value that is designated as the
   property's initial value. <a href="#CSS3CASCADE"
   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>

  <p class=issue>Should these keywords affect the specified or computed
   value? See <a
   href="http://lists.w3.org/Archives/Public/www-style/2011Jan/0075.html">various</a>
   <a
   href="http://lists.w3.org/Archives/Public/www-style/2011May/0402.html">issues</a>.


  <p class=issue>Would it be useful to have a value defined to be equivalent
   to <a class=css href="#inherit">&lsquo;<code
   class=property>inherit</code>&rsquo;</a> for properties that are inherited
   by default and equivalent to <a class=css href="#initial">&lsquo;<code
   class=property>initial</code>&rsquo;</a> for properties that are not
   inherited by default? This might be easier for authors to use than <a
   class=css href="#initial">&lsquo;<code
   class=property>initial</code>&rsquo;</a> and <a class=css
   href="#inherit">&lsquo;<code class=property>inherit</code>&rsquo;</a>
   since it wouldn't require thinking about whether a property is inherited
   by default or not (which isn't obvious for some properties, such as
   text-decoration and visibility).

  <p class=issue>It's been requested to have a value that rolls back to the
   bottom of that level of the cascade, e.g. for an author rule it would roll
   back to the end of the user cascade, for a user rule it would roll back to
   the end of the UA cascade, and for the UA it would roll back to
   &lsquo;<code class=css>initial</code>&rsquo;/&lsquo;<code
   class=css>inherit</code>&rsquo;. Is that something we should add?

  <h3 id=identifiers><span class=secno>3.2. </span> User-defined Identifiers:
   the &lsquo;<a href="#identifier-value"><code
   class=css>&lt;identifier&gt;</code></a>&rsquo; type</h3>

  <p>Some properties accept arbitrary user-defined identifiers as a component
   value. This generic data type is denoted by <dfn
   id=identifier-value><code>&lt;identifier&gt;</code></dfn>, and represents
   any valid CSS <a href="#identifier"><i>identifier</i></a> that does not
   otherwise appear as a pre-defined keyword in that property's value
   definition. Such identifiers are fully case-sensitive, even in the ASCII
   range (e.g. &lsquo;<code class=css>example</code>&rsquo; and &lsquo;<code
   class=css>EXAMPLE</code>&rsquo; are two different, unrelated user-defined
   identifiers).

  <h3 id=strings><span class=secno>3.3. </span> Quoted Strings: the &lsquo;<a
   href="#string-value"><code class=css>&lt;string&gt;</code></a>&rsquo; type</h3>

  <p>Strings are denoted by <dfn
   id=string-value><code>&lt;string&gt;</code></dfn> and consist of a
   sequence of characters delimited by double quotes or single quotes. They
   correspond to the <code>STRING</code> token in the <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  <div class=example>
   <p>Double quotes cannot occur inside double quotes, unless escaped (as
    &lsquo;<code class=css>\"</code>&rsquo; or as &lsquo;<code
    class=css>\22</code>&rsquo;). Analogously for single quotes
    ("\&lsquo;<code class=css>" or "\27"). </code>

   <pre>
<!-- -->content: "this is a &rsquo;string'.";
<!-- -->content: "this is a \"string\".";
<!-- -->content: &lsquo;<code class=css>this is a "string".</code>&rsquo;;
<!-- -->content: &lsquo;<code class=css>this is a \</code>&rsquo;string\&lsquo;<code class=css>.</code>&rsquo;;</pre>
  </div>

  <p>It is possible to break strings over several lines, for aesthetic or
   other reasons, but in such a case the newline itself has to be escaped
   with a backslash (\). The newline is subsequently removed from the string.
   For instance, the following two selectors are exactly the same:

  <div class=example>
   <p style="display:none">Example(s):</p>

   <pre>
<!-- -->a[title="a not s\
<!-- -->o very long title"] {/*...*/}
<!-- -->a[title="a not so very long title"] {/*...*/}</pre>
  </div>

  <p>Since a string cannot directly represent a newline, to include a newline
   in a string, use the escape "\A". (Hexadecimal A is the line feed
   character in Unicode (U+000A), but represents the generic notion of
   "newline" in CSS.)

  <h3 id=urls><span class=secno>3.4. </span> Resource Locators: the &lsquo;<a
   href="#url-value"><code class=css>&lt;url&gt;</code></a>&rsquo; type</h3>

  <p>A <dfn id=url>URL</dfn> is a pointer to a resource and is a <a
   href="http://www.w3.org/TR/CSS21/syndata.html#uri">specially-parsed</a> <a
   href="#functional-notation">functional notation</a> denoted by <dfn
   id=url-value><code>&lt;url&gt;</code></dfn>. It corresponds to the
   <code>URI</code> token in the <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>

  <div class=example>
   <p>Below is an example of a URL being used as a background image:

   <pre>body { background: url("http://www.example.com/pinkish.gif") }</pre>

   <p>The same example can be written without quotes:

   <pre>body { background: url(http://www.example.com/pinkish.gif) }</pre>
  </div>

  <p class=note>Note that in some CSS syntactic contexts (as defined by that
   context), a URL can be represented as a <a
   href="#string-value"><code>&lt;string&gt;</code></a> rather than by <a
   href="#url-value"><code>&lt;URL&gt;</code></a>. An example of this is the
   <a href="http://www.w3.org/TR/CSS21/cascade.html#at-import">&lsquo;<code
   class=css>@import</code>&rsquo; rule</a>.

  <p>Parentheses, whitespace characters, single quotes (&lsquo;<code
   class=css>) and double quotes (") appearing in a URL must be escaped with
   a backslash so that the resulting value is a valid <a
   href="#url"><code>URL</code></a> token, e.g.
   </code>&rsquo;url(open\(parens)&lsquo;<code class=css>,
   </code>&rsquo;url(close\)parens)&lsquo;<code class=css>. Depending on the
   type of URL, it might also be possible to write these characters as
   URI-escapes (where <code>(</code> = <code>%28</code>, <code>)</code> =
   <code>%29</code>, etc.) as described in <a href="#URI"
   rel=biblioentry>[URI]<!--{{URI}}--></a>. Alternatively a URL containing
   such characters may be represented as a quoted <a
   href="#strings">string</a> within the </code>&rsquo;&lsquo;<a
   href="#url"><code class=css>url()</code></a>&rsquo;&lsquo;<code class=css>
   notation. </code>

  <p>In order to create modular style sheets that are not dependent on the
   absolute location of a resource, authors should use relative URIs.
   Relative URIs (as defined in <a href="#URI"
   rel=biblioentry>[URI]<!--{{URI}}--></a>) are resolved to full URIs using a
   base URI. RFC&nbsp;3986, section&nbsp;3, defines the normative algorithm
   for this process. For CSS style sheets, the base URI is that of the style
   sheet, not that of the source document.

  <div class=example>
   <p>For example, suppose the following rule:

   <pre>body { background: url("tile.png") }</pre>

   <p>is located in a style sheet designated by the URL:</p>

   <pre>http://www.example.org/style/basic.css</pre>

   <p>The background of the source document&rsquo;s <code>&lt;body&gt;</code>
    will be tiled with whatever image is described by the resource designated
    by the URL:

   <pre>http://www.example.org/style/tile.png</pre>

   <p>The same image will be used regardless of the URL of the source
    document containing the <code>&lt;body&lt;</code>.
  </div>

  <h2 id=numeric-types><span class=secno>4. </span> Numeric Data Types</h2>

  <h3 id=integers><span class=secno>4.1. </span> Integers: the &lsquo;<a
   href="#integer-value"><code class=css>&lt;integer&gt;</code></a>&rsquo;
   type</h3>

  <p>Integer values are denoted by <dfn
   id=integer-value><code>&lt;integer&gt;</code></dfn>. An <dfn
   id=integer>integer</dfn> is one or more decimal digits &lsquo;<code
   class=css>0</code>&rsquo; through &lsquo;<code class=css>9</code>&rsquo;
   and corresponds to a subset of the <a
   href="#number"><code>NUMBER</code></a> token in the <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
   Integers may be immediately preceded by &lsquo;<code
   class=css>-</code>&rsquo; or &lsquo;<code class=css>+</code>&rsquo; to
   indicate the sign.

  <p>Properties may restrict the integer value to some range. If the value is
   outside the allowed range, the declaration is invalid and must be <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

  <h3 id=numbers><span class=secno>4.2. </span> Numbers: the &lsquo;<a
   href="#number-value"><code class=css>&lt;number&gt;</code></a>&rsquo; type</h3>

  <p>Number values are denoted by <dfn
   id=number-value><code>&lt;number&gt;</code></dfn>. A <dfn
   id=number>number</dfn> is either an <a href="#integer"><i>integer</i></a>,
   or zero or more decimal digits followed by a dot (.) followed by one or
   more decimal digits. It corresponds to the <a
   href="#number"><code>NUMBER</code></a> token in the <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
   Like integers, numbers may also be immediately preceded by &lsquo;<code
   class=css>-</code>&rsquo; or &lsquo;<code class=css>+</code>&rsquo; to
   indicate the sign.

  <p>Properties may restrict the number value to some range. If the value is
   outside the allowed range, the declaration is invalid and must be <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

  <h3 id=percentages><span class=secno>4.3. </span> Percentages: the
   &lsquo;<a href="#percentage-value"><code
   class=css>&lt;percentage&gt;</code></a>&rsquo; type</h3>

  <p>A percentage value is denoted by <dfn
   id=percentage-value><code>&lt;percentage&gt;</code></dfn>, consists of a
   <a href="#number-value"><i>&lt;number&gt;</i></a> immediately followed by
   a percent sign &lsquo;<code class=css>%</code>&rsquo;. It corresponds to
   the <code>PERCENTAGE</code> token in the <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.

  <p>Percentage values are always relative to another value, for example a
   length. Each property that allows percentages also defines the value to
   which the percentage refers. The value may be that of another property for
   the same element, a property for an ancestor element, or a value of the
   formatting context (e.g., the width of a <i>containing block</i>). When a
   percentage value is set for a property of the <i>root</i> element and the
   percentage is defined as referring to the inherited value of some
   property, the resultant value is the percentage times the <i>initial
   value</i> of that property.

  <p>Properties may restrict the percentage value to some range. If the value
   is outside the allowed range, the declaration is invalid and must be <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

  <h2 id=lengths><span class=secno>5. </span> Distance Units: the &lsquo;<a
   href="#length-value"><code class=css>&lt;length&gt;</code></a>&rsquo; type</h2>

  <p>Lengths refer to distance measurements and are denoted by <dfn
   id=length-value><code>&lt;length&gt;</code></dfn> in the property
   definitions. A length is a <a href="#dimension"><i>dimension</i></a>. A
   zero length may be represented instead as the <a
   href="#number-value"><code>&lt;number&gt;</code></a> &lsquo;<code
   class=css>0</code>&rsquo;. (In other words, for zero lengths the unit
   identifier is optional.)

  <p>A <dfn id=dimension>dimension</dfn> is a <a
   href="#number"><i>number</i></a> immediately followed by a unit
   identifier. It corresponds to the <a
   href="#dimension"><code>DIMENSION</code></a> token in the <a
   href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>.
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Like
   keywords, unit identifiers are case-insensitive within the ASCII range.

  <p>Properties may restrict the length value to some range. If the value is
   outside the allowed range, the declaration is invalid and must be <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

  <p>While some properties allow negative length values, this may complicate
   the formatting and there may be implementation-specific limits. If a
   negative length value is allowed but cannot be supported, it must be
   converted to the nearest value that can be supported.

  <p>In cases where the <a href="#used-value">used</a> length cannot be
   supported, user agents must approximate it in the <a
   href="#actual-value">actual</a> value.

  <p>There are two types of length units: relative and absolute.

  <h3 id=relative-lengths><span class=secno>5.1. </span> Relative lengths</h3>

  <p><dfn id=relative-length-units title="relative length">Relative length
   units</dfn> specify a length relative to another length. Style sheets that
   use relative units can more easily scale from one output environment to
   another.

  <p>The relative units are:

  <table class=data>
   <caption>Informative Summary of Relative Units</caption>

   <thead>
    <tr>
     <th>unit

     <th>relative to

   <tbody>
    <tr>
     <td>&lsquo;<a href="#em-unit"><code class=css>em</code></a>&rsquo;

     <td>font size of the element

    <tr>
     <td>&lsquo;<a href="#ex-unit"><code class=css>ex</code></a>&rsquo;

     <td><i>x-height</i> of the element's font

    <tr>
     <td>&lsquo;<a href="#ch-unit"><code class=css>ch</code></a>&rsquo;

     <td>width of the "0" glyph in the element's font

    <tr>
     <td>&lsquo;<a href="#rem-unit"><code class=css>rem</code></a>&rsquo;

     <td>font size of the root element

    <tr>
     <td>&lsquo;<a href="#vw-unit"><code class=css>vw</code></a>&rsquo;

     <td>viewport's width

    <tr>
     <td>&lsquo;<a href="#vh-unit"><code class=css>vh</code></a>&rsquo;

     <td>viewport's height

    <tr>
     <td>&lsquo;<a href="#vm-unit"><code class=css>vm</code></a>&rsquo;

     <td>minimum of the viewport's height and width
  </table>

  <p>Child elements do not inherit the relative values as specified for their
   parent; they inherit the <a href="#computed-value">computed values</a>.

  <h4 id=font-relative-lengths><span class=secno>5.1.1. </span> Font-relative
   lengths: the &lsquo;<a href="#em-unit"><code
   class=css>em</code></a>&rsquo;, &lsquo;<a href="#ex-unit"><code
   class=css>ex</code></a>&rsquo;, &lsquo;<a href="#ch-unit"><code
   class=css>ch</code></a>&rsquo;, &lsquo;<a href="#rem-unit"><code
   class=css>rem</code></a>&rsquo; units</h4>

  <p>Aside from &lsquo;<a href="#rem-unit"><code
   class=css>rem</code></a>&rsquo; (which refers to the font-size of the root
   element), the font-relative lengths refer to the computed font metrics of
   the element on which they are used. The exception is when they occur in
   the value of the &lsquo;<code class=property>font-size</code>&rsquo;
   property itself, in which case they refer to the font metrics of the
   parent element (or the font metrics corresponding to the initial values of
   the &lsquo;<code class=property>font</code>&rsquo; property, if the
   element has no parent).

  <dl>
   <dt><dfn id=em-unit title=em>em unit</dfn>

   <dd>
    <p>Equal to the computed value of the &lsquo;<code
     class=property>font-size</code>&rsquo; property of the element on which
     it is used.

    <div class=example>
     <p>The rule:</p>

     <pre>h1 { line-height: 1.2em }</pre>

     <p>means that the line height of <code>h1</code> elements will be 20%
      greater than the font size of <code>h1</code> element. On the other
      hand:

     <pre>h1 { font-size: 1.2em }</pre>

     <p>means that the font size of <code>h1</code> elements will be 20%
      greater than the font size inherited by <code>h1</code> elements.</p>
    </div>

   <dt><dfn id=ex-unit title=ex>ex unit</dfn>

   <dd>
    <p>Equal to the font's x-height. The x-height is so called because it is
     often equal to the height of the lowercase "x". However, an &lsquo;<a
     href="#ex-unit"><code class=css>ex</code></a>&rsquo; is defined even for
     fonts that do not contain an "x".

    <p>The x-height of a font can be found in different ways. Some fonts
     contain reliable metrics for the x-height. If reliable font metrics are
     not available, UAs may determine the x-height from the height of a
     lowercase glyph. One possible heuristic is to look at how far the glyph
     for the lowercase "o" extends below the baseline, and subtract that
     value from the top of its bounding box. In the cases where it is
     impossible or impractical to determine the x-height, a value of 0.5em
     must be assumed.

   <dt><dfn id=ch-unit title=ch>ch unit</dfn>

   <dd>
    <p>Equal to the advance measure of the "0" (ZERO, U+0030) glyph found in
     the font used to render it.

   <dt><dfn id=rem-unit title=rem>rem unit</dfn>

   <dd>
    <p>Equal to the computed value of &lsquo;<code
     class=property>font-size</code>&rsquo; on the root element.

    <p>When specified on the &lsquo;<code
     class=property>font-size</code>&rsquo; property of the root element, the
     &lsquo;<a href="#rem-unit"><code class=css>rem</code></a>&rsquo; units
     refer to the property's <em>initial value</em>.</p>
  </dl>

  <h4 id=viewport-relative-lengths><span class=secno>5.1.2. </span>
   Viewport-relative lengths: the &lsquo;<a href="#vw-unit"><code
   class=css>vw</code></a>&rsquo;, &lsquo;<a href="#vh-unit"><code
   class=css>vh</code></a>&rsquo;, &lsquo;<a href="#vm-unit"><code
   class=css>vm</code></a>&rsquo; units</h4>

  <p>The viewport-relative lengths are relative to the size of the initial
   containing block. When the height or width of the viewport is changed,
   they are scaled proportionally.

  <dl>
   <dt><dfn id=vw-unit title=vw>vw unit</dfn>

   <dd>Equal to 1/100th of the width of the initial containing block.
    <div class=example>
     <p>In the example below, if the width of the viewport is 200mm, the font
      size of <code>h1</code> elements will be 16mm (i.e.
      (8&times;200mm)/100).

     <pre>h1 { font-size: 8vw }</pre>
    </div>

   <dt><dfn id=vh-unit title=vh>vh unit</dfn>

   <dd>Equal to 1/100th of the height of the initial containing block.

   <dt><dfn id=vm-unit title=vm>vm unit</dfn>

   <dd>Equal to the smaller of &lsquo;<a href="#vw-unit"><code
    class=css>vw</code></a>&rsquo; or &lsquo;<a href="#vh-unit"><code
    class=css>vh</code></a>&rsquo;.
    <p class=issue>Do we need this now that we have the min() function?
  </dl>

  <h3 id=absolute-lengths><span class=secno>5.2. </span> Absolute lengths:
   the &lsquo;<code class=css>cm</code>&rsquo;, &lsquo;<code
   class=css>mm</code>&rsquo;, &lsquo;<code class=css>in</code>&rsquo;,
   &lsquo;<code class=css>pt</code>&rsquo;, &lsquo;<code
   class=css>pc</code>&rsquo;, &lsquo;<code class=css>px</code>&rsquo; units</h3>

  <p>The <dfn id=absolute-length-units>absolute length units</dfn> are fixed
   in relation to each other and anchored to some physical measurement. They
   are mainly useful when the output environment is known. The absolute units
   consist of the physical units (in, cm, mm, pt, pc) and the px unit:

  <table class=data>
   <thead>
    <tr>
     <th>unit

     <th>definition

   <tbody>
    <tr>
     <td>&lsquo;<code class=css>cm</code>&rsquo;

     <td>centimeters

    <tr>
     <td>&lsquo;<code class=css>mm</code>&rsquo;

     <td>millimeters

    <tr>
     <td>&lsquo;<code class=css>in</code>&rsquo;

     <td>inches; 1in is equal to 2.54cm

    <tr>
     <td>&lsquo;<code class=css>px</code>&rsquo;

     <td>pixels; 1px is equal to 1/96th of 1in

    <tr>
     <td>&lsquo;<code class=css>pt</code>&rsquo;

     <td>points; 1pt is equal to 1/72nd of 1in

    <tr>
     <td>&lsquo;<code class=css>pc</code>&rsquo;

     <td>picas; 1pc is equal to 12pt
  </table>

  <pre class=example>
h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */</pre>

  <p>For a CSS device, these dimensions are either anchored (i) by relating
   the physical units to their physical measurements, or (ii) by relating the
   pixel unit to the <a href="#reference-pixel"><i>reference pixel</i></a>.
   For print media and similar high-resolution devices, the anchor unit
   should be one of the standard physical units (inches, centimeters, etc).
   For lower-resolution devices, and devices with unusual viewing distances,
   it is recommended instead that the anchor unit be the pixel unit. For such
   devices it is recommended that the pixel unit refer to the whole number of
   device pixels that best approximates the reference pixel.

  <p class=note>Note that if the anchor unit is the pixel unit, the physical
   units might not match their physical measurements. Alternatively if the
   anchor unit is a physical unit, the pixel unit might not map to a whole
   number of device pixels.

  <p class=note>Note that this definition of the pixel unit and the physical
   units differs from previous versions of CSS. In particular, in previous
   versions of CSS the pixel unit and the physical units were not related by
   a fixed ratio: the physical units were always tied to their physical
   measurements while the pixel unit would vary to most closely match the
   reference pixel. (This change was made because too much existing content
   relies on the assumption of 96dpi, and breaking that assumption breaks the
   content.)

  <p>The <dfn id=reference-pixel>reference pixel</dfn> is the visual angle of
   one pixel on a device with a pixel density of 96dpi and a distance from
   the reader of an arm's length. For a nominal arm's length of 28 inches,
   the visual angle is therefore about 0.0213 degrees. For reading at arm's
   length, 1px thus corresponds to about 0.26&nbsp;mm (1/96&nbsp;inch).

  <p>The image below illustrates the effect of viewing distance on the size
   of a reference pixel: a reading distance of 71&nbsp;cm (28&nbsp;inches)
   results in a reference pixel of 0.26&nbsp;mm, while a reading distance of
   3.5&nbsp;m (12&nbsp;feet) results in a reference pixel of 1.3&nbsp;mm.

  <div class=figure>
   <p><img alt="This diagram illustrates how the definition of a pixel
    depends on the users distance from the viewing surface (paper or screen).
    The image depicts the user looking at two planes, one 28 inches (71 cm)
    from the user, the second 140 inches (3.5 m) from the user. An expanding
    cone is projected from the user's eye onto each plane. Where the cone
    strikes the first plane, the projected pixel is 0.26 mm high. Where the
    cone strikes the second plane, the projected pixel is 1.4 mm high."
    src=pixel1.png>

   <p class=caption>Showing that pixels must become larger if the viewing
    distance increases
  </div>

  <p>This second image illustrates the effect of a device's resolution on the
   pixel unit: an area of 1px by 1px is covered by a single dot in a
   low-resolution device (e.g. a typical computer display), while the same
   area is covered by 16 dots in a higher resolution device (such as a
   printer).

  <div class=figure>
   <p><img alt="This diagram illustrates the relationship between the
    reference pixel and device pixels (called &#34;dots&#34; below). The
    image depicts a high resolution (large dot density) laser printer output
    on the left and a low resolution monitor screen on the right. For the
    laser printer, one square reference pixel is implemented by 16 dots. For
    the monitor screen, one square reference pixel is implemented by a single
    dot." src=pixel2.png>

   <p class=caption>Showing that more device pixels (dots) are needed to
    cover a 1px by 1px area on a high-resolution device than on a low-res one

  </div>

  <h2 id=other-units><span class=secno>6. </span> Other Units</h2>

  <h3 id=angles><span class=secno>6.1. </span> Angles: the &lsquo;<a
   href="#angle-value"><code class=css>&lt;angle&gt;</code></a>&rsquo; type
   and &lsquo;<a href="#deg"><code class=css>deg</code></a>&rsquo;, &lsquo;<a
   href="#grad"><code class=css>grad</code></a>&rsquo;, &lsquo;<a
   href="#rad"><code class=css>rad</code></a>&rsquo;, &lsquo;<a
   href="#turn"><code class=css>turn</code></a>&rsquo; units</h3>

  <p>Angle values are <i>dimensions</i> denoted by <dfn
   id=angle-value>&lt;angle&gt;</dfn>. The angle unit identifiers are:

  <dl>
   <dt><dfn id=deg title=deg>deg</dfn>

   <dd>Degrees. There are 360 degrees in a full circle.

   <dt><dfn id=grad title=grad>grad</dfn>

   <dd>Gradians. There are 400 gradians in a full circle.

   <dt><dfn id=rad title=rad>rad</dfn>

   <dd>Radians. There are 2&pi; radians in a full circle. <span
    class=issue>Who is going to use this anyway?</span>

   <dt><dfn id=turn title=turn>turn</dfn>

   <dd>Turns. There is 1 turn in a full circle.
  </dl>

  <p>For example, a right angle is &lsquo;<code class=css>90deg</code>&rsquo;
   or &lsquo;<code class=css>100grad</code>&rsquo; or &lsquo;<code
   class=css>0.25turn</code>&rsquo; or approximately &lsquo;<code
   class=css>1.570796326794897rad</code>&rsquo;.

  <h3 id=time><span class=secno>6.2. </span> Times: the &lsquo;<a
   href="#time-value"><code class=css>&lt;time&gt;</code></a>&rsquo; type and
   &lsquo;<a href="#s"><code class=css>s</code></a>&rsquo;, &lsquo;<a
   href="#ms"><code class=css>ms</code></a>&rsquo; units</h3>

  <p>Time values are <i>dimensions</i> denoted by <dfn
   id=time-value>&lt;time&gt;</dfn>. The time unit identifiers are:

  <dl>
   <dt><dfn id=s title=s>s</dfn>

   <dd>Seconds.

   <dt><dfn id=ms title=ms>ms</dfn>

   <dd>Milliseconds. There are 1000 milliseconds in a second.
  </dl>

  <p>Properties may restrict the time value to some range. If the value is
   outside the allowed range, the declaration is invalid and must be <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

  <h3 id=frequencies-the-ltfrequencygt-type-and-h><span class=secno>6.3.
   </span>Frequencies: the &lsquo;<a href="#frequency-value"><code
   class=css>&lt;frequency&gt;</code></a>&rsquo; type and &lsquo;<a
   href="#hz"><code class=css>Hz</code></a>&rsquo;, &lsquo;<a
   href="#khz"><code class=css>kHz</code></a>&rsquo; units</h3>

  <p>Frequency values are <i>dimensions</i> denoted by <dfn
   id=frequency-value>&lt;frequency&gt;</dfn>. The frequency unit identifiers
   are:

  <dl>
   <dt><dfn id=hz title=Hz>Hz</dfn>

   <dd>Hertz. It represents the number of occurrences per second.

   <dt><dfn id=khz title=kHz>kHz</dfn>

   <dd>KiloHertz. A kiloHertz is 1000 Hertz.
  </dl>

  <p>For example, when representing sound pitches, 200Hz (or 200hz) is a bass
   sound, and 6kHz (or 6khz) is a treble sound.

  <h2 id=defined-elsewhere><span class=secno>7. </span> Data Types Defined
   Elsewhere</h2>

  <p>Some data types are defined in their own modules. The two common ones
   are <a href="#color-value"><code>&lt;color&gt;</code></a> and <a
   href="#image-value"><code>&lt;image&gt;</code></a>.

  <h3 id=colors><span class=secno>7.1. </span> Colors: the &lsquo;<a
   href="#color-value"><code class=css>&lt;color&gt;</code></a>&rsquo; type</h3>

  <p>The <dfn id=color-value><code>&lt;color&gt;</code></dfn> data type is <a
   href="http://www.w3.org/TR/CSS21/syndata.html#color-units">defined</a> in
   <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a
   href="http://www.w3.org/TR/css3-color/#colorunits">extended</a> in <a
   href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>.
   UAs that support CSS Color Level 3 must interpret <a
   href="#color-value"><code>&lt;color&gt;</code></a> as defined therein.

  <h3 id=images><span class=secno>7.2. </span> Images: the &lsquo;<a
   href="#image-value"><code class=css>&lt;image&gt;</code></a>&rsquo; type</h3>

  <p>The <dfn id=image-value><code>&lt;image&gt;</code></dfn> data type is
   defined herein as equivalent to <a
   href="#url-value"><code>&lt;url&gt;</code></a>. It is <a
   href="http://www.w3.org/TR/css3-images/#image">extended</a> in <a
   href="#CSS3-IMAGES"
   rel=biblioentry>[CSS3-IMAGES]<!--{{!CSS3-IMAGES}}--></a>: UAs that support
   CSS Image Values Level 3 must interpret <a
   href="#image-value"><code>&lt;image&gt;</code></a> as defined therein.

  <h2 id=layout-values><span class=secno>8. </span> Layout-specific Data
   Types</h2>

  <h3 id=proportions><span class=secno>8.1. </span> Proportions: the
   &lsquo;<code class=css>&lt;fraction&gt;</code>&rsquo; type and &lsquo;<a
   href="#fr-unit"><code class=css>fr</code></a>&rsquo; unit</h3>

  <p>The <dfn id=fr-unit title=fr>fr unit</dfn> is used to represent
   proportions, such as the proportions used to distribute remaining space in
   a flex layout computation. <a href="#CSS3-FLEXBOX"
   rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a> When multiple
   fractions participate in a calculation, the remainder is distributed
   proportionally to their numeric value.

  <div class=example>
   <pre>
<!-- -->border-parts: 10px 1fr 10px;
<!-- -->border-parts: 10px 1fr 10px 1fr 10px;
<!-- -->border-parts: 10px 2fr 10px 2fr 10px;</pre>
  </div>

  <h3 id=grids><span class=secno>8.2. </span> Grid Units: the &lsquo;<code
   class=css>&lt;grid&gt;</code>&rsquo; type and &lsquo;<a
   href="#gr-unit"><code class=css>gr</code></a>&rsquo; unit</h3>

  <p>A grid is a set of invisible vertical and horizontal lines that can be
   used to align content. In CSS, grid lines can be established implicitly
   (as in <a href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>)
   or explicitly (as in <a href="#CSS3GRID"
   rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a>). In either case, the
   distance between grid lines can be referred to by the <dfn id=gr-unit
   title=gr>&lsquo;<code class=css>gr</code>&rsquo; unit</dfn>.

  <div class=example>
   <pre>
<!-- -->img {
<!-- -->  float: top left multicol;
<!-- -->  float-offset: 2gr;
<!-- -->  width: 1gr;
<!-- -->}</pre>
  </div>

  <p>Grid lines can be laid out in uneven patterns. Therefore, the &lsquo;<a
   href="#gr-unit"><code class=css>gr</code></a>&rsquo; unit is not linear.
   For example, "2gr" is not necessarily twice as long as "1gr".

  <h2 id=functional-notation><span class=secno>9. </span> Functional
   Notations</h2>

  <p>Some values use a <dfn id=functional-notation0>functional notation</dfn>
   to type values and to and lump values together. The syntax starts with the
   name of the function immediately followed by a left parenthesis followed
   by optional whitespace followed by the argument(s) to the notation
   followed by optional whitespace followed by a right parenthesis. If a
   function takes more than one argument, the arguments are separated by a
   comma (&lsquo;<code class=css>,</code>&rsquo;) with optional whitespace
   before and after the comma.

  <pre class=example>
<!-- -->background: url(http://www.example.org/image);
<!-- -->color: rgb(100, 200, 50 );
<!-- -->content: counter(list-item) ". ";
<!-- -->width: calc(50% - 2em);</pre>

  <h3 id=calc><span class=secno>9.1. </span> Calculations: &lsquo;<a
   href="#calc0"><code class=css>calc()</code></a>&rsquo;, &lsquo;<a
   href="#min"><code class=css>min()</code></a>&rsquo; and &lsquo;<a
   href="#max"><code class=css>max()</code></a>&rsquo;</h3>

  <p>The <dfn id=calc0>calc()</dfn>, <dfn id=min>min()</dfn>, and <dfn
   id=max>max()</dfn> functions can be used wherever <a
   href="#length-value"><code>&lt;length&gt;</code></a>, <a
   href="#frequency-value"><code>&lt;frequency&gt;</code></a>, <a
   href="#angle-value"><code>&lt;angle&gt;</code></a>, <a
   href="#time-value"><code>&lt;time&gt;</code></a>, or <a
   href="#number-value"><code>&lt;number&gt;</code></a> values are allowed.

  <div class=example>
   <pre>
section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}
</pre>
  </div>

  <div class=example>
   <pre>
p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}
</pre>
  </div>

  <div class=example>
   <pre>
p { font-size: min(10px, 3em) }
blockquote { font-size: max(30px, 3em) }
</pre>
  </div>

  <div class=example>
   <pre>
.box { width: min(10% + 20px, 300px) }
</pre>
  </div>

  <p>The expression language of these functions is described by the grammar
   and prose below.

  <pre>
S       : calc | min | max;
calc    : "calc(" S* sum ")" S*;
min     : "min(" S* sum [ "," S* sum ]* ")" S*;
max     : "max(" S* sum [ "," S* sum ]* ")" S*;
sum     : product [ [ "+" | "-" ] S* product ]*;
product : unit [ [ "*" | "/" | "mod" ] S* unit ]*;
unit    : ["+"|"-"]? [ NUMBER S* | DIMENSION S* | PERCENTAGE S* |
          min | max | "(" S* sum ")" S* ];
</pre>

  <p>The context of the expression imposes a target type, which is one of
   length, frequency, angle, time, or number. NUMBER tokens are of type
   number. DIMENSION tokens have types of their units (&lsquo;<code
   class=property>cm</code>&rsquo; is length, &lsquo;<a href="#deg"><code
   class=property>deg</code></a>&rsquo; is angle etc.); any DIMENSION whose
   type does not match the target type causes the &lsquo;<a
   href="#calc0"><code class=css>calc()</code></a>&rsquo; expression to be
   invalid. If percentages are accepted in that context and convertible to
   the target type, a PERCENTAGE token in the expression has the target type;
   otherwise percentages are likewise invalid.

  <p>To make expressions simpler, operators have restrictions on the types
   they accept. At each operator, the types of the left and right side are be
   checked for these restrictions. If compatible, they return roughly as
   follows (the following ignores precedence rules on the operators for
   simplicity):

  <ol>
   <li>At ",", "+", "-":<br>
    check: both sides have the same type<br>
    return: that type

   <li>At "*":<br>
    check: at least one side is "number" <br>
    return: the type of the other side

   <li>At "/":<br>
    check: right side is "number"<br>
    return: the type of the left side
  </ol>

  <p>Division by zero is not allowed. Declarations containing such a
   construct are invalid and must be <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

  <p>The value resulting from an expression must be clamped to the range
   allowed in the target context.

  <p class=note>Note this requires all contexts accepting &lsquo;<a
   href="#calc0"><code class=css>calc()</code></a>&rsquo; to define their
   allowable values as a closed (not open) interval.

  <div class=example> These two are equivalentequivalent to &lsquo;<code
   class=css>width: 0px</code>&rsquo; since widths smaller than 0px are not
   allowed.
   <pre>
width: calc(5px - 10px);
width: 0px;
</pre>
  </div>

  <p>Given the complexities of &lsquo;<code
   class=property>width</code>&rsquo; and &lsquo;<code
   class=property>height</code>&rsquo; on table cells and table elements,
   calc() expressions for widths and heights on table columns, table column
   groups, table rows, table row groups, and table cells in both auto and
   fixed layout tables may be treated as if &lsquo;<code
   class=property>auto</code>&rsquo; had been specified.

  <h3 id=cycle><span class=secno>9.2. </span> Cycling Values: &lsquo;<code
   class=css>cycle()</code>&rsquo;</h3>

  <p>The <dfn id=cycle0>&lsquo;<code class=css>cycle()</code>&rsquo;</dfn>
   expression allows descendant elements to cycle over a list of values
   instead of inheriting the same value. The syntax of the &lsquo;<code
   class=css>cycle()</code>&rsquo; expression is:

  <pre>cycle( &lt;value&gt;# )</pre>

  <p>where <code>&lt;value&gt;</code> is a CSS value that is valid where the
   expression is placed. If any of the values inside are not valid, then the
   entire &lsquo;<code class=css>cycle()</code>&rsquo; expression is invalid.


  <p>The value returned by &lsquo;<code class=css>cycle()</code>&rsquo; must
   be determined by comparing the inherited value <var>I</var> (the computed
   value on the parent, or, for the root, the initial value) to the computed
   values <var>C<sub>n</sub></var> returned by the <var>n</var>-th argument
   to &lsquo;<code class=css>cycle()</code>&rsquo;. For the earliest
   <var>C<sub>n</sub></var> such that <var>C<sub>n</sub></var> =
   <var>I</var>, the value returned by cycle is <var>C<sub>n+1</sub></var>.
   However, if this <var>C<sub>n</sub></var> is the last value, or if there
   are no <var>C<sub>n</sub></var> that equal <var>I</var>, the computed
   value of the first value is returned instead.

  <pre class=example>
  /* make em elements italic, but make them normal if they're inside
     something that's italic */
  em { font-style: cycle(italic, normal); }</pre>

  <pre class=example>
  /* cycle between markers for nested lists, so that the top level has
     disk markers, but nested lists use circle, square, box, and then
     (for the 5th list deep) repeat */
  ul { list-style-type: disk; }
  li > ul { list-style-type: cycle(disk, circle, square, box); }</pre>

  <p>The &lsquo;<code class=css>cycle()</code>&rsquo; notation is not allowed
   to be nested; nor may it contain &lsquo;<code
   class=css>attr()</code>&rsquo;, &lsquo;<a href="#calc0"><code
   class=css>calc()</code></a>&rsquo;, &lsquo;<a href="#min"><code
   class=css>min()</code></a>&rsquo;, or &lsquo;<a href="#max"><code
   class=css>max()</code></a>&rsquo; notations. Declarations containing such
   constructs are invalid and must be <a
   href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>.

  <h3 id=attr><span class=secno>9.3. </span> Attribute References:
   &lsquo;<code class=css>attr()</code>&rsquo;</h3>

  <p class=issue>Describe the feature fully here, not just a delta from CSS
   21.

  <p class=issue>When attr is set on a pseudo-element, it should apply to the
   originating element

  <p>In CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
   the &lsquo;<code class=css>attr()</code>&rsquo; expression always returns
   a string. In CSS3, the &lsquo;<code class=css>attr()</code>&rsquo;
   expression can return many different types. The new syntax for the attr()
   expression is:

  <pre>
'attr(' ident [ ',' &lt;type> [ ',' &lt;value> ]? ]? ')'
</pre>

  <p>The first argument represents the attribute name. The value of the
   attribute with that name on the element whose computed values are being
   computed is used as the value of the expression, according to the rules
   given below.

  <p>The first argument accepts an optional namespace prefix to identify the
   namespace of the attribute. The namespace prefix and the attribute name is
   separated by &lsquo;<code class=css>|</code>&rsquo;, with no whitespace
   before or after the separator <a href="#CSS3NAMESPACE"
   rel=biblioentry>[CSS3NAMESPACE]<!--{{CSS3NAMESPACE}}--></a>.

  <p>The second argument (which is optional but must be present if the third
   argument is present) is a &lt;type> and tells the UA how to interpret the
   attribute value. It may be one of the values from the list below.

  <p>The third argument (which is optional) is a CSS value which must be
   valid where the attr() expression is placed. If it is not valid, then the
   whole attr() expression is invalid.

  <p>If the attribute named by the first argument is missing, cannot be
   parsed, or is invalid for the property, then the value returned by attr()
   will be the third argument, or, if the third argument is absent, will be
   the value given as the default for the relevant type in the list below.

  <dl>
   <dt>string

   <dd>The attribute value will be interpreted as the contents of a CSS
    string. The default is the empty string.

   <dt>color

   <dd>The attribute value will be interpreted as a CSS &lt;color> value. The
    default is UA dependent but must be the same as the initial value of the
    &lsquo;<code class=property>color</code>&rsquo; property.

   <dt>url

   <dd>The attribute value will be interpreted as the URI part of a &lsquo;<a
    href="#url"><code class=css>url()</code></a>&rsquo; expression. The
    default is a UA-dependent URI defined to point to a non-existent document
    with a generic error condition. (i.e. it shouldn't be an FTP URI that
    causes a DNS error, or an HTTP URI that results in a 404, it should be a
    nondescript error condition.)

   <dt>integer

   <dd>The attribute value will be interpreted as a CSS integer. The default
    is 0. The default should also be used if the property in question only
    accepts integers within a certain range and the attribute is out of
    range.

   <dt>number

   <dd>The attribute value will be interpreted as a CSS number. The default
    is 0.0. The default should also be used if the property in question only
    accepts numbers within a certain range and the attribute is out of range.


   <dt>length, angle, time, frequency

   <dd>The attribute value will be interpreted as a CSS length, angle, time
    or frequency (respectively), and the unit identifier (if any) will appear
    in the attribute value. The default is 0. The default should also be used
    if the property in question only accepts values within a certain range
    (e.g. positive lengths or angles from 0 to 90deg) and the attribute is
    out of range (e.g. a negative length or 180deg).

   <dt>em, ex, px, gr, rem, vw, vh, vm, mm, cm, in, pt, pc, deg, grad, rad,
    ms, s, Hz, kHz, %

   <dd>The attribute value will be interpreted as a float, with the given
    type suffixed as a unit. The default is 0 in the relevant units.
  </dl>

  <p class=issue>Should there also be a "keyword" type to, e.g., support
   &lsquo;<code class=css>float: attr(align)</code>&rsquo;

  <p>If the &lt;type> is missing, &lsquo;<code
   class=property>string</code>&rsquo; is implied.

  <p class=issue>Ideally, it shouldn't be necessary to specify the type if it
   is obvious. For example, this should be valid: "<tt>background-image:
   attr(href);</tt>". This could be described as: <q>If the property only
   accepts one type of value (aside from &lsquo;<code
   class=property>inherit</code>&rsquo; and &lsquo;<code
   class=property>initial</code>&rsquo;), that type is implied</q>.

  <p>The attr() form is only valid if the type given (or implied, if it is
   missing) is valid for the property. For example, all of the following are
   invalid and would cause a parse-time error (and thus cause the relevant
   declaration, in this case all of them, to be ignored):

  <div class="illegal example">
   <p style="display:none">Illegal Examples:

   <pre>
      content: attr(title, color); /* 'content' doesn't accept colors */

      content: attr(end-of-quote, string, inherit) close-quote; /* the
      'inherit' value is not allowed there, since the result would be
      'inherit close-quote', which is invalid. */

      margin: attr(vertical, length) attr(horizontal, deg); /* deg
      units are not valid at that point */
<!--
      font: attr(weight, integer) attr(size, length)/attr(height,
      integer) attr(family, string); /* invalid because
      &lt;'font-weight'>s are not integers, but identifiers. */
-->
      color: attr(color); /* 'color' doesn't accept strings */
</pre>
  </div>

  <p>The attr() expression cannot return everything, for example it cannot do
   counters, named strings, quotes, or values such as &lsquo;<code
   class=property>auto</code>&rsquo;, &lsquo;<code
   class=property>nowrap</code>&rsquo;, or &lsquo;<code
   class=property>baseline</code>&rsquo;. This is intentional, as the intent
   of the &lsquo;<code class=css>attr()</code>&rsquo; expression is not to
   make it possible to describe a presentational language's formatting using
   CSS, but to enable CSS to take semantic data into account.

  <p>Note that the default value need not be of the type given. For instance,
   if the type required of the attribute by the author is &lsquo;<code
   class=property>px</code>&rsquo;, the default could still be &lsquo;<code
   class=css>5em</code>&rsquo;.

  <div class=example>
   <p>Examples:

   <pre>
      &lt;stock>
        &lt;wood length="12"/>
        &lt;wood length="5"/>
        &lt;metal length="19"/>
        &lt;wood length="4"/>
      &lt;/stock>

      stock::before {
        display: block;
        content: "To scale, the lengths of materials in stock are:";
      }
      stock > * {
        display: block;
        width: attr(length, em); /* default 0 */
        height: 1em;
        border: solid thin;
        margin: 0.5em;
      }
      wood {
        background: orange url(wood.png);
      }
      metal {
        background: silver url(metal.png);
      }

      /* this also uses a possible extension to the 'content' property
      to handle replaced content and alternatives to unavailable,
      corrupted or unsupported content */
      img {
         content: replaced attr(src, url), attr(alt, string, none);
         height: attr(height, px, auto);
         width: attr(width, px, auto);
      }
</pre>
  </div>

  <p>The attr() expression cannot currently fall back onto another attribute.
   Future versions of CSS may extend attr() in this direction.

  <p class=issue>Should &lsquo;<code class=css>attr()</code>&rsquo; be
   allowed on any property, in any source language? For example, do we expect
   UAs to honor this rule for HTML documents?: <tt>P[COLOR] { color:
   attr(COLOR, color) }</tt>. <!--
<h4>The 'counter' function</h4>

<p><dfn title="&lt;counter&gt;, definition of">Counters</dfn> are denoted by
identifiers (see the <span class="property">'counter-increment'</span> and
<span class="property">'counter-reset'</span> properties). To refer to the
value of a counter, the notation <dfn>'counter(&lt;identifier&gt;)'</dfn> or
<dfn>'counter(&lt;identifier&gt;, &lt;list-style-type&gt;)'</dfn> is used.
The default style is 'decimal'.</p>

<p>To refer to a sequence of nested counters of the same name, the notation
is 'counters(&lt;identifier&gt;, &lt;string&gt;)' or
'counters(&lt;identifier&gt;, &lt;string&gt;, &lt;list-style-type&gt;)'. See
"Nested counters and scope" [add ref] in the chapter on generated content
[add ref].</p>

<p>In CSS2.1, the values of counters can only be referred to from the <span
class="property">'content'</span> property. Note that 'none' is a possible
&lt;list-style-type&gt;: 'counter(x, none)' yields an empty string.</p>

<div class="example">
<p style="display:none">Example(s):</p>

<p>Here is a style sheet that numbers paragraphs (P) for each chapter (H1).
The paragraphs are numbered with roman numerals, followed by a period and a
space:</p>

<pre>
p { counter-increment: par-num }
h1 { counter-reset: par-num }
p:before { content: counter(par-num, upper-roman) ". " }
</pre>
</div>
-->
   <!--

<h3>Special cases</h3>

<p>Two common types of values fall outside the types
described above: the value for font families and the hexadecimal color
notation.

<h4>Font families</h4>

<p>The <span class="property">'font'</span>
and <span class="property">'font-family'</span> properties accept a
comma-separated list of font families. Font families can either be the
name of a certain font, or it can be one of
five <em class="index">generic font families</em>: 'serif',
'sans-serif', 'cursive','fantasy', and 'monospace'. Font family names
are like strings, except that the quotes around them may be omitted.
If quoting is omitted, any white space characters before and after the
font name are ignored and any sequence of white space characters
inside the font name is converted to a single space. Font family names
that happen to be the same as a keyword value (e.g. 'initial',
'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy',
and 'cursive') must be quoted to prevent confusion with the keywords
with the same names. UAs must not consider these keywords as matching
the ''&lt;family-name&gt;'' type.

<p>Generic font family names are keywords and must not be quoted.

<div class="example">
<pre>body { font-family: "Helvetica", "Univers", "Arial", sans-serif }</pre>
</div>
-->


  <h2 id=value-stages><span class=secno>10. </span> Stages of Value
   Computation</h2>

  <p class=issue>Shouldn't this section move to <a href="#CSS3CASCADE"
   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>?

  <p>Once a user agent has parsed a document and constructed a document tree,
   it must assign, for every element in the tree, a value to every property
   that applies to the target media type.

  <p>The final value of a CSS3 property for a given element is the result of
   a four-step calculation:

  <ul>
   <li>First, cascading and inheritance yields the <a
    href="#specified-value0"><i>specified value</i></a>.

   <li>Second, relative values are computed into absolute values as far as
    possible without formatting the document, thereby yielding the <a
    href="#computed-value"><i>computed value</i></a>.

   <li>The computed value is transformed into the <a
    href="#used-value0"><i>used value</i></a> in the formatting process.

   <li>Finally, the computed value is transformed to the <a
    href="#actual-value"><i>actual value</i></a> based on constraints of
    local environment.
  </ul>

  <h3 id=specified><span class=secno>10.1. </span> Finding the <dfn
   id=specified-value>specified value</dfn></h3>

  <p>The <dfn id=specified-value0>specified value</dfn> is the output of the
   <a href="http://www.w3.org/TR/CSS21/cascade.html">cascading and
   inheritance process</a>. <a href="#CSS21"
   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3CASCADE"
   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>

  <p class=note>If the output of the cascade is &lsquo;<code
   class=css>inherit</code>&rsquo; or &lsquo;<code
   class=css>initial</code>&rsquo;, the specified value contains the
   inherited or initial value, respectively. See examples (d) and (e) in the
   <a href="#stages-examples">table below</a>.

  <p>The cascading and inheritance process guarantees that a <a
   href="#specified-value0"><i>specified value</i></a> exists for every
   property on every element.

  <h3 id=computed><span class=secno>10.2. </span> Finding the computed value</h3>

  <p>A <a href="#specified-value0"><i>specified value</i></a> can be either
   absolute (i.e., not relative to another value, as in &lsquo;<code
   class=property>red</code>&rsquo; or &lsquo;<code
   class=css>2mm</code>&rsquo;) or relative (i.e., relative to another value,
   as in &lsquo;<code class=property>auto</code>&rsquo;, &lsquo;<code
   class=css>2em</code>&rsquo;).

  <p>For absolute values, no extra processing is needed to find the computed
   value. For relative values, on the other hand, computation is necessary to
   find the computed value: percentages must be multiplied by a reference
   value (each property defines which value that is), values with relative
   units (em, ex, vh, vw) must be made absolute by multiplying with the
   appropriate reference size, certain keywords (e.g., &lsquo;<code
   class=property>smaller</code>&rsquo;, &lsquo;<code
   class=property>bolder</code>&rsquo;) must be replaced according to their
   definitions, and valid relative URLs must be resolved to become absolute.
   See examples (f), (g) and (h) in the <a href="#stages-examples">table
   below</a>.

  <p>The <dfn id=computed-value>computed value</dfn> is the result of
   resolving the <a href="#specified-value0"><i>specified value</i></a>
   insofar as possible without formatting the document, as defined in the
   "Computed value" line of the property definition tables.

  <p class=note>The <a href="#computed-value"><i>computed value</i></a> is
   the value that is transferred from parent to child during inheritance.

  <p>The computed value exists even when the property does not apply (as
   defined by the &lsquo;<code class=css>Applies To</code>&rsquo; line).
   However, some properties may define the computed value of a property for
   an element to depend on whether the property applies to that element.

  <h3 id=finding-the-used-value><span class=secno>10.3. </span>Finding the
   <dfn id=used-value>used value</dfn></h3>

  <p><i>Computed values</i> are processed as far as possible without
   formatting the document. Some values, however, can only be determined when
   the document is being laid out. For example, if the width of an element is
   set to be a certain percentage of its containing block, the width cannot
   be determined until the width of the containing block has been determined.
   The <dfn id=used-value0>used value</dfn> is the result of taking the <a
   href="#computed-value"><i>computed value</i></a> and resolving any
   remaining dependencies into an absolute value.

  <h3 id=actual><span class=secno>10.4. </span> Finding the actual value</h3>

  <p>A <a href="#used-value0"><i>used value</i></a> is in principle ready to
   be used, but a user agent may not be able to make use of the value in a
   given environment. For example, a user agent may only be able to render
   borders with integer pixel widths and may therefore have to approximate
   the computed width. Also, the font size of an element may need adjustment
   based on the availability of fonts or the value of the &lsquo;<code
   class=property>font-size-adjust</code>&rsquo; property. The <dfn
   id=actual-value>actual value</dfn> is the used value after any such
   approximations have been made.

  <p class=note> By probing the actual values of elements, much can be
   learned about how the document is laid out. However, not all information
   is recorded in the actual values. For example, the actual value of the
   &lsquo;<code class=property>page-break-after</code>&rsquo; property does
   not reflect whether there is a page break or not after the element.
   Similarly, the actual value of &lsquo;<code
   class=property>orphans</code>&rsquo; does not reflect how many orphan
   lines there is in a certain element. See examples (j) and (k) in the <a
   href="#stages-examples">table below</a>.

  <h3 id=stages-examples><span class=secno>10.5. </span> Examples</h3>

  <table class=data>
   <thead>
    <tr>
     <th>

     <th>Property

     <th>Winning declaration <!--  <th>Cascaded value  -->

     <th>Specified value

     <th>Computed value

     <th>Used value

     <th>Actual value

   <tbody>
    <tr>
     <td>(a)

     <th>&lsquo;<code class=property>text-align</code>&rsquo;

     <td><code class=declaration>text-align: left</code>
      <!--  <td>''left''-->

     <td>&lsquo;<code class=css>left</code>&rsquo;

     <td>&lsquo;<code class=css>left</code>&rsquo;

     <td>&lsquo;<code class=css>left</code>&rsquo;

     <td>&lsquo;<code class=css>left</code>&rsquo;

    <tr>
     <td>(b)

     <th>&lsquo;<code class=property>border-top-width</code>&rsquo;,
      &lsquo;<code class=property>border-right-width</code>&rsquo;,
      &lsquo;<code class=property>border-bottom-width</code>&rsquo;,
      &lsquo;<code class=property>border-left-width</code>&rsquo;

     <td><code class=declaration>border-width: inherit</code>
      <!--  <td>''inherit'' -->

     <td class=say>&lsquo;<code class=css>4.2px</code>&rsquo;

     <td>&lsquo;<code class=css>4.2px</code>&rsquo;

     <td>&lsquo;<code class=css>4.2px</code>&rsquo;

     <td>&lsquo;<code class=css>4px</code>&rsquo;

    <tr>
     <td>(c)

     <th>&lsquo;<code class=property>width</code>&rsquo;

     <td><small>(none)</small> <!--  <td><small>(none)</small>-->

     <td>&lsquo;<code class=css>auto</code>&rsquo;
      <small>(initial&nbsp;value)</small>

     <td>&lsquo;<code class=css>auto</code>&rsquo;

     <td>&lsquo;<code class=css>120px</code>&rsquo;

     <td>&lsquo;<code class=css>120px</code>&rsquo;

    <tr>
     <td>(d)

     <th>&lsquo;<code class=property>list-style-position</code>&rsquo;

     <td><code class=declaration>list-style-position: inherit</code>
      <!--  <td>''inherit'' -->

     <td class=say>&lsquo;<code class=css>inside</code>&rsquo;

     <td>&lsquo;<code class=css>inside</code>&rsquo;

     <td>&lsquo;<code class=css>inside</code>&rsquo;

     <td>&lsquo;<code class=css>inside</code>&rsquo;

    <tr>
     <td>(e)

     <th>&lsquo;<code class=property>list-style-position</code>&rsquo;

     <td><code class=declaration>list-style-position: initial</code>
      <!--  <td>''initial''-->

     <td>&lsquo;<code class=css>outside</code>&rsquo;
      <small>(initial&nbsp;value)</small>

     <td>&lsquo;<code class=css>outside</code>&rsquo;

     <td>&lsquo;<code class=css>outside</code>&rsquo;

     <td>&lsquo;<code class=css>outside</code>&rsquo;

    <tr>
     <td>(f)

     <th>&lsquo;<code class=property>font-size</code>&rsquo;

     <td><code class=declaration>font-size: 1.2em</code>
      <!--  <td>''1.2em''-->

     <td>&lsquo;<code class=css>1.2em</code>&rsquo;

     <td class=say>&lsquo;<code class=css>14.1px</code>&rsquo;

     <td>&lsquo;<code class=css>14.1px</code>&rsquo;

     <td>&lsquo;<code class=css>14px</code>&rsquo;

    <tr>
     <td>(g)

     <th>&lsquo;<code class=property>width</code>&rsquo;

     <td><code class=declaration>width: 80%</code> <!--  <td>''80%''-->

     <td>&lsquo;<code class=css>80%</code>&rsquo;

     <td>&lsquo;<code class=css>80%</code>&rsquo;

     <td class=say>&lsquo;<code class=css>354.2px</code>&rsquo;

     <td>&lsquo;<code class=css>354px</code>&rsquo;

    <tr>
     <td>(h)

     <th>&lsquo;<code class=property>width</code>&rsquo;

     <td><code class=declaration>width: auto</code> <!--  <td>''auto''-->

     <td>&lsquo;<code class=css>auto</code>&rsquo;

     <td>&lsquo;<code class=css>auto</code>&rsquo;

     <td class=say>&lsquo;<code class=css>134px</code>&rsquo;

     <td>&lsquo;<code class=css>134px</code>&rsquo;

    <tr>
     <td>(i)

     <th>&lsquo;<code class=property>height</code>&rsquo;

     <td><code class=declaration>height: auto</code> <!--  <td>''auto''-->

     <td>&lsquo;<code class=css>auto</code>&rsquo;

     <td>&lsquo;<code class=css>auto</code>&rsquo;

     <td class=say>&lsquo;<code class=css>176px</code>&rsquo;

     <td>&lsquo;<code class=css>176px</code>&rsquo;

    <tr>
     <td>(j)

     <th>&lsquo;<code class=property>page-break-after</code>&rsquo;

     <td><small>(none)</small> <!--  <td><small>(none)</small>-->

     <td>&lsquo;<code class=css>auto</code>&rsquo;
      <small>(initial&nbsp;value)</small>

     <td>&lsquo;<code class=css>auto</code>&rsquo;

     <td>&lsquo;<code class=css>auto</code>&rsquo;

     <td>&lsquo;<code class=css>auto</code>&rsquo;

    <tr>
     <td>(k)

     <th>&lsquo;<code class=property>orphans</code>&rsquo;

     <td><code class=declaration>orphans: 3</code> <!--  <td>''3''-->

     <td>&lsquo;<code class=css>3</code>&rsquo;

     <td>&lsquo;<code class=css>3</code>&rsquo;

     <td>&lsquo;<code class=css>3</code>&rsquo;

     <td>&lsquo;<code class=css>3</code>&rsquo;
  </table>

  <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  <p>Comments and suggestions from Giovanni Campagna, Christoph P&auml;per,
   Keith Rarick, Alex Mogilevsky, Ian Hickson, David Baron, Edward Welbourne,
   Boris Zbarsky, Bj&ouml;rn H&ouml;hrmann and Michael Day improved this
   module. <!--

Ian's proposal:
  http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0141.html
David's proposal
  http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0191.html

-->


  <h2 class=no-num id=references>References</h2>

  <h3 class=no-num id=normative-references>Normative references</h3>
  <!--begin-normative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS21>[CSS21]

   <dd>Bert Bos; et al. <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
    Sheets Level 2 Revision 1 (CSS&#160;2.1) Specification.</cite></a> 7 June
    2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
    </dd>
   <!---->

   <dt id=CSS3-IMAGES>[CSS3-IMAGES]

   <dd>Elika J. Etemad; Tab Atkins Jr. <a
    href="http://www.w3.org/TR/2011/WD-css3-images-20110712/"><cite>CSS Image
    Values and Replaced Content Module Level 3.</cite></a> 12 July 2011. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-images-20110712/">http://www.w3.org/TR/2011/WD-css3-images-20110712/</a>
    </dd>
   <!---->

   <dt id=CSS3COLOR>[CSS3COLOR]

   <dd>Tantek &#199;elik; Chris Lilley; L. David Baron. <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
    Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
    href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
    </dd>
   <!---->
  </dl>
  <!--end-normative-->

  <h3 class=no-num id=other-references>Other references</h3>
  <!--begin-informative-->
  <!-- Sorted by label -->

  <dl class=bibliography>
   <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
    <!---->

   <dt id=CSS3-FLEXBOX>[CSS3-FLEXBOX]

   <dd>Tab Atkins Jr.; Alex Mogilevsky; L. David Baron. <a
    href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/"><cite>Flexible
    Box Layout Module.</cite></a> 22 March 2011. W3C Working Draft. (Work in
    progress.) URL: <a
    href="http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/">http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/</a>
    </dd>
   <!---->

   <dt id=CSS3CASCADE>[CSS3CASCADE]

   <dd>H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3
    module: Cascading and inheritance.</cite></a> 15 December 2005. W3C
    Working Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
    </dd>
   <!---->

   <dt id=CSS3COL>[CSS3COL]

   <dd>H&#229;kon Wium Lie. <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
    Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
    Recommendation. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
    </dd>
   <!---->

   <dt id=CSS3GRID>[CSS3GRID]

   <dd>Alex Mogilevsky; Markus Mielke. <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
    Positioning Module Level&#160;3.</cite></a> 5 September 2007. W3C Working
    Draft. (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
    </dd>
   <!---->

   <dt id=CSS3NAMESPACE>[CSS3NAMESPACE]

   <dd>Elika J. Etemad; Anne van Kesteren. <a
    href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/"><cite>CSS
    Namespaces Module.</cite></a> 23 May 2008. W3C Candidate Recommendation.
    (Work in progress.) URL: <a
    href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/">http://www.w3.org/TR/2008/CR-css3-namespace-20080523/</a>
    </dd>
   <!---->

   <dt id=URI>[URI]

   <dd>T. Berners-Lee; R. Fielding; L. Masinter. <a
    href="http://www.ietf.org/rfc/rfc3986.txt"><cite>Uniform Resource
    Identifiers (URI): generic syntax.</cite></a> January 2005. Internet RFC
    3986. URL: <a
    href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a>
    </dd>
   <!---->
  </dl>
  <!--end-informative-->

  <h2 class=no-num id=index>Index</h2>
  <!--begin-index-->

  <ul class=indexlist>
   <li>absolute length units, <a href="#absolute-length-units"
    title="absolute length units"><strong>5.2.</strong></a>

   <li>actual value, <a href="#actual-value" title="actual
    value"><strong>10.4.</strong></a>

   <li>&lt;angle&gt;, <a href="#angle-value"
    title="&lt;angle&gt;"><strong>6.1.</strong></a>

   <li>calc(), <a href="#calc0" title="calc()"><strong>9.1.</strong></a>

   <li>ch, <a href="#ch-unit" title=ch><strong>5.1.1.</strong></a>

   <li><a href="#color-value"><code>&lt;color&gt;</code></a>, <a
    href="#color-value" title="&lt;color&gt;"><strong>7.1.</strong></a>

   <li>computed value, <a href="#computed-value" title="computed
    value"><strong>10.2.</strong></a>

   <li>&lsquo;<code class=css>cycle()</code>&rsquo;, <a href="#cycle0"
    title="''cycle()''"><strong>9.2.</strong></a>

   <li>deg, <a href="#deg" title=deg><strong>6.1.</strong></a>

   <li>dimension, <a href="#dimension"
    title=dimension><strong>5.</strong></a>

   <li>em, <a href="#em-unit" title=em><strong>5.1.1.</strong></a>

   <li>ex, <a href="#ex-unit" title=ex><strong>5.1.1.</strong></a>

   <li>fr, <a href="#fr-unit" title=fr><strong>8.1.</strong></a>

   <li>&lt;frequency&gt;, <a href="#frequency-value"
    title="&lt;frequency&gt;"><strong>6.3.</strong></a>

   <li>functional notation, <a href="#functional-notation0" title="functional
    notation"><strong>9.</strong></a>

   <li>gr, <a href="#gr-unit" title=gr><strong>8.2.</strong></a>

   <li>grad, <a href="#grad" title=grad><strong>6.1.</strong></a>

   <li>Hz, <a href="#hz" title=Hz><strong>6.3.</strong></a>

   <li>identifier, <a href="#identifier"
    title=identifier><strong>3.</strong></a>

   <li><a href="#identifier-value"><code>&lt;identifier&gt;</code></a>, <a
    href="#identifier-value"
    title="&lt;identifier&gt;"><strong>3.2.</strong></a>

   <li><a href="#image-value"><code>&lt;image&gt;</code></a>, <a
    href="#image-value" title="&lt;image&gt;"><strong>7.2.</strong></a>

   <li>&lsquo;<code class=css>inherit</code>&rsquo;, <a href="#inherit"
    title="''inherit''"><strong>3.1.1.</strong></a>

   <li>&lsquo;<code class=css>initial</code>&rsquo;, <a href="#initial"
    title="''initial''"><strong>3.1.1.</strong></a>

   <li>integer, <a href="#integer" title=integer><strong>4.1.</strong></a>

   <li><a href="#integer-value"><code>&lt;integer&gt;</code></a>, <a
    href="#integer-value" title="&lt;integer&gt;"><strong>4.1.</strong></a>

   <li>kHz, <a href="#khz" title=kHz><strong>6.3.</strong></a>

   <li><a href="#length-value"><code>&lt;length&gt;</code></a>, <a
    href="#length-value" title="&lt;length&gt;"><strong>5.</strong></a>

   <li>max(), <a href="#max" title="max()"><strong>9.1.</strong></a>

   <li>min(), <a href="#min" title="min()"><strong>9.1.</strong></a>

   <li>ms, <a href="#ms" title=ms><strong>6.2.</strong></a>

   <li>number, <a href="#number" title=number><strong>4.2.</strong></a>

   <li><a href="#number-value"><code>&lt;number&gt;</code></a>, <a
    href="#number-value" title="&lt;number&gt;"><strong>4.2.</strong></a>

   <li><a href="#percentage-value"><code>&lt;percentage&gt;</code></a>, <a
    href="#percentage-value"
    title="&lt;percentage&gt;"><strong>4.3.</strong></a>

   <li>rad, <a href="#rad" title=rad><strong>6.1.</strong></a>

   <li>reference pixel, <a href="#reference-pixel" title="reference
    pixel"><strong>5.2.</strong></a>

   <li>relative length, <a href="#relative-length-units" title="relative
    length"><strong>5.1.</strong></a>

   <li>rem, <a href="#rem-unit" title=rem><strong>5.1.1.</strong></a>

   <li>s, <a href="#s" title=s><strong>6.2.</strong></a>

   <li>specified value, <a href="#specified-value" title="specified
    value"><strong>10.1.</strong></a>, <a href="#specified-value0"
    title="specified value"><strong>10.1.</strong></a>

   <li><a href="#string-value"><code>&lt;string&gt;</code></a>, <a
    href="#string-value" title="&lt;string&gt;"><strong>3.3.</strong></a>

   <li>&lt;time&gt;, <a href="#time-value"
    title="&lt;time&gt;"><strong>6.2.</strong></a>

   <li>turn, <a href="#turn" title=turn><strong>6.1.</strong></a>

   <li>URL, <a href="#url" title=URL><strong>3.4.</strong></a>

   <li><a href="#url-value"><code>&lt;url&gt;</code></a>, <a
    href="#url-value" title="&lt;url&gt;"><strong>3.4.</strong></a>

   <li>used value, <a href="#used-value" title="used
    value"><strong>10.3.</strong></a>, <a href="#used-value0" title="used
    value"><strong>10.3.</strong></a>

   <li>vh, <a href="#vh-unit" title=vh><strong>5.1.2.</strong></a>

   <li>vm, <a href="#vm-unit" title=vm><strong>5.1.2.</strong></a>

   <li>vw, <a href="#vw-unit" title=vw><strong>5.1.2.</strong></a>
  </ul>
  <!--end-index-->