基于浏览器的CSS开关JSF

我需要一些浏览器特定的CSS在我的JSF2应用程序（Mojarra 2.1，Tomcat 7）。基于浏览器的CSS开关JSF

我尝试添加到我的模板：

<!--[if IE 8]> 
     <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE8}" /> 
    <![endif]-->

但注释不渲染，因为我还使用：

<context-param> 
    <!-- Removes any comments from the rendered HTML pages. --> 
    <param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name> 
    <param-value>true</param-value> 
</context-param>

我的问题......当我禁用`javax.faces.FACELETS_SKIP_COMMENTS ，我得到了一堆其他问题..我也不认为我的源代码注释属于生成的页面。

我也试图把开关CDATA，如：

<![CDATA[ 
<!--[if IE 7]> 
     <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE7}" /> 
<![endif]--> 
]]>

但内心<呈现为HTML实体..： - /，所以它不工作。

问：还有其他解决方案吗？是否存在任何JSF2标签来处理这个问题？外部标签库？

由于提前，史蒂夫

来源

2011-07-01 alfonx

唯一的办法是使用<h:outputText escape="false">。

<h:outputText value="&lt;!--[if IE 8]&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;#{cfgs.externalCssUrlIE8}&quot; /&gt;&lt;![endif]--&gt;" escape="false" />

是的，这是一条丑陋的路线。但没有其他标准方法。

更新：JSF的工具库OmniFaces提供<o:conditionalComment>出于这样的目的，这样你就不需要丑<h:outputText escape="false">了：

<o:conditionalComment if="IE 8"> 
    <link rel="stylesheet" type="text/css" href="#{cfgs.externalCssUrlIE8}" /> 
</o:conditionalComment>

来源

2011-07-01 11:06:52 BalusC

谢谢。有用！我也试过，但你是正确的：丑陋的逃生h：outputText似乎是唯一的解决方案。 – alfonx

不客气。请注意'''在JSF2中被**弃用**。它完全没有价值，因为完全允许/支持在Facelets中嵌入纯HTML（自JSP上的JSF 1.2开始也是如此）。为了在Facelets中有条件地呈现纯HTML（就像你以前用''做的那样），你应该用''来代替 – BalusC

好的解决方法，即使它很丑。 ..再次，你救了我:) –

你也许能正常工作使用条件注释包容语法的解决方案。而不是写作，你会写<![if !IE 8]> ... <![endif]>。

换句话说，没有使其成为评论的破折号。

这是合法的语法。这种语法的意图是，条件部分是由非IE浏览器读取的，而使用带有破折号的语法时，其他浏览器会忽略它。

当然，这对你的样式表有明显的影响 - 包含在条件块内的CSS需要适用于IE8以外的所有浏览器（你会注意到我上面添加的感叹号使它不是IE8 “）; IE8特定的东西将需要包含在标准样式表中，以被条件块中的样式覆盖。

换句话说，与您目前尝试做的功能相比，这是功能的逆转。

重要的一点是，这样做的条件块不是一个评论，因此不应该被你的解析器删除。

你可能需要重做一些东西，但它应该工作。

另一种选择当然是找到一个特定于IE8的CSS破解。这些确实存在，但我建议尽可能避免它们，因为您将使CSS无效，并且在将来的某些浏览器版本中总会存在突破的危险。

但是，如果你要沿着这条路走下去，这里是它给你的答案的链接：http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode

但不要用，除非你有向。 :-)

希望有所帮助。

来源

2011-07-01 10:59:32 Spudley

我有[如果IE 7]，[如果IE 8]等列表，所以BalusC的答案使得一个更简单的方法。无论如何感谢你的明确答案。 – alfonx

@alfonx - 没问题;正如你所说，@ BalusC的答案可能对你的情况更好，但希望你已经发现我的答案有用;即使这次没有帮助。 :) – Spudley

BalusC的答案是正确的答案，我题。不过我想分享一个基于JavaScript + CSS的解决方案：CSS Browser Selector。

插入this minified line of JavaScript使您可以使用操作系统和浏览器特定的CSS选择器，例如：

html.gecko DIV＃头{保证金：1EM; }

.opera #header {margin：1.2em; }

.ie .mylink {font-weight：bold; }

.mac.ie .mylink {font-weight：bold; }

。[os]。[browser] .mylink {font-weight：bold; }

如果你的浏览器特定的造型仍然是在一开始，这可能比包括许多.css文件是一个清晰的解决方案。

来源

2011-07-03 07:26:10 alfonx

基于浏览器的CSS开关JSF

回答

相关问题