Re: [css4-ui] Styling the caret

Hi,

Lea wrote, in 2011:

> Something like:
>
> Name: caret
> Value: auto | <color> | invert
[…]
> Implementors, would this be possible?

Here are a couple of thoughts:

We should drop the invert keyword. All modern browser engines rely on
compositing engines, and the 'invert' keyword is really painful there.

Secondly, some RTE developers will want the caret to have a particular
color throughout the editing area. In the current proposal they can do
this by setting caret to an explicit <color>:

[contenteditable] {
  background: white;
  color: black;
  caret: #639;
}

But what if they want to set the caret color to be the same as the
foreground color of the editable area, whatever that may be? You might
think that they can use the 'auto' keyword:

[contenteditable] {
  background: white;
  color: black;
  caret: auto;
}

But consider this case (where the | represents the caret):

<div contenteditable>
…<p style=color:red>this paragraph | is red</p>…
</div>

If the RTE developer uses the 'auto' keyword, the caret will be red,
when they intended it to be black. (The p inherits caret: auto, and auto
means currentColor, so it's the p's currentColor, not the div's.)

I suspect we need a new keyword for this case. Bikeshedding welcome.


Ted

P.S. We're tracking work on this in <http://webkit.org/b/135920>.

Received on Friday, 15 August 2014 21:16:58 UTC