Fuck IE!!(hack IE)|2016年版

シェアする

[Sponsored link]

Fuck IE!!(hack IE)|2016年版

日本国内におけるブラウザのシェアはやはりIEがトップ!

インターネットを閲覧するといえば、「Microsft Internet Explorer(以下、IE)」ですが、Windowsを購入すると標準に装備されているため、今でも根強く人気があります。

ここ1年間のブラウザのシェア

ただし、そのバージョンによって大きく挙動が変わったり、バグが発生してしまうことが多いことで有名であるため、多くのウェブ開発者を悩ませるタネでもあります。

日本国内では、ほとんどがバージョンが7~11であり、その中でも最もシェアがあるバージョンが「IE11」です。またWindows 10が発売されたことにより最新バーションの「Microsft Eage」というブラウザも登場してきました。

順位ブラウザ名・バージョンシェア率
1位IE 11.022.16%
2位Chrome 52.017.15%
3位Chrome 53.014.57%
4位Firefox 48.011.2%
5位Edge 134.37%
6位Chrome for Android4.31%
7位Safari 9.13.97%
8位Chrome 49.03%
9位Firefox 49.02.81%
10位その他16.45%

※ StarCounterより参照(2016年9月現在)

ウェブ開発者はやっぱり大変?IEハックはどこまでする?

最近は、IEの古いバージョンへの対応は「しなくても良い」という雰囲気になっていますが、
どうやら「IEだけ挙動がおかしい」問題は継続して発生しているようです。

ですが、最近はIE9〜対応することが多くなってきています。改めてIEのバージョン毎、また3つの方法でのハック方法を調べてみました。

1.CSSでのハック

一番手軽方法です。最近は、下位バージョンのIEへ対応することもなくなってきたので、シェアの高いものを中心に取り上げます。

[code]
/* IE10以下 */
.sample {
display: inline-block\9;
padding-bottom: 0\9;
height: 60px\9;
}

/* IE11 */
@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, .sample {
display: inline-block;
height: 60px;
}
}

/* Edge */
@supports (-ms-accelerator:true) {
.sample {
display: inline-block;
padding: 0;
height: 60px;
}
}
[/code]

2.条件付きコメント

IEのみに独自実装されている条件付きコメントを利用した手法です。
ただし、IE10からは条件付きコメントが廃止となったため、有効なのはそれ以前のバージョンになります。

[code]

/* IE9のみ */
<!– [if IE 9.0]>******<![endif]–>

/* IE8のみ */
<!– [if IE 8.0]>******<![endif]–>

/* IE7のみ */
<!– [if IE 7.0]>******<![endif]–>

/* IE6のみ */
<!– [if IE 6.0]>******<![endif]–>

/* IE9以下 */
<!– [if lte IE 9.0]>******<![endif]–>

/* IE8以下 */
<!– [if lte IE 8.0]>******<![endif]–>

/* IE7以下 */
<!– [if lte IE 7.0]>******<![endif]–>

/* IE6以下 */
<!– [if lte IE 6.0]>******<![endif]–>
[/code]

3.jQueryによるIEバージョン判別

jQueryでUserAgentを取得して、その文字列を見てどのブラウザか判別する方法です。IEのバージョンごとに異なるclassをhtml要素に付与します。

[code]
var ua = navigator.userAgent;
var isIE = ua.match(/msie/i),
isIE6 = ua.match(/msie [6.]/i),
isIE7 = ua.match(/msie [7.]/i),
isIE8 = ua.match(/msie [8.]/i),
isIE9 = ua.match(/msie [9.]/i),
isIE10 = ua.match(/msie [10.]/i);
isIE11 = ua.match(/msie [11.]/i);
if (isIE) {
$(“html”).addClass(‘ie’);
if (isIE6) {
$(“html”).addClass(‘ie6’);
} else if (isIE7) {
$(“html”).addClass(‘ie7’);
} else if (isIE8) {
$(“html”).addClass(‘ie8’);
} else if (isIE9) {
$(“html”).addClass(‘ie9’);
} else if (isIE10) {
$(“html”).addClass(‘ie10’);
} else if (isIE10) {
$(“html”).addClass(‘ie11’);
}
}
[/code]

IEの12とか13とか、はたまたEageが進化するとどうなるのか・・・
考えただけでおぞましいのですが、今回はこの辺で。

#下記は、2010年1月16日の記事です。

なぜ、IEだけハッキングが必要なのか・・・いつも考えます。
レンタリングの方法が違うのはいいが、やはり特色のためだけにコレやられるときついです。
うーん、、
たしか、IEユーザーは、年齢に比例するそうですね。

とりあえず、簡単なハッキングの方法を。

IE6用(_を読み込む)

#main {color: #fff;}
_main {color:#ccc;}

IE7用(*を読み込む)(IE6も読み込む)

#main {color: #fff;}
*main {color:#ccc;}

ただ、IE8は今回W3C標準に変えたそうな。
しかしながら、IE8にバージョンアップする人が何%いるのか・・・基本的にアップデートするように促さないようなので、これは期待できませんね。
とりあえず、後10年はhackの方法も知っておかないと無理かもしれない。
あと、SleipnirはIEのコンポーネントを使用しているので、これも考慮しないと。。

読み込ませるCSSをかえるのも1つですね。(<>は小文字に変更してください。)

<!–[if IE 6 ]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” mce_href=”ie6.css” /><![endif]–>

<!–[if IE 7 ]>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” mce_href=”ie7.css” /><![endif]–>

あまり、ハッキングはスマートではないので、好きではないのですが・・・

IE6の対策
・要素内にmarginとfloatを指定したらおかしなことに。(marginが二倍になるため、別に要素を内包するものを作る。)
・要素内にpaddingとborderを指定する場合、IE6では外に加算しない。(別にその要素を内包する要素にpaddingを作る。)
・「min-width」「min-height」はIE6では効かない。(hackするしかない。)
・floatしたけど、階段状になる。(display:inline;を使う。)
・透過pngが使えない。(jsにて対処。ここ

IE7の対策
・要素内にfloatとline-heightを指定すると、line-heightが無視される。(別にその要素を内包する要素にline-heightを作る。)
とりあえず、要素要素毎にheight、widthなどなどしっかりと記述すれば、hackは必要ないかもしれません。(ある程度は)

この記事が気に入ったら
いいね ! しよう

Twitter で

フォローする