Comments on: My problem with HTML 5 – Styling <meter> http://www.steveworkman.com/html5-2/2009/my-problem-with-html-5-styling-meter/ I've been designing and building web sites since 2003. This is my personal site. You'll find my work, insight and ramblings within Tue, 06 Dec 2011 13:47:15 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: axel http://www.steveworkman.com/html5-2/2009/my-problem-with-html-5-styling-meter/comment-page-1/#comment-841 axel Sat, 19 Jun 2010 06:06:41 +0000 http://www.steveworkman.com/?p=162#comment-841 I read the same article and played around with css only solutions (look at http://www.am530.de/lab/html5/meter.php). But even if it is possible to reach the styling goal in some browsers, it is not pratical at all. As long as you can't calculate in CSS (which is in the draft - http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc), in combination with using of attribute values, CSS will never be the way to enhance the meter and / or progress element. Firefox 4.0 (http://hacks.mozilla.org/2010/06/css3-calc/) might be the first browser which can understand calculations, but if it is possible to use it together with attrs(), I don't know. I think bruce is right, javascript (maybe in combination with canvas) will be the best way to handle the meter element for next few years. I read the same article and played around with css only solutions (look at http://www.am530.de/lab/html5/meter.php). But even if it is possible to reach the styling goal in some browsers, it is not pratical at all. As long as you can’t calculate in CSS (which is in the draft – http://www.w3.org/TR/2006/WD-css3-values-20060919/#calc), in combination with using of attribute values, CSS will never be the way to enhance the meter and / or progress element.
Firefox 4.0 (http://hacks.mozilla.org/2010/06/css3-calc/) might be the first browser which can understand calculations, but if it is possible to use it together with attrs(), I don’t know.
I think bruce is right, javascript (maybe in combination with canvas) will be the best way to handle the meter element for next few years.

]]> By: bruce http://www.steveworkman.com/html5-2/2009/my-problem-with-html-5-styling-meter/comment-page-1/#comment-732 bruce Thu, 15 Oct 2009 14:47:21 +0000 http://www.steveworkman.com/?p=162#comment-732 Good article Steve Your problem reminds me of the stylable forms problem. There aren't CSS hooks into the new elements yet, because HTML 5 is a markup language, not a styling language. The CSS working groups won't want to start specifying properties etc on a spec that's still in flux. It would be nice to be able to do maths with the CSS. But you can style it to some extent. With the server, do the maths: so if your min is 0, your max is 75 and current value is 25, set an inline style to be width:33%. You can style a legend, I imagine, by using meter:before {content: attr(min);} and meter:after {content: attr(max);} Here's a crappy example I knocked up in a couple of minutes http://people.opera.com/brucel/dev/html5-meter-style.html But I don't have any moral objection to having to use JS to make the meter look all snazzy. Good article Steve

Your problem reminds me of the stylable forms problem. There aren’t CSS hooks into the new elements yet, because HTML 5 is a markup language, not a styling language. The CSS working groups won’t want to start specifying properties etc on a spec that’s still in flux.

It would be nice to be able to do maths with the CSS. But you can style it to some extent. With the server, do the maths: so if your min is 0, your max is 75 and current value is 25, set an inline style to be width:33%. You can style a legend, I imagine, by using meter:before {content: attr(min);} and meter:after {content: attr(max);}

Here’s a crappy example I knocked up in a couple of minutes http://people.opera.com/brucel/dev/html5-meter-style.html

But I don’t have any moral objection to having to use JS to make the meter look all snazzy.

]]>