条件付きコメント形式の書き方とサンプルコード

条件付きコメント形式の書き方とサンプルコード

フロントエンドエンジニアとして、IE は私たちにとって馴染み深いものであるはずです。設計案を実装するためのコードを書くときに、さまざまな IE 互換性の問題が頻繁に発生します。互換性に対処する方法はたくさんあります。最も簡単な方法は、ブラウザごとに異なるスタイルを記述することです。
IE の各ブラウザには独自のコメント セットがあります。自分のブラウザに属する注釈は、相手のブラウザではなく、自分のブラウザでのみ認識されます。次に、条件付きスタイルの記述方法を説明します。

HTML言語でのコメントです。これは、自分自身やチーム メンバーに、何をいつ書いたかなどを知らせるためにコードに追加されるメモです。このコメントはブラウザーには表示されませんが、次の簡単な例のように、ページのソース コードを表示するときにこの部分を見ることができます。

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

<!-- ここに HTML コメント -->
<div>HTML コメント</div>

上記コードの内容がコメント部分になります。次に、上記に基づいて条件文を追加すると、必要な条件付きコメントを取得できます。 IE には独自の条件付きコメント セットがあります。条件付きコメントには多くの利点がありますが、主な利点は、Web サイトのスタイルをすっきりとリフレッシュできること、2 つ目は、すべての対応ブラウザーと簡単に互換性を持たせられることです。これらの利点により、条件付きコメントにすぐに興味を持つようになりました。では、条件付きコメントはどのように記述すればよいのでしょうか? 以下で説明しましょう。

条件付きスタイルの書き方<br />方法は非常に簡単です。通常の方法で外部スタイルシートをインポートし、外側に条件付きコメントをネストするだけです。条件付きコメント ステートメントを使用する前に、理解して使用する必要がある条件付きコメント属性がいくつかあります。
1. gt (より大きい): 条件バージョン自体を除いて、条件バージョンより大きいバージョンを選択します。
2. lt (より小さい): これは gt の反対で、条件付きバージョン自体を除いた、条件付きバージョンの下のバージョンを選択することを意味します。
3. gte (以上): 条件バージョンよりも大きいバージョンを選択し、条件バージョン自体も含みます。
4. lte (以下): 条件バージョン自体も含め、条件バージョンの下のバージョンを選択します。
5. !: 高低に関係なく、条件付きバージョンを除くすべてのバージョンを選択します。

条件付きスタイルの例
1. すべてのIEブラウザをサポート

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

<!--[IEの場合]>
<link rel="スタイルシート" href="IE.css" type="text/css"/>
<![endif]-->

2. IE以外のすべてのブラウザをサポート

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

<!--[!IEの場合]>
<link rel="スタイルシート" href="noIE.css" type="text/css"/>
<![endif]-->

または

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

<!--[!IEの場合]><!-->
<link rel="スタイルシート" href="noIE.css" type="text/css" />
<!--<![endif]-->

3. IE10のみサポート

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

<!--[IE 10の場合]>
<link rel="スタイルシート" type="text/css" href="IE10.css">
<![endif]-->

4. IE9のみサポート

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

<!--[IE 9の場合]>
<link rel="スタイルシート" type="text/css" href="IE9.css">
<![endif]-->

5. IE8のみサポート

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

<!--[IE 8の場合]>
<link rel="スタイルシート" type="text/css" href="IE8.css">
<![endif]-->

6. IE7のみサポート

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

<!--[IE 7の場合]>
<link rel="スタイルシート" type="text/css" href="IE7.css">
<![endif]-->

7. IE6のみサポート

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

<!--[IE 6の場合]>
<link rel="スタイルシート" type="text/css" href="IE6.css">
<![endif]-->

8. IE10以下（IE9以下）をサポート

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

<!--[IE 10の場合]>
<link rel="スタイルシート" type="text/css" href="ie9Down.css">
<![endif]-->

または

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

<!--[lte IE 9の場合]>
<link rel="スタイルシート" type="text/css" href="ie9Down.css">
<![endif]-->

9. IE9以下のバージョン（IE8以下のバージョン）をサポート

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

<!--[IE 9の場合]>
<link rel="スタイルシート" type="text/css" href="ie8Down.css">
<![endif]-->

または

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

<!--[lte IE 8の場合]>
<link rel="スタイルシート" type="text/css" href="ie8Down.css">
<![endif]-->

10. IE8以下（IE7以下）をサポート

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

<!--[IE 8 の場合]>
<link rel="スタイルシート" type="text/css" href="ie7Down.css">
<![endif]-->

または

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

<!--[lte IE 7の場合]>
<link rel="スタイルシート" type="text/css" href="ie7Down.css">
<![endif]-->

11. IE7以下（IE6以下）をサポート

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

<!--[IE 7 の場合]>
<link rel="スタイルシート" type="text/css" href="ie6Down.css">
<![endif]-->

または

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

<!--[lte IE 6の場合]>
<link rel="スタイルシート" type="text/css" href="ie6Down.css">
<![endif]-->

12. IE9以上のバージョン（IE10以上）

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

<!--[if gt IE 9]>
<link rel="スタイルシート" type="text/css" href="ie10Up.css">
<![endif]-->

または

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

<!--[IE 10の場合]>
<link rel="スタイルシート" type="text/css" href="ie10Up.css">
<![endif]-->

13. IE8以上のバージョン（IE9以上）

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

<!--[if gt IE 8]>
<link rel="スタイルシート" type="text/css" href="ie9Up.css">
<![endif]-->

または

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

<!--[IE 9の場合]>
<link rel="スタイルシート" type="text/css" href="ie9Up.css">
<![endif]-->

14. IE7以上のバージョン（IE8以上）

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

<!--[if gt IE 7]>
<link rel="スタイルシート" type="text/css" href="ie8Up.css">
<![endif]-->

または

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

<!--[IE 8 の場合]>
<link rel="スタイルシート" type="text/css" href="ie8Up.css">
<![endif]-->

15. IE6以上のバージョン（IE7以上）

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

<!--[if gt IE 6]>
<link rel="スタイルシート" type="text/css" href="ie7Up.css">
<![endif]-->

または

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

<!--[IE 7 の場合]>
<link rel="スタイルシート" type="text/css" href="ie7Up.css">
<![endif]-->

16. 条件付きコメントでJavaScriptタグを参照する

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

<!--[IEの場合]>
<script type="text/javascript" src="IE.js"></script>
<![endif]-->

上記は、条件付きコメント スタイルを作成する方法を示しています。必要に応じて、1 つまたは複数のスタイルを使用できます。最後に、条件付きコメントは主に IE ブラウザーを対象としているため、IE 条件付きコメントとも呼ばれます。このように、IE 互換性のために記述された個別のスタイルを管理すると、大きな利便性と利点がもたらされます。条件付きコメントを使用すると、条件付きスタイルを簡単に記述し、ブラウザーの問題を解決できます。これで条件付きコメントの紹介は終わりです。

<<:  単一行関数と文字計算日付プロセス制御を説明する MySQL の例

>>:  Node.JS で悪天候のリアルタイム警報システムを構築する

推薦する

基本構造、ドキュメント タイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...

Serv-U FTPとADの完璧な統合ソリューションの詳細な説明

会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...

Nginx のパフォーマンスを向上させるための提案

Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...

ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

オブジェクト指向の観点から Vue コンポーネントを理解するための簡単な分析

同じ関数や HTML コードが複数回使用される場合は、それらをコンポーネントに抽出することを検討でき...

SQL 挿入文の書き方の説明

方法 1: INSERT INTO t1(field1,field2) VALUE(v001,v00...

Mybatis での動的 SQL ステートメント分析

この記事は主にMybatisでの動的SQL文の解析について紹介します。この記事のサンプルコードは非常...

docker での psql データベースのバックアップとリカバリの詳細な説明

1. DockerでのPostgresデータベースのバックアップ注文： docker exec it...

MySQL 文字セットの文字化けとその解決方法

序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...

よくある Linux 英語エラーの中国語翻訳 (初心者必見)

1.コマンドが見つかりません コマンドが見つかりません2. そのようなファイルまたはディレクトリは...

ES6分解課題の原理と応用

目次配列分割代入オブジェクトの分解代入分割割り当ての適用変数の値の交換関数から複数の値を返すマップ構...

MySQL における冗長インデックスと重複インデックスの違い

MySQL では、1 つの列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、M...

Linux と Windows でスケジュールされたタスクを設定する方法

目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...

TypeScript 列挙型

目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...