<pre id="output"></pre>
pre {
padding: 0 1em;
tab-size: 2;
font: 80%/1.4 Consolas, Monaco, monospace;
}
let style = document.body.style;
let shorthands = {};
let properties = Object.getOwnPropertyNames(style.hasOwnProperty("background")? style : style.__proto__);
properties = properties.filter(p => style[p] === "") // drop functions etc
.map(prop => { // de-camelCase
prop = prop.replace(/[A-Z]/g, function($0) { return '-' + $0.toLowerCase() });
if (prop.indexOf("webkit-") > -1) {
prop = "-" + prop;
}
return prop;
});
for (let p of properties) {
style.setProperty(p, "unset");
let props = [...style];
if (props.length > 1) {
// It's a shorthand!
shorthands[p] = props;
}
style.setProperty(p, "");
}
output.textContent = JSON.stringify(shorthands, null, "\t");
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.