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 セレクタ {
  ...
}