PhantomJS script to collect most used CSS property names (supported by WebKit)

most_used_css_property_names.js

// phantomjs --web-security=no most_used_css_property_names.js

var urls = [
    'http://google.com',
    'http://facebook.com',
    'http://youtube.com',
    'http://yahoo.com',
    'https://github.com/',
    'http://twitter.com/',
    'http://en.wikipedia.org/wiki/Main_Page',
    'http://wordpress.com/',
    'http://www.amazon.com/',
    'http://www.apple.com/iphone/features/',
    'http://www.linkedin.com/',
    'http://imdb.com/',
    'http://www.flickr.com/explore/',
    'http://stackoverflow.com/'
];

function runOnPage() {
    var properties = {
        '-webkit-align-content': 0,
        '-webkit-align-items': 0,
        '-webkit-align-self': 0,
        '-webkit-animation': 0,
        '-webkit-animation-delay': 0,
        '-webkit-animation-direction': 0,
        '-webkit-animation-duration': 0,
        '-webkit-animation-fill-mode': 0,
        '-webkit-animation-iteration-count': 0,
        '-webkit-animation-name': 0,
        '-webkit-animation-play-state': 0,
        '-webkit-animation-timing-function': 0,
        '-webkit-appearance': 0,
        '-webkit-backface-visibility': 0,
        '-webkit-background-clip': 0,
        '-webkit-background-composite': 0,
        '-webkit-background-origin': 0,
        '-webkit-background-size': 0,
        '-webkit-border-fit': 0,
        '-webkit-border-horizontal-spacing': 0,
        '-webkit-border-image': 0,
        '-webkit-border-vertical-spacing': 0,
        '-webkit-box-align': 0,
        '-webkit-box-decoration-break': 0,
        '-webkit-box-direction': 0,
        '-webkit-box-flex': 0,
        '-webkit-box-flex-group': 0,
        '-webkit-box-lines': 0,
        '-webkit-box-ordinal-group': 0,
        '-webkit-box-orient': 0,
        '-webkit-box-pack': 0,
        '-webkit-box-reflect': 0,
        '-webkit-box-shadow': 0,
        '-webkit-clip-path': 0,
        '-webkit-color-correction': 0,
        '-webkit-column-axis': 0,
        '-webkit-column-break-after': 0,
        '-webkit-column-break-before': 0,
        '-webkit-column-break-inside': 0,
        '-webkit-column-count': 0,
        '-webkit-column-gap': 0,
        '-webkit-column-progression': 0,
        '-webkit-column-rule': 0,
        '-webkit-column-rule-color': 0,
        '-webkit-column-rule-style': 0,
        '-webkit-column-rule-width': 0,
        '-webkit-column-span': 0,
        '-webkit-column-width': 0,
        '-webkit-filter': 0,
        '-webkit-flex': 0,
        '-webkit-flex-basis': 0,
        '-webkit-flex-direction': 0,
        '-webkit-flex-grow': 0,
        '-webkit-flex-shrink': 0,
        '-webkit-flex-wrap': 0,
        '-webkit-flow-from': 0,
        '-webkit-flow-into': 0,
        '-webkit-font-kerning': 0,
        '-webkit-font-smoothing': 0,
        '-webkit-font-variant-ligatures': 0,
        '-webkit-grid-column': 0,
        '-webkit-grid-columns': 0,
        '-webkit-grid-row': 0,
        '-webkit-grid-rows': 0,
        '-webkit-highlight': 0,
        '-webkit-hyphenate-character': 0,
        '-webkit-hyphenate-limit-after': 0,
        '-webkit-hyphenate-limit-before': 0,
        '-webkit-hyphenate-limit-lines': 0,
        '-webkit-hyphens': 0,
        '-webkit-justify-content': 0,
        '-webkit-line-align': 0,
        '-webkit-line-box-contain': 0,
        '-webkit-line-break': 0,
        '-webkit-line-clamp': 0,
        '-webkit-line-grid': 0,
        '-webkit-line-snap': 0,
        '-webkit-locale': 0,
        '-webkit-margin-after': 0,
        '-webkit-margin-after-collapse': 0,
        '-webkit-margin-before': 0,
        '-webkit-margin-before-collapse': 0,
        '-webkit-marquee': 0,
        '-webkit-marquee-direction': 0,
        '-webkit-marquee-increment': 0,
        '-webkit-marquee-repetition': 0,
        '-webkit-marquee-style': 0,
        '-webkit-mask': 0,
        '-webkit-mask-attachment': 0,
        '-webkit-mask-box-image': 0,
        '-webkit-mask-box-image-outset': 0,
        '-webkit-mask-box-image-repeat': 0,
        '-webkit-mask-box-image-slice': 0,
        '-webkit-mask-box-image-source': 0,
        '-webkit-mask-box-image-width': 0,
        '-webkit-mask-clip': 0,
        '-webkit-mask-composite': 0,
        '-webkit-mask-image': 0,
        '-webkit-mask-origin': 0,
        '-webkit-mask-position': 0,
        '-webkit-mask-repeat': 0,
        '-webkit-mask-size': 0,
        '-webkit-nbsp-mode': 0,
        '-webkit-order': 0,
        '-webkit-perspective': 0,
        '-webkit-perspective-origin': 0,
        '-webkit-print-color-adjust': 0,
        '-webkit-region-break-after': 0,
        '-webkit-region-break-before': 0,
        '-webkit-region-break-inside': 0,
        '-webkit-region-overflow': 0,
        '-webkit-rtl-ordering': 0,
        '-webkit-shape-inside': 0,
        '-webkit-shape-outside': 0,
        '-webkit-svg-shadow': 0,
        '-webkit-tap-highlight-color': 0,
        '-webkit-text-combine': 0,
        '-webkit-text-decorations-in-effect': 0,
        '-webkit-text-emphasis': 0,
        '-webkit-text-emphasis-color': 0,
        '-webkit-text-emphasis-position': 0,
        '-webkit-text-emphasis-style': 0,
        '-webkit-text-fill-color': 0,
        '-webkit-text-orientation': 0,
        '-webkit-text-security': 0,
        '-webkit-text-stroke': 0,
        '-webkit-text-stroke-color': 0,
        '-webkit-text-stroke-width': 0,
        '-webkit-transform': 0,
        '-webkit-transform-origin': 0,
        '-webkit-transform-style': 0,
        '-webkit-transition': 0,
        '-webkit-transition-delay': 0,
        '-webkit-transition-duration': 0,
        '-webkit-transition-property': 0,
        '-webkit-transition-timing-function': 0,
        '-webkit-user-drag': 0,
        '-webkit-user-modify': 0,
        '-webkit-user-select': 0,
        '-webkit-widget-region': 0,
        '-webkit-wrap': 0,
        '-webkit-wrap-flow': 0,
        '-webkit-wrap-margin': 0,
        '-webkit-wrap-padding': 0,
        '-webkit-wrap-through': 0,
        '-webkit-writing-mode': 0,
        'alignment-baseline': 0,
        'background': 0,
        'background-attachment': 0,
        'background-clip': 0,
        'background-color': 0,
        'background-image': 0,
        'background-origin': 0,
        'background-position': 0,
        'background-repeat': 0,
        'background-size': 0,
        'baseline-shift': 0,
        'border': 0,
        'border-bottom': 0,
        'border-bottom-color': 0,
        'border-bottom-left-radius': 0,
        'border-bottom-right-radius': 0,
        'border-bottom-style': 0,
        'border-bottom-width': 0,
        'border-collapse': 0,
        'border-image': 0,
        'border-image-outset': 0,
        'border-image-repeat': 0,
        'border-image-slice': 0,
        'border-image-source': 0,
        'border-image-width': 0,
        'border-left': 0,
        'border-left-color': 0,
        'border-left-style': 0,
        'border-left-width': 0,
        'border-right': 0,
        'border-right-color': 0,
        'border-right-style': 0,
        'border-right-width': 0,
        'border-top': 0,
        'border-top-color': 0,
        'border-top-left-radius': 0,
        'border-top-right-radius': 0,
        'border-top-style': 0,
        'border-top-width': 0,
        'bottom': 0,
        'box-shadow': 0,
        'box-sizing': 0,
        'caption-side': 0,
        'clear': 0,
        'clip': 0,
        'clip-path': 0,
        'clip-rule': 0,
        'color': 0,
        'color-interpolation': 0,
        'color-interpolation-filters': 0,
        'color-rendering': 0,
        'cursor': 0,
        'direction': 0,
        'display': 0,
        'dominant-baseline': 0,
        'empty-cells': 0,
        'fill': 0,
        'fill-opacity': 0,
        'fill-rule': 0,
        'filter': 0,
        'float': 0,
        'flood-color': 0,
        'flood-opacity': 0,
        'font': 0,
        'font-family': 0,
        'font-size': 0,
        'font-style': 0,
        'font-variant': 0,
        'font-weight': 0,
        'glyph-orientation-horizontal': 0,
        'glyph-orientation-vertical': 0,
        'height': 0,
        'image-rendering': 0,
        'kerning': 0,
        'left': 0,
        'letter-spacing': 0,
        'lighting-color': 0,
        'line-height': 0,
        'list-style': 0,
        'list-style-image': 0,
        'list-style-position': 0,
        'list-style-type': 0,
        'margin': 0,
        'margin-bottom': 0,
        'margin-left': 0,
        'margin-right': 0,
        'margin-top': 0,
        'marker': 0,
        'marker-end': 0,
        'marker-mid': 0,
        'marker-start': 0,
        'mask': 0,
        'max-height': 0,
        'max-width': 0,
        'min-height': 0,
        'min-width': 0,
        'opacity': 0,
        'orphans': 0,
        'outline': 0,
        'outline-color': 0,
        'outline-style': 0,
        'outline-width': 0,
        'overflow': 0,
        'overflow-wrap': 0,
        'overflow-x': 0,
        'overflow-y': 0,
        'padding': 0,
        'padding-bottom': 0,
        'padding-left': 0,
        'padding-right': 0,
        'padding-top': 0,
        'page': 0,
        'page-break-after': 0,
        'page-break-before': 0,
        'page-break-inside': 0,
        'pointer-events': 0,
        'position': 0,
        'resize': 0,
        'right': 0,
        'shape-rendering': 0,
        'speak': 0,
        'stop-color': 0,
        'stop-opacity': 0,
        'stroke': 0,
        'stroke-dasharray': 0,
        'stroke-dashoffset': 0,
        'stroke-linecap': 0,
        'stroke-linejoin': 0,
        'stroke-miterlimit': 0,
        'stroke-opacity': 0,
        'stroke-width': 0,
        'tab-size': 0,
        'table-layout': 0,
        'text-align': 0,
        'text-anchor': 0,
        'text-decoration': 0,
        'text-indent': 0,
        'text-overflow': 0,
        'text-rendering': 0,
        'text-shadow': 0,
        'text-transform': 0,
        'top': 0,
        'unicode-bidi': 0,
        'vector-effect': 0,
        'vertical-align': 0,
        'visibility': 0,
        'white-space': 0,
        'widows': 0,
        'width': 0,
        'word-break': 0,
        'word-spacing': 0,
        'word-wrap': 0,
        'writing-mode': 0,
        'z-index': 0,
        'zoom': 0
    };

    for (var i = 0; i < document.styleSheets.length; i++) {
        traverseProperties(document.styleSheets[i]);
    }

    function traverseProperties(stylesheet) {
        var rules = stylesheet.cssRules;
        for (var i = 0, ii = rules.length; i < ii; i++) {
            var rule = rules[i];
            if (rule.type === 1) {
                var style = rule.style;
                for (var j = 0, jj = style.length; j < jj; j++) {
                    var name = style[j];
                    properties[name]++;
                }
            } else if (rule.cssRules) {
                traverseProperties(rule);
            }
        }
    }

    return properties;
}


var properties = null;


function merge(props) {
    Object.keys(props).forEach(function(key) {
        properties[key] += props[key];
    });
}


function printAll(properties) {
    var list = [];

    var max = 0;
    Object.keys(properties).forEach(function(key) {
        var value = properties[key];
        if (value > max) {
            max = value;
        }
        list.push({key: key, value: properties[key]});
    });

    for (var i = 0; i < list.length; i++) {
        list[i].value = Math.round(list[i].value / max * 255);
    }

    var output = '{\n';
    list.forEach(function(pair) {
        if (pair.value)
            output += '"' + pair.key + '": ' + pair.value + ',\n';
    });

    console.log(output + '}');
}


function run(url) {
    var page = require('webpage').create();
    page.open(url, function(status) {
        console.log('Opening ' + url);
        if (status !== 'success') {
            console.error('Unable to access network');
        } else {
            if (!properties) {
                properties = page.evaluate(runOnPage);
            } else {
                merge(page.evaluate(runOnPage));
            }
        }
        page.release();
        if (++urlIndex < urls.length) {
            // Run synchronously to prevent PhantomJS from crash
            run(urls[urlIndex]);
        } else {
            printAll(properties);
            phantom.exit();
        }
    });
}

var urlIndex = 0;
run(urls[urlIndex]);

result.json

{
    "-webkit-animation": 1,
    "-webkit-animation-duration": 1,
    "-webkit-animation-iteration-count": 1,
    "-webkit-animation-name": 1,
    "-webkit-animation-timing-function": 1,
    "-webkit-appearance": 1,
    "-webkit-background-clip": 2,
    "-webkit-border-horizontal-spacing": 1,
    "-webkit-border-vertical-spacing": 1,
    "-webkit-box-shadow": 24,
    "-webkit-font-smoothing": 2,
    "-webkit-transform": 1,
    "-webkit-transition": 8,
    "-webkit-transition-delay": 7,
    "-webkit-transition-duration": 7,
    "-webkit-transition-property": 7,
    "-webkit-transition-timing-function": 6,
    "-webkit-user-select": 1,
    "background": 222,
    "background-attachment": 144,
    "background-clip": 143,
    "background-color": 222,
    "background-image": 201,
    "background-origin": 142,
    "background-size": 25,
    "border": 121,
    "border-bottom": 121,
    "border-bottom-color": 121,
    "border-bottom-left-radius": 50,
    "border-bottom-right-radius": 50,
    "border-bottom-style": 114,
    "border-bottom-width": 120,
    "border-collapse": 3,
    "border-left": 95,
    "border-left-color": 95,
    "border-left-style": 89,
    "border-left-width": 94,
    "border-radius": 50,
    "border-right": 93,
    "border-right-color": 93,
    "border-right-style": 88,
    "border-right-width": 93,
    "border-top": 111,
    "border-top-color": 111,
    "border-top-left-radius": 49,
    "border-top-right-radius": 49,
    "border-top-style": 104,
    "border-top-width": 109,
    "bottom": 16,
    "box-shadow": 25,
    "box-sizing": 2,
    "clear": 23,
    "color": 237,
    "cursor": 34,
    "direction": 4,
    "display": 210,
    "fill": 2,
    "filter": 1,
    "float": 105,
    "font": 174,
    "font-family": 25,
    "font-size": 174,
    "font-style": 9,
    "font-weight": 89,
    "height": 161,
    "left": 54,
    "letter-spacing": 3,
    "line-height": 75,
    "list-style": 17,
    "list-style-image": 8,
    "list-style-position": 8,
    "list-style-type": 17,
    "margin": 241,
    "margin-bottom": 226,
    "margin-left": 225,
    "margin-right": 213,
    "margin-top": 241,
    "max-height": 5,
    "max-width": 11,
    "min-height": 9,
    "min-width": 6,
    "opacity": 24,
    "outline": 10,
    "outline-color": 10,
    "outline-style": 10,
    "outline-width": 10,
    "overflow": 57,
    "overflow-x": 56,
    "overflow-y": 57,
    "padding": 216,
    "padding-bottom": 208,
    "padding-left": 216,
    "padding-right": 206,
    "padding-top": 216,
    "position": 136,
    "resize": 1,
    "right": 29,
    "stroke": 1,
    "stroke-width": 1,
    "table-layout": 1,
    "text-align": 66,
    "text-decoration": 53,
    "text-indent": 9,
    "text-overflow": 8,
    "text-shadow": 19,
    "text-transform": 5,
    "top": 71,
    "unicode-bidi": 1,
    "vertical-align": 37,
    "visibility": 11,
    "white-space": 24,
    "width": 255,
    "word-wrap": 6,
    "z-index": 32,
    "zoom": 10
}