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

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

フロントエンドエンジニアとして、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とCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...

deepin 2014 システムに MySQL データベースをインストールする方法

Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...

Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する

Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...

ページ内にマーキーとフラッシュが共存する場合の競合解決

競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...

blockquote タグの使用に関する注意

<br />セマンティクス化は一言で説明することはできないし、まだ公式かつ厳密な定義もあ...

Nginx の構成と HTTP 実装コード分析との互換性

OpenSSL を使用して SSL キーと CSR ファイルを生成するHTTPS を設定するには、秘...

レンダリング関数を使用して、拡張性の高いコンポーネントをカプセル化する

必要：バックグラウンド管理では、次のようなレイアウトでデータを表示する必要があることがよくあります。...

HTTPS の有効化に関する経験の共有

国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...

JavaScriptは検証コードと検証のランダム生成を実装します

この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参...

MySQLトランザクションの基本的な学習と経験の共有

トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...

フロントエンド Vue ユニットテストを始める

目次1. ユニットテストはなぜ必要なのでしょうか? 2. ユニットテストの書き方3. テストツール4...

中国における中国語ドメイン名の人気は新たなクライマックスを迎えた

<br />外交部などの中央政府機関、各レベルの地方政府、その他の国家機関や部門が率先し...

Linux 上の MySQL 5.5/5.6 で文字セットのエンコーディングを UTF8 に変更する方法

1. MySQL にログインし、SHOW VARIABLES LIKE 'character...

Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法

はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...

Linux で gdb を使用してコア ファイルをデバッグする方法

1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...