Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active April 19, 2022 11:52
Show Gist options
  • Save feo52/b6198873e0bbaeda098e4ca6f62ca887 to your computer and use it in GitHub Desktop.
Save feo52/b6198873e0bbaeda098e4ca6f62ca887 to your computer and use it in GitHub Desktop.
Download ZIP
css hacks test
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<title>css hack</title>
<style>
body { font-family: monospace; }
/* IE11 */ _:lang(x)::-ms-backdrop, .selector-0000 { color: blue; }
/* Edge */ _:-ms-lang(x)::backdrop, .selector-0001 { color: blue; }
/* Chrome */ _:lang(x)::-internal-, .selector-0002 { color: blue; }
/* Safari */ _:lang(x)::x-, .selector-0003 { color: blue; }
/* Firefox */ _:dir(x), .selector-0004 { color: blue; }
/* IE11 */ _:-ms-lang(x)::-ms-backdrop, .selector-0100 { color: blue; }
/* Edge */ _:-ms-lang(x)::backdrop, .selector-0101 { color: blue; }
/* Chrome */ _:-webkit-any(x)::backdrop, .selector-0102 { color: blue; }
/* Safari */ _:-webkit-any(x)::x-backdrop, .selector-0103 { color: blue; }
/* Firefox */ _:-moz-any(x)::backdrop, .selector-0104 { color: blue; }
/* IE11 */ _:-ms-lang(x):-ms-fullscreen, .selector-0200 { color: blue; }
/* Edge */ _:-ms-lang(x):-webkit-full-screen, .selector-0201 { color: blue; }
/* Chrome */ _:-webkit-any(x):-webkit-full-screen, .selector-0202 { color: blue; }
/* Safari */ _:-webkit-any(x)::-webkit-full-screen, .selector-0203 { color: blue; }
/* Firefox */ _:-moz-any(x):-moz-full-screen, .selector-0204 { color: blue; }
/* Chrome */ _:-webkit-any(x):-webkit-full-screen, .selector-0300 { color: blue; }
/* Chrome */ _:-webkit-any(x):-webkit-full-screen-ancestor, .selector-0301 { color: blue; }
/* Safari */ _:-webkit-any(x)::-webkit-full-screen, .selector-0302 { color: blue; }
/* Safari */ _:-webkit-any(x)::-webkit-full-screen-ancestor, .selector-0303 { color: blue; }
/* Safari */ _:-webkit-any(x)::-webkit-any-link, .selector-0304 { color: blue; }
/* Safari */ _:-webkit-any(x)::-webkit-autofill, .selector-0305 { color: blue; }
/* Safari */ _:-webkit-any(x)::-webkit-drag, .selector-0306 { color: blue; }
/* Safari */ _:-webkit-any(x)::-webkit-full-page-media, .selector-0307 { color: blue; }
/* Chrome */ _:host(x)::-internal-_-, .selector-0400 { color: blue; }
/* Safari */ _:host(x)::x-_-, .selector-0401 { color: blue; }
/* Check */ _:dir(x), .selector-1000 { color: blue; }
/* Check */ _:dir(ltr), .selector-1001 { color: blue; }
/* Check */ _:dir(rtr), .selector-1002 { color: blue; }
/* Check */ _:-moz-locale-dir(x), .selector-1003 { color: blue; }
/* Check */ _:-moz-locale-dir(ltr), .selector-1004 { color: blue; }
/* Check */ _:-moz-locale-dir(rtl), .selector-1005 { color: blue; }
/* Check */ _:matches(x), .selector-2000 { color: blue; }
/* Check */ _:any(x), .selector-2001 { color: blue; }
/* Check */ _:-moz-any(x), .selector-2002 { color: blue; }
/* Check */ _:-webkit-any(x), .selector-2003 { color: blue; }
/* Check */ _::-webkit-any(x), .selector-2004 { color: blue; }
/* Check */ _:fullscreen, .selector-3000 { color: blue; }
/* Check */ _:-ms-fullscreen, .selector-3001 { color: blue; }
/* Check */ _:-moz-full-screen, .selector-3002 { color: blue; }
/* Check */ _:-webkit-full-screen, .selector-3003 { color: blue; }
/* Check */ _::-webkit-full-screen, .selector-3004 { color: blue; }
/* Check */ _::backdrop, .selector-4000 { color: blue; }
/* Check */ _::-ms-backdrop, .selector-4001 { color: blue; }
/* Check */ _::-webkit-backdrop, .selector-4002 { color: blue; }
/* Check */ _:-webkit-any-link, .selector-5000 { color: blue; }
/* Check */ _:-webkit-autofill, .selector-5001 { color: blue; }
/* Check */ _:-webkit-drag, .selector-5002 { color: blue; }
/* Check */ _:-webkit-full-page-media, .selector-5003 { color: blue; }
/* Check */ _::-webkit-any-link, .selector-5100 { color: blue; }
/* Check */ _::-webkit-autofill, .selector-5101 { color: blue; }
/* Check */ _::-webkit-drag, .selector-5102 { color: blue; }
/* Check */ _::-webkit-full-page-media, .selector-5103 { color: blue; }
/* Check */ _:-webkit-full-screen, .selector-6000 { color: blue; }
/* Check */ _:-webkit-full-screen-ancestor, .selector-6001 { color: blue; }
/* Check */ _:-webkit-full-screen-document, .selector-6002 { color: blue; }
/* Check */ _:-webkit-animating-full-screen-transition, .selector-6003 { color: blue; }
/* Check */ _::-webkit-full-screen, .selector-6100 { color: blue; }
/* Check */ _::-webkit-full-screen-ancestor, .selector-6101 { color: blue; }
/* Check */ _::-webkit-full-screen-document, .selector-6102 { color: blue; }
/* Check */ _::-webkit-animating-full-screen-transition, .selector-6103 { color: blue; }
/* Check */ _:drop, .selector-7000 { color: blue; }
/* Check */ _:drop(x), .selector-7001 { color: blue; }
/* Check */ _:role, .selector-7002 { color: blue; }
/* Check */ _:role(x), .selector-7003 { color: blue; }
/* Check */ _:host, .selector-7004 { color: blue; }
/* Check */ _:host(x), .selector-7005 { color: blue; }
/* Check */ _::slotted, .selector-7006 { color: blue; }
/* Check */ _::slotted(x), .selector-7007 { color: blue; }
/* Check */ _::cue, .selector-7008 { color: blue; }
/* Check */ _::cue(x), .selector-7009 { color: blue; }
/* Check */ _::-ms-, .selector-8000 { color: blue; }
/* Check */ _::-moz-, .selector-8001 { color: blue; }
/* Check */ _::-webkit-, .selector-8002 { color: blue; }
/* Check */ _::-internal-, .selector-8003 { color: blue; }
/* Check */ _::x-, .selector-8004 { color: blue; }
/* Check */ _::i-block-chrome, .selector-8005 { color: blue; }
</style>
</head>
<body>
<hr>
<div class="selector-0000">[ IE11 ] _:lang(x)::-ms-backdrop, .selector { color: blue; }</div>
<div class="selector-0001">[ Edge ] _:-ms-lang(x)::backdrop, .selector { color: blue; }</div>
<div class="selector-0002">[ Chrome ] _:lang(x)::-internal-, .selector { color: blue; }</div>
<div class="selector-0003">[ Safari ] _:lang(x)::x-, .selector { color: blue; }</div>
<div class="selector-0004">[ Firefox ] _:dir(x), .selector { color: blue; }</div>
<hr>
<div class="selector-0100">[ IE11 ] _:-ms-lang(x)::-ms-backdrop, .selector { color: blue; }</div>
<div class="selector-0101">[ Edge ] _:-ms-lang(x)::backdrop, .selector { color: blue; }</div>
<div class="selector-0102">[ Chrome ] _:-webkit-any(x)::backdrop, .selector { color: blue; }</div>
<div class="selector-0103">[ Safari ] _:-webkit-any(x)::x-backdrop, .selector { color: blue; }</div>
<div class="selector-0104">[ Firefox ] _:-moz-any(x)::backdrop, .selector { color: blue; }</div>
<hr>
<div class="selector-0200">[ IE11 ] _:-ms-lang(x):-ms-fullscreen, .selector { color: blue; }</div>
<div class="selector-0201">[ Edge ] _:-ms-lang(x):-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-0202">[ Chrome ] _:-webkit-any(x):-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-0203">[ Safari ] _:-webkit-any(x)::-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-0204">[ Firefox ] _:-moz-any(x):-moz-full-screen, .selector { color: blue; }</div>
<hr>
<div class="selector-0300">[ Chrome ] _:-webkit-any(x):-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-0301">[ Chrome ] _:-webkit-any(x):-webkit-full-screen-ancestor, .selector { color: blue; }</div>
<div class="selector-0302">[ Safari ] _:-webkit-any(x)::-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-0303">[ Safari ] _:-webkit-any(x)::-webkit-full-screen-ancestor, .selector { color: blue; }</div>
<div class="selector-0304">[ Safari ] _:-webkit-any(x)::-webkit-any-link, .selector { color: blue; }</div>
<div class="selector-0305">[ Safari ] _:-webkit-any(x)::-webkit-autofill, .selector { color: blue; }</div>
<div class="selector-0306">[ Safari ] _:-webkit-any(x)::-webkit-drag, .selector { color: blue; }</div>
<div class="selector-0307">[ Safari ] _:-webkit-any(x)::-webkit-full-page-media, .selector { color: blue; }</div>
<hr>
<div class="selector-0400">[ Chrome ] _:host(x)::-internal-_-, .selector { color: blue; }</div>
<div class="selector-0401">[ Safari ] _:host(x)::x-_-, .selector { color: blue; }</div>
<hr><hr><hr>
<div class="selector-1000">[ Check ] _:dir(x), .selector { color: blue; }</div>
<div class="selector-1001">[ Check ] _:dir(ltr), .selector { color: blue; }</div>
<div class="selector-1002">[ Check ] _:dir(rtr), .selector { color: blue; }</div>
<div class="selector-1003">[ Check ] _:-moz-locale-dir(x), .selector { color: blue; }</div>
<div class="selector-1004">[ Check ] _:-moz-locale-dir(ltr), .selector { color: blue; }</div>
<div class="selector-1005">[ Check ] _:-moz-locale-dir(rtl), .selector { color: blue; }</div>
<hr>
<div class="selector-2000">[ Check ] _:matches(x), .selector { color: blue; }</div>
<div class="selector-2001">[ Check ] _:any(x), .selector { color: blue; }</div>
<div class="selector-2002">[ Check ] _:-moz-any(x), .selector { color: blue; }</div>
<div class="selector-2003">[ Check ] _:-webkit-any(x), .selector { color: blue; }</div>
<div class="selector-2004">[ Check ] _::-webkit-any(x), .selector { color: blue; }</div>
<hr>
<div class="selector-3000">[ Check ] _:fullscreen, .selector { color: blue; }</div>
<div class="selector-3001">[ Check ] _:-ms-fullscreen, .selector { color: blue; }</div>
<div class="selector-3002">[ Check ] _:-moz-full-screen, .selector { color: blue; }</div>
<div class="selector-3003">[ Check ] _:-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-3004">[ Check ] _::-webkit-full-screen, .selector { color: blue; }</div>
<hr>
<div class="selector-4000">[ Check ] _::backdrop, .selector { color: blue; }</div>
<div class="selector-4001">[ Check ] _::-ms-backdrop, .selector { color: blue; }</div>
<div class="selector-4002">[ Check ] _::-webkit-backdrop, .selector { color: blue; }</div>
<hr>
<div class="selector-5000">[ Check ] _:-webkit-any-link, .selector { color: blue; }</div>
<div class="selector-5001">[ Check ] _:-webkit-autofill, .selector { color: blue; }</div>
<div class="selector-5002">[ Check ] _:-webkit-drag, .selector { color: blue; }</div>
<div class="selector-5003">[ Check ] _:-webkit-full-page-media, .selector { color: blue; }</div>
<hr>
<div class="selector-5100">[ Check ] _::-webkit-any-link, .selector { color: blue; }</div>
<div class="selector-5101">[ Check ] _::-webkit-autofill, .selector { color: blue; }</div>
<div class="selector-5102">[ Check ] _::-webkit-drag, .selector { color: blue; }</div>
<div class="selector-5103">[ Check ] _::-webkit-full-page-media, .selector { color: blue; }</div>
<hr>
<div class="selector-6000">[ Check ] _:-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-6001">[ Check ] _:-webkit-full-screen-ancestor, .selector { color: blue; }</div>
<div class="selector-6002">[ Check ] _:-webkit-full-screen-document, .selector { color: blue; }</div>
<div class="selector-6003">[ Check ] _:-webkit-animating-full-screen-transition, .selector { color: blue; }</div>
<hr>
<div class="selector-6100">[ Check ] _::-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-6101">[ Check ] _::-webkit-full-screen-ancestor, .selector { color: blue; }</div>
<div class="selector-6102">[ Check ] _::-webkit-full-screen-document, .selector { color: blue; }</div>
<div class="selector-6103">[ Check ] _::-webkit-animating-full-screen-transition, .selector { color: blue; }</div>
<hr>
<div class="selector-7000">[ Check ] _:drop, .selector { color: blue; }</div>
<div class="selector-7001">[ Check ] _:drop(x), .selector { color: blue; }</div>
<div class="selector-7002">[ Check ] _:role, .selector { color: blue; }</div>
<div class="selector-7003">[ Check ] _:role(x), .selector { color: blue; }</div>
<div class="selector-7004">[ Check ] _:host, .selector { color: blue; }</div>
<div class="selector-7005">[ Check ] _:host(x), .selector { color: blue; }</div>
<div class="selector-7006">[ Check ] _::slotted, .selector { color: blue; }</div>
<div class="selector-7007">[ Check ] _::slotted(x), .selector { color: blue; }</div>
<div class="selector-7008">[ Check ] _::cue, .selector { color: blue; }</div>
<div class="selector-7009">[ Check ] _::cue(x), .selector { color: blue; }</div>
<hr>
<div class="selector-8000">[ Check ] _::-ms-, .selector { color: blue; }</div>
<div class="selector-8001">[ Check ] _::-moz-, .selector { color: blue; }</div>
<div class="selector-8002">[ Check ] _::-webkit-, .selector { color: blue; }</div>
<div class="selector-8003">[ Check ] _::-internal-, .selector { color: blue; }</div>
<div class="selector-8004">[ Check ] _::x-, .selector { color: blue; }</div>
<div class="selector-8005">[ Check ] _::i-block-chrome, .selector { color: blue; }</div>
<hr>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment