8000 csswg-drafts/css3-values/Overview.html at b2711a9fececdb7163da3ec4cf91148cbd437fc2 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
2254 lines (1696 loc) · 85.9 KB

Overview.html

File metadata and controls

2254 lines (1696 loc) · 85.9 KB
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 (&apos;) 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.
&lsquo;<code class=css>url(open\(parens)</code>&rsquo;, &lsquo;<code
class=css>url(close\)parens)</code>&rsquo;. 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="#string">string</a> within the &lsquo;<a href="#url"><code
class=css>url()</code></a>&rsquo; notation.
<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 [[RFC3986]]) 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'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>
View remainder of file in raw view