如何在SharePoint 2010母版页中使用Paul Irish的条件注释

时间:2011-07-11 23:59:56

标签: sharepoint html5 master-pages boilerplate

我想在Boilerplate HTML模板中使用Paul Irish的条件评论:

<!--[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" />

这允许我使用条件来加载特定的样式表,但不能像Paul Irish建议的那样使用条件html标记。有没有办法做到这一点,或者我只是简单地将Biolerplate中的代码粘贴到Sharepoint主页中?

5 个答案:

答案 0 :(得分:4)

我认为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标记上设置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注册中设置ConditionalExpression,因为您已经通过在HTML元素上设置特定类来切换使用的样式表。

<强>更新

另一种可能性是使用SharePoint aspx控件上的ConditionalExpression属性,根据浏览器版本包含另一个样式表文件。

<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优先级问题,因为html元素上缺少.ie*类,因此不会否决.class-to-override-if-specific-ie-version。您可以使用ie特定样式表文件中的!important规则来解决此问题。

答案 1 :(得分:3)

我是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 :(得分:2)

在我的第一个回复被删除后再次发帖。这已经过编辑,以更好地满足StackOverflow的发布指南。

我使用过这个(来自Paul的帖子底部,日期为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页面可能需要删除的其他内容。以下是原始的SharePoint HTML标记:

<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以帮助简化您的解决方案。

答案 3 :(得分:1)

我使用ASP文字字符串在我的SP2010主页中传递条件IE注释。

这样,我仍然可以传入原始<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;

但如果有人可以进一步改进这种方法,我们将不胜感激!

答案 4 :(得分:0)

使用Sharepoint 2010时,最好避免在<html>标记周围放置条件。话虽这么说,您可以在<head>标记内添加条件,并使用Javascript将类添加到html标记中。这对于常规网站来说并不理想,但对于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]-->  
        ...