[css-env-1] - Pushing data from CSS?

[kizerkizer]

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.

[tabatkins]

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

Yes, this is planned for a future Houdini spec: letting JS process a custom property to produce a "computed value" or "used value", and/or letting JS register "property listeners" on elements that get called when a property's value changes.

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

This can already be done! You can evaluate MQs directly in JS, and register a listener for when they change: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

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

This is another planned Houdini spec: Houdini Custom Functions. ^_^

[kizerkizer]

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

Yes, this is planned for a future Houdini spec: letting JS process a custom property to produce a "computed value" or "used value", and/or letting JS register "property listeners" on elements that get called when a property's value changes.

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

This can already be done! You can evaluate MQs directly in JS, and register a listener for when they change: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

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

This is another planned Houdini spec: Houdini Custom Functions. ^_^

Thank you for the informative reply! Had no idea about media query listeners.