1

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 全体の条件付き読み込みしか許可されず、役に立たない...

4

3 に答える 3

6

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

これは整形式のXMLではありません。 ご存知のとおり、XMLの終了要素はXMLの開始要素とまったく同じスコープ内にある必要があります。すべてが同じ親XML要素に独自のものを持っている場合、それは有効なXMLになります。しかし、これは有効なHTMLではありません。<html></html>

<h:outputText escape="false">すべての<html>タグで使用するだけです。</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ボイラープレート（このアプローチが始まった場所）は、それ自体も厄介なIMOです。

<my:html>または、で十分なように、目的のマークアップを生成するカスタムコンポーネントを自分で作成することを検討することもできます<my:html>...</my:html>。

于 2012-07-30T13:05:53.317 に答える
3

同じクラスで 3 つの CSS (ブラウザーごとに 1 つ) を作成できます。HTML コードはよりシンプルになります。

ヘッダーでは、次のような特定のブラウザー css を使用できます。

<h:outputStylesheet library="css" name="ie_7.css" rendered="#{header['User-Agent'].contains('; MSIE 7')}" />
于 2012-07-30T14:19:33.287 に答える
2

<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ハッキングしたりすることができます。このアプローチの優れた点は、古い IE ブラウザーで機能することですが、最新のブラウザーを壊すことはありません。

ところで、この例は David McFarland による「CSS: the missing manual」からのものです。

于 2012-07-30T12:57:38.537 に答える