-ms-filter property
[This documentation is preliminary and is subject to change.]
Sets or retrieves the filter or collection of filters that are applied to the object.
Syntax
-ms-filter: filtertype1 (parameter1, parameter2,...) | filtertype2 (parameter1, parameter2,...)
Property values
filtertype1 (parameter1, parameter2,...)-
Any filter listed in the Visual Filters and Transitions Reference.
filtertype2 (parameter1, parameter2,...)-
Any filter listed in the Visual Filters and Transitions Reference.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Remarks
Windows Internet Explorer 8. The -ms-filter attribute is an extension to CSS, and can be used as a synonym for filter in IE8 Standards mode. When you use -ms-filter, enclose the progid in single quotes (') or double quotes ("). Use commas (,) to separate multiple values, as shown in the Examples section.
An object must have layout for the filter to render. A simple way to accomplish this is to give the element a specified height and width, or both. However, there are several other properties that can give an element layout. For more information about these other properties, see the hasLayout property.
The shadow filter can be applied to the img object by setting the filter on the image's parent container.
The filter mechanism is extensible and enables you to develop and add filters later. For more information about filters, see Introduction to Filters and Transitions.
Not available on the Macintosh platform.
Examples
The following example shows how to use the -ms-filter attribute in Internet Explorer 8.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm
-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
The following example shows how to use an inline style sheet to set the filter on an image.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm
<img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
src="/workshop/samples/author/dhtml/graphics/cone.jpg"
height="80px" width="80px" alt="cone">
The following example shows how to use inline scripting to set the filter on an image.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm
<script type="text/javascript">
function doFilter ()
{
filterFrom.filters.item(0).Apply();
// 12 is the dissolve filter.
filterFrom.filters.item(0).Transition=12;
imageFrom.style.visibility = "hidden";
filterTo.style.visibility = "";
filterFrom.filters.item(0).play(14);
}
</script>
</head>
<body>
<p>Click the image to start the filter.</p>
// Call the function.
<div id="filterFrom" onclick="doFilter()"
style="position: absolute;
width: 200px;
height: 250px;
background-color: white;
filter: revealTrans()">
<img id="imageFrom"
style="position: absolute;
top: 20px;
left: 20px;"
src="sphere.jpg"
alt="sphere">
<div id="filterTo"
style="position: absolute;
width: 200px;
height: 250px;
top: 20px;
left: 20px;
background: white;
visibility: hidden;">
</div>
</div>
</body>
Build date: 3/14/2012
I have made a web page which consists of two overlapping images. I have applied an filter opacity to the above image so that both images are readable. This work fine on most browsers including IE, Firefox. However, when I try to print the page to a real printer or to a PDF printer, it fails on IE version 7 and 8 (only the above image is printed) while working fine on IE 9 and Firefox. Note that print preview feature still looks correct with both images seeable
Below are codes of my web page.
<html>
<body>
<DIV style="POSITION: absolute; WIDTH: 366px; HEIGHT: 439px; TOP: 100px; LEFT: 100px; Z-INDEX: 1;">
<IMG style="POSITION: relative; WIDTH: 366px; HEIGHT: 439px;" src="below_picture.png">
</DIV>
<DIV style="POSITION: absolute; WIDTH: 366px; HEIGHT: 439px; TOP: 100px; LEFT: 100px; Z-INDEX: 390;">
<IMG style="POSITION: relative; WIDTH: 366px; HEIGHT: 439px; FILTER: alpha(opacity=75);" src="above_picture.png">
</DIV>
</body>
</html>
Please help me to solve this problem in IE8 while printing.
Regards,
Quan
- 12/21/2011
- Quan Tran Minh
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?
