Visual Studio（2012及更低版本）删除CSS属性

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 debugging.

Example of the code I add to my stylesheet:

.button
{
    /* Firefox */
    background-image: -moz-linear-gradient(top, #fff, #efefef);
    /* Chrome, Safari */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #efefef));
    /* Modern Browsers*/
    background-image: linear-gradient(top, #fff, #efefef);
    /* IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#efefef'); 
}

Sometimes when I start debug, Visual Studio edits the CSS:

.button
{
    /* Firefox */
    background-image: linear-gradient(top, #fff, #efefef);
    /* Chrome, Safari */
    /* Modern Browsers*/
    }

So Visual Studio seems to delete some attributes it doesn't know. That's really annoying. Any idea how I could stop that?

It's not a problem of CSS comments. It also happen without the comments.

Update

It seems that it happens by saving of files that included the css file. When I edit my Master Layout and save it, Visual Studio is gonna delete this properties I mentioned above in the linked css file.

And its NOT a CSS3 problem because it doesn't touch my border-radius classes and ids. So maybe it's the filter property. However I want stop Visual Studio changing my things in the css file without permissions.

Update 27. June 2014

Problem solved in Visual Studio 2013 https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css

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

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 3

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

Answer 4

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 5

I do not have Visual Studio to test this, but reading the information from other comments and answers, it seems like you might try separating the filter out completely into a repeated selector definition . Like so:

.someClass {
  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);  
}

.someClass { /* repeated to isolate filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#DAD6E7', gradientType='1'); /* IE6 - IE9 */
}

That is a real pain, but if it solves your problem until MS gets the bug worked out...

Answer 6

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 7

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.