css hacks 2022 ( IE11 / Edge / Chrome / Safari / Firefox ) #CSS

css hacks for IE11 の続きです。
ブラウザ全般も検討しました。

2022年01月01日時点のhackです。
~~2020年01月20日時点のhackです。~~
~~2019年06月01日時点のhackです。~~
~~2018年01月01日時点のhackです。~~
~~2017年07月30日時点のhackです。~~
ご利用は自己責任の上でお願い致します。

demo
code

css

/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */
:not(:is(*)), .selector {}

/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */
:not(:where(*)), .selector {}

/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */
@supports selector(:is(*)) {
  .selector {}
}
/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */
@supports selector(:where(*)) {
  .selector {}
}

/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に古いバージョンでも動作) */
@supports (all:unset) {
  .selector {}
}
/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */
@supports (aspect-ratio:1) {
  .selector {}
}

css hack

/* Edge(Chromium) & Chrome & Safari & Firefox */
_:lang(x)::-webkit-, .selector {}

/* Edge(EdgeHTML) & IE11 & IE10 */
_:-ms-lang(x), .selector {}

/* Edge(EdgeHTML) */
_:-ms-lang(x)::backdrop, .selector {}

/* IE11 */
_:-ms-lang(x)::-ms-backdrop, .selector {}

/* Edge(Chromium) */
_:host-context(x)::-ms-clear, .selector {}

/* Edge(Chromium) */
_:host-context(x)::-ms-reveal, .selector {}

/* Edge(Chromium) & Chrome */
_:host-context(x), .selector {}

/* Safari */
_:matches(x), .selector {}

/* Firefox */
_:-moz-any(x), .selector {}

/* Edge(Chromium) */
_:lang(x)+_:-internal-autofill-previewed::-ms-clear, .selector {}

/* Edge(Chromium) */
_:lang(x)+_:-internal-autofill-previewed::-ms-reveal, .selector {}

/* Edge(Chromium) & Chrome */
_:lang(x)+_:-internal-autofill-previewed, .selector {}

/* Safari */
_:lang(x)+_:-webkit-full-screen-document, .selector {}

/* Firefox */
_:lang(x)::-moz-placeholder, .selector {}

css hack ( @supports )

/* Edge(EdgeHTML) */
@supports (ime-mode:auto) and (zoom:1) {
  .selector {}
}
/* Edge(Chromium) & Chrome */
@supports (background:paint(id))       {
  .selector {}
}
/* Edge(Chromium) */
@supports (background:paint(id)) and      (-ms-high-contrast-adjust:none)  {
  .selector {}
}
/* Chrome */
@supports (background:paint(id)) and (not (-ms-high-contrast-adjust:none)) {
  .selector {}
}
/* Safari */
@supports (background:color(display-p3 0 0 0)) {
  .selector {}
}
/* Safari */
@supports (hanging-punctuation:none)           {
  .selector {}
}
/* Safari on iOS */
@supports (-webkit-touch-callout:none)         {
  .selector {}
}
/* Firefox */
@supports (-moz-user-focus:none)               {
  .selector {}
}

JavaScript (おまけ)

/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に古いバージョンでも動作) */
if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined") && (CSS.supports("all:unset"))) {
  hoge();
}
/* Edge(Chromium) & Chrome & Safari & Firefox */ /* (比較的に新しいバージョンのみ動作) */
if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined") && (CSS.supports("aspect-ratio:1"))) {
  hoge();
}