Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active October 2, 2023 07:05
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save feo52/9b0658d254b0ad2333d6907e97267e5f to your computer and use it in GitHub Desktop.
Save feo52/9b0658d254b0ad2333d6907e97267e5f to your computer and use it in GitHub Desktop.
Download ZIP
css hacks 2022
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; }
summary { list-style: none; }
summary::-webkit-details-marker { display:none; }
details, _:-ms-lang(x) { display: none; }
.details-bottom-hr, _:lang(x)::-webkit- { display: none; }
/* Edge(Chromium) & Chrome & Safari & Firefox */ :not(:is(*)), .selector-0010 { color: blue; }
/* Edge(Chromium) & Chrome & Safari & Firefox */ :not(:where(*)), .selector-0011 { color: blue; }
/* Edge(Chromium) & Chrome & Safari & Firefox */ @supports selector(:is(*)) { .selector-0030 { color: blue; } }
/* Edge(Chromium) & Chrome & Safari & Firefox */ @supports selector(:where(*)) { .selector-0031 { color: blue; } }
/* Edge(Chromium) & Chrome & Safari & Firefox */ @supports (all:unset) { .selector-0040 { color: blue; } }
/* Edge(Chromium) & Chrome & Safari & Firefox */ @supports (aspect-ratio:1) { .selector-0041 { color: blue; } }
/* Edge(Chromium) & Chrome & Safari & Firefox */ _:lang(x)::-webkit-, .selector-0100 { color: blue; }
/* Edge(EdgeHTML) & IE11 & IE10 */ _:-ms-lang(x), .selector-0199 { color: blue; }
/* Edge(EdgeHTML) */ _:-ms-lang(x)::backdrop, .selector-0200 { color: blue; }
/* IE11 */ _:-ms-lang(x)::-ms-backdrop, .selector-0201 { color: blue; }
/* Edge(Chromium) */ _:host-context(x)::-ms-clear, .selector-0302 { color: blue; }
/* Edge(Chromium) */ _:host-context(x)::-ms-reveal, .selector-0303 { color: blue; }
/* Edge(Chromium) & Chrome */ _:host-context(x), .selector-0304 { color: blue; }
/* Safari */ _:matches(x), .selector-0305 { color: blue; }
/* Firefox */ _:-moz-any(x), .selector-0306 { color: blue; }
/* Edge(Chromium) */ _:lang(x)+_:-internal-autofill-previewed::-ms-clear, .selector-0402 { color: blue; }
/* Edge(Chromium) */ _:lang(x)+_:-internal-autofill-previewed::-ms-reveal, .selector-0403 { color: blue; }
/* Edge(Chromium) & Chrome */ _:lang(x)+_:-internal-autofill-previewed, .selector-0404 { color: blue; }
/* Safari */ _:lang(x)+_:-webkit-full-screen-document, .selector-0405 { color: blue; }
/* Firefox */ _:lang(x)::-moz-placeholder, .selector-0406 { color: blue; }
/* Edge(EdgeHTML) */ @supports (ime-mode:auto) and (zoom:1) { .selector-0501 { color: blue; } }
/* Edge(Chromium) & Chrome */ @supports (background:paint(id)) { .selector-0502 { color: blue; } }
/* Edge(Chromium) */ @supports (background:paint(id)) and (-ms-high-contrast-adjust:none) { .selector-0503 { color: blue; } }
/* Chrome */ @supports (background:paint(id)) and (not (-ms-high-contrast-adjust:none)) { .selector-0504 { color: blue; } }
/* Safari */ @supports (background:color(display-p3 0 0 0)) { .selector-0505 { color: blue; } }
/* Safari */ @supports (hanging-punctuation:none) { .selector-0506 { color: blue; } }
/* Safari on iOS */ @supports (-webkit-touch-callout:none) { .selector-0507 { color: blue; } }
/* Firefox */ @supports (-moz-user-focus:none) { .selector-0508 { color: blue; } }
/* Edge(Chromium) */ @supports selector(:-internal-autofill-previewed) and selector(::-ms-clear ) { .selector-0602 { color: blue; } }
/* Edge(Chromium) */ @supports selector(:-internal-autofill-previewed) and selector(::-ms-reveal) { .selector-0603 { color: blue; } }
/* Chrome */ @supports selector(:-internal-autofill-previewed) and (not selector(::-ms-clear )) { .selector-0604 { color: blue; } }
/* Chrome */ @supports selector(:-internal-autofill-previewed) and (not selector(::-ms-reveal)) { .selector-0605 { color: blue; } }
/* Check */ _:-ms-, .selector-1000 { color: blue; }
/* Check */ _::-ms-, .selector-1001 { color: blue; }
/* Check */ _:-moz-, .selector-1002 { color: blue; }
/* Check */ _::-moz-, .selector-1003 { color: blue; }
/* Check */ _:-webkit-, .selector-1004 { color: blue; }
/* Check */ _::-webkit-, .selector-1005 { color: blue; }
/* Check */ _::backdrop, .selector-2000 { color: blue; }
/* Check */ _::-ms-backdrop, .selector-2001 { color: blue; }
/* Check */ _::-webkit-backdrop, .selector-2002 { 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 */ _:placeholder, .selector-3100 { color: blue; }
/* Check */ _::placeholder, .selector-3101 { color: blue; }
/* Check */ _:-ms-placeholder, .selector-3102 { color: blue; }
/* Check */ _::-ms-placeholder, .selector-3103 { color: blue; }
/* Check */ _:-moz-placeholder, .selector-3104 { color: blue; }
/* Check */ _::-moz-placeholder, .selector-3105 { color: blue; }
/* Check */ _:-webkit-placeholder, .selector-3106 { color: blue; }
/* Check */ _::-webkit-placeholder, .selector-3107 { color: blue; }
/* Check */ _:input-placeholder, .selector-3200 { color: blue; }
/* Check */ _::input-placeholder, .selector-3201 { color: blue; }
/* Check */ _:-ms-input-placeholder, .selector-3202 { color: blue; }
/* Check */ _::-ms-input-placeholder, .selector-3203 { color: blue; }
/* Check */ _:-moz-input-placeholder, .selector-3204 { color: blue; }
/* Check */ _::-moz-input-placeholder, .selector-3205 { color: blue; }
/* Check */ _:-webkit-input-placeholder, .selector-3206 { color: blue; }
/* Check */ _::-webkit-input-placeholder, .selector-3207 { color: blue; }
/* Check */ _:file-selector-button, .selector-3300 { color: blue; }
/* Check */ _::file-selector-button, .selector-3301 { color: blue; }
/* Check */ _:-webkit-file-selector-button, .selector-3302 { color: blue; }
/* Check */ _::-webkit-file-selector-button, .selector-3303 { color: blue; }
/* Check */ _:file-upload-button, .selector-3304 { color: blue; }
/* Check */ _::file-upload-button, .selector-3305 { color: blue; }
/* Check */ _:-webkit-file-upload-button, .selector-3306 { color: blue; }
/* Check */ _::-webkit-file-upload-button, .selector-3307 { color: blue; }
/* Check */ _:-moz-locale-dir(x), .selector-3400 { color: blue; }
/* Check */ _:-moz-locale-dir(ltr), .selector-3401 { color: blue; }
/* Check */ _:-moz-locale-dir(rtl), .selector-3402 { color: blue; }
/* Check */ _:-webkit-any-link, .selector-4000 { color: blue; }
/* Check */ _:-webkit-autofill, .selector-4001 { color: blue; }
/* Check */ _:-webkit-autofill-strong-password, .selector-4002 { color: blue; }
/* Check */ _:-webkit-drag, .selector-4003 { color: blue; }
/* Check */ _:-webkit-full-page-media, .selector-4004 { color: blue; }
/* Check */ _:-webkit-full-screen, .selector-4200 { color: blue; }
/* Check */ _:-webkit-full-screen-ancestor, .selector-4201 { color: blue; }
/* Check */ _:-webkit-full-screen-document, .selector-4202 { color: blue; }
/* Check */ _:-webkit-full-screen-controls-hidden, .selector-4203 { color: blue; }
/* Check */ _:-webkit-animating-full-screen-transition, .selector-4204 { color: blue; }
/* Check */ _:-webkit-details-marker, .selector-4400 { color: blue; }
/* Check */ _:-webkit-media-controls, .selector-4401 { color: blue; }
/* Check */ _:-webkit-media-text-track-container, .selector-4402 { color: blue; }
/* Check */ _:-webkit-slider-runnable-track, .selector-4403 { color: blue; }
/* Check */ _:-webkit-slider-thumb, .selector-4404 { color: blue; }
/* Check */ _::-webkit-any-link, .selector-4100 { color: blue; }
/* Check */ _::-webkit-autofill, .selector-4101 { color: blue; }
/* Check */ _::-webkit-autofill-strong-password, .selector-4102 { color: blue; }
/* Check */ _::-webkit-drag, .selector-4103 { color: blue; }
/* Check */ _::-webkit-full-page-media, .selector-4104 { color: blue; }
/* Check */ _::-webkit-full-screen, .selector-4300 { color: blue; }
/* Check */ _::-webkit-full-screen-ancestor, .selector-4301 { color: blue; }
/* Check */ _::-webkit-full-screen-document, .selector-4302 { color: blue; }
/* Check */ _::-webkit-full-screen-controls-hidden, .selector-4303 { color: blue; }
/* Check */ _::-webkit-animating-full-screen-transition, .selector-4304 { color: blue; }
/* Check */ _::-webkit-details-marker, .selector-4500 { color: blue; }
/* Check */ _::-webkit-media-controls, .selector-4501 { color: blue; }
/* Check */ _::-webkit-media-text-track-container, .selector-4502 { color: blue; }
/* Check */ _::-webkit-slider-runnable-track, .selector-4503 { color: blue; }
/* Check */ _::-webkit-slider-thumb, .selector-4504 { color: blue; }
/* Check */ _:-internal-, .selector-5000 { color: blue; }
/* Check */ _:-internal-autofill-previewed, .selector-5001 { color: blue; }
/* Check */ _:-internal-autofill-selected, .selector-5002 { color: blue; }
/* Check */ _:-internal-media-controls-overlay-cast-button, .selector-5003 { color: blue; }
/* Check */ _::-internal-, .selector-5100 { color: blue; }
/* Check */ _::-internal-autofill-previewed, .selector-5101 { color: blue; }
/* Check */ _::-internal-autofill-selected, .selector-5102 { color: blue; }
/* Check */ _::-internal-media-controls-overlay-cast-button, .selector-5103 { color: blue; }
/* Check */ _::-ms-browse, .selector-6000 { color: blue; }
/* Check */ _::-ms-check, .selector-6001 { color: blue; }
/* Check */ _::-ms-clear, .selector-6002 { color: blue; }
/* Check */ _::-ms-expand, .selector-6003 { color: blue; }
/* Check */ _::-ms-fill, .selector-6004 { color: blue; }
/* Check */ _::-ms-fill-lower, .selector-6005 { color: blue; }
/* Check */ _::-ms-fill-upper, .selector-6006 { color: blue; }
/* Check */ _::-ms-reveal, .selector-6007 { color: blue; }
/* Check */ _::-ms-thumb, .selector-6008 { color: blue; }
/* Check */ _::-ms-ticks-after, .selector-6009 { color: blue; }
/* Check */ _::-ms-ticks-before, .selector-6010 { color: blue; }
/* Check */ _::-ms-tooltip, .selector-6011 { color: blue; }
/* Check */ _::-ms-track, .selector-6012 { color: blue; }
/* Check */ _::-ms-value, .selector-6013 { color: blue; }
/* Check */ _:root, .selector-7000 { color: blue; }
/* Check */ _:scope, .selector-7001 { color: blue; }
/* Check */ _:future, .selector-7002 { color: blue; }
/* Check */ _:past, .selector-7003 { color: blue; }
/* Check */ _::selection, .selector-7004 { color: blue; }
/* Check */ _::target-text, .selector-7005 { color: blue; }
/* Check */ _::grammar-error, .selector-7006 { color: blue; }
/* Check */ _::spelling-error, .selector-7007 { color: blue; }
/* Check */ _:dir(x), .selector-7100 { color: blue; }
/* Check */ _:has(x), .selector-7101 { color: blue; }
/* Check */ _:not(x), .selector-7102 { color: blue; }
/* Check */ _:lang(x), .selector-7103 { color: blue; }
/* Check */ _::cue, .selector-7104 { color: blue; }
/* Check */ _::cue(x), .selector-7105 { color: blue; }
/* Check */ _::cue-region, .selector-7106 { color: blue; }
/* Check */ _::cue-region(x), .selector-7107 { color: blue; }
/* Check */ :-moz-any(), .selector-7200 { color: blue; }
/* Check */ :-moz-any(x), .selector-7201 { color: blue; }
/* Check */ _:-moz-any(), .selector-7202 { color: blue; }
/* Check */ _:-moz-any(x), .selector-7203 { color: blue; }
/* Check */ :-webkit-any(), .selector-7204 { color: blue; }
/* Check */ :-webkit-any(x), .selector-7205 { color: blue; }
/* Check */ _:-webkit-any(), .selector-7206 { color: blue; }
/* Check */ _:-webkit-any(x), .selector-7207 { color: blue; }
/* Check */ :any(), .selector-7300 { color: blue; }
/* Check */ :any(x), .selector-7301 { color: blue; }
/* Check */ _:any(), .selector-7302 { color: blue; }
/* Check */ _:any(x), .selector-7303 { color: blue; }
/* Check */ :matches(), .selector-7304 { color: blue; }
/* Check */ :matches(x), .selector-7305 { color: blue; }
/* Check */ _:matches(), .selector-7306 { color: blue; }
/* Check */ _:matches(x), .selector-7307 { color: blue; }
/* Check */ :is(), .selector-7400 { color: blue; }
/* Check */ :is(x), .selector-7401 { color: blue; }
/* Check */ _:is(), .selector-7402 { color: blue; }
/* Check */ _:is(x), .selector-7403 { color: blue; }
/* Check */ :where(), .selector-7404 { color: blue; }
/* Check */ :where(x), .selector-7405 { color: blue; }
/* Check */ _:where(), .selector-7406 { color: blue; }
/* Check */ _:where(x), .selector-7407 { color: blue; }
/* Check */ _:scope-context(x), .selector-7500 { color: blue; }
/* Check */ _:host, .selector-7501 { color: blue; }
/* Check */ _:host(x), .selector-7502 { color: blue; }
/* Check */ _:host-context(x), .selector-7503 { color: blue; }
/* Check */ _::slotted(x), .selector-7504 { color: blue; }
/* Check */ _::part(x), .selector-7505 { color: blue; }
/* Check */ _::shadow, .selector-7506 { color: blue; }
/* Check */ _::region, .selector-7507 { color: blue; }
/* Check */ _:current, .selector-8000 { color: blue; }
/* Check */ _:current(x), .selector-8001 { color: blue; }
/* Check */ _:drop(), .selector-8002 { color: blue; }
/* Check */ _:drop(x), .selector-8003 { color: blue; }
/* Check */ _:nth-col(), .selector-8004 { color: blue; }
/* Check */ _:nth-col(x), .selector-8005 { color: blue; }
/* Check */ _:nth-last-col(), .selector-8006 { color: blue; }
/* Check */ _:nth-last-col(x), .selector-8007 { color: blue; }
/* Check */ _:nth-column(), .selector-8100 { color: blue; }
/* Check */ _:nth-column(x), .selector-8101 { color: blue; }
/* Check */ _:nth-last-column(), .selector-8102 { color: blue; }
/* Check */ _:nth-last-column(x), .selector-8103 { color: blue; }
/* Check */ _:nth-match(), .selector-8104 { color: blue; }
/* Check */ _:nth-match(x), .selector-8105 { color: blue; }
/* Check */ _:nth-last-match(), .selector-8106 { color: blue; }
/* Check */ _:nth-last-match(x), .selector-8107 { color: blue; }
</style>
</head>
<body>
<br>
<hr>css<hr>
<div class="selector-0010">[ Edge(Chromium) & Chrome & Safari & Firefox ] :not(:is(*)), .selector { color: blue; }</div>
<div class="selector-0011">[ Edge(Chromium) & Chrome & Safari & Firefox ] :not(:where(*)), .selector { color: blue; }</div>
<hr>css ( @supports selector )<hr>
<div class="selector-0030">[ Edge(Chromium) & Chrome & Safari & Firefox ]<br> @supports selector(:is(*)) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0031">[ Edge(Chromium) & Chrome & Safari & Firefox ]<br> @supports selector(:where(*)) {<br> .selector { color: blue; }<br> }</div>
<hr>css ( @supports )<hr>
<div class="selector-0040">[ Edge(Chromium) & Chrome & Safari & Firefox ]<br> @supports (all:unset) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0041">[ Edge(Chromium) & Chrome & Safari & Firefox ]<br> @supports (aspect-ratio:1) {<br> .selector { color: blue; }<br> }</div>
<hr>css hack<hr>
<div class="selector-0100">[ Edge(Chromium) & Chrome & Safari & Firefox ] _:lang(x)::-webkit-, .selector { color: blue; }</div>
<hr>css hack<hr>
<div class="selector-0199">[ Edge(EdgeHTML) & IE11 & IE10 ] _:-ms-lang(x), .selector { color: blue; }</div>
<div class="selector-0200">[ Edge(EdgeHTML) ] _:-ms-lang(x)::backdrop, .selector { color: blue; }</div>
<div class="selector-0201">[ IE11 ] _:-ms-lang(x)::-ms-backdrop, .selector { color: blue; }</div>
<hr>css hack<hr>
<div class="selector-0302">[ Edge(Chromium) ] _:host-context(x)::-ms-clear, .selector { color: blue; }</div>
<div class="selector-0303">[ Edge(Chromium) ] _:host-context(x)::-ms-reveal, .selector { color: blue; }</div>
<div class="selector-0304">[ Edge(Chromium) & Chrome ] _:host-context(x), .selector { color: blue; }</div>
<div class="selector-0305">[ Safari ] _:matches(x), .selector { color: blue; }</div>
<div class="selector-0306">[ Firefox ] _:-moz-any(x), .selector { color: blue; }</div>
<hr>css hack<hr>
<div class="selector-0402">[ Edge(Chromium) ] _:lang(x)+_:-internal-autofill-previewed::-ms-clear, .selector { color: blue; }</div>
<div class="selector-0403">[ Edge(Chromium) ] _:lang(x)+_:-internal-autofill-previewed::-ms-reveal, .selector { color: blue; }</div>
<div class="selector-0404">[ Edge(Chromium) & Chrome ] _:lang(x)+_:-internal-autofill-previewed, .selector { color: blue; }</div>
<div class="selector-0405">[ Safari ] _:lang(x)+_:-webkit-full-screen-document, .selector { color: blue; }</div>
<div class="selector-0406">[ Firefox ] _:lang(x)::-moz-placeholder, .selector { color: blue; }</div>
<hr>css hack ( @supports )<hr>
<div class="selector-0501">[ Edge(EdgeHTML) ]<br> @supports (ime-mode:auto) and (zoom:1) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0502">[ Edge(Chromium) & Chrome ]<br> @supports (background:paint(id)) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0503">[ Edge(Chromium) ]<br> @supports (background:paint(id)) and (-ms-high-contrast-adjust:none) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0504">[ Chrome ]<br> @supports (background:paint(id)) and (not (-ms-high-contrast-adjust:none)) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0505">[ Safari ]<br> @supports (background:color(display-p3 0 0 0)) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0506">[ Safari ]<br> @supports (hanging-punctuation:none) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0507">[ Safari on iOS ]<br> @supports (-webkit-touch-callout:none) {<br> .selector { color: blue; }<br> }</div>
<div class="selector-0508">[ Firefox ]<br> @supports (-moz-user-focus:none) {<br> .selector { color: blue; }<br> }</div>
<hr>css hack ( @supports selector )<hr>
<div class="selector-0602">[ Edge(Chromium) ]<br> @supports selector(:-internal-autofill-previewed) and selector(::-ms-clear ) {<br> .selector { color: blue; }<br> }</div><hr>
<div class="selector-0603">[ Edge(Chromium) ]<br> @supports selector(:-internal-autofill-previewed) and selector(::-ms-reveal) {<br> .selector { color: blue; }<br> }</div><hr>
<div class="selector-0604">[ Chrome ]<br> @supports selector(:-internal-autofill-previewed) and (not selector(::-ms-clear )) {<br> .selector { color: blue; }<br> }</div><hr>
<div class="selector-0605">[ Chrome ]<br> @supports selector(:-internal-autofill-previewed) and (not selector(::-ms-reveal)) {<br> .selector { color: blue; }<br> }</div>
<hr>css note<hr>
<div class="selector-1000">[ Check ] _:-ms-, .selector { color: blue; }</div>
<div class="selector-1001">[ Check ] _::-ms-, .selector { color: blue; }</div>
<div class="selector-1002">[ Check ] _:-moz-, .selector { color: blue; }</div>
<div class="selector-1003">[ Check ] _::-moz-, .selector { color: blue; }</div>
<div class="selector-1004">[ Check ] _:-webkit-, .selector { color: blue; }</div>
<div class="selector-1005">[ Check ] _::-webkit-, .selector { color: blue; }</div>
<hr>
<div class="selector-2000">[ Check ] _::backdrop, .selector { color: blue; }</div>
<div class="selector-2001">[ Check ] _::-ms-backdrop, .selector { color: blue; }</div>
<div class="selector-2002">[ Check ] _::-webkit-backdrop, .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-3100">[ Check ] _:placeholder, .selector { color: blue; }</div>
<div class="selector-3101">[ Check ] _::placeholder, .selector { color: blue; }</div>
<div class="selector-3102">[ Check ] _:-ms-placeholder, .selector { color: blue; }</div>
<div class="selector-3103">[ Check ] _::-ms-placeholder, .selector { color: blue; }</div>
<div class="selector-3104">[ Check ] _:-moz-placeholder, .selector { color: blue; }</div>
<div class="selector-3105">[ Check ] _::-moz-placeholder, .selector { color: blue; }</div>
<div class="selector-3106">[ Check ] _:-webkit-placeholder, .selector { color: blue; }</div>
<div class="selector-3107">[ Check ] _::-webkit-placeholder, .selector { color: blue; }</div>
<hr> <!--
<div class="selector-3200">[ Check ] _:input-placeholder, .selector { color: blue; }</div>
<div class="selector-3201">[ Check ] _::input-placeholder, .selector { color: blue; }</div>
<div class="selector-3202">[ Check ] _:-ms-input-placeholder, .selector { color: blue; }</div>
<div class="selector-3203">[ Check ] _::-ms-input-placeholder, .selector { color: blue; }</div>
<div class="selector-3204">[ Check ] _:-moz-input-placeholder, .selector { color: blue; }</div>
<div class="selector-3205">[ Check ] _::-moz-input-placeholder, .selector { color: blue; }</div>
<div class="selector-3206">[ Check ] _:-webkit-input-placeholder, .selector { color: blue; }</div>
<div class="selector-3207">[ Check ] _::-webkit-input-placeholder, .selector { color: blue; }</div>
<hr>
<div class="selector-3300">[ Check ] _:file-selector-button, .selector { color: blue; }</div>
<div class="selector-3301">[ Check ] _::file-selector-button, .selector { color: blue; }</div>
<div class="selector-3302">[ Check ] _:-webkit-file-selector-button, .selector { color: blue; }</div>
<div class="selector-3303">[ Check ] _::-webkit-file-selector-button, .selector { color: blue; }</div>
<div class="selector-3304">[ Check ] _:file-upload-button, .selector { color: blue; }</div>
<div class="selector-3305">[ Check ] _::file-upload-button, .selector { color: blue; }</div>
<div class="selector-3306">[ Check ] _:-webkit-file-upload-button, .selector { color: blue; }</div>
<div class="selector-3307">[ Check ] _::-webkit-file-upload-button, .selector { color: blue; }</div>
<hr> -->
<div class="selector-3400">[ Check ] _:-moz-locale-dir(x), .selector { color: blue; }</div>
<div class="selector-3401">[ Check ] _:-moz-locale-dir(ltr), .selector { color: blue; }</div>
<div class="selector-3402">[ Check ] _:-moz-locale-dir(rtl), .selector { color: blue; }</div>
<hr>
<div class="selector-4000">[ Check ] _:-webkit-any-link, .selector { color: blue; }</div>
<div class="selector-4001">[ Check ] _:-webkit-autofill, .selector { color: blue; }</div>
<div class="selector-4002">[ Check ] _:-webkit-autofill-strong-password, .selector { color: blue; }</div>
<div class="selector-4003">[ Check ] _:-webkit-drag, .selector { color: blue; }</div>
<div class="selector-4004">[ Check ] _:-webkit-full-page-media, .selector { color: blue; }</div>
<hr>
<div class="selector-4200">[ Check ] _:-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-4201">[ Check ] _:-webkit-full-screen-ancestor, .selector { color: blue; }</div>
<div class="selector-4202">[ Check ] _:-webkit-full-screen-document, .selector { color: blue; }</div>
<div class="selector-4203">[ Check ] _:-webkit-full-screen-controls-hidden, .selector { color: blue; }</div>
<div class="selector-4204">[ Check ] _:-webkit-animating-full-screen-transition, .selector { color: blue; }</div>
<hr> <!--
<div class="selector-4400">[ Check ] _:-webkit-details-marker, .selector { color: blue; }</div>
<div class="selector-4401">[ Check ] _:-webkit-media-controls, .selector { color: blue; }</div>
<div class="selector-4402">[ Check ] _:-webkit-media-text-track-container, .selector { color: blue; }</div>
<div class="selector-4403">[ Check ] _:-webkit-slider-runnable-track, .selector { color: blue; }</div>
<div class="selector-4404">[ Check ] _:-webkit-slider-thumb, .selector { color: blue; }</div>
<hr>
<div class="selector-4100">[ Check ] _::-webkit-any-link, .selector { color: blue; }</div>
<div class="selector-4101">[ Check ] _::-webkit-autofill, .selector { color: blue; }</div>
<div class="selector-4102">[ Check ] _::-webkit-autofill-strong-password, .selector { color: blue; }</div>
<div class="selector-4103">[ Check ] _::-webkit-drag, .selector { color: blue; }</div>
<div class="selector-4104">[ Check ] _::-webkit-full-page-media, .selector { color: blue; }</div>
<hr>
<div class="selector-4300">[ Check ] _::-webkit-full-screen, .selector { color: blue; }</div>
<div class="selector-4301">[ Check ] _::-webkit-full-screen-ancestor, .selector { color: blue; }</div>
<div class="selector-4302">[ Check ] _::-webkit-full-screen-document, .selector { color: blue; }</div>
<div class="selector-4303">[ Check ] _::-webkit-full-screen-controls-hidden, .selector { color: blue; }</div>
<div class="selector-4304">[ Check ] _::-webkit-animating-full-screen-transition, .selector { color: blue; }</div>
<hr>
<div class="selector-4500">[ Check ] _::-webkit-details-marker, .selector { color: blue; }</div>
<div class="selector-4501">[ Check ] _::-webkit-media-controls, .selector { color: blue; }</div>
<div class="selector-4502">[ Check ] _::-webkit-media-text-track-container, .selector { color: blue; }</div>
<div class="selector-4503">[ Check ] _::-webkit-slider-runnable-track, .selector { color: blue; }</div>
<div class="selector-4504">[ Check ] _::-webkit-slider-thumb, .selector { color: blue; }</div>
<hr> -->
<div class="selector-5000">[ Check ] _:-internal-, .selector { color: blue; }</div>
<div class="selector-5001">[ Check ] _:-internal-autofill-previewed, .selector { color: blue; }</div>
<div class="selector-5002">[ Check ] _:-internal-autofill-selected, .selector { color: blue; }</div>
<div class="selector-5003">[ Check ] _:-internal-media-controls-overlay-cast-button, .selector { color: blue; }</div>
<hr>
<div class="selector-5100">[ Check ] _::-internal-, .selector { color: blue; }</div>
<div class="selector-5101">[ Check ] _::-internal-autofill-previewed, .selector { color: blue; }</div>
<div class="selector-5102">[ Check ] _::-internal-autofill-selected, .selector { color: blue; }</div>
<div class="selector-5103">[ Check ] _::-internal-media-controls-overlay-cast-button, .selector { color: blue; }</div>
<details><summary><hr></summary>
<div class="selector-6000">[ Check ] _::-ms-browse, .selector { color: blue; }</div>
<div class="selector-6001">[ Check ] _::-ms-check, .selector { color: blue; }</div>
<div class="selector-6002">[ Check ] _::-ms-clear, .selector { color: blue; }</div>
<div class="selector-6003">[ Check ] _::-ms-expand, .selector { color: blue; }</div>
<div class="selector-6004">[ Check ] _::-ms-fill, .selector { color: blue; }</div>
<div class="selector-6005">[ Check ] _::-ms-fill-lower, .selector { color: blue; }</div>
<div class="selector-6006">[ Check ] _::-ms-fill-upper, .selector { color: blue; }</div>
<div class="selector-6007">[ Check ] _::-ms-reveal, .selector { color: blue; }</div>
<div class="selector-6008">[ Check ] _::-ms-thumb, .selector { color: blue; }</div>
<div class="selector-6009">[ Check ] _::-ms-ticks-after, .selector { color: blue; }</div>
<div class="selector-6010">[ Check ] _::-ms-ticks-before, .selector { color: blue; }</div>
<div class="selector-6011">[ Check ] _::-ms-tooltip, .selector { color: blue; }</div>
<div class="selector-6012">[ Check ] _::-ms-track, .selector { color: blue; }</div>
<div class="selector-6013">[ Check ] _::-ms-value, .selector { color: blue; }</div>
<hr></details><hr class="details-bottom-hr">
<div class="selector-7000">[ Check ] _:root, .selector { color: blue; }</div>
<div class="selector-7001">[ Check ] _:scope, .selector { color: blue; }</div>
<div class="selector-7002">[ Check ] _:future, .selector { color: blue; }</div>
<div class="selector-7003">[ Check ] _:past, .selector { color: blue; }</div>
<div class="selector-7004">[ Check ] _::selection, .selector { color: blue; }</div>
<div class="selector-7005">[ Check ] _::target-text, .selector { color: blue; }</div>
<div class="selector-7006">[ Check ] _::grammar-error, .selector { color: blue; }</div>
<div class="selector-7007">[ Check ] _::spelling-error, .selector { color: blue; }</div>
<hr>
<div class="selector-7100">[ Check ] _:dir(x), .selector { color: blue; }</div>
<div class="selector-7101">[ Check ] _:has(x), .selector { color: blue; }</div>
<div class="selector-7102">[ Check ] _:not(x), .selector { color: blue; }</div>
<div class="selector-7103">[ Check ] _:lang(x), .selector { color: blue; }</div>
<div class="selector-7104">[ Check ] _::cue, .selector { color: blue; }</div>
<div class="selector-7105">[ Check ] _::cue(x), .selector { color: blue; }</div>
<div class="selector-7106">[ Check ] _::cue-region, .selector { color: blue; }</div>
<div class="selector-7107">[ Check ] _::cue-region(x), .selector { color: blue; }</div>
<hr>
<div class="selector-7200">[ Check ] :-moz-any(), .selector { color: blue; }</div>
<div class="selector-7201">[ Check ] :-moz-any(x), .selector { color: blue; }</div>
<div class="selector-7202">[ Check ] _:-moz-any(), .selector { color: blue; }</div>
<div class="selector-7203">[ Check ] _:-moz-any(x), .selector { color: blue; }</div>
<div class="selector-7204">[ Check ] :-webkit-any(), .selector { color: blue; }</div>
<div class="selector-7205">[ Check ] :-webkit-any(x), .selector { color: blue; }</div>
<div class="selector-7206">[ Check ] _:-webkit-any(), .selector { color: blue; }</div>
<div class="selector-7207">[ Check ] _:-webkit-any(x), .selector { color: blue; }</div>
<hr>
<div class="selector-7300">[ Check ] :any(), .selector { color: blue; }</div>
<div class="selector-7301">[ Check ] :any(x), .selector { color: blue; }</div>
<div class="selector-7302">[ Check ] _:any(), .selector { color: blue; }</div>
<div class="selector-7303">[ Check ] _:any(x), .selector { color: blue; }</div>
<div class="selector-7304">[ Check ] :matches(), .selector { color: blue; }</div>
<div class="selector-7305">[ Check ] :matches(x), .selector { color: blue; }</div>
<div class="selector-7306">[ Check ] _:matches(), .selector { color: blue; }</div>
<div class="selector-7307">[ Check ] _:matches(x), .selector { color: blue; }</div>
<hr>
<div class="selector-7400">[ Check ] :is(), .selector { color: blue; }</div>
<div class="selector-7401">[ Check ] :is(x), .selector { color: blue; }</div>
<div class="selector-7402">[ Check ] _:is(), .selector { color: blue; }</div>
<div class="selector-7403">[ Check ] _:is(x), .selector { color: blue; }</div>
<div class="selector-7404">[ Check ] :where(), .selector { color: blue; }</div>
<div class="selector-7405">[ Check ] :where(x), .selector { color: blue; }</div>
<div class="selector-7406">[ Check ] _:where(), .selector { color: blue; }</div>
<div class="selector-7407">[ Check ] _:where(x), .selector { color: blue; }</div>
<hr>
<div class="selector-7500">[ Check ] _:scope-context(x), .selector { color: blue; }</div>
<div class="selector-7501">[ Check ] _:host, .selector { color: blue; }</div>
<div class="selector-7502">[ Check ] _:host(x), .selector { color: blue; }</div>
<div class="selector-7503">[ Check ] _:host-context(x), .selector { color: blue; }</div>
<div class="selector-7504">[ Check ] _::slotted(x), .selector { color: blue; }</div>
<div class="selector-7505">[ Check ] _::part(x), .selector { color: blue; }</div>
<div class="selector-7506">[ Check ] _::shadow, .selector { color: blue; }</div>
<div class="selector-7507">[ Check ] _::region, .selector { color: blue; }</div>
<details><summary><hr></summary>
<div class="selector-8000">[ Check ] _:current, .selector { color: blue; }</div>
<div class="selector-8001">[ Check ] _:current(x), .selector { color: blue; }</div>
<div class="selector-8002">[ Check ] _:drop(), .selector { color: blue; }</div>
<div class="selector-8003">[ Check ] _:drop(x), .selector { color: blue; }</div>
<div class="selector-8004">[ Check ] _:nth-col(), .selector { color: blue; }</div>
<div class="selector-8005">[ Check ] _:nth-col(x), .selector { color: blue; }</div>
<div class="selector-8006">[ Check ] _:nth-last-col(), .selector { color: blue; }</div>
<div class="selector-8007">[ Check ] _:nth-last-col(x), .selector { color: blue; }</div>
<hr>
<div class="selector-8100">[ Check ] _:nth-column(), .selector { color: blue; }</div>
<div class="selector-8101">[ Check ] _:nth-column(x), .selector { color: blue; }</div>
<div class="selector-8102">[ Check ] _:nth-last-column(), .selector { color: blue; }</div>
<div class="selector-8103">[ Check ] _:nth-last-column(x), .selector { color: blue; }</div>
<div class="selector-8104">[ Check ] _:nth-match(), .selector { color: blue; }</div>
<div class="selector-8105">[ Check ] _:nth-match(x), .selector { color: blue; }</div>
<div class="selector-8106">[ Check ] _:nth-last-match(), .selector { color: blue; }</div>
<div class="selector-8107">[ Check ] _:nth-last-match(x), .selector { color: blue; }</div>
<hr></details><hr class="details-bottom-hr">
<script>
(function () {
if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined")) {
const attributes = [
"background:color(display-p3 0 0 0)",
"background:paint(id)",
"hanging-punctuation:none",
"ime-mode:auto",
"-moz-user-focus:none",
"-moz-window-dragging:drag",
"-moz-window-dragging:no-drag",
"-ms-high-contrast-adjust:auto",
"-ms-high-contrast-adjust:none",
"-webkit-touch-callout:none",
"-webkit-user-drag:auto",
"-webkit-user-drag:none",
"-webkit-user-drag:element",
];
attributes.forEach((value, index) => {
let div = document.createElement("div");
if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined") && (CSS.supports(value))) {
div.style.color = "blue";
}
div.innerHTML = "[ Check ] " + value;
document.body.appendChild(div);
});
console.log(window.getComputedStyle(document.body));
}
}());
document.body.appendChild(document.createElement("hr"));
document.body.appendChild(document.createTextNode("JavaScript"));
document.body.appendChild(document.createElement("hr"));
//https://caniuse.com/?search=all
//https://caniuse.com/?search=unset
//https://caniuse.com/?search=CSS.supports
if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined") && (CSS.supports("all:unset"))) {
let div = document.createElement("div");
div.style.color = "blue";
div.innerHTML = 'if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined") && (CSS.supports("all:unset"))) {}';
document.body.appendChild(div);
}
//https://caniuse.com/?search=aspect-ratio
//https://caniuse.com/?search=CSS.supports
if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined") && (CSS.supports("aspect-ratio:1"))) {
let div = document.createElement("div");
div.style.color = "blue";
div.innerHTML = 'if ((typeof CSS !== "undefined") && (typeof CSS.supports !== "undefined") && (CSS.supports("aspect-ratio:1"))) {}';
document.body.appendChild(div);
}
//https://caniuse.com/?search=flags
((browser=/re/.flags) => {
let div = document.createElement("div");
div.style.color = "blue";
div.innerHTML = '((browser=/re/.flags) => {})();';
document.body.appendChild(div);
})();
//https://caniuse.com/?search=flat
((browser=[0].flat()) => {
let div = document.createElement("div");
div.style.color = "blue";
div.innerHTML = '((browser=[0].flat()) => {})();';
document.body.appendChild(div);
})();
//https://caniuse.com/?search=bigint
((browser=1n) => {
let div = document.createElement("div");
div.style.color = "blue";
div.innerHTML = '((browser=1n) => {})();';
document.body.appendChild(div);
})();
document.body.appendChild(document.createElement("hr"));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment