Visual Studio (2012 and lower) deletes CSS properties

Question

I have a really strange problem with Visual Studio 2010. When I add CSS properties for a gradient to my stylesheet, Visual Studio is going to delete it after some times of d

Answer 1

Okay I found a temporary workaround for this:

The existence of the "filter:" style is what's causing all of the "background-image:" styles to disappear except the last one listed. It's not that it's removing what it doesn't know, it's just removing all but the last "background-image" style listed. Must be Microsoft (intended) way of making filter and an MS specific background-image style play nicely together, however they didn't code it up very well. Definitely a MS VS defect. To repro, just right click in the CSS class that has code similar to this:

background-color: #EBEBEB; /* Fallback background color for non supported browsers */  
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));  
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);  
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */

and then select "Build Style...". Then click "OK" without changing anything and watch it remove all but the last background-image left. Try changing the order of the "background-image styles and leave webkit last and then see for yourself.

You'll notice that if you remove the "filter:" style the problem goes away, however we need that (for this example) so the solution seems to be moving the "filter:" style above all the "background-image:" lines. Once you do that, it leaves them alone and the problem goes away.

Changing the above CSS to this seems to aleviate the problem:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
background-color: #EBEBEB; /* Fallback background color for non supported browsers */  
background-image: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(#DAD6E7));  
background-image: -webkit-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -moz-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -ms-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: -o-linear-gradient(left, #FFFFFF, #DAD6E7);  
background-image: linear-gradient(left, #FFFFFF, #DAD6E7);  

---

UPDATE: The workaround above only works for when VS applies formatting when you're using the "Build Style..." --> "Modify Style" dialog because I just saw it again with the fix above in place so it must be from somthing else.

Answer 2

I realize this is an older thread, but I still have the same problem

I haven't yet found how to prevent it, but there is a much easier way to correct the CSS mess-up:

As soon as you notice VS2010 has messed up the CSS code, stop the debug, go to the CSS file tab and press the undo button. Your Css code is back to before VS2010 messed it up. Compile and it works.

I'm going to try out VS2012 soon, anyone know if it has been solved there?

Answer 3

Gradients are CSS3 Properties.

Visual Studio do not support CSS3 and HTML5 and that might be the problem here.
But there is support for HTML5 & CSS3 in Visual Studio 2010 SP1
So, why don't you download Visual Studio 2010 SP1 and try?

Answer 4

I've just had the exact same issue!

I had the DevX IDE tools installed, and uninstalling that seems to have resolved the issue for me. I did that a few days ago, and the issue hasn't recurred.

Answer 5

In Visual Studio try: Tools > Options > Text Editor > CSS > Miscellaneous switch off Detect Errors. I did this and using a file with your sample above, ran the solution, closed the file, closed the solution and my code is still there :-)

Answer 6

I have experienced this same issue as well in VS2010, and can confirm that the problem does not affect CSS3 styles. The only work around I can suggest is to place a copy of the disappearing line above itself in a comment so at least it is easy to copy back again.

/* filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef');