iPentec.com / Doc / CSS / CSS メディアクエリ

CSSメディアクエリで Microsoft Edge を指定する - CSS

CSSメディアクエリで Microsoft Edge を指定するコードを紹介します。

概要

CSSで Microsoft Edge の場合に限り、スタイルを変更したい場合があります。ユーザーエージェントを判定してプログラムで出し分けすることもできますが、メディアクエリを利用することで、CSSの記述のみで Microsoft Edge でのスタイルを指定できます。

注意

この方法でスタイルを指定できるのは「旧Microsoft Edge」のWebブラウザです。

書式

@supports (-ms-ime-align:auto) {
...(Microsoft Edgeで適用するスタイル)
}

記述例

Microsoft Edge に適用させるメディアクエリ

@supports (-ms-ime-align:auto){
  h1{
    font-size: 32px;
  }
}

コード例

下記のコードを記述します。

microsoft-edge.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="microsoft-edge.css" /> 
</head>
<body>
  <h1>タイトル</h1>
  <div class="text">コンテンツのテキストです。テキストテキスト。テキスト。</div>
</body>
</html>

microsoft-edge.css

.text{
  font-size:14px;
}

@supports (-ms-ime-align:auto) {
  .text {
    font-size: 22px;
    color: #006ac3;
  }
}

解説

CSSの "@supports" コマンドにより、Microsoft Edge の場合には、@supports (-ms-ime-align:auto){ ... } ブロック内のスタイルが適用されます。今回のコードでは、textクラスの文字色をブルーにし、フォントのサイズを22Pixelに設定しています。Microsoft Edge以外のWebブラウザでは、フォントカラーを指定せず14Pixelでの表示のため、Microsoft Edgeでページを表示した際に、ブルーの文字が表示される動作になります。