Visual Studio (2012 и ниже) удаляет свойства CSS

Question

У меня действительно странная проблема с Visual Studio 2010. Когда я добавляю свойства CSS для градиента в мою таблицу стилей, Visual Studio собирается удалить его после нескольких отладок.

Пример кода, который я добавляю в мою таблицу стилей:

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

Иногда, когда я запускаю отладку, Visual Studio редактирует CSS:

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

Таким образом, Visual Studio, похоже, удаляет некоторые атрибуты, которых она не знает. Это действительно раздражает. Есть идеи, как мне это остановить?

Это не проблема комментариев CSS. Так же бывает и без комментариев.

Обновление

Похоже, что это происходит при сохранении файлов, включающих файл css. Когда я редактирую свой мастер-макет и сохраняю его, Visual Studio удаляет эти свойства, которые я упоминал выше, в связанном css-файле.

И это НЕ проблема CSS3, потому что она не касается моих классов и идентификаторов границ. Так что, возможно, это свойство фильтра. Однако я хочу остановить Visual Studio, изменяя мои вещи в css-файле без разрешений.

Обновление 27. Июнь 2014

Проблема решена в Visual Studio 2013 https://connect.microsoft.com/VisualStudio/feedback/details/782677/visual-studio-is-deleting-css

Answer 1

Хорошо, я нашел временное решение для этого:

Существование стиля "filter:" - это то, что заставляет исчезать все стили "background-image:", кроме последнего из перечисленных. Дело не в том, что он удаляет то, чего не знает, а в том, что он удаляет все, кроме последнего стиля "background-image" в списке.Должно быть, Microsoft (предполагаемый) способ создания фильтра и особого стиля фонового изображения для MS хорошо сочетается, однако они не очень хорошо его кодировали.Определенно дефект MS VS.Чтобы воспроизвести, просто щелкните правой кнопкой мыши в классе CSS с кодом, подобным следующему:

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 */

, а затем выберите «Стиль сборки ...».Затем нажмите «ОК», ничего не меняя, и просмотрите его, удалив все, кроме последнего оставшегося фонового изображения.Попробуйте изменить порядок «стилей фонового изображения и оставьте webkit последним, а затем убедитесь сами.

Вы заметите, что если вы удалите стиль« filter: », проблема исчезнет, ​​однаконам нужно это (для этого примера), поэтому решение, кажется, перемещает стиль «фильтр:» над всеми строками «background-image:». Как только вы это сделаете, он оставляет их в покое, и проблема исчезает.

Изменение вышеуказанного CSS на это, кажется, облегчает проблему:

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

---

ОБНОВЛЕНИЕ: Обходное решение выше работает только длякогда VS применяет форматирование, когда вы используете диалоговое окно «Стиль сборки ...» -> «Изменить стиль», потому что я только что увидел его снова с исправлением, приведенным выше, поэтому оно должно быть из чего-то другого.

Answer 2

Градиенты - это свойства CSS3.

Visual Studio не поддерживает CSS3 и HTML5, и в этом может быть проблема.
Но есть поддержка HTML5 и CSS3 в Visual Studio 2010 SP1
Итак, почему бы вам не загрузить Visual Studio 2010 SP1 и попробовать?

Answer 3

Я сталкивался с такой же проблемой в VS2010 и могу подтвердить, что проблема не влияет на стили CSS3.Единственный обходной путь, который я могу предложить, - поместить в комментарии копию исчезающей строки над собой, чтобы, по крайней мере, ее было легко скопировать обратно.

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

Answer 4

В Visual Studio попробуйте: Инструменты> Параметры> Текстовый редактор> CSS> Разное отключить Обнаружение ошибок. Я сделал это и использовал файл с вашим примером выше, запустил решение, закрыл файл, закрыл решение, и мой код все еще там: -)

Answer 5

У меня нет Visual Studio для проверки этого, но, читая информацию из других комментариев и ответов, кажется, что вы можете попытаться полностью разделить filter на повторное определение селектора . Вот так:

.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 */
}

Это настоящая боль, но если это решит вашу проблему, пока MS не исправит ошибку ...

Answer 6

Я понимаю, что это более старая тема, но у меня все та же проблема

Я еще не нашел, как это предотвратить, но есть гораздо более простой способ исправить ошибку CSS:

Как только вы заметите, что VS2010 испортил код CSS, остановите отладку, перейдите на вкладку файла CSS и нажмите кнопку отмены. Ваш код Css вернулся до того, как VS2010 испортил его. Скомпилируйте и все работает.

Я скоро опробую VS2012, кто-нибудь знает, была ли она там решена?

Answer 7

У меня точно такая же проблема!

У меня были установлены инструменты DevX IDE, и удаление, которое, похоже, решило проблему для меня.Я сделал это несколько дней назад, и проблема не повторилась.