I run into some issues when using "@media print" declarations. Print styles are most likely to always have any background images disabled, also including !important property. This module takes these properties and includes it output. If !important is used to remove background images I don't have to explain the end result. It probably affects inline media queries as well.

Another issue is when using css3 gradients for backgrounds. These are skipped by the module and overwritten on output by print styles, even without !important propery. I can imagine that this is an issue with border-image property as well.

I can think of 2 solutions in this situation. First, skip any background properties inside any "@media" declarations, or second solution, skip any background declarations without url attribute.

CommentFileSizeAuthor
#16 css_emimage-1293616-16-fix-media-D6.patch4.17 KBmikeytown2
#4 media_embedded.patch4.22 KBkilles@www.drop.org
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Gerhard Killesreiter’s picture

Gerhard Killesreiter CreditAttribution: Gerhard Killesreiter commented
Title: Breaks images when inline print css are used » Breaks images when @media declarations are used

#1395762: CSS Embedded Images - jQuery mobile and @media queries issue was marked as a duplicate of this issue.

It seems as if emiage would ignore @media declaration. In the .emimage.css files there are none even if the normal css files did have some.

Gerhard Killesreiter’s picture

Gerhard Killesreiter CreditAttribution: Gerhard Killesreiter commented
Priority: Normal » Major

increasing priority.

I guess it comes down to extending the undocumented regexp in _css_emimage_text_processor

bcobin’s picture

bcobin CreditAttribution: bcobin commented

Confirmed here - images break with @media queries.

killes@www.drop.org’s picture

killes@www.drop.org CreditAttribution: killes@www.drop.org commented
Status: Active » Needs review
FileSize
media_embedded.patch4.22 KB

Here's a patch that could use some testing.

C. Lee’s picture

C. Lee CreditAttribution: C. Lee commented

Which version should I apply the patch for? I checked out the repository and I can't find _css_emimage_text_processor() in HEAD revision. I used this command to check out: git clone --branch 7.x-1.x http://git.drupal.org/project/css_emimage.git

romansta’s picture

romansta CreditAttribution: romansta commented

It works! I applied the patch to version 7.x-1.2. I use the AdaptiveTheme, that uses @media queries.

killes@www.drop.org’s picture

killes@www.drop.org CreditAttribution: killes@www.drop.org commented

Does this patch really work for anybody? After some more serious testing, I think it doesn't.

I also have to admit that there is probably no easy patch for this.

A better and more foolproof approach would be to put the parts with @media declarations into separate files and don't pipe them through this module.

killes@www.drop.org’s picture

killes@www.drop.org CreditAttribution: killes@www.drop.org commented
Version: 7.x-1.2 » 6.x-2.x-dev

Also the patch is for the D6 version.

cainrus’s picture

cainrus CreditAttribution: cainrus commented

Patch is not working with adaptive media css rules.

cainrus’s picture

cainrus CreditAttribution: cainrus commented
Version: 6.x-2.x-dev » 7.x-1.x-dev

Patch is not solving issue for latest released drupal version.

mikeytown2’s picture

mikeytown2 CreditAttribution: mikeytown2 commented

Can I get a test case for this? Input CSS, expected result, actual result?

The issue from what I'm gathering is the @media declaration is not being appended to the rule containing the base64 datastream, correct?

I'll be investigating this using jQuery mobile as a test case.

mikeytown2’s picture

mikeytown2 CreditAttribution: mikeytown2 commented
Status: Needs review » Needs work

Looking at what's going on and _css_emimage_build_external() needs to be aware of the media query. Patch in #4 doesn't do this.

mikeytown2’s picture

mikeytown2 CreditAttribution: mikeytown2 commented

Have this fixed inside of _css_emimage_build_external with the help of http://stackoverflow.com/questions/14145620/regular-expression-for-media...
Cleaning it up and will commit it to the fork #1968998: Get a 7.x version out that works with Advagg 7.x-2x

mikeytown2’s picture

mikeytown2 CreditAttribution: mikeytown2 commented
Status: Needs work » Fixed

Pushed the fix.

killes@www.drop.org’s picture

killes@www.drop.org CreditAttribution: killes@www.drop.org commented

Is there a chance for a D6 backport?

mikeytown2’s picture

mikeytown2 CreditAttribution: mikeytown2 commented
Version: 7.x-1.x-dev » 6.x-2.x-dev
Status: Fixed » Needs review
FileSize
css_emimage-1293616-16-fix-media-D6.patch4.17 KB

Untested but should work

killes@www.drop.org’s picture

killes@www.drop.org CreditAttribution: killes@www.drop.org commented
Assigned: Unassigned » killes@www.drop.org

Much appreciated! I'll do some testing