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

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

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

推薦する

docker と docker-compose による eureka の高可用性の実現の詳細な説明

最近、新しいプロジェクトでは springcloud と docker が使用されています。この 2...

Docker を使用してスタンドアロン Pulsar とクラスター化された Redis をデプロイする方法 (開発アーティファクト)

目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...

ユーザー中心設計

最近、デジタル デザイン コミュニティで「誰が何を担当するのか」という明らかな混乱についてよく質問さ...

LinuxシステムにおけるMySQLの一般的な操作コマンド

仕える： # chkconfig --list すべてのシステムサービスを一覧表示する# chkco...

Vueのシンプルストアの詳しい説明

Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

JavaScript ベースの Web 計算機の実装

この記事では、ウェブ計算機のマインスイーパゲームを実装するためのJavaScriptの具体的なコード...

Docker nginxのインストールと設定方法

DockerでNginxイメージをダウンロードする docker プル nginx Docker イ...

MySQL の null (IFNULL、COALESCE、NULLIF) に関する知識ポイントのまとめ

この記事では、MySQL の null (IFNULL、COALESCE、NULLIF) に関連する...

Win10 インストール Linux システム チュートリアル ダイアグラム

Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...

Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...

Linux 7.7 でスワップ パーティション SWAP を設定する方法

Linux システムの Swap パーティション、つまり swap パーティションは、一般に仮想メモ...

メタタグのビューポートはデバイス画面のCSSを制御します

コードをコピーコードは次のとおりです。 <meta name="viewport&q...

VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィック チュートリアル)

1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...

MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

目次1. ソリューション 1 (UDF)デモケース2. ソリューション2（binlogの解析）キャナ...