When working with ADF Faces skins, JSF inlineStyles, or just CSS in general, you may have come across some explicit style definitions like this which is very easy to understand:
However, you may have also come across more cryptic style definitions like these but wonder which measurement applies to which side of the element:
padding: 1px 2px 3px 4px; padding: 5px 6px 7px; padding: 8px 9px; padding: 10px;
Here’s a key for decoding these definitions:
padding: top right bottom left; padding: top right/left bottom; padding: top/bottom right/left; padding: top/bottom/right/left;
This same pattern applies to margins and borders.
Aside from the cryptic definitions, see my other post displaying how the CSS Box Model treats margins, borders, and padding with respect to width and height dimensions. If you are an ADF Faces application developer be sure to also read the Layout Basics page.
The folks at webkit.org are adopting animation support that has been present in mobile Safari since iPhone 2.0. They are also proposing specs for CSS-based transforms, transitions, and animations:
See some animations in action using the latest nightly WebKit at:
Firefox 3.1 is also adopting WebKit’s proposal for supporting transforms too:
And of course there is also the cryptic filters that IE supports for transforms:
It will be nice to have all of these varying implementations conform to a standard.
Since the way web browsers deal with width and height is so non-intuitive, I’ve created this a handy guide showing how the CSS (Cascading Style Sheets) box model applies widths and heights when scrolling, margins, borders, and padding are involved: