Altering HTML attributes using CSS

Hi All,

Reading François post of the syntax for CSS Variables and the idea of
a my- prefix for custom properties can I throw another idea in the
ring?

What if we wanted to alter HTML attributes from CSS, so for example at
different viewports we wanted to change a add another CSS class to the
HTML element, set some data- attributes on a widget etc.

For example we might want to control the appearance of the tweet
button based on viewport something like this

@media all and (max-width: 480px) {
	.twitter-share-button {
		data-size: "large";
		data-count: "none";
	}
}

(data-size and data-count would be an example of something that could
really do with a prefix to clarify they aren't CSS properties.)

At the moment the only way to do this is include JS that establishes
the viewport and sets the attributes, leading to duplication of
viewport dimensions in JS and HTML attributes being buried in JS.

I wrote up a bit more about the idea here:
http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/

As and idea it's undoubtable got issues, I think the concept is useful
and can see scenarios where it would be of use, question is does
anyone else and is it worth considering further?

Cheers

Andy

Received on Thursday, 16 August 2012 20:46:02 UTC