effectively the HTML element, and not the BODY element. This will start the containing block at the top
left corner of the document, outside any margins set on the BODY element. Absolutely positioned
elements still scroll with the rest of the document, as they have been absolutely positioned with respect
to the document itself.
In the case of position: fixed, the containing block is the viewport. In Web browsers, the viewport
is the browser’s display window, which means that fixed-position elements will not scroll with the
document and can thus be used in a manner similar to frames. In paged media such as a printout, each
page establishes its own viewport, so a fixed-position element will appear in the same place on each
page.
Horizontal Dimensions
The horizontal dimensions of an absolutely positioned element are set with the properties left,
margin-left, border-left-width, padding-left, width, padding-right, border-rightwidth,
margin-right, and right. The values of these properties, when added together, must equal
the width of the containing block. Negative margins may make the element wider than its containing
block.
There are a number of rules which govern the adjustment of these property values. The rules for nonreplaced
elements (e.g., paragraphs) are as follows:
1. If the property left is set to auto in left-to-right languages, then the value is reset to be
aligned with the same place where the element’s left edge would have been if it still
were a part of the normal flow of the document (i.e., it had not been positioned). If
that point is to the left of the left edge of the containing block, then left will be set to
a negative value. In right-to-left languages, this rule is applied to the property right,
not left.
2. If the property width is set to auto, then any auto values for the properties left
and right are reset to 0. This will have the effect of marking the element and its
margins as wide as the containing block.
3. If the properties left, right, or width are set to auto, then any auto values for
the properties margin-left and margin-right are reset to 0. This will remove
any left or right margins from the element.
4. If the properties margin-left and margin-right are both set to auto, then they
are set to be of equal widths. If the element’s width is set to an explicit length, then
this will have the effect of "centering" the element within its containing block. (If the
Cascading Style Sheets 2.0
15
element’s width is not set to an explicit length, then it must be auto and the
above rule will take effect, setting both margins to 0.)
5. If there is only one property whose value remains auto (i.e., it is not reset by one of
the previous rules), then it is reset to be the length necessary to satisfy the
equation for calculating horizontal dimensions.
6. If all dimensions are set to explicit lengths, and these lengths do not add up to the
width of the containing block, then in left-to-right languages the value of the
property left is reset such that the equation for calculating horizontal dimensions
will be satisfied. In right-to-left languages, it is the property right which is reset.
For replaced elements (e.g., images) which have been absolutely positioned, the rules differ from the
ones just described in two ways. First, if the property width has a value of auto, replace it with the
intrinsic width of the element. Second, since the value of the property width can never be auto, the
third rule (listed previously) is effectively ignored.
In addition, the width of an element can be bounded by the properties min-width and max-width.
These are handled using the following rules:
1. The width is computed as normal (see previous rules).
2. If the value given for the property min-width is greater than that given for maxwidth,
the value of max-width is reset to the value of min-width.
3. If the computed width of the element is greater than max-width, or smaller than
min-width, then the value of the property width is reset to match the appropriate
bounding property.
It may be that a user agent defines its own value for min-width. If so, then the user agent is free to
reset any value for min-width which falls below its internal value.
Vertical Dimensions
The vertical dimensions of an absolutely positioned element are set with the properties top, margintop,
border-top-width, padding-top, height, padding-bottom, border-bottom-width,
margin-bottom, and bottom. The values of these properties, when added together, must equal the
height of the containing block. Negative margins may make the element taller than its containing block.
There are a number of rules which govern the adjustment of these property values. The rules for nonreplaced
elements (e.g., paragraphs) are set out in CSS2 as follows:
1. If the property top is set to auto, then the value is reset to be aligned with the same
place where the element’s top edge would have been if it still were a part of the
normal flow of the document (i.e., it had not been positioned). If that point is above
the containing block, then top will be set to a negative value.
2. If the properties height and bottom are both set to auto, then bottom is reset to
0.
3. If either of the properties bottom or height are set to auto, then any auto values
for the properties margin-top and margin-bottom are reset to 0. This will
remove any top or bottom margins from the element.
4. If the properties margin-top and margin-bottom are both set to auto, then they
are set to be of equal heights. If the element’s height is set to an explicit length,
then this will have the effect of "vertically centering" the element within its
containing block. (If the element’s height is not set to an explicit length, this
means it is set to auto and the previous rule will take effect, setting both margins
to 0.)
5. If there is only one property whose value remains auto (i.e., it is not reset by one of
the previous rules), then it is reset to be the length necessary to satisfy the
equation for calculating horizontal dimensions.
6. If all dimensions are set to explicit lengths, and these lengths do not add up to the
height of the containing block, then the value of the property bottom is reset such
that the equation for calculating horizontal dimensions will be satisfied.
For replaced elements (e.g., images) which have been absolutely positioned, the rules differ from the
ones just described in two ways. First, if the property height has a value of auto, replace it with the
intrinsic height of the element. Second, since the value of the property height can never be auto, the
third rule (listed previously) is effectively ignored.
In addition, the height of an element can be bounded by the properties min-height and max-height.
These are handled using the following rules:
1. The height is computed as normal (see previous rules).
Cascading Style Sheets 2.0
16
2. If the value given for the property min-height is greater than that given for maxheight,
the value of max-height is reset to the value of min-height.
3. If the computed height of the element is greater than max-height, or smaller than
min-height, then the value of the property height is reset to match the
appropriate bounding property.
It may be that a user agent defines its own value for min-height. If so, then the user agent is free to
reset any value for min-height which falls below its internal value.
Note that under these rules, it is impossible to set a combination of property values which will cause an
element to be just tall enough to contain its own content, and no taller (or shorter). This effect is
sometimes called “shrink wrapping,” and its omission has been seen as a serious shortcoming in CSS2.
To redress this situation, there have been proposed errata which change the meaning of height:
auto to "make the element tall enough to display its own content." These errata have not been formally
adopted by the W3C, but they are supported by every known user agent which supports absolute
positioning.
As a basic example, assume for an absolutely positioned element that both margins and padding are
set to 10 pixels in width, the borders have zero width, and the height of the positioned element is
auto. Further assume that top is set to 0, and bottom is set to 100px. Now, further assume that the
content is 260 pixels tall once it has been rendered. This will effectively set height to 260px. This
means that the positioning context would have to be exactly 400 pixels tall in order to satisfy the
equation for calculating vertical dimensions. If the positioning context is actually 475 pixels tall, then
bottom will be reset to 175px.
Font Rules
When a user agent renders text, it must select a font to use. However, almost no font in existence
contains every possible character which might be needed in a document. Thus, the truth is that text is
rendered a character at a time, with the user agent doing its best to locate the needed character from its
list of available fonts. It must not only determine that a character exists, but also whether or not it is
available in the style, weight, and variant which may be requested by the document’s CSS rules.
In these rules, a font family is actually a collection of font faces given a common name. For example,
Times New Roman is really a collection of font faces. Each face depicts a variant of the basic font; thus,
the collection may contain Times New Roman Italic, Times New Roman Bold, and so on. Therefore, a
font face is a variant on the default font in the font family. Thus, the default font will have a name
something like Times New Roman Regular.
Authors do not actually select these faces by name, but instead express preferences for the kind of face
they would like to use through various font-related properties. See the property font, and its related
properties, in Chapter 4 for more details.
Font Family Matching
The author (or the user) can influence this selection process by providing a list of fonts to be used, in
order of preference, in the rendering of an element. The user agent utilizes this list as a part of the rules
for picking which font family to use for the rendering of a given character.
The steps involved in font matching are as follows:
1. In the rendering of a character of text, the user agent builds a list of font properties
which are applicable to the character. The user agent then identifies a font family
which would appear to contain those characteristics, as well as the needed character.
2. If the needed font face cannot be found within the family, the user agent can attempt
advanced handling (described later).
3. If steps 1 and 2 fail, then the user agent should proceed to the next font family in its
font list. The process of font face matching is described in the next section.
4. If the needed font face can be found within the font family, but the needed character
does not exist, then the user agent should proceed to the next font family in its font
list.
5. If the needed character cannot be found in the needed font face, then the user agent
should indicate that the proper character cannot be displayed (e.g., fill the space with
a “missing character” open square).
For example, assume an author declares that an H2 element should be rendered using Helvetica, and
that the text within that element should be boldfaced and italicized. The user agent must first locate the
font family Helvetica and then determine if it contains a font face which is both boldfaced and italicized.
Cascading Style Sheets 2.0
17
If such a face exists, then the user agent checks to make sure that the needed character exists within
the face. If it does, then it is used to render the character, and the user agent moves on to the next
character to start the process over. If the character does not exist in the font face, then the user agent
must look to other fonts to see if they have the needed character in an appropriate face. If the user
agent cannot come up with a suitable match, then it must use a "missing character" symbol to indicate
its failure.
CSS2 provides rules (as mentioned in item 2 in the previous list) for more advanced handling of font
matching. These are:
1. Intelligent font matching. The user agent uses font descriptors such as glyph widths
and x-height to identify an alternate font family choice. If it determines that a match
exists, then that font is used to render the character. This does not change the value
of the property font-family.
2. Font downloading. The user agent attempts to identify a font resource which it can
download and use. It is up to the user agent to decide whether a given font resource
will be useful, and if so, what to do while it waits for the font to finish downloading.
3. Font synthesis. The user agent can attempt to construct its own font, based on font
descriptors such as the panose-1 and x-height values. In fact, all font descriptors
must be provided for font synthesis to take place.
User agents are not required to support any of these advanced mechanisms.
Font Face Matching
During the font family matching process, the user agent must determine if a font has the necessary font
face available. For example, if the author has specified that an element should be italicized, the user
agent must find an italic face of the font being used. Faces are matched as follows:
1. The user agent first attempts to match the face declared in font-style. If the value
given is italic, then any face labeled Italic or Oblique will match. If the value given is
oblique, then only Oblique faces will match.
2. The user agent next attempts to match the face declared in font-variant. If the
value given is small-caps, then any face labeled Small-caps will match. If no such
face exists, then the user agent can generate a substitute by scaling capital letters
from a regular face as needed. As a last resort, the user agent can use regular capital
letters with no scaling. If the value given is normal, then any face not labeled Smallcaps
will match.
3. The user agent matches the value of font-weight. Font weight matching is
described in the next section, and the match can never fail.
4. Last, the font’s size is matched. Since most fonts can be scaled to any necessary
size, this step should never fail.
For example, assume that an author has directed that an element should be both small-caps and italic.
The user agent must locate a face which is both small-caps and italic, if possible. Otherwise, it keeps
looking for a match using the rules given in the previous section.
Font Weight Matching
The property font-weight can accept a number of values, including the nine numeric values 100
through 900 and the values normal and bold. The numeric values are the core of font-weight
matching; the other values (e.g., bold) are treated as human-friendly labels for defined points on the
numeric scale. The weight of a font is matched as follows:
The value normal corresponds to the value 400; bold corresponds to 700.
If the font already has a nine-level weight scale, as in font formats such as OpenType,
that scale is mapped to the values 100 through 900.
If a font has a face labeled Medium as well as one of the labels Book, Regular, Roman,
or Normal, then Medium corresponds to the value 500.
If the font has a face labeled Bold, that face corresponds to the value 700.
If the font contains fewer than nine weights, then the “gaps” are filled as follows:
If the value 500 is unassigned, it corresponds to the same face as that used for the
value 400.
If any of the values 600, 700, 800, or 900 are unassigned, then they correspond to the
next darker weight available. If no darker weight is available, then they correspond to
the next lighter weight.
Cascading Style Sheets 2.0
18
If any of the values 100, 200, or 300 are unassigned, then they correspond to the next
lighter weight available. If no lighter weight is available, then correspond to the next
darker weight.
The majority of fonts will have at least two faces: normal and bold, which are mapped to the values 400
and 700. In such a case, the values 100 through 500 will result in a normal face, while 600 through
900 will yield the darker face.
Let’s pick a more complicated example. Assume a font which contains the following four faces: Meyer
Regular, Meyer Bold, Meyer Light, and Meyer Dark. This last is even darker than the “bold” face. Given
these faces, the weight numbers will be assigned as follows:
Meyer Light: 100, 200, 300
Meyer Regular: 400, 500
Meyer Bold: 600, 700
Meyer Dark: 800, 900
If Meyer Light had not been available as part of the font family, then Meyer Regular would have been
the face used for the values 100 through 500. The rest of the assignments would have gone
unchanged.
Chapter 2: Values
Although authors tend to focus on the properties in CSS, nothing in CSS would work without the values
that are assigned to those properties. After all, you can’t describe the left border of an element without
being able to say what it looks like, and that’s what values do. In many cases, a property will use its own
uniquely defined keywords (e.g., underline or thin). However, there are also many cases where
generic types of values can be used. These generic value types are explained in this chapter.
Value Representations
The property reference chapters (4 through 6) use roughly the same value syntax as that described in
section 1.3.2 of the CSS2 specification. In particular, the same symbolic conventions are used to
indicate alternatives and optional keywords. The grouping symbols are as follows:
A vertical bar (|) is used to separate two or more alternatives when any one, but only one, of
them may be used.
A double vertical bar (||) is used to separate two or more alternatives when any of them may
be used in any order. This operator is stronger than the single vertical bar.
A sequence of several words means that all of them must occur in the order shown. 2A
sequence is stronger than the double vertical bar.
Square brackets ([]) are used to group values together.
Thus, the following two expressions are equivalent:
x y || a b | c || m | n
[x y] || [[a b] | c] || [m | n]
In addition to the grouping symbols, there are also modifier symbols. Any keyword, value type, or group
can be modified using the following symbols.
An asterisk (*) indicates that the preceding value or group may occur zero or more times, with
no defined upper limit.
A plus sign (+) indicates that the preceding value or group must occur one or more times,
with no defined upper limit.
A question mark (?) indicates that the preceding value or group is optional.
A pair of two comma-separated numbers in curly braces ({X,Y}) indicates that the preceding
value or group occurs a minimum of X times and a maximum of Y times. For example,
test{2,5} means that the word test must appear anywhere from two to five times.
Any symbols besides the ones defined here must appear literally. Two such examples are the comma
(,) and slash (/) symbols.
Basic Rules
The most important thing to keep in mind with values is that, when they use a unit, there is no space
between the value and its unit. For example, a distance of four inches is written 4in. Any space
between the value and its associated unit (as in 4 in) will cause browsers to ignore the declaration at
best, and drastically misinterpret it at worst. This is one of the most common mistakes CSS authors
make.
Cascading Style Sheets 2.0
19
It is also the case that values are never quoted (except for string values and some font names). Thus,
the keyword value for the color blue should not be written "blue". Instead, it should be blue. This is
possibly the second most common mistake committed by CSS authors.
Value Reference
Color Values
Color values are used to specify a color (go figure). Typically, these are used to set a color either for the
foreground of an element (i.e., its text) or else for the background of the element. They can also be used
to affect the color of borders and other decorative effects. Any color value is referred to in the property
reference chapters as
Value Types
#RRGGBB
#RRGGBB is the familiar color value format used by traditional HTML authors. In this format, the first
pair of digits corresponds to the red setting, the second pair to green, and the third pair to blue. Each
pair is in hexadecimal notation in the range 00 - FF. Thus, a “pure” green is represented as #00FF00,
"pure" red is written #FF0000, medium gray is #808080, and so forth.
#RGB
This is a shorter form of the six-digit notation just described. In this format, each digit is replicated to
arrive at an equivalent six-digit value; thus, #6A7 becomes #66AA77, "pure" green is represented as
#0F0, and so forth. Medium gray cannot be exactly represented in this format, since it does not use
replicated pairs, but it can be approximated as either #777 or #888.
rgb(rrr%,ggg%,bbb%)
This format allows the author to declare RGB values in the range 0% to 100%. Decimal values are
permitted (e.g., 57.5%). Any values outside the allowed range are clipped to the closest edge of the
range, so that –50% would be clipped to 0%. The value for black is represented as rgb(0%,0%,0%),
"pure" green is written rgb(0%,100%,0%), medium gray is rgb(50%,50%,50%), and so forth.
rgb(rrr,ggg,bbb)
The difference between this format and the previous one is that the accepted range of values is 0 - 255.
Not coincidentally, this range is the decimal equivalent of 00 - FF in hexadecimal notation. As with the
percentage RGB values, any numbers outside the allowed range are clipped to the edges of the range,
so 300 would be clipped to 255. In this format, "pure" blue is represented as rgb(0,0,255), white is
written rgb(255,255,255), medium gray is rgb(128,128,128), and so forth.
CSS defines 16 keywords, which are based on the original Windows VGA palette. The defined
keywords are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow. Some browsers may recognize other keywords, but these
are not (as of this writing) found in any specification and are not guaranteed to work consistently
between browsers, or indeed from version to version in a single browser.
Note Any color value which goes outside the color range of the display medium will be
clipped to the nearest “edge” of the supported colorspace. All RGB colors in CSS
are specified in relation to the sRGB specification; see
http://www.w3.org/Graphics/Color/sRGB.html for more details.
Color choices should be made with legibility and visual impairments in mind. For example, various forms
of color blindness make it difficult to distinguish between red and green, or red and blue; see the Web
Accessibility Initiative (WAI) area of http://www.w3.org/ for more information.
Allowed Properties
The properties which can accept color values are
border-color border-right
border-top-color border-bottom
border-right-color border-left
border-bottom-color color
border-left-color background-color
border text-shadow
border-top outline-color
Cascading Style Sheets 2.0
20
Length Values
Absolute-length values are those which describe a length in the real world, whereas relative-length
values describe a length in relation to some other measure. They are formatted as an optional sign (plus
or minus) followed by a number, followed by a length unit identifier. Any length value is referred to in the
property reference chapters as
Value Types
in (inches)
These are the very inches one can find on almost any American ruler. Although these might seem to be
well-defined, the translation from real world measures to display environments is often ill-defined. For
example, in order to accurately make a font one inch tall, the computer must know precisely the
dimensions of its display environment, and how many pixels there are per inch. This can vary widely
between a 17” monitor and, say, a projection display in a lecture hall. Typically, the only environment in
which length measures can be precisely defined is in print media.
cm (centimeters)
This is the basis of measurement in the non-American part of the world, and a unit generally found even
on American rulers. There are 2.54 centimeters to an inch, and one centimeter equals 0.394 inches. As
with inches, the translation of centimeters to a display environment is ill-defined and likely to be
inaccurate.
mm (millimeters)
As almost the entire world knows, there are 10 millimeters to a centimeter (so you get 25.4 millimeters
to an inch, whereas 1 millimeter equals 0.0394 inches). The same translation-to-display warning applies
to millimeters as well as centimeters and inches.
pt (points)
These are traditional typographical units, and are familiar to most modern authors because they are
used to define text size in every popular word-processing program available in the Western world. By
definition, there are 72 points to an inch, since points were defined in a pre-metric era. Therefore, the
capital letters of text set to 12 points should be a sixth of an inch tall. Points are widely used on the
Web, but as with the other absolute-length units, they do not map consistently into display
environments. For example, 12pt = 12 pixels on most Macintosh systems, whereas Windows systems
may map 12pt to 16 pixels, or 22 pixels, or any number of other pixels. For this reason, points are
strongly discouraged as a unit of measure in screen media. In print media, points are far less dangerous
and can even be quite useful.
pc (picas)
A pica is equivalent to 12 points, so there are 6 picas to an inch. As described in the previous listing, the
capital letters of text set to 1 pica should be a sixth of an inch tall. Also, the same warnings about
translating to display environments apply here.
em (em-height)
In CSS, 1em is equivalent to the height of the character box for a given font. Ems can be used to set
relative sizes for fonts; for example, 1.2em is the same as saying 120%.
ex (x-height)
This refers to the x-height of the font, which is generally defined to be the height of a lowercase “x” that
exists in the chosen font. Unfortunately, the overwhelming majority of fonts available today do not
include a defined x-height, so most browsers approximate 1ex as 0.5em. The exception to this crude
approximation is Internet Explorer 5 for Macintosh, which attempts to determine the actual x-height of a
font by internally bitmapping an "x" and counting the pixels.
px (pixels)
Every computer display is composed of pixels, which are the small dots that make up the entire image.
In CSS terms, however, a pixel is defined to be about the size required to yield 90 pixels per inch. Most
user agents ignore this in favor of simply addressing the pixels on the monitor. Scaling factors may be
used when printing, in order to compensate for the high pixel density of modern printers.
Note If a negative length value is allowed on a given property but cannot be supported
by the user agent, the value should be converted to the closest supported value.
This will most likely mean 0, but it could be some other value.
A length value of 0 does not need one of the unit identifiers to follow it. Any other length value (positive
or negative) must have a unit identifier, or it will be ignored by correctly written user agents.
Cascading Style Sheets 2.0
21
Allowed Properties
The properties which can accept length values are
margin right
margin-top top
margin-right width
margin-bottom max-width
margin-left min-width
padding height
padding-bottom max-height
padding-right min-height
padding-left line-height
padding-top vertical-align
border-top-width marker-offset
border-width size
border-right-width background-position
border-bottom-width font-size
border-left-width text-indent
border text-shadow
border-top letter-spacing
border-right word-spacing
border-bottom border-spacing
border-left outline
bottom outline-width
left
Angle Values
Angle values are formatted as an optional sign (plus or minus) followed by a number, followed by an
angle unit identifier. Any angle value is referred to in the property reference chapters as
Value Types
deg (degrees)
Degrees describe angles using the range 0 – 360, as on compasses; thus a right angle would be
90deg.
grad (gradians)
Gradians describe angles using the range 0–400; thus a right angle would be 100grad.
rad (radians)
Radians describe angles using the range 0–pi (3.14159...); thus a right angle would be 1.57079rad.
Note Negative angles are permitted, but will be converted to their positive equivalent.
Thus, a value of –90deg will be converted to 270deg.
Under CSS2, angle values are used only in aural styles. Because no support for aural styles was
present at the time of writing, there was no known support for angle values.
Allowed Properties
The properties which can accept angle values are
azimuth
elevation
Time Values
Time values are formatted as a number followed by a time unit identifier; thus time values cannot be
negative. Any time value is referred to in the property reference chapters as
No comments:
Post a Comment