Skinning vs CSS – Performance

I was messing around with skinning and styling today and
although the skinning seems like much more what we’re after I
couldn’t help wondering what the strain performance would be like.
Considering that essentially what your doing when you add a new
skin is embedding that image directly in your swf file, skinning is
going to cause some serious issues. I haven’t had the chance to do
any extensive testing, but I’m actually very concerned now that
skinning our app will not be an option due to serious performance
problems.

Can I get some feedback from the community over their
experiences with regards to skinning and styling and the pros and
cons of using each technique.

Thank You

Jaz|||

I use both heavily.

From my experiences the most powerful toolset is when you mix and match the two.  Your basic CSS stuff is key for cleaning up existing components like removing rounded edges, font colors, etc.  but when it comes down to actually making something look custom skinning via CSS is the way to go.  Rather than importing an swc file and overriding global components I created an SWF with various graphics in PNG and Vector formats.  Then using the CSS skinning commands apply the skin where nessecary as oppossed to override default skins for certain components.

.PaginationButtons
{
     color:#333333;
     font-size:11;
     font-weight:bold;
     
     text-roll-over-color:#650000;
     
     up-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_PaginationUp");
     over-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_PaginationOver");
     down-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_PaginationUp");
     selected-up-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_Pagination");
     selected-over-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_Pagination");
     selected-down-skin: Embed(source="/assets/images/skins.swf", symbol="ButtonBar_Pagination");
}

This is an actual CSS snippet from a recently completed project it should help explain the method I tried to describe above.  We haven’t seen any real performance issues with it unless using Degrafa heavily in some scenarios.

Hope this helps.

attached is a sample of the finished app.

Related posts:

1. Skinning / Extending Panel
2. Having trouble with sourcing an Image
3. DateChooser skinning
4. Using Flash buttons in ToggleButtonBar/
5. PNG icon on a toggle button?

Related posts brought to you by Yet Another Related Posts Plugin.