Css Parser Ver2 1
Css Parser Ver2 » Css Parser Ver2 1
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" type="text/css" href="../css-parser-ver2-1-style/1"> <link rel="stylesheet" type="text/css" href="2"> <script src="../css-parser-ver2/1" defer></script> <script src="3" defer></script> </head> <body> <textarea></textarea> <div class="check"></div> <div id="content"></div> </body>
::-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 * { scrollbar-color: rgba(50,50,50,0.1) rgba(0,0,0,0); scrollbar-width: thin; } body { color: #333; font-family: sans-serif; margin: 0; padding: .75rem; -ms-overflow-style: none; scrollbar-width: none; } textarea { -webkit-appearance: none; background: #fff; border: 1px solid transparent; border-radius: 0; box-shadow: 1px 1px 3px #aaa; box-sizing: border-box; color: #333; display: block; font-family: Courier, monospace; font-size: .8rem; height: 100px; line-height: 1.4; margin: 0; padding: 0 .5em; resize: none; transition: all .2s; white-space: pre-wrap!important; width: 100%; word-break: break-all; } textarea:focus { border-color: #4d90fe; height: 350px; outline: none; } #content { background: #f0f8ff; box-shadow: 1px 1px 3px #aaa; overflow-x: scroll; padding: 1em 0.5em; } .check { background: #fff; box-shadow: 1px 1px 3px #aaa; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 1.5em 0 0.5em; padding: 0.5em 1em; } h1 { font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica; font-size: 1.1em; } .check h1 { flex-grow: 1; width: 100%; } .check ul { flex-grow: 1; font-size: .8em; list-style: none; margin: 0 0 1em; padding: 0 0 0 1.5em; width: 100%; } .check ul .value { font-style: italic; } .check ul .value[data-v="true"] { color: #3bc73b; } .browser_box { --size: 30px; filter: drop-shadow(1px 1px 3px #aaa); height: var(--size); margin: 0 .5em 1em; position: relative; width: var(--size); } .browser_box::after { bottom: -1.5em; color: #888; content: '?'; font-size: .65em; position: absolute; text-align: center; width: 100%; } .browser_box.nonsupported::after { color: #901; content: '-'; } .browser_box[data-version]::after { color: #3bc73b; content: attr(data-version); } .browser_box ._icon_a, .browser_box ._icon_b { height: 100%; position: absolute; top: 0; left: 0; width: 100%; } .browser_box[class*="chrome"] ._icon_a { background: var(--chrome) top left/90% no-repeat; } .browser_box.edge ._icon_a { background: var(--edge_new) center/100% no-repeat; } .browser_box.ie ._icon_a { background: var(--explorer) center/95% no-repeat; } .browser_box[class*="firefox"] ._icon_a { background: var(--firefox) center/95% no-repeat; } .browser_box[class*="opera"] ._icon_a { background: var(--opera) center/90% no-repeat; } .browser_box[class*="safari"] ._icon_a { background: var(--safari) center/90% no-repeat; } .browser_box[class*="samsung"] ._icon_a { background: var(--samsung) center/95% no-repeat; } .browser_box.webview_android ._icon_a { background: #a5cb3a; -webkit-mask-image: var(--android); mask-image: var(--android); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .browser_box[class*="android"]:not(.webview_android) ._icon_b { background: var(--android) right bottom/75% no-repeat; } .browser_box.safari_ios ._icon_b, .browser_box[class*="mobile"] ._icon_b { background: var(--mobile) right bottom/55% no-repeat; }
var icon = name => { var wrap = document.createElement('div'); wrap.classList.add('browser_box', name); var a = document.createElement('div'); wrap.appendChild(a); a.classList.add('_icon_a'); var b = document.createElement('div'); wrap.appendChild(b); b.classList.add('_icon_b'); return wrap; }; var tarea = document.querySelector('textarea'); var box = document.querySelector('.check'); var content = document.querySelector('#content'); tarea.value = ` @charset "utf-8"; @import url(http://example.com/style.css); @font-face { font-family: "Open Sans"; src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); } @keyframes slide { 0%, 30% { color: aqua; transform: translateX(0%); } 100% { color: rgba(100, 210, 80); transform: translateX(100%); } } @supports (display: flex) and (position: sticky) { @media screen and (min-width: 900px) { article, .article { -webkit-appearance: none; -moz-binding: none; -moz-context-properties: none; display: flex; position: sticky; } } } body > .box li.item [href*="article"], body > .box li.item a.article { color: #901; color:#000; box-shadow: inset -1px -1px 3px rgba(255, 255, 255, .9), inset -1px -1px 5px rgba(255, 225, 200, .9), 1px 1px 3px #aaa; } a {color:red}li a.target{color:#000}`; (async () => { var _fetch = await fetch('/local--files/css-parser-ver2/properties.json'); var data = await _fetch.json(); for(var k in data) { data[k].origin = k; for(var b in data[k].support) { var p = data[k].support[b].prefix; p && !k.match(/^-/) && (data[p[0] + k] = data[p[0] + k] || data[k]); } } var h1 = document.createElement('h1'); box.appendChild(h1); h1.innerText = '-'; var ul = document.createElement('ul'); box.appendChild(ul); var label = ['chrome', 'chrome_android', 'edge', 'firefox', 'firefox_android', 'ie', 'opera', 'opera_android', 'safari', 'safari_ios', 'samsunginternet_android', 'webview_android']; var browser = label.reduce((p, v) => { p[v] = icon(v); box.appendChild(p[v]); return p; }, {}); var _cb = e => { var name = e.currentTarget.dataset.name; var prop = data[name]; console.log(name); ul.innerHTML = Object.entries(prop?.status || { experimental: '-', standard_track: '-', deprecated: '-' }) .map(v => `<li><b>${v[0]}:</b> <span class="value" data-v="${v[1]}">${v[1]}</span></li>`) .join(''); h1.innerText = (prop ? '' : '(?) ') + (prop?.origin || name); for(var n in browser) { browser[n].classList.remove('nonsupported'); delete browser[n].dataset.version; if(prop) { var b = prop.support[n]; b.version_added ? (browser[n].dataset.version = b.version_added) : browser[n].classList.add('nonsupported'); b.prefix && (browser[n].title = b.prefix.join(': ')); } } }; var event = e => { var style = new StyleRoot(tarea.value); var tree = style.html(4, 0, _cb); content.innerHTML = ''; content.appendChild(tree); }; tarea.addEventListener('change', event); event(); })();