Intent to Ship: CSS caret-animation property

547 views
Skip to first unread message

Chromestatus

unread,
Oct 10, 2024, 9:17:12 AMOct 10
to blin...@chromium.org, sche...@chromium.org

Contact emails

sche...@chromium.org

Explainer

https://drafts.csswg.org/css-ui/#caret-animation
https://github.com/w3c/csswg-drafts/issues/9707

Specification

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

Summary

Chromium supports animation of the caret-color property, but when animated the default blinking behavior of the caret interferes with the animation. For instance, see the example at https://drafts.csswg.org/css-ui/#caret-animation where an animation from blue to red and back is rendered as a blinking cursor that is randomly blue or red. The CSS caret-animation property has two possible values: auto and manual, where auto means browser default (blinking) and manual means the page author is controlling the caret animation. In addition, via a user stylesheet, it allows users who are disturbed by or have adverse reactions to blinking or flashing visuals to disable the blinking.



Blink component

Blink>CSS

Search tags

caret-color, caret-animation

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility

None



Gecko: Positive Supported the spec change.

WebKit: Neutral In spec discussions, Safari indicated that their caret does not support color animation and cannot be customized, so they are unlikely to implement this spec feature.

Web developers: No signals

Other signals:

Ergonomics

Likely to be used with existing support for caret-color animation to improve the behavior of that feature.



Activation

No risks.



Security

None.



WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No specific Webview risk.



Debuggability

Support in DevTools.



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

Yes

Is this feature fully tested by web-platform-tests?

Yes

Tests will land with the feature. I have confirmed that WPT can be created to test the feature.



Flag name on chrome://flags

Experimental web platform features

Finch feature name

CSSCaretAnimation

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/329301988

Measurement

Through usual CSS feature counters.

Availability expectation

It's in the spec and relatively easy to implement, so I would expect at least Firefox to implement. WebKit maybe not due to more complex caret painting.

Adoption expectation

I would expect almost anyone animating the caret color to use this feature. caret-color itself has over 12% usage per page load. It is rarely animated (maybe 0.016% of loads) but that may well be due to the issues addressed by this change. So I would expect animated caret-color to maybe hit 1% over time.

Adoption plan

I would rely on organic adoption once the feature is out and publicized. I will publicize it.

Non-OSS dependencies

Does the feature depend on any code or APIs outside the Chromium open source repository and its open-source dependencies to function?

None.

Estimated milestones

Shipping on desktop 133
Shipping on Android 133
Shipping on WebView 133


Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

The feature is in the spec draft and was recently discussed and resolved in the working group.

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5082469066604544?gate=5119320993300480

This intent message was generated by Chrome Platform Status.

Alex Russell

unread,
Oct 11, 2024, 2:23:17 PMOct 11
to blink-dev, Chromestatus, Stephen Chenney, ccam...@google.com
Is Apple is pushing back on caret animation for battery life reasons? Do we share that concern?

Best,

Alex

Stephen Chenney

unread,
Oct 12, 2024, 9:49:06 AMOct 12
to Alex Russell, blink-dev, Chromestatus, ccam...@google.com
On Fri, Oct 11, 2024 at 2:23 PM Alex Russell <sligh...@chromium.org> wrote:
Is Apple is pushing back on caret animation for battery life reasons? Do we share that concern?

Fortunately not. The issue for Safari is that they render the caret in a way that defies customization. In the CSS WG discussion the Apple folks were not opposed, they just wanted it to be a "browsers may support this" rather than "must", with @supports to detect the situation.

From a battery perspective using this feature should be a win, or at worst neutral. There will be no invalidation and repainting of the caret due to blinking which would typically save battery. However, the feature is likely to be used with caret-color animation, which does a lot of repainting but the blinking would not add to the cost.

Cheers,
Stephen.

Alex Russell

unread,
Oct 16, 2024, 11:21:42 AMOct 16
to blink-dev, Stephen Chenney, blink-dev, Chromestatus, ccam...@google.com, Alex Russell
Thanks for the detail! LGTM1

Chris Harrelson

unread,
Oct 16, 2024, 11:24:57 AMOct 16
to Alex Russell, blink-dev, Stephen Chenney, Chromestatus, ccam...@google.com
Could you please file formal positions requests for Mozilal and Apple?

Also, CSSWG issue 9707 is still open, why is that?

--
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+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/fddf09e9-6bc7-468b-83cd-cf243ac3a50fn%40chromium.org.

Stephen Chenney

unread,
Oct 16, 2024, 12:14:01 PMOct 16
to Chris Harrelson, Alex Russell, blink-dev, Chromestatus, ccam...@google.com
Thanks for the review.

On Wed, Oct 16, 2024 at 11:24 AM Chris Harrelson <chri...@chromium.org> wrote:
Could you please file formal positions requests for Mozilal and Apple?

 
Also, CSSWG issue 9707 is still open, why is that?

I didn't close the issue when I added WPT tests. Closed now as there are no action items.

Stephen.

Chris Harrelson

unread,
Oct 16, 2024, 7:02:33 PMOct 16
to Stephen Chenney, Alex Russell, blink-dev, Chromestatus, ccam...@google.com
Great. Could you link to the WPT tests also?

Also, FTR: I think this is small enough that an independent TAG review is not necessary.

Stephen Chenney

unread,
Oct 16, 2024, 8:39:34 PMOct 16
to Chris Harrelson, Alex Russell, blink-dev, Chromestatus, ccam...@google.com
I've linked the WPT test for the style code into the status entry and updated the test situation. While I could write a rendering test that worked locally it relies on the caret blinking in web_tests, which is disabled as a flakiness mitigation. I think it's unwise to try to change that given the variable blink rates across browsers and the likely flakiness of any test. I used unit testing for the implementation so we have test coverage and I also manually tested for things like caret browsing (which works fine with the feature and does respect caret-color.

I also added the vendor signals into the status entry.

Stephen.

Yoav Weiss (@Shopify)

unread,
Oct 30, 2024, 6:12:41 AM (6 days ago) Oct 30
to blink-dev, Stephen Chenney, Alex Russell, blink-dev, Chromestatus, ccam...@google.com, Chris Harrelson
LGTM2

It's unfortunate that we can't reliably WPT test this, but I don't think it should be a blocker. Can you file an issue against WPT to let folks know that this is not WPT testable today (without flakiness)?

Thanks for the review.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--
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.

Stephen Chenney

unread,
Oct 30, 2024, 9:18:35 AM (6 days ago) Oct 30
to Yoav Weiss (@Shopify), blink-dev, Alex Russell, Chromestatus, ccam...@google.com, Chris Harrelson

Thanks for the review.

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

--
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+...@chromium.org.

Chris Harrelson

unread,
Oct 30, 2024, 11:13:11 AM (6 days ago) Oct 30
to Stephen Chenney, Yoav Weiss (@Shopify), blink-dev, Alex Russell, Chromestatus, ccam...@google.com
Hi,

I see there was some discussion on the Mozilla standards position with some possible open questions about a11y aspects. Would you consider any of them blocking or needing further work?

Stephen Chenney

unread,
Oct 30, 2024, 11:29:44 AM (6 days ago) Oct 30
to Chris Harrelson, Yoav Weiss (@Shopify), blink-dev, Alex Russell, Chromestatus, ccam...@google.com
The Mozilla folks have some good points that I believe should go back to the CSS WG, particularly the a11y concerns. I'll put some thought into concrete proposals and open up spec issues.

I think shipping is blocked until there is broader browser agreement. Is it OK if I shift the status back to "Dev Trials and Iterate" and enable it with Experimental Web Platform features? Can I cancel the need for API owners to review for now?

Cheers,
Stephen.

Chris Harrelson

unread,
Oct 30, 2024, 11:30:37 AM (6 days ago) Oct 30
to Stephen Chenney, Yoav Weiss (@Shopify), blink-dev, Alex Russell, Chromestatus, ccam...@google.com
Reply all
Reply to author
Forward
0 new messages