Re: Altering HTML attributes using CSS

The @extend concept that is being discussed in this thread[1] allows if
coded properly would allow this concept without changing the content
semantics. In fact, this presentational attribute could be eliminated from
the markup altogether (which is one of the best things about selector
inheritance).

@media all and (max-width: 480px) {
  .twitter-share-button {
    @extend .twitter-share-button[data-size=small];
  }
}
@media all and (min-width: 481px) {
  .twitter-share-button {
    @extend .twitter-share-button[data-size=large];
  }
}

Chris

[1]: http://lists.w3.org/Archives/Public/www-style/2012Aug/0363.html

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?
>
> Cheers
>
> Andy
>
>