flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject Re: SVG button with skin states and JS
Date Wed, 10 Apr 2013 22:02:42 GMT

On 4/10/13 2:39 PM, "OmPrakash Muppirala" <bigosmallm@gmail.com> wrote:

>>> It is not a limitation of the SVG background-images.  The same flicker
>>> happens when you use a .png or a .jpg as background.  It seems like the
>>> images are lazy loaded and I am not sure if we can force the images to be
>>> loaded into memory without resorting to hacks.
>> Again, we want to identify the best implementation and encapsulate it.
>>  Howe
>> are other frameworks skinning buttons?
> The widely acceptable solutions seem to be:
> a) Preload the images using in an onLoad javascript function
> b) Use a sprite sheet.  So, it would look something like (copy-pasta from
> [1]):
> /* "rollover-sprite.png" file contains images for both states side by side. */
> A {
>     background: url(rollover-sprite.png) no-repeat;}
> /* Width of image for each state is supposed to be 100px here
>   (sprite will be ~200px wide). */A:hover {
>     background-position: -100px 0;}
> What I am doing is a modification of the sprite sheet solution.  Except
> that I am toggling visibility of states instead of translating the sprite
> sheet.
> Again, I wouldn't want to go this route because it limits us to built in
> pseudo-selectors/states.  For example, we wont be able to do a three-state
> checkbox (selected, unselected, partially selected) with this approach.
>  [1]
> http://stackoverflow.com/questions/13015603/css3-background-transition-flicker
> s-on-first-hover
Well, if sprite-sheets are the best practice, why not use the same technique
for SVG?  Otherwise, how does the designer express what they want without

I'm not clear that spritesheets truly have a psuedo-state limitation.  CSS
usually allows for extensibility in most places, and/or you might alter the
class selector name.  How would you do a toggle-button bar if there weren't
separate hover visuals for selected-and-hovered?
Alex Harui
Flex SDK Team
Adobe Systems, Inc.

View raw message