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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

markhalliwell’s picture

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 */
}
mikeytown2’s picture

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.

mikeytown2’s picture

Title: Bundler doesn't fully combine CSS » CSS: Use media queries to combine all, screen, print, etc media types
mikeytown2’s picture

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.

mikeytown2’s picture

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/

mikeytown2’s picture

Status: Active » Needs work
FileSize
8.61 KB

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

mikeytown2’s picture

mikeytown2’s picture

also need to fix bundler sub module

mikeytown2’s picture

Status: Needs work » Needs review
FileSize
10.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

mikeytown2’s picture

Status: Needs review » Fixed
FileSize
13.71 KB

This patch has been committed.

mikeytown2’s picture

Status: Fixed » Needs work

Found a bug. Working on the fix

mikeytown2’s picture

Status: Needs work » Fixed
FileSize
1.3 KB

This patch has been committed

mikeytown2’s picture

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.

Plazik’s picture

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

mikeytown2’s picture

mikeytown2’s picture

Status: Needs work » Fixed
FileSize
2.14 KB

The following patch has been committed

Plazik’s picture

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.

mikeytown2’s picture

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.

mikeytown2’s picture

Looks like the needed change is inside of advagg_get_css_aggregate_contents()

mikeytown2’s picture

Status: Needs work » Fixed
FileSize
5.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.