blog
7211 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
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.
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
"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.
.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.
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.
August 16, 2010