You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2311 lines
91 KiB
2311 lines
91 KiB
<!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å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> © 2011 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</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 “css3-values” in the subject, preferably like this:
|
|
“[<!---->css3-values<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<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 2.1 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, CSS 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: ‘<a href="#vh-unit"><code class=css>vh</code></a>’,
|
|
‘<a href="#vw-unit"><code class=css>vw</code></a>’, ‘<a
|
|
href="#vm-unit"><code class=css>vm</code></a>’, ‘<a
|
|
href="#fr-unit"><code class=css>fr</code></a>’, ‘<a
|
|
href="#gr-unit"><code class=css>gr</code></a>’, ‘<code
|
|
class=css>cycle()</code>’, ‘<code
|
|
class=css>attr()</code>’.
|
|
|
|
<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: ‘<code class=css>initial</code>’ and
|
|
‘<code class=css>inherit</code>’</a>
|
|
</ul>
|
|
|
|
<li><a href="#identifiers"><span class=secno>3.2. </span> User-defined
|
|
Identifiers: the ‘<code
|
|
class=css><identifier></code>’ type</a>
|
|
|
|
<li><a href="#strings"><span class=secno>3.3. </span> Quoted Strings:
|
|
the ‘<code class=css><string></code>’ type</a>
|
|
|
|
<li><a href="#urls"><span class=secno>3.4. </span> Resource Locators:
|
|
the ‘<code class=css><url></code>’ 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
|
|
‘<code class=css><integer></code>’ type</a>
|
|
|
|
<li><a href="#numbers"><span class=secno>4.2. </span> Numbers: the
|
|
‘<code class=css><number></code>’ type</a>
|
|
|
|
<li><a href="#percentages"><span class=secno>4.3. </span> Percentages:
|
|
the ‘<code class=css><percentage></code>’ type</a>
|
|
</ul>
|
|
|
|
<li><a href="#lengths"><span class=secno>5. </span> Distance Units: the
|
|
‘<code class=css><length></code>’ 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 ‘<code class=css>em</code>’,
|
|
‘<code class=css>ex</code>’, ‘<code
|
|
class=css>ch</code>’, ‘<code class=css>rem</code>’
|
|
units</a>
|
|
|
|
<li><a href="#viewport-relative-lengths"><span class=secno>5.1.2.
|
|
</span> Viewport-relative lengths: the ‘<code
|
|
class=css>vw</code>’, ‘<code class=css>vh</code>’,
|
|
‘<code class=css>vm</code>’ units</a>
|
|
</ul>
|
|
|
|
<li><a href="#absolute-lengths"><span class=secno>5.2. </span> Absolute
|
|
lengths: the ‘<code class=css>cm</code>’, ‘<code
|
|
class=css>mm</code>’, ‘<code class=css>in</code>’,
|
|
‘<code class=css>pt</code>’, ‘<code
|
|
class=css>pc</code>’, ‘<code class=css>px</code>’
|
|
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
|
|
‘<code class=css><angle></code>’ type and
|
|
‘<code class=css>deg</code>’, ‘<code
|
|
class=css>grad</code>’, ‘<code class=css>rad</code>’,
|
|
‘<code class=css>turn</code>’ units</a>
|
|
|
|
<li><a href="#time"><span class=secno>6.2. </span> Times: the
|
|
‘<code class=css><time></code>’ type and ‘<code
|
|
class=css>s</code>’, ‘<code class=css>ms</code>’
|
|
units</a>
|
|
|
|
<li><a href="#frequencies-the-ltfrequencygt-type-and-h"><span
|
|
class=secno>6.3. </span>Frequencies: the ‘<code
|
|
class=css><frequency></code>’ type and ‘<code
|
|
class=css>Hz</code>’, ‘<code class=css>kHz</code>’
|
|
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
|
|
‘<code class=css><color></code>’ type</a>
|
|
|
|
<li><a href="#images"><span class=secno>7.2. </span> Images: the
|
|
‘<code class=css><image></code>’ 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 ‘<code class=css><fraction></code>’ type and
|
|
‘<code class=css>fr</code>’ unit</a>
|
|
|
|
<li><a href="#grids"><span class=secno>8.2. </span> Grid Units: the
|
|
‘<code class=css><grid></code>’ type and ‘<code
|
|
class=css>gr</code>’ 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:
|
|
‘<code class=css>calc()</code>’, ‘<code
|
|
class=css>min()</code>’ and ‘<code
|
|
class=css>max()</code>’</a>
|
|
|
|
<li><a href="#cycle"><span class=secno>9.2. </span> Cycling Values:
|
|
‘<code class=css>cycle()</code>’</a>
|
|
|
|
<li><a href="#attr"><span class=secno>9.3. </span> Attribute References:
|
|
‘<code class=css>attr()</code>’</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 ‘<code class=css><</code>’
|
|
and ‘<code class=css>></code>’), and information on how they
|
|
can be combined. Generic data types (<a
|
|
href="#length-value"><code><length></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><spacing-limit></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 ‘<code
|
|
class=css>auto</code>’, ‘<code class=css>disc</code>’,
|
|
etc.), which appear literally, without quotes (e.g. <code>auto</code>)
|
|
|
|
<li>basic data types, which appear between ‘<code
|
|
class=css><</code>’ and ‘<code
|
|
class=css>></code>’ (e.g., <a
|
|
href="#length-value"><code><length></code></a>, <a
|
|
href="#percentage-value"><code><percentage></code></a>, etc.).
|
|
|
|
<li>types that have the same range of values as a property bearing the
|
|
same name (e.g., <code><'border-width'></code>
|
|
<code><'background-attachment'></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 ‘<code
|
|
class=property>inherit</code>’.
|
|
|
|
<li>non-terminals that do not share the same name as a property. In this
|
|
case, the non-terminal name appears between ‘<code
|
|
class=css><</code>’ and ‘<code
|
|
class=css>></code>’, as in <code><spacing-limit></code>.
|
|
Notice the distinction between <code><border-width></code> and
|
|
<code><'border-width'></code>: the latter is defined as the value
|
|
of the ‘<code class=property>border-width</code>’ 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 ‘<code
|
|
class=css>inherit</code>’ and ‘<code
|
|
class=css>initial</code>’ 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,
|
|
‘<code class=css>background: url(corner.png) no-repeat,
|
|
inherit;</code>’ 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 ([ ]) 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 ‘<code class=css>1em2em</code>’ would be parsed as a
|
|
single <code>DIMEN</code> token with the number ‘<code
|
|
class=css>1</code>’ and the identifier ‘<code
|
|
class=css>em2em</code>’, which is an invalid unit. In this case, a
|
|
space would be required before the ‘<code class=css>2</code>’
|
|
to get this parsed as the two lengths ‘<code
|
|
class=css>1em</code>’ and ‘<code class=css>2em</code>’.
|
|
|
|
<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>‘<code class=property>orphans</code>’
|
|
|
|
<td><integer>
|
|
|
|
<td>‘<code class=css>3</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>text-align</code>’
|
|
|
|
<td>left | right | center | justify
|
|
|
|
<td>‘<code class=css>center</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>padding-top</code>’
|
|
|
|
<td><length> | <percentage>
|
|
|
|
<td>‘<code class=css>5%</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>outline-color</code>’
|
|
|
|
<td><color> | invert
|
|
|
|
<td>‘<code class=css>#fefefe</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>text-decoration</code>’
|
|
|
|
<td>none | underline || overline || line-through || blink
|
|
|
|
<td>‘<code class=css>overline underline</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>font-family</code>’
|
|
|
|
<td><family-name>#
|
|
|
|
<td>‘<code class=css>"Gill Sans", Futura,
|
|
sans-serif</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>border-width</code>’
|
|
|
|
<td>[ <length> | thick | medium | thin ]{1,4}
|
|
|
|
<td>‘<code class=css>2px medium 4px</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>text-shadow</code>’
|
|
|
|
<td>[ inset? && [ <length>{2,4} && <color>? ] ]# | none
|
|
|
|
<td>‘<code class=css>3px 3px rgba(50%, 50%, 50%, 50%),
|
|
lemonchiffon 0 0 4px inset</code>’
|
|
|
|
<tr>
|
|
<td>‘<code class=property>voice-pitch</code>’
|
|
|
|
<td>
|
|
<pre class=value><frequency> && absolute |
|
|
<!-- -->[[x-low | low | medium | high | x-high] ||
|
|
<!-- --> [<frequency> | <semitones> | <percentage>]]</pre>
|
|
|
|
<td>‘<code class=css>-2st x-low</code>’
|
|
</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 ‘<code
|
|
class=property>border-collapse</code>’ property:</p>
|
|
|
|
<pre>Value: 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:
|
|
‘<code class=css>initial</code>’ and ‘<code
|
|
class=css>inherit</code>’</h4>
|
|
|
|
<p>As defined <a href="#component-types">above</a>, all properties accept
|
|
the ‘<code class=css>initial</code>’ and ‘<code
|
|
class=css>inherit</code>’ keywords, which represent value
|
|
computations common to all CSS properties.
|
|
|
|
<p>The <dfn id=inherit>‘<code class=css>inherit</code>’</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>‘<code class=css>initial</code>’</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">‘<code
|
|
class=property>inherit</code>’</a> for properties that are inherited
|
|
by default and equivalent to <a class=css href="#initial">‘<code
|
|
class=property>initial</code>’</a> for properties that are not
|
|
inherited by default? This might be easier for authors to use than <a
|
|
class=css href="#initial">‘<code
|
|
class=property>initial</code>’</a> and <a class=css
|
|
href="#inherit">‘<code class=property>inherit</code>’</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
|
|
‘<code class=css>initial</code>’/‘<code
|
|
class=css>inherit</code>’. Is that something we should add?
|
|
|
|
<h3 id=identifiers><span class=secno>3.2. </span> User-defined Identifiers:
|
|
the ‘<a href="#identifier-value"><code
|
|
class=css><identifier></code></a>’ 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><identifier></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. ‘<code class=css>example</code>’ and ‘<code
|
|
class=css>EXAMPLE</code>’ are two different, unrelated user-defined
|
|
identifiers).
|
|
|
|
<h3 id=strings><span class=secno>3.3. </span> Quoted Strings: the ‘<a
|
|
href="#string-value"><code class=css><string></code></a>’ type</h3>
|
|
|
|
<p>Strings are denoted by <dfn
|
|
id=string-value><code><string></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
|
|
‘<code class=css>\"</code>’ or as ‘<code
|
|
class=css>\22</code>’). Analogously for single quotes
|
|
("\‘<code class=css>" or "\27"). </code>
|
|
|
|
<pre>
|
|
<!-- -->content: "this is a ’string'.";
|
|
<!-- -->content: "this is a \"string\".";
|
|
<!-- -->content: ‘<code class=css>this is a "string".</code>’;
|
|
<!-- -->content: ‘<code class=css>this is a \</code>’string\‘<code class=css>.</code>’;</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 ‘<a
|
|
href="#url-value"><code class=css><url></code></a>’ 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><url></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><string></code></a> rather than by <a
|
|
href="#url-value"><code><URL></code></a>. An example of this is the
|
|
<a href="http://www.w3.org/TR/CSS21/cascade.html#at-import">‘<code
|
|
class=css>@import</code>’ rule</a>.
|
|
|
|
<p>Parentheses, whitespace characters, single quotes (‘<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>’url(open\(parens)‘<code class=css>,
|
|
</code>’url(close\)parens)‘<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>’‘<a
|
|
href="#url"><code class=css>url()</code></a>’‘<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 3986, section 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’s <code><body></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><body<</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 ‘<a
|
|
href="#integer-value"><code class=css><integer></code></a>’
|
|
type</h3>
|
|
|
|
<p>Integer values are denoted by <dfn
|
|
id=integer-value><code><integer></code></dfn>. An <dfn
|
|
id=integer>integer</dfn> is one or more decimal digits ‘<code
|
|
class=css>0</code>’ through ‘<code class=css>9</code>’
|
|
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 ‘<code
|
|
class=css>-</code>’ or ‘<code class=css>+</code>’ 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 ‘<a
|
|
href="#number-value"><code class=css><number></code></a>’ type</h3>
|
|
|
|
<p>Number values are denoted by <dfn
|
|
id=number-value><code><number></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 ‘<code
|
|
class=css>-</code>’ or ‘<code class=css>+</code>’ 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
|
|
‘<a href="#percentage-value"><code
|
|
class=css><percentage></code></a>’ type</h3>
|
|
|
|
<p>A percentage value is denoted by <dfn
|
|
id=percentage-value><code><percentage></code></dfn>, consists of a
|
|
<a href="#number-value"><i><number></i></a> immediately followed by
|
|
a percent sign ‘<code class=css>%</code>’. 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 ‘<a
|
|
href="#length-value"><code class=css><length></code></a>’ type</h2>
|
|
|
|
<p>Lengths refer to distance measurements and are denoted by <dfn
|
|
id=length-value><code><length></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><number></code></a> ‘<code
|
|
class=css>0</code>’. (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>‘<a href="#em-unit"><code class=css>em</code></a>’
|
|
|
|
<td>font size of the element
|
|
|
|
<tr>
|
|
<td>‘<a href="#ex-unit"><code class=css>ex</code></a>’
|
|
|
|
<td><i>x-height</i> of the element's font
|
|
|
|
<tr>
|
|
<td>‘<a href="#ch-unit"><code class=css>ch</code></a>’
|
|
|
|
<td>width of the "0" glyph in the element's font
|
|
|
|
<tr>
|
|
<td>‘<a href="#rem-unit"><code class=css>rem</code></a>’
|
|
|
|
<td>font size of the root element
|
|
|
|
<tr>
|
|
<td>‘<a href="#vw-unit"><code class=css>vw</code></a>’
|
|
|
|
<td>viewport's width
|
|
|
|
<tr>
|
|
<td>‘<a href="#vh-unit"><code class=css>vh</code></a>’
|
|
|
|
<td>viewport's height
|
|
|
|
<tr>
|
|
<td>‘<a href="#vm-unit"><code class=css>vm</code></a>’
|
|
|
|
<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 ‘<a href="#em-unit"><code
|
|
class=css>em</code></a>’, ‘<a href="#ex-unit"><code
|
|
class=css>ex</code></a>’, ‘<a href="#ch-unit"><code
|
|
class=css>ch</code></a>’, ‘<a href="#rem-unit"><code
|
|
class=css>rem</code></a>’ units</h4>
|
|
|
|
<p>Aside from ‘<a href="#rem-unit"><code
|
|
class=css>rem</code></a>’ (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 ‘<code class=property>font-size</code>’
|
|
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 ‘<code class=property>font</code>’ 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 ‘<code
|
|
class=property>font-size</code>’ 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 ‘<a
|
|
href="#ex-unit"><code class=css>ex</code></a>’ 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 ‘<code
|
|
class=property>font-size</code>’ on the root element.
|
|
|
|
<p>When specified on the ‘<code
|
|
class=property>font-size</code>’ property of the root element, the
|
|
‘<a href="#rem-unit"><code class=css>rem</code></a>’ 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 ‘<a href="#vw-unit"><code
|
|
class=css>vw</code></a>’, ‘<a href="#vh-unit"><code
|
|
class=css>vh</code></a>’, ‘<a href="#vm-unit"><code
|
|
class=css>vm</code></a>’ 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×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 ‘<a href="#vw-unit"><code
|
|
class=css>vw</code></a>’ or ‘<a href="#vh-unit"><code
|
|
class=css>vh</code></a>’.
|
|
<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 ‘<code class=css>cm</code>’, ‘<code
|
|
class=css>mm</code>’, ‘<code class=css>in</code>’,
|
|
‘<code class=css>pt</code>’, ‘<code
|
|
class=css>pc</code>’, ‘<code class=css>px</code>’ 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>‘<code class=css>cm</code>’
|
|
|
|
<td>centimeters
|
|
|
|
<tr>
|
|
<td>‘<code class=css>mm</code>’
|
|
|
|
<td>millimeters
|
|
|
|
<tr>
|
|
<td>‘<code class=css>in</code>’
|
|
|
|
<td>inches; 1in is equal to 2.54cm
|
|
|
|
<tr>
|
|
<td>‘<code class=css>px</code>’
|
|
|
|
<td>pixels; 1px is equal to 1/96th of 1in
|
|
|
|
<tr>
|
|
<td>‘<code class=css>pt</code>’
|
|
|
|
<td>points; 1pt is equal to 1/72nd of 1in
|
|
|
|
<tr>
|
|
<td>‘<code class=css>pc</code>’
|
|
|
|
<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 mm (1/96 inch).
|
|
|
|
<p>The image below illustrates the effect of viewing distance on the size
|
|
of a reference pixel: a reading distance of 71 cm (28 inches)
|
|
results in a reference pixel of 0.26 mm, while a reading distance of
|
|
3.5 m (12 feet) results in a reference pixel of 1.3 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 "dots" 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 ‘<a
|
|
href="#angle-value"><code class=css><angle></code></a>’ type
|
|
and ‘<a href="#deg"><code class=css>deg</code></a>’, ‘<a
|
|
href="#grad"><code class=css>grad</code></a>’, ‘<a
|
|
href="#rad"><code class=css>rad</code></a>’, ‘<a
|
|
href="#turn"><code class=css>turn</code></a>’ units</h3>
|
|
|
|
<p>Angle values are <i>dimensions</i> denoted by <dfn
|
|
id=angle-value><angle></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π 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 ‘<code class=css>90deg</code>’
|
|
or ‘<code class=css>100grad</code>’ or ‘<code
|
|
class=css>0.25turn</code>’ or approximately ‘<code
|
|
class=css>1.570796326794897rad</code>’.
|
|
|
|
<h3 id=time><span class=secno>6.2. </span> Times: the ‘<a
|
|
href="#time-value"><code class=css><time></code></a>’ type and
|
|
‘<a href="#s"><code class=css>s</code></a>’, ‘<a
|
|
href="#ms"><code class=css>ms</code></a>’ units</h3>
|
|
|
|
<p>Time values are <i>dimensions</i> denoted by <dfn
|
|
id=time-value><time></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 ‘<a href="#frequency-value"><code
|
|
class=css><frequency></code></a>’ type and ‘<a
|
|
href="#hz"><code class=css>Hz</code></a>’, ‘<a
|
|
href="#khz"><code class=css>kHz</code></a>’ units</h3>
|
|
|
|
<p>Frequency values are <i>dimensions</i> denoted by <dfn
|
|
id=frequency-value><frequency></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><color></code></a> and <a
|
|
href="#image-value"><code><image></code></a>.
|
|
|
|
<h3 id=colors><span class=secno>7.1. </span> Colors: the ‘<a
|
|
href="#color-value"><code class=css><color></code></a>’ type</h3>
|
|
|
|
<p>The <dfn id=color-value><code><color></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><color></code></a> as defined therein.
|
|
|
|
<h3 id=images><span class=secno>7.2. </span> Images: the ‘<a
|
|
href="#image-value"><code class=css><image></code></a>’ type</h3>
|
|
|
|
<p>The <dfn id=image-value><code><image></code></dfn> data type is
|
|
defined herein as equivalent to <a
|
|
href="#url-value"><code><url></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><image></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
|
|
‘<code class=css><fraction></code>’ type and ‘<a
|
|
href="#fr-unit"><code class=css>fr</code></a>’ 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 ‘<code
|
|
class=css><grid></code>’ type and ‘<a
|
|
href="#gr-unit"><code class=css>gr</code></a>’ 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>‘<code class=css>gr</code>’ 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 ‘<a
|
|
href="#gr-unit"><code class=css>gr</code></a>’ 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 (‘<code class=css>,</code>’) 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: ‘<a
|
|
href="#calc0"><code class=css>calc()</code></a>’, ‘<a
|
|
href="#min"><code class=css>min()</code></a>’ and ‘<a
|
|
href="#max"><code class=css>max()</code></a>’</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><length></code></a>, <a
|
|
href="#frequency-value"><code><frequency></code></a>, <a
|
|
href="#angle-value"><code><angle></code></a>, <a
|
|
href="#time-value"><code><time></code></a>, or <a
|
|
href="#number-value"><code><number></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 (‘<code
|
|
class=property>cm</code>’ is length, ‘<a href="#deg"><code
|
|
class=property>deg</code></a>’ is angle etc.); any DIMENSION whose
|
|
type does not match the target type causes the ‘<a
|
|
href="#calc0"><code class=css>calc()</code></a>’ 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 ‘<a
|
|
href="#calc0"><code class=css>calc()</code></a>’ to define their
|
|
allowable values as a closed (not open) interval.
|
|
|
|
<div class=example> These two are equivalentequivalent to ‘<code
|
|
class=css>width: 0px</code>’ since widths smaller than 0px are not
|
|
allowed.
|
|
<pre>
|
|
width: calc(5px - 10px);
|
|
width: 0px;
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Given the complexities of ‘<code
|
|
class=property>width</code>’ and ‘<code
|
|
class=property>height</code>’ 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 ‘<code
|
|
class=property>auto</code>’ had been specified.
|
|
|
|
<h3 id=cycle><span class=secno>9.2. </span> Cycling Values: ‘<code
|
|
class=css>cycle()</code>’</h3>
|
|
|
|
<p>The <dfn id=cycle0>‘<code class=css>cycle()</code>’</dfn>
|
|
expression allows descendant elements to cycle over a list of values
|
|
instead of inheriting the same value. The syntax of the ‘<code
|
|
class=css>cycle()</code>’ expression is:
|
|
|
|
<pre>cycle( <value># )</pre>
|
|
|
|
<p>where <code><value></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 ‘<code class=css>cycle()</code>’ expression is invalid.
|
|
|
|
|
|
<p>The value returned by ‘<code class=css>cycle()</code>’ 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 ‘<code class=css>cycle()</code>’. 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 ‘<code class=css>cycle()</code>’ notation is not allowed
|
|
to be nested; nor may it contain ‘<code
|
|
class=css>attr()</code>’, ‘<a href="#calc0"><code
|
|
class=css>calc()</code></a>’, ‘<a href="#min"><code
|
|
class=css>min()</code></a>’, or ‘<a href="#max"><code
|
|
class=css>max()</code></a>’ 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:
|
|
‘<code class=css>attr()</code>’</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 ‘<code class=css>attr()</code>’ expression always returns
|
|
a string. In CSS3, the ‘<code class=css>attr()</code>’
|
|
expression can return many different types. The new syntax for the attr()
|
|
expression is:
|
|
|
|
<pre>
|
|
'attr(' ident [ ',' <type> [ ',' <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 ‘<code class=css>|</code>’, 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 <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 <color> value. The
|
|
default is UA dependent but must be the same as the initial value of the
|
|
‘<code class=property>color</code>’ property.
|
|
|
|
<dt>url
|
|
|
|
<dd>The attribute value will be interpreted as the URI part of a ‘<a
|
|
href="#url"><code class=css>url()</code></a>’ 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
|
|
‘<code class=css>float: attr(align)</code>’
|
|
|
|
<p>If the <type> is missing, ‘<code
|
|
class=property>string</code>’ 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 ‘<code
|
|
class=property>inherit</code>’ and ‘<code
|
|
class=property>initial</code>’), 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
|
|
<'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 ‘<code
|
|
class=property>auto</code>’, ‘<code
|
|
class=property>nowrap</code>’, or ‘<code
|
|
class=property>baseline</code>’. This is intentional, as the intent
|
|
of the ‘<code class=css>attr()</code>’ 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 ‘<code
|
|
class=property>px</code>’, the default could still be ‘<code
|
|
class=css>5em</code>’.
|
|
|
|
<div class=example>
|
|
<p>Examples:
|
|
|
|
<pre>
|
|
<stock>
|
|
<wood length="12"/>
|
|
<wood length="5"/>
|
|
<metal length="19"/>
|
|
<wood length="4"/>
|
|
</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 ‘<code class=css>attr()</code>’ 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="<counter>, 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(<identifier>)'</dfn> or
|
|
<dfn>'counter(<identifier>, <list-style-type>)'</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(<identifier>, <string>)' or
|
|
'counters(<identifier>, <string>, <list-style-type>)'. 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
|
|
<list-style-type>: '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 ''<family-name>'' 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 ‘<code
|
|
class=css>inherit</code>’ or ‘<code
|
|
class=css>initial</code>’, 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 ‘<code
|
|
class=property>red</code>’ or ‘<code
|
|
class=css>2mm</code>’) or relative (i.e., relative to another value,
|
|
as in ‘<code class=property>auto</code>’, ‘<code
|
|
class=css>2em</code>’).
|
|
|
|
<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., ‘<code
|
|
class=property>smaller</code>’, ‘<code
|
|
class=property>bolder</code>’) 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 ‘<code class=css>Applies To</code>’ 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 ‘<code
|
|
class=property>font-size-adjust</code>’ 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
|
|
‘<code class=property>page-break-after</code>’ property does
|
|
not reflect whether there is a page break or not after the element.
|
|
Similarly, the actual value of ‘<code
|
|
class=property>orphans</code>’ 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>‘<code class=property>text-align</code>’
|
|
|
|
<td><code class=declaration>text-align: left</code>
|
|
<!-- <td>''left''-->
|
|
|
|
<td>‘<code class=css>left</code>’
|
|
|
|
<td>‘<code class=css>left</code>’
|
|
|
|
<td>‘<code class=css>left</code>’
|
|
|
|
<td>‘<code class=css>left</code>’
|
|
|
|
<tr>
|
|
<td>(b)
|
|
|
|
<th>‘<code class=property>border-top-width</code>’,
|
|
‘<code class=property>border-right-width</code>’,
|
|
‘<code class=property>border-bottom-width</code>’,
|
|
‘<code class=property>border-left-width</code>’
|
|
|
|
<td><code class=declaration>border-width: inherit</code>
|
|
<!-- <td>''inherit'' -->
|
|
|
|
<td class=say>‘<code class=css>4.2px</code>’
|
|
|
|
<td>‘<code class=css>4.2px</code>’
|
|
|
|
<td>‘<code class=css>4.2px</code>’
|
|
|
|
<td>‘<code class=css>4px</code>’
|
|
|
|
<tr>
|
|
<td>(c)
|
|
|
|
<th>‘<code class=property>width</code>’
|
|
|
|
<td><small>(none)</small> <!-- <td><small>(none)</small>-->
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
<small>(initial value)</small>
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<td>‘<code class=css>120px</code>’
|
|
|
|
<td>‘<code class=css>120px</code>’
|
|
|
|
<tr>
|
|
<td>(d)
|
|
|
|
<th>‘<code class=property>list-style-position</code>’
|
|
|
|
<td><code class=declaration>list-style-position: inherit</code>
|
|
<!-- <td>''inherit'' -->
|
|
|
|
<td class=say>‘<code class=css>inside</code>’
|
|
|
|
<td>‘<code class=css>inside</code>’
|
|
|
|
<td>‘<code class=css>inside</code>’
|
|
|
|
<td>‘<code class=css>inside</code>’
|
|
|
|
<tr>
|
|
<td>(e)
|
|
|
|
<th>‘<code class=property>list-style-position</code>’
|
|
|
|
<td><code class=declaration>list-style-position: initial</code>
|
|
<!-- <td>''initial''-->
|
|
|
|
<td>‘<code class=css>outside</code>’
|
|
<small>(initial value)</small>
|
|
|
|
<td>‘<code class=css>outside</code>’
|
|
|
|
<td>‘<code class=css>outside</code>’
|
|
|
|
<td>‘<code class=css>outside</code>’
|
|
|
|
<tr>
|
|
<td>(f)
|
|
|
|
<th>‘<code class=property>font-size</code>’
|
|
|
|
<td><code class=declaration>font-size: 1.2em</code>
|
|
<!-- <td>''1.2em''-->
|
|
|
|
<td>‘<code class=css>1.2em</code>’
|
|
|
|
<td class=say>‘<code class=css>14.1px</code>’
|
|
|
|
<td>‘<code class=css>14.1px</code>’
|
|
|
|
<td>‘<code class=css>14px</code>’
|
|
|
|
<tr>
|
|
<td>(g)
|
|
|
|
<th>‘<code class=property>width</code>’
|
|
|
|
<td><code class=declaration>width: 80%</code> <!-- <td>''80%''-->
|
|
|
|
<td>‘<code class=css>80%</code>’
|
|
|
|
<td>‘<code class=css>80%</code>’
|
|
|
|
<td class=say>‘<code class=css>354.2px</code>’
|
|
|
|
<td>‘<code class=css>354px</code>’
|
|
|
|
<tr>
|
|
<td>(h)
|
|
|
|
<th>‘<code class=property>width</code>’
|
|
|
|
<td><code class=declaration>width: auto</code> <!-- <td>''auto''-->
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<td class=say>‘<code class=css>134px</code>’
|
|
|
|
<td>‘<code class=css>134px</code>’
|
|
|
|
<tr>
|
|
<td>(i)
|
|
|
|
<th>‘<code class=property>height</code>’
|
|
|
|
<td><code class=declaration>height: auto</code> <!-- <td>''auto''-->
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<td class=say>‘<code class=css>176px</code>’
|
|
|
|
<td>‘<code class=css>176px</code>’
|
|
|
|
<tr>
|
|
<td>(j)
|
|
|
|
<th>‘<code class=property>page-break-after</code>’
|
|
|
|
<td><small>(none)</small> <!-- <td><small>(none)</small>-->
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
<small>(initial value)</small>
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<td>‘<code class=css>auto</code>’
|
|
|
|
<tr>
|
|
<td>(k)
|
|
|
|
<th>‘<code class=property>orphans</code>’
|
|
|
|
<td><code class=declaration>orphans: 3</code> <!-- <td>''3''-->
|
|
|
|
<td>‘<code class=css>3</code>’
|
|
|
|
<td>‘<code class=css>3</code>’
|
|
|
|
<td>‘<code class=css>3</code>’
|
|
|
|
<td>‘<code class=css>3</code>’
|
|
</table>
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>Comments and suggestions from Giovanni Campagna, Christoph Päper,
|
|
Keith Rarick, Alex Mogilevsky, Ian Hickson, David Baron, Edward Welbourne,
|
|
Boris Zbarsky, Björn Hö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 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 Ç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å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å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 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><angle>, <a href="#angle-value"
|
|
title="<angle>"><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><color></code></a>, <a
|
|
href="#color-value" title="<color>"><strong>7.1.</strong></a>
|
|
|
|
<li>computed value, <a href="#computed-value" title="computed
|
|
value"><strong>10.2.</strong></a>
|
|
|
|
<li>‘<code class=css>cycle()</code>’, <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><frequency>, <a href="#frequency-value"
|
|
title="<frequency>"><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><identifier></code></a>, <a
|
|
href="#identifier-value"
|
|
title="<identifier>"><strong>3.2.</strong></a>
|
|
|
|
<li><a href="#image-value"><code><image></code></a>, <a
|
|
href="#image-value" title="<image>"><strong>7.2.</strong></a>
|
|
|
|
<li>‘<code class=css>inherit</code>’, <a href="#inherit"
|
|
title="''inherit''"><strong>3.1.1.</strong></a>
|
|
|
|
<li>‘<code class=css>initial</code>’, <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><integer></code></a>, <a
|
|
href="#integer-value" title="<integer>"><strong>4.1.</strong></a>
|
|
|
|
<li>kHz, <a href="#khz" title=kHz><strong>6.3.</strong></a>
|
|
|
|
<li><a href="#length-value"><code><length></code></a>, <a
|
|
href="#length-value" title="<length>"><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><number></code></a>, <a
|
|
href="#number-value" title="<number>"><strong>4.2.</strong></a>
|
|
|
|
<li><a href="#percentage-value"><code><percentage></code></a>, <a
|
|
href="#percentage-value"
|
|
title="<percentage>"><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><string></code></a>, <a
|
|
href="#string-value" title="<string>"><strong>3.3.</strong></a>
|
|
|
|
<li><time>, <a href="#time-value"
|
|
title="<time>"><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><url></code></a>, <a
|
|
href="#url-value" title="<url>"><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-->
|