最新CSSハック IE10・IE11・EDGE・Chrome・Firefox・Safari / ホームページ制作 印刷物作成
デザイン事務所｜エイビッツ （ Aveit. ）

最新CSSハック IE10・IE11・EDGE・Chrome・Firefox・Safari

2016/11/13

相も変わらずmicrosoft系は問題がありますね。期待していたEdgeも最新CSS記述ではプロパティによっていろいろあるようです。

すでに「モバイルファースト」とか「レスポンシブデザイン」などという言葉も、発するのが恥ずかしくなるくらいモバイル全盛期を迎えておりますが、制作のやり取りの中での確認作業はPC中心という、なんとも矛盾な制作現場ではあります。

それでも憎っくきそして愛らしいIE6も過去のものとなり、IE7、IE8そしてIE10もサポート終了！順番がなんだかおかしいですが、Vista搭載のIE9がかろうじてサポート中でありますがこれはね！？！？もういいかなというレベル。それでも頑なにWindows7のIE10をそのまま使っている方向けにIE10も仕方なく、最新のハックを集めてみました。様々な方がEDGEのハックを掲載していますが、なぜか私のDEGEでは機能しない記述ばかりでした。

下記に示すハックは動作確認済みです。旧ブラウザ以外は2016.11.13時点での最新ブラウザ

IE10

@media all and (-ms-high-contrast:none) {
body {
     background-color: #935A22;
}
}

IE11

@media all and (-ms-high-contrast:none) {
     *::-ms-backdrop, body {
     background-color: #629321;
}
}

EDGE

_:-ms-lang(x), _::-webkit-meter-bar,body {
     background-color: #216793;
}

Chrome

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
body {
     background-color: #462193;
}
}

Firefox

@-moz-document url-prefix() {
body {
     background-color: #932153;
}
}

Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {
     ::i-block-chrome, body {
     background-color: #934720;
}
}

もう暗譜できるようなハックではないですね。IE6アンダースコアハックが懐かしい。

（参考）

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

http://stackoverflow.com/questions/10812093/is-there-a-google-chrome-only-css-hack