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

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

フロントエンドエンジニアとして、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 で悪天候のリアルタイム警報システムを構築する

推薦する

JavaScript の構造化代入の一般的なシナリオと例 5 つ

目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...

データベースSQL SELECTクエリの仕組み

私たちは Web 開発者として、プロの DBA ではありませんが、データベースなしではやっていけませ...

マークアップ言語 - リスト再び

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

Linux でプロセスを隠す方法と、遭遇する落とし穴

序文1. この記事で使用したツールは、https://github.com/gianlucabore...

MySQLのinnodb_data_file_pathパラメータを変更する際の注意事項

序文innodb_data_file_path は、innodb テーブルスペース ファイルを指定す...

Vue3.xはコンポーネント通信にmitt.jsを使用します

目次クイックスタート使い方基本原則Vue2.x はコンポーネント通信に EventBus を使用しま...

Linux には make コマンドがありません (make: *** ターゲットが指定されておらず、makefile または make コマンドのインストール方法が見つかりません)

知らせ！ ！ ！この状況は、実際には仮想マシンのインストール中に回避できます。次回仮想マシンをテスト...

PHP の問題により、Zabbix モニタリングでグラフィカル インターフェイスに中国語の文字化けが発生する問題を解決する方法

PHP のコンパイル時に -enable-gd-jis-conv オプションを追加することで発生する...

MySQL スロークエリ pt-query-digest スロークエリログの分析

1. はじめにpt-query-digest は、MySQL のスロー クエリを分析するためのツール...

JavaScript での && および || 演算子の使用例

目次序文&& 演算子|| 演算子|| 演算子の簡単なデモ章の目的ケース演習（json...

メタを使用してトラフィックキャッシュをキャンセルし、ページにアクセスするたびにページを更新して簡単にデバッグできるようにします。

コードをコピーコードは次のとおりです。 <!-- ブラウザがローカル キャッシュからページにア...

SQL Server コメントのショートカット キー操作

SQL Server のバッチコメントバッチ注釈Ctrl + (K, C): Ctrlキーを押しなが...

数千万データを持つMySQLテーブルを最適化する実践記録

序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...

uniappがインターフェースドメイン名を動的に取得する方法を分析する

背景インターフェイス ドメイン名はハードコードされておらず、動的に取得されます。具体的な実装は、静的...

IEではボタンが両側に伸びる

ボタン (input, button) を記述すると、IE では次のようになります。単語数が増えると...