skip navigation links

The Internet's only wheelchair-accessible website.

blog

software/ux software/ui/flex

CSS in Flex is not real CSS at all

(February 1st, 2008 - 8:06PM)

When my latest project was pushed in the direction of Flex, we were assured that development in this new environment would be easy. After all, Flex apparently supports CSS, so it should be easy for anyone with previous Web development experience, right?

Well, I'm always skeptical about claims like that, and sure enough, Flex's CSS support turned out to be disappointing.

Let's just be blunt: Flex doesn't support CSS. It supports some rudimentary stylesheet language that was concocted by the boys at Adobe. It does not support CSS. A layperson might mistake Flex's "CSS" for real CSS, but a seasoned Web designer will be able to tell the difference in a matter of minutes.

  • Flex CSS has no support for dimensioning (width, height) or relative positioning (float, clear) of an element.

    This is a huge oversight in Flex's implementation of CSS. Without being able to size and position elements in CSS, you have to hard-code these values into the markup. Since separation of presentation and content is the core principle of CSS, and since Flex's implementation doesn't let you do that effectively, Flex CSS is almost useless.

    I think the reason width and height aren't stylable is because Flex considers them to be "properties" rather than "styles." As far as I can tell, this is some arbitrary distinction made by the Flex guys. In your forays with Flex, you'll probably find other places where you can't style something because it's a "property."

    As far as float and clear go, they don't exist. This is because Flex handles relative positioning with elements called HBox and VBox. Since these are actual tag elements that are embedded right into your markup, there's no easy way to move layout options into your stylesheet.

  • Flex CSS doesn't support descendent selectors.

    In CSS, you can change the behaviour of classes or elements based on where they appear in your document hierarchy. For example, with this style...

    div p
    {
        font-weight: bold;
    }

    ...and this markup...

    <p>First paragraph</p>
    <div><p>second paragraph</p></div>

    ...only the second paragraph would be bold.

    Descendent selectors are one of the critical techniques in CSS. In fact, descendent selection is one of the ways that CSS "cascades," so you can't really claim to have 100% CSS (Cascading Style Sheets) unless you support it. And Flex doesn't.

  • Flex CSS doesn't support multiple classnames on a single element.

    In HTML, you can make clever reuse of styles by using multiple stylenames on a single element. For example, if you have separate but similar styles for two different sections...

    emailSection
    {
        border: 1px solid #000000;
        background-color: #EEEEEE;
        font-size: 11pt;
        color: #000000;
    }
    loginSection
    {
        border: 1px solid #000000;
        background-color: #EEEEEE;
        font-size: 11pt;
        color: #0000FF;
    }

    ...you could could create these sections with markup like this...

    <div class="emailSection">...</div>
    <div class="loginSection">...</div>

    However, if you wanted to be clever, you could improve readability and maintenance by merging the styles like this...

    section
    {
        border: 1px solid #000000;
        background-color: #EEEEEE;
        font-size: 11pt;
    }
    emailSection
    {
        color: #000000;
    }
    loginSection
    {
        color: #0000FF;
    }

    ...then you could create these sections like this...

    <div class="section emailSection">...</div>
    <div class="section loginSection">...</div>

    This results in a much cleaner, more maintainable stylesheet. This technique is critical in large applications. Unfortunately, it's unsupported by Flex CSS.

  • Flex CSS has no ability to specifically position or repeat background images.

    Gradients, one of the design hallmarks of Web 2.0, are not well supported in regular CSS. But at least you can accomodate them by tiling background images.

    Unfortunately, Flex CSS supports neither gradients nor this CSS workaround. I was able to find a third-party extension that enables this feature, but it's a shame it wasn't included directly in Flex CSS. It's a bit of a stretch to call Flex a "Rich Internet Application" development environment if it doesn't support custom gradients.

Don't get me wrong: Flex has a lot of things going for it. However, myself and many other Flex developers I know have encountered extreme frustration in working with Flex. Although I'm using Flex 2, it almost feels like a beta. I'm planning to upgrade to Flex 3, but I suspect that many of my problems will persist.

Any developers reading this should know that Flex isn't necessarily bad. In fact, it has a lot of things going for it. It's proven extremely effective for prototyping, and believe me, I've put it through the wringer. It's also got a great componentization and extension model that you won't get in HTML. However, it's far from perfect. Be forewarned before delving into serious Flex development.

permanent link - digg this post - 11 comments

11 comments

Hanson.S
September 16, 2008
I was trying the descendent selectors hard to get a grid looking good. But I failed. Thank you for this article which saves my time :)
September 29, 2008
@Hanson.S: Sucks, doesn't it? We work with Adobe products all the time, and they always seem broken.
no one
November 8, 2008
Hi Steve, yes but #2 can be kind of done by:

section, emailSection, loginSection
{
border: 1px solid #000000;
background-color: #EEEEEE;
font-size: 11pt;
}
emailSection
{
color: #000000;
}
loginSection
{
color: #0000FF;
}

Then Flex will do what you want by using 'emailSection' for one and 'loginSection' for the other
November 12, 2008
@no one:

Of course. It's possible to do what I discussed in the example. The problem is that you can't do it with multiple classnames, which is a far more elegant way of handling reused styles.

In the example you've provided, you have to manually add .emailSection and .loginSection at the top, with the .section class. If I wanted to create a third style, perhaps .passwordSection, I'd have to go add that also.

This makes the .section class non-generic and non-reusable out of the box, which was the whole idea of my example (and, one could argue, the whole idea of CSS). If you're going to do things your way, you might as well just copy/paste the class and over again for each section. And of course, that's bad.
November 30, 2008
I've used the Degrafa library. It adds a few css properties that are missing.
January 7, 2009
"Flex CSS doesn't support descendent selectors."

"Flex CSS doesn't support multiple classnames on a single element."

Both of these things can be done using Actionscript to extend a base class. Both the base class and extended class can be styled independently. It can't be done purely in CSS but it has the same effect and functionality.

All the source code and information on how to do this can be found here:

tinyurl.com/8h9dej
February 20, 2009
Regarding the sizing and positioning of your elements (and I suppose any other property), you can still specify the values in a css file by doing the following:

.myContainer
{
width: 100;
}

Then, you would set that in the component using ActionScript, like so:


private function init() : void
{
box.width = box.getStyle ("width");
}
]]>





It's a bit strange, but you still manage to separate your presentation and your content.
February 20, 2009
let me try that again...

Regarding the sizing and positioning of your elements (and I suppose any other property), you can still specify the values in a css file by doing the following:

.myContainer
{
width: 100;
}

Then, you would set that in the component using ActionScript, like so:

[code]

private function init() : void
{
box.width = box.getStyle ("width");
}
]]>



[/code]

It's a bit strange, but you still manage to separate your presentation and your content.
June 24, 2009
RgJQ9n comment4 ,
July 2, 2009
If you have to do it, you might as well do it right.
July 2, 2009
Great site. Keep doing.

post comment

Required fields are marked with a *

mail@stevekwan.com