Re: Altering HTML attributes using CSS

CSS is a declaration of rules being applied in static fashion.
This rule:
  div.hidden { visibility:hidden; }
means "*at any time* when div has class 'hidden' its 'visibility' is 'hidden'"
(if it's not overridden by other rule of course )

But this declaration:

@media all and (min-width: 1024px) {
  html {
      class: +"big-screen";
  }
}
is not clear at all.
Is it like above:
"*at any time* 'class' attribute of html element has 'big-screen' at the end"
or rather this:
"when this rule applied first time its 'class' gets appended by 'big-screen'" ?

If later one then we are entering "transactional CSS" field where
CSS is allowed to handle events (rule-assignment is an event).

Just in case, I've implemented such 'transactional' extension for the CSS named
CSSS! - CSS script:
http://www.terrainformatica.com/htmlayout/csss!.whtm
http://www.terrainformatica.com/htmlayout/csss!-dom-object.whtm
By now we have 3 years experience of using it - feature is pretty
convenient for some simple tasks. But can be over-used. As
any other CSS feature though.

-- 
Andrew Fedoniouk.

http://terrainformatica.com



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
>

Received on Friday, 17 August 2012 20:59:35 UTC