W3C home > Mailing lists > Public > www-style@w3.org > June 2014

Cross Referencing Between Elements

From: Brian Blakely <anewpage.media@gmail.com>
Date: Wed, 11 Jun 2014 14:34:32 -0400
Message-ID: <CAJGQg4EZj4OvU129zBVdY_6L+eCFL9VpRc1iasvYsNNKeOpF4w@mail.gmail.com>
To: "www-style@w3.org" <www-style@w3.org>

Being able to define property values in the context of other elements'
traits is long overdue.  The thought pattern "I want THIS element to be
based on THAT element" applies to perhaps every new CSS developer (until
they learn that option is not available).


A new bit a syntax that most developers may recognize, altered for CSS:

$(selector property [fallback])

The first argument (selector) behaves like querySelector in JavaScript,
supplying the first element in the DOM to match the given selector.  Quotes
are required if the selector includes spaces or other special characters.

The second argument (property) specifies the CSS property whose value the
author would like to extract from the matched element.

The third argument (fallback) defines a value to return in the event that
the selector does not match any existing element, either during initial
parse, or as the result of subsequent DOM mutations.


First Example:

.foo {
  width: calc( $(.bar width 90vw) - 200px );

In the above, elements with class foo have a width that is 200px less than
the first matched element with class bar.  If .bar's width changes during
the lifetime of the app, so should all .foo's.

Second Example:

.foo {
  transform: $('body > span:nth-child(3)' transform translateZ(0));

In this example, elements with class foo all inherit their transform value
directly from the element matching the selector.

Error Handling

If a fallback argument is not provided, and the selector does not (or no
longer) matches an element, then the entire property value is regarded as

Backwards Compatibility

In the event that the user agent does not support the cross-reference
function, authors are advised to supply the fallback value on its own line

.foo {
  width: calc( 90vw - 200px );
  width: calc( $(.bar width 90vw) - 200px );

Known Issues

The fallback argument is syntactically brittle right now.  Allowing the
entire range of CSS values as arguments for another function opens the door
for high orders of complexity.  Perhaps the "Backwards Compatibility"
solution should be the *only* fallback solution, but double properties by
design isn't very readable.
Received on Wednesday, 11 June 2014 18:35:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:22 UTC