HTMLattribute : [operator] value
e.g.
HTMLattribute : value // set value
HTMLattribute : +value // add value e.g. to lists such as class, rel
HTMLattribute : -value // remove value from list
HTMLattribute : ^value // toggle value - remove if there, add if not
The syntax needs improving, for example the HTML attributes probably need prefixing to
prevent clashes with CSS properties that share the same name.
I'm also not sure about the list operators, but the syntax is good enough to illustrate
some of the ways the idea might be useful.
Classes as hooks for javascript e.g. conditional loading
The class and rel attributes sometimes get used as hooks for javascript but what if we want
to add a hook that depends on viewport size?
We could use matchMedia(), but as Jeremy Keith points
out in Conditionally loading content , using matchMedia()
requires maintaining breakpoints in more than one place.
Jeremy eventually chose the option of generating a hidden marker on the body element using
:after (see Conditional CSS ), it works but it's a bit
of a hack.
What if we could just add a class directly using CSS and use that as the hook for our
javascript?
/* add class big-screen to html element */
@media all and ( min-width : 1024px ) {
html {
class : + "big-screen" ;
}
}
Data- attributes for configuration of widgets e.g. tweet buttons etc.
jQuery mobile, social media buttons and other widgets are increasingly using HTML5 data-
attributes for configuration.
The tweet button has options such as big buttons vs little buttons, counts, count position
etc., all controlled via data- attributes.
In smaller viewports we might want to make the tweet button larger so it's easier to touch,
and free up some room by hiding the count.
/* set the data- attributes that makes button bigger and removes tweet count */
@media all and ( max-width : 480px ) {
.twitter-share-button {
data - size : "large" ;
data - count : "none" ;
}
}
Swapping content
The srcset / picture proposals will help resolve the responsive images problem, so we
probably don't need another solution but as a use-case it shows how updating HTML attributes
could be used to swap content, while still keeping all the content in HTML.
<!-- img element that uses data- attributes to declare images, keeping content in HTML -->
<img src= "small.jpg" data-src-med= "medium.jpg" data-src-lge= "large.jpg" >
/* use media queries and attr() function to replace the small image if appropriate */
@media all and ( min-width : 321px ) and ( max-width : 800px ) {
img {
src : attr ( data - src - med );
}
}
@media all and ( min-width : 801px ) {
img {
src : attr ( data - src - lge );
}
}
This is just an illustration as an approach like this for responsive images wouldn't
enable the UA to use network connection throughput to pick the most appropriate image
that the other proposals do.
Feedback
At the moment this is just an idea, an idea which almost certainly has plenty of issues,
so what I'm really looking for is feedback.
Is it a useful idea, how would you use it, how could it be improved, what issues are there
implementing it etc. or have I just been drinking too much coffee?
Cascading Attribute Sheets
Added: 24 Aug 2012
Tab Atkins and Fantasai have
come out with a similar proposal for Cascading Attribute Sheets
The syntax is pretty similar but Tab and Fantasai suggested another way of adding to an existing
property, so with their syntax my first example would look like this:
/* add class big-screen to html element */
@media all and ( min-width : 1024px ) {
html {
class : attr ( class ) big - screen ;
}
}
The proposal and comment are well worth a read.