[csswg-drafts] [css-env-1] - Pushing data from CSS? (#4911)

kizerkizer has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-env-1] - Pushing data from CSS? ==
https://drafts.csswg.org/css-env-1/

Currently `var` allows "reading" custom properties previously set by CSS or indirectly by JavaScript. Thus this provides a one-way communication bridge between JS and CSS; JS can in effect "transfer" data to stylesheet variables, which can then be utilized as values in rules (via `var`). In this manner features can be "injected" into CSS, such as one common example where a script updates `--mouse-x`, `--mouse-y` custom properties while listening to the `mousemove` event. Any element can then be positioned relative to the current coordinates of the mouse - a handy feature.

However, to my knowledge, there doesn't seem to be an similar way to "transfer" information from CSS to JavaScript. At first, this may seem without merit or nonsensical, given that CSS simply decorates selectable entities (my own terminology). However, after consideration, I started imagining useful and practical scenarios.

For instance, there aren't currently "custom rules", where authors would not only associate a custom property name with a single value, but specify somehow the semantics of applying a custom property against a corresponding custom value syntax. At present, this can be effected to a degree by setting a custom property on a DOM node, or more usefully a DOM subtree's root, and having the descendant elements' rules read from that property in such a way as to act out a rudimentary implementation. This goes hand in hand with the custom elements specification. However, more dynamic custom rules could be implemented with the aid of JS. If there were a way to _push_ data into JavaScript land, perhaps in the form of an event or signal of some sort, then a script could handle the setting of a custom rule on a set of elements without having to watch the DOM and stylesheets for a custom property that is intended to be "JS enhanced". 

Another use-case could be pushing data when media queries are activated; then JS could perhaps make further responsive enhancements (as responsive design is currently the prime motivator for using media queries).

Some other ideas: `calc` could be supplemented with other functions whose implementation is in JS - however, this would be hidden to the user of the function, preserving the declarative, decorative semantics of CSS. Any function could be defined; e.g., string manipulation functions, numeric-valued functions, such as, say, grabbing the width of another element for use in a value (e.g. `height: calc(width(#myDiv) + 2em)`). 

I've been general about how CSS would communicate with JS, but such "custom functions" with JS implementations seem like one natural option, as pairing them with custom properties would allow expressive "custom rules".

Regardless, if there were simply a way to _push_ information to JavaScript, perhaps by just adding one CSS function or property, or something else, then, with the existing custom properties feature-set, an ergonomic collaboration between the two fundamental web techs could be established and developers could make use of more elegant constructions, aside from watching for elements with a certain class or custom property in their computed styles, and then enhancing them from there.

Just a thought - please let me know if I've overlooked an existing proposal, API, feature, etc. Also, I'd appreciate criticism and feedback in general of the idea. Please also ask for clarification as I wrote this in one go.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4911 using your GitHub account

Received on Tuesday, 31 March 2020 00:18:31 UTC