Last active
November 10, 2017 08:28
-
-
Save sawadays0118/822a2e9d575b26afe760 to your computer and use it in GitHub Desktop.
Sassで使えるIE向けCSSハックまとめ ref: http://qiita.com/sawadays0118/items/b2724161ef4ade430b2f
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // * hack IE | |
| $hack-ie11: "*::-ms-backdrop"; | |
| @mixin hack-ie($hack-ver:'') { | |
| // * IE11 hack(add selector *::-ms-backdrop) | |
| @else if $hack-ver == "ie11" { | |
| @media all and (-ms-high-contrast:none\0) { | |
| #{$hack-ie11}, | |
| @content; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* IE8 hack */ | |
| @media \0screen { body { background-color: #c00; } } | |
| /* IE9-10 hack */ | |
| @media all and (min-width: 0 \0) { body { background-color: #00b\9; } } | |
| /* IE10 hack */ | |
| @media all and (-ms-high-contrast: none\0) { body { background-color: #000\9; } } | |
| /* IE11 hack */ | |
| @media all and (-ms-high-contrast: none\0) { body *::-ms-backdrop, body { background-color: #ccc; } } | |
| /* IE11 hack 以下のように書いてもOKをコンパイルした場合。こっちのほうが短くなるが、書いててラクなのは前者 */ | |
| @media all and (-ms-high-contrast: none\0) { *::-ms-backdrop, body { background-color: #ccc; } } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| // * IE8 hack | |
| // * 使用時の注意：なし | |
| @include hack-ie(ie8) { | |
| background-color: #c00; | |
| } | |
| // * IE9-10 hack | |
| // * 使用時の注意：プロパティの最後に\9を入れる | |
| @include hack-ie(ie9-10) { | |
| background-color: #00b\9; | |
| } | |
| // * IE10 hack | |
| // * 使用時の注意：プロパティの最後に\9を入れる | |
| @include hack-ie(ie10) { | |
| background-color: #000\9; | |
| } | |
| // * IE11 hack | |
| // * 使用時の注意：セレクタ*::-ms-backdropを追加する必要があるので、$hack-ie11を突っ込む | |
| // * セレクタを継承する&も忘れずに | |
| @include hack-ie(ie11) { | |
| #{$hack-ie11}, & { | |
| background-color: #ccc; | |
| } | |
| } | |
| } | |
| // * 以下のように書いてもOK | |
| // * IE8 hack | |
| @include hack-ie(ie8) { | |
| body { | |
| background-color: #c00; | |
| } | |
| } | |
| // * IE9-10 hack | |
| @include hack-ie(ie9-10) { | |
| body { | |
| background-color: #00b\9; | |
| } | |
| } | |
| // * IE10 hack | |
| @include hack-ie(ie10) { | |
| body { | |
| background-color: #000\9; | |
| } | |
| } | |
| // * IE11 hack | |
| @include hack-ie(ie11) { | |
| #{$hack-ie11}, body { | |
| background-color: #ccc; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment