Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 84 additions & 17 deletions css-color/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,11 @@ Foreground Color: the 'color' property</h2>
Inherited: yes
Percentages: N/A
Media: visual
Computed value: an RGBA color
Computed value: See <a>resolving color values</a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is actually wrong for the color property, since for color, currentColor should be resolved at computed value time. (I can't think of how this is observable today, but I'd much prefer it be defined this way.)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've fixed the definition now, so this reference should now be fine.

</pre>

This property describes the foreground fill color of an element's text content.
In addition, it provides the value that ''currentcolor'' resolves to.
If the ''currentcolor'' keyword is set on the 'color' property itself, it is treated as ''color: inherit''.
In addition, it provides the value that ''<color>/currentcolor'' resolves to.

The initial value of this property is ''black''.

Expand Down Expand Up @@ -161,6 +160,81 @@ Notes On Using Colors</h3>
Really? Isn't HD video in Rec.709? Shouldn't video be consistent with images?
Or do implementations really do this differently?

<h2 id='resolving-color-values'>
Resolving Color values</h2>

Various properties accept <<color>> values.
Unless an exception is explicitly defined,
all such properties must <dfn lt="resolve color values|resolving color values">resolve color values</dfn> as defined below
to determine the <a>computed value</a> and the <a>used value</a> for <<color>>.

<ul>
<li>
If ''<color>/currentcolor'' is the specified value of the 'color' property,
it is treated as if the specified value was ''inherit''.

For all other properties that accept a <<color>>,
the computed value of the ''<color>/currentcolor'' keyword is ''<color>/currentcolor'',
and the used value of ''<color>/currentcolor'' is the same as
the used value of the 'color' property on the same element.

Note: This means that if the ''<color>/currentcolor'' value is inherited,
it’s inherited as a keyword,
not as the value of the 'color' property,
so descendants will use their own 'color' property to resolve it.

<li>
The computed value and used value of ''<color>/transparent'' is ''rgba(0, 0, 0, 0)''.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe worth calling out explicitly that the serialization syntax (with commas) differs - for historical reasons - from the comma-less syntax which CSS4 color is now using (commas now being reserved for lists of alternatives).


Issue: Gecko disagrees, and serializes any <<color>> with an alpha channel of 0 as transparent.
No other browser does that though.

<li>
The computed value and used value of
<a>named colors</a> (including <<deprecated-system-color>> colors),
3 and 6 digits <a>hex colors</a>,
4 and 8 digits <a>hex colors</a> with an explicitly opaque alpha channel,
comma separated ''rgb()'' colors without an alpha channel,
comma separated ''rgba()'' colors with an explicitly opaque alpha channel,
comma separated ''hsl()'' colors without an alpha channel,
and comma separated ''hsla()'' colors with an explicitly opaque alpha channel,
is the equivalent numeric value in comma separated ''rgb()'' notation omitting the alpha value.

<li>
The computed value and used value of
4 and 8 digits <a>hex colors</a> with a non opaque alpha channel,
comma separated ''rgba()'' colors with a non opaque alpha channel,
and comma separated ''hsla()'' colors with a non opaque alpha channel,
is the equivalent numeric value in comma separated ''rgba()'' notation with the alpha value.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't match what browsers currently do. Browsers use rgb() for opaque colors even if the color is specified from rgba(). See http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4780

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Added a new commit to reflect that.


</ul>

<div class=issue>
The above defines values that are already implemented
based on the most interoperable behavior.
We still need to define how newer syntaxes work:
* comma-less with slash separated optional alpha variants of ''rgb()'', ''rgba()'', ''hsl()'', ''hsla()''
* comma separated with optional alpha variants of ''rgb()'', ''rgba()'', ''hsl()'', ''hsla()''
* ''device-cmyk()''
* ''hwb()''
* ''lab()'' and ''lch()''
* ''gray()''
* ''color()''
* ''color-mod()''
</div>

Issue: Define if changing the working color space should have any impact on the above.

Issue: Various parts of the spec define
the kind of clamping that should happen to the various numeric notations
when the numbers specified are out of range,
and do so with varrying precision, sometimes saying that this happens at computed value time,
sometimes not saying when it happens,
and sometimes not saying anything at all.
Maybe this should be consolidated here.

Any future specification extending the syntax of <<color>>
must define the how to <a>resolve color values</a> for the new extensions.

<h2 id='numeric-rgb'>
RGB Colors</h2>
Expand Down Expand Up @@ -308,7 +382,7 @@ Named Colors</h2>
Most of the rest
come from one version of the X11 color system,
used in Unix-derived systems to specify colors for the console.
(Two special color values, ''transparent'' and ''currentcolor'',
(Two special color values, ''transparent'' and ''<color>/currentcolor'',
are specially defined in their own sections.)

Note: The history of the X11 color system is interesting,
Expand Down Expand Up @@ -639,20 +713,13 @@ The ''transparent'' keyword</h3>


<h3 id='currentcolor-color'>
The ''currentcolor'' keyword</h3>

The keyword <dfn value for="<color>">currentcolor</dfn> takes its value from the value of the 'color' property on the same element.
This happens at <strong>used-value time</strong>,
which means that if the value is inherited,
it's inherited as ''currentcolor'',
not as the value of the 'color' property,
so descendants will use their <em>own</em> 'color' property to resolve it.
The ''<color>/currentcolor'' keyword</h3>

If ''currentcolor'' is used as the value of the 'color' property,
it instead takes its value from the inherited value of the 'color' property.
The keyword <dfn value for="<color>">currentcolor</dfn> represents value of the 'color' property on the same element.
Its <a>computed value</a> and <a>used values</a> are determined by <a>resolving color values</a>.

<div class='example'>
Here's a simple example showing how to use the ''currentcolor'' keyword:
Here's a simple example showing how to use the ''<color>/currentcolor'' keyword:

<pre class="lang-css">
.foo {
Expand All @@ -673,7 +740,7 @@ The ''currentcolor'' keyword</h3>

<div class='example'>
For example, the 'text-emphasis-color' property [[CSS3-TEXT-DECOR]],
whose initial value is ''currentcolor'',
whose initial value is ''<color>/currentcolor'',
by default matches the text color
even as the 'color' property changes across elements.

Expand All @@ -691,7 +758,7 @@ The ''currentcolor'' keyword</h3>
</div>

Note: Multi-word keywords in CSS usually separate their component words with hyphens.
''currentcolor'' doesn't, because it was originally introduced in SVG
''<color>/currentcolor'' doesn't, because it was originally introduced in SVG
as a special attribute value spelled "currentColor",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it was introduced as a property value (and properties in SVG can be expressed in presentational attributes, as well as in style attributes, style elements, and external stylesheets).

rather than a CSS value.
Only later did CSS pick it up,
Expand Down