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

CommentFileSizeAuthor
#22 advagg-1943404-22-flaten-css-media.patch5.46 KBmikeytown2
#18 advagg-1943404-18-fix-ie9.patch2.14 KBmikeytown2
#13 advagg-1943404-13-fix-php-errors.patch721 bytesmikeytown2
#12 advagg-1943404-12-fix-mixed-media.patch1.3 KBmikeytown2
#10 advagg-1943404-10-big-css.patch13.71 KBmikeytown2
#9 advagg-1943404-9-big-css.patch10.29 KBmikeytown2
#6 advagg-1943404-6-big-css.patch8.61 KBmikeytown2

Comments

markhalliwell’s picture

markhalliwell
Primary language English
commented

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

mikeytown2 commented
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

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

Make this happen
http://davidwalsh.name/css-media

mikeytown2’s picture

mikeytown2 commented

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

mikeytown2 commented

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

mikeytown2 commented
Status: Active » Needs work
StatusFileSize
new advagg-1943404-6-big-css.patch8.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 commented

Why this needs to be an option: http://www.broken-links.com/2007/02/15/ie7-and-import-media-types/
Still no luck for work around: http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/Respond

mikeytown2’s picture

mikeytown2 commented

also need to fix bundler sub module

mikeytown2’s picture

mikeytown2 commented
Status: Needs work » Needs review
StatusFileSize
new advagg-1943404-9-big-css.patch10.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

mikeytown2 commented
Status: Needs review » Fixed
StatusFileSize
new advagg-1943404-10-big-css.patch13.71 KB

This patch has been committed.

mikeytown2’s picture

mikeytown2 commented
Status: Fixed » Needs work

Found a bug. Working on the fix

mikeytown2’s picture

mikeytown2 commented
Status: Needs work » Fixed
StatusFileSize
new advagg-1943404-12-fix-mixed-media.patch1.3 KB

This patch has been committed

mikeytown2’s picture

mikeytown2 commented
StatusFileSize
new advagg-1943404-13-fix-php-errors.patch721 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.

plazik’s picture

plazik commented
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 commented

Relevant?
http://stackoverflow.com/questions/6917639/css-media-query-not-working-i...

mikeytown2’s picture

mikeytown2 commented

http://stackoverflow.com/questions/6881958/how-to-disable-compatibility-...
http://api.drupal.org/comment/18004#comment-18004

mikeytown2’s picture

mikeytown2 commented
Status: Needs work » Fixed
StatusFileSize
new advagg-1943404-18-fix-ie9.patch2.14 KB

The following patch has been committed

plazik’s picture

plazik commented
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

mikeytown2 commented

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

mikeytown2 commented

Looks like the needed change is inside of advagg_get_css_aggregate_contents()

mikeytown2’s picture

mikeytown2 commented
Status: Needs work » Fixed
StatusFileSize
new advagg-1943404-22-flaten-css-media.patch5.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.