views:

74

answers:

1

A JavaScript function I made needs to parse all CSS values that don't necessarily have 'one' value attached to them. For example, margin:0 0 4px 12px; is actually four values (margin-top, margin-right, etc).

Basically, all I need is a list of the shorthand properties. However, I don't need all shorthand css. I just need the shorthand css that could potentially be animated (rgb, px, em,etc). So, I don't care about border:1px solid black; since I can't animate solid. But I do care about border-width, since border-width is shorthand for all four borders.

Anyways, my list includes:
- border-width
- background-position
- padding
- margin
- border-radius (-webkit and -moz)
- box-shadow
- -moz-outline-radius
- border-color
- -moz-border-colors...
- text-shadow

So, did I miss any? You see, I don't know if there are any obscure properties that are like: mystery-color:red green blue hazel pigbreath;

+6  A: 

This is a complete list of all shorthand properties implemented by Firefox, ripped from the source code. I don't know which of them "could potentially be animated" by your JavaScript. I've trimmed out the ones that are only shorthand for internal reasons too complicated to get into here.

background
border
border-color
border-style
border-width
border-top
border-right
border-bottom
border-left
cue
font
list-style
margin
marker
-moz-border-start
-moz-border-end
-moz-border-radius
-moz-column-rule
-moz-outline-radius
-moz-transition
outline
overflow
padding
pause
Zack
I guess saying 'shorthand properties' wasn't quite right. Just properties that have multiple values embedded. Like, background-position or box-shadow. Both of those aren't shorthand, but have multiple values.
Azmisov
I can't easily extract that from the source code :-/ Maybe this list is of more help? http://www.w3.org/TR/css3-transitions/#animatable-properties-
Zack
Yeah, thanks. I didn't know w3c had that on their site.
Azmisov