Advanced CSS in Flex 4 – ID and Descendant Selectors

October 21st, 2008 by

NOTE: View my comment below for updated code on making this work with the latest SDK (as of 5/25/09).

A few days ago one of the commit messages in the Gumbo trunk mentioned some work for advanced CSS was beginning. I tried to create an example of using a descendant selector as well as an ID selector, but neither worked.

Tonight, another commit message said that this was now in place by default (I guess it would have worked earlier, but I needed to be specify a compiler argument). But now, after rebuilding the latest checkout of Gumbo you should now be able to compile the following example to see the advanced CSS selectors working. Below is the SWF (you’ll need Flash Player 10 to view it) and the code follows:

[flash http://blog.smartlogicsolutions.com/wp-content/uploads/2008/10/CSSExample.swf]

CSSExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<FxApplication xmlns="http://ns.adobe.com/mxml/2009">
 
    <layout><VerticalLayout /></layout>
 
    <Style source="descendants.css" />
 
    <VGroup>
        <TextView>Text in a VGroup</TextView>
    </VGroup>
 
    <HGroup>
        <TextView id="red">Text in an HGroup</TextView>
    </HGroup>
 
</FxApplication>

Standard so far, now let’s see the CSS with the advanced selectors:

descendants.css

VGroup TextView {
    font-size: 24pt;
}
 
HGroup TextView {
    text-decoration: underline;
}
 
#red {  
    color: #ff0000;
}

Flex 4 is now fully demonstrating the Cascading part of CSS. (You may need to review CSS selectors syntax.) NOTE: I don’t know how much of the CSS spec is going to be supported in Flex 4, and am not suggesting that everyone of the selectors at the CSS selectors page will be available in Flex 4.

The VGroup TextView selector targets any TextView instances which are a child of a VGroup. #red selector targets instances with an ID of “red”.

As usual, here is the bundled source and SWF.

I hope everyone’s enjoying their Gumbo!

This entry was posted on Tuesday, October 21st, 2008 at 7:39 pm and is filed under Flex 4, Greg Jastrab, Gumbo, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “Advanced CSS in Flex 4 – ID and Descendant Selectors”

  1. Josh Tynjala says:
    October 22, 2008 at 1:52 am

    With so many open source selector engines in JavaScript, I can’t imagine it would be hard for Adobe to bring the CSS3 spec to Flex. I myself have written some selector code (based in part on the YUI selector utility) for generic display objects. However, I imagine that performance, especially for runtime style changes, could be a limiting factor. I know Adobe has mentioned that the existing Flex 3 style manager has some performance issues at times, so it’s a tough area. Whatever the complexity of the new advanced style system, I’m excited to see any improvements to what is currently a very simple implementation of CSS.

  2. Greg Jastrab says:
    October 22, 2008 at 7:57 am

    I’m fairly certain performance was the main issue. In the few places I heard about advanced CSS selectors being introduced in Flex 4 they were stressing that performance was the key goal in adding them.

  3. CSS for jQuery Selectors - It really is just CSS | Simply Net Dev says:
    November 7, 2008 at 6:51 pm

    [...] Advanced CSS in Flex 4 – ID and Descendant Selectors [...]

  4. CSS for jQuery Selectors - It really is just CSS | Simply Net Dev says:
    November 7, 2008 at 6:51 pm

    [...] Advanced CSS in Flex 4 – ID and Descendant Selectors [...]

  5. Greg Lafrance says:
    May 25, 2009 at 12:49 am

    The Flex 4 sample apps I have tried in this blog have not compiled for me thus far. Would it be possible for you to bring them up to speed with the current SDK so they work without having to change anything?

  6. Greg Jastrab says:
    May 25, 2009 at 1:04 am

    CSSExample.mxml

    <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
 
    <Style source="descendants.css" />
 
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <s:VGroup>
        <s:SimpleText>Text in a VGroup</s:SimpleText>
    </s:VGroup>
 
    <s:HGroup>
        <s:SimpleText id="red">Text in an HGroup</s:SimpleText>
    </s:HGroup>
 
</s:Application>

    descendants.css

    @namespace "library://ns.adobe.com/flex/spark";
 
VGroup SimpleText {
    font-size: 24pt;
}   
 
HGroup SimpleText {
    text-decoration: underline;
}   
 
#red {  
    color: #ff0000;
}

Leave a Reply

Greg Jastrab joined SmartLogic Solutions in June 2006. He is now the Technical Project Manager and oversees all Flash/Flex/AIR development. Follow @gjastrab on twitter

Greg Jastrab's posts