You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Nick Collins <nd...@gmail.com> on 2013/06/07 08:19:26 UTC
Thoughts about CSS and Flex
Okay, so lately I've been working on a project using a lot of CSS3 and as I
was working on it and looking for a way to help manage the cross-browser
compliance issue I came across a tool called Compass for use with SASS.
After having used it for a little while now, I got to thinking, what if we
had a tool like this for Flex, where the compiler imported a set of mixins
based on the compile target that provided the transformations to the CSS
that that particular target needed. Additionally, that would give us some
added benefits such as being able to have nested styles and
style inheritance. I think this would be awesome, since at least in my
opinion, the CSS support in Flex is highly limited in its present state.
Re: Thoughts about CSS and Flex
Posted by Nick Collins <nd...@gmail.com>.
I understand it can be done like that, but then you have your styles
intruding into your code. If you are looking to have clear separation
between form, function, and style, you cannot presently do it with the
current Flex CSS implementation.
On Tue, Jun 11, 2013 at 2:56 AM, Justin Mclean <ju...@classsoftware.com>wrote:
> Hi,
>
> > In CSS3 you can do it by simply having a comma delimited list of
> gradients assigned to the
> > background attribute, and then control the repetition, positioning, and
> > scaling of each in the same fashion, by having those values in a
> > comma-delimited list on the corresponding attribute.
> Can you raise a JIRA for this issue and include some sample code for how
> you think you specify these attributes.
>
> It's probably not that hard to add as there's a few existing CSS styles
> that support arrays.
>
> > Also, if you are using SASS or LESS you can create variables within the
> > stylesheet that correspond to a particular RGBA color value.
> Flex can support some of this by using PropertyReference but it probably
> just as easy to use setStyle in ActionsScript.
>
> <fx:Script>
> [Bindable]
> private var myColour:int = 0x000000;
> </fx:Script>
>
> <fx:Style>
> @namespace s "library://ns.adobe.com/flex/spark";
> s|Button {
> color: PropertyReference("myColour");
> }
> </fx:Style>
>
> Thanks,
> Justin
Re: Thoughts about CSS and Flex
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
> In CSS3 you can do it by simply having a comma delimited list of gradients assigned to the
> background attribute, and then control the repetition, positioning, and
> scaling of each in the same fashion, by having those values in a
> comma-delimited list on the corresponding attribute.
Can you raise a JIRA for this issue and include some sample code for how you think you specify these attributes.
It's probably not that hard to add as there's a few existing CSS styles that support arrays.
> Also, if you are using SASS or LESS you can create variables within the
> stylesheet that correspond to a particular RGBA color value.
Flex can support some of this by using PropertyReference but it probably just as easy to use setStyle in ActionsScript.
<fx:Script>
[Bindable]
private var myColour:int = 0x000000;
</fx:Script>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|Button {
color: PropertyReference("myColour");
}
</fx:Style>
Thanks,
Justin
Re: AW: Thoughts about CSS and Flex
Posted by Nick Collins <nd...@gmail.com>.
I am quite familiar with Flex 4, and while yes, Flex 4 is WAY better than
Flex 3.x was, there are still a lot of things that you cannot do with CSS
"out of the box". For example, lets say you wanted to have a nice button
that was comprised of 3 or 4 overlaid levels of gradients. For this you
would have to use FXG or the graphics API by hand. In CSS3 you can do it by
simply having a comma delimited list of gradients assigned to the
background attribute, and then control the repetition, positioning, and
scaling of each in the same fashion, by having those values in a
comma-delimited list on the corresponding attribute. That way the same
style could be easily applied to both mobile and web button components in a
reliable and scalable fashion.
Also, if you are using SASS or LESS you can create variables within the
stylesheet that correspond to a particular RGBA color value. With CSS
imports you can easily have a CSS file that essentially acts as your global
color palette and you assign the colors in ways that work well ( i.e.
Michigan Maize )
On Fri, Jun 7, 2013 at 11:15 AM, Alex Harui <ah...@adobe.com> wrote:
> OTOH, Flex CSS differs from W3C in several ways:
>
> 1) non-standard property names do not follow W3C naming rules
> 2) Some common properties like margins are not supported
> 3) Size properties (width height, etc) not supported
> 4) Flex uses gap which is not supported in W3C CSS
> 5) Attribute selectors not supported
> 6) Most media query rules not supported
> 7) Units other than px not supported
>
> I'm hoping to get more of this working in FlexJS.
>
>
> On 6/7/13 2:14 AM, "christofer.dutz@c-ware.de" <ch...@c-ware.de>
> wrote:
>
> >Something I would certainly like to have woud be the ability to Import
> >other CSS files :-)
> >
> >Chris
> >
> >________________________________________
> >Von: Justin Mclean [justin@classsoftware.com]
> >Gesendet: Freitag, 7. Juni 2013 08:37
> >An: dev@flex.apache.org
> >Betreff: Re: Thoughts about CSS and Flex
> >
> >Hi,
> >
> >> the CSS support in Flex is highly limited in its present state.
> >
> >What do you think it's missing?
> >
> >Flex 4 added a lot of advanced CSS support and it now supports class,
> >type, compound, id, descendant and pseudo selectors and media queries.
> >
> >
> http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf6288
> >3-7ff2.html
> >
> >Thanks,
> >Justin
>
>
Re: AW: Thoughts about CSS and Flex
Posted by Alex Harui <ah...@adobe.com>.
OTOH, Flex CSS differs from W3C in several ways:
1) non-standard property names do not follow W3C naming rules
2) Some common properties like margins are not supported
3) Size properties (width height, etc) not supported
4) Flex uses gap which is not supported in W3C CSS
5) Attribute selectors not supported
6) Most media query rules not supported
7) Units other than px not supported
I'm hoping to get more of this working in FlexJS.
On 6/7/13 2:14 AM, "christofer.dutz@c-ware.de" <ch...@c-ware.de>
wrote:
>Something I would certainly like to have woud be the ability to Import
>other CSS files :-)
>
>Chris
>
>________________________________________
>Von: Justin Mclean [justin@classsoftware.com]
>Gesendet: Freitag, 7. Juni 2013 08:37
>An: dev@flex.apache.org
>Betreff: Re: Thoughts about CSS and Flex
>
>Hi,
>
>> the CSS support in Flex is highly limited in its present state.
>
>What do you think it's missing?
>
>Flex 4 added a lot of advanced CSS support and it now supports class,
>type, compound, id, descendant and pseudo selectors and media queries.
>
>http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf6288
>3-7ff2.html
>
>Thanks,
>Justin
AW: Thoughts about CSS and Flex
Posted by "christofer.dutz@c-ware.de" <ch...@c-ware.de>.
Something I would certainly like to have woud be the ability to Import other CSS files :-)
Chris
________________________________________
Von: Justin Mclean [justin@classsoftware.com]
Gesendet: Freitag, 7. Juni 2013 08:37
An: dev@flex.apache.org
Betreff: Re: Thoughts about CSS and Flex
Hi,
> the CSS support in Flex is highly limited in its present state.
What do you think it's missing?
Flex 4 added a lot of advanced CSS support and it now supports class, type, compound, id, descendant and pseudo selectors and media queries.
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62883-7ff2.html
Thanks,
Justin
Re:Re: Thoughts about CSS and Flex
Posted by DarkStone <da...@163.com>.
I agree, Flex 4 CSS is pretty advanced and way better than before.
The reason why Nick thought Flex CSS was limited is that a lot of Flex Developers aren't familiar with Flex 4.
While the apache community is working so hard to bring us amazing new features to Flex, we should also give the user groups more and more convincing Flex Apps made with Flex 4.x and above.
For instance, create a Show Case page on http://flex.apache.org/, and provide more video tutorials and blogs for the new features of Flex.
Especially, a roadmap of future Flex versions is desperately needed on the http://flex.apache.org/
At 2013-06-07 14:37:08,"Justin Mclean" <ju...@classsoftware.com> wrote:
>Hi,
>
>> the CSS support in Flex is highly limited in its present state.
>
>What do you think it's missing?
>
>Flex 4 added a lot of advanced CSS support and it now supports class, type, compound, id, descendant and pseudo selectors and media queries.
>
>http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62883-7ff2.html
>
>Thanks,
>Justin
>
Re: Thoughts about CSS and Flex
Posted by Justin Mclean <ju...@classsoftware.com>.
Hi,
> the CSS support in Flex is highly limited in its present state.
What do you think it's missing?
Flex 4 added a lot of advanced CSS support and it now supports class, type, compound, id, descendant and pseudo selectors and media queries.
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62883-7ff2.html
Thanks,
Justin