Auto detect CSS property handling

[alancutter]

Attach handlers to properties according to whether they accept the type of CSS value.

Properties auto discovered:

Chrome

color-handler.js

background, backgroundColor, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRight, borderRightColor, borderTop, borderTopColor, color, fill, floodColor, lightingColor, outline, outlineColor, stopColor, stroke, textLineThroughColor, textOverlineColor, textUnderlineColor

dimension-handler.js

backgroundPositionX, backgroundPositionY, backgroundSize, baselineShift, border, borderBottom, borderBottomLeftRadius, borderBottomRightRadius, borderBottomWidth, borderImageOutset, borderImageWidth, borderLeft, borderLeftWidth, borderRadius, borderRight, borderRightWidth, borderSpacing, borderTop, borderTopLeftRadius, borderTopRightRadius, borderTopWidth, borderWidth, bottom, flexBasis, fontSize, height, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, outline, outlineOffset, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, perspective, right, size, strokeDasharray, strokeDashoffset, strokeWidth, textIndent, textLineThroughWidth, textOverlineWidth, textUnderlineWidth, top, verticalAlign, width, wordSpacing

number-handler.js

borderImageOutset, borderImageWidth, fillOpacity, flexGrow, flexShrink, floodOpacity, lineHeight, opacity, stopOpacity, strokeMiterlimit, strokeOpacity, textLineThroughWidth, textOverlineWidth, textUnderlineWidth, zoom

transform-handler.js

transform

Firefox

color-handler.js

backgroundColor, borderBottomColor, borderColor, borderLeftColor, borderRightColor, borderTopColor, color, outlineColor, fill, floodColor, lightingColor, stopColor, stroke

dimension-handler.js

borderBottomWidth, borderLeftWidth, borderRightWidth, borderSpacing, borderTopWidth, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius, bottom, flexBasis, fontSize, height, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, markerOffset, maxHeight, maxWidth, minHeight, minWidth, outlineWidth, outlineOffset, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, right, size, textIndent, perspective, top, verticalAlign, width, wordSpacing, strokeDasharray, strokeDashoffset, strokeWidth

number-handler.js

flexGrow, flexShrink, fontSizeAdjust, lineHeight, opacity, fillOpacity, floodOpacity, stopOpacity, strokeDasharray, strokeDashoffset, strokeOpacity, strokeWidth

transform-handler.js

transform

Internet Explorer

color-handler.js

scrollbar3dLightColor, scrollbarArrowColor, scrollbarBaseColor, scrollbarDarkShadowColor, scrollbarFaceColor, scrollbarHighlightColor, scrollbarShadowColor, scrollbarTrackColor, background, backgroundColor, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRight, borderRightColor, borderSpacing, borderTop, borderTopColor, color, columnRule, columnRuleColor, fill, floodColor, fontFamily, lightingColor, outline, outlineColor, stopColor, stroke

dimension-handler.js

backgroundPositionX, backgroundPositionY, layoutGridChar, layoutGridLine, zoom, background, backgroundPosition, backgroundSize, baselineShift, borderBottomLeftRadius, borderBottomRightRadius, borderBottomWidth, borderLeftWidth, borderRadius, borderRightWidth, borderSpacing, borderTopLeftRadius, borderTopRightRadius, borderTopWidth, borderWidth, bottom, columnGap, columnRuleWidth, columnWidth, flexBasis, fontFamily, fontSize, height, kerning, left, letterSpacing, lineHeight, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, outline, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, perspective, right, strokeDasharray, strokeDashoffset, strokeWidth, textIndent, top, verticalAlign, width, wordSpacing

number-handler.js

zoom, borderImage, borderImageOutset, borderImageSlice, borderImageWidth, borderSpacing, fillOpacity, flexGrow, flexShrink, floodOpacity, fontFamily, kerning, lineHeight, opacity, stopOpacity, strokeDasharray, strokeDashoffset, strokeMiterlimit, strokeOpacity, strokeWidth

transform-handler.js

borderSpacing, fontFamily, transform

[dstoc]

which property other than 'transform' would support transform values?

[alancutter]

None, it's just more code to support an alternate way to specify property handling that's not really necessary.

[dstoc]

animationIterationCount

Need to skip animation/transitions properties.

[dstoc]

Can you get results for IE too?

[shans]

I really like this approach overall. How expensive is it to run through all the properties?

[alancutter]

Skipping animation properties.
Added IE results.
propertiesAcceptingCssValue() takes 1.6ms on my 3.1GHz Windows computer running Chrome.

[dstoc]

propertiesAcceptingCssValue() takes 1.6ms

This seems too expensive. How many different property types are we going to have? Is it any better using CSS.supports (probably not supported in IE)?

None, it's just more code to support an alternate way to specify property handling that's not really necessary.

Seems like it's a time/size tradeoff now.

Added IE results.

The results for transform seem a bit strange.

[dstoc]

Compute the list of possible properties once, outside of propertiesAcceptingCssValues.