F*CSS ist ein CSS-Parser für Flash. Das Ziel des Open Source Projekts ist eine verbesserte CSS-Unterstützung in Flash. Diese soll nicht nur auf Textfelder ausgelegt sein, sondern allgemein auf Objekte.

The main class called FStyleSheet (found inside of the com.flashartofwar.fcss.stylesheets package), goes well beyond the native StyleSheet class by supporting style inheritance, pseudo selectors, and merging styles on the fly.

F*CSS funktioniert mit Flash Player 9 und 10, Flex 3 und AIR. Die Bibliothek kann sowohl mit dem Flex SDK als auch mit Flash CS3/4 kompiliert werden.

Beispiel

Hier das Beispiel aus dem QuickStart Guide.

PLAIN TEXT
Actionscript:
  1. package {
  2.     import com.flashartofwar.fcss.factories.TextFieldFactory;
  3.     import com.flashartofwar.fcss.managers.StyleSheetManager;
  4.     import com.flashartofwar.fcss.styles.IStyle;
  5.     import com.flashartofwar.fcss.stylesheets.FStyleSheet;
  6.     import com.flashartofwar.fcss.stylesheets.IStyleSheet;
  7.     import com.flashartofwar.fcss.stylesheets.IStyleSheetCollection;
  8.     import com.flashartofwar.fcss.utils.StyleApplierUtil;
  9.     import com.flashartofwar.fcss.utils.TextFieldUtil;
  10.  
  11.     import flash.display.Shape;
  12.     import flash.display.Sprite;
  13.     import flash.text.TextField;
  14.  
  15.  
  16.  
  17.  
  18.     public class Main extends Sprite
  19.     {
  20.         public function Main()
  21.         {
  22.  
  23.             /** Sample CSS ***/
  24.  
  25.             // Get some css. Normally you would load CSS from an external file but
  26.             // for this example we are going to put some CSS in a XML variable.
  27.             var css:XML = <css><![CDATA[
  28.  
  29.             /* This is a class */
  30.             .TextField
  31.             {
  32.                 border: true;
  33.                 borderColor: red;
  34.                 selectable: false;
  35.             }
  36.  
  37.             /* This is an ID */
  38.             #demoStyle
  39.             {
  40.                 color: red;
  41.                 size: 30;
  42.                 autoSize: left;
  43.                 x: 50;
  44.                 y: 50;
  45.             }
  46.  
  47.             /* This is how you can inharit from another style */
  48.             #demoStyle #demoStyle2
  49.             {
  50.                 y:100;
  51.             }
  52.  
  53.             #demoStyle #demoTextFieldFactroy
  54.             {
  55.                 y:160;
  56.                 color: green;
  57.                 borderColor: green;
  58.             }
  59.  
  60.             /* This is how you do inline StyleSheets for TextFields */
  61.             #demoStyle #demoInlineStyleSheet
  62.             {
  63.                 size:25;
  64.                 y: 210;
  65.                 styleSheet:.highLight,a,a:hover;
  66.             }
  67.  
  68.             .highLight
  69.             {
  70.                 color:#00ff00;
  71.             }
  72.  
  73.             a
  74.             {
  75.                 color:#0000ff;
  76.                 text-decoration: underline;
  77.             }
  78.  
  79.             a:hover
  80.             {
  81.                 color:#000000;
  82.                 text-decoration: none;
  83.             }
  84.  
  85.             #demoShapeStyle
  86.             {
  87.                 x:50;
  88.                 y:10;
  89.                 width:300;
  90.                 height:25;
  91.             }
  92.  
  93.  
  94.             ]]>
  95.             </css>;
  96.  
  97.             /** Style A TextField **/
  98.  
  99.             // Create a new StyleSheet
  100.             var styleSheet:IStyleSheet = new FStyleSheet( );
  101.             styleSheet.parseCSS(css.toString());
  102.  
  103.             // Get a style (Returns an object with properties as strings)
  104.             var style:IStyle = styleSheet.getStyle("#demoStyle");
  105.  
  106.             // Trace out the style's properties
  107.             trace("style", style);
  108.  
  109.             // Create a TextField
  110.             var tf:TextField = new TextField();
  111.  
  112.             // Use TextFieldUtility to apply the style to the TextField
  113.             TextFieldUtil.applyStyle(tf, style);
  114.  
  115.             // Use TextField like you would normally
  116.             tf.htmlText = "F*CSS - Hello World";
  117.             addChild(tf);
  118.  
  119.  
  120.             /** Merging styles at runtime **/
  121.  
  122.             // You can merge styles on the fly when you call getStyle().
  123.             // Here we merge .TextField with #demoStyle2 to setup a new TF.
  124.  
  125.             // Lets get the 2 styles. Simply pass in any number
  126.             // of style names and separate them with a comma.
  127.             var style2:IStyle = styleSheet.getStyle(".TextField", "#demoStyle2");
  128.  
  129.             // Trace out the style we just created
  130.             trace("style2 (Merged .TextField + #demoStyle2)", style2);
  131.  
  132.             // Create a TextField
  133.             var tf2:TextField = new TextField();
  134.  
  135.             // Use TextFieldUtility to apply the style to the TextField
  136.             TextFieldUtil.applyStyle(tf2, style2);
  137.  
  138.             // Use TextField like you would normally
  139.             tf2.htmlText = "F*CSS Demo 2 - Hello World";
  140.             addChild(tf2);
  141.  
  142.  
  143.             /** Global StyleSheetManager **/
  144.  
  145.             // If you want to make the CSS available globally use the
  146.             // StyleSheetManager/StyleSheetCollection
  147.  
  148.             // Get a reference of the StyleSheetCollection from the StyleSheetManager
  149.             var styleSheetCollection:IStyleSheetCollection = StyleSheetManager.collection;
  150.  
  151.             // Register style sheet with the Collection.
  152.             styleSheetCollection.addStyleSheet(styleSheet, "defaultSheet");
  153.  
  154.  
  155.             /** How To Use The TextFieldFactory **/
  156.  
  157.             // This assumes you are using the StyleSheetManager. If not, you will have to
  158.             // create a new FStyleSheet, parse css data then pass that into the factory.
  159.  
  160.             // Create a new factory and pass in a reference to a IStyleSheet
  161.             var tff:TextFieldFactory = new TextFieldFactory(StyleSheetManager.collection);
  162.  
  163.             // The first param is the id and the second is the calls. It will
  164.             // automatically add # and . to the string to "emulate" how
  165.             // HTML/CSS would work.
  166.             var tf3:TextField = tff.createTextField("demoTextFieldFactroy", "TextField");
  167.  
  168.             // Use TextField like you would normally
  169.             tf3.htmlText = "F*CSS TextFactory - Hello World";
  170.             addChild(tf3);
  171.  
  172.  
  173.             /** Add Native StyleSheets To TextField with F*CSS **/
  174.  
  175.             // To use native StyleSheets you simply add the Style names into the
  176.             // F*CSS's StyleSheet param on any F*CSS Style. Check out
  177.             // .demoInlineStyleSheet to see what I am talking about
  178.             var tf4:TextField = tff.createTextField("demoInlineStyleSheet");
  179.  
  180.             // Use TextField like you would normally
  181.             tf4.htmlText = "<a href='http://fcss.flashartofwar.com' target='_blank'>F*CSS</a> <span class='highLight'>Native</span> StyleSheet - Hello World";
  182.             addChild(tf4);
  183.  
  184.  
  185.             /** Style Any Object With StyleApplierUtil **/
  186.  
  187.             // For this demo we are going to create a simple shape
  188.             // then use CSS to position it and change it's dimensions
  189.             var shape:Shape = new Shape();
  190.             shape.graphics.beginFill(0xff0000);
  191.             shape.graphics.drawRect(0,0,10,10);
  192.             shape.graphics.endFill();
  193.             addChild(shape);
  194.  
  195.             // Get a Style
  196.             var shapeStyle:IStyle = StyleSheetManager.collection.getStyle("#demoShapeStyle");
  197.  
  198.             // Now you can apply the style to any object, lets use the
  199.             // shape as our target.
  200.             StyleApplierUtil.applyProperties(shape,shapeStyle);
  201.         }
  202.     }
  203. }

Link: fcss.flashartofwar.com/