Intent to Implement and Ship: CSS UI: caret-color property

70 views
Skip to first unread message

Manuel Rego Casasnovas

unread,
Nov 15, 2016, 7:56:38 AM11/15/16
to blin...@chromium.org

*Contact emails*

re...@igalia.com

*Spec*

https://drafts.csswg.org/css-ui/#propdef-caret-color

The property is in the Candidate Recommendation (CR) and
I've talked to one of the spec editors to confirm it's stable enough.
It's in the "at-risk" section due to lack of implementations
at this point.

*Summary*

This property allows coloring the insertion caret.

*Motivation*

People have been willing to have a bigger control over
the insertion caret, as linked in the original discussion at CSS WG:
https://lists.w3.org/Archives/Public/www-style/2011Nov/0772.html

Bloomberg has been using this feature for a long time,
so hopefully it can be useful for more people too.

*Interoperability risk*

It's a very simple feature that nobody is implementing yet,
so no interoperability risks right now.
There're already some tests on the W3C test suite and
we'll be contributing more if needed:
https://github.com/w3c/csswg-test/tree/master/css-ui-3/

Firefox has a patch that has been stalled for a while:
https://bugzilla.mozilla.org/show_bug.cgi?id=1063162

The rest of the browsers haven't show any public signal about it.

*Compatibility risk*

If the property is not supported, the only difference would be
that the caret wouldn't use the specified color but the current one.
For example in an input element it'll use the color of the text,
instead of the color specified by the property "caret-color".
Anyway the text is expected to have a visible color
so it shouldn't be a big issue.

*Ongoing technical constraints*

We're already setting the color of the caret using the color property,
we'll be just changing this to use the new property.

Regarding testing we can easily add the caret color information
when we run the layout tests.

*Will this feature be supported on all six Blink platforms
(Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?*

Yes.

*OWP launch tracking bug*

https://bugs.chromium.org/p/chromium/issues/detail?id=665422

*Link to entry on the Chrome Platform Status*

https://www.chromestatus.com/feature/5720917787279360

*Requesting approval to ship?*

Yes. This is a very small change so I guess it's not worth to develop
it behind a runtime flag.

PhistucK

unread,
Nov 15, 2016, 8:57:08 AM11/15/16
to Manuel Rego Casasnovas, blink-dev

On Tue, Nov 15, 2016 at 2:56 PM, Manuel Rego Casasnovas <re...@igalia.com> wrote:
  It's a very simple feature that nobody is implementing yet,
  so no interoperability risks right now.

Quite the opposite - the interoperability risk is high precisely because Chrome will be the only browser that implements it.​

  We're already setting the color of the caret using the color property, we'll be just changing this to use the new property.
Changing? Or overriding it (only for the color of the caret, obviously) if it is specified and still use color if it is not specified?
Or will the user agent style be caret-color: currentColor;?

Bloomberg has been using this feature for a long time, so hopefully it can be useful for more people too.
Bonus question - how? It is not implemented. Using a customized Blink based browser?

PhistucK

Manuel Rego Casasnovas

unread,
Nov 15, 2016, 9:11:35 AM11/15/16
to blink-dev, PhistucK


On 15/11/16 14:56, PhistucK wrote:
> On Tue, Nov 15, 2016 at 2:56 PM, Manuel Rego Casasnovas <re...@igalia.com
> <mailto:re...@igalia.com>> wrote:
>> We're already setting the color of the caret using the color
> property, we'll be just changing this to use the new property.
> Changing? Or overriding it (only for the color of the caret, obviously)
> if it is specified and still use color if it is not specified?
> Or will the user agent style be caret-color: currentColor;?

Probably I explained myself badly. In the current code we're already
setting the caret color to the same color than the text on the input [*]

So if caret-color is "auto" (the default value) the spec says:
"User agents should use currentColor".

So in a input with "color: green", the caret by default would be green.
If you set "caret-color: red", the caret will be red.
I hope it's clearer now.

>> Bloomberg has been using this feature for a long time, so hopefully it
> can be useful for more people too.
> Bonus question - how? It is not implemented. Using a customized Blink
> based browser?

Yeah with a downstream patch, they maintain their own Chromium
with some customizations.
But this one has gone through the spec process and seems ready
to be implemented.

Cheers,
Rego

[*]
https://chromium.googlesource.com/chromium/src.git/+/8b8df507bb85f8e398b6120e7bc7b3182966aaa8/third_party/WebKit/Source/core/editing/CaretBase.cpp#190

TAMURA, Kent

unread,
Nov 15, 2016, 6:05:37 PM11/15/16
to Manuel Rego Casasnovas, blink-dev, PhistucK
LGTM1.

--
TAMURA Kent
Software Engineer, Google


Philip Jägenstedt

unread,
Nov 16, 2016, 4:44:35 AM11/16/16
to TAMURA, Kent, Manuel Rego Casasnovas, blink-dev, PhistucK
LGTM2

Chris Harrelson

unread,
Nov 16, 2016, 12:46:14 PM11/16/16
to Philip Jägenstedt, TAMURA, Kent, Manuel Rego Casasnovas, blink-dev, PhistucK
LGTM3

LGTM2
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Reply all
Reply to author
Forward
0 new messages