You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
href="https://www.w3.org/TR/CSS2/">CSS2</a>, but also defines new
173
172
properties and values.</p>
174
173
175
-
<p>The Working Group doesn't expect that all implementations of CSS3 will implement
176
-
all properties or values. Instead, there will probably be a small number of variants of CSS3,
177
-
so-called "profiles". For example, it may be that only the profile for 32-bit color user agents
174
+
<p>The Working Group doesn't expect that all implementations of CSS3 will implement
175
+
all properties or values. Instead, there will probably be a small number of variants of CSS3,
176
+
so-called "profiles". For example, it may be that only the profile for 32-bit color user agents
178
177
will include all of the proposed color-related properties and values.
179
178
</p>
180
179
@@ -239,16 +238,16 @@ <h3 id="foreground">Foreground color: the 'color' property</h3>
239
238
<ul>
240
239
<li>The computed value for basic color keywords, RGB hex values and extended color keywords
241
240
is the equivalent triplet of numerical RGB values, e.g. <spanclass="example">six digit hex value or rgb(...) functional value</span>, with an alpha value of 1.
242
-
<li>The computed value of the keyword '<spanclass="index-inst">transparent</span>' is the quadruplet of all zero numerical RGBA values, e.g. <spanclass="example">rgba(0,0,0,0)</span>.
241
+
<li>The computed value of the keyword '<spanclass="index-inst">transparent</span>' is the quadruplet of all zero numerical RGBA values, e.g. <spanclass="example">rgba(0,0,0,0)</span>.
243
242
<li>For all other values, the computed value is the specified value.
244
-
</ul></td>
243
+
</ul></td>
245
244
</tr>
246
245
</tbody>
247
246
</table>
248
247
249
248
<p>This property describes the foreground color of an element's text
250
-
content. In addition it is used to provide a potential indirect value
251
-
(<ahref="#currentcolor" class="index-inst">currentColor</a>) for any <em>other</em> properties that accept color values.
249
+
content. In addition it is used to provide a potential indirect value
250
+
(<ahref="#currentcolor" class="index-inst">currentColor</a>) for any <em>other</em> properties that accept color values.
252
251
If the '<spanclass="index-inst">currentColor</span>' keyword is set on the 'color' property itself, it is treated as ''color: inherit''.
253
252
</p>
254
253
<p>
@@ -271,9 +270,9 @@ <h3 id="foreground">Foreground color: the 'color' property</h3>
271
270
<h3id="transparency">Transparency: the 'opacity' property</h3>
272
271
273
272
<p>
274
-
Opacity can be thought of as a postprocessing operation.
275
-
Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image,
276
-
the opacity setting specifies how to blend the offscreen rendering into
273
+
Opacity can be thought of as a postprocessing operation.
274
+
Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image,
275
+
the opacity setting specifies how to blend the offscreen rendering into
277
276
the current composite rendering.
278
277
See <ahref="#alpha">simple alpha compositing</a> for details.
279
278
</p>
@@ -320,15 +319,15 @@ <h3 id="transparency">Transparency: the 'opacity' property</h3>
320
319
321
320
<dd>Syntactically a <number>. The uniform opacity setting to be applied across an entire object.
322
321
Any values outside the range 0.0 (fully transparent) to 1.0 (fully
323
-
opaque) will be clamped to this range.
322
+
opaque) will be clamped to this range.
324
323
If the object has children,
325
324
then the effect is as if the children
326
325
were blended against the current background using a mask where the
327
326
value of each pixel of the mask is <alphavalue>.
328
327
For SVG, ‘has children’ is equivalent to being a
329
328
container element [[SVG11]].
330
329
</dd>
331
-
330
+
332
331
</dl>
333
332
334
333
<p>Since an element with opacity less than 1 is composited from a
@@ -354,7 +353,7 @@ <h3 id="transparency">Transparency: the 'opacity' property</h3>
@@ -471,9 +470,9 @@ <h4 id="rgba-color">RGBA color values</h4>
471
470
</p>
472
471
<p> The format of an RGBA value in the functional notation is 'rgba('
473
472
followed by a comma-separated list of three numerical values (either
474
-
three integer values or three percentage values), followed by an
473
+
three integer values or three percentage values), followed by an
475
474
<ahref="#alphavaluedt" class="index-inst"><alphavalue></a>, followed by ')'.
476
-
The integer value 255 corresponds to 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8).
475
+
The integer value 255 corresponds to 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8).
477
476
White space characters are allowed around the numerical values.
478
477
</p>
479
478
@@ -490,15 +489,15 @@ <h4 id="rgba-color">RGBA color values</h4>
490
489
</pre>
491
490
</div>
492
491
493
-
<pclass="note"><strong>Note.</strong> If RGBA values are not supported by a user agent,
494
-
they should be treated like unrecognized values per the CSS forward compatibility parsing rules ([[!CSS21]], Chapter 4).
492
+
<pclass="note"><strong>Note.</strong> If RGBA values are not supported by a user agent,
493
+
they should be treated like unrecognized values per the CSS forward compatibility parsing rules ([[!CSS21]], Chapter 4).
495
494
RGBA values must <em>not</em> be treated as simply an RGB value with the opacity ignored.
496
495
</p>
497
496
498
497
499
498
<h4id="transparent">''transparent'' color keyword</h4>
500
499
501
-
<p>CSS1 introduced the ''transparent'' value for the background-color property. CSS2 allowed border-color to also accept the ''transparent'' value. The
500
+
<p>CSS1 introduced the ''transparent'' value for the background-color property. CSS2 allowed border-color to also accept the ''transparent'' value. The
502
501
Open eBook(tm) Publication Structure 1.0.1 [[OEB101]] extended the 'color' property to also accept the ''transparent'' keyword. CSS3 extends the color value to include the ''transparent'' keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.
503
502
</p>
504
503
@@ -521,13 +520,13 @@ <h4 id="hsl-color">HSL color values</h4>
521
520
</li>
522
521
</ul>
523
522
<p>
524
-
There are several other color schemes possible.
525
-
Some advantages of HSL are that it is symmetrical to lightness and darkness
526
-
(which is not the case with HSV for example), and it is trivial to
523
+
There are several other color schemes possible.
524
+
Some advantages of HSL are that it is symmetrical to lightness and darkness
525
+
(which is not the case with HSV for example), and it is trivial to
527
526
convert HSL to RGB.
528
527
</p>
529
528
<p>
530
-
HSL colors are encoding as a triple (hue, saturation, lightness).
529
+
HSL colors are encoding as a triple (hue, saturation, lightness).
531
530
Hue is represented as an angle of the color circle (i.e. the rainbow
532
531
represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a <number> is given.
533
532
By definition red=0=360, and the other colors are spread around the
@@ -541,16 +540,16 @@ <h4 id="hsl-color">HSL color values</h4>
* { color: hsl(120, 75%, 75%) } /* pastel green, and so on */
548
547
</pre>
549
548
</div>
550
549
<p>
551
550
The advantage of HSL over RGB is that it is far more intuitive: you
552
551
can guess at the colors you want, and then tweak. It is also easier to
553
-
create sets of matching colors (by keeping the hue the same and
552
+
create sets of matching colors (by keeping the hue the same and
554
553
varying the lightness/darkness, and saturation)
555
554
</p>
556
555
@@ -567,8 +566,8 @@ <h4 id="hsl-color">HSL color values</h4>
567
566
values (H, S and L) have been normalized to fractions 0..1:
568
567
</p>
569
568
<preclass="code">
570
-
HOW TO RETURN hsl.to.rgb(h, s, l):
571
-
SELECT:
569
+
HOW TO RETURN hsl.to.rgb(h, s, l):
570
+
SELECT:
572
571
l<=0.5: PUT l*(s+1) IN m2
573
572
ELSE: PUT l+s-l*s IN m2
574
573
PUT l*2-m2 IN m1
@@ -577,7 +576,7 @@ <h4 id="hsl-color">HSL color values</h4>
577
576
PUT hue.to.rgb(m1, m2, h-1/3) IN b
578
577
RETURN (r, g, b)
579
578
580
-
HOW TO RETURN hue.to.rgb(m1, m2, h):
579
+
HOW TO RETURN hue.to.rgb(m1, m2, h):
581
580
IF h<0: PUT h+1 IN h
582
581
IF h>1: PUT h-1 IN h
583
582
IF h*6<1: RETURN m1+(m2-m1)*h*6
@@ -1512,9 +1511,9 @@ <h3 id="svg-color">Extended color keywords</h3>
1512
1511
1513
1512
<h3id="currentcolor">''currentColor'' color keyword</h3>
1514
1513
1515
-
<p>CSS1 and CSS2 defined the initial value of
1514
+
<p>CSS1 and CSS2 defined the initial value of
1516
1515
<ahref="https://www.w3.org/TR/REC-CSS1#border-color">the 'border-color' property</a> to be
1517
-
<qcite="https://www.w3.org/TR/REC-CSS1#border-color">the value of the 'color' property</q> but did not define a corresponding keyword. This omission was recognized by SVG, and thus
1516
+
<qcite="https://www.w3.org/TR/REC-CSS1#border-color">the value of the 'color' property</q> but did not define a corresponding keyword. This omission was recognized by SVG, and thus
1518
1517
<ahref="https://www.w3.org/TR/SVG/color.html#ColorProperty">SVG 1.0 introduced the ''currentColor'' value</a>
1519
1518
for the 'fill', 'stroke', 'stop-color', 'flood-color', and 'lighting-color' properties. CSS3 extends the color value to include the ''currentColor'' keyword to allow its use with all properties that accept a <color> value. This simplifies the definition of those properties in CSS3.
1520
1519
</p>
@@ -1539,7 +1538,7 @@ <h4 id="css2-system">CSS2 system colors</h4>
1539
1538
System Colors at all.</p>
1540
1539
1541
1540
<p>The following lists additional values for color-related CSS
1542
-
values and their general meaning. Any color property
1541
+
values and their general meaning. Any color property
1543
1542
can take one of the following names. Although these are case-insensitive, it is
1544
1543
recommended that the mixed capitalization shown below be used, to
1545
1544
make the names more legible.</p>
@@ -1618,21 +1617,21 @@ <h4 id="css2-system">CSS2 system colors</h4>
For example, to set the foreground and background colors of a paragraph
1621
-
to the same foreground and background colors of the user's window,
1620
+
to the same foreground and background colors of the user's window,
1622
1621
write the following:
1623
1622
</p>
1624
1623
<pre>
1625
1624
p { color: WindowText; background-color: Window }
1626
1625
</pre>
1627
1626
</div>
1628
1627
1629
-
<pclass="note"><strong>Note.</strong> The CSS2 System Color values have been deprecated in favor of the CSS3 UI '<ahref="https://www.w3.org/TR/css3-ui/#appearance" class="index-inst">appearance</a>' property. If you want to emulate the look of a user interface related element or control, please use the 'appearance' property instead of attempting to mimic a user interface element through a combination of system colors.</p>
1628
+
<pclass="note"><strong>Note.</strong> The CSS2 System Color values have been deprecated in favor of the CSS3 UI '<ahref="https://www.w3.org/TR/css3-ui/#appearance" class="index-inst">appearance</a>' property. If you want to emulate the look of a user interface related element or control, please use the 'appearance' property instead of attempting to mimic a user interface element through a combination of system colors.</p>
1630
1629
1631
1630
1632
1631
<h3id="notes">Notes on using colors</h3>
1633
1632
1634
1633
<p>Although colors can add significant amounts of information to
1635
-
document and make them more readable, please consider the
1634
+
document and make them more readable, please consider the
1636
1635
W3C Web Content Accessibility Guidelines [[WCAG20]] when including color in your documents.
1637
1636
</p>
1638
1637
<ul>
@@ -1658,14 +1657,14 @@ <h2 id="sample">Sample style sheet for (X)HTML</h2>
1658
1657
<p>This appendix is informative, not normative. This style sheet could be used by an implementation as part of its default styling of HTML4, XHTML1, XHTML1.1, XHTML Basic, and other XHTML Family documents.</p>
1659
1658
1660
1659
<pre>
1661
-
html {
1660
+
html {
1662
1661
color: black;
1663
1662
background: white;
1664
1663
}
1665
1664
1666
1665
1667
1666
/* traditional desktop user agent colors for hyperlinks */
1668
-
:link { color: blue; }
1667
+
:link { color: blue; }
1669
1668
:visited { color: purple; }
1670
1669
1671
1670
/* default focus outline */
@@ -1678,7 +1677,7 @@ <h2 id="sample">Sample style sheet for (X)HTML</h2>
1678
1677
1679
1678
<h2id="profiles">Profiles</h2>
1680
1679
1681
-
<p>Each specification using <spanclass="modulename">CSS3 Color</span> must define the subset of
1680
+
<p>Each specification using <spanclass="modulename">CSS3 Color</span> must define the subset of
1682
1681
CSS3 Color features it allows and excludes, and describe the local meaning of all the
0 commit comments