Могут ли стили -ms-фильтра быть темными в SharePoint?

Question

У нас есть следующие темы с темой для градиента фона веб-части:

.ms-wpContentDivSpace{
    /* For Non-CSS3 Browsers */
    background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent; 
    /* For Firefox 3.6+ */
    background: -moz-linear-gradient(top, 
        /* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        /* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-gradient(linear, left top, left bottom, 
        from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB), 
        to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
    /* For Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
    -ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=/*[ReplaceColor(themeColor:"Light2-Lightest")]*/ #FEFEFB, 
        endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9)'; 
}

Все работает нормально, кроме стиля -ms-filter для IE8.Я пробовал каждую комбинацию экранирования кавычек, слэша и одиночных и двойных кавычек, но единственный способ заставить его работать - удалить инструкции ReplaceColor:

.ms-wpContentDivSpace{
    /* For Non-CSS3 Browsers */
    background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent; 
    /* For Firefox 3.6+ */
    background: -moz-linear-gradient(top, 
        /* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        /* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-gradient(linear, left top, left bottom, 
        from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB), 
        to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
    /* For Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        endColorstr=/*[ReplaceColor(themeColor:"Light2-Lighter")]*/ #E9E9E9);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=#FEFEFB, 
        endColorstr=#E9E9E9)"; 
}

Возможно ли получить -ms-фильтр поддерживает темы оформления?

ОБНОВЛЕНИЕ:

Это на самом деле работает, как ожидается, когда тема применяется.Проблема в том, что когда тема не выбрана, градиент будет синим сверху и темно-синим снизу.Таким образом, кажется, что он работает до первого слэша комментариев, потому что результат визуализации такой же, как если бы стиль не определял цвета:

-ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0)';

Answer 1

Вот как мы это исправили. У нас есть две таблицы стилей, которые были идентичны, но размещены в разных каталогах:

• 14 \ ШАБЛОН \ LAYOUTS \ 1033 \ Styles \ MyProject \ MyStyles.css
• 14 \ ШАБЛОН \ LAYOUTS \ 1033 \ Styles \ Themable \ MyProject \ MyStyles.css

Наша пользовательская главная страница указывает на первую таблицу стилей. Это таблица стилей, которая используется, когда тема Default (no theme). Но когда SharePoint отправляется для компиляции выбранной темы, он использует таблицу стилей во втором каталоге.

Мы оставили вторую таблицу стилей в одиночку, потому что она работала, когда она компилировалась в тему. Затем мы удалили комментарии директивы темы из стилей фильтра в первой таблице стилей:

.ms-wpContentDivSpace{
    /* For Non-CSS3 Browsers */
    background: /* [ReplaceColor(themeColor:"Light2-Lightest")] */ transparent; 
    /* For Firefox 3.6+ */
    background: -moz-linear-gradient(top, 
        /* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB, 
        /* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9);
    /* For WebKit (Safari, Chrome, etc.) */
    background: -webkit-gradient(linear, left top, left bottom, 
        from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB), 
        to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));
    /* For Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=#FEFEFB, 
        endColorstr=#E9E9E9);
    -ms-filter:'progid:DXImageTransform.Microsoft.gradient(GradientType=0, 
        startColorstr=#FEFEFB, 
        endColorstr=#E9E9E9)'; 
}

Мы протестировали его, и теперь работает градиент, с темой или без нее, в IE7 и 8, FF и Chrome.

Answer 2

Рассматривали ли вы использование CSS3Pie ?

Это хак для IE, который позволяет ему распознавать определенные свойства CSS3 с использованием стандартного синтаксиса.Он включает в себя градиентные фоны.

Использование CSS3Pie означает, что вы можете забыть о том, что вам когда-либо придется использовать эти ужасные свойства filer и -ms-filter, по крайней мере для градиентов.1011 *, что, вероятно, является самой популярной функцией.

Надеюсь, это поможет.

Answer 3

Вы можете заставить свою тему обрабатывать изображения для вас - и таким образом вам не понадобится CSS для 3 разных браузеров. Темы 2010 года могут перекрашивать изображения (или области на изображениях)

, например

/* [RecolorImage(themeColor:"Dark2-Lighter",method:"Filling",includeRectangle:{x:0,y:467,width:1,height:11})] */ background:url("/_layouts/images/bgximg.png") repeat-x -0px -467px;

Что довольно аккуратно. Когда вы примените свою тему, изображение (bgximg.png) будет обработано, цвета заменены и т. Д.

Если вы посмотрите через CoreV4.css, есть примеры. Или это нормально описание. Возможно, Тонировка будет адекватной?

Если это не удастся, я попытаюсь поместить свои директивы Theme перед тем, где я использую свои цвета, а не в:

/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.8")] */ background-color:#21374c;