Comments on: CSS Gradients for All!

By: eyelidlessness

eyelidlessness — Wed, 29 Jul 2009 15:06:12 +0000

travisalmand, the -ms- prefix and the full filter path (progid:DXImageTransform.Microsoft.Alpha) are required in IE 8′s “real” standards mode. They’re not required in “almost” standards mode or quirks mode.

By: travisalmand

travisalmand — Wed, 29 Jul 2009 13:57:31 +0000

@rasmusfl0e – I don’t understand what you mean, the standard filter seems to work in IE8 for me. I created a quick page with a big red block in it with an opacity of 25%.

This works in non-IE browsers:
opacity: .25;

This works in IE8, IE8 as IE7 and IE6 in Virtual XP Mode:
filter: alpha(opacity=25);

Or it does for me anyway. I don’t understand why it is said -ms-filter is required. Am I missing something?

By: gossi

gossi — Tue, 28 Jul 2009 22:26:02 +0000

ok matt, you got me :) IDE Templates is a good idea :)

By: eyelidlessness

eyelidlessness — Tue, 28 Jul 2009 22:13:00 +0000

rasmusfl0e,

Right. And come to think of it, I should update TextMate to reflect that.

By: rasmusfl0e

rasmusfl0e — Tue, 28 Jul 2009 21:09:30 +0000

@eyelidlessness: to make matters even worse MS has opted _not_ to implement “opacity” in IE8, but opted to require a vendor prefix on the proprietary “filter” which means IE now needs 2 lines instead of just one (doing the exact same stuff I presume):

opacity: [decimal];
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=[decimal * 100])”;
filter:alpha(opacity=[decimal * 100]);

(As PPK explains on Quirksmode)

*sigh*

By: eyelidlessness

eyelidlessness — Tue, 28 Jul 2009 19:11:04 +0000

gossi,

The -ms- prefix is new in IE 8, and I doubt most people have used it. But I think in “real” standards mode, all of their CSS extensions now require the prefix.

As far as duplicating work… any decent IDE or decent editor should be configurable to auto-complete that stuff. For instance, in TextMate I type opacity[tab][decimal] and the result is:

opacity: [decimal];
-moz-opacity: [decimal];
filter:alpha(opacity=[decimal * 100]);

Bandwidth is a greater concern than keystrokes, in my opinion, but really it should be negligible with good structure.

As MattCoz says, the alternative is worse. The prefix solution is the standards recommendation for early implementation and extension of CSS, and it arose out of concern over the first “Browser Wars” where IE and Netscape continually introduced and broke CSS features, making CSS rules a moving target and CSS code unmaintainable and unreliable.

With the prefixes comes the ability to target different interpretations of unfinished standards and for the browser vendors to introduce features that can be, but haven’t yet been, standardized. Without them comes chaos, with the only benefit being a false sense of compactness.

By: MattCoz

MattCoz — Tue, 28 Jul 2009 18:25:24 +0000

@gossi: A slight increase in work to prevent a huge increase in work due to possible compatibility issues? Yeah, makes sense.

By: gossi

gossi — Tue, 28 Jul 2009 18:18:44 +0000

ah cool. I never make use by one of them, didnt even know they got them, that’s why I use those to express what I mean ;)

funpacked: Yes, I understand the reason and it makes sense to me. But does it also make sense to triple our work?

By: eyelidlessness

eyelidlessness — Tue, 28 Jul 2009 18:11:49 +0000

gossi,

A correction: Opera’s prefix is -o- and Microsoft’s prefix is -ms-. FunPackedShow’s answer about prefixes is right, too.

By: otatop

otatop — Tue, 28 Jul 2009 17:47:46 +0000

I agree that IE sucks but ultimately it’s a reality that we’re all stuck with. Canvas widgets are cool but ultimately useless in the business world due to lack of browser support.

By: lunatic77

lunatic77 — Tue, 28 Jul 2009 16:45:37 +0000

Totally agree with gossi.

By: gossi

gossi — Tue, 28 Jul 2009 16:38:58 +0000

I’d like to have sth like (-moz-)gradient: … ; It’s kinda idiotic to place css statements like this:
-moz-border-radius: …;
-webkit-border-radius: …;
border-radius: …;

how this will end? -opera, -moz, -webkit, -ie ?

By: stoimen

stoimen — Tue, 28 Jul 2009 11:28:36 +0000

Indeed this is “Incredibly cool”, thanks for the article.