« UK Government Plans to Blanket Tax Broadband Users (and Give Everyone BB)User Generated Gaming Comes to XBOX 360 - Kodu »
Jan 23

CSS and AS3: Careful with Whitespace

Flash Add comments

Small bug here, it looks like the built in StyleSheet CSS parser in Flash doesn’t use a trim() or a more complex regular expression when parsing a CSS string/file. If you’re a whitespace fan this can lead to your style properties, such as “fontFamily", actually being indexed in the style object as “fontFamily ” (notice the space at the end).

This doesn’t affect the regular dot notation access (style.fontFamily). But it can cause problems if you’re iterating through the style object.

This small glitch can be illustrated by the following two snippets of almost identical code. This first one shows the correct behaviour when no extraneous whitespace is used in the CSS:

Follow up:

Code:

var ss:StyleSheet = new StyleSheet();
ss.parseCSS('myStyle { font-family:"Arial"; }');
 
trace(ss.getStyle("myStyle").fontFamily); // Arial
 
var style:Object = ss.getStyle("myStyle");
for(var key:String in style)
{
    trace("style:", key, style[key], key == "fontFamily");
    //style: fontFamily Arial true
}

Now let’s add a space before the colon in the CSS, notice the trace output in the for loop:

Code:

var ss:StyleSheet = new StyleSheet();
ss.parseCSS('myStyle { font-family : "Arial"; }');
 
trace(ss.getStyle("myStyle").fontFamily); // undefined
 
var style:Object = ss.getStyle("myStyle");
for(var key:String in style)
{
  trace("style:", key, style[key], key == "fontFamily");
  //style: fontFamily Arial false
}

Quite an easy one to avoid if you’re in control of your CSS, and if you’re not just be sure to trim whitespace yourself if you need to iterate through a style object’s properties.

4 comments

  1. § paddy Email said on : 26/01/09 @ 19:30
    hi Rich, have you tried { fontFamily : "Arial"; }'); ? I know the support for camelCase is more robust than the (IMO correct) 'word-split' format in Flex... (Hope this is something Adobe sort out in Gumbo!)
  2. § Richard Leggett® Email said on : 26/01/09 @ 19:35
    Hey Paddy, I'm afraid it gives the same result here. Plus I'm keen to use regular CSS style syntax, just incase the CSS is to be used across Flash and also maybe a HTML backup site perhaps.
  3. § Emile Email said on : 07/03/09 @ 23:37
    Mayber related, but i've noticed that having empty styles also break the parseCSS() method. so myStyle{}; would render the resulting stylesheet empty. I'd have to check the specifics to replicate the problem.
  4. § philip broadway Email said on : 14/09/09 @ 20:58
    Hey--I'm making an open source html renderer in AS3 and a portion of my CSS renderering will be re-purposing this since I need to support CSS I dont control.


    Found this to be useful and just wanted to share that!

    Thanks, and I'll open my work up on github once its more complete!

    -Philip

Leave a comment


Your email address will not be revealed on this site.

Your URL will be displayed.
(Line breaks become <br />)
(Name, email & website)
(Allow users to contact you through a message form (your email will not be revealed.)
Contact. ©2010 by Richard Leggett. blog software / UK hosts / monetizing.
Design & icons by N.Design Studio. Skin by Tender Feelings / Evo Factory.
Entries RSS Comments RSS Log in