- From: Brian Blakely <anewpage.media@gmail.com>
- Date: Wed, 11 Jun 2014 14:34:32 -0400
- To: "www-style@w3.org" <www-style@w3.org>
- Message-ID: <CAJGQg4EZj4OvU129zBVdY_6L+eCFL9VpRc1iasvYsNNKeOpF4w@mail.gmail.com>
Problem === 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). Proposal === 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. Examples === 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 invalid. 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 above. .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