PDA

View Full Version : "apple-style" CSS documentation?


Kraetos
2008-07-01, 12:34
Dashcode generates Apple-specific CSS these days. I don't even think it's part of the CSS3 spec, actually. Apple appears to be making up new CSS properties as they go and then letting them become part of the spec through adoption. Example:


apple-style="image-theme: 0; image-shape: 3; image-button-type: 0; image-opacity: 1.00; image-top-color:
0.594842434,0.124843471,0.124843471,1; image-bottom-color: 1,1,1,1; image-radius: 5,5,5,5; image-border: 1;
image-border-color: 0.338200003,0.409799993,0.524800003,1; image-border-width: 1; shine-on: 1;
shine-strength: 0.33; shine-alpha-level: 0.00; shine-height: 0.50; glass-arc-height: 0.00;
shadow-include-shadow: 0;"


Apple didn't even bother with the -webkit prefixes, these bad boys have their own tag: "apple-style." Some of that CSS is very helpful, especially when writing iPhone web apps.

Some of it I can figure out. image-border, image-border-color, those seem pretty self explanatory. But, what the hell is "image-theme?"

That said, is this stuff documented yet? I can't find documentation for any of these properties. Having the documentation for those shine and glass properties would be extremely helpful. I'm not willing to write in Dashcode; it's not flexible enough for what I need. I'm all about the hand-code, but it's hard to hand-code properties that aren't documented :\

hans
2008-07-01, 15:20
Dashcode generates Apple-specific CSS these days. I don't even think it's part of the CSS3 spec, actually. Apple appears to be making up new CSS properties as they go and then letting them become part of the spec through adoption. Example:


apple-style="image-theme: 0; image-shape: 3; image-button-type: 0; image-opacity: 1.00; image-top-color:
0.594842434,0.124843471,0.124843471,1; image-bottom-color: 1,1,1,1; image-radius: 5,5,5,5; image-border: 1;
image-border-color: 0.338200003,0.409799993,0.524800003,1; image-border-width: 1; shine-on: 1;
shine-strength: 0.33; shine-alpha-level: 0.00; shine-height: 0.50; glass-arc-height: 0.00;
shadow-include-shadow: 0;"



Actually, that's not real CSS and isn't used in deployed widgets. It's just there for Dashcode to keep track of the settings you've chosen in the inspector. It all gets stripped out when you actually produce a widget for distribution.

It would be nice if you could accomplish all of those fancy parts by CSS alone, but at the moment they're generated images.

Kraetos
2008-07-01, 15:47
Actually, that's not real CSS and isn't used in deployed widgets. It's just there for Dashcode to keep track of the settings you've chosen in the inspector. It all gets stripped out when you actually produce a widget for distribution.

It would be nice if you could accomplish all of those fancy parts by CSS alone, but at the moment they're generated images.

Crazy! That explains why I can extract the images from the finished dashcode project. Okay, that makes a lot more sense. Thanks :)