Hi have an Omega-based site and it renders well when I'm in dev mode (no CSS aggregation). I have basically 2 views: mobile (using global.css) and web (using xxx_default.css)
When I turn on CSS aggregation it crashes the mobile version. When analyzing in Firebug I found that is getting the style from the xxx_default.css stylesheet instead of the global.css one. When I return to NO aggregation, everything works as it should.

I need help.. is there is anything that need to be done before enabling CSS aggregation?

Comments

jerryitt’s picture

jerryitt commented

Can you provide more information about your subtheme configuration and wheather or not you are using delta's?
Also can you provide link to the site if possible?

alfredojez’s picture

alfredojez commented
Status: Active » Closed (works as designed)

Thanks for the interest. I finally found the problem.

One of the CSS I was working on had a syntax error (I found it with the W3C CSS validator http://jigsaw.w3.org/css-validator/). Apparently when I was using the theme with no CSS aggregation, the error was not considered, but when using CSS aggregation the error stopped the rest of the file to work causing the difference.

couloir007’s picture

couloir007 commented

@alfredojez I'm having the same issue. Was it a custom file or system file. None of my custom css is causing the problem.

Thanks!

so4’s picture

so4 commented

Same issue, validated each css3 file, but it didn't fix the issue for me. I use three different css with media queries: global.css constructs the mobile site, mytheme-alpha-default-narrow.css the tablet or small display site & mytheme-alpha-default-normal.css is the standard website.

I used the same css selectors in each css and it doesn't work with aggregated css files, because the aggregated css files only take one selector. May be compressing without aggregating the theme css files can be a quick fix for this issue.

mrpauldriver’s picture

mrpauldriver commented

Yup css error - double }} in my case.

Thank you for the validation tip @alfredojez

kkuhnen’s picture

kkuhnen commented

I was having the same issue with my media queries not working once CSS Aggregation & Optimization had been turned on. In this case, I was using a custom Omega sub-theme, and the media queries in question were in global.css & MYTHEME-alpha-default.css -- but I believe this would also happen if you declare stylesheets in your theme's info file using the media queries like so:

stylesheets[all and (min-width: 650px) and (min-device-width: 650px)][] = stylesheet.css

The generated optimized stylesheet will wrap the CSS from stylesheet.css with an @media rule, which subsequently breaks any @media rules in stylesheet.css.

It turns out that nested @media rules, while perfectly valid in the CSS3 spec, are disallowed in CSS2.1, and browser support is not very good. In fact, it seems Firefox is the only browser that is following the CSS3 spec in this case -- read more about this issue at stackoverflow.com.

so4’s picture

so4 commented

You have to enable the omega base theme when you enable aggregation on your subtheme in order to make it work.

droddis’s picture

droddis commented

This was a great tip so4, thanks for this!