New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Asset helpers don't compile in Microsoft filter statements #37

Closed
mbaumbach opened this Issue Sep 1, 2011 · 6 comments

Comments

Projects
None yet
4 participants
@mbaumbach

The title may be a bit specific, but this is the only case I've tried. I imagine this could potentially happen in other cases too. I've been using Fancybox (Fancybox.net) and they have some IE filters. While trying to convert the file to use assets, I hit this bug:

.fancybox-ie6 #fancybox-close {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=image_path('fancybox/fancy_close.png'), sizingMethod='scale');
}

I converted the file to have an scss ending and other image_paths are working fine, it's just the ones in this hacky IE filter stuff. I imagine this is falling outside of some of the parsing rules, but I haven't looked at the sass/sass-rails code yet.

Just to note, this is running on Rails 3.1 final.

@mbaumbach

This comment has been minimized.

Show comment
Hide comment
@mbaumbach

mbaumbach Sep 1, 2011

Simple workaround is to obviously append "erb" to the filename and just do those files using Ruby's helpers, but that just feels dirty. :)

Simple workaround is to obviously append "erb" to the filename and just do those files using Ruby's helpers, but that just feels dirty. :)

@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Sep 1, 2011

Collaborator

This is not a bug (and if it were it would be a bug against sass, not sass-rails :P)

The filter syntax is not actually legal CSS syntax. As a result the Sass parser has a hack in place where it basically escapes the value of the filter attribute instead of parsing it like it does the other properties. As such, you need to interpolate any scripting with #{...} as you would in selectors or property names:

.fancybox-ie6 #fancybox-close {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{image_path('fancybox/fancy_close.png')}, sizingMethod='scale');
}
Collaborator

chriseppstein commented Sep 1, 2011

This is not a bug (and if it were it would be a bug against sass, not sass-rails :P)

The filter syntax is not actually legal CSS syntax. As a result the Sass parser has a hack in place where it basically escapes the value of the filter attribute instead of parsing it like it does the other properties. As such, you need to interpolate any scripting with #{...} as you would in selectors or property names:

.fancybox-ie6 #fancybox-close {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=#{image_path('fancybox/fancy_close.png')}, sizingMethod='scale');
}
@mbaumbach

This comment has been minimized.

Show comment
Hide comment
@mbaumbach

mbaumbach Sep 1, 2011

Thank you, I was looking through the code in sass-rails and didn't see anywhere I could apply a patch, so my next target was going to be Sass. :)

I think this is fair though, as illegal CSS syntax shouldn't necessarily be supported, but I'm sure that will be fought over the more Rails 3.1 becomes standard. :)

Thank you, I was looking through the code in sass-rails and didn't see anywhere I could apply a patch, so my next target was going to be Sass. :)

I think this is fair though, as illegal CSS syntax shouldn't necessarily be supported, but I'm sure that will be fought over the more Rails 3.1 becomes standard. :)

@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Sep 1, 2011

Collaborator

there's not much to fight about. MS has changed the filter syntax in IE9+ to use strings instead, and you have to use #{} interpolation in sass strings, so there's not really any point in supporting the legacy syntax with anything more than we have already.

Collaborator

chriseppstein commented Sep 1, 2011

there's not much to fight about. MS has changed the filter syntax in IE9+ to use strings instead, and you have to use #{} interpolation in sass strings, so there's not really any point in supporting the legacy syntax with anything more than we have already.

@zanedev

This comment has been minimized.

Show comment
Hide comment
@zanedev

zanedev Apr 11, 2014

I found this to be a good solution, using a mixin: http://dontwakemeup.com/ie8-backgroundcover-fallback-and-rails/

zanedev commented Apr 11, 2014

I found this to be a good solution, using a mixin: http://dontwakemeup.com/ie8-backgroundcover-fallback-and-rails/

@dougfarre

This comment has been minimized.

Show comment
Hide comment
@dougfarre

dougfarre Nov 4, 2014

Why is this closed? This is still broken for me.

Why is this closed? This is still broken for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment