14

それは私が今持っているただの好奇心です。Eclipse では、これはたとえば新しい Facelet テンプレート<head>で定義されたセクションですが、ほとんどのテンプレートは同じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
  ..
</head>

より明確なコードを使用したいので、次のように変更します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
  ..
</head>

開発中は問題なく動作しますが、この種のアプローチが将来、多くのブラウザーやデバイス (モバイル) を介して問題を引き起こすのではないかと考えていました。

4

2 に答える 2

18

これは HTML5 doctype であり、IE6 を含むすべてのブラウザーで問題なく動作するはずです。

JSF は、XHTML 1.0 準拠のマークアップを生成するように公式に指定されています ( JSF 2.2 で修正された、および/またはコンテキスト パラメータによって管理可能な実装での違反はごくわずかです) JSF は設計上、非 XML 構文を (たとえば<br>の代わりに<br/>) 生成できないため、古い HTML4 doctype は、JSF が生成した HTML 出力とまったく互換性がありません (つまり、標準を尊重したり、W3 バリデーターを恐れたりする場合)。ただし、 、すべてではないにしてもほとんどのブラウザが非常に寛容です)。古い HTML4 doctype とは対照的に、HTML5 doctype は XML 構文を使用できるため、XHTML doctype と互換性があります。したがって、JSF ページは HTML5 doctype で作成できます。

doctype は、Web ブラウザーが HTML マークアップをどのように解釈して表示するかについてのみ重要です (特定のケースで JSF によって生成されますが、HTML は必ずしも JSF によって生成される必要はないため、ブラウザーの表示は技術的には JSF とはまったく関係ありません)。特に Microsoft IE には、特定の Doctype に関する大きな問題や、Doctype の完全な欠如があります。このページの下部に、特定の Doctype と組み合わせたブラウザーの動作の簡潔な概要があります。次の 3 つの標準的な動作があります。

  • Q - 個性モード。あなたは本当にそれをしたくありません。IE でボックス モデルのバグが発生します。CSS のwidthand then は、とheightを誤ってカバーしています。paddingborder
  • A - ほぼ標準モードです。手頃な価格で、表のセルの垂直方向のサイズ変更のみが CSS2 仕様に準拠していません。テーブル セル内の画像のミステリアスなギャップを回避したい場合に便利です。
  • S - 標準モード。ブラウザは w3 HTML/CSS 標準に完全に準拠しようとします。優先モードは、Web サイトがすべてのブラウザーでまったく同じように表示されることをある程度確信できる唯一のモードであるためです。

あなたの特定のケースでは、XHTML 1.0 移行 doctype から HTML5 doctype への変更により、Firefox、Chrome、Safari、および IE>=8 が「A」から「S」になります。したがって、ピクセル パーフェクトなデザインを意図している場合は、テーブル セル内の画像のパディングに関して、Web サイトのブラウザのプレゼンテーションを必ず確認する必要があります。

IE での doctype の重要性については、IE6-9 で "Q" によってトリガーされるボックス モデルのバグを示す HTML の一部を次に示します (これは IE10 ではもう現れないことに注意してください)。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Remove DOCTYPE to trigger quirksmode</title>
        <style>
            #box { 
                background: yellow; 
                width: 100px;
                padding: 20px; 
                border: 20px solid black; 
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div id="box">box</div>
    </body>
</html>

コピーして貼り付けて実行します。現在で<!DOCTYPE html>は、長方形が表示されます。doctype 行がないと、本物の四角形が表示されます (IE10 では、webdeveloper ツールセットで (F12 を押す) 必要があります)。これを表示するには、「ブラウザ モード」を IE9 などに変更します)。

ここに画像の説明を入力

以下も参照してください。

于 2013-04-16T11:24:22.850 に答える
1

最良の解決策は、詳細な宣言をインデックス テンプレートで 1 回だけ使用し、そこにヘッダーと本文のテンプレートを含めることです。それが不可能な場合は、この宣言を省略できます。これは「標準」ですが、実際には必要ありません。

于 2013-04-16T11:16:48.003 に答える