Skip to content

Instantly share code, notes, and snippets.

@NV
Created September 19, 2012 18:47
Show Gist options
  • Save NV/3751436 to your computer and use it in GitHub Desktop.
Save NV/3751436 to your computer and use it in GitHub Desktop.
PhantomJS script to collect most used CSS property names (supported by WebKit)
// 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]);
{
"-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
}
@RonnyO
Copy link

RonnyO commented Oct 13, 2012

Awesome, and the data could be useful to further investigate.
Are these URLs the actual set you ran this against, or did you ran it with a broader set? Seems like a small & non-exemplary set to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment