Set column-count from attribute in CSS3 - html

Question

I've tried to read the number of columns from HTML attribute.
Something like this one:
div.columns[cols] {
column-count: attr(cols)
-webkit-column-count: attr(cols) /* Chrome, Opera, Safari */
-moz-column-count: attr(cols) /* Firefox */
}
It doesn't seem to work, and I don't know if I'm missing something or it just won't work. And if so, it would be nice to have a better solution than this:
div.columns[cols="2"] {
column-count: 2
-webkit-column-count: 2 /* Chrome, Opera, Safari */
-moz-column-count: 2 /* Firefox */
}
div.columns[cols="3"] {
column-count: 3
-webkit-column-count: 3 /* Chrome, Opera, Safari */
-moz-column-count: 3 /* Firefox */
}
div.columns[cols="4"] {
column-count: 4
-webkit-column-count: 4 /* Chrome, Opera, Safari */
-moz-column-count: 4 /* Firefox */
}
div.columns[cols="5"] {
column-count: 5
-webkit-column-count: 5 /* Chrome, Opera, Safari */
-moz-column-count: 5 /* Firefox */
}
Thank you ;)

Answer 1

No, you can't do that.
The permitted options per MDN are:
column-count: integer /* an actual number */
column-count: auto;
column-count: inherit;
column-count: initial;
column-count: unset;

Answer 2

You can actually do it just look at the grammar http://www.w3.org/TR/css3-values/#attr-notation although I've not tried it so I have no idea what the browser support is like.
You would need to use the data- prefix on the html attribute eg:
<div class="columns" data-cols="n">content</div>
And make sure you pass the second argument to attr so your css would look like this:
div.columns {
column-count: attr(cols integer)
-webkit-column-count: attr(cols integer)
-moz-column-count: attr(cols integer)
}