Как использовать условные комментарии Пола Айриша на главной странице SharePoint 2010

Я хочу использовать условные комментарии Пола Айриша из HTML-шаблона Boilerplate:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

на главной странице SharePoint 2010. Я читал, что «условные комментарии не всегда так хорошо работают в SP2010». (не уверен, что это значит!) Совет заключается в использовании:

<SharePoint:CSSRegistration Name="foo.css" ConditionalExpression="gte IE 7" runat="server" />

Это позволяет мне использовать условие для загрузки определенной таблицы стилей, но не использовать html-тег Conditional, как предлагает Пол Айриш. Есть ли способ сделать это или я могу просто вставить код из Biolerplate на главную страницу Sharepoint?


person Jaz    schedule 11.07.2011    source источник


Ответы (5)


Я новичок в брендинге SharePoint и столкнулся с той же проблемой. Я не разработчик ASP, поэтому понимание некоторых решений было немного сложным.

Что я сделал, так это взял условные операторы Пола с тегом HTML и переместил их в тег BODY, и это, казалось, работало просто идеально, без необходимости возиться с кодом SP.

<!--[if lt IE 7]> <body class="no-js lt-ie9 lt-ie8 lt-ie7" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 7]> <body class="no-js lt-ie9 lt-ie8" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if IE 8]> <body class="no-js lt-ie9" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <![endif]-->
<!--[if gt IE 8]><!--> <body class="no-js" scroll="no" onload="javascript:_spBodyOnLoadWrapper();"> <!--<![endif]-->

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

person Mike Dumka    schedule 09.11.2012

Я предполагаю, что главные страницы SharePoint аналогичны страницам в ASP.NET (MVC). Поэтому это вообще не должно быть проблемой.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

Все, что делает предыдущий код, — это установка тега HTML с другим классом CSS в теге HTML в зависимости от того, какой браузер обращается к сайту. Так что вы можете переопределить некоторые таблицы стилей для любого браузера (IE).

site.css

.coloredBackground
{
    background-color: #FF0000; //red
}
.ie6 .coloredBackground
{
    background-color: #00FF00; //green
}
.ie8 .coloredBackground
{
    background-color: #0000FF; //blue
}

В этом примере пользователи, использующие Firefox, Opera, Safari, IE7,9,10, увидят красный фон. В IE6 цвет фона заменяется зеленым, а в IE8 — синим.

Ваша регистрация CSS будет выглядеть следующим образом:

<SharePoint:CSSRegistration Name="site.css" runat="server" />

Как видите, больше нет необходимости задавать ConditionalExpression при регистрации CSS, потому что вы уже переключаете используемую таблицу стилей, устанавливая определенный класс для элемента HTML.

Обновление:

Другой возможностью может быть включение другого файла таблицы стилей в зависимости от версии браузера с помощью свойства ConditionalExpression в элементе управления SharePoint aspx.

<SharePoint:CSSRegistration Name="ie6.css" ConditionalExpression="lt IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie7.css" ConditionalExpression="IE 7" runat="server" />
<SharePoint:CSSRegistration Name="ie8.css" ConditionalExpression="IE 8" runat="server" />
<SharePoint:CSSRegistration Name="ie9.css" ConditionalExpression="IE 9" runat="server" />

Недостатком является то, что вы можете получить проблемы с приоритетом CSS, потому что класс .ie* отсутствует в элементе html и, следовательно, не отменяет класс .class-to-override-if-specific-ie-version. Вы можете решить эту проблему, используя правило !important в т.е. конкретных файлах таблиц стилей.

person Diemo    schedule 31.07.2011
comment
Да, я знаю, как это работает, однако Sharepoint 2010 удаляет условный комментарий вокруг тега html, поэтому у css нет класса, к которому можно подключиться. - person Jaz; 22.08.2011
comment
Обновил ответ с другой возможностью. Возможно, это не лучшее решение, но оно должно сработать... - person Diemo; 25.08.2011
comment
Привет, Диермо, спасибо, что приложил много усилий к своим ответам. Ваш код обновления будет работать, но требует, чтобы я запускал отдельные файлы css для каждой версии IE. Проблема в том, что SharePoint удаляет условные комментарии, если только они не соответствуют формату, используемому в вашем обновлении. Я хочу знать, могу ли я использовать условные комментарии в стиле Пола Айриша в SharePoint? Я знаю, что могу использовать условные выражения SharePoint:CSSRegistration, но это не то, что мне нужно. У меня вопрос: как использовать условные комментарии Пола Айриша на главной странице SharePoint 2010? - person Jaz; 07.09.2011

Повторное сообщение, так как мой первый ответ был удален. Это было отредактировано, чтобы лучше соответствовать правилам размещения сообщений StackOverflow.

Я использовал это (из нижней части сообщения Пола от 17 января 2012 г.), и оно отлично работало на главной странице SharePoint. Обратите внимание, что это отличается от того, что вы опубликовали, что было более ранней версией кода.

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

Я беспокоюсь о других вещах, которые должны были быть удалены и которые могут понадобиться страницам SharePoint. Вот исходный HTML-тег SharePoint:

<html lang="<%$Resources:wss,language_value%>" dir="<%$Resources:wss,multipages_direction_dir_value%>" runat="server" xmlns:o="urn:schemas-microsoft-com:office:office" __expr-val-dir="ltr">

Как только вы начнете добавлять этот материал в теги HTML с условными комментариями, страница разорвется.

Я призываю вас также просмотреть свой HTML/CSS, чтобы увидеть, можно ли удалить часть условного CSS, чтобы оптимизировать ваше решение.

person Heather Solomon    schedule 19.07.2012

Я использовал литеральные строки ASP для передачи условных комментариев IE на главной странице SP2010.

Таким образом, я все еще мог передать значение языка, используемое в исходном теге <html>, <%$Resources:wss,language_value%>.

&lt;asp:literal ID=&quot;html1a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if lt IE 7]&amp;gt; &amp;lt;html class=&amp;quot;no-js lt-ie9 lt-ie8 lt-ie7&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html1b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html1c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br />
&lt;asp:literal ID=&quot;html2a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if IE 7]&amp;gt;&amp;lt;html class=&amp;quot;no-js lt-ie9 lt-ie8&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html2b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html2c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br />
&lt;asp:literal ID=&quot;html3a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if IE 8]&amp;gt;&amp;lt;html class=&amp;quot;no-js lt-ie9&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html3b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html3c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;![endif]--&amp;gt;&quot;/&gt;<br />
&lt;asp:literal ID=&quot;html4a&quot; runat=&quot;server&quot; Text=&quot;&amp;lt;!--[if gt IE 8]&amp;gt;&amp;lt;!--&amp;gt; &amp;lt;html class=&amp;quot;no-js&amp;quot; lang=&amp;quot;&quot;/&gt;&lt;asp:Literal ID=&quot;html4b&quot; runat=&quot;server&quot; Text=&quot;&lt;%$Resources:wss,language_value%&gt;&quot; /&gt;&lt;asp:literal ID=&quot;html4c&quot; runat=&quot;server&quot; Text=&quot;&amp;quot;&amp;gt;&amp;lt;!--&amp;lt;![endif]--&amp;gt;&quot;/&gt;

Но если кто-то может улучшить этот метод, это будет оценено!

person Mari    schedule 08.06.2012

В Sharepoint 2010 лучше избегать размещения условных выражений вокруг тега <html>. При этом вы можете добавлять свои условные выражения в тег <head> и добавлять классы в свой тег html с помощью Javascript. Это не идеально для обычного веб-сайта, но для Sharepoint это ненавязчивый метод, который работает на крупном корпоративном сайте Sharepoint 2010, который я помогаю поддерживать:

...
<html id="Html1" class="no-js" lang="<%$Resources:wss,language_value %>" dir="<%$Resources:wss,multipages_direction_dir_value %>" runat="server" __expr-val-dir="ltr">
    <head id="Head1" runat="server">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=8" />
        <meta http-equiv="Expires" content="0"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- IE version conditionals will apply classes to html element if old IE -->
        <!--[if lt IE 7 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie7";</script><![endif]-->
        <!--[if lt IE 8 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie8";</script><![endif]-->
        <!--[if lt IE 9 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie9";</script><![endif]-->
        <!--[if lt IE 10 ]><script type="text/javascript">var element = document.getElementById("ctl00_Html1"); element.className += " " + "lt-ie10";</script><![endif]-->  
        ...
person BumbleB2na    schedule 26.09.2013