Re: Styling HTML5 elements

On Oct 15, 2009, at 10:37 AM, Tab Atkins Jr. wrote:

>> Just looking at this quickly, but couldn't you avoid "::outside"  
>> like this:
>>
>> s/#meter::after::outside/#meter::after
>> s/#meter::after/#meter::after::after
>
> Yeah, that'd work too.  ::after::after is just as unimplemented as
> ::after::outside, though, so shrug.

Oh. I didn't realize that. Is that because "Only one pseudo-element  
may appear per selector"? [1] It kind of looks more like two instances  
of the same selector to me, but maybe I'm just splitting hairs. It  
seems like it would be a breeze to implement "::after::after", once  
you have implemented single "::outside" support. (Not that I can write  
the code myself or anything.)

>> Or maybe avoid that by using multiple backgrounds (light blue image  
>> on top,
>> single medium blue/dark blue image underneath), and use background- 
>> position
>> to determine how much of the  medium blue/dark blue image gets  
>> covered up by
>> the light blue image. Then throw a border-image around the whole  
>> thing.
>
> Hmm, do you think you can mock up some code for that?  I'm not sure
> quite how that would work to achieve the same styling.  (You can see
> how it is intended to look by taking the previous code I supplied,
> replacing ::after with some div and ::after::outside with a wrapper
> div, and replacing the calc() expression with a value like "40px".)


I was thinking of something like this:

http://www.bradclicks.com/cssplay/guage.html

Take a look at it with a recent version of Webkit, or just look at the  
source and the images. "bg2.gif" is just a solid blue square that  
matches the border-color (I always expect multiple backgrounds to  
start in the back and stack forwards, like everything else, but oh  
well).

The downside is that you don't get the subtle color blends or the  
horizon line when it is empty. I'd rather do this:

clip: rect( calc( 30px, 130px, 130px, 0px );
apply-effect: clip, background-image(0);

To clip just the single background-image that acts as the guage.



[1] http://www.w3.org/TR/2009/WD-css3-selectors-20090310/#pseudo-elements