canidetect

KO | EN

gitlite — search

#javascript #python #react #ai #typescript #golang #rust #linux #macos #windows #cli #awesome-list #ios #open-source

(★ 20)

A collection of css hacks and feature detection.

canidetect 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

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

</details>

<details><summary>Chromium Edge 79+</summary>

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

</details>

<details><summary>Chromium Edge 81</summary>

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

</details>

<details><summary>Chromium Edge 83</summary>

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

</details>

<details><summary>Chromium Edge 83+</summary>

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

</details>

### Firefox

<details><summary>Firefox 1+</summary>

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

</details>

<details><summary>Firefox 25</summary>

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

</details>

<details><summary>Firefox 26</summary>

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

</details>

<details><summary>Firefox 27</summary>

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

</details>

<details><summary>Firefox 28</summary>

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

</details>

<details><summary>Firefox 29</summary>

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

</details>

<details><summary>Firefox 30</summary>

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

</details>

<details><summary>Firefox 31</summary>

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

</details>

<details><summary>Firefox 32</summary>

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

</details>

<details><summary>Firefox 33</summary>

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

</details>

<details><summary>Firefox 34</summary>

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

</details>

<details><summary>Firefox 35</summary>

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

</details>

<details><summary>Firefox 36</summary>

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

</details>

<details><summary>Firefox 37</summary>

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

</details>

<details><summary>Firefox 38</summary>

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

</details>

<details><summary>Firefox 39</summary>

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

</details>

<details><summary>Firefox 40</summary>

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

</details>

<details><summary>Firefox 43</summary>

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

</details>

<details><summary>Firefox 44</summary>

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

</details>

<details><summary>Firefox 45</summary>

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

</details>

<details><summary>Firefox 47</summary>

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

</details>

<details><summary>Firefox 48</summary>

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

</details>

<details><summary>Firefox 49</summary>

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

</details>

<details><summary>Firefox 52</summary>

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

</details>

<details><summary>Firefox 53</summary>

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

</details>

<details><summary>Firefox 54</summary>

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

</details>

<details><summary>Firefox 61</summary>

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

</details>

<details><summary>Firefox 62</summary>

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

</details>

<details><summary>Firefox 63</summary>

```css
@supports (resize: block) and (not (scrollbar-color: auto)) and (-moz-orient: block) {
  .selector {
    property: value;
  }
}
```
```css
_::-moz-tree-row, _::slotted(_), .selector {
  property: value;
}
```

</details>

<details><summary>Firefox 64</summary>

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

</details>

<details><summary>Firefox 65</summary>

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

</details>

<details><summary>Firefox 66</summary>

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

</details>

<details><summary>Firefox 67</summary>

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

</details>

<details><summary>Firefox 68</summary>

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

</details>

<details><summary>Firefox 69</summary>

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

</details>

<details><summary>Firefox 70</summary>

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

</details>

<details><summary>Firefox 71</summary>

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

</details>

<details><summary>Firefox 72</summary>

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

</details>

<details><summary>Firefox 72+</summary>

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

</details>

<details><summary>Firefox 73</summary>

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

</details>

<details><summary>Firefox 74</summary>

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

</details>

<details><summary>Firefox 75</summary>

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

</details>

<details><summary>Firefox 80</summary>

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

</details>

<details><summary>Firefox 81</summary>

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

</details>

<details><summary>Firefox 82</summary>

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

</details>

<details><summary>Firefox 83</summary>

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

</details>

<details><summary>Firefox 84</summary>

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

</details>

<details><summary>Firefox 85</summary>

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

</details>

<details><summary>Firefox 86</summary>

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

</details>

<details><summary>Firefox 87</summary>

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

</details>

<details><summary>Firefox 88</summary>

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

</details>

<details><summary>Firefox 89</summary>

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

</details>

<details><summary>Firefox 90</summary>

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

</details>

<details><summary>Firefox 91</summary>

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

</details>

<details><summary>Firefox 92</summary>

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

</details>

### Chrome, Chromium Edge, Opera

<details><summary>Chrome 39+, Chromium Edge 79+, Opera 26+</summary>

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

</details>

<details><summary>Chrome 53, Opera 40</summary>

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

</details>

<details><summary>Chrome 54, Opera 41</summary>

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

</details>

<details><summary>Chrome 55, Opera 42</summary>

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

</details>

<details><summary>Chrome 56, Opera 43</summary>

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

</details>

<details><summary>Chrome 57, Opera 44</summary>

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

</details>

<details><summary>Chrome 58, Opera 45</summary>

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

</details>

<details><summary>Chrome 60+, Opera 47+</summary>

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

</details>

<details><summary>Chrome 62, Opera 49</summary>

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

</details>

<details><summary>Chrome 63, Opera 50</summary>

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

</details>

<details><summary>Chrome 64, Opera 51</summary>

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

</details>

<details><summary>Chrome 65, Opera 52</summary>

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

</details>

<details><summary>Chrome 66, Opera 53</summary>

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

</details>

<details><summary>Chrome 75, Opera 62</summary>

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

</details>

<details><summary>Chrome 76, Opera 63</summary>

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

</details>

<details><summary>Chrome 77, Opera 64</summary>

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

</details>

<details><summary>Chrome 78, Opera 65</summary>

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

</details>

<details><summary>Chrome 79, Chromium Edge 79, Opera 66</summary>

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

</details>

<details><summary>Chrome 80, Chromium Edge 80, Opera 67</summary>

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

</details>

<details><summary>Chrome 81, Chromium Edge 81, Opera 68</summary>

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

</details>

<details><summary>Chrome 83, Chromium Edge 83, Opera 69</summary>

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

</details>

<details><summary>Chrome 83+, Chromium Edge 83+, Opera 69+</summary>

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

</details>

<details><summary>Chrome 84, Chromium Edge 84, Opera 70</summary>

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

</details>

<details><summary>Chrome 85, Chromium Edge 85, Opera 71</summary>

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

</details>

<details><summary>Chrome 86, Chromium Edge 86, Opera 72</summary>

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

</details>

<details><summary>Chrome 87, Chromium Edge 87, Opera 73</summary>

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

</details>

<details><summary>Chrome 88, Chromium Edge 88, Opera 74</summary>

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

</details>

<details><summary>Chrome 89, Chromium Edge 89, Opera 75</summary>

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

</details>

<details><summary>Chrome 93, Chromium Edge 93, Opera 79</summary>

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

</details>

<details><summary>Chrome 94, Chromium Edge 94, Opera 80</summary>

```css
@supports (scrollbar-gutter: auto) and (not (contain-intrinsic-block-size: 0)) and selector(::-internal-media-controls-overlay-cast-button) {
  .selector {
    property: value;
  }
}
```

</details>

### Safari, iOS Safari

<details><summary>Safari 9+, iOS Safari 9+</summary>

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

</details>

<details><summary>Safari 11+, iOS Safari 11+</summary>

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

</details>

<details><summary>Safari 13+, iOS Safari 13+</summary>

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

</details>

<details><summary>Safari 14+, iOS Safari 14+</summary>

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

</details>

canidetect

canidetect 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

canidetect

canidetect 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README