December 7, 2014

DXImageTransform Fail With a Warning Unexpected Character Sequence In Property Value

When you have a CSS filter in your project in Visual Studio 2013, you will get a validation warning for ‘:’ and ‘,’ characters (I highlighted in yellow):

filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#fdfdfe',EndColorStr='#f5f2ec');

Warning: “Unexpected character sequence in property value.

Outcome: The effect will NOT work in the page, and IE will show an invalid style:

Let me guess..its obsolete stuff, right? Answer is yes.
DirectX based (DX) filters including “DXImageTransform” are obsolete

Also, Microsoft “-ms-filter”: Microsoft proprietary filter is obsolete since IE10


Use new filter standards that match your browser from table below. For a complete List of filters and new standards here.

IE Browser 
Supported Gradient Filters
IE 6
IE 7
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0');

IE 8
IE 9
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0')";

IE 10
background: -ms-linear-gradient(top, #2F2727, #1a82f7);

background: linear-gradient(to top, red, blue); /* Standard syntax (must be uses as last style) */

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);

background: radial-gradient(red, green, blue); /* Standard syntax */

background: repeating-radial-gradient(red, yellow 10%, green 15%);

IE 11
(based on CSS3)
background: -ms-linear-gradient(#2F2727, #1a82f7);

background-image: -ms-linear-gradient(#FF0000 0%, #CCCCCC 100%);

background: linear-gradient(to top, red, blue);



No comments:

Post a Comment