HTML、CSSの実装検証

HTML要素とその固有property(tagに記述できる属性等)、CSSの実装状況をBrowserで確認する簡易的な方法を紹介。

HTML

let ks=a=>Object.keys(a).sort().map((a,b)=>b+" "+a);
let a=Object.getOwnPropertyNames(this).filter((a,b)=>/(HTML|SVG)\w+Element/.test(a));
let b=[],c=0;
for(a of a)b[c++]=c+" "+a+"</h2>"+ks(this[a].prototype).join("<br>");
document.write("<h2>",b.join("<h2>"))

ol形式

let a=Object.getOwnPropertyNames(this).filter(a=>/(HTML|SVG)\w+Element/.test(a));
let b=[];
for(a of a)b.push("<h2>"+a+"</h2><ol><li>"+Object.keys(this[a].prototype).sort().join("<li>"))
document.write(b.join("</ol>"))

CSS

.replace以降を加えるとCSSそのまんまという感じになる。しかし一部変えてはならないものもある(cssText、setProperty等)

let a=document.lastChild.style,b=[],c=0;
for(a in a)b[c]=c+++" "+a//.replace(/[A-Z]/g,a=>"-"+a.toLowerCase())
document.write(b.join("<br>"))