4 Replies Latest reply on Jun 8, 2009 8:14 AM by Handycam

    CSS and namespaces?

    Handycam Level 1

      I I am am migrating a Flex 3 project, and my css selectors do not work.  I looked on the site for help, and found this:

       

      Type selectors require a namespace

       

      A CSS type selector names the Flex class to style. For example, the following are type selectors for Button and DateField:


      Button {
      cornerRadius: 10;
      }
      DateField {
      color: #780800;
      }

      As of the Flex 4 beta, when an application uses type selectors, a namespace is required. If you are using only the MXML 2006 namespace in your Flex Application, add the following default namespace declaration to your CSS:


      <mx:Style>

      @namespace "http://www.adobe.com/2006/mxml";

      </mx:Style>


      However, this is very poorly written.  Where does the declaration listed in the second part actually go?  I have tried wrapping my css file with it, wrapping the individual declarations, etc. to no avail.  Why give the example of button and datefield and then not show how to apply th namespace to those selectors?  Why just the mysterious "..." and then not to show where it goes?


        • 1. Re: CSS and namespaces?
          FrankPepermans Level 1

          here's how to use the new namespaces for css :

           

          @namespace mx "library://ns.adobe.com/flex/halo";
          @namespace mypackage "org.somename.somepackage.*";

           

          mypackage|MyComponent
          {
          background: Embed(skinClass="Background");
          }

           

          mx|TabBar
          {
          tabStyleName: "tabBarTab";
          firstTabStyleName: "tabBarTab";
          lastTabStyleName: "tabBarTab";
          size: 12;
          color: #000000;
          }

          .tabBarTab
          {
          skin: Embed(skinClass="TabBar$tab_skin");
          }

          • 2. Re: CSS and namespaces?
            Peter deHaan Level 4

            Or in the case of the one CSS namespace you could do the following (assuming you werent using a prefix):

             

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                    xmlns:s="library://ns.adobe.com/flex/spark"

                    xmlns:mx="library://ns.adobe.com/flex/halo">

             

                <fx:Style>

                    @namespace "library://ns.adobe.com/flex/halo";

             

                    Button {

                        cornerRadius: 10;

                    }

                    DateField {

                        color: #780800;

                    }

                </fx:Style>

             

                <mx:VBox>

                    <mx:Button label="I'm a button!" />

                    <mx:DateField />  

                </mx:VBox>

             

            </mx:Application>

             

             

            Feel free to log a bug/enhancement request in the bug base http://bugs.adobe.com/flex/ against the Flex Documentation project and say that the docs could use a bit more clarification (just be sure to cite the URL you were looking at).
            Peter deHaan
            Flex SDK Team | Adobe Systems Inc
            • 3. Re: CSS and namespaces?
              Peter Farland Level 3

              Hi,

               

              The @namespace declaration should always go at the top of your .css file (or <Style> block in an MXML file) before any style declarations.  To complete that example and fill in the "..." - since it uses the default namespace without a prefix, the type selectors would remain unchanged.

              <mx:Style>
              
                  @namespace "http://www.adobe.com/2006/mxml";
              
                      Button {
                          cornerRadius: 10;
                      }
                      DateField {
                          color: #780800;
                      }
              
              </mx:Style>
              

               

              That said, if you're just trying to compile your Flex 3 application in Flex 4 - specify the --compatibility-version=3 compiler argument instead as you won't need to qualify type selectors with CSS namespaces.

               

              Pete

               

              P.S. Just to check, did you get that information from the Adobe DevNet article about the differences between Flex 3 and Flex 4?

              http://www.adobe.com/devnet/flex/articles/flex3and4_differences_02.html

               

              There are more details in the Flex 4 SDK spec for CSS Namespaces Support:

              http://opensource.adobe.com/wiki/display/flexsdk/CSSNamespacesSupport

               

              There is also a spec describing the new CSS support in Flex 4 SDK:

              http://opensource.adobe.com/wiki/display/flexsdk/CSSAdvancedSelectors

              • 4. Re: CSS and namespaces?
                Handycam Level 1

                Thanks, that clears it up nicely.