Re: Styling HTML5 elements

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

Received on Thursday, 15 October 2009 16:31:53 UTC