Created
September 19, 2012 18:47
-
-
Save NV/3751436 to your computer and use it in GitHub Desktop.
PhantomJS script to collect most used CSS property names (supported by WebKit)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"-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 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.