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

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

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

推薦する

Vue がルート変更を監視するときに watch メソッドが複数回実行される理由と解決策

目次要件の説明:要件分析:ニーズの解決問題解決私はフロントエンドの新人ですが、バックエンドのバグの中...

表の最初の行と最初の列を固定し、適応型ウィンドウを実現するための CSS の例コード

今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応さ...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

CSS3 カテゴリメニュー効果

CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...

JavaScript はモーダルボックスのドラッグ効果を実現します

これはモーダル ボックスのドラッグのケースです。ここで実装する関数は次のとおりです。 1. ポップア...

フレックスインサイドボタンの垂直方向の中央揃えが中央揃えにならない問題の解決方法

問題の説明ボタンのスタイルはアイコン + テキストです。フレックス レイアウトを使用して垂直方向に中...

MySQLのロングトランザクションに関する深い理解

序文：この記事では主にMySQLのロングトランザクションに関する内容を紹介します。例えば、トランザク...

なぜ Tomcat が起動できないのでしょうか?

目次現象：ポートの使用:ファイルにスペルミスがあります:現象： Tomcat がインストールされ、W...

Mysql トランザクション分離レベルの読み取りコミットの詳細な説明

MySQL トランザクション分離レベルを表示する mysql> '%isolation...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

Vue+elementuiはドロップダウンテーブルの複数選択と検索機能を実現します

この記事では、ドロップダウンテーブルの複数選択と検索を実現するためのvue+elementuiの具体...

データベースの削除から逃走までの MySQL の徹底分析_上級編 (I) - データ整合性

1. データ整合性の概要1. データ整合性の概要データの冗長性とは、データベース内に重複したデータが...

show processlist コマンドによる MySQL パフォーマンス検査の説明

show processlist コマンドは非常に便利です。MySQL の実行が 50% 以上になる...

マークアップ言語 - 簡略化されたタグ

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

クラスタrpmを使用してMySQLをインストールするための詳細な手順

MySQLデータベースをインストールするa) MySQL ソースインストールパッケージをダウンロード...