Looks like this new declaration for MS filters conflicts with declaration of any DOCTYPE in Internet Explorer 8.
Let's examine it using
gradient filter type for example running on
IE 8.0.6001.18702 (Windows XP SP3).
Following code works fine:
<html>
<head>
<title>It works</title>
<style type="text/css">
.gradient {
zoom: 1; /* turns hasLayout on */
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr='#81a8cb',
endColorstr='#4477a1'
)";
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr='#81a8cb',
endColorstr='#4477a1'
);
}
</style>
</head>
<body>
<div class="gradient">Gradient</div>
</body>
</html>
Code works, unless we add any declaration of the doctype (doesn't matter which one particularly - anyone of them):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>It doesn't work</title>
<style type="text/css">
.gradient {
zoom:1; /* turns hasLayout on */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr='#81a8cb',
endColorstr='#4477a1'
)";
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr='#81a8cb',
endColorstr='#4477a1'
);
}
</style>
</head>
<body>
<div class="gradient">Gradient</div>
</body>
</html>
Spending some time trying to make code work leads us to discovery that switching
filter and
-ms-filter declarations solves the problem!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>It works!</title>
<style type="text/css">
.gradient {
zoom:1; /* turns hasLayout i */
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr='#81a8cb',
endColorstr='#4477a1'
); /* IE6 и IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr='#81a8cb',
endColorstr='#4477a1'
)"; /* IE8 */
}
</style>
</head>
<body>
<div class="gradient">Gradient</div>
</body>
</html>
In other words,
-ms-filter declaration bothers CSS parsing of subsequent rules and, from other hand, is useless even in IE8 (because leaving it alone doesn't make gradient to appear).
But wait a minute. There is an instruction from MSDN blog
http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx
where we're encouraged to include new syntax in our documents to "in order for your page to be written in as compliant a manner as possible." (because once new version of browser will ship that will not support deprecated syntax anymore).
And it is also stated that
[quote]
In order to guarantee that users of both Internet Explorer 7 and 8 experience the filter, you can include both syntaxes listed above. Due to a peculiarity in our parser, you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View (This is a known bug and will be fixed upon final release of IE8). Here is a CSS stylesheet example:
#transparentDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}
[end of quote]
So I have the following options:
- I beleive the MSDN guide and put
-ms-filter before
filter but I live without DOCTYPE or nothing workds
- I put
-ms-filter after filter and everything is fine unless Internet Explorer 9 (10, 11, ...) ships which sees
filter (unknown for it) and stops working.
So what should a one do in this situation?