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

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

5 голосов
/ 12 июля 2011

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

Ответы [ 5 ]

4 голосов
/ 31 июля 2011

Я предполагаю, что мастер-страницы 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 в элементе управления 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 голосов
/ 09 ноября 2012

Я очень новичок в брендинге 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]-->

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

2 голосов
/ 19 июля 2012

Публикация снова, так как мой первый ответ был удален.Это было отредактировано, чтобы лучше соответствовать правилам публикации 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, чтобы упростить ваше решение.

1 голос
/ 09 июня 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;

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

0 голосов
/ 26 сентября 2013

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