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 12:32:56 UTC