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 サーバーとイメージ サーバーを構築する方法

推薦する

Matlab による JavaScript プログラミング、重心アルゴリズムによる位置決め学習

目次Matlab セントロイドアルゴリズムMatlab はクローズドな商用ソフトウェアであり、米国政...

Divの境界と透明度に関する設定

フレーム:スタイル=”border-style:solid;border-width:5px;bor...

background-positionプロパティでのパーセンテージ値の使用法の検討

背景位置が背景画像の表示に与える影響この2日間のプロジェクトでホームページの写真を入れ替えていたとこ...

MySql5.x を MySql8.x にアップグレードする方法と手順

MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...

ボタンに醜い灰色の枠線が付いています。これを削除するにはどうすればよいですか?

ダイアログをクロージャで使用し、右上隅の向こう側に閉じるボタンがあるダイアログを描画しました。ボタン...

MySQL ユーザー変数と set ステートメントの例の詳細な説明

目次1 ユーザー変数の概要2 ユーザー変数の定義3 ユーザー変数の使用3.1 セットを通した例3.2...

Nginx 構成の場所の一致ルールの例の説明

nginx の設定命令のスコープは、main、server、location の 3 種類に分けられ...

さまざまな解像度やブラウザでウェブページを適切に表示する方法

キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...

システム CD をマウントして yum ウェアハウスを構築する VMware 15.5 バージョンのグラフィック チュートリアル

1. CentOS 7 仮想マシンを開きます。 2. 仮想マシンにログインし、リストにないユーザー名...

Vue ページ スタック マネージャーの詳細

目次2. 試した方法2.1 キープアライブ2.2 ネストされたルートを持つ CSS 3. 機能説明4...

水平ヒストグラムを作成するための MySQL ソリューション

序文ヒストグラムは、RDBMS によって提供される基本的な統計情報です。最も一般的に使用されるのは、...

Dockerでspringcloudプロジェクトをデプロイする方法

目次Dockerイメージのダウンロードmysqlとnacosを起動する独自のJavaプロジェクトを変...

win10 での mysql 8.0.16 winx64 インストールの最新グラフィック チュートリアル

このデータベースをダウンロードするには、多くの時間とトラフィックがかかります。踏み込んだ落とし穴で時...

js を使ってシンプルな虫眼鏡効果を実現

この記事の例では、参考までに簡単な虫眼鏡効果を実現するためのjsの具体的なコードを共有しています。具...

ウェブページ HTML 順序付きリスト ol と順序なしリスト ul

データを整理するためのリストWeb ページの表示を制御する多数の HTML タグを学習した後、読者は...