W3C home > Mailing lists > Public > www-style@w3.org > October 2009

Re: Styling HTML5 elements

From: Steve Workman <steve.workman@gmail.com>
Date: Thu, 15 Oct 2009 17:33:38 +0100
Message-ID: <60742dff0910150933h210cd97fu3a2fc71392aaa311@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org
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
>
Received on Thursday, 15 October 2009 16:34:08 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:21 GMT