-
Notifications
You must be signed in to change notification settings - Fork 756
Resolving colors #871
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Resolving colors #871
Changes from all commits
193d58b
0fa38b6
d5e2321
3008229
5ecbaad
c74c007
d2e2e5d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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> | ||
| </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''. | ||
|
|
||
|
|
@@ -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)''. | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This doesn't match what browsers currently do. Browsers use
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
|
|
@@ -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, | ||
|
|
@@ -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 { | ||
|
|
@@ -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. | ||
|
|
||
|
|
@@ -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", | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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, | ||
|
|
||
There was a problem hiding this comment.
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
colorproperty, since forcolor,currentColorshould 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.)There was a problem hiding this comment.
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.