JSFiddle - React, Tailwind, and code Playground

by pseudosavant

HTML

<div id="log"></div>

CSS

ul { margin-bottom: 15px; }

JavaScript

var log = document.getElementById('log'),
    i = '',
    proprietary = [],
    total = 0,
    html = "";
for (i in log.style) {
    if ( /^ms|webkit|moz/.test(i)) {
        proprietary.push(i);
        
        // TODO: use multiple HTML objects
        // TODO: Check out using computed style
        // TODO: Use object to deal with duplicate properties
    }
    total++;
}

var x = proprietary.length,
    y = total,
    p = +(x / y).toFixed(2) * 100;
          
html += "<ul>" +
            "<li>" + p + "% vendor prefixed / proprietary CSS</li>" +
            "<li>" + x + " vendor prefixed properties" +
            "<li>" + (y - x) + " standardized properties</li>" +
        "</ul>";

html += "<ul><li>" +proprietary.join('</li><li>') + "</li></ul>";

log.innerHTML = html;