Richard Willis

I love the tools I work with but if I’m being honest, some things just don’t measure up. CSS in Flex for instance: it doesn’t do half the things a genuine CSS implementation should do. Thanks go to Tom Kennett for bringing to our attention this great blogpost about just how far short of the mark Flex’s CSS support falls.

One of the most irritating aspects is the fact that the ‘width’, ‘height’, ‘percentWidth’ and percentHeight’ properties of UIComponent - which is the base class for all visual components - are exactly that: properties, not styles. That means they can’t go into the CSS, they have to be added to the mxml tags themselves:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:VBox width="100%">
    <mx:HBox id="header" width="100%" height="80" />
    <mx:HBox id="content" width="100%" height="100%" />
    <mx:HBox id="footer" width="100%" height="50" />
  </mx:VBox>
</mx:Application>

Even in an unrealistically small file like this, the ‘width’ and ‘height’ attributes make it difficult to read. When working with actual, lengthy .mxml files, a bit of simple editing can become like hacking through the jungle. I’m not really into that so I thought I’d sit down today and see if I could concoct a workaround that would allow me to put the ‘width’ and ‘height’ declarations in the CSS instead.

(more…)