Skip to content

Commit 47d3595

Browse files
committed
[CSS2] define <color> by reference to CSS Color 3
Fixes w3c#628. See also: w3c#5114.
1 parent b7208d5 commit 47d3595

File tree

1 file changed

+20
-221
lines changed

1 file changed

+20
-221
lines changed

css2/Overview.bs

Lines changed: 20 additions & 221 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,14 @@ Required IDs: abs-non-replaced-height, abs-non-replaced-width, absolutely-positi
167167
}
168168
}
169169
</pre>
170+
171+
<pre class=link-defaults>
172+
spec:css-color-3; type:value; text:blue
173+
spec:css-color-3; type:value; text:red
174+
spec:css-color-3; type:value; text:silver
175+
</pre>
176+
177+
170178
<style type="text/css">
171179
span.colorsquare { float:left; width:5em; height:3em; text-align:center; padding:1.2em 0 .8em }
172180
span.colorname { font-weight:bold }
@@ -2684,142 +2692,16 @@ p:before {content: counter(par-num, upper-roman) ". "}
26842692
</div>
26852693

26862694
<h4 id="color-units">Colors</h4>
2687-
<p>
2688-
A <dfn id="value-def-color">&lt;color&gt;</dfn>
2689-
is either a keyword or a numerical RGB specification.
2690-
</p>
2691-
<p data-dfn-for="<color>" data-dfn-type="value"> The list of color keywords is:
2692-
<dfn id="valdef-color-aqua">aqua</dfn>,
2693-
<dfn id="valdef-color-black">black</dfn>,
2694-
<dfn id="valdef-color-blue">blue</dfn>,
2695-
<dfn id="valdef-color-fuchsia">fuchsia</dfn>,
2696-
<dfn id="valdef-color-gray">gray</dfn>,
2697-
<dfn id="valdef-color-green">green</dfn>,
2698-
<dfn id="valdef-color-lime">lime</dfn>,
2699-
<dfn id="valdef-color-maroon">maroon</dfn>,
2700-
<dfn id="valdef-color-navy">navy</dfn>,
2701-
<dfn id="valdef-color-olive">olive</dfn>,
2702-
<dfn id="valdef-color-orange">orange</dfn>,
2703-
<dfn id="valdef-color-purple">purple</dfn>,
2704-
<dfn id="valdef-color-red">red</dfn>,
2705-
<dfn id="valdef-color-silver">silver</dfn>,
2706-
<dfn id="valdef-color-teal">teal</dfn>,
2707-
<dfn id="valdef-color-white">white</dfn>,
2708-
and
2709-
<dfn id="valdef-color-yellow">yellow</dfn>.
2710-
These 17 colors have the following values:
2711-
</p>
2712-
2713-
<div class="colordiagram" id="TanteksColorDiagram20020613">
2714-
<div class="diagramrow">
2715-
<span class="colorsquare" style="background:maroon;color:white"><span class="colorname">maroon</span> #800000
2716-
</span><span class="colorsquare" style="background:red"><span class="colorname">red</span> #ff0000
2717-
</span><span class="colorsquare" style="background:orange"><span class="colorname">orange</span> #ffA500
2718-
</span><span class="colorsquare" style="background:yellow"><span class="colorname">yellow</span> #ffff00
2719-
</span><span class="colorsquare" style="background:olive;color:white"><span class="colorname">olive</span> #808000</span>
2720-
</div>
2721-
<div class="diagramrow">
2722-
<span class="colorsquare" style="background:purple;color:white"><span class="colorname">purple</span> #800080</span>
2723-
<span class="colorsquare" style="background:fuchsia"><span class="colorname">fuchsia</span> #ff00ff</span>
2724-
<span class="colorsquare" style="background:white"><span class="colorname">white</span> #ffffff</span>
2725-
<span class="colorsquare" style="background:lime"><span class="colorname">lime</span> #00ff00</span>
2726-
<span class="colorsquare" style="background:green;color:white"><span class="colorname">green</span> #008000</span>
2727-
</div>
2728-
<div class="diagramrow" style="padding:0 2.5em">
2729-
<span class="colorsquare" style="background:navy;color:white"><span class="colorname">navy</span> #000080</span>
2730-
<span class="colorsquare" style="background:blue"><span class="colorname">blue</span> #0000ff</span>
2731-
<span class="colorsquare" style="background:aqua"><span class="colorname">aqua</span> #00ffff</span>
2732-
<span class="colorsquare" style="background:teal;color:white"><span class="colorname">teal</span> #008080</span>
2733-
</div>
2734-
<div class="diagramrow" style="padding:0 5em">
2735-
<span class="colorsquare" style="background:black;color:white"><span class="colorname">black</span> #000000</span>
2736-
<span class="colorsquare" style="background:silver"><span class="colorname">silver</span> #c0c0c0</span>
2737-
<span class="colorsquare" style="background:gray;color:white"><span class="colorname">gray</span> #808080</span>
2738-
</div>
2739-
</div>
2740-
2741-
<p>
2742-
In addition to these color keywords, users may specify
2743-
keywords that correspond to the colors used by certain objects in the
2744-
user's environment. Please consult the section on <a href="#system-colors">system colors</a> for more information.
2745-
</p>
27462695

2747-
<div class="example">
2748-
<pre class="lang-css">
2749-
body {color: black; background: white }
2750-
h1 { color: maroon }
2751-
h2 { color: olive }
2752-
</pre>
2753-
</div>
2696+
<span id=TanteksColorDiagram20020613></span>
27542697

2755-
<p>The RGB color model is used in numerical color
2756-
specifications. These examples all specify the same color:
2757-
</p>
2758-
<div class="example">
2759-
<pre class="lang-css">
2760-
em { color: #f00 } /* #rgb */
2761-
em { color: #ff0000 } /* #rrggbb */
2762-
em { color: rgb(255,0,0) }
2763-
em { color: rgb(100%, 0%, 0%) }
2764-
</pre>
2765-
</div>
2766-
2767-
<p> The format of an RGB value in hexadecimal notation is a ''#''
2768-
immediately followed by either three or six hexadecimal
2769-
characters. The three-digit RGB notation (#rgb) is converted into
2770-
six-digit form (#rrggbb) by replicating digits, not by adding
2771-
zeros. For example, #fb0 expands to #ffbb00. This ensures that
2772-
white (#ffffff) can be specified with the short notation (#fff) and
2773-
removes any dependencies on the color depth of the display.
2774-
</p>
2775-
<p> The format of an RGB value in the functional notation is ''rgb(''
2776-
followed by a comma-separated list of three numerical values (either
2777-
three integer values or three percentage values) followed by '')''.
2778-
The integer value 255 corresponds to 100%, and to F or FF in the
2779-
hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) =
2780-
#FFF. <a href="#whitespace">White space</a> characters are allowed
2781-
around the numerical values.
2782-
</p>
2783-
<p>All RGB colors are specified in the sRGB color space (see
2784-
[[!SRGB]]). User agents may vary in the fidelity with which they
2785-
represent these colors, but using sRGB provides an unambiguous and
2786-
objectively measurable definition of what the color should be, which
2787-
can be related to international standards (see [[!COLORIMETRY]]).
2788-
</p>
2789-
<p><a href="#conformance">Conforming user agents</a> may
2790-
limit their color-displaying efforts to performing a gamma-correction
2791-
on them. sRGB specifies a display gamma of 2.2 under specified viewing
2792-
conditions. User agents should adjust the colors given in CSS such that,
2793-
in combination with an output device's "natural" display gamma, an
2794-
effective display gamma of 2.2 is produced. <!--See the section on <a href="colors.html#gamma-correction">gamma correction</a> for further
2795-
details.--> Note that only colors specified in CSS are affected; e.g.,
2796-
images are expected to carry their own color information.
2797-
</p>
2798-
<p>Values outside the device gamut should be clipped or
2799-
mapped into the gamut when the gamut is known: the red, green,
2800-
and blue values must be changed to fall within the range supported by
2801-
the device. User agents may perform higher quality mapping of colors
2802-
from one gamut to another. For a typical CRT monitor, whose device
2803-
gamut is the same as sRGB, the four rules below are equivalent:
2804-
</p>
2805-
<div class="example">
2806-
<pre class="lang-css">
2807-
em { color: rgb(255,0,0) } /* integer range 0 - 255 */
2808-
em { color: rgb(300,0,0) } /* clipped to rgb(255,0,0) */
2809-
em { color: rgb(255,-10,0) } /* clipped to rgb(255,0,0) */
2810-
em { color: rgb(110%, 0%, 0%) } /* clipped to rgb(100%,0%,0%) */
2811-
</pre>
2812-
</div>
2813-
2814-
<p>Other devices, such as printers, have different gamuts than sRGB;
2815-
some colors outside the 0..255 sRGB range will be representable
2816-
(inside the device gamut), while other colors inside the 0..255 sRGB
2817-
range will be outside the device gamut and will thus be mapped.
2818-
</p>
2819-
<div class="note"><p><em><strong>Note.</strong> Mapping or clipping of
2820-
color values should be done to the actual device gamut if known (which
2821-
may be larger or smaller than 0..255).</em>
2822-
</div>
2698+
In Level 2,
2699+
a <dfn id="value-def-color">&lt;color&gt;</dfn> is:
2700+
a [[css-color-3#html4|basic color keyword]],
2701+
a [[css-color-3#rgb-color|RGB color value]],
2702+
the keyword <code class=css>orange</code> from [[css-color-3#svg-color]], or
2703+
a [[css-color-3#css-system|system color]].
2704+
[[!CSS3COLOR]]
28232705

28242706
<h4 id="strings">Strings</h4>
28252707

@@ -15314,93 +15196,10 @@ If that cursor format was also not supported, the UA would skip to the next valu
1531415196

1531515197
<h3 id="system-colors">System Colors</h3>
1531615198

15317-
<div class="note"><p><em><strong>Note.</strong>
15318-
The System Colors are deprecated in the CSS3 Color Module [[CSS3COLOR]].
15319-
</em></p>
15320-
</div>
15321-
15322-
<p>In addition to being able to assign pre-defined <a href="#color-units">color values</a> to text, backgrounds, etc., CSS2&nbsp;(1998) introduced a set of named color values that allows authors to specify colors in a manner that integrates them into the operating system's graphic environment.
15323-
</p>
15324-
15325-
<p>For systems that do not have a corresponding value, the
15326-
specified value should be mapped to the nearest system value, or to a default color.</p>
15327-
15328-
<p>The following lists additional values for color-related CSS properties and their general meaning. Any color property (e.g., 'color' or 'background-color') can take
15329-
one of the following names. Although these are case-insensitive, it is
15330-
recommended that the mixed capitalization shown below be used, to
15331-
make the names more legible.</p>
15332-
15333-
<dl>
15334-
<dt>ActiveBorder</dt>
15335-
<dd>Active window border.</dd>
15336-
<dt>ActiveCaption</dt>
15337-
<dd>Active window caption.</dd>
15338-
<dt>AppWorkspace</dt>
15339-
<dd>Background color of multiple document interface.</dd>
15340-
<dt>Background</dt>
15341-
<dd>Desktop background.</dd>
15342-
<dt>ButtonFace</dt>
15343-
<dd>Face color for three-dimensional display elements.</dd>
15344-
<dt>ButtonHighlight</dt>
15345-
<dd>Highlight color for three-dimensional display elements (for
15346-
edges facing away from the light source).</dd>
15347-
<dt>ButtonShadow</dt>
15348-
<dd>Shadow color for three-dimensional display elements.</dd>
15349-
<dt>ButtonText</dt>
15350-
<dd>Text on push buttons.</dd>
15351-
<dt>CaptionText</dt>
15352-
<dd>Text in caption, size box, and scrollbar arrow box.</dd>
15353-
<dt>GrayText</dt>
15354-
<dd>Grayed (disabled) text. This color is set to #000 if
15355-
the current display driver does not support a solid gray color.</dd>
15356-
<dt>Highlight</dt>
15357-
<dd>Item(s) selected in a control.</dd>
15358-
<dt>HighlightText</dt>
15359-
<dd>Text of item(s) selected in a control.</dd>
15360-
<dt>InactiveBorder</dt>
15361-
<dd>Inactive window border.</dd>
15362-
<dt>InactiveCaption</dt>
15363-
<dd>Inactive window caption.</dd>
15364-
<dt>InactiveCaptionText</dt>
15365-
<dd>Color of text in an inactive caption.</dd>
15366-
<dt>InfoBackground</dt>
15367-
<dd>Background color for tooltip controls.</dd>
15368-
<dt>InfoText</dt>
15369-
<dd>Text color for tooltip controls.</dd>
15370-
<dt>Menu</dt>
15371-
<dd>Menu background.</dd>
15372-
<dt>MenuText</dt>
15373-
<dd>Text in menus.</dd>
15374-
<dt>Scrollbar</dt>
15375-
<dd>Scroll bar gray area.</dd>
15376-
<dt>ThreeDDarkShadow</dt>
15377-
<dd>Dark shadow for three-dimensional display elements.</dd>
15378-
<dt>ThreeDFace</dt>
15379-
<dd>Face color for three-dimensional display elements.</dd>
15380-
<dt>ThreeDHighlight</dt>
15381-
<dd>Highlight color for three-dimensional display elements.</dd>
15382-
<dt>ThreeDLightShadow</dt>
15383-
<dd>Light color for three-dimensional display elements
15384-
(for edges facing the light source).</dd>
15385-
<dt>ThreeDShadow</dt>
15386-
<dd>Dark shadow for three-dimensional display elements.</dd>
15387-
<dt>Window</dt>
15388-
<dd>Window background.</dd>
15389-
<dt>WindowFrame</dt>
15390-
<dd>Window frame.</dd>
15391-
<dt>WindowText</dt>
15392-
<dd>Text in windows.</dd>
15393-
</dl>
15394-
15395-
<div class="example"><p>
15396-
For example, to set the foreground and background colors of a paragraph
15397-
to the same foreground and background colors of the user's window,
15398-
write the following:
15399-
</p>
15400-
<pre class="lang-css">
15401-
p { color: WindowText; background-color: Window }
15402-
</pre>
15403-
</div>
15199+
Note: This section previously defined the system colors,
15200+
however the are now defined as part of the base <<color>> definition
15201+
through reference to [[css-color-3#css-system]].
15202+
This section is preserved to maintain section numbering from earlier revisions.
1540415203

1540515204
<h3 id="system-fonts">User preferences for fonts</h3>
1540615205

0 commit comments

Comments
 (0)