<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.

Comments

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
StatusFileSize
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
StatusFileSize
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
StatusFileSize
new13.71 KB

This patch has been committed.

Status:Fixed» Needs work

Found a bug. Working on the fix

Status:Needs work» Fixed
StatusFileSize
new1.3 KB

This patch has been committed

StatusFileSize
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
StatusFileSize
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
StatusFileSize
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.