HTML におけるブロックコメントの使用に関する詳細な紹介

HTML におけるブロックコメントの使用に関する詳細な紹介
HTML の一般的なコメント: <!--XXXXXXXX--> (XXXXXXXX はコメントの内容)

html 内のブロックコメント CSS <!--[if IE]>….<![endif]--> (<!--[if !IE]>||<![endif]

コードをコピー
コードは次のとおりです。

1. <!--[if !IE]><!--> IE 以外では認識可能<!--<![endif]-->
2. <!--[if IE]> すべてのIEが認識可能<![endif]-->
3. <!--[if IE 5.0]> IE5.0 のみが認識できます<![endif]-->
4. <!--[if IE 5]> IE5.0とIE5.5のみが認識できます<![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以上で認識可能<![endif]-->
6. <!--[if IE 6]> IE6 のみが認識できます<![endif]-->
7. <!--[if lt IE 6]> IE6以下のバージョンでは認識できます<![endif]-->
8. <!--[if gte IE 6]> IE6以降のバージョンでは認識できます<![endif]-->
9. <!--[if IE 7]> IE7 のみが認識できます<![endif]-->
10. <!--[if lt IE 7]> IE7以下のバージョンでは認識できます<![endif]-->
11. <!--[if gte IE 7]> IE7以降のバージョンでは認識できます<![endif]-->
<!--[if lte IE 6]>……<![endif]-->

Ite: less than or equal to は IE6 ブラウザ以下を意味します。IE ブラウザの条件付きコメントに使用され、CSShack、JS for IE などでよく使用されます。

WEB 標準の Web ページを学習して適用する過程で、Web ページとブラウザの互換性は頻繁に遭遇する問題です。その中でも、Microsoft の Internet Explorer (略して IE) がブラウザ市場の大部分を占めており、他に Firefox、Opera などがあります。これらのブラウザとの互換性が必要です。
一方、IEに関しては、IEのバージョンのアップグレードや置き換えにより、現在のブラウザでは主にIE5(IE5.5)、IE6、IE7の3つのバージョンが使用されています。ただし、これら 3 つのバージョンでは、作成する WEB 標準の Web ページ (XHTML + CSS) の解釈と実行が異なります。また、IE 以外のブラウザでは、一部の CSS が IE とは異なる方法で解釈されます。したがって、IE ブラウザの専用の条件付きコメントを使用して、関連する属性をターゲットを絞って定義できます。
条件付きコメントは、Explorer 5 以降の Windows (以下、IE と呼びます) でのみ使用できます (条件付きコメントは IE5 からサポートされています)。複数の IE バージョンがインストールされている場合、条件付きコメントは IE の最高バージョン (現在は IE 7) に基づいて表示されます。

条件付きコメントは Windows Internet Explorer (以下、IE と略します) でのみ使用できるため、条件付きコメントを使用して IE 用の特別な指示を追加することができます。
簡単に言えば、条件付きコメントはいくつかの if 判断ですが、これらの判断はスクリプト内で実行されるのではなく、HTML コード内で直接実行されます。次に例を示します。
<!--[IEの場合]>
通常のHTMLコードはこちら
<![endif]-->
1. 条件付きコメントの基本構造は HTML コメントと同じです (<!-- -->)。そのため、IE 以外のブラウザでは通常のコメントとして扱われ、完全に無視されます。
2. IE は、if 条件に基づいて通常のページ コンテンツを解析するのと同じように、条件付きコメント内のコンテンツを解析するかどうかを決定します。
3. 条件付きコメントは HTML コメント構造を使用するため、CSS ファイルではなく HTML ファイルでのみ使用できます。

次のコードを使用して、現在の IE ブラウザのバージョンを検出できます (注: 効果は IE 以外のブラウザでは表示されません)

コードをコピー
コードは次のとおりです。

<!--[IEの場合]>
<h1>IE ブラウザを使用しています</h1>
<!--[IE 5の場合]>
<h2>バージョン 5</h2>
<![endif]-->
<!--[IE 5.0の場合]>
<h2>バージョン 5.0</h2>
<![endif]-->
<!--[IE 5.5の場合]>
<h2>バージョン 5.5</h2>
<![endif]-->
<!--[IE 6の場合]>
<h2>バージョン 6</h2>
<![endif]-->
<!--[IE 7の場合]>
<h2>バージョン 7</h2>
<![endif]-->
<![endif]-->

現在のブラウザが IE だが、バージョンが IE5 より低い場合はどうでしょうか? <!--[if ls IE 5]> を使用できます。 もちろん、条件付きコメントは IE5 以上の環境でのみ使用できるため、<!--[if ls IE 5]> はまったく実行されません。
lte: は Less than or equal to の略語で、以下を意味します。
lt: Less than の略語で、より小さいという意味です。
gte: は Greater than or equal to の略語で、以上を意味します。
gt: Greater than の略語で、「より大きい」という意味です。
! : 等しくないという意味で、JavaScript の等しくない判定演算子と同じです。

条件付きコメントは CSS ハックですか? 条件付きコメントは CSS ハックですか?
厳密に言えば、これは CSS ハックです。他の実際の CSS ハックと同様に、一部のブラウザに特別なスタイルを与えることができ、別のブラウザ (スタイル) を制御するためにブラウザのバグに依存することはありません。さらに、条件文は CSS HACK の範囲を超えたことを行うためにも使用できます (ただし、これはめったに起こりません)。

条件判定はブラウザハックに頼るものではなく、よく考えられた機能なので安心して使えると思います。もちろん、他のブラウザも条件文をサポートしている可能性があります (今のところはサポートされていません) が、<!--[if IE]> のような構文が使用される可能性は低いようです。

条件付きコメントの適用方法<br />この記事の冒頭で、IE ブラウザのバージョンによって、私たちが作成する WEB 標準ページの解釈が異なるため、具体的には CSS の解釈が異なることを説明します。それらに互換性を持たせるために、条件付きコメントを使用してそれらを個別に定義し、最終的に互換性の目的を達成できます。例えば:

コードをコピー
コードは次のとおりです。

<!-- デフォルトでは、css.css スタイルシートが最初に呼び出されます -->
<link rel="スタイルシート" type="text/css" href="css.css" />
<!--[IE 7の場合]>
<!-- IE ブラウザのバージョンが 7 の場合は、ie7.css スタイルシートを呼び出します -->
<link rel="スタイルシート" type="text/css" href="ie7.css" />
<![endif]-->
<!--[lte IE 6の場合]>
<!-- IE ブラウザのバージョンが 6 以下の場合は、ie.css スタイルシートを呼び出します -->
<link rel="スタイルシート" type="text/css" href="ie.css" />
<![endif]-->

これは、互換性を実現するために、IE7 および IE6 より前のブラウザでの CSS の実行を区別します。同時に、最初の行のデフォルトの css.css は、IE 以外の他のブラウザとも互換性があります。

注意: デフォルトの CSS スタイルは HTML ドキュメントの最初の行に配置する必要があり、条件付きコメント判定のすべてのコンテンツはデフォルトのスタイルの後に配置する必要があります。
たとえば、次のコードは、IE ブラウザで実行すると赤で表示されますが、IE 以外のブラウザで実行すると黒で表示されます。条件付きコメント判定を1行目に置くと実装できません。この例は、IE ブラウザと非 IE ブラウザ間の互換性の問題を解決する方法をよく示しています。

コードをコピー
コードは次のとおりです。

<スタイル タイプ="text/css">
体{
背景色: #000;
}
</スタイル>
<!--[IEの場合]>
<スタイル タイプ="text/css">
体{
背景色: #F00;
}
</スタイル>
<![endif]-->

同時に、IE 以外のブラウザでの状況を定義するために <!--[if !IE]> を使用しようとする人もいるかもしれませんが、条件付きコメントは IE ブラウザでのみ実行できることに注意してください。このコードは、IE 以外のブラウザでは条件による定義が実行されないだけでなく、コメントとして無視されます。
標準はデフォルトのスタイルであり、条件付きコメントは IE ブラウザで特別な処理が必要な場合にのみ実行されます。
CSS ファイルではなく、HTML ファイル内です。

<<:  MySql における無効な Null セグメント判定と IFNULL() 失敗の解決策

>>:  Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

推薦する

Flex レイアウトで適応型ページを作成する (構文と例)

Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...

Mysql の一般的なベンチマーク コマンドの概要

mysqlslap共通パラメータの説明–auto-generate-sql システムはテスト用のSQ...

JavaScript 関数をよりエレガントにする方法

目次分割代入を使用したオブジェクトパラメータコールバック関数の命名条件文を説明的にするスイッチ文をM...

JS正規RegExpオブジェクトについての簡単な説明

目次1. RegExpオブジェクト2. 文法2.1 定義2.2 修飾子2.3 角括弧2.4 メタ文字...

MySQL で誕生日から年齢を計算する複数の方法

以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...

JQuery データグリッドクエリの詳細な説明

目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....

Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します

目次1. テレポートの使用2. モーダルダイアログコンポーネントを完成させる3. コンポーネントのレ...

Vueの学習手順

目次1. v-text (v-instruction name = "variable&q...

lnmp を使用して MySQL データベースのルート パスワードをリセットする 2 つの方法

最初の方法: Junge のワンクリック スクリプトを使用して、LNMP 環境で MYSQL データ...

Linux での Jenkins の詳細なインストール手順

目次1. JDKをインストールする2. Jenkinsをインストールする3. Jenkinsの設定を...

XHTML 入門チュートリアル: XHTML Web ページ画像アプリケーション

<br />適度に画像を追加すると、Web ページがより美しくなります。 画像タグ &l...

Vue3 + TypeScript 開発の概要

目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する

エラーを報告するApache\Nginx サービスは正常に起動しましたが、MySQL は起動に失敗し...

dockerエラーの原因分析 終了しました (1) 4分前

Dockerエラー1. 原因を確認するdocker ログ ネクサス2. エラーの原因OpenJDK ...