CSS Beautifier / Minifier
Css Parser » CSS Beautifier / Minifier
do not input @support methods
http://topia.wikidot.com/csssss/code/2
ctrl + ↓, ctrl + ↑, ctrl + Enter
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); :root { --taHeight: 375px; --taHeightFocus: 600px; --taHeightBlur: 150px; --taScale: 0.75; } :root * { scrollbar-color: rgba(50, 50, 50, 0.3) rgba(0, 0, 0, 0); scrollbar-width: thin; } :root *:focus { outline: none!important; } ::-webkit-scrollbar { border: solid 1px rgba(0, 0, 0, 0); height: 9px; width: 9px; } ::-webkit-scrollbar-thumb { background: rgba(50, 50, 50, 0.3); } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); } body { color: #333; font-family: sans-serif; font-size: .8em; margin: 0; overflow-x: hidden; text-align: center; } .wrap { background: #fff; box-shadow: 1px 1px 3px #aaa; margin: .25em; padding: .5em; } input[type="number"] { -webkit-appearance: none; -moz-appearance: textfield; border: none; border-radius: 0; box-shadow: 1px 1px 3px #aaa; caret-color: #333; color: #b01; font-size: 16px; padding: .25em 0; text-align: center; transition: all .2s ease-in-out, outline 0s; width: 5em; } input[type="number"]:focus { background: rgba(240, 248, 255, .75); } input[type="number"]:disabled { background: rgba(50,50,50,.25); color: #aaa; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } label { margin: 0 0 0 1em; } label input { display: none; } label span { box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 0 5px 30px; position: relative; width: auto; } label span::before { background: #fff; box-shadow: 1px 1px 3px #aaa; content: ''; display: block; height: 16px; left: 5px; margin: -9px 0 0 0; position: absolute; top: 50%; width: 16px; } label span::after { border-right: 6px solid #b01; border-bottom: 3px solid #b01; content: ''; display: block; height: 20px; left: 7px; margin: -17px 0 0 0; opacity: 0; position: absolute; top: 50%; transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1); transition: all .2s ease-in-out; width: 9px; } label input:checked + span::before { border-color: #666; } label input:checked + span::after { opacity: 1; transform: rotate(45deg) scale3d(1,1,1); } .taWrap { height: calc((var(--taHeight) + 16px + 5px) * 2 * var(--taScale)); overflow: hidden; padding: 0 .5em; position: relative; z-index: 1; } textarea { -moz-appearance: none; -webkit-appearance: none; background-color: transparent; background-image: url("http://topia.wikidot.com/local--files/csssss/2cOaJ.png"); background-position: 0 0px; background-repeat: no-repeat; border: none; border-radius: 0; box-shadow: 1px 1px 3px #aaa; font-family: courier; font-size: 16px; height: var(--taHeight); line-height: 1; margin: .5em 0; outline: none!important; overflow-wrap: normal; overflow-x: auto; padding: .7em 1em 1em 3em; position: relative; resize: none; scroll-behavior: smooth; transform: scale(var(--taScale)); transform-origin: 0 0; transition: all .2s ease-in-out, background-position 0s ease; white-space: pre; width: calc(100% / var(--taScale)); word-break: keep-all!important; } textarea + textarea { background-color: rgba(255, 255, 221, .75); transform: translateY(calc(var(--taHeight) * (var(--taScale) - 1))) scale(var(--taScale)); } textarea + textarea[data-unknown] { background-color: rgb(255, 240, 240, .65); } textarea + textarea[data-error] { background: none; background-color: #b01; color: #fff; } textarea + textarea.minify { white-space: pre-wrap; } textarea:first-of-type:focus { --taHeight: var(--taHeightFocus); background-color: rgba(240, 248, 255, .75); } textarea:focus + textarea { --taHeight: var(--taHeightBlur); transform: translateY(calc(var(--taHeightFocus) * (var(--taScale) - 1))) scale(var(--taScale)); } .config { position: relative; overflow: visible; z-index: 2; } .unknown { background: #fff; bottom: -1em; box-shadow: 1px 1px 3px #aaa; display: none; font-size: .8em; list-style: none; max-height: calc(var(--taHeight) * var(--taScale)); margin: 7.5px; overflow-y: scroll; padding: 0; position: absolute; right: -1em; scrollbar-width: none; text-align: left; transition: all .2s ease-in-out; width: 21em; } .unknown::-webkit-scrollbar { display: none; } .unknown:before { background: #eee; content: "Properties' Info:"; cursor: pointer; display: block; font-weight: bold; padding: 1em 0; text-align: center; } .unknown li { background: #fff; border-top: 1px dotted rgba(50, 50, 50, 0.3); cursor: help; display: block; overflow-x: scroll; padding: .5em; transition: all .2s ease-in-out; white-space: pre; } .unknown li:hover { background: #f8f8f8; box-shadow: inset 0 0 3px rgba(0,0,0,.2); color: #666; } .unknown li span { display: block; font-size: .8em; margin: 0 0 0 .5em; } .unknown li i { font-weight: bold; } .unknown li b { display: inline-block; font-weight: bold; margin: 0 0 .25em; width: 100%; } .unknown li b.fa-exclamation-circle { color: #333; } .unknown li b.fa-times-circle, .unknown li b.fa-times-circle ~ span > * { color: #b01; } .unknown li b:before, .unknown li b:after { font-weight: normal; } .unknown li b:before { margin: 0 .5em 0 0; } .unknown li b.fa-exclamation-circle:before { color: orange; } .unknown li b:after { content: " (" attr(data-t) ")"; color: #333; display: block; font-size: .6em; font-style: italic; padding: .75em 0 0; } .unknown li b.fa-exclamation-circle:after { content: "(Unsupported: " attr(data-t) ")"; } .unknown li strong{ transition: all .2s ease-in-out; } .unknown li:hover strong{ text-shadow: 0 0 3px; } .unknown.hide { background: #eee; max-height: 3.5em; overflow: hidden; width: 4.5em; } .unknown.hide:before { content: "Info:"; } .unknown.hide * { opacity: 0; pointer-events: none; } .candyBox { box-shadow: 1px 1px 3px #aaa; font-family: courier; font-size: .8em; background: #fff; max-height: 6rem; overflow-y: scroll; position: absolute; text-align: left; width: 99rem; } .candyBox a { cursor: pointer; display: block; padding: .35em .5em; transition: all .175s ease-in-out; } .candyBox a.select, .candyBox a:hover { background: #b01; color: #fff; } .candyBox a span { display: inline-block; white-space: pre; } .btn { align-content: center; display: flex; padding: .5em; } .btn button { -webkit-appearance: none; background-color: #f8f8f8; background-image: linear-gradient(180deg,#f8f8f8,#f1f1f1); border: 1px solid rgba(0,0,0,0.1); color: #333; cursor: pointer; display: block; flex-grow: 1; font-size: 1.5em; height: 1.75em; line-height: 1; overflow: hidden; position: relative; transition: all .2s ease-in-out; } .btn button:active { background: #f8f8f8; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } .btn button:hover { border: 1px solid #4d90fe; outline: none; } .btn button span { display: block; left: 0; opacity: 1; padding: .25em; position: absolute; right: 0; top: 0; transform: translateY(0); transition: all .25s cubic-bezier(.17,.17,.24,1); } .btn button span + span { opacity: 0; transform: translateY(100%); } .btn button.done { pointer-events: none; user-select: none; } .btn button.done span { opacity: 0; transform: translateY(-100%); } .btn button.done span + span { opacity: 1; transform: translateY(0); } @media (min-width: 1100px) { body { margin: 0 auto; max-width: 800px; } .unknown { bottom: calc(-.75em / .8 - 5px); max-height: calc(var(--taHeight) * var(--taScale) * 2); right: calc(-.75em / .8 - 5px - 20em); } .taWrap:focus-within + .config .unknown { box-shadow: 1px 1px 3px #aaa; } }
<head> <link rel="stylesheet" href="http://topia.wikidot.com/csssss/code_/1"> <script src="http://topia.wikidot.com/csssss/code/3"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="wrap"> Indent: <input type="number" value="2" min="0" max="8"> <label> <input type="checkbox" id="min" /> <span>minify</span> </label> <label> <input type="checkbox" id="check" checked /> <span>check properties</span> </label> <div class="taWrap"> <textarea wrap="off">@import url('landscape.css') screen and (orientation:landscape); @import url("sample.css"); @media (max-width: 767px) { .class:before { scrollbar-width: thin; min-width: 80%; content: " "; max-width: 90%; max-width: 99%; transition: all .5s; } } #header h1 {color: red;max-height: unset} @media (max-width: 767px) { .class:before { min-width: 10%; color: #b01; } } #header h1 { margin-left: 120px; padding: 0; flo: left; max-height: 95px; } @keyframes sizeScale {from {width:400px;}100% {width:300px;}}</textarea> <textarea spellcheck="false" wrap="off"></textarea> </div> <div class="config"> <ul class="unknown"></ul> </div> <div class="btn"> <button><span>Copy</span><span>Done</span></button> </div> </div> <script> var _os = (function () { for(var a of ["iPod","iPad","iPhone"]) { if(navigator.userAgent.indexOf(a) > -1) return "iOS"; } if(navigator.userAgent.indexOf("Android") > -1) return "Android"; return "PC"; })(); var t = document.querySelectorAll('textarea'); var w = document.querySelector('.taWrap'); var u = document.querySelector('.unknown'); u.onclick = function(e) { if(u == e.target) u.classList.toggle("hide"); } u.ontouch = function(e) { if(u == e.target) u.classList.toggle("hide"); } var i = document.querySelector('input[type="number"]'); var m = document.querySelector('#min'); var c = document.querySelector('#check'); var btn = document.querySelector('button'); btn.onclick = function(e) { t[1].select(); document.execCommand("copy"); var v = t[1].value.length; t[1].setSelectionRange(v, v); t[1].blur(); t[1].focus(); t[1].blur(); btn.classList.add("done"); setTimeout(function() { btn.classList.remove("done"); }, 750); } var min = false; var check = true; var ipt = (t) => new RegExp("@import (.*?);", t); if(window !== window.parent) {//based on C-take's resizing iframe method var site = `http://${document.referrer.split("http://")[1].split("/")[0]}/`; var _wrap = document.createElement("div"); document.body.appendChild(_wrap); var _old= 0; var url = location.href.replace(/^.*\//,'/'); (function() { var _new = _wrap.getBoundingClientRect().top; if(_new !== _old){ var iframe = document.createElement("iframe"); var _rand = String(Math.floor(Math.random() * 10000)); _wrap.innerHTML = ''; iframe.src = `${site}common--javascript/resize-iframe.html?${_rand}#${_new}${url}`; iframe.style.display = "none"; _wrap.appendChild(iframe); _old = _new; } setTimeout(arguments.callee, 50); })(); } if(_os == "iOS") { t[0].style.overflow = "scroll"; t[1].style.overflow = "scroll"; } t[0].onscroll = function(e) { e.target.style.backgroundPosition = `0 -${e.target.scrollTop}px` } t[1].onscroll = function(e) { e.target.style.backgroundPosition = `0 -${e.target.scrollTop}px` } function indent(x=1) { return " ".repeat(min ? 0 : i.value).repeat(x); } var o; t[0].oninput = function(b) { o = {}; var idx = 0; var _import = []; var unknown_props = []; u.style.display = "none"; u.innerHTML = ""; try { var reg = new RegExp(`([^:])(:${pse_elm.join("|:")})`, "g"); var v = t[0].value.replace(reg, "$1:$2"); if(v.match(ipt())) { _import = v.match(ipt("g")).map(v=>v.replace(/url\([\"\']?(.*?)[\"\']?\)/, 'url("$1")')).sort((a,b)=>(a.length>b.length) ? 1 : -1); v = v.replace(ipt("g"), ""); } var a = `{${v}}`.replace(/\"/g, "##Quote##").replace(/ {2,}|\n *?| $|\/\*.*?\*\//g, "").replace(/ ?\} ?/g, "}").split(/;|(\{|\})/).filter(v=>v).map(v=>{ var a = v.replace(/^ *?| *?$| {2,}/g, ""); if(a == "}") { a = `},`; } else if(a !== "{") { if(a.match(/^[^:]+?: ?[^:].*?$/) && !a.match(pseudo) && !a.match(/@media /)) { a = a.replace(/^(.*?)\: ?(.*?)$/, '"$1": "$2",'); }else { if(a.match(/:$/)) throw new Error("Invalid selector"); a = `"${a}##${idx++}##": `; } } return a; }).join("").replace(/,\}/g, "}").replace(/\},$/, "}"); var b = JSON.parse(a); o = (function _sort(obj) { var o = {}; var k = Object.keys(obj).sort((x, y) => (obj == b) ? 0 : (y.match(/^(?:from)##\d+?##/) || y.match(/^(?:root)##\d+?##/) || x > y) ? 1 : -1); for(var k of k) { var m = k.match(/^(@[a-zA-Z]+?) (.*?)$/); if(m) { o[m[1]] = o[m[1]] || {}; } else if(obj == b) { o["style"] = o["style"] || {}; } var key = m ? m[2] : k; key = key.replace(/##\d+?##$/, ""); var parent = m ? o[m[1]] : (obj == b) ? o["style"] : o; if(obj[k].constructor.name == "Object") { if(parent[key]) { parent[key] = (function _p(a, b){ var _o = {}; var _k = Object.keys(a).concat(Object.keys(b)).filter((v,i,s)=>v&&s.indexOf(v)==i); for(var k of _k) { if(a[k] && b[k]) { if(a[k].constructor.name == "Object" && b[k].constructor.name == "Object") { _o[k] = _p(a[k], b[k]); }else { _o[k] = b[k] || a[k]; } }else { _o[k] = a[k] || b[k]; } } return _o; })(parent[key], _sort(obj[k])); }else { parent[key] = _sort(obj[k]); } }else { parent[key] = obj[k]; } } return o; })(b); o = (function _sort(obj) { var o = {}; var k = Object.keys(obj).sort((x, y) => (obj == o) ? 0 : (y == "from" || y == ":root" || x > y) ? 1 : -1); for(var k of k) { var m = k.match(/^(@[a-zA-Z]+?) (.*?)$/); if(m) { o[m[1]] = o[m[1]] || {}; } else if(obj == b) { o["style"] = o["style"] || {}; } var key = m ? m[2] : k; var parent = m ? o[m[1]] : (obj == b) ? o["style"] : o; if(obj[k].constructor.name == "Object") { parent[key] = _sort(obj[k]); }else { parent[key] = obj[k]; } } return o; })(o); console.log(o); var style = ""; var keyframes = ""; var media = ""; var un = false; var line = _import.length; var un_style = []; var un_keyframes = []; var un_media = []; for(var _k in o["style"]) { line++; var sel = _k.replace(/ $/, "").replace(/##Quote##/g, '"'); style += `${sel} {\n`; for(var __k in o["style"][_k]) { line++; var p = __k.replace(/^ | $/g, ""); style += `${indent()}${p}: ${o["style"][_k][__k]};\n`; if(css_prop.indexOf(p) == -1) { if(!p.match(/--[a-zA-Z]/)) { un_style.push({v: `<b class="fa fa-times-circle" data-t="Unknown Property">${p}</b> <span>line <strong>${min ? 1 : line}</strong></span><span>at "<i>${sel}</i>"</span>`, l: min ? 1 : line}); un = true; } }else { var _t = browser(css_prop_base[p]); if(!_t.check) { un_style.push({v: `<b class="fa fa-exclamation-circle" data-t="${_t.not.join(", ")}">${p}</b> <span>line <strong>${min ? 1 : line}</strong></span><span>at "<i>${sel}</i>"</span>`, l: min ? 1 : line}); } } } line++; style += `}\n`; } for(var _k in o["@keyframes"]) { line++; var sel = _k.replace(/##Quote##/g, '"'); keyframes += `@keyframes ${sel} {\n`; for(var __k in o["@keyframes"][_k]) { line++; keyframes += `${indent()}${__k} {\n`; for(var ___k in o["@keyframes"][_k][__k]) { line++; var p = ___k.replace(/^ | $/g, ""); keyframes += `${indent(2)}${p}: ${o["@keyframes"][_k][__k][___k]};\n`; if(css_prop.indexOf(p) == -1) { if(!p.match(/--[a-zA-Z]/)) { un_keyframes.push({v: `<b class="fa fa-times-circle" data-t="Unknown Property">${p}</b> <span>line <strong>${min ? 1 : line}</strong></span><span>at "<i>${__k}</i>"</span><span>at "@keyframes <i>${sel}</i>"</span>`, l: min ? 1 : line}); un = true; } }else { var _t = browser(css_prop_base[p]); if(!_t.check) { un_keyframes.push({v: `<b class="fa fa-exclamation-circle" data-t="${_t.not.join(", ")}">${p}</b> <span>line <strong>${min ? 1 : line}</strong></span><span>at "<i>${__k}</i>"</span><span>at "@keyframes <i>${sel}</i>"</span>`, l: min ? 1 : line}); } } } line++; keyframes += `${indent()}}\n`; } line++; keyframes += `}\n`; } for(var _k in o["@media"]) { line++; var sel = _k.replace(/##Quote##/g, '"'); media += `@media ${sel} {\n`; for(var __k in o["@media"][_k]) { line++; media += `${indent()}${__k} {\n`; for(var ___k in o["@media"][_k][__k]) { line++; var p = ___k.replace(/^ | $/g, ""); media += `${indent(2)}${p}: ${o["@media"][_k][__k][___k]};\n`; if(css_prop.indexOf(p) == -1) { if(!p.match(/--[a-zA-Z]/)) { un_media.push({v: `<b class="fa fa-times-circle" data-t="Unknown Property">${p}</b> <span>line <strong>${min ? 1 : line}</strong></span><span>at "<i>${__k}</i>"</span><span>at "@media <i>${sel}</i>"</span>`, l: min ? 1 : line}); un = true; } }else { var _t = browser(css_prop_base[p]); if(!_t.check) { un_media.push({v: `<b class="fa fa-exclamation-circle" data-t="${_t.not.join(", ")}">${p}</b> <span>line <strong>${min ? 1 : line}</strong></span><span>at "<i>${__k}</i>"</span><span>at "@media <i>${sel}</i>"</span>`, l: min ? 1 : line}); } } } line++; media += `${indent()}}\n`; } line++; media += `}\n`; } t[1].value = `${_import.join("\n")}\n${style}${keyframes}${media}`.replace(/##Quote##/g, '"').replace(/^\n/, ""); if(min) { t[1].value = t[1].value.replace(/\n/g, ""); } t[1].removeAttribute("data-error", ""); t[1].removeAttribute("data-unknown", ""); unknown_props = un_style.concat(un_keyframes).concat(un_media); if(unknown_props.length && check) { u.style.display = "block"; u.innerHTML = unknown_props.map(v=>`<li onclick="getLine(${v.l})">${v.v}</li>`).join(""); if(un) t[1].setAttribute("data-unknown", ""); } }catch(e) { t[1].value = `¯\\_(ツ)_/¯ I've encountered an error. Maybe the style you inputted is invalid, or you've found some bugs of me. ---- ${e}`; t[1].setAttribute("data-error", ""); } } function getLine(n) { var a = t[1].value.split(/(\n)/); var b = a.splice((n - 1) * 2); var c = b.splice(1); var d = {before: a.join(""), target: b.join(""), after: c.join("")}; t[1].setSelectionRange(d.before.length, d.before.length); t[1].blur(); t[1].focus(); t[1].setSelectionRange(d.before.length, (d.before + d.target).length); t[1].focus(); return d; } function candyBox() { for(var a of document.querySelectorAll(".candyBox")) { a.remove(); } function getCaret(node) { if(node.selectionStart) { return node.selectionStart; }else if (!document.selection) { return 0; } var c = "\001", sel = document.selection.createRange(), dul = sel.duplicate(), len = 0; dul.moveToElementText(node); sel.text = c; len = dul.text.indexOf(c); sel.moveStart('character',-1); sel.text = ""; return len; } var index = getCaret(t[0]); var before = t[0].value.substring(0, index); var after = t[0].value.substring(index); var bef_m = before.match(/([\s\S]*?)(\s|\{|;|\()([a-z\-]+?)$/); var aft_m = after.match(/^([a-z\-]*?)(\)|\}|\:|\s|$)([\s\S]*?)$/); if(bef_m && aft_m) { var bef = bef_m[1] + bef_m[2]; var word = bef_m[3] + aft_m[1]; var aft = aft_m[2] + aft_m[3]; var cand_base = css_prop.filter(v=>v.match(new RegExp(`^${word}`))); var cand = cand_base.filter(v=>!v.match(/^\-/)).sort(); var cand_pre = cand_base.filter(v=>v.match(/^\-/)).sort(); cand = cand.concat(cand_pre); if(!cand.length) return; var div = document.createElement("div"); var box = document.createElement("div"); box.setAttribute("class", "candyBox"); var t_style = window.getComputedStyle(t[0]); for(var k in t_style) { div.style[k] = t_style[k]; } div.innerHTML = before; var span = document.createElement('span'); span.innerHTML = ' '; div.scrollTop = div.scrollHeight; div.appendChild(span); document.body.appendChild(div); var d = div.getBoundingClientRect(); var s = span.getBoundingClientRect(); var r = {top: s.top - d.top, left: s.left - d.left}; div.remove(); box.setAttribute("style", `top: calc(${r.top}px + 2em - ${t[0].scrollTop * .75}px);left:calc(${r.left}px + 1em);`); w.appendChild(box); var width = 0; for(var c of cand) { var l = document.createElement("a"); var s = document.createElement("span"); s.innerHTML = c; l.appendChild(s); box.appendChild(l); width = width < s.clientWidth ? s.clientWidth : width; l.onclick = function(e) { t[0].style.transition = "all 0s"; var a = bef + e.target.innerText; t[0].value = a + aft; t[0].oninput(); t[0].setSelectionRange(a.length, a.length); t[0].focus(); box.remove(); t[0].style.transition = null; } } box.style.width = `calc(1.8em + ${width}px)`; } } function browser(o) { var a = {check: Boolean(o.c && o.f && o.e && o.i && o.a), not: []}; if(!o.c) a.not.push("Chrome"); if(!o.f) a.not.push("Firefox"); if(!o.e) a.not.push("Edge"); if(!o.i) a.not.push("iOS"); if(!o.a) a.not.push("Android"); return a; } m.onchange = function(e) { e.target.checked ? ( min = true, i.setAttribute("disabled", "") ) : ( min = false, i.removeAttribute("disabled") ); t[1].classList.toggle("minify"); t[0].oninput(); }; c.onchange = function(e) { e.target.checked ? ( check = true ) : ( check = false ); t[0].oninput(); }; i.onchange = () => t[0].oninput(); i.oninput = () => t[0].oninput(); t[0].onclick = () => candyBox(); t[0].ontouch = () => candyBox(); t[0].onblur = () => { for(var a of document.querySelectorAll(".candyBox")) { setTimeout(()=>(a.remove()), 350); } } t[0].onkeydown = function(e) { if(e.ctrlKey) { if(e.key == "ArrowUp" || e.key == "ArrowDown" || e.key == "Enter" || e.key == "Control") { e.preventDefault(); return false; } } } t[0].onkeyup = function(e) { var p = document.querySelector(".candyBox"); var a = document.querySelector(".candyBox > a"); var a2 = document.querySelector(".candyBox > a + a"); var b = document.querySelector(".candyBox > a.select"); var c = document.querySelector(".candyBox > a.select + a"); var d = document.querySelector(".candyBox > a + a.select"); var tgt = b; if(a && e.ctrlKey) { var h = a.getBoundingClientRect().top; if(e.key == "ArrowUp") { if(!b) { a.classList.add("select"); tgt = a; } else if(d) { b.classList.remove("select"); tgt = b.previousElementSibling; tgt.classList.add("select"); } e.preventDefault(); p.scrollTop = tgt.getBoundingClientRect().top - h; } else if(e.key == "ArrowDown") { if(!b) { tgt = (a2 || a); tgt.classList.add("select"); } else if(c) { b.classList.remove("select"); c.classList.add("select"); tgt = c; } e.preventDefault(); p.scrollTop = tgt.getBoundingClientRect().top - h; } else if(e.key == "Enter" && b) { b.click(); e.preventDefault(); } else if(e.key == "v") { candyBox(); } } else if(e.key !== "Control") { candyBox(); } } window.onload = function() { t[0].oninput(); } </script> </body>
page revision: 490, last edited: 15 Aug 2020 13:01