Intent to Prototype: CSS toggles

595 views
Skip to first unread message

David Baron

unread,
Apr 15, 2022, 10:19:19 AM4/15/22
to blink-dev

Contact emails

dba...@chromium.org, ns...@google.com

Explainer

https://css.oddbird.net/toggles/explainer/

Specification

https://tabatkins.github.io/css-toggle/

Summary

CSS toggles are a mechanism for associating toggleable state with a DOM element. This state can be defined and connected to activations through CSS properties, and can be queried in CSS selectors. This provides a declarative mechanism for specifying state that describes behaviors like the existing HTML behaviors for checkboxes or radio buttons.


Blink component

Blink>DOM

Motivation

There are many cases where a user interaction (such as a click) toggles state that styles depend on. These cases include popups, tabs, carousels, accordions, and toggles controlling light/dark mode. Building these today requires Javascript. We would like to build a declarative way of doing this that, if we do it right, will be easier for developers to use, faster, and more accessible than the solutions that are used today.


Additional context

I'd like to emphasize that this intent to prototype really is an intent to prototype. The goal here is to build an implementation that can be used to guide the design of this feature (by giving those involved an implementation to test), not to build something that we'd like to ship quickly.


Before we would consider shipping something in this space, we would (among other things) want to do further testing to validate that the result is more accessible than what people use today (or learn that we need to build in more distinctions that can be reflected into accessibility roles), and do additional development of the things that we hope can be built on top of toggles to validate that it works as a primitive.


Initial public proposal

https://github.com/w3c/csswg-drafts/issues/6991

TAG review


TAG review status

Pending (just filed)

Risks


Interoperability and Compatibility


Gecko: No signal

WebKit: No signal

Web developers: No direct signals, but what kicked off the original designs here was OpenUI work around tabs (see, e.g., https://open-ui.org/components/tabs.research ).

Other signals:

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.



Debuggability

New CSS properties and CSS selectors should be debuggable in the same way that all existing properties and selectors are. If this turns into something that we want to ship, we will probably want to add additional devtools support for understanding the underlying toggle states, but we don't want to do so this early in the prototyping process.


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

No, though I plan to add tests as I write the code

Flag name

CSSToggles

Requires code in //chrome?

False

Tracking bug

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

Estimated milestones

No milestones specified


Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5072281125519360

This intent message was generated by Chrome Platform Status and then edited by hand.

Mike Taylor

unread,
Apr 19, 2022, 10:32:56 AM4/19/22
to David Baron, blink-dev
Hi David,

On 4/15/22 10:19 AM, David Baron wrote:

A question came up in Security & Privacy review today. Can you clarify what "persistent state" means in https://tabatkins.github.io/css-toggle/#toggles? I suspect we're not re-inventing cookies in CSS here, but can you help me understand what that means in the context of CSS toggles? Does it just mean that once set, other CSS properties can't influence the state? Or "persistent state (for the lifetime of the page)"?

--
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/CAG0MU3hE3gnQQNHTD7hT-jukBYFgwTXbYZQWSS1iJVXn9J7iyg%40mail.gmail.com.


David Baron

unread,
Apr 19, 2022, 1:07:04 PM4/19/22
to Mike Taylor, blink-dev
On Tue, Apr 19, 2022 at 10:32 AM Mike Taylor <mike...@chromium.org> wrote:

A question came up in Security & Privacy review today. Can you clarify what "persistent state" means in https://tabatkins.github.io/css-toggle/#toggles? I suspect we're not re-inventing cookies in CSS here, but can you help me understand what that means in the context of CSS toggles? Does it just mean that once set, other CSS properties can't influence the state? Or "persistent state (for the lifetime of the page)"?


I think what the "persistent state" bit is saying is that once a toggle is created on an element (by the toggle-root property), the toggle doesn't go away even if the toggle-root property changes.  It's definitely not something like cookies, since the state doesn't get transferred to other pages or to fresh loads of the same page.

(I haven't thought much about the question yet, but it's possible that it might be something like form control state that gets persisted specially during back/forward navigation even when the entire page isn't cached.  I suspect that may cause more problems than it fixes, though.)

-David 

Mike Taylor

unread,
Apr 19, 2022, 1:54:01 PM4/19/22
to David Baron, blink-dev

Thanks David - that's helpful.

Reply all
Reply to author
Forward
0 new messages