CSS Changes in Flex 4

I recently purchased the book Adobe Flash Builder 4 and Flex 4 by David Gassner and will be publishing a complete review when I’m done with the book. I’m going through it looking for the coverage I feel would be most helpful for those experienced with Flex 3. Even more specifically, those like myself, who have been so busy with contracting work (because Flash is dead of course, and the only way to make a living as a contractor anymore is with HTML5 and CSS3) that they were only able to sample Gumbo during its development.

One such topic, which I happen to be going through now, are the additions to Flex 4’s CSS implementation over Flex 3. This information is available in a number of other places, so this post is more to help me internalize it than to be groundbreaking to everyone else.

1. CSS Namespaces

In order to support type selectors with the same name, CSS namespaces have been introduced. In Flash Builder selecting New->CSS File will show you what the syntax for declaring a CSS namespace is.

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

If you’re not going to be using both Spark and Aeon/Halo in your application, you can declare the “default” namespace by omitting the prefix. Namespaces are used as follows:

s|Label { }
mx|Label { }

The lack of any white space between the namespace and the bar, and between the bar and the type selector is significant. Don’t include any white space there. Namespaces will need to be declared even for your custom components (I have a feeling this is going to get messy, but it’s for a good cause.)

2. Descendant Selectors

If you run into a situation where you want to use type selectors, but only when it is used in a particular container, you can use the descendant selectors. You can use them with your custom containers as well. The following declaration will affect all RichText editors contained within a Group:

s|Group s|RichText { color: #0000AA; }

This is another feature that could get out of hand, so use it wisely. Also don’t confuse this with declaring multiple type selectors on the same line, separating them with commas. Like this:

s|Group, s|RichText { color: #0000AA; }

3. ID Selectors

The ID selectors are similar to style name selectors. Recall with a style name selector, the CSS declaration has a name beginning with a ‘.’ and in the MXML declaration of the component you can use styleName="smallText", or something like that.

To use the ID selector, the styleName in the CSS is set to the id of the component you’re styling, prefixed with the # symbol. Like this:

<!-- The MXML Component -->
<s:Label id="labelA" />

/* The CSS declaration */
#labelA { color: 0xFF00FF; }

Be sure you set the id explicitly in the MXML– this will not work if you have declared the component in ActionScript.

And that concludes my synopsis of the most important additions to CSS in Flex 4.