IE11のみCSSを適用する(IE10含む)

国内でウェブサイトの制作などを仕事にしていると、IEに対する対応は避けて通れないと思います。一時期に比べると、Microsoftのサポート方針の変更などで、古いIEに対してのサポートを行うという機会はほぼほぼなくなりましたが、今度アップデートされない(と現在アナウンスされている)IE11への対応というのは、国内の企業を相手にしている限りはなくならないんじゃないでしょうか。

Microsoftとしても基本的な方針としてEdgeへの移行を進めていくでしょうし、一般のユーザーに関しては移行も進んでいくとは思いますが、国内の企業などで利用されているSKYSEA Client ViewではEdgeに関しては機能制限があるなど、状況的に「企業ユーザーがせめてEdgeに移行してくれれば‥‥」というのは願望にすぎないというのが現実でしょう。

(余談:さらにはWindows Server 2012についてはIE10が最新ということで、実はIE10も生き残っているという。まあ、これは流石に無視しても良いとは思いますが。)

で、本題ですが、IE11(10移行)の対応で、CSSまわりで想定外のレンダリングに関しては、mixin使ってCSSをオーバーライドするという方式で基本的には対応しています。後述のメディアクエリでIE10以降のみで有効になるCSSが記述できるので‥‥

@media all and (-ms-high-contrast:none)

下記のようなmixinを作成して対応しています。

@mixin mqIE{
  @media all and (-ms-high-contrast:none){
    @content;
  }
}

これが基本的な対応です。込み入ってくれば、アレヤコレヤすることになりますが、まずはこれからやっています。

投稿者: maepon

okayama-js

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中