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

_:_, .selector {
  property: value;
}

_:first, .selector {
  property: value;
}

_>_, .selector {
  *property: value;
}

*+html .selector {
  property: value;
}

*:first-child+html .selector {
  property: value;
}

IE 8

@media \0 {
  .selector {
    property: value;
  }
}

@media \0screen {
  .selector {
    property: value;
  }
}

IE 9

@media (min-width: 0\0) and (min-resolution: .001dpcm) {
  .selector {
    property: value;
  }
}

IE 9+

@media (min-width: 0\0) and (min-resolution: +36dpi) {
  .selector {
    property: value;
  }
}

IE 10

_:-ms-lang(_), .selector {
  property: value\9;
}

IE 10+

_:-ms-input-placeholder, :root .selector {
  property: value;
}

IE 11

_:not(_)::-ms-backdrop, .selector {
  property: value;
}

_::-ms-backdrop, :root .selector {
  property: value;
}

_:-ms-fullscreen, :root .selector {
  property: value;
}

Edge 12

@supports (-ms-accelerator: true) and (not (color: unset)) {
  .selector {
    property: value;
  }
}

Edge 12-18

@supports (-ms-ime-align: auto) {
  .selector {
    property: value;
  }
}

Edge 13

@supports (-ms-accelerator: true) and (color: unset) {
  .selector {
    property: value;
  }
}

Edge 13-18

@supports (-ms-ime-align: auto) and (top: unset) {
  .selector {
    property: value;
  }
}

Edge 14

@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) and (not (-webkit-text-stroke: initial)) {
  .selector {
    property: value;
  }
}

Edge 14-18

@supports (-ms-ime-align: auto) and (not (-ms-accelerator: true)) {
  .selector {
    property: value;
  }
}

Edge 15

@supports (-ms-ime-align: auto) and (-webkit-text-stroke: initial) and (not (position: sticky)) {
  .selector {
    property: value;
  }
}

Edge 15-18

@supports (-ms-ime-align: auto) and (-webkit-text-stroke: initial) {
  .selector {
    property: value;
  }
}

Edge 16

@supports (-ms-ime-align: auto) and (gap: 0) and (not (paint-order: fill)) {
  .selector {
    property: value;
  }
}

Edge 16-18

@supports (-ms-ime-align: auto) and (gap: 0) {
  .selector {
    property: value;
  }
}

Edge 17

@supports (-ms-ime-align: auto) and (paint-order: fill) and (not (-webkit-mask: none)) {
  .selector {
    property: value;
  }
}

Edge 17-18

@supports (-ms-ime-align: auto) and (paint-order: fill) {
  .selector {
    property: value;
  }
}

Edge 18

@supports (-ms-ime-align: auto) and (overscroll-behavior: auto) {
  .selector {
    property: value;
  }
}

Chromium Edge 79+

_:lang(_), _::-ms-value, _::-internal-media-controls-overlay-cast-button, .selector {
  property: value;
}

Chromium Edge 81

@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

@supports selector(::-ms-value) and (-webkit-appearance: auto) and (not (top: revert)) {
  .selector {
    property: value;
  }
}

Chromium Edge 83+

@supports selector(::-ms-value) and selector(::-internal-media-controls-overlay-cast-button) {
  .selector {
    property: value;
  }
}

Firefox

Firefox 1+

@-moz-document url-prefix() {
  .selector {
    property: value;
  }
}

Firefox 25

@supports (background-attachment: local) and (not (image-orientation: from-image)) and (-moz-orient: auto) {
  .selector {
    property: value;
  }
}

Firefox 26

@supports (image-orientation: from-image) and (not (all: unset)) {
  .selector {
    property: value;
  }
}

Firefox 27

@supports (all: unset) and (not (flex-wrap: wrap)) {
  .selector {
    property: value;
  }
}

Firefox 28

@supports (flex-wrap: wrap) and (not (border-image: -moz-element(#_))) {
  .selector {
    property: value;
  }
}

Firefox 29

@supports (border-image: -moz-element(#_)) and (not (background-blend-mode: hue)) {
  .selector {
    property: value;
  }
}

Firefox 30

@supports (background-blend-mode: hue) and (not (paint-order: fill)) {
  .selector {
    property: value;
  }
}

Firefox 31

@supports (paint-order: fill) and (not (box-decoration-break: clone)) {
  .selector {
    property: value;
  }
}

Firefox 32

@supports (box-decoration-break: clone) and (not (color: rebeccapurple)) {
  .selector {
    property: value;
  }
}

Firefox 33

@supports (color: rebeccapurple) and (not (font-kerning: auto)) {
  _:-moz-is-html, .selector {
    property: value;
  }
}

Firefox 34

@supports (font-kerning: auto) and (not (filter: blur(0))) and (-moz-orient: auto) {
  .selector {
    property: value;
  }
}

Firefox 35

@supports (filter: blur(0)) and (not (isolation: auto)) and (-moz-orient: auto) {
  .selector {
    property: value;
  }
}

Firefox 36

@supports (empty-cells: -moz-show-background) and (background: -moz-linear-gradient(red, 1%, tan)) {
  .selector {
    property: value;
  }
}

Firefox 37

@supports (display: contents) and (not (ruby-align: start)) and (-moz-orient: auto) {
  .selector {
    property: value;
  }
}

Firefox 38

@supports (ruby-align: start) and (not (scroll-snap-type: none)) {
  .selector {
    property: value;
  }
}

Firefox 39

@supports (scroll-snap-type: none) and (not (-moz-orient: block)) {
  .selector {
    property: value;
  }
}

Firefox 40

@supports (-moz-orient: block) and (not (padding-inline-end: 0)) {
  .selector {
    property: value;
  }
}

Firefox 43

@supports (hyphens: none) and (not (text-orientation: sideways)) {
  .selector {
    property: value;
  }
}

Firefox 44

@supports (text-orientation: sideways) and (not (align-self: end)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 45

@supports (align-self: end) and (not (align-self: unsafe center)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

@supports (align-self: end) and (not (align-self: normal)) {
  _:-moz-is-html, .selector {
    property: value;
  }
}

Firefox 47

@supports (-moz-orient: block) and (not (color-adjust: exact)) {
  _::backdrop, .selector {
    property: value;
  }
}

Firefox 48

@supports (color-adjust: exact) and (not (color: #0000)) {
  _:-moz-is-html, .selector {
    property: value;
  }
}

Firefox 49

@supports (color: #0000) and (not (border-image-repeat: space)) {
  .selector {
    property: value;
  }
}

Firefox 52

@supports (grid-gap: 0) and (not (caret-color: red)) {
  _:-moz-is-html, .selector {
    property: value;
  }
}

Firefox 53

@supports (caret-color: red) and (not (clip-path: inset(1%))) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 54

@supports (clip-path: inset(1%)) and (not (float: inline-end)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 61

@supports (gap: 0) and (not (shape-margin: 0)) and (not (-ms-ime-align: auto)) {
  .selector {
    property: value;
  }
}

@supports (justify-items: legacy) and (not (font-variation-settings: normal)) {
  _:-moz-is-html, .selector {
    property: value;
  }
}

Firefox 62

@supports (shape-margin: 0) and (not (resize: block)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 63

@supports (resize: block) and (not (scrollbar-color: auto)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

_::-moz-tree-row, _::slotted(_), .selector {
  property: value;
}

Firefox 64

@supports (scrollbar-color: auto) and (not (break-after: always)) {
  .selector {
    property: value;
  }
}

Firefox 65

@supports (break-after: always) and (not (overflow-anchor: auto)) and (-moz-binding: none) {
  .selector {
    property: value;
  }
}

Firefox 66

@supports (overflow-anchor: auto) and (-moz-binding: none) {
  .selector {
    property: value;
  }
}

Firefox 67

@supports (top: revert) and (not (scroll-margin: 0)) {
  .selector {
    property: value;
  }
}

Firefox 68

@supports (scroll-margin: 0) and (not selector(_>_)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 69

@supports selector(_>_) and (not (display: block flex)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

@supports selector(_>_) and (not (text-underline-offset: 0)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 70

@supports (display: block flex) and (not (clip-path: path('M0,0'))) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 71

@supports (clip-path: path('M0,0')) and (not (offset-anchor: auto)) {
  .selector {
    property: value;
  }
}

Firefox 72

@supports (offset-anchor: auto) and (not (overscroll-behavior-block: auto)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 72+

@-moz-document url-prefix() {
  @supports (offset-anchor: auto) {
    .selector {
      property: value;
    }
  }
}

Firefox 73

@supports (overscroll-behavior-block: auto) and (-moz-column-width: 0) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 74

@supports (text-underline-offset: 1%) and (not (top: min(1%, 1%))) {
  .selector {
    property: value;
  }
}

Firefox 75

@supports (top: min(1%, 1%)) and (text-decoration-skip-ink: all) and (-moz-orient: block) and (not (color: canvas)) {
  .selector {
    property: value;
  }
}

Firefox 80

@supports (appearance: none) and (not (overflow: clip)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 81

@supports (overflow: clip) and (not selector(::file-selector-button)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 82

@supports selector(::file-selector-button) and (not (background: conic-gradient(red, tan))) {
  .selector {
    property: value;
  }
}

Firefox 83

@supports (background: conic-gradient(red, tan)) and (not selector(:not(_>_))) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 84

@supports selector(:not(_>_)) and selector(:is(_)) and (not (touch-action: pinch-zoom)) {
  .selector {
    property: value;
  }
}

Firefox 85

@supports (touch-action: pinch-zoom) and (not selector(:autofill)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 86

@supports selector(:autofill) and (caption-side: left) {
  .selector {
    property: value;
  }
}

Firefox 87

@supports (not (caption-side: left)) and (not selector(:user-valid)) {
  .selector {
    property: value;
  }
}

Firefox 88

@supports selector(:user-valid) and (not (background: image-set(url() type("")))) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 89

@supports (background: image-set(url() type(""))) and (not (background: -webkit-image-set(url() 1x))) {
  .selector {
    property: value;
  }
}

Firefox 90

@supports (background: -webkit-image-set(url() 1x)) and (not (tab-size: 0)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 91

@supports (tab-size: 0) and (not (accent-color: red)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Firefox 92

@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+

_:lang(_), _::-internal-media-controls-overlay-cast-button, .selector {
  property: value;
}

Chrome 53, Opera 40

@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

@supports (user-select: none) and (not (touch-action: pan-up)) and (not (scroll-snap-type: none)) {
  .selector {
    property: value;
  }
}

Chrome 55, Opera 42

@supports (touch-action: pan-up) and (not (touch-action: pinch-zoom)) and (-webkit-box-lines: single) {
  .selector {
    property: value;
  }
}

Chrome 56, Opera 43

@supports (touch-action: pinch-zoom) and (not (caret-color: red)) and (not (-ms-ime-align: auto)) {
  .selector {
    property: value;
  }
}

Chrome 57, Opera 44

@supports (caret-color: red) and (not (line-break: auto)) and (not (display: contents)) {
  .selector {
    property: value;
  }
}

Chrome 58, Opera 45

@supports (line-break: auto) and (not (place-self: auto)) and (not (-ms-ime-align: auto)) {
  .selector {
    property: value;
  }
}

Chrome 60+, Opera 47+

_:lang(_), _::-internal-media-controls-overlay-cast-button, _:focus-within, .selector {
  property: value;
}

Chrome 62, Opera 49

@supports (color: #0000) and (not (top: 1q)) and (not (display: contents)) {
  .selector {
    property: value;
  }
}

Chrome 63, Opera 50

@supports (top: 1q) and (not (transform-box: fill-box)) and (not (display: contents)) {
  .selector {
    property: value;
  }
}

Chrome 64, Opera 51

@supports (transform-box: fill-box) and (not (color: rgb(0 0 0))) and (not (display: contents)) {
  .selector {
    property: value;
  }
}

Chrome 65, Opera 52

@supports (color: rgb(0 0 0)) and (not (gap: 0)) and (not (scroll-snap-type: none)) {
  .selector {
    property: value;
  }
}

Chrome 66, Opera 53

@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

@supports (not (overflow: -webkit-paged-x)) and (not (white-space: break-spaces)) and (line-break: auto) {
  .selector {
    property: value;
  }
}

Chrome 76, Opera 63

@supports (white-space: break-spaces) and (not (content: ''/'')) and (not (line-break: anywhere)) {
  .selector {
    property: value;
  }
}

Chrome 77, Opera 64

@supports (overscroll-behavior-block: auto) and (not (opacity: 0%)) and (not (top: min(0%, 0%))) {
  .selector {
    property: value;
  }
}

Chrome 78, Opera 65

@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

@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

@supports (line-break: anywhere) and (not (color-scheme: dark)) and (not (image-orientation: none)) {
  .selector {
    property: value;
  }
}

Chrome 81, Chromium Edge 81, Opera 68

@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

@supports (-webkit-appearance: auto) and (not (top: revert)) {
  .selector {
    property: value;
  }
}

Chrome 83+, Chromium Edge 83+, Opera 69+

@supports selector(::-internal-media-controls-overlay-cast-button) {
  .selector {
    property: value;
  }
}

Chrome 84, Chromium Edge 84, Opera 70

@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

@supports (counter-set: none) and (not selector(::marker)) and (appearance: auto) {
  .selector {
    property: value;
  }
}

Chrome 86, Chromium Edge 86, Opera 72

@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

@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

@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

@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

@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

@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+

@supports (-webkit-marquee-speed: 0) and (paint-order: fill) {
  .selector {
    property: value;
  }
}

Safari 11+, iOS Safari 11+

@supports (-webkit-marquee-speed: 0) and (font-optical-sizing: none) {
  .selector {
    property: value;
  }
}

Safari 13+, iOS Safari 13+

@supports (-webkit-marquee-speed: 0) and (paint-order: fill) and (white-space: break-spaces) {
  .selector {
    property: value;
  }
}

Safari 14+, iOS Safari 14+

@supports (-webkit-marquee-speed: 0) and (paint-order: fill) {
  _:is(_), .selector {
    property: value;
  }
}