If IE8 only, why not using -ms-filter than?

[Volker-E]

Would help validation of the output stylesheet! See for example: http://css-tricks.com/css-transparency-settings-for-all-broswers/

[iamvdo]

Not IE8 only, but IE8- (even if IE9 will also understand it).
The recommended syntax is not using the -ms-filter: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Different_opacity_with_.3Ahover

Maybe we should add an option for IE7 to get zoom: 1 ?

Would help validation of the output stylesheet

What do you mean ?

[Volker-E]

@iamvdo Actually, just because it's in MDN, it doesn't mean, it's solid gold ;)
I thought about correcting the article after coming across the non-optimal syntax.

The sense in using the -ms-filter syntax (and also reason for Microsoft in their approach towards better standards-support of IE 8) is to have a valid stylesheet in the end.

So if you're going for an option, an option for IE8 only usage or IE8/IE7 mixed usage or IE8 and all lower would be the right approach IMHO.
As many devs start with HTML5BoilerPlate as their foundation, they also come across root classes for IE, like .ie8, .ie7 and so on. So they won't even wanna use this package, as they prefer to use f.e. Sass mixins or extends to include special classes for IE.

I see the real sense here in flexibility in output and mostly for devs, who still wanna support IE8.

[iamvdo]

just because it's in MDN, it doesn't mean, it's solid gold ;)

Same goes for CSS Tricks. ;)

The sense in using the -ms-filter syntax is to have a valid stylesheet in the end.

It's the opposite, right ? Using prefixes make stylesheets invalid.

BTW, I've to admit I don't know what to do: filter works IE8- and -ms-filter works only IE8. If you target IE8, this works in all cases, and you don't care if it applies to older browsers, so what's the point ?

The simplest thing is maybe to use -ms-filter by default (IE8), and add an option to support older browsers which will also add filter and zoom. What do you think about that ?

/cc @7studio (Ref: iamvdo/pleeease#16)

[Volker-E]

No, vendor-prefixed properties are specified in CSS 2.1.
See this for further clarification: https://stackoverflow.com/questions/6900647/ms-filter-vs-filter-whats-the-difference

And yes, your suggestion would be a great default output. :)

[7studio]

Hi,
I find this issue really interesting even if it seems to be a detail at first :-)
Up to now, I didn't care about this particular point (it's still the case) but the @Volker-E issue seems legitimate.
IMHO, it is more than a validation or a IE version case.

Take the example below:

/* in.css */
img {
    filter: invert(100%);
    opacity: .5;
}

/* out.css (with postcss-opacity) */
img {
    filter: invert(100%);
    opacity: .5;
    filter: alpha(opacity=50);
}

While someone identifies the second filter property like a hack for old IE (as it is), someone else could think that it's an override of the first one for a test, a wrong declaration or anything else.
Even if we should not read the output (especially when you are using a processor or a formatter), you are able to see these declarations in some dev tools (e.g.: Chrome and IE).
And without any comment or a ref to the source file, it could be disturbing.

In fact, the syntax filter: alpha(opacity=xx) is maybe a bad way with recent browsers and CSS3 too. The value alpha(opacity=50) is now parsed as an illegal value for the CSS3 filter property
whereas -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" is just ignored.

IMHO, we should use -ms-filter instead of filter for two reasons:

1. The property name is clearer in all the situations (output, dev tools) and won't interact with the CSS3 spec.
2. The plugin description is "PostCSS plugin to add opacity filter for IE8.", so targeting only IE8 is more correct.
3. CSSLint (and other linters) will stop to warn the message "duplicate property …"

BTW, the plugin should not care about IE versions lower than 8 ^^