RE: CSS Referencing

This kind of referencing is something I have been wanting pretty much ever since I first sat down and typed out 'body{}'. There would have to be some limitations involved such that you're not trying to (for example) set the height of #specificDiv as a reference to .variedClass when divs in variedClass have different heights. (Of course, that only applies when you're setting absolute values... being able to set height.thisdiv to (height.otherdiv/2) would be pretty sweet as well...) Perhaps it would be as simple as requiring that the style being referenced have the property explicitly declared (so you can only reference .variedClass if .variedClass has a height declaration), but there may be use cases outside of this.

However, this and flexbox are probably the last two things left on my wish list, so I would be thrilled to see them implemented.

-----Original Message-----
From: Matthew Wilcox [mailto:elvendil@gmail.com] 
Sent: Thursday, January 05, 2012 7:34 AM
To: www-style@w3.org
Subject: CSS Referencing

There’s a very interesting and pleasing post over at perfplanet called CSS Selector Performance Has Changed! ( http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/

) . It shows how Webkit has been upgraded to have far better selector performance because an engineer shared the sentiment that “authors should not need to worry about optimizing …. , that should be the job of the engine”. (I agree).

What I like even more though is one of the nitty gritty details: the Style Sharing optimisation. This allows the browser to figure out that one element in the style tree has the same styles as something it has already figured out. That’s smart.

And it leads me to a question: Can we not expose the logic behind the Style Sharing for authors to leverage?

I have been asking for years to get CSS able to reference a given elements properties to apply back to the current element. That seems to be more-or-less what Style Sharing is doing, but silently and behind the authors control. Can we not use this as a basis to form something like this:

div.thisdiv { height: (div.otherdiv); }

This would be incredibly useful because it means that styling can at last become independent of the structure of the mark-up. It’s a way to escape the limitation of the cascade. Imagine this:

div.thisdiv { height: (div.otherdiv); }
div.otherdiv { height: (div.thisdiv); }

Boom, equal height divs without the need to rely on mark-up structure.
We could at last link visually related elements even though they are not structurally related.

I’d also like to see:

div { position: (h1); top: 10px; left: 10px; }

To be able to position elements absolutely from a different elements location. Though, that may be much more of a stretch and outside of the scope of what the Webkit internals are doing.

Received on Thursday, 5 January 2012 16:50:20 UTC