[css-env] Allow authors to configure a few settings from within CSS (CSS @config)

[bramus]

(This was originally presented during the lightning round at the 2023 F2F in Cupertino)

This is a bit of controversial idea that has been lingering in the back of my mind. Basically, I’ve seen the need for authors to configure some things on a page, and it would be nice if they could do that from within CSS.

I am thinking of configuration settings like MPA View Transitions or other things that typically go into a meta tag. An example here is the switch to control the viewport resizing behavior when the virtual keyboard gets shown (see https://drafts.csswg.org/css-viewport/#interactive-widget-section)

I haven’t thought this entirely through (insert chuckle by some of you here) but am thinking of an @config at-rule for that. In it, you could put some things like the interactive-widget configuration.

@config {
  interactive-widget: resize-viewport;
}

To make it a bit more controversial – because why not? – maybe it could also be extended to include some global rendering settings/switches? I am thinking of things like being able to choose the type of scrollbars, change where PosFixed should be laid out against, or maybe even crazy things like disabling margin collapsing entirely (:evil:)?

@config {
  scrollbar-type: overlay;
  margin-collapse: off; 
  view-transitions: same-page, same-origin;
  interactive-widget: resize-viewport;
  fixed-pos: layout-viewport;
  …
}

There of course should be some requirements concerning this at-rule. Most values in it should only be set once, and cannot be changed on the fly. For example, you don’t want to change the scrollbar type during the lifetime of a page. Some descriptors otoh might be eligible to being changed. I am thinking of the MPA view transitions settings. For that to work properly, the at-rule would need to be able to cascade.

I know something similar has been suggested in the past. There’s a @css3 entry in the FAQ on the wiki – https://wiki.csswg.org/faq#versioning-css-fixing-design-mistakes

It was discarded at the time, but I think this might work in todays browsers;

• This here is not an all or nothing opt-in, but allows you to cherry pick what you want to change.
• No rulesets would go in this @config block, only config-descriptors.
• Authors have at-rule(), which allows them to sniff out support for certain config-descriptors

On the downside, I do definitely see that things like changing margin collapsing would but a burden on devs, as they would need to maintain two code paths for quite some time. Don’t let such a descriptor discard all possible other ones that might make more sense.

[bramus]

Another issue where this could be useful: #6323 – to determine the order/priority of unlayered styles when using cascade layers.

[Crissov]

To me, this feels like it should be handled together with environment variables as part of css-env.

[bramus]

Another feature where @config could be (~ could have been) useful: interpolate-size: #10294 (comment)

@config {
  interpolate-size: allow-keywords;
}

[bramus]

Another one: Flow-relative syntax for margin-like shorthands: #1282

@config {
  flow-mode: relative | physical;
}