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):

Example: 
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
See: http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx


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

See: http://msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx

Solution:

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);