Enhance <input type=color> with alpha and colorspace=display-p3 #10456
Conversation
annevk
added
addition/proposal
The new alpha and colorspace attributes give it parity with the 2D canvas API. As part of this change we do away with the "simple color" concept as that has been replaced by CSS colors now. Fixes #3400.
annevk
force-pushed
the
annevk/color-input-improvements
branch
from
a48f1e6
to
1ea2ca0
Compare
| be manipulated by the end user and does not have to be fully opaque.</p> | ||
|
|
||
| <p>The <dfn element-attr for="input"><code data-x="attr-input-colorspace">colorspace</code></dfn> | ||
| attribute may be specified to provide user agents with a hint as to what format is desired by the |
There was a problem hiding this comment.
hint seems a bit weak here, why is that?
| @@ -6762,78 +6762,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute | |||
| </div> | |||
|
|
|||
|
|
|||
| <!--en-GB--><h4 id="colours">Colors</h4> | |||
| <tbody> | ||
| <tr> | ||
| <td><dfn attr-value for="input/colorspace"><code | ||
| data-x="attr-input-colorspace-hex">hex</code></dfn> |
There was a problem hiding this comment.
So if alpha is also returned by the picker you get two values, one for color and one for alpha, like #FF047C and 0.5? Or is that using 8-digit hex?
| <td><dfn attr-value for="input/colorspace"><code | ||
| data-x="attr-input-colorspace-hex">hex</code></dfn> | ||
| <td><dfn data-x="attr-input-colorspace-hexadecimal-state">Hexadecimal</dfn> | ||
| <td>The serialization of the CSS color uses the RGB hexadecimal notation, e.g., "<code |
There was a problem hiding this comment.
| <td>The serialization of the CSS color uses the RGB hexadecimal notation, e.g., "<code | |
| <td>The serialization of the CSS color uses the RGB hexadecimal notation, after conversion to the | |
| <span>'sRGB'</span> color space, e.g., "<code |
| @@ -6916,13 +6853,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute | |||
| <li><p>Return <var>result</var>.</p> | |||
| </ol> | |||
|
|
|||
| </div> | |||
|
|
|||
| <hr> | |||
|
|
|||
| <p class="note">The <span data-x="canvas-context-2d">2D graphics context</span> has a separate | |||
| color syntax that also handles opacity.</p> | |||
There was a problem hiding this comment.
Double-checking this is still worth including here? Maybe it should be rephrased a bit?
| <tr> | ||
| <th> <code data-x="">alpha</code> | ||
| <td> <code data-x="attr-input-alpha">input</code> | ||
| <td> Allow the color's alpha component to be picked and manipulated. |
There was a problem hiding this comment.
| <td> Allow the color's alpha component to be picked and manipulated. | |
| <td> Allow the color's alpha component to be picked and manipulated |
| <tr> | ||
| <th> <code data-x="">colorspace</code> | ||
| <td> <code data-x="attr-input-colorspace">input</code> | ||
| <td> Provides control over the color space of the web-exposed color. |
There was a problem hiding this comment.
| <td> Provides control over the color space of the web-exposed color. | |
| <td> Provides control over the color space of the web-exposed color |
I'm not sure what "web-exposed" is doing here, either...
| element's <span data-x="concept-fe-value">value</span> to a string representing the serialization | ||
| of a CSS color.</p> | ||
|
|
||
| <p class="note" w-nodev>In this state, there is always a CSS color picked, and there is no way to |
There was a problem hiding this comment.
Why add w-nodev here? Seems like useful information for devs.
| data-x="concept-fe-value">value</span> must be set to the result of <span data-x="serialize a | ||
| color well control color">serializing a color well control color</span> given the element and the | ||
| end user's selection. User agents must not allow the end user to set the <span | ||
| data-x="concept-fe-value">value</span> to the empty string.</p> |
There was a problem hiding this comment.
Several of these sentences seem redundant. Maybe only
If the user agent provides a user interface for selecting a CSS color, then the value must be set to the result of serializing a color well control color given the element and the end user's selection.
is needed. If you're imaging the user agent allowing users to set the value in some other way, then I guess
User agents must not allow the user to set the value to a string that running update a color well control color for the element would not set it to.
could also be included. (Although it's confusing there are kind of two separate algorithms used for determining what is allowed.)
But the empty string one seems definitely redundant.
| in the <span data-x="attr-input-colorspace-hexadecimal-state">Hexadecimal</span> state: | ||
|
|
||
| <ol> | ||
| <li><p>Set <var>color</var> to <var>color</var> converted to the <span>'srgb'</span> color |
There was a problem hiding this comment.
Can we link to a colorspace conversion algorithm here?
There was a problem hiding this comment.
Good idea, I suggest https://drafts.csswg.org/css-color-4/#color-conversion
The new alpha and colorspace attributes give it parity with the 2D canvas API.
As part of this change we do away with the "simple color" concept as that has been replaced by CSS colors now.
Fixes #3400.
WebKit can contribute tests as part of implementing this feature.
It would be great to get some help from @svgeesus @tabatkins and @LeaVerou on resolving #8917 so HTML can clearly link a way to serialize CSS color values (for the Hexadecimal state we can continue to maintain that ourselves). I think we have a plan there, but let me know if there's anything still unclear (prolly best in that issue).
(See WHATWG Working Mode: Changes for more details.)
/common-microsyntaxes.html ( diff )
/indices.html ( diff )
/input.html ( diff )