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.