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

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



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

 

 


No comments:

Post a Comment