CSS3 snippets (draft)

CSS3 snippets is work in progress, this page is only for documentation.

doc:

• mozilla
• safari

   -moz-box-shadow: teal 60px -16px;
-webkit-box-shadow: teal 60px -16px;
        box-shadow: teal 60px -16px;

CSS3

• opacity
• outlineOffset
• overflowX
• overflowY
• wordSpacing
• wordWrap

mozilla (et webkit):

Trident Gecko Presto WebKit

• MozAppearanceGW
• MozBackgroundClipTGPW
• MozBackgroundInlinePolicy
• MozBackgroundOriginTGPW
• MozBinding
• MozBorderBottomColors
• MozBorderEnd
• MozBorderEndColor
• MozBorderEndStyle
• MozBorderWidth
• MozBorderImageGPW
• MozBorderLeftColors
• MozBorderRadiusGPW
• MozBorderRadiusBottomleft
• MozBorderRadiusBottomright
• MozBorderRadiusTopleft
• MozBorderRadiusTopright
• MozBorderRightColors
• MozBorderStart
• MozBorderStartColor
• MozBorderStartStyle
• MozBorderStartWidth
• MozBorderTopColors
• MozBoxAlign
• MozBoxDirection
• MozBoxFlex
• MozBoxOrient
• MozBoxOrdinalGroup
• MozBoxPack
• MozBoxShadowTGPW
• MozBoxSizingTGPW
• MozColumnCountGW
• MozColumnGapGW
• MozColumnRuleGW
• MozColumnRuleColorGW
• MozColumnRuleStyleGW
• MozColumnRuleWidthGW
• MozColumnWidthGW
• MozFloatEdge
• MozForceBrokenImageIcon
• MozImageRegion
• MozMarginEndG
• MozMarginStartGW
• MozOpacity use CSS3 opacity
• MozOutline
• MozOutlineColor
• obsolete: MozOutlineOffset no longer supported at all, use OutlineOffset
• MozOutlineRadiusG
• MozOutlineRadiusBottomleftG
• MozOutlineRadiusBottomtopG
• MozOutlineRadiusTopleftG
• MozOutlineRadiusToprightG
• MozOutlineStyle
• MozOutlineWidth
• MozPaddingEnd
• MozPaddingStart
• MozStackSizing
• MozTransformTGPW
• MozTransformOriginTGPW
• MozUserFocus
• MozUserInput
• MozUserModify
• MozUserSelect
• MozWindowShadow

snippets

G*PW* border-radius

<leaf type="insert" title="border-radius" tooltip="G*PW* pre { background: gold; border: ridge gold; -moz-border-radius: 13em/3em; -webkit-border-radius: 13em 3em; border-radius: 13em/3em; } Accepts one, two, three or four border-radius values, optional followed by a slash / and a second set of values. If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius."><before>-moz-border-radius: %0;-webkit-border-radius: %0;border-radius: %0;</before><after></after><param name="hv or h/v radii"/></leaf>

Differences between -moz-border-radius and -webkit-border-radius
<percentage> values are are implemented in a non-standard way in Gecko (Firefox) and not supported by Safari/WebKit.
Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used.
Safari/WebKit doesn't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners.