<link type="text/css" rel="stylesheet" href="http://lvlt.sandbox/sites/default/files/advagg_css/css__mjG2sC3H02i_0vDh2K_F9gTSZl1KHZ2BB1ILA8EEUeE__n0CNmW0d9LEuW5F0luNG1e54QYN68j_Yczbjyd3RaRo__nC0jJI-2xohKzCvFq1Fm37Wp9xFK5_7J6TtgqlszDBA.css" media="all" />
<link type="text/css" rel="stylesheet" href="http://lvlt.sandbox/sites/default/files/advagg_css/css__Lck2ZjlT2A2dmxDkcefVscUqYRTpw4VY4JEitCzxpIs__TVfFy8QIZmzmt1mgoF8pPuJ9CN_gb-ZCO7n8hEZTnuU__nC0jJI-2xohKzCvFq1Fm37Wp9xFK5_7J6TtgqlszDBA.css" media="screen" />
<link type="text/css" rel="stylesheet" href="http://lvlt.sandbox/sites/default/files/advagg_css/css__l5FfWsoIGBGx3dudymVqFoz5pfNc6BsIKOIWfkwj_gQ__YWLMIbIEiRt001hTp6V1jZlySlzyxQ3VONpxXHKaBSs__nC0jJI-2xohKzCvFq1Fm37Wp9xFK5_7J6TtgqlszDBA.css" media="all" />

At first, I thought it was because of the different media types, however you can see here there's two of the all media types.


When AdvAgg is disabled:

  <style>@import url("http://lvlt.sandbox/modules/system/system.base.css?mjo2zp");</style>
<style>@import url("http://lvlt.sandbox/sites/all/modules/jquery_update/replace/ui/themes/base/minified/jquery.ui.core.min.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/jquery_update/replace/ui/themes/base/minified/jquery.ui.theme.min.css?mjo2zp");
@import url("http://lvlt.sandbox/modules/overlay/overlay-parent.css?mjo2zp");
@import url("http://lvlt.sandbox/modules/contextual/contextual.css?mjo2zp");</style>
<style>@import url("http://lvlt.sandbox/sites/all/modules/date/date_api/date.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/date/date_popup/themes/datepicker.1.7.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/fences/field.css?mjo2zp");</style>
<style media="screen">@import url("http://lvlt.sandbox/sites/all/modules/flexslider/assets/css/flexslider_img.css?mjo2zp");</style>
<style>@import url("http://lvlt.sandbox/profiles/openenterprise/modules/views/css/views.css?mjo2zp");
@import url("http://lvlt.sandbox/profiles/openenterprise/wysiwyg_align.css?mjo2zp");
@import url("http://lvlt.sandbox/profiles/openenterprise/modules/caption_filter/caption-filter.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/admin_menu/admin_menu.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/admin_menu/admin_menu.uid1.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/admin_menu/admin_menu_toolbar/admin_menu_toolbar.css?mjo2zp");
@import url("http://lvlt.sandbox/modules/shortcut/shortcut.css?mjo2zp");</style>
<style>@import url("http://lvlt.sandbox/sites/all/modules/colorbox/styles/plain/colorbox_style.css?mjo2zp");
@import url("http://lvlt.sandbox/profiles/openenterprise/modules/ctools/css/ctools.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/geshifilter/geshifilter.css?mjo2zp");
@import url("http://lvlt.sandbox/profiles/openenterprise/modules/panels/css/panels.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/libraries/photoswipe/photoswipe.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/wysiwyg_linebreaks/wysiwyg_linebreaks.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/themes/levelten/bootstrap/css/fontello.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/modules/views_responsive_grid/css/views-responsive-grid-global.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/libraries/flexslider/flexslider.css?mjo2zp");
@import url("http://lvlt.sandbox/profiles/openenterprise/modules/field_group/field_group.css?mjo2zp");</style>
<style>@import url("http://lvlt.sandbox/sites/all/themes/levelten/bootstrap/css/bootstrap.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/themes/bootstrap/css/style.css?mjo2zp");
@import url("http://lvlt.sandbox/sites/all/themes/levelten/bootstrap/css/responsive.css?mjo2zp");</style>

So yes, there's one module that's adding a screen media type to it's CSS. Everything else is all.

Perhaps we can do something like this in one aggregated file:

@media all {
  /* Styles */
@media screen {
  /* Styles */
@media all {
  /* Styles */

Category:bug» feature

This is a feature request as it is already combining the CSS as small as it can while maintaining the order... will tryout the media query trick.

Title:Bundler doesn't fully combine CSSCSS: Use media queries to combine all, screen, print, etc media types

Looking at the best way to make this happen and I think I'll add a data column to the advagg_aggregates table. For CSS files, it will store the media type. Not sure how it could be used for other purposes but for now this is the direction I'll go. I just hope the refactor to make this work is worth the effort.

advagg.missing.inc -> advagg_get_files_from_hashes() and everything down stream will need work so advagg_get_css_aggregate_contents() can do its magic.

advagg.inc -> advagg_insert_aggregate() and everything up stream will need work in order to save the media type in the database.

One thing that is a little tricky with this is @import statements. http://www.w3.org/TR/css3-mediaqueries/#media0 Example of this syntax in action: http://philarcher.org/diary/2011/importrules/

Status:Active» Needs work
new8.61 KB

Still need to add a setting and write the code to turn this functionally on; functionally is there though.

also need to fix bundler sub module

Status:Needs work» Needs review
new10.29 KB

Still need to add in the admin checkbox. Functionally has been turned on though and it appears to be working with this patch

Status:Needs review» Fixed
new13.71 KB

This patch has been committed.

Status:Fixed» Needs work

Found a bug. Working on the fix

Status:Needs work» Fixed
new1.3 KB

This patch has been committed

new721 bytes

Fixed another bug with this change. This patch has been committed.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Status:Closed (fixed)» Needs work

I'm using 7.x-2.0-alpha1 version of module and AdaptiveTheme 7.x-3.1.

If "Combine css files by using media queries " is checked media queries don't work in IE9 (IE8, Firefox, Chrome, Opera - works fine).

Status:Needs work» Fixed
new2.14 KB

The following patch has been committed

Status:Fixed» Needs work

Thanks, bit it stil doesn't work.
I thinks it doesn't because of "IE=edge,chrome=1".

If "Combine css files by using media queries" is checked the css file will be like this:

@media all {...}
@media screen {...}
@media only screen {
  @media only screen and (min-width:321px) and (max-width:480px){...}
  @media only screen and (min-width:481px) and (max-width:768px) {...}

I think IE9 doesn't like this construction @media only screen {@media only screen and (min-width:321px) and (max-width:480px) {...}}.

If I manual change css file to:

@media all {...}
@media screen {...}
@media only screen and (min-width:321px) and (max-width:480px){...}
@media only screen and (min-width:481px) and (max-width:768px) {...}

it works correct in IE9.

Works in firefox (my main browser) and thus I didn't catch this bug http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css/1...

Luckily I did some similar work with media queries in the css_emimage module #1293616: Breaks images when @media declarations are used so not all hope is lost :) This isn't going to be as easy as I've hoped though.

Looks like the needed change is inside of advagg_get_css_aggregate_contents()

Status:Needs work» Fixed
new5.46 KB

This patch has been committed. Let me know if any other bugs show up due to this :)

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.