Re: Styling HTML5 elements

Thanks Tab, looks good.

Does the clip property need CSS Math in order to do the division or is that
part of the generated content spec too?

Steve

2009/10/15 Tab Atkins Jr. <jackalmage@gmail.com>

> 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.htmland
> > 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
>