JSF 2如何根据浏览器版本设置html样式答案

【问题标题】：JSF 2 how to set html style depending on browser versionJSF 2如何根据浏览器版本设置html样式
【发布时间】：2012-07-28 02:59:24
【问题描述】：

我想要在我的 JSF 2 应用程序中做的是根据浏览器版本设置正确的 html 样式，这里是示例代码：

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

如何在 JSF 2 中做到这一点？最好/最简单的方法是什么？

我在 Omnifaces (o:conditionalComment) 中发现了一些有趣的东西，但它只允许有条件地加载整个 css，这对我来说没用...

【问题讨论】：

标签： html jsf jsf-2 conditional-comments omnifaces

【解决方案1】：

<o:conditionalComment> 并不适用于 CSS 文件仅。这是一种误解。从技术上讲，使用纯 Facelets 标记/组件根本无法满足您的要求，因为这会导致 XML 语法格式错误，从而导致 Facelets 编译错误。

<o:conditionalComment if="lt IE 7">
    <html lang="en" class="lt-ie9 lt-ie8 lt-ie7">
</o:conditionalComment>
<o:conditionalComment if="IE 7">
    <html lang="en" class="lt-ie9 lt-ie8">
</o:conditionalComment>
<o:conditionalComment if="IE 8">
    <html lang="en" class="lt-ie9">
</o:conditionalComment>
<o:conditionalComment if="gt IE 8">
    <h:outputText value="&lt;!--&gt;" escape="false" />
    <html lang="en" class="no-js">
    <h:outputText value="&lt;!--" escape="false" />
</o:conditionalComment>
...
</html>

这不是well formed XML。您知道，XML 结束元素应该与 XML 开始元素在同一范围内。如果每个<html> 在同一个父 XML 元素中都有自己的</html>，那么它就是有效的 XML。但这又不是有效的 HTML。

只需在所有<html> 标签上使用<h:outputText escape="false">。不要忘记对结束 </html> 标记做同样的事情。

<o:conditionalComment if="lt IE 7">
    <h:outputText value="&lt;html lang=&quot;en&quot; class=&quot;lt-ie9 lt-ie8 lt-ie7&quot;&gt;" escape="false" />
</o:conditionalComment>
<o:conditionalComment if="IE 7">
    <h:outputText value="&lt;html lang=&quot;en&quot; class=&quot;lt-ie9 lt-ie8&quot;&gt;" escape="false" />
</o:conditionalComment>
<o:conditionalComment if="IE 8">
    <h:outputText value="&lt;html lang=&quot;en&quot; class=&quot;lt-ie9&quot;&gt;" escape="false" />
</o:conditionalComment>
<o:conditionalComment if="gt IE 8">
    <h:outputText value="&lt;!--&gt;&lt;html lang=&quot;en&quot; class=&quot;no-js&quot;&gt;&lt;!--" escape="false" />
</o:conditionalComment>
...
<h:outputText value="&lt;/html&gt;" escape="false" />

相当尴尬，但 HTML5 boilerplate（这种方法的起源）本身也很尴尬，IMO。

或者，您可以考虑自己创建一个自定义的<my:html> 组件，该组件会生成所需的标记，这样您就可以使用<my:html>...</my:html>。

【讨论】：

谢谢，现在我使用了单个 h:outputText。我还将所有内容都包装在 f:view （命名空间定义）中。我将 o:conditionalComment 用于 js，包括。它很奇怪，但关闭

【解决方案2】：

您可以使用相同的类制作 3 个 CSS（每个浏览器一个）。您的 HTML 代码会更简单。

在标题中，您可以像这样使用特定的浏览器 css：

<h:outputStylesheet library="css" name="ie_7.css" rendered="#{header['User-Agent'].contains('; MSIE 7')}" />

【讨论】：

标头嗅探在技术上不如条件 cmets 可靠。条件 cmets 在 IE 中可以 100% 工作，而请求标头可以被客户端欺骗/黑客攻击。
是的，你是对的，我学到了一些东西！关于 BalusC 评论的链接：msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx

【解决方案3】：

您不应有条件地声明 <html> 元素。

如果使用 Chrome 或 Firefox 的人想要访问您的网站怎么办？

公认的做法是创建特定于 IE 版本的 .css 文件并使用 IE 宏有条件地加载此文件。

例如

<link href="global_styles.css" rel="stylesheet" type="text/css"/>
<!--[if IE 7]-->
<link href="IE7_styles.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<!--[if lte IE 6]-->
<link href="IE6_styles.css" rel="stylesheet" type="text/css"/>
<![endif]-->

在 IE6_styles.css 中，你可以添加一些特定的属性到 html 类，也许 * html hack。这种方法的美妙之处在于它可以在旧的 IE 浏览器中运行，但不会破坏现代浏览器。

顺便说一句，此示例来自 David McFarland 的“CSS：缺失的手册”。

【讨论】：

OP 的 sn-p 来自 html5boilerplate.com。
创建一堆 .css 文件是我不想做的，因为我得到的是一个大的 css。如果别无选择，那么我需要做很多工作来准备特定的 css 文件。