Recent changes to css2-compliance

4.3.4 URL + URN = URI

Matt — Wed, 10 Aug 2005 16:51:49 -0000

URLs (Uniform Resource Locators, see [RFC1738] and
[RFC1808]) provide the address of a resource on the
Web. An expected new way of identifying resources is
called URN (Uniform Resource Name). Together they
are called URIs (Uniform Resource Identifiers, see
[URI]). This specification uses the term URI.

URI values in this specification are denoted by <uri>.
The functional notation used to designate URIs in
property values is "url()", as in:

Example(s):

BODY { background: url
("http://www.bg.com/pinkish.gif") }

The format of a URI value is 'url(' followed by optional
whitespace followed by an optional single quote (') or
double quote (") character followed by the URI itself,
followed by an optional single quote (') or double quote
(") character followed by optional whitespace followed
by ')'. The two quote characters must be the same.

Example(s):

An example without quotes:

LI { list-style: url(http://www.redballs.com/redball.png)
disc }

Parentheses, commas, whitespace characters, single
quotes (') and double quotes (") appearing in a URI must
be escaped with a backslash: '\(', '\)', '\,'.

Depending on the type of URI, it might also be possible
to write the above characters as URI-escapes (where "("
= %28, ")" = %29, etc.) as described in [URI].

In order to create modular style sheets that are not
dependent on the absolute location of a resource,
authors may use relative URIs. Relative URIs (as
defined in [RFC1808]) are resolved to full URIs using a
base URI. RFC 1808, 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.

Example(s):

For example, suppose the following rule:

BODY { background: url("yellow") }

is located in a style sheet designated by the URI:

http://www.myorg.org/style/basic.css
The background of the source document's BODY will be
tiled with whatever image is described by the resource
designated by the URI

http://www.myorg.org/style/yellow
User agents may vary in how they handle URIs that
designate unavailable or inapplicable resources.

4.3.3 Percentages

Matt — Wed, 10 Aug 2005 16:48:53 -0000

The format of a percentage value (denoted by
<percentage> in this specification) is an optional sign
character ('+' or '-', with '+' being the default)
immediately followed by a <number> immediately
followed by '%'.

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 containing block). When a
percentage value is set for a property of the root
element and the percentage is defined as referring to
the inherited value of some property, the resultant value
is the percentage times the initial value of that property.

Example(s):

Since child elements (generally) inherit the computed
values of their parent, in the following example, the
children of the P element will inherit a value of 12pt
for 'line-height', not the percentage value (120%):

P { font-size: 10pt }
P { line-height: 120% } /* 120% of 'font-size' */

4.3.2 Lengths

Matt — Wed, 10 Aug 2005 16:43:00 -0000

Lengths refer to horizontal or vertical measurements.

The format of a length value (denoted by <length> in this
specification) is an optional sign character ('+' or '-',
with '+' being the default) immediately followed by a
<number> (with or without a decimal point) immediately
followed by a unit identifier (e.g., px, deg, etc.). After
the '0' length, the unit identifier is optional.

Some properties allow negative length values, but this
may complicate the formatting model and there may be
implementation-specific limits. If a negative length value
cannot be supported, it should be converted to the
nearest value that can be supported.

There are two types of length units: relative and
absolute. Relative length units specify a length relative
to another length property. Style sheets that use relative
units will more easily scale from one medium to another
(e.g., from a computer display to a laser printer).

Relative units are:

em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font
px: pixels, relative to the viewing device
Example(s):

H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */

The 'em' unit is equal to the computed value of the 'font-
size' property of the element on which it is used. The
exception is when 'em' occurs in the value of the 'font-
size' property itself, in which case it refers to the font
size of the parent element. It may be used for vertical or
horizontal measurement. (This unit is also sometimes
called the quad-width in typographic texts.)

The 'ex' unit is defined by 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 'ex' is defined
even for fonts that don't contain an "x".

Example(s):

The rule:

H1 { line-height: 1.2em }

means that the line height of H1 elements will be 20%
greater than the font size of the H1 elements. On the
other hand:

H1 { font-size: 1.2em }

means that the font-size of H1 elements will be 20%
greater than the font size inherited by H1 elements.

When specified for the root of the document tree
(e.g., "HTML" in HTML), 'em' and 'ex' refer to the
property's initial value.

Pixel units are relative to the resolution of the viewing
device, i.e., most often a computer display. If the pixel
density of the output device is very different from that of
a typical computer display, the user agent should
rescale pixel values. It is recommended that the
reference pixel be the visual angle of one pixel on a
device with a pixel density of 90dpi 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.0227 degrees.

For reading at arm's length, 1px thus corresponds to
about 0.28 mm (1/90 inch). When printed on a laser
printer, meant for reading at a little less than arm's
length (55 cm, 21 inches), 1px is about 0.21 mm. On a
300 dots-per-inch (dpi) printer, that may be rounded up
to 3 dots (0.25 mm); on a 600 dpi printer, it can be
rounded to 5 dots.

The two images below illustrate the effect of viewing
distance on the size of a pixel and the effect of a
device's resolution. In the first image, a reading distance
of 71 cm (28 inch) results in a px of 0.28 mm, while a
reading distance of 3.5 m (12 feet) requires a px of 1.4
mm.

[D]

In the second image, an area of 1px by 1px is covered
by a single dot in a low-resolution device (a computer
screen), while the same area is covered by 16 dots in a
higher resolution device (such as a 400 dpi laser printer).

[D]

Child elements do not inherit the relative values
specified for their parent; they (generally) inherit the
computed values.

Example(s):

In the following rules, the computed 'text-indent' value of
H1 elements will be 36pt, not 45pt, if H1 is a child of the
BODY element.

BODY {
font-size: 12pt;
text-indent: 3em; /* i.e., 36pt */
}
H1 { font-size: 15pt }

Absolute length units are only useful when the physical
properties of the output medium are known. The
absolute units are:

in: inches -- 1 inch is equal to 2.54 centimeters.
cm: centimeters
mm: millimeters
pt: points -- the points used by CSS2 are equal to
1/72th of an inch.
pc: picas -- 1 pica is equal to 12 points.
Example(s):

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 */

In cases where the specified length cannot be
supported, user agents must approximate it in the
actual value.

4.3.1 Integers and real numbers

Matt — Wed, 10 Aug 2005 16:39:16 -0000

Some value types may have integer values (denoted by
<integer>) or real number values (denoted by
<number>). Real numbers and integers are specified in
decimal notation only. An <integer> consists of one or
more digits "0" to "9". A <number> can either be an
<integer>, or it can be zero or more digits followed by a
dot (.) followed by one or more digits. Both integers and
real numbers may be preceded by a "-" or "+" to
indicate the sign.

Note that many properties that allow an integer or real
number as a value actually restrict the value to some
range, often to a non-negative value.

4.2 Rules for handling parsing errors

Matt — Wed, 10 Aug 2005 16:32:15 -0000

In some cases, user agents must ignore part of an
illegal style sheet. This specification defines ignore to
mean that the user agent parses the illegal part (in order
to find its beginning and end), but otherwise acts as if it
had not been there.

To ensure that new properties and new values for
existing properties can be added in the future, user
agents are required to obey the following rules when
they encounter the following scenarios:

Unknown properties. User agents must ignore a
declaration with an unknown property. For example, if
the style sheet is:
H1 { color: red; rotation: 70minutes }

the user agent will treat this as if the style sheet had
been

H1 { color: red }

Illegal values. User agents must ignore a declaration
with an illegal value. For example:
IMG { float: left } /* correct CSS2 */
IMG { float: left here } /* "here" is not a value of 'float' */
IMG { background: "red" } /* keywords cannot be quoted
in CSS2 */
IMG { border-width: 3 } /* a unit must be specified for
length values */

A CSS2 parser would honor the first rule and ignore the
rest, as if the style sheet had been:
IMG { float: left }
IMG { }
IMG { }
IMG { }

A user agent conforming to a future CSS specification
may accept one or more of the other rules as well.

Invalid at-keywords. User agents must ignore an invalid
at-keyword together with everything following it, up to
and including the next semicolon (;) or block ({...}),
whichever comes first. For example, consider the
following:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 { color: blue }

The '@three-dee' at-rule is not part of CSS2. Therefore,
the whole at-rule (up to, and including, the third right
curly brace) is ignored. A CSS2 user agent ignores it,
effectively reducing the style sheet to:

H1 { color: blue }

4.1.9 Comments

Matt — Sun, 07 Aug 2005 00:17:20 -0000

Comments begin with the characters "/*" and end with
the characters "*/". They may occur anywhere between
tokens, and their contents have no influence on the
rendering. Comments may not be nested.

CSS also allows the SGML comment delimiters ("") in certain places, but they do not delimit CSS
comments. They are permitted so that style rules
appearing in an HTML source document (in the STYLE
element) may be hidden from pre-HTML 3.2 user
agents. See the HTML 4.0 specification ([HTML40]) for
more information.

4.1.8 Declarations and properties

Matt — Sun, 07 Aug 2005 00:15:43 -0000

A declaration is either empty or consists of a property,
followed by a colon (:), followed by a value. Around each
of these there may be whitespace.

Because of the way selectors work, multiple
declarations for the same selector may be organized
into semicolon (;) separated groups.

Example(s):

Thus, the following rules:

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

are equivalent to:

H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}

A property is an identifier. Any character may occur in
the value, but parentheses ("( )"), brackets ("[ ]"),
braces ("{ }"), single quotes (') and double quotes (")
must come in matching pairs, and semicolons not in
strings must be escaped. Parentheses, brackets, and
braces may be nested. Inside the quotes, characters
are parsed as a string.

The syntax of values is specified separately for each
property, but in any case, values are built from
identifiers, strings, numbers, lengths, percentages,
URIs, colors, angles, times, and frequencies.

A user agent must ignore a declaration with an invalid
property name or an invalid value. Every CSS2 property
has its own syntactic and semantic restrictions on the
values it accepts.

Illegal example(s):

For example, assume a CSS2 parser encounters this
style sheet:

H1 { color: red; font-style: 12pt } /* Invalid value: 12pt */
P { color: blue; font-vendor: any; /* Invalid prop.: font-
vendor */
font-variant: small-caps }
EM EM { font-style: normal }

The second declaration on the first line has an invalid
value '12pt'. The second declaration on the second line
contains an undefined property 'font-vendor'. The CSS2
parser will ignore these declarations, effectively reducing
the style sheet to:

H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }

4.1.7 Rule sets, declaration blocks, and selectors

Matt — Sat, 06 Aug 2005 21:53:24 -0000

A rule set (also called "rule") consists of a selector
followed by a declaration block.

A declaration-block (also called a {}-block in the
following text) starts with a left curly brace ({) and ends
with the matching right curly brace (}). In between there
must be a list of zero or more semicolon-separated (;)
declarations.

The selector (see also the section on selectors)
consists of everything up to (but not including) the first
left curly brace ({). A selector always goes together with
a {}-block. When a user agent can't parse the selector
(i.e., it is not valid CSS2), it must ignore the {}-block as
well.

CSS2 gives a special meaning to the comma (,) in
selectors. However, since it is not known if the comma
may acquire other meanings in future versions of CSS,
the whole statement should be ignored if there is an
error anywhere in the selector, even though the rest of
the selector may look reasonable in CSS2.

Illegal example(s):

For example, since the "&" is not a valid token in a
CSS2 selector, a CSS2 user agent must ignore the
whole second line, and not set the color of H3 to red:

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

Example(s):

Here is a more complex example. The first two pairs of
curly braces are inside a string, and do not mark the
end of the selector. This is a valid CSS2 statement.

P[example="public class foo\ {\ private int x;\ \ foo(int x) {\ this.x = x;\ }\ \ }"] { color: red }

4.1.6 Blocks

Matt — Sat, 06 Aug 2005 21:45:54 -0000

A block starts with a left curly brace ({) and ends with
the matching right curly brace (}). In between there may
be any characters, except that parentheses (( )),
brackets ([ ]) and braces ({ }) must always occur in
matching pairs and may be nested. Single (') and
double quotes (") must also occur in matching pairs,
and characters between them are parsed as a string.
See Tokenization above for the definition of a string.

Illegal example(s):

Here is an example of a block. Note that the right brace
between the double quotes does not match the opening
brace of the block, and that the second single quote is
an escaped character, and thus doesn't match the first
single quote:

{ causta: "}" + ({7} * '\'') }

Note that the above rule is not valid CSS2, but it is still
a block as defined above.

4.1.5 At-rules

Matt — Sat, 06 Aug 2005 21:40:47 -0000

At-rules start with an at-keyword, an '@' character
followed immediately by an identifier (for
example, '@import', '@page').

An at-rule consists of everything up to and including the
next semicolon (;) or the next block, whichever comes
first. A CSS user agent that encounters an
unrecognized at-rule must ignore the whole of the at-rule
and continue parsing after it.

CSS2 user agents must ignore any '@import' rule that
occurs inside a block or that doesn't precede all rule
sets.

Illegal example(s):

Assume, for example, that a CSS2 parser encounters
this style sheet:

@import "subs.css";
H1 { color: blue }
@import "list.css";

The second '@import' is illegal according to CSS2. The
CSS2 parser ignores the whole at-rule, effectively
reducing the style sheet to:

@import "subs.css";
H1 { color: blue }

Illegal example(s):

In the following example, the second '@import' rule is
invalid, since it occurs inside a '@media' block.

@import "subs.css";
@media print {
@import "print-main.css";
BODY { font-size: 10pt }
}
H1 {color: blue }