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


[css hacks for IE11](http://qiita.com/feo52/items/932f57f9760d2b743d39) の続きです。
ブラウザ全般も検討しました。

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

[`demo`](https://bl.ocks.org/feo52/raw/9b0658d254b0ad2333d6907e97267e5f/)
[`code`](https://gist.github.com/feo52/9b0658d254b0ad2333d6907e97267e5f/)

##css

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

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

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

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

##css hack

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

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

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

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

```css
/* 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 {}
```

```css
/* 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 ( @&#x200b;supports )

```css
/* 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 (おまけ)

```js
/* 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();
}
```

##Reference

https://drafts.csswg.org/
https://drafts.csswg.org/selectors/
https://drafts.csswg.org/selectors/#compat
https://drafts.csswg.org/selectors/#changes
https://drafts.csswg.org/selectors/#overview
https://drafts.csswg.org/css-pseudo-4/
https://drafts.csswg.org/css-pseudo-4/#changes
https://drafts.csswg.org/css-scoping/
https://drafts.csswg.org/css-scoping/#changes
https://drafts.csswg.org/css-shadow-parts/

https://www.w3.org/TR/
https://www.w3.org/TR/selectors/
https://www.w3.org/TR/css-pseudo-4/
https://www.w3.org/TR/css-scoping/
https://www.w3.org/TR/css-shadow-parts/
https://www.w3.org/TR/webvtt/

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/Microsoft_Extensions
https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions

https://developer.mozilla.org/en-US/docs/Web/CSS/:is
https://developer.mozilla.org/en-US/docs/Web/CSS/:where
https://developer.mozilla.org/en-US/docs/Web/CSS/all
https://developer.mozilla.org/en-US/docs/Web/CSS/unset
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()
https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
https://developer.mozilla.org/en-US/docs/Web/CSS/image/paint()
https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()
https://developer.mozilla.org/en-US/docs/Web/CSS/hanging-punctuation
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-focus
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

https://caniuse.com/?search=-ms-
https://caniuse.com/?search=-webkit-
https://caniuse.com/?search=-moz-

https://caniuse.com/?search=is
https://caniuse.com/?search=where
https://caniuse.com/?search=all
https://caniuse.com/?search=unset
https://caniuse.com/?search=aspect-ratio
https://caniuse.com/?search=host-context
https://caniuse.com/?search=matches.CSS
https://caniuse.com/?search=moz-any
https://caniuse.com/?search=ime-mode
https://caniuse.com/?search=zoom
https://caniuse.com/?search=paint
https://caniuse.com/?search=color.function
https://caniuse.com/?search=hanging-punctuation
https://caniuse.com/?search=webkit-touch-callout
https://caniuse.com/?search=moz-user-focus
https://caniuse.com/?search=supports
https://caniuse.com/?search=supports.selector
https://caniuse.com/?search=CSS.supports

https://chromestatus.com/features#internal-
https://chromestatus.com/feature/5661431349379072
https://chromestatus.com/feature/5714245488476160
https://chromestatus.com/feature/5734009183141888
https://chromestatus.com/feature/5778154275733504

https://docs.microsoft.com/en-us/previous-versions/hh771830(v=vs.85)
https://docs.microsoft.com/en-us/previous-versions/hh771863(v=vs.85)
https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/ceff5f67-9c37-4c7b-b39c-93514df582a0
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust
https://drafts.csswg.org/mediaqueries-5/
https://drafts.csswg.org/mediaqueries-5/#prefers-contrast
https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
https://drafts.csswg.org/mediaqueries-5/#forced-colors
https://drafts.csswg.org/css-color-adjust/
https://drafts.csswg.org/css-color-adjust/#forced-color-adjust-prop

https://web.archive.org/web/20200507195249/developer.mozilla.org/en-US/docs/Web/CSS/::-ms-clear
https://web.archive.org/web/20200506214616/developer.mozilla.org/en-US/docs/Web/CSS/::-ms-reveal
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security
https://drafts.csswg.org/css-ui/#input-security

https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/
https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-css21e/3dd1a98c-94f7-4545-9e19-c647ce67431d
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

https://stateofcss.com/
https://2019.stateofcss.com/
https://2020.stateofcss.com/
https://2021.stateofcss.com/

https://google.com/chrome/canary/
https://microsoftedgeinsider.com/download/
https://mozilla.org/firefox/nightly/
https://webkit.org/downloads/
https://webkit.org/blog/

https://chromestatus.com/roadmap
https://chromestatus.com/features/schedule
https://chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/renderer/platform/RuntimeEnabledFeatures.md
https://docs.microsoft.com/en-us/deployedge/microsoft-edge-release-schedule
https://docs.microsoft.com/en-us/deployedge/microsoft-edge-relnote-beta-channel
https://docs.microsoft.com/en-us/deployedge/microsoft-edge-relnote-stable-channel
https://developer.apple.com/documentation/safari-release-notes
https://developer.apple.com/safari/technology-preview/release-notes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Experimental_features
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases
https://wiki.mozilla.org/Release_Management/Calendar

https://github.com/WebKit/webkit
https://github.com/chromium/chromium
https://github.com/mozilla/gecko-dev
[](findstr /s "\-ms\- \-moz\- \-webkit\-" *.c *.cc *.cpp *.cxx *.h *.hh *.hpp *.hxx *.rs)

https://google.com/search?q=console.log(getComputedStyle(document.body))
https://amachang.hatenablog.com/entry/20070611/1181554170
https://cssroller.com/firefox-css-property/