当前位置： 文江博客话题详情

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

发布于 2024-11-19 16:35:03 字数 846 浏览 5 评论 0原文

我想

<!--[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 母版页中使用 Boilerplate HTML 模板中的 Paul Irish 的条件注释。我读过“条件注释在 SP2010 中并不总是那么有效”。 （不确定这意味着什么！）建议是使用：

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

这允许我使用条件来加载特定的样式表，但不能按照 Paul Irish 建议的方式使用条件 html 标签。有没有办法做到这一点，或者我可以直接将 Biolerplate 中的代码粘贴到 Sharepoint 母版页中吗？

原文

I want to use Paul Irish's Conditional comments from the Boilerplate HTML template:

<!--[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]-->

in a SharePoint 2010 masterpage. I have read 'conditional comments don’t always work so well in SP2010'. (not sure what that means!) The advice is to use:

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

This allows me to use a conditional to load a specific stylesheet but not to use the Conditional html tag in the way Paul Irish suggests. Is there a way to do this or can I just simply paste the code from Biolerplate into the Sharepoint masterpage?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

岛徒 2024-11-26 16:35:03

我假设 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 类，具体取决于访问该站点的浏览器。这样您就可以覆盖任何给定浏览器 (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-版本。您可以通过在 ie 特定样式表文件中使用 !important 规则来解决此问题。

I assume that the SharePoint masterpages equal the ones in ASP.NET (MVC). Therefore this shouln't be a problem at all.

<!--[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]-->

All the preceding code does is setting the HTML tag with a different CSS class on the HTML tag depending which browser is accessing the site. So that you are able to override some style sheets for any given browser (IE).

site.css

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

In this example users browsing with Firefox, Opera, Safari, IE7,9,10 will see a red background. For IE6 the background color gets overridden with green and in IE8 with blue.

Your CSS registration would look like the following:

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

As you can see there is no need to set the ConditionalExpression anymore in the CSS registration, because you are already switching the used style sheet by setting a specific class on the HTML element.

Update:

Another possibility would be to include another style sheet file depending on the browser version using the ConditionalExpression property on the SharePoint aspx control.

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

The downside is that you may get css priority issues because the .ie* class is missing on the html element and therefore doesn't overrule the .class-to-override-if-specific-ie-version. You could solve this by using the !important rule in the ie specific style sheet files.

回复 原文
满天都是小星星 2024-11-26 16:35:03

我对 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]-->

希望有帮助。

I am very new to SharePoint branding and was coming across the same problem. I am not a ASP developer so understanding some of the solutions were a little tough.

What I did was take Paul's conditional statements with the HTML tag and moved them to the BODY tag and it seemed to work just perfect with out having to mess with and SP code.

<!--[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]-->

Hope that helps.

回复 原文
那一片橙海， 2024-11-26 16:35:03

由于我的第一个回复被删除，再次发帖。为了更好地满足 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 以帮助简化您的解决方案。

Posting again as my first reply was deleted. This has been edited to better meet StackOverflow's posting guidelines.

I used this (from the bottom of Paul's post, dated 2012/1/17) and it worked fine in a SharePoint master page. Please note this is different than what you posted, which was an earlier version of the code.

<!--[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]-->

My concern is the other things that had to get stripped out that may be needed by SharePoint pages. Here is the original SharePoint HTML tag:

<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">

Once you start adding that stuff in the HTML tags with the conditional comments the page breaks.

I urge you to also review your HTML/CSS to see if some of the conditional CSS can be removed to help streamline your solution.

回复 原文
夜血缘 2024-11-26 16:35:03

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

这样，我仍然可以传入原始 标记 <%$Resources:wss,language_value%> 中使用的语言值。

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

但如果有人能进一步改进这个方法，我们将不胜感激！

I used ASP literal strings to pass the conditional IE comments in my SP2010 masterpage.

That way, I could still pass in the language value used in the original <html> tag, <%$Resources:wss,language_value%>.

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

But if someone could further improve this method, it would be appreciated!

回复 原文
无法言说的痛 2024-11-26 16:35:03

对于 Sharepoint 2010，最好避免在 标记周围放置条件。话虽这么说，您可以在 标记中添加条件，并使用 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]-->  
        ...

With Sharepoint 2010 it is best to avoid putting conditionals around the <html> tag. That being said, you can add in your conditionals within the <head> tag and add classes to your html tag using Javascript. This is not ideal for a regular website but for Sharepoint, this is an unubtrusive method that works in a large enterprise Sharepoint 2010 site that I help maintain:

...
<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]-->  
        ...
回复 原文
~没有更多了~

关于作者

蓝梦月影

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

羁客

文章 0 评论 0

天天爱笑的徐老师

文章 0 评论 0

星

文章 0 评论 0

夏日落

文章 0 评论 0

隐诗

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文