https://github.com/takamoso/canidetect
A collection of css hacks and feature detection.
https://github.com/takamoso/canidetect
css css-hack css-hacks feature-detection javascript
Last synced: 12 months ago
JSON representation
A collection of css hacks and feature detection.
- Host: GitHub
- URL: https://github.com/takamoso/canidetect
- Owner: takamoso
- License: mit
- Created: 2021-01-22T15:09:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-23T21:45:25.000Z (over 2 years ago)
- Last Synced: 2025-04-14T20:42:00.296Z (about 1 year ago)
- Topics: css, css-hack, css-hacks, feature-detection, javascript
- Language: JavaScript
- Homepage:
- Size: 134 KB
- Stars: 20
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Hacks
## CLI
### `npm run data` command
```
Command:
$ npm run data -- [OPTIONS]
Options:
--mq, --media-query
--pe, --pseudo-element
--pc, --pseudo-class
--p, --property
--v, --value
--vp, --vendor-prefix
Examples:
$ npm run data -- --pseudo-class is matches
$ npm run data -- --pc is matches '"-webkit-any(_)"'
```
## Browsers
### Internet Explorer, Edge
IE 7
```css
_:_, .selector {
property: value;
}
```
```css
_:first, .selector {
property: value;
}
```
```css
_>_, .selector {
*property: value;
}
```
```css
*+html .selector {
property: value;
}
```
```css
*:first-child+html .selector {
property: value;
}
```
IE 8
```css
@media \0 {
.selector {
property: value;
}
}
```
```css
@media \0screen {
.selector {
property: value;
}
}
```
IE 9
```css
@media (min-width: 0\0) and (min-resolution: .001dpcm) {
.selector {
property: value;
}
}
```
IE 9+
```css
@media (min-width: 0\0) and (min-resolution: +36dpi) {
.selector {
property: value;
}
}
```
IE 10
```css
_:-ms-lang(_), .selector {
property: value\9;
}
```
IE 10+
```css
_:-ms-input-placeholder, :root .selector {
property: value;
}
```
IE 11
```css
_:not(_)::-ms-backdrop, .selector {
property: value;
}
```
```css
_::-ms-backdrop, :root .selector {
property: value;
}
```
```css
_:-ms-fullscreen, :root .selector {
property: value;
}
```
Edge 12
```css
@supports (-ms-accelerator: true) and (not (color: unset)) {
.selector {
property: value;
}
}
```
Edge 12-18
```css
@supports (-ms-ime-align: auto) {
.selector {
property: value;
}
}
```
Edge 13
```css
@supports (-ms-accelerator: true) and (color: unset) {
.selector {
property: value;
}
}
```
Edge 13-18
```css
@supports (-ms-ime-align: auto) and (top: unset) {
.selector {
property: value;
}
}
```
Edge 14
```css
@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) and (not (-webkit-text-stroke: initial)) {
.selector {
property: value;
}
}
```
Edge 14-18
```css
@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) {
.selector {
property: value;
}
}
```
Edge 15
```css
@supports (-ms-ime-align: auto) and (-webkit-text-stroke: initial) and (not (position: sticky)) {
.selector {
property: value;
}
}
```
Edge 15-18
```css
@supports (-ms-ime-align: auto) and (-webkit-text-stroke: initial) {
.selector {
property: value;
}
}
```
Edge 16
```css
@supports (-ms-ime-align: auto) and (gap: 0) and (not (paint-order: fill)) {
.selector {
property: value;
}
}
```
Edge 16-18
```css
@supports (-ms-ime-align: auto) and (gap: 0) {
.selector {
property: value;
}
}
```
Edge 17
```css
@supports (-ms-ime-align: auto) and (paint-order: fill) and (not (-webkit-mask: none)) {
.selector {
property: value;
}
}
```
Edge 17-18
```css
@supports (-ms-ime-align: auto) and (paint-order: fill) {
.selector {
property: value;
}
}
```
Edge 18
```css
@supports (-ms-ime-align: auto) and (overscroll-behavior: auto) {
.selector {
property: value;
}
}
```
Chromium Edge 79+
```css
_:lang(_), _::-ms-value, _::-internal-media-controls-overlay-cast-button, .selector {
property: value;
}
```
Chromium Edge 81
```css
@supports (color-scheme: dark) and (image-orientation: none) and (not (-webkit-appearance: auto)) and (not (top: revert)) {
_::-ms-value, .selector {
property: value;
}
}
```
Chromium Edge 83
```css
@supports selector(::-ms-value) and (-webkit-appearance: auto) and (not (top: revert)) {
.selector {
property: value;
}
}
```
Chromium Edge 83+
```css
@supports selector(::-ms-value) and selector(::-internal-media-controls-overlay-cast-button) {
.selector {
property: value;
}
}
```
### Firefox
Firefox 1+
```css
@-moz-document url-prefix() {
.selector {
property: value;
}
}
```
Firefox 25
```css
@supports (background-attachment: local) and (not (image-orientation: from-image)) and (-moz-orient: auto) {
.selector {
property: value;
}
}
```
Firefox 26
```css
@supports (image-orientation: from-image) and (not (all: unset)) {
.selector {
property: value;
}
}
```
Firefox 27
```css
@supports (all: unset) and (not (flex-wrap: wrap)) {
.selector {
property: value;
}
}
```
Firefox 28
```css
@supports (flex-wrap: wrap) and (not (border-image: -moz-element(#_))) {
.selector {
property: value;
}
}
```
Firefox 29
```css
@supports (border-image: -moz-element(#_)) and (not (background-blend-mode: hue)) {
.selector {
property: value;
}
}
```
Firefox 30
```css
@supports (background-blend-mode: hue) and (not (paint-order: fill)) {
.selector {
property: value;
}
}
```
Firefox 31
```css
@supports (paint-order: fill) and (not (box-decoration-break: clone)) {
.selector {
property: value;
}
}
```
Firefox 32
```css
@supports (box-decoration-break: clone) and (not (color: rebeccapurple)) {
.selector {
property: value;
}
}
```
Firefox 33
```css
@supports (color: rebeccapurple) and (not (font-kerning: auto)) {
_:-moz-is-html, .selector {
property: value;
}
}
```
Firefox 34
```css
@supports (font-kerning: auto) and (not (filter: blur(0))) and (-moz-orient: auto) {
.selector {
property: value;
}
}
```
Firefox 35
```css
@supports (filter: blur(0)) and (not (isolation: auto)) and (-moz-orient: auto) {
.selector {
property: value;
}
}
```
Firefox 36
```css
@supports (empty-cells: -moz-show-background) and (background: -moz-linear-gradient(red, 1%, tan)) {
.selector {
property: value;
}
}
```
Firefox 37
```css
@supports (display: contents) and (not (ruby-align: start)) and (-moz-orient: auto) {
.selector {
property: value;
}
}
```
Firefox 38
```css
@supports (ruby-align: start) and (not (scroll-snap-type: none)) {
.selector {
property: value;
}
}
```
Firefox 39
```css
@supports (scroll-snap-type: none) and (not (-moz-orient: block)) {
.selector {
property: value;
}
}
```
Firefox 40
```css
@supports (-moz-orient: block) and (not (padding-inline-end: 0)) {
.selector {
property: value;
}
}
```
Firefox 43
```css
@supports (hyphens: none) and (not (text-orientation: sideways)) {
.selector {
property: value;
}
}
```
Firefox 44
```css
@supports (text-orientation: sideways) and (not (align-self: end)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 45
```css
@supports (align-self: end) and (not (align-self: unsafe center)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
```css
@supports (align-self: end) and (not (align-self: normal)) {
_:-moz-is-html, .selector {
property: value;
}
}
```
Firefox 47
```css
@supports (-moz-orient: block) and (not (color-adjust: exact)) {
_::backdrop, .selector {
property: value;
}
}
```
Firefox 48
```css
@supports (color-adjust: exact) and (not (color: #0000)) {
_:-moz-is-html, .selector {
property: value;
}
}
```
Firefox 49
```css
@supports (color: #0000) and (not (border-image-repeat: space)) {
.selector {
property: value;
}
}
```
Firefox 52
```css
@supports (grid-gap: 0) and (not (caret-color: red)) {
_:-moz-is-html, .selector {
property: value;
}
}
```
Firefox 53
```css
@supports (caret-color: red) and (not (clip-path: inset(1%))) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 54
```css
@supports (clip-path: inset(1%)) and (not (float: inline-end)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 61
```css
@supports (gap: 0) and (not (shape-margin: 0)) and (not (-ms-ime-align: auto)) {
.selector {
property: value;
}
}
```
```css
@supports (justify-items: legacy) and (not (font-variation-settings: normal)) {
_:-moz-is-html, .selector {
property: value;
}
}
```
Firefox 62
```css
@supports (shape-margin: 0) and (not (resize: block)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 63
```css
@supports (resize: block) and (not (scrollbar-color: auto)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
```css
_::-moz-tree-row, _::slotted(_), .selector {
property: value;
}
```
Firefox 64
```css
@supports (scrollbar-color: auto) and (not (break-after: always)) {
.selector {
property: value;
}
}
```
Firefox 65
```css
@supports (break-after: always) and (not (overflow-anchor: auto)) and (-moz-binding: none) {
.selector {
property: value;
}
}
```
Firefox 66
```css
@supports (overflow-anchor: auto) and (-moz-binding: none) {
.selector {
property: value;
}
}
```
Firefox 67
```css
@supports (top: revert) and (not (scroll-margin: 0)) {
.selector {
property: value;
}
}
```
Firefox 68
```css
@supports (scroll-margin: 0) and (not selector(_>_)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 69
```css
@supports selector(_>_) and (not (display: block flex)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
```css
@supports selector(_>_) and (not (text-underline-offset: 0)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 70
```css
@supports (display: block flex) and (not (clip-path: path('M0,0'))) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 71
```css
@supports (clip-path: path('M0,0')) and (not (offset-anchor: auto)) {
.selector {
property: value;
}
}
```
Firefox 72
```css
@supports (offset-anchor: auto) and (not (overscroll-behavior-block: auto)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 72+
```css
@-moz-document url-prefix() {
@supports (offset-anchor: auto) {
.selector {
property: value;
}
}
}
```
Firefox 73
```css
@supports (overscroll-behavior-block: auto) and (-moz-column-width: 0) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 74
```css
@supports (text-underline-offset: 1%) and (not (top: min(1%, 1%))) {
.selector {
property: value;
}
}
```
Firefox 75
```css
@supports (top: min(1%, 1%)) and (text-decoration-skip-ink: all) and (-moz-orient: block) and (not (color: canvas)) {
.selector {
property: value;
}
}
```
Firefox 80
```css
@supports (appearance: none) and (not (overflow: clip)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 81
```css
@supports (overflow: clip) and (not selector(::file-selector-button)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 82
```css
@supports selector(::file-selector-button) and (not (background: conic-gradient(red, tan))) {
.selector {
property: value;
}
}
```
Firefox 83
```css
@supports (background: conic-gradient(red, tan)) and (not selector(:not(_>_))) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 84
```css
@supports selector(:not(_>_)) and selector(:is(_)) and (not (touch-action: pinch-zoom)) {
.selector {
property: value;
}
}
```
Firefox 85
```css
@supports (touch-action: pinch-zoom) and (not selector(:autofill)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 86
```css
@supports selector(:autofill) and (caption-side: left) {
.selector {
property: value;
}
}
```
Firefox 87
```css
@supports (not (caption-side: left)) and (not selector(:user-valid)) {
.selector {
property: value;
}
}
```
Firefox 88
```css
@supports selector(:user-valid) and (not (background: image-set(url() type("")))) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 89
```css
@supports (background: image-set(url() type(""))) and (not (background: -webkit-image-set(url() 1x))) {
.selector {
property: value;
}
}
```
Firefox 90
```css
@supports (background: -webkit-image-set(url() 1x)) and (not (tab-size: 0)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 91
```css
@supports (tab-size: 0) and (not (accent-color: red)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
Firefox 92
```css
@supports (accent-color: red) and (not (font-synthesis: small-caps)) and (-moz-orient: block) {
.selector {
property: value;
}
}
```
### Chrome, Chromium Edge, Opera
Chrome 39+, Chromium Edge 79+, Opera 26+
```css
_:lang(_), _::-internal-media-controls-overlay-cast-button, .selector {
property: value;
}
```
Chrome 53, Opera 40
```css
@supports (filter: blur(0)) and (not (user-select: none)) and (not (justify-self: end)) and (not (-ms-ime-align: auto)) {
.selector {
property: value;
}
}
```
Chrome 54, Opera 41
```css
@supports (user-select: none) and (not (touch-action: pan-up)) and (not (scroll-snap-type: none)) {
.selector {
property: value;
}
}
```
Chrome 55, Opera 42
```css
@supports (touch-action: pan-up) and (not (touch-action: pinch-zoom)) and (-webkit-box-lines: single) {
.selector {
property: value;
}
}
```
Chrome 56, Opera 43
```css
@supports (touch-action: pinch-zoom) and (not (caret-color: red)) and (not (-ms-ime-align: auto)) {
.selector {
property: value;
}
}
```
Chrome 57, Opera 44
```css
@supports (caret-color: red) and (not (line-break: auto)) and (not (display: contents)) {
.selector {
property: value;
}
}
```
Chrome 58, Opera 45
```css
@supports (line-break: auto) and (not (place-self: auto)) and (not (-ms-ime-align: auto)) {
.selector {
property: value;
}
}
```
Chrome 60+, Opera 47+
```css
_:lang(_), _::-internal-media-controls-overlay-cast-button, _:focus-within, .selector {
property: value;
}
```
Chrome 62, Opera 49
```css
@supports (color: #0000) and (not (top: 1q)) and (not (display: contents)) {
.selector {
property: value;
}
}
```
Chrome 63, Opera 50
```css
@supports (top: 1q) and (not (transform-box: fill-box)) and (not (display: contents)) {
.selector {
property: value;
}
}
```
Chrome 64, Opera 51
```css
@supports (transform-box: fill-box) and (not (color: rgb(0 0 0))) and (not (display: contents)) {
.selector {
property: value;
}
}
```
Chrome 65, Opera 52
```css
@supports (color: rgb(0 0 0)) and (not (gap: 0)) and (not (scroll-snap-type: none)) {
.selector {
property: value;
}
}
```
Chrome 66, Opera 53
```css
@supports (gap: 0) and (-webkit-line-clamp: 1%) and (not (scroll-snap-type: none)) and (not (-ms-ime-align: auto)) {
.selector {
property: value;
}
}
```
Chrome 75, Opera 62
```css
@supports (not (overflow: -webkit-paged-x)) and (not (white-space: break-spaces)) and (line-break: auto) {
.selector {
property: value;
}
}
```
Chrome 76, Opera 63
```css
@supports (white-space: break-spaces) and (not (content: ''/'')) and (not (line-break: anywhere)) {
.selector {
property: value;
}
}
```
Chrome 77, Opera 64
```css
@supports (overscroll-behavior-block: auto) and (not (opacity: 0%)) and (not (top: min(0%, 0%))) {
.selector {
property: value;
}
}
```
Chrome 78, Opera 65
```css
@supports (opacity: 0%) and (not (top: min(0%, 0%))) and (not (text-underline-offset: 0)) {
.selector {
property: value;
}
}
```
Chrome 79, Chromium Edge 79, Opera 66
```css
@supports (top: min(0%, 0%)) and (not (line-break: anywhere)) and (white-space: break-spaces) {
.selector {
property: value;
}
}
```
Chrome 80, Chromium Edge 80, Opera 67
```css
@supports (line-break: anywhere) and (not (color-scheme: dark)) and (not (image-orientation: none)) {
.selector {
property: value;
}
}
```
Chrome 81, Chromium Edge 81, Opera 68
```css
@supports (color-scheme: dark) and (image-orientation: none) and (not (-webkit-appearance: auto)) and (not (top: revert)) {
.selector {
property: value;
}
}
```
Chrome 83, Chromium Edge 83, Opera 69
```css
@supports (-webkit-appearance: auto) and (not (top: revert)) {
.selector {
property: value;
}
}
```
Chrome 83+, Chromium Edge 83+, Opera 69+
```css
@supports selector(::-internal-media-controls-overlay-cast-button) {
.selector {
property: value;
}
}
```
Chrome 84, Chromium Edge 84, Opera 70
```css
@supports (appearance: auto) and (top: revert) and (-webkit-column-width: 0) and (not (counter-set: none)) {
.selector {
property: value;
}
}
```
Chrome 85, Chromium Edge 85, Opera 71
```css
@supports (counter-set: none) and (not selector(::marker)) and (appearance: auto) {
.selector {
property: value;
}
}
```
Chrome 86, Chromium Edge 86, Opera 72
```css
@supports selector(::marker) and (not (text-underline-offset: 0)) and (column-width: 0) and (not (-moz-column-width: 0)) {
.selector {
property: value;
}
}
```
Chrome 87, Chromium Edge 87, Opera 73
```css
@supports (text-underline-offset: 0) and (not (clip-path: path('M0,0'))) and (not selector(:not(_>_))) and (not (-moz-orient: block)) {
.selector {
property: value;
}
}
```
Chrome 88, Chromium Edge 88, Opera 74
```css
@supports selector(:not(_>_)) and (not selector(::target-text)) and selector(::-internal-media-controls-overlay-cast-button) {
.selector {
property: value;
}
}
```
Chrome 89, Chromium Edge 89, Opera 75
```css
@supports selector(::target-text) and (not (overflow: clip)) and selector(::-internal-media-controls-overlay-cast-button) {
.selector {
property: value;
}
}
```
Chrome 93, Chromium Edge 93, Opera 79
```css
@supports (accent-color: red) and (not (scrollbar-gutter: auto)) and selector(::-internal-media-controls-overlay-cast-button) {
.selector {
property: value;
}
}
```
Chrome 94, Chromium Edge 94, Opera 80
```css
@supports (scrollbar-gutter: auto) and (not (contain-intrinsic-block-size: 0)) and selector(::-internal-media-controls-overlay-cast-button) {
.selector {
property: value;
}
}
```
### Safari, iOS Safari
Safari 9+, iOS Safari 9+
```css
@supports (-webkit-marquee-speed: 0) and (paint-order: fill) {
.selector {
property: value;
}
}
```
Safari 11+, iOS Safari 11+
```css
@supports (-webkit-marquee-speed: 0) and (font-optical-sizing: none) {
.selector {
property: value;
}
}
```
Safari 13+, iOS Safari 13+
```css
@supports (-webkit-marquee-speed: 0) and (paint-order: fill) and (white-space: break-spaces) {
.selector {
property: value;
}
}
```
Safari 14+, iOS Safari 14+
```css
@supports (-webkit-marquee-speed: 0) and (paint-order: fill) {
_:is(_), .selector {
property: value;
}
}
```