Как использовать комментарии Paul Irish Conditional на главной странице SharePoint 2010

Я хочу использовать комментарии Paul Irish Conditional из шаблона 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 в том, как предлагает Paul Irish. Есть ли способ сделать это или я могу просто вставить код из Biolerplate в главную страницу Sharepoint?

Ответы

Ответ 1

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

То, что я делал, заключалось в том, что вы принимали условные утверждения Paul с тегом 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]-->

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

Ответ 2

Я предполагаю, что основные страницы 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" />

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

Update:

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

<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 в файлах конкретных файлов стилей.

Ответ 3

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

Я использовал это (из нижней части Поля, датированное 2012/1/17), и он отлично работал на главной странице 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, чтобы упростить ваше решение.

Ответ 4

Я использовал строковые строки 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;

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

Ответ 5

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

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