6 Replies Latest reply on Sep 29, 2008 9:55 AM by strayhand

    Flex CSS syntax not REAL CSS

    strayhand
      Admittedly I don't know every menu in Flex, but I know enough to add a style sheet to my application. And I'm currently having a lot of "FUN" trying to style my flex application due to the fact that FLEX uses a different CSS syntax. Was there a logical reason for doing this?

      Is there a help file out there, or reference widget like we have in Dreamweaver that would allow me to look up the different syntax rules? I've tried looking in the search but a) I haven't found a way to style an id attribute and b) the examples give you a basic idea of how to add styles they don't serve as a reference.

      Example: Lack of ID support
      For example I cannot apply an ID attribute to one of my flex objects and then style it in the CSS.

      main.mxml
      <mx:Canvas id="navigation" />

      main.css
      #navigation {}... you can't do this? Why the #%*^&*# Not?

      The only way I've been able to make this work is by setting the "styleName" attribute of the FLEX object. Tell me that there's a better way than this.

      Thanks.
        • 1. Re: Flex CSS syntax not REAL CSS
          ntsiii Level 3
          "real" CSS is a browser thing.

          Flex CSS is a Flash Player thing.

          You just have to deal with it.

          Tracy
          • 2. Re: Flex CSS syntax not REAL CSS
            strayhand Level 1
            Thanks for the reply. I can appreciate that there are some real differences between browsers and the flash player. And I would certainly expect there to be more selectors within flex than what's supported in CSS2 or CSS3.

            What I don't understand is why they chose to break from an already established convention. For example was it really necessary to change "font-size" to "fontSize"? Now I have to remember two different but similar syntax. This is dumb on Adobe/Macromedia's part. The developer shouldn't have to "Just Deal With It." For once I'm glad that M$ is developing Silverlight it will keep Adobe on it's toes.

            I don't mean that as a slam. I love what Adobe's doing with Flex and open source, etc. And if someone knows where I can place an update or product request I will certainly do so.

            So back to one of my original questions. Is there a reference out there that shows the flex syntax or perhaps even the css vs. flex syntax? It seems like this would be pretty trival to include in flex or at least the help documents.

            Thanks.
            • 3. Re: Flex CSS syntax not REAL CSS
              Level 7

              "strayhand" <webforumsuser@macromedia.com> wrote in message
              news:gblsl2$66h$1@forums.macromedia.com...
              > Thanks for the reply. I can appreciate that there are some real
              > differences
              > between browsers and the flash player. And I would certainly expect there
              > to be
              > more selectors within flex than what's supported in CSS2 or CSS3.
              >
              > What I don't understand is why they chose to break from an already
              > established
              > convention. For example was it really necessary to change "font-size" to
              > "fontSize"? Now I have to remember two different but similar syntax.

              I hate that, especially since the code hinting shows font-size!


              • 4. Re: Flex CSS syntax not REAL CSS
                cheftimo Level 2
                I don't remember exactly where I saw that:
                .. CSS for Flex does not support ID selectors
                .. Flex uses camel case (fontSize) – not hyphens (font-size) – because a hyphen is not a valid character in an XML attribute (MXML is XML)

                But the CSS hyphened syntax is OK within an <mx:Style> tag. Amy pointed out that code hinting shows hyphens – maybe that is when you are using <mx:Style>.

                You may want to take a look at http://livedocs.adobe.com/flex/3/html/styles_01.html and the pages linked to from there and see quite a bit of material about this subject.

                HTH,

                Carlos
                • 5. Re: Flex CSS syntax not REAL CSS
                  Level 7

                  "cheftimo" <carlos@webgourmand.com> wrote in message
                  news:gbor2p$qef$1@forums.macromedia.com...
                  >I don't remember exactly where I saw that:
                  > .. CSS for Flex does not support ID selectors
                  > .. Flex uses camel case (fontSize) ? not hyphens (font-size) ? because a
                  > hyphen is not a valid character in an XML attribute (MXML is XML)
                  >
                  > But the CSS hyphened syntax is OK within an <mx:Style> tag. Amy pointed
                  > out
                  > that code hinting shows hyphens ? maybe that is when you are using
                  > <mx:Style>.

                  It's never worked inside a Style tag for me. YMMV.


                  • 6. Re: Flex CSS syntax not REAL CSS
                    strayhand Level 1
                    Cheftimo,

                    Thanks for the reply. I'll have to spend some time looking over the help file that you've posted. Thanks.

                    Just as a side, it looks like Flex uses camel case in some circumstances and allows hyphens in others. For example in my .css file (Which should be able to allow hyphens as it's not XML) I have the following:

                    fontSize: 10;
                    background-image: "/admission/_flash/feature/bin-release/assets/images/navigation.png";

                    This is the kind of crap that annoys me. Thanks guys.