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

Add IE support for gradients #183

Closed
raylu opened this Issue Jul 28, 2010 · 12 comments

Comments

Projects
None yet
4 participants
@raylu

raylu commented Jul 28, 2010

diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
index dd5e36b..a66e48f 100644
--- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss
+++ b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
@@ -38,6 +38,9 @@
   @if $image { $background : $image + unquote(", "); }
   $start: unquote($start);
   $end: opposite-position($start);
+  @if $experimental-support-for-microsoft {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-start($color-stops)}', endColorstr='#{ie-end($color-stops)}');
+  }
   @if $experimental-support-for-webkit {
     background-image: #{$background}-webkit-gradient(linear, grad-point($start), grad-point($end), grad-color-stops($color-stops));
   }
@@ -79,4 +82,4 @@
     background-image: #{$background}-moz-radial-gradient($center-position, circle, $color-stops);
   }
   background-image: radial-gradient($center-position, circle, $color-stops);
-}
\ No newline at end of file
+}
diff --git a/lib/compass/sass_extensions/functions/gradient_support.rb b/lib/compass/sass_extensions/functions/gradient_support.rb
index 90112c0..1edb2ca 100644
--- a/lib/compass/sass_extensions/functions/gradient_support.rb
+++ b/lib/compass/sass_extensions/functions/gradient_support.rb
@@ -148,6 +148,14 @@ module Compass::SassExtensions::Functions::GradientSupport
         end
       end)
     end
+
+    def ie_start(list)
+      Sass::Script::String.new(list.to_s.split(', ').first)
+    end
+    def ie_end(list)
+      Sass::Script::String.new(list.to_s.split(', ').last)
+    end
+
     private
     def normalize_stops!(color_list)
       positions = color_list.values
@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Jul 28, 2010

Member

interesting. it's my understanding that this can have some pretty severe performance impacts. I think we'd want users to opt-in specifically to ie gradient support. thoughts?

Member

chriseppstein commented Jul 28, 2010

interesting. it's my understanding that this can have some pretty severe performance impacts. I think we'd want users to opt-in specifically to ie gradient support. thoughts?

@raylu

This comment has been minimized.

Show comment
Hide comment
@raylu

raylu Aug 2, 2010

I haven't noticed it in my testing, and it was on an old XP netbook. Where did you read about the performance issues?

raylu commented Aug 2, 2010

I haven't noticed it in my testing, and it was on an old XP netbook. Where did you read about the performance issues?

@codyrobbins

This comment has been minimized.

Show comment
Hide comment
@codyrobbins

codyrobbins Aug 21, 2010

Yeah, I’ve been using my own Sass mixin much like this with these IE gradient transforms for a while, and as far as I can tell there’s no performance penalty.

codyrobbins commented Aug 21, 2010

Yeah, I’ve been using my own Sass mixin much like this with these IE gradient transforms for a while, and as far as I can tell there’s no performance penalty.

@bbodien

This comment has been minimized.

Show comment
Hide comment
@bbodien

bbodien Oct 6, 2010

I'd definitely want the use of any IE DX filters to be opt-in, because I disagree with their existence on principle and don't believe they should be used.

bbodien commented Oct 6, 2010

I'd definitely want the use of any IE DX filters to be opt-in, because I disagree with their existence on principle and don't believe they should be used.

@codyrobbins

This comment has been minimized.

Show comment
Hide comment
@codyrobbins

codyrobbins Oct 6, 2010

One of the major reasons to use SASS and Compass is that it makes cross-browser styling painless when different browsers don’t support the same feature with the same syntax. Whether or not you think the IE filters should exist on idealogical grounds, on pragmatic ones they do in fact exist and they provided analogous functionality—so support for them should definitely be rolled in where possible.

codyrobbins commented Oct 6, 2010

One of the major reasons to use SASS and Compass is that it makes cross-browser styling painless when different browsers don’t support the same feature with the same syntax. Whether or not you think the IE filters should exist on idealogical grounds, on pragmatic ones they do in fact exist and they provided analogous functionality—so support for them should definitely be rolled in where possible.

@bbodien

This comment has been minimized.

Show comment
Hide comment
@bbodien

bbodien Oct 6, 2010

I'm not saying it shouldn't be available, just that anything as vendor proprietary as DX filters as a means of implementing of a particular technique should be disabled by default. There's a significant but subtle line to be drawn between differences in syntax in implementations of a CSS standards module, and a proprietary system, regardless of the similarity in results that can be achieved with each.

bbodien commented Oct 6, 2010

I'm not saying it shouldn't be available, just that anything as vendor proprietary as DX filters as a means of implementing of a particular technique should be disabled by default. There's a significant but subtle line to be drawn between differences in syntax in implementations of a CSS standards module, and a proprietary system, regardless of the similarity in results that can be achieved with each.

@codyrobbins

This comment has been minimized.

Show comment
Hide comment
@codyrobbins

codyrobbins Oct 6, 2010

What does disabling it achieve other than putting a figurative foot down about the matter? Doing so isn’t going to make IE6 suddenly start supporting a standard way to do this stuff. Compass is about making it easier to write cross-browser CSS, and it would simply be helpful for people to have stuff like gradients and drop shadows work in IE out of the box. I would say allow people to turn it off, but it should be on by default.

Incidentally, Microsoft’s wacky DX stuff pre-dated all the equivalent CSS3 stuff by like a decade. I actually give Microsoft major props for being so forward-thinking, albeit in a non-standards kind of way.

codyrobbins commented Oct 6, 2010

What does disabling it achieve other than putting a figurative foot down about the matter? Doing so isn’t going to make IE6 suddenly start supporting a standard way to do this stuff. Compass is about making it easier to write cross-browser CSS, and it would simply be helpful for people to have stuff like gradients and drop shadows work in IE out of the box. I would say allow people to turn it off, but it should be on by default.

Incidentally, Microsoft’s wacky DX stuff pre-dated all the equivalent CSS3 stuff by like a decade. I actually give Microsoft major props for being so forward-thinking, albeit in a non-standards kind of way.

@codyrobbins

This comment has been minimized.

Show comment
Hide comment
@codyrobbins

codyrobbins Oct 6, 2010

Incidentally, Compass already allows you to turn off various vendor-specific stuff via http://compass-style.org/docs/reference/compass/css3/shared. Do you think it would be acceptable if the DX stuff could simply be turned on and off along with the other experimental IE stuff?

codyrobbins commented Oct 6, 2010

Incidentally, Compass already allows you to turn off various vendor-specific stuff via http://compass-style.org/docs/reference/compass/css3/shared. Do you think it would be acceptable if the DX stuff could simply be turned on and off along with the other experimental IE stuff?

@bbodien

This comment has been minimized.

Show comment
Hide comment
@bbodien

bbodien Oct 6, 2010

Yes, props to MS for paving the way with that stuff, but then when that and a number of other features were standardised, they left it three browser generations spanning a decade before they started implementing the standard approaches.

Anyway, as long as it's configurable then that would be fine. Personally I'd rather it be disabled by default as I think it's wrong to encourage developers to use vendor proprietary code when they should be extolling the virtues of progressive enrichment to their clients and employers. It just helps us all move in the right direction as an industry one tiny step at a time, rather than putting up and shutting up with what we've been dealt, and in doing so prolonging the unnecessary problem of having to "support" (make everything look identical in) legacy browsers. Viva la revolucion!

Back to the original issue of performance; I have seen sites that make extensive use of DX filters for opacity perform quite poorly, but I've never worked with a site that had to support IE6 and required gradients that didn't just use images for that purpose, so I can't speak to the performance hit of that particular feature.

bbodien commented Oct 6, 2010

Yes, props to MS for paving the way with that stuff, but then when that and a number of other features were standardised, they left it three browser generations spanning a decade before they started implementing the standard approaches.

Anyway, as long as it's configurable then that would be fine. Personally I'd rather it be disabled by default as I think it's wrong to encourage developers to use vendor proprietary code when they should be extolling the virtues of progressive enrichment to their clients and employers. It just helps us all move in the right direction as an industry one tiny step at a time, rather than putting up and shutting up with what we've been dealt, and in doing so prolonging the unnecessary problem of having to "support" (make everything look identical in) legacy browsers. Viva la revolucion!

Back to the original issue of performance; I have seen sites that make extensive use of DX filters for opacity perform quite poorly, but I've never worked with a site that had to support IE6 and required gradients that didn't just use images for that purpose, so I can't speak to the performance hit of that particular feature.

@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Oct 31, 2010

Member

related: #208

Member

chriseppstein commented Oct 31, 2010

related: #208

@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Nov 13, 2010

Member

Gradient mixin for IE6-8 using filters, only does simple linear gradients and must be applied seperately from the linear-gradient mixin. Closed by 2f40eb9.

Member

chriseppstein commented Nov 13, 2010

Gradient mixin for IE6-8 using filters, only does simple linear gradients and must be applied seperately from the linear-gradient mixin. Closed by 2f40eb9.

@chriseppstein

This comment has been minimized.

Show comment
Hide comment
@chriseppstein

chriseppstein Nov 13, 2010

Member

Thanks for the passionate arguments. In the end, I decided that because IE6-8 cannot implement the basic gradient API, that it would be misleading to add this support to that mixin. instead there is a new mixin that presents a different API so that expectations are set correctly. Also, this mixin can be used within the conditional IE stylesheets more easily and so avoid any potential collision with filter and background-image down the road.

Member

chriseppstein commented Nov 13, 2010

Thanks for the passionate arguments. In the end, I decided that because IE6-8 cannot implement the basic gradient API, that it would be misleading to add this support to that mixin. instead there is a new mixin that presents a different API so that expectations are set correctly. Also, this mixin can be used within the conditional IE stylesheets more easily and so avoid any potential collision with filter and background-image down the road.

donaldpiret pushed a commit to donaldpiret/compass that referenced this issue May 4, 2011

Gradient mixin for IE6-8 using filters, only does simple linear gradi…
…ents and must be applied seperately from the linear-gradient mixin. Closes CompassGH-183.

This issue was closed.

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