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

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

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

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

*+html .selector {
  property: value;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@supports (color-scheme: dark) and (image-orientation: none) and (not (-webkit-appearance: auto)) and (not (top: revert)) {
  _::-ms-value, .selector {
    property: value;
  }
}

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

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

Firefox

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@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;
  }
}

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

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

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

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

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

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

@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;
  }
}

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

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

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

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

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

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

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

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

@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;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@supports (accent-color: red) and (not (font-synthesis: small-caps)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}

Chrome, Chromium Edge, Opera

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

@supports (filter: blur(0)) and (not (user-select: none)) and (not (justify-self: end)) and (not (-ms-ime-align: auto)) {
  .selector {
    property: value;
  }
}

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

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

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

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

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

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

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

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

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

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

@supports (gap: 0) and (-webkit-line-clamp: 1%) and (not (scroll-snap-type: none)) and (not (-ms-ime-align: auto)) {
  .selector {
    property: value;
  }
}

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

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

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

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

@supports (top: min(0%, 0%)) and (not (line-break: anywhere)) and (white-space: break-spaces) {
  .selector {
    property: value;
  }
}

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

@supports (color-scheme: dark) and (image-orientation: none) and (not (-webkit-appearance: auto)) and (not (top: revert)) {
  .selector {
    property: value;
  }
}

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

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

@supports (appearance: auto) and (top: revert) and (-webkit-column-width: 0) and (not (counter-set: none)) {
  .selector {
    property: value;
  }
}

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

@supports selector(::marker) and (not (text-underline-offset: 0)) and (column-width: 0) and (not (-moz-column-width: 0)) {
  .selector {
    property: value;
  }
}

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

@supports selector(:not(_>_)) and (not selector(::target-text)) and selector(::-internal-media-controls-overlay-cast-button) {
  .selector {
    property: value;
  }
}

@supports selector(::target-text) and (not (overflow: clip)) and selector(::-internal-media-controls-overlay-cast-button) {
  .selector {
    property: value;
  }
}

@supports (accent-color: red) and (not (scrollbar-gutter: auto)) and selector(::-internal-media-controls-overlay-cast-button) {
  .selector {
    property: value;
  }
}

@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

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

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

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

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