Re: Altering HTML attributes using CSS

On Thu, Aug 16, 2012 at 1:45 PM, Andy Davies <dajdavies@gmail.com> wrote:
> 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?

Haha, you're ahead of me.  Either today or early next week I'm going
to propose something to the WebApps group that fantasai and I have
been brainstorming, for a way to apply attributes to HTML elements
using CSS syntax.

It won't actually be CSS, and it will be less dynamic in certain
important ways, but it should have the same convenience factor that
you talk about.

~TJ

Received on Friday, 17 August 2012 17:21:35 UTC