Могут ли стили -ms-filter быть тематическими в SharePoint?

Question

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

.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-фильтра для 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- поддержка фильтров тематических стилей?

UPDATE:

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

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

Answer 1

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

• 14 \ TEMPLATE \ Layouts \ 1033 \ МОД \ 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

Вы можете получить тему для обработки изображений для вас - и таким образом вам не понадобится CSS для трех разных браузеров. Темы в 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, есть примеры. Или this is an okay описание. Возможно, оттенок был бы адекватным?

В противном случае, я бы попытаться положить мои директивы темы перед которой я использую мои цвета, а не в:

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

Answer 3

Считаете ли вы использование CSS3Pie?

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

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

Он также отлично подходит для поддержки border-radius, что, вероятно, является его самой популярной функцией.

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