Css Parser 1
Css Parser » Css Parser 1
do not input @support methods
specificity: Displaying with CSS-specificity (link).
filter: Deleting unnecessary selectors for the HTML-source.
minified: Minifying CSS.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script src="http://topia.wikidot.com/css-parser/code/1"></script> <script src="http://topia.wikidot.com/csssss/code/3"></script> <style> @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;1,300&display=swap'); ::selection { background: #4d90fe; color: #fff; } ::-webkit-scrollbar { border: solid 1px rgba(0,0,0,0); height: 9px; width: 9px; } ::-webkit-scrollbar-thumb { background: rgba(50,50,50,0.1); } ::-webkit-scrollbar-track { background: rgba(0,0,0,0); } :root * { font-family: 'IBM Plex Mono',monospace; scrollbar-color: rgba(50,50,50,0.1) rgba(0,0,0,0); scrollbar-width: thin; transition: all .2s ease-in-out, outline 0s; } :root *:not(.hljs):focus { outline: none!important; } body { color: #333; margin: 0; padding: 0 .75rem; -ms-overflow-style: none; scrollbar-width: none; } body::-webkit-scrollbar { display: none; } .content { margin: 0 auto; max-width: 900px; } hr { border: solid #bbb; border-width: 1px 0 0; } textarea { -webkit-appearance: none; background: #fff; border: 1px solid transparent; border-radius: 0; box-shadow: 1px 1px 3px #aaa!important; box-sizing: border-box; caret-color: #000; color: transparent; display: block; font-size: .8rem; height: 100%; line-height: 1.4; margin: 0; padding: 0 .5em; resize: none; white-space: pre-wrap!important; width: 100%; word-break: break-all; } textarea::selection { background: #4d90fe; color: transparent; } textarea:focus { border-color: #4d90fe; } div.css, div.html { cursor: text; height: 100px; margin: 0 0 1em; position: relative; } #csssource, #htmlsource { height: 100%; left: 0; line-height: 1.4; margin: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } #csssource code.css, #htmlsource code.html { background: rgba(0,0,0,0); border: 1px solid transparent; box-shadow: none; box-sizing: border-box; color: #a97; font-size: .8rem; height: 100%; padding: 0 .5em; white-space: pre-wrap!important; word-break: break-all; } #csssource code.html *, #htmlsource code.html * { font-weight: normal; } #html:disabled + #htmlsource code.html, #html:disabled + #htmlsource code.html * { color: #aaa; } .wrap { background: #fff; box-shadow: 1px 1px 3px #aaa; display: flex; flex-wrap: wrap; justify-content: center; margin: .5em 0 1em; padding: .5em; } .wrap > * { display: inline-block; flex-grow: 1; text-align: center; } input[type="number"] { -moz-appearance: textfield; -webkit-appearance: none; border: 1px solid transparent; border-radius: 0; box-shadow: 1px 1px 3px #aaa; box-sizing: border-box; caret-color: #333; color: #b01; font-size: 16px; padding: .25em 0; text-align: center; width: 5em; } input[type="number"]:focus { border: 1px solid #4d90fe; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #html:disabled, input[type="number"]:disabled { background: rgba(50,50,50,.25); color: #aaa; } label { margin: 0 0 0 1em; } label input { display: none; } label input:checked + span::after { opacity: 1; transform: rotate(45deg) scale3d(1,1,1); } label input:checked + span::before { border-color: #666; } label span { box-sizing: border-box; cursor: pointer; display: inline-block; padding: 5px 0 5px 30px; position: relative; width: auto; } label span::after { border-bottom: 3px solid #b01; border-right: 6px 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 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; } pre code { box-shadow: 1px 1px 3px #aaa; font-family: 'IBM Plex Mono',monospace; font-size: .8em; scrollbar-color: rgba(250,250,250,0.5) rgba(0,0,0,0); text-shadow: 1px 1px 3px rgba(80,80,80,.2); } #result code { max-height: 1500px; } pre code::-webkit-scrollbar-thumb { background: rgba(250,250,250,0.5); } pre code span { font-weight: normal!important; } .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { color: #3a6; font-style: italic; } .hljs-attribute.err_atr { background: #3a6; color: #fff; transition: all 0s; } .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; font-style: italic; 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); } </style> </head> <body> <div class="content"> <div class="wrap"> <span>Indent: <input type="number" id="indent" value="2" min="2" max="8" step="2"></span> <label><input type="checkbox" id="specificity"><span>specificity</span></label> <label><input type="checkbox" id="filter" checked><span>filter</span></label> <label><input type="checkbox" id="minified"><span>minified</span></label> </div> <div class="css"> <textarea id="css" placeholder="css" spellcheck="false">/* input the style of your site */ a { color: blue; } pre { color: #333; margin: 0; box-shadow: 0 0 3px rgba(0,0,0,.5), 0 0 5px rgba(0,0,0,.25); } pre { margin: .5em; } @media (max-width: 767px) {pre.test1, div[src*="test"] pre {color: red;}} @keyframes anim {0%,99% {color: red;}100% {color: blue;}} .test1 { padding: 0; flo: left; } .test2 { padding: .5em; }</textarea> <pre id="csssource"><code class="css"></code></pre> </div> <div class="html"> <textarea id="html" placeholder="html" spellcheck="false"><!DOCTYPE html> <html> <head> </head> <body> <!-- input the HTML-source of your site --> <pre class="test1">test!</pre> </body> </html></textarea> <pre id="htmlsource"><code class="html"></code></pre> </div> <hr> <div class="btn"> <button><span>Copy</span><span>Done</span></button> </div> <pre id="result"><code class="css"></code></pre> </div> <script> var btn = document.querySelector('button'); var css = document.querySelector("#css"); var html = document.querySelector("#html"); var result = document.querySelector("#result code"); var spec = document.querySelector("#specificity"); var filter = document.querySelector("#filter"); var minified = document.querySelector("#minified"); var indent = document.querySelector("#indent"); var htmlsource = document.querySelector("#htmlsource code"); var htmlsource_p = document.querySelector("#htmlsource"); var htmlwrap = document.querySelector("div.html"); var csssource = document.querySelector("#csssource code"); var csssource_p = document.querySelector("#csssource"); var csswrap = document.querySelector("div.css"); var source = ""; 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 _f() { 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(_f, 250); })(); } function resizeTA(x) { htmlsource_p.style.height = "unset"; csssource_p.style.height = "unset"; htmlwrap.style.height = (htmlsource_p.scrollHeight + (x || 20)) + "px"; csswrap.style.height = (csssource_p.scrollHeight + (x || 20)) + "px"; htmlsource_p.style.height = "100%"; csssource_p.style.height = "100%"; } function _calc() { htmlsource.textContent = html.value + "\u200b"; csssource.textContent = css.value + "\u200b"; hljs.highlightBlock(htmlsource); hljs.highlightBlock(csssource); resizeTA(); try { var a = css.value.trim(), b = html.value.trim(), c; c = new _CSS(a, (!filter.checked || b=="") ? null : b); var d = {}; if(spec.checked) { d.specificity = true; } if(filter.checked && b!=="") { d.filter = true; } if(minified.checked) { d.min = true; }else { d.space = indent.value; } var str = c.string(d); result.innerHTML = str; source = str; hljs.highlightBlock(result); for(var a of document.querySelectorAll("#csssource .hljs-attribute, #result .hljs-attribute")) { if(css_prop.indexOf(a.innerText) == -1) { a.classList.add("err_atr"); } } }catch(_) { console.log(_) } } for(var e of [css, html]) { e.oninput = function() { _calc(); } } for(var e of [spec, filter, minified, indent]) { e.onchange = function() { if(filter.checked) {html.removeAttribute("disabled")} else if(!filter.checked) {html.setAttribute("disabled", "")} if(!minified.checked) {indent.removeAttribute("disabled")} else if(minified.checked) {indent.setAttribute("disabled", "")} _calc(); } } _calc(); resizeTA(30); btn.onclick = function(e) { var t = document.createElement("textarea"); document.body.appendChild(t); t.value = source; t.select(); document.execCommand("copy"); t.remove(); btn.classList.add("done"); setTimeout(function() { btn.classList.remove("done"); }, 750); } </script> </body> </html>