F*CSS - CSS support for AS3

F*CSS is a new library I have been working on to help fill in the gaps in AS 3's CSS support. This began in my Flash Camo Framework's PropertySheet system and is now evolving into something that is important enough to stand on it's own. I have been very vocal over the past view weeks about the lack of native CSS support in AS 3 and thought I would share a preview build of my proposed solution to get some feedback from the Flash Community.

Before we get into the code, here are the goals of this library:

• Better support for CSS properties in TextField and create consistencies with text formatting/in line styling.
• True style inheritance to allow for better organization and optimization of our StyleSheets.
• A generic Style object that returns objectified CSS properties as string value, allowing us to use these values wherever we want, even outside of TextFields.
• A utility that can help automate the process of converting a Style Object's string properties into their expected type. This should use a targeted class's own public properties to determine the correct type. This utility should be extendable to allow developers to add in custom conversion logic.
• This library should be easy to use with a straight forward and quick to understand API.
• Finally this proposed solution should be open source, free to use, and well documented.

It is important to mention that this library is not intended to recreate a HTML render engine. F*CSS is a specialized adaptation of CSS in order to configure properties of a class. I use the word Style and StyleSheet loosely, the real advantage of using F*CSS in your application is to create external CSS-like documents to configure your own classes. Lets take a look at how to style a TextField with F*CSS.

Currently if you wanted to change the look of a TextField you have to configure some properties on the TextField and other properties on a TextFormat. Also, some properties have to be set in a specific order or they will not work. Why go through the hassle? F*CSS will handle configuring the TextField and TextFormat for you once you supply a CSS Style. The following demo illustrates how easy this is setup:

 
import com.flashartofwar.fcss.managers.StyleSheetManager;
import com.flashartofwar.fcss.styles.Style;
import com.flashartofwar.fcss.stylesheets.StyleSheet;
import com.flashartofwar.fcss.stylesheets.StyleSheetCollection;
import com.flashartofwar.fcss.utils.TextFieldUtil;
        
import flash.text.TextField;

// Get some css. Normally you would load CSS from an external file but
// for this demo we are going to put some CSS in a XML variable.

var css:XML = <css><![CDATA[

baseStyle
{
 	x:0;
 	y:0;
 	selectable: false;
}

/* this style, "demoStyle", inharits properties from baseStyle */
baseStyle demoStyle
{
         autoSize: left;
         border: true;
         border-color: red;
         color: red;
         size: 30px;
         x: 50px;
         y: 50px;
}
]]>
</css>;

// Create a new StyleSheet
var styleSheet:StyleSheet = new StyleSheet( );
styleSheet.parseCSS(css.toString());

// Get a style

var style:Style = styleSheet.getSelector("demoStyle");

// Create a TextField
var tf:TextField = new TextField();

// Use TextFieldUtility to apply the style to the TextField
TextFieldUtil.applyStyle(tf, style);

// Use TextField like you would normally
tf.htmlText = "F*CSS - Hello World";
addChild(tf);

As you can see, F*CSS does all the dirty work for you by abstracting the TextField/TextFormat properties in a single Style object. All of the important properties are supported and better yet, F*CSS will convert any property names with a dash into camelCase. It also is able to clean up CSS standard property names such as font-face into font which is what the TextField supports.

There are two additional classes that will allow you to create, add, and get StyleSheets from anywhere in your application. Lets take a look:

 
import com.flashartofwar.fcss.managers.StyleSheetManager;
import com.flashartofwar.fcss.stylesheets.StyleSheetCollection;

// If you want to make the CSS available globally use the 
// StyleSheetManager/StyleSheetCollection
                        
// Get a reference of the StyleSheetCollection from the StyleSheetManager
var styleSheetCollection:StyleSheetCollection = StyleSheetManager.instance;
                        
// Register style sheet with the Collection.
styleSheetCollection.addStyleSheet("defaultSheet", styleSheet);
                        
trace(styleSheetCollection.getSelector("demoStyle"));

By using the StyleSheetManager's Singleton instance of the StyleSheetCollection you can organize your loaded StyleSheets as you see fit.

There is one more utility you may find useful. In Flash Camo you were able to apply Styles to any public property/setter of a class. F*CSS has the same utility which can be found in com.flashartofwar.fcss.utils.StyleApplierUtil. This utility works just like the TextFieldUtil expect you supply any class instance along with a style and the StyleApplierUtil will automatically attempt to apply the style properties and convert the values to their native data types.

This is just a brief overview of how F*CSS works. Currently F*CSS is an Alpha release but since it is built from Flash Camo's CSS parser you will find that F*CSS is incredibly stable. Here are some features I am working on for the next version of F*CSS:

• A HTML parser that will allow you to convert inline css styles into TextFormats offering you even more control over how you can style TextFields and still retain FP 9 compatibility.
• Adding better support for multiple StyleSheet in the StyleSheetCollection class.
• Adding CSS group functionality to help organize blocks of styles together.
• Faster parser and more accurate validator.
• More utilities to help apply styles to built in components including FLEX support.
• More documentation.

The source code for F*CSS is available on Google Code:

• Download the SWC from here.
• SVN Checkout from here
• Browse the source code online here

Please give F*CSS a try and leave a comment on what you think, what you would like to see, or if you hate this idea all together. If you are like me and feel that better CSS support should be including in the next version of the Flash Player make your voice heard!

Read more from Jesse Freeman.