CSSハック Cascading Style Sheets Hack
CSSで使用するハックです。
調べたものを少しまとめてみました。
赤色部分がハック部分になります。
一部のハックは未確認なので、使用の際は自己責任でお願いします。
- ※ ¥は円マーク(またはバックスラッシュ)です。
Edge15以上適用
@supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) {
...
}
Edge14以上適用
@supports (-ms-ime-align:auto) and (not (-ms-accelerator:true)) {
...
}
Edge12以上適用
@supports (-ms-ime-align:auto) {
...
}
Edge12~Edge13のみ適用
@supports (-ms-accelerator:true) {
...
}
IE11のみ適用
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
*::-ms-backdrop, セレクタ {
...
}
}
または
_:-ms-lang(x)::-ms-backdrop, セレクタ {
...
}
IE10、IE11適用
@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
セレクタ {
/*「IE9のみ適用」の:not(:target)のパターンとあわせて使う場合!importantが必要 */
プロパティ:値 !important;
}
}
IE9のみ適用
:root セレクタ {
プロパティ:値¥0/;
}
または
_:-ms-lang(x), セレクタ {
プロパティ:値¥0/;
}
または
@media screen and (min-width:0\0) and (min-resolution:.001dpcm) {
セレクタ {
...
}
}
IE9~IE10、Edgeのみ適用
セレクタ:not(:target) {
プロパティ:値¥9;
}
IE8のみ適用
html>/**/body セレクタ {
プロパティ/*¥**/:値¥9;
}
IE7のみ適用
*:first-child+html セレクタ {
...
}
または
*+html セレクタ {
...
}
IE6~IE8のみ適用
セレクタ {
プロパティ:値¥9;
}
IE6~IE7のみ適用
セレクタ {
*プロパティ:値;
}
Windows IE4~IE6のみ適用 1(アンダースコアハック)
セレクタ {
_プロパティ:値;
}
Windows IE4~IE6のみ適用 2 (スターハック + Hollyハック)
* html セレクタ {
/*¥*/
プロパティ:値;
/**/
}
IE6以外適用
html>body セレクタ {
...
}
IE6を除外
セレクタ {
プロパティ/**/:値;
}
IE6~IE8を除外
セレクタ {
プロパティ:値; /* WinIE6~8用 */
}
html:not(:target) セレクタ {
プロパティ:値;
}
Windows IE4~IE6、Mac IE4~IE5のみ適用 (スターハック)
* html セレクタ {
プロパティ:値;
}
Windows IE5.5以下のみ適用
セレクタ {
プロパティ:値; /* WinIE5.5用 */
voice-family:"¥"}¥"";
voice-family:inherit;
プロパティ:値; /* WinIE5.5以外 */
}
Mac IE5のみ適用
/*¥*//*/
セレクタ {
...
}
/**/
Mac IE5以外適用 (Hollyハック)
セレクタ {
color:#ff0000; /* MacIE5用 */
/*¥*/
プロパティ:値; /* MacIE5以外に適用 */
/**/
}
Safari 9のみ適用
@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
...
}
Safari 9(iOS)のみ適用
@supports (-webkit-text-size-adjust:none) and (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
...
}
Safari 9以上適用
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
...
}
Safari 3のみ適用
html:¥66irst-child セレクタ {
...
}
Safari 2以降適用
html[xmlns*=""] body:last-child セレクタ {
...
}