基於瀏覽器的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

回答

相關問題