On Thu, Oct 15, 2009 at 8:02 AM, Steve Workman <steve.workman@gmail.com> wrote:
> Hi all,
>
> I've been looking at styling HTML 5 elements using CSS3 and have come across
> some examples where it doesn't suffice.
> A recent html5doctor.com post on the meter tag
> (http://html5doctor.com/measure-up-with-the-meter-tag/) brought up some
> issues with styling of such an element. I wrote a blog post about it here:
> http://www.steveworkman.com/web-design/html-5-web-design/2009/my-problem-with-html-5-styling-meter/
> but there's a brief summary below:
> This code:
> <dl>
> <dt>Target</dt>
> <dd><meter min=”245″ value=”245″ title=”pounds”>245</meter></dd>
> <dt>Amount raised so far</dt>
> <dd><meter min=”0″ max=”250″ value=”185″ title=”pounds”>185</meter></dd>
> </dl>
>
> should be able to produce this image:
> http://html5doctor.com/wp-content/uploads/2009/08/just-giving-example.jpg
> I could only get this far: http://download.steveworkman.com/meter.html and
> that's only when using javascript.
> The fundamental issue is that using CSS and HTML5 alone, you do not have
> access to values of attributes that you can use again to set CSS properties.
> My main issue is that this is trivial in javascript, as demonstrated on the
> demo page.
>
> There are some potential CSS modules that can help in this respect, namely
> CSS Variables and CSS Math. I am also oblivious to the power of canvas and
> SVG, so if anyone can give me an answer using those I’d be very pleased.
>
> Does anyone in the group have an idea as to how you would produce this
> image?
Check out CSS3 Values, specifically
http://www.w3.org/TR/css3-values/#attribute. You can use attr() to
get the value of any attribute on the element and use it for styling.
So, while this isn't usablee *yet*, theoretically (using current
drafts), you should be able to do something like this:
#meter::after {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background: #006;
border-radius: 50%;
clip: rect( calc( attr("value",integer) / attr("max",integer) *
100px ), 100px, 100px, 0px );
}
#meter::after::outside {
position: absolute;
top: 10px;
right: 10px;
width: 120px;
height: 120px;
background: #4af;
border-radius: 50%;
}
This should produce a light-blue circle containing a dark-blue circle
that is partially filled in based on the value of the <meter>,
positioned in the upper right of the box.
(Note - this is a use-case for the Generated Content Module.)
~TJ