Support for Css media queries

[GoogleCodeExporter]

Right now, when values are changed, it is also changed inside all the media 
queries and if it not exist it is added..

Would be cool if it only modified the currently active media query

Original issue reported on code.google.com by aristide...@gmail.com on 5 Oct 2010 at 9:36

[GoogleCodeExporter]

Thank you for your feedback.

What about the cases when you want to to modify all media? Currently you have 
the choice by unselecting the file(s) which you don't want to modify.

Original comment by ronnie.k...@gmail.com on 7 Oct 2010 at 5:45

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

If the values in all media are the same, there is no poing in inside the 
queries.. they can and should be out.

But I see what you mean. Maybe add add a button of a modifier key that makes it 
apply to all queries instead only to the right ones

Original comment by aristide...@gmail.com on 8 Oct 2010 at 7:30

[GoogleCodeExporter]

Pleeeeease add support for this!

Original comment by verysoft...@gmail.com on 27 Oct 2010 at 2:47

[GoogleCodeExporter]

Have you tried the reduce filter functionality introduced in 1.7? If so, does 
it help in any way? If not, can you please give a short code example of a CSS 
media query and explain how the tool should behave to help me in the right 
direction?

Original comment by ronnie.k...@gmail.com on 27 Oct 2010 at 3:12

[GoogleCodeExporter]

Now I think I know what you're after. The reduce filter should work with the 
media attribute in a <link rel="stylesheet">, but that's it.

I will do an attempt on media queries within a few days. Stay tuned...

Original comment by ronnie.k...@gmail.com on 27 Oct 2010 at 6:10

[GoogleCodeExporter]

Yeah I think you got it. I'm talking about css media queries in the same CSS 
file.

I can imagine it working like this:

After finding all the matches in the file, check if any is inside media 
queries, then check whose of those media queries are active on the moment, then 
offer to update the value inside the most specific media query. Example:

div { 
    position: fixed;
    background-color: black; 
}

@media screen and (max-width: 1000px) { 
      div { 
        position: absolute;
        background-color: white; 
      }
}    
@media screen and (max-width: 800px) { 
    div { 
        background-color: red; 
    }
}

@media screen and (max-width: 400px) { 
    div { 
        background-color: green; 
    }
}

If the browser width at the moment is 500px and the user changes the 
background-color, then css-x-fire should change the value inside 800px query 
and only that one, because that is the one being applied in that moment.
On the other and if the user changes the display value, then change the 1000px 
query, because there is no value set in the 800px query, even being more 
specific.
If the current width is 1200px for example, none of the media queries is being 
applied at the moment,  so change the standard value outside the media queries 
instead.

That would be the basic behavior. The next level would be to offer as 
suggestion or option, to create the atribute on the current most specific media 
query in case it doesn't exist. For example, if the browser width is 500px and 
the user changes the display value, change the value inside the 1000px query 
like normal. But in addition to that, offer also a button or something like 
that, that creates the display atribute and value inside the 800px media query 
instead, since it is the most specific one.

There is really no point in changing the same value in more that one media 
query at the same time because if the value is suposed to be the same in two 
media queries than the atribute should be removed from the most specific query, 
because it is already being applied by the less specific one. (This part is not 
really supposed to be part of css-x-fire. It is just how queries work 
logically.)

If I can answer any more questions please do not hesitate.

Thanks and good coding

Original comment by verysoft...@gmail.com on 27 Oct 2010 at 11:13

[GoogleCodeExporter]

thanks for raising this issue! I need this too.

Original comment by pauldewo...@gmail.com on 28 Oct 2010 at 12:46

[GoogleCodeExporter]

Fixed in 1.9 - try it out!

Make sure that the browser plugin is updated and @media query filter option is 
checked in CSS-X-Fire. 

Also bear in mind that CSS 3 media queries are only supported if the IDE 
supports them. At the time writing CSS 3 media queries are only supported in 
the latest EAP's. See http://youtrack.jetbrains.net/issue/WI-2601

Original comment by ronnie.k...@gmail.com on 31 Oct 2010 at 11:00

• Changed state: Fixed

[GoogleCodeExporter]

Yeah it is working.. fine most  of the time.

But there is still something that it is not doing. Offering to create the rule 
in the media query in case it doesn't  exist. 

Imagine the following workflow:
1.Style your page according the standard size.
2.Create a media query for a different size.
3.Resize you browser window to match that size.
4.Adjust the css values you need in firebug in order to adjust the page to the 
new size.
5. Go to Intellij and apply everything.
6. Congratulations, you have just the necessary selectors and atributes to make 
it adjust to the new size inside the new media query

Original comment by aristide...@gmail.com on 31 Oct 2010 at 12:56

[GoogleCodeExporter]

Thank you for testing.

The scenario you are describing is related to Issue 8: 
http://code.google.com/p/css-x-fire/issues/detail?id=8

I will have a look at that when I get the time.

Original comment by ronnie.k...@gmail.com on 31 Oct 2010 at 1:14