Safari and WebKit implement a large subset of the CSS 2.1 Specification defined by the World Wide Web Consortium (W3C), along with portions of the CSS 3 Specification. This reference describes the supported properties and provides Safari availability information. If a property is not listed here, it is not implemented by Safari and WebKit.
The CSS attributes in this article are divided according to the groups defined by the W3C CSS Specification:
“Box Model” describes properties specific to the bounding boxes of block elements, including borders, padding, and margins. Additional box-related properties specific to tables are described separately in “Tables.”
“Visual Formatting Model” describes properties that set the position and size of block elements.
“Visual Effects” describes properties that adjust the visual presentation of block elements, including overflow behavior, resizing behavior, visibility, animation, transforms, and transitions.
“Generated Content, Automatic Numbering, and Lists” describes properties that allow you to change the contents of an element, create automatically numbered sections and headings, and manipulate the style of list elements.
“Paged Media” describes properties associated with controlling appearance attributes specific to printed versions of a web page, such as page break behavior.
“Colors and Backgrounds” describes properties that control the background of block-level elements and the color of text content within elements.
“Fonts” describes properties specific to font selection for text within an element. It also describes properties used in downloadable font definitions.
“Text” describes properties specific to text styles, spacing, and automatic scrolling (marquee).
“Tables” describes layout and styling properties specific to table elements.
“User Interface” describes properties that relate to user interface elements in the browser, such as scrolling text areas, scroll bars, and so on. It also describes properties that are outside the scope of the page content, such as cursor style and the callout shown when you touch and hold a touch target such as a link on iPhone.
Defines a variety of border properties for an element within one declaration.
border: border_width border_style border_color; |
The width of the border on all sides.
The style of the border.
The color of the border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines a variety of properties for an element’s bottom border within one declaration.
border-bottom: border_width border_style border_color; |
The width of the bottom border.
The style of the border.
The color of the border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the color of the bottom border of an element.
border-bottom-color: color |
The color of the bottom border.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the style of the bottom border of an element.
border-bottom-style: style; |
The style of the bottom border.
dashed
, dotted
, double
, groove
, hidden
, inset
, none
, outset
, ridge
, solid
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the bottom border of an element.
border-bottom-width: width; |
The width of the bottom border.
Length units
medium
, thick
, thin
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the color of an element’s border.
border-color: color; |
The color of the border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines a variety of properties for an element’s left border within one declaration.
border-left: border_width border_style border_color |
The width of the left border.
The style of the left border.
The color of the left border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the color of the left border of an element.
border-left-color: color; |
The color of the left border.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the style of the left border of an element.
border-left-style: style; |
The style of the left border.
dashed
, dotted
, double
, groove
, hidden
, inset
, none
, outset
, ridge
, solid
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the left border of an element.
border-left-width: width; |
The width of the left border.
Length units
medium
, thick
, thin
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines a variety of properties for an element’s right border within one declaration.
border-right: border_width border_style border_color; |
The width of the right border.
The style of the right border.
The color of the right border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the color of the right border of an element.
border-right-color: color; |
The color of the right border.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the style of the right border of an element.
border-right-style: style; |
The style of the right border.
dashed
, dotted
, double
, groove
, hidden
, inset
, none
, outset
, ridge
, solid
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the right border of an element.
border-right-width: width; |
The width of the right border.
Length units
medium
, thick
, thin
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the style for an element’s border.
border-style: style; |
The style of the border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines a variety of properties for an element’s top border within one declaration.
border-top: border_width border_style border_color; |
The width of the top border.
The style of the top border.
The color of the top border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the color of the top border of an element.
border-top-color: color; |
The color of the top border.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the style of the top border of an element.
border-top-style: style; |
The style of the top border.
dashed
, dotted
, double
, groove
, hidden
, inset
, none
, outset
, ridge
, solid
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the top border of an element.
border-top-width: width; |
The width of the top border.
Length units
medium
, thick
, thin
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the border of an element.
border-width: width; |
The width of the border.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of an element’s outer-element margin.
margin: value; |
margin: margin_top margin_right margin_bottom margin_left |
The width of the margin.
The width of the top margin.
The width of the right margin.
The width of the bottom margin.
The width of the left margin.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the bottom margin of an element.
margin-bottom: value; |
The width of the bottom margin.
Numbers as a percentage, length units
auto
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the left margin of an element.
margin-left: value; |
The width of the left margin.
Numbers as a percentage, length units
auto
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the right margin of an element.
margin-right: value; |
The width of the right margin.
Numbers as a percentage, length units
auto
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the top margin of an element.
margin-top: value; |
The width of the top margin.
Numbers as a percentage, length units
auto
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of an element’s inner-element padding.
padding: value; |
padding: padding_top padding_right padding_bottom padding_left |
The width of the padding on all sides.
The width of the top padding.
The width of the right padding.
The width of the bottom padding.
The width of the left padding.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the bottom padding of an element.
padding-bottom: value; |
The width of the bottom padding.
Numbers as a percentage, length units
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the left padding of an element.
padding-left: value; |
The width of the left padding.
Numbers as a percentage, length units
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the right padding of an element.
padding-right: value; |
The width of the right padding.
Numbers as a percentage, length units
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of the top padding of an element.
padding-top: value; |
The width of the top padding.
Numbers as a percentage, length units
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies that the bottom-left corner of a box be rounded with the specified radius.
-webkit-border-bottom-left-radius: radius; |
-webkit-border-bottom-left-radius: horizontal_radius vertical_radius; |
The radius of the rounded corner.
The horizontal radius of the rounded corner.
The vertical radius of the rounded corner.
Length units
This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl
, these parameters are reversed.)
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Specifies that the bottom-right corner of a box be rounded with the specified radius.
-webkit-border-bottom-right-radius: radius; |
-webkit-border-bottom-right-radius: horizontal_radius vertical_radius; |
The radius of the rounded corner.
The horizontal radius of the rounded corner.
The vertical radius of the rounded corner.
Length units
This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl
, these parameters are reversed.)
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Specifies an image as the border for a box.
-webkit-border-image: uri top right bottom left x_repeat y_repeat |
-webkit-border-image: uri top right bottom left / border x_repeat y_repeat |
-webkit-border-image: uri top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat |
-webkit-border-image: function top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat |
The file path of the image.
The distance from the top edge of the image.
The distance from the right edge of the image.
The distance from the bottom edge of the image.
The distance from the left edge of the image.
The horizontal repeat style.
The vertical repeat style.
The width of the border on all sides.
The width of the top border.
The width of the right border.
The width of the bottom border.
The width of the left border.
A function that procedurally generates an image, such as gradient
.
repeat
The image is tiled.
round
The image is stretched before it is tiled to prevent partial tiles
stretch
The image is stretched to the size of the border.
The specified image is cut into nine pieces according to the length values given. This property applies to any box, including inline elements, but does not apply to table cells if the border-collapse
property is set to collapse
.
The first five fields are required. The uri
field contains the URI for the image. The four inset values that follow represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px
) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image.
After the required fields, you can optionally include a slash (/
) followed by a border width field or fields. You can specify all four border widths individually or specify a single value that applies to all four fields. If these values are not the same size as the inset values, the slices of the original image are scaled to fit.
Finally, you can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat
(tiled), stretch
, or round
(the round
style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Specifies that the corners of a box be rounded with the specified radius.
-webkit-border-radius: radius; |
-webkit-border-radius: horizontal_radius vertical_radius; |
The radius of the rounded corners.
The horizontal radius of the rounded corners.
The vertical radius of the rounded corners.
Length units
This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl
, these parameters are reversed.)
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Specifies that the top-left corner of a box be rounded with the specified radius.
-webkit-border-top-left-radius: radius; |
-webkit-border-top-left-radius: horizontal_radius vertical_radius; |
The radius of the rounded corner.
The horizontal radius of the rounded corner.
The vertical radius of the rounded corner.
Length units
This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl
, these parameters are reversed.)
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Specifies that the top-right corner of a box be rounded with the specified radius.
-webkit-border-top-right-radius: radius; |
-webkit-border-top-right-radius: horizontal_radius vertical_radius; |
The radius of the rounded corner.
The horizontal radius of the rounded corner.
The vertical radius of the rounded corner.
Length units
This property takes either one or two parameters. If one parameter is specified, it controls both the horizontal and vertical radii of a quarter ellipse. If two parameters are specified, the first parameter normally represents the horizontal radius and the second parameter represents the remaining radius. (Compatibility note: In Internet Explorer, if writing-mode is specified as tb-rl
, these parameters are reversed.)
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Specifies that the size of a box be measured according to either its content (default) or its total size including borders.
-webkit-box-sizing: sizing_model; |
The model by which the size of the box is measured.
border-box
The box size includes borders in addition to content.
content-box
The box size only includes content.
Available in Safari 3.0 and later.
Available in iPhone OS 1.1 and later. (Called box-sizing
in iPhone OS 1.0.)
Experimental CSS 3.
Applies a drop shadow effect to the border box of an object.
-webkit-box-shadow: hoff voff blur color; |
The horizontal offset of the shadow.
The vertical offset of the shadow.
The blur radius of the shadow.
The color of the shadow.
none
The box has no shadow.
This property takes four parameters. The first two are horizontal and vertical offsets—down for horizontal, and to the right for vertical. The third value is a blur radius. The fourth value is the color of the shadow. Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Experimental CSS 3.
Specifies the behavior of an element’s bottom margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.
-webkit-margin-bottom-collapse: collapse_behavior; |
The behavior of the bottom margin.
collapse
Two adjacent margins are collapsed into a single margin.
discard
The element’s margin is discarded if it is adjacent to another element with a margin.
separate
Two adjacent margins remain separate.
This property allows you to emulate the behavior of some browsers in quirks mode where table cell margins are collapsed into the borders of vertically adjacent cells.
Available in Safari 3.0 and later. (Called -khtml-margin-bottom-collapse
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Specifies the behavior of an element’s vertical margins if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.
-webkit-margin-collapse: collapse_behavior; |
The behavior of the vertical margins.
This property allows you to emulate the behavior of some browsers in quirks mode where table cell margins are collapsed into the borders of vertically adjacent cells.
Available in Safari 3.0 and later. (Called -khtml-magin-collapse
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Provides the width of the starting margin.
-webkit-margin-start: width; |
The width of the starting margin.
Numbers as a percentage, length units
auto
The margin is automatically determined.
If the writing direction is left-to-right, this value overrides margin-left
. If the writing direction is right-to-left, this value overrides margin-right
.
Available in Safari 3.0 and later. (Called it is -khtml-margin-start
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Specifies the behavior of an element’s top margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.
-webkit-margin-top-collapse: collapse_behavior; |
The behavior of the top margin.
collapse
Two adjacent margins are collapsed into a single margin.
discard
The element’s margin is discarded if it is adjacent to another element with a margin.
separate
Two adjacent margins remain separate.
This property allows you to emulate the behavior of some browsers in quirks mode where table cell margins are collapsed into the borders of vertically adjacent cells.
Available in Safari 3.0 and later. (Called -khtml-magin-top-collapse
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Provides the width of the starting padding.
-webkit-padding-start: width; |
The width of the starting padding.
Numbers as a percentage, length units
If the writing direction is left-to-right, this value overrides padding-left
. If the writing direction is right-to-left, this value overrides padding-right
.
Available in Safari 3.0 and later. (Called -khtml-padding-start
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Defines the location of the bottom edge of the element for both absolute and relative positioning.
bottom: position; |
The location of the bottom edge of the element.
Numbers as a percentage, length units
auto
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Defines the sides of an element on which no floating elements are permitted to be displayed.
clear: value; |
The sides of the element on which no floating elements can be displayed.
both
, left
, none
, right
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Sets the direction in which text is rendered.
direction: value; |
The direction of the text.
ltr
, rtl
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Defines how an element is displayed onscreen.
display: mode; |
The display mode.
The element is displayed in its own flex box.
The element is displayed inline in its own flex box.
block
, compact
, inline
, inline-block
, inline-table
, list-item
, none
, run-in
, table
, table-caption
, table-cell
, table-column
, table-column-group
, table-footer-group
, table-header-group
, table-row
, table-row-group
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Indicates whether an element (often a graphic) should be pulled out of the normal text flow and floated toward a particular horizontal position within its enclosing element.
float: position; |
The position for the element to be floated toward.
center
, left
, none
, right
If float
is set to none
, the element is displayed inline wherever it appears within the text flow.
If float
is set to a positional value, the element is laid out as it normally would be within the flow, then is moved as far as possible towards the specified position. If an element is vertically positioned such that it would run into another element that is part of the same float, it stops at the point of contact. Thus, in effect, this causes these floating elements to stack up at the specified horizontal position.
If the width of a series of stacked floating elements exceeds the width of the enclosing box, further elements wrap to a new row. You can force an element to always wrap to a new row by setting the clear
property on that element. (See “clear” for more information.)
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Defines the height of a structural element.
height: value; |
The height of the element.
Numbers as a percentage, length units, nonnegative values
auto
, intrinsic
, min-intrinsic
This property has no effect on inline elements. Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Defines the location of the left edge of the element for both absolute and relative positioning.
left: position; |
The location of the left edge of the element.
Numbers as a percentage, length units
auto
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Defines the vertical interline spacing of lines within the text of an element.
line-height: height; |
The interline spacing value.
Floating-point numbers, Numbers as a percentage, length units
normal
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later
CSS 2.1.
Defines the maximum height of a structural element.
max-height: height; |
The maximum height.
intrinsic
, min-intrinsic
, none
Available in Safari 1.3 and later. (Positioned elements require Safari 2.0.2 and later.) Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the maximum width of a structural element.
max-width: width; |
The maximum width.
intrinsic
, min-intrinsic
, none
Available in Safari 1.0 and later. (Positioned elements require Safari 2.0.2 and later.) Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the minimum height of a structural element.
min-height: height; |
The minimum height.
Numbers as a percentage, length units, nonnegative values
intrinsic
, min-intrinsic
Available in Safari 1.3 and later. (Positioned elements require Safari 2.0.2 and later.) Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the minimum width of a structural element.
min-width: width; |
The minimum width.
Numbers as a percentage, length units, nonnegative values
intrinsic
, min-intrinsic
Available in Safari 1.0 and later. (Positioned elements require Safari 2.0.2 and later.) Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies how to blend the offscreen rendering into the current composite rendering.
opacity: value; |
The opacity.
Floating-point numbers
Changes to this property can be animated.
Available in Safari 2.0 and later. (Called -khtml-opacity
in Safari 1.1.) Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies how an element is positioned.
position: positioning_model; |
The positioning model for the element.
absolute
, fixed
, relative
, static
This property affects the behavior of positional properties such as float
and left
/right
/top
/bottom
.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the location of the right edge of the element for both absolute and relative positioning.
right: position; |
The location of the right edge of the element.
Numbers as a percentage, length units
auto
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
Changes to this property can be animated.
CSS 2.1.
Defines the location of the top edge of the element for both absolute and relative positioning.
top: position; |
The opacity.
The location of the top edge of the element.
auto
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the Unicode bidirectional text algorithm used to display text.
unicode-bidi: algorithm; |
The bidirectional text algorithm.
bidi-override
, embed
, normal
This property must be set if you intend to change the direction of inline text.
Available in Safari 1.3 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the vertical alignment of elements inline with text.
vertical-align: position; |
The vertical alignment of the text.
Numbers as a percentage, length units
The center of the element is aligned with the baseline of the text.
baseline
, bottom
, middle
, sub
, super
, text-bottom
, text-top
, top
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of a structural element.
width: value; |
The width of the element.
Numbers as a percentage, length units, nonnegative values
auto
, intrinsic
, min-intrinsic
This property has no effect on inline elements. Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Overrides the default stacking order of elements.
z-index: distance; |
The z-index of the element.
auto
Formally, the z-index
property sets the height of an element above the drawing plane (in pixels). Its primary use is to override the default stacking order of elements.
By default, elements are stacked in the order in which they appear within the DOM tree; later elements appear on top of earlier elements. If you set a z-index
value for an element, that element is displayed on top of all elements with a lower z-index
value, underneath all elements with a higher z-index
value, and stacked according to its position in the DOM tree relative to all elements with the same z-index
value.
By default, elements are assigned a z-index
value of auto
, which is equivalent to zero (0
).
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies the magnification of an element.
zoom: vMagnification; |
The magnification of the element.
Numbers as a percentage, floating-point numbers, nonnegative values
normal
A zoom level of 100%
.
reset
Specifies that an element not scale at all when a zoom is applied.
Children of elements with the zoom
property do not inherit the property, but they are affected by it. The default value of the zoom
property is normal
, which is equivalent to a percentage value of 100%
or a floating-point value of 1.0
.
Changes to this property can be animated.
Available in Safari 4.0 and later.
Apple extension.
Defines the clipping region.
clip: shape; |
The clipping region.
auto
A clipping region is the portion of an element in which its content will be rendered. The default is to render content within the entire element size.
If you do not use the constant auto
, the value should be in the form of a supported shape (currently limited to rect
).
For example, clip: rect(3px 20px 5px 8px);
defines a rectangular clip region with a top edge 3 pixels from the top of the element, a right edge 20 pixels from the left edge of the element, a bottom border 5 pixels from the top of the element, and a left border 8 pixels from the left edge of the element.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the treatment of content that overflows the element’s bounds.
overflow: behavior; |
The overflow behavior.
This property allows you to choose the behavior for content that overflows the element bounds, such as providing scroll bars or hiding the overflowed content.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the treatment of content that overflows the element’s horizontal bounds.
overflow-x: behavior; |
The overflow behavior.
-webkit-marquee
The content behaves like a marquee.
auto
, hidden
, overlay
, scroll
, visible
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Stable CSS 3.
Defines the treatment of content that overflows the element’s vertical bounds.
overflow-y: behavior; |
The overflow behavior.
-webkit-marquee
The content behaves like a marquee.
auto
, hidden
, overlay
, scroll
, visible
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Stable CSS 3.
Specifies the directions in which resizing is allowed.
resize: direction; |
The directions in which resizing is allowed.
auto
, both
, horizontal
, none
, vertical
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Stable CSS 3.
Defines whether or not an element is visible onscreen.
visibility: value; |
collapse
, hidden
, visible
Note that elements made invisible using this property still take up space onscreen. Changes to this property can be animated.
Available in Safari 1.0 and later. (All supported except for collapse
.) Available in iPhone OS 1.0 and later.
CSS 2.1.
Combines common animation properties into a single property.
-webkit-animation: name duration timing_function delay iteration_count direction [, ... ]; |
See “-webkit-animation-name” for details.
See “-webkit-animation-duration” for details.
See “-webkit-animation-timing-function” for details.
See “-webkit-animation-delay” for details.
See “-webkit-animation-iteration-count” for details.
See “-webkit-animation-direction” for details.
Refer to the respective property for details of each property and default values.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Defines when an animation starts.
-webkit-animation-delay: time [, ...]; |
The time to begin executing an animation after it is applied. If 0
, the animation executes as soon as it is applied. If positive, it specifies an offset from the moment the animation is applied, and the animation delays execution by that offset. If negative, the animation executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the animation. Nonzero values must specify a unit: s
for seconds, ms
for milliseconds. The default value is 0
.
now
The animation begins immediately.
Available in iPhone OS 2.0 and later.
This property allows an animation to begin execution some time after it is applied.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Determines whether the animation should play in reverse on alternate iterations.
-webkit-animation-direction: direction [, ...] |
The direction to play. The default value is normal
.
normal
Play each iteration of the animation in the forward direction.
alternate
Play even-numbered iterations of the animation in the forward direction and odd-numbered iterations in the reverse direction.
When an animation is played in reverse, the timing functions are also reversed. For example, when played in reverse, an ease-in animation appears as an ease-out animation.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Specifies the length of time that an animation takes to complete one iteration.
-webkit-animation-duration: time [, ...] |
The duration of an animation. If 0
, the animation iteration is immediate (there is no animation). A negative value is treated as 0
. The default value is 0
.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Specifies the number of times an animation iterates.
-webkit-animation-iteration-count: number [, ...] |
The number of iterations. If 1
, the animation plays from beginning to end once. A value of infinite
causes the animation to repeat forever. Noninteger values cause the animation to end partway through an interation. Negative values are invalid. The default value is 1
.
infinite
Repeats the animation forever.
This property is often used with a -webkit-animation-direction
property set to alternate
, which causes the animation to play in reverse on alternate iterations.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Specifies the name of an animation.
-webkit-animation-name: name [, ...] |
The name of the animation.
The name is used to select the -webkit-keyframe
at-rule that provides the keyframes and property values for the animation. If the name does not match any -webkit-keyframe
at-rule, there are no properties to be animated and the animation is not executed. See “@-webkit-keyframes” for a description of this rule.
If "none"
, no animation is executed even if there is a -webkit-keyframe
at-rule with that name. Setting this property to "none"
explicitly disables animations.
The default value is ""
.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Determines whether the animation is running or paused.
-webkit-animation-play-state: play_state [, ...] |
The state of an animation.
running
Plays the animation.
paused
Pauses the animation.
A running animation can be paused by setting this property to paused
. Set this property to running
to continue running a paused animation. A paused animation continues to display the current value of the animation in a static state. When a paused animation is resumed, it restarts from the current value, not from the beginning of the animation.
The default value is running
.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Defines how an animation progresses between keyframes.
-webkit-animation-timing-function: function [, ...] |
The function to apply between keyframes. The default value is ease
.
ease
Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
.
linear
Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
.
ease-in
Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
.
ease-out
Equivalent to cubic-bezier(0, 0, 0.58, 1.0)
.
ease-in-out
Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
.
The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier
function to specify your own points. See cubic-bezier
for a description of the parameters for this function. See “Visual Effects Timing Functions” for additional information about timing functions.
This property applies between keyframes, not over the entire animation. For example, for an ease-in-out
timing function, an animation eases in at the start of the keyframe and eases out at the end of the keyframe. A -webkit-animation-timing-function
defined within a keyframe block applies to that keyframe; otherwise, the timing function specified for the animation is used.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Determines whether or not a transformed element is visible when it is not facing the screen.
-webkit-backface-visibility: visibility; |
Determines whether or not the back face of a transformed element is visible. The default value is visible
.
visible
The element is always visible even when it is not facing the screen.
hidden
The element is invisible if it is not facing the screen.
Use this property to specify whether or not an element is visible when it is not facing the screen. For example, if the identity transform is set, an element faces the screen; otherwise, it may face away from the screen. For example, applying a rotation about y of 180 degrees in the absence of any other transforms causes an element to face away from the screen.
This property is useful when you place two elements back to back, as you would do to create a playing card. Without this property, the front and back elements could at times switch places during an animation to flip the card. Another example is creating a box out of six elements whose outside and inside faces can be viewed. This is useful when creating the backdrop for a three-dimensional stage.
Available in iPhone OS 2.0 and later.
Apple extension.
Defines a reflection of a border box.
-webkit-box-reflect: direction offset mask-box-image; |
The position of the reflection relative to the border box. Can be above
, below
, left
, or right
.
The distance of the reflection from the edge of the border box, in length units or as a percentage. The default value is 0
.
Used to overlay the reflection. If omitted, the reflection has no mask.
above
The reflection appears above the border box.
below
The reflection appears below the border box.
left
The reflection appears to the left of the border box.
right
The reflection appears to the right of the border box.
Reflections will update automatically as the source changes. Specifying a reflection has the effect of creating a stacking context (like opacity, masks, and transforms). The reflection is non-interactive, and as such, it has no effect on hit testing. The reflection has no effect on layout, other than being part of a container’s overflow; it is similar to -webkit-box-shadow
in this respect.
Available in iPhone OS 2.0 and later.
Apple extension.
Defines a variety of mask properties within one declaration.
-webkit-mask: attachment, clip, origin, image, repeat, composite, box-image; |
See “-webkit-mask-attachment” for details.
See “-webkit-mask-clip” for details.
See “-webkit-mask-origin” for details.
See “-webkit-mask-image” for details.
See “-webkit-mask-repeat” for details.
See “-webkit-mask-composite” for details.
As with most composite properties, all arguments are optional.
Available in Safari 4.0 and later.
Apple extension.
Defines the scrolling or fixed nature of the image mask.
-webkit-mask-attachment: mask-attachment; |
If fixed
, the mask does not move when the page scrolls; if scroll
, the image moves when the page scrolls.
Available in Safari 4.0 and later.
Apple extension.
Defines an image to be used as a mask for a border box.
-webkit-mask-box-image: uri top right bottom left x_repeat y_repeat |
The file path of the image.
The distance from the top edge of the image.
The distance from the right edge of the image.
The distance from the bottom edge of the image.
The distance from the left edge of the image.
The horizontal repeat style.
The vertical repeat style.
The uri
field contains the URI for the image. The four inset values that follow represent distances from the top, right, bottom, and left edges of the image. If no unit is specified, they represent actual pixels in the original image (assuming a raster image). If a unit (such as px
) is specified, they represent CSS units (which may or may not be the same thing). The values may also be specified as a percentage of the size of the image.
You can specify a repeat style in each direction. These values affect how the top, bottom, left, right, and center portions are altered to fit the required dimensions, and can be any of the following: repeat
(tiled), stretch
, or round
(the round style is like tiling, except that it stretches all nine pieces slightly so that there is no partial tile at the end).
Available in Safari 4.0 and later.
Apple extension.
Specifies whether the mask should extend into the border of a box.
-webkit-mask-clip: behavior; |
The clipping behavior of the mask.
Available in Safari 4.0 and later.
Apple extension.
Sets a compositing style for a mask.
-webkit-mask-composite: compositing_style; |
The compositing style of the mask.
The default value is border
, which means that the background extends into the border area. Specifying a value of padding
limits the background so that it extends only into the padding area enclosed by the border.
Available in Safari 4.0 and later.
Apple extension.
Defines an image to be used as a mask for an element.
-webkit-mask-image: value; |
The file path of the image.
Available in Safari 4.0 and later.
Apple extension.
Determines where the -webkit-mask-position
property is anchored.
-webkit-mask-origin: origin; |
The origin of the mask position.
border
The mask’s position is anchored at the upper-left corner of the element’s border.
content
The mask’s position is anchored at the upper-left corner of the element’s content.
padding
The mask’s position is anchored at the upper-left corner of the element’s padding.
Available in Safari 4.0 and later.
Apple extension.
Defines the position of a mask.
-webkit-mask-position: xpos; |
-webkit-mask-position: xpos ypos; |
The x-coordinate of the position of the mask.
The y-coordinate of the position of the mask.
Position can be specified in terms of pixels or percentages of the viewport width or using the keywords top
, left
, center
, right
, or bottom
.
Changes to this property can be animated in Safari 4.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Defines the x-coordinate of the position of a mask.
-webkit-mask-position-x: value; |
The x-coordinate of the position of the mask.
Available in Safari 4.0 and later.
Apple extension.
Defines the y-coordinate of the position of a mask.
-webkit-mask-position-y: value; |
The y-coordinate of the position of the mask.
Available in Safari 4.0 and later.
Apple extension.
Defines the repeating qualities of a mask.
-webkit-mask-repeat: value; |
The repeating behavior of the mask.
This property controls whether tiling of an element’s mask should occur in the x direction, the y direction, both, or neither.
Available in Safari 4.0 and later.
Apple extension.
Overrides the size of a mask.
-webkit-mask-size: length; |
-webkit-mask-size: length_x length_y; |
The width and height of the mask.
The width of the mask.
The height of the mask.
Changes to this property can be animated in Safari 4.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Gives depth to a scene, causing elements farther away from the viewer to appear smaller.
-webkit-perspective: value; |
The distance in pixels from the viewer’s position to the z=0
plane. The default value is none
.
none
No perspective transform is applied.
The -webkit-perspective
property applies the same transform as the perspective(<number>)
transform function, except that it applies only to the children of the element, not to the transform on the element itself.
The use of this property with any value other than none
establishes a stacking context. It also establishes a containing block (somewhat similar to position:relative
), just as the -webkit-transform
property does.
This transform alters the effect of other transforms. In the absence of additional transforms, this transform has no effect.
Available in iPhone OS 2.0 and later.
Apple extension.
Sets the origin of the -webkit-perspective
property described in “-webkit-perspective.”
-webkit-perspective-origin: posx posy; |
The x-origin as a percentage or value.
The y-origin as a percentage or value.
top
Sets the y-origin to the top of the element’s border box.
center
Sets the x or y origin to the center of the element’s border box. If this constant appears before left
or right
, specifies the y-origin. If it appears after top
or bottom
, specifies the x-origin. If appears alone, centers both the x and y origin.
bottom
Sets the y-origin to the bottom of the element’s border box.
left
Sets the x-origin to the left side of the border box.
right
Sets the x-origin to the right side of the border box.
This property effectively sets the x and y position at which the viewer appears to be looking at the children of the element. The default value is 50%
for both x and y coordinates.
Available in iPhone OS 2.0 and later.
Apple extension.
Specifies transformations to be applied to an element.
-webkit-transform: function ... ; |
A transform function. Possible values are described in “Visual Effects Transform Functions.”
none
No transforms are applied.
The -webkit-transform
property specifies a list of transformations, separated by whitespace, to be applied to an element, such as rotation, scaling, and so on.
The set of transform functions is similar to those allowed by SVG, although there are additional functions to support 3D transformations. If multiple transforms are applied, the transform is generated by performing a matrix concatenation of each transform in the list.
For example, the following div
element is rotated 45 degrees clockwise:
<div style="width: 12em; margin-top: 5em; |
-webkit-transform: rotate(45deg)">...</div> |
If a list of transforms is provided, the net effect is as if each transform is specified separately in the order provided.
The default value is none
(no transforms applied).
Changes to this property can be animated.
Available in Safari 3.1 and later.
Available in iPhone OS 2.0 and later.
Apple extension.
Sets the origin for the “-webkit-transform” property.
-webkit-transform-origin: posx |
-webkit-transform-origin: posx posy |
The x origin as a percentage or value.
The y origin as a percentage or value.
top
Sets the y origin to the top of the element’s border box.
center
Sets the x or y origin to the center of the element’s border box. If this constant appears before left
or right
, specifies the y origin. If this constant appears after top
or bottom
, specifies the x origin. If it appears alone, centers both the x and y origin.
bottom
Sets the y origin to the bottom of the element’s border box.
left
Sets the x origin to the left side of the border box.
right
Sets the x origin to the right side of the border box.
The -webkit-transform-origin
property establishes the origin for transforms applied to an element with respect to its border box.
The values may be expressed either as a CSS length unit or as a percentage of the element’s size. For example, a value of 50% 50%
causes transformations to occur around the element’s center. Changing the origin to 100% 0%
causes transformation to occur around the top-right corner of the element. The default value is 50% 50%
.
If only one argument is provided, it is interpreted as the horizontal position.
Available in Safari 3.1 and Later. Available in iPhone OS 2.0 and later.
Apple extension.
The x coordinate of the origin for transforms applied to an element with respect to its border box.
-webkit-transform-origin-x: posx |
The x origin as a percentage or value.
The values may be expressed either as a CSS length unit or as a percentage of the element’s size. For example, a value of 50% 50%
causes transformations to occur around the element’s center. Changing the origin to 100% 0%
causes transformation to occur around the top-right corner of the element. The default value is 50% 50%
.
Changes to this property can be animated.
Available in Safari 3.1 and Later. Available in iPhone OS 2.0 and later.
Apple extension.
The y coordinate of the origin for transforms applied to an element with respect to its border box.
-webkit-transform-origin-y: posy |
The y origin as a percentage or value.
The values may be expressed either as a CSS length unit or as a percentage of the element’s size. For example, a value of 50% 50%
causes transformations to occur around the element’s center. Changing the origin to 100% 0%
causes transformation to occur around the top-right corner of the element. The default value is 50% 50%
.
Changes to this property can be animated.
Available in Safari 3.1 and Later. Available in iPhone OS 2.0 and later.
Apple extension.
The z coordinate of the origin for transforms applied to an element with respect to its border box.
-webkit-transform-origin-z: posz |
The z origin as a percentage or value.
The values may be expressed either as a CSS length unit or as a percentage of the element’s size. For example, a value of 50% 50%
causes transformations to occur around the element’s center. Changing the origin to 100% 0%
causes transformation to occur around the top-right corner of the element. The default value is 50% 50%
.
Changes to this property can be animated.
Available in iPhone OS 2.0 and later.
Apple extension.
Defines how nested, transformed elements are rendered in 3D space.
-webkit-transform-style: style; |
The transform style.
flat
Flatten all children of this element into the 2D plane.
preserve-3d
Preserve the 3D perspective.
If -webkit-transform-style
is flat
, all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the x or y axes causes children positioned at positive or negative z positions to appear on the element’s plane, rather than in front of or behind it. If -webkit-transform-style
is preserve-3d
, this flattening is not performed, so children maintain their position in 3D space.
This flattening takes place at each element, so preserving a hierarchy of elements in 3D space requires that each ancestor in the hierarchy have the value preserve-3d
for -webkit-transform-style
. But -webkit-transform-style
affects only an element’s children; the leaf nodes in a hierarchy do not require the preserve-3d
style.
The default value is flat
.
Available in iPhone OS 2.0 and later.
Apple extension.
Combines -webkit-transition-delay
,-webkit-transition-duration
,-webkit-transition-property
, and -webkit-transition-timing-function
into a single property.
-webkit-transition: property duration timing_function delay [, ...] |
See “-webkit-transition-property” for details.
See “-webkit-transition-duration” for details.
See “-webkit-transition-timing-function” for details.
See “-webkit-transition-delay” for details.
Available in Safari 3.1 and Later. Available in iPhone OS 2.0 and later.
Apple extension.
Defines when the transition starts.
-webkit-transition-delay: time [, ...] |
The time to begin executing a transition after it is applied. If 0
, the transition executes as soon as the property changes. Otherwise, the value specifies an offset from the moment the property changes, and the transition delays execution by that offset. If the value is negative, the transition executes the moment the property changes but appears to begin at the specified negative offset—that is, begins part-way through the transition. Nonzero values must specify a unit: s
for seconds, ms
for milliseconds. Negative values are invalid. The default value is 0
.
now
The transition begins immediately.
Available in iPhone OS 2.0 and later.
Available in iPhone OS 2.0 and later.
Available in Safari 4.0 and later.
Apple extension.
Defines how long the transition from the old value to the new value should take.
-webkit-transition-duration: time [, ...] |
If 0
, the transition is immediate (there is no animation). A negative value is treated as 0
. Nonzero values must specify a unit: s
for seconds, ms
for milliseconds. Negative values are invalid. The default value is 0
.
Available in Safari 3.1 and Later. Available in iPhone OS 2.0 and later.
Apple extension.
Specifies the name of the CSS property to which the transition is applied.
-webkit-transition-property: name; |
The name of the transition. You can list multiple properties. Property names should be bare, unquoted names. The default value is all
.
none
No transition specified.
all
The default transition name.
Available in Safari 3.1 and Later. Available in iPhone OS 2.0 and later.
Apple extension.
Specifies how the intermediate values used during a transition are calculated.
-webkit-transition-timing-function: timing_function [, ...] |
The timing function.
ease
Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
.
linear
Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
.
ease-in
Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
.
ease-out
Equivalent to cubic-bezier(0, 0, 0.58, 1.0)
.
ease-in-out
Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
.
This property allows for a transition to change speed over its duration. These effects, commonly called easing functions, are mathematical functions that produce a smooth curve.
The timing function is specified using a cubic Bezier curve. Use the constants to specify preset points of the curve or the cubic-bezier
function to specify your own points. See cubic-bezier
for a description of the parameters for this function.
The timing function takes as its input the current elapsed percentage of the transition duration and outputs a percentage that determines how close the transition is to its goal state.
The default value is ease
.
Available in Safari 3.1 and Later. Available in iPhone OS 2.0 and later.
Apple extension.
Embeds an arbitrary batch of content (such as a movie or a specially formatted string) to be embedded alongside a CSS property.
content: value; |
content: function; |
The file path of the content.
A function that procedurally generates an image, such as gradient
.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Increments a numerical counter for auto-numbering.
counter-increment: counter_name increment_by; |
The name of the counter.
The amount by which the counter increments.
none
This property is commonly used in conjunction with the “content” property to create section numbers or other auto-numbered containers. For example:
<style> |
p#top { |
counter-reset: section; |
} |
h1:before |
{ |
content: "Section " counter(section) " "; |
counter-increment: section 1; |
} |
</style> |
<p id="top">This resets the counter.</p> |
<H1>First section</H1> |
<H1>Next section</H1> |
This snippet inserts “Section 1:” at the beginning of the first heading, “Section 2:” at the beginning of the second, and so on.
Important: You must use the “counter-reset” property to reset the counter on some element that appears in the DOM tree prior to the first element where you use counter-increment on that counter. Otherwise, this call increments a nonexistent counter and all of your sections will be numbered "Section 1”.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Resets a counter used by the “counter-increment” property and the counter
function.
counter-reset: counter_name |
The name of the counter.
none
For an example of this property, see the documentation for “counter-increment.”
Available in Safari 3.0 and later.
CSS 2.1.
Defines the display style for a list and list elements.
list-style: type position image; |
The type of list.
The position of the list marker.
The file path of an image to be used as the list marker.
As with most composite properties, all arguments are optional.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines an image to use as the opening symbol of a list element.
list-style-image: value |
list-style-image: function |
The file path of the image.
A function that procedurally generates an image, such as gradient
.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the position of the marker of a list element.
list-style-position: value |
The position of the marker.
inside
The marker is placed inside the text. Wrapping text appears directly below the marker.
outside
The text of the list item is indented from the marker.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the type of marker of a list element.
list-style-type: value |
The type of marker.
armenian
, circle
, cjk-ideographic
, decimal
, decimal-leading-zero
, disc
, georgian
, hebrew
, hiragana
, hiragana-iroha
, katakana
, katakana-iroha
, lower-alpha
, lower-greek
, lower-latin
, lower-roman
, none
, square
, upper-alpha
, upper-latin
, upper-roman
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the minimum number of lines in a paragraph that must be left at the bottom of a page (before a page break).
orphans: number_of_lines |
The number of lines.
Integers
Available in Safari 1.3 and later.
CSS 2.1.
Defines the page break behavior following an element's definition.
page-break-after: behavior |
The page break behavior.
always
, auto
, avoid
, left
, right
Safari 1.2 and later.
CSS 2.1.
Defines the page break behavior before an element's definition.
page-break-before: behavior |
The page break behavior.
always
, auto
, avoid
, left
, right
Safari 1.2 and later.
CSS 2.1.
Defines the page break behavior within an element.
page-break-inside: behavior |
The page break behavior.
auto
, avoid
Safari 1.3 and later.
CSS 2.1.
Defines the minimum number of lines in a paragraph that must be left at the top of a page (after a page break).
widows: number_of_lines |
The number of lines.
Integers
Safari 1.3 and later.
CSS 2.1.
Defines a variety of background properties within one declaration.
background: background_color background_image background_repeat background_attachment background_position; |
The background color.
The file path of the background image.
The repeating behavior of the background image.
If fixed
, the background image does not move when the page scrolls; if scroll
, the image moves when the page scrolls.
The position of the background image.
As with most composite properties, all arguments are optional.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the scrolling or fixed nature of the page background.
background-attachment: behavior |
If fixed
, the background image does not move when the page scrolls; if scroll
, the image moves when the page scrolls.
scroll
, fixed
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines an element’s background color.
background-color: color |
The background color.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines an element’s background image.
background-image: value |
background-image: function |
The file path of the image.
function
A function that procedurally generates an image, such as gradient
.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the origin of a background image.
background-position: xpos |
background-position: xpos ypos |
The x-coordinate of the origin of the background image.
The y-coordinate of the origin of the background image.
Position can be specified in terms of pixels or percentages of the viewport width or using the keywords top
, left
, center
, right
, or bottom
.
Changes to this property can be animated in Safari 4.0 and later.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the x-coordinate of the origin of a background image.
background-position-x: value |
The x-coordinate of the origin of the background image.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
Apple extension.
Defines the y-coordinate of the origin of a background image.
background-position-y: value |
The y-coordinate of the origin of the background image.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
Apple extension.
Defines the repeating qualities of the background image.
background-repeat: value |
The repeating behavior of the background image.
This property controls whether tiling of an element’s background image should occur in the x direction, the y direction, both, or neither.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the color of the text of an element.
color: value |
The color. Colors can be specified with a constants, an RGB value, or a hexadecimal value.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies the clipping behavior of the background of a box.
-webkit-background-clip: behavior |
The clipping behavior of the background.
The background clips to the border of the box.
The background clips to the content of the box.
The background clips to the padding of the box.
The background clips to the text of the box.
Available in Safari 4.0 and later.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Sets a compositing style for background images and colors.
-webkit-background-composite: compositing_style |
The compositing style of the background.
The default value is border
, which means that the background extends into the border area. Specifying a value of padding
limits the background so that it extends only into the padding area enclosed by the border.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Under development.
Determines where the background-position property is anchored.
-webkit-background-origin: origin |
The origin of the background position.
The background position can be anchored at the upper-left corner of the border, the upper-left corner of the padding area inside the border, or the upper-left corner of the content inside the padding area.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Overrides the size of a background image.
-webkit-background-size: length |
-webkit-background-size: length_x length_y |
The width and height of the background image.
The width of the background image.
The height of the background image.
Changes to this property can be animated in Safari 4.0 and later.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Defines a variety of properties for an element’s text font within one declaration.
font: font_style font_variant font_weight font_size / line_height |
font_family |
font: ui_style |
The style of the font.
The variant of the font.
The weight, or boldness, of the font.
The size of the font.
The distance between lines.
The family of the font.
The user interface style to replicate.
-webkit-control
The style of the text of a standard size UI element, such as a button.
-webkit-mini-control
The style of the text of a miniature size UI element, such as a button.
-webkit-small-control
The style of the text of a small size UI element, such as a button.
caption
, icon
, menu
, message-box
, small-caption
, status-bar
In addition to declaring a font style explicitly by characteristics, you can also specify a user interface style using constants such as caption
. These constants represent the default font style for the specified user interface element, and as such, their specific values are dependent on the browser, the operating system, and user configuration options.
Using the font
property resets all related font properties that are not explicitly specified.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines a list of fonts for element styling or downloadable font definitions.
font-family: family [, ...] |
The family of the font.
The font-family property has two different meanings, depending on context.
In the context of an element style, it defines a font to use for text within an element. Because not all computers have the same fonts available, this property to specify multiple acceptable fonts in descending order of preference. In addition, contants such as serif
or sans-serif
provide generic fallback fonts in case a browser does not have any of the listed fonts available.
In the context of a downloadable font definition, this property provides the name of the font that the font definition describes. In this form, you may specify multiple family names for the font, but generally only a single family name (optionally, specify that it should match against generic font names like serif
).
For more information about downloadable font definitions, see “@font-face.”
Available in Safari 1.0 and later. Downloadable fonts supported in Safari 3.1 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the font size for the text in an element or in a downloadable font definition.
font-size: value |
The size of the font.
Numbers as a percentage, length units
large
, larger
, medium
, small
, smaller
, -webkit-xxx-large
, x-large
, x-small
, xx-large
, xx-small
Changes to this property can be animated in Safari 4.0 and later. For more information about downloadable font definitions, see “@font-face.”
Available in Safari 1.0 and later. Downloadable fonts supported in Safari 3.1 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the font style for the text in an element or a downloadable font definition.
font-style: value |
The style of the font.
italic
, normal
, oblique
Available in Safari 1.0 and later. Downloadable fonts supported in Safari 3.1 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines special font properties for the text in an element or for a downloadable font definition.
font-variant: value |
The variant of the font.
normal
, small-caps
For more information about downloadable font definitions, see “@font-face.”
Available in Safari 1.0 and later. (The value small-caps
is not supported.) Downloadable fonts supported in Safari 3.1 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the font weight of the text in an element or for a downloadable font definition.
font-weight: value |
The weight, or boldness, of the font.
Integers, nonnegative values
100
, 200
, 300
, 400
, 500
, 600
, 700
, 800
, 900
, bold
, bolder
, lighter
, normal
For more information about downloadable font definitions, see “@font-face.”
Available in Safari 1.0 and later. Downloadable fonts supported in Safari 3.1 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Provides a list of locations for a downloadable font definition.
src: local("Times New Roman"), |
URL(http://...) format("truetype"), |
URL(http://...), ... |
This property takes a comma-delimited list of font locations which may be locally installed font family names or HTTP URLs.
For more information about downloadable font definitions, see “@font-face.”
Available in Safari 3.1 and later.
CSS 3.
Describes the unicode characters supported by a downloadable font definition.
unicode-range: range [, ...]; |
unicode-range: start_character-end_character [, ...]; |
The range of supported characters.
The first character in a range of supported characters.
The last character in a range of supported characters.
This property takes a comma-delimited list of Unicode character ranges. There are two supported formats: singleton ranges and pair ranges.
A singleton range is in the form U+xxxx
where xxxx
is a hexadecimal number. For example, the range U+2150
indicates that Unicode character 0x2150
is supported. Leading zeroes may be omitted, so U+300
is the same as U+0300
. The following snippet shows a singleton range: unicode-range: U+2150;
A singleton range may also contain wildcards in the form of a question-mark character. For example, U+36??
contains two wildcard characters. This range matches any value in which the first two digits are 36
, without regard to the value for the last two digits. The following snippet shows a wildcard range that represents the Unicode characters 0x2160 through 0x216f, inclusive: unicode-range: U+216?;
A pair range is in the form of a hyphen-separated pair of hexadecimal values in the form U+xxxx-yyyy
where xxxx
and yyyy
are hexadecimal numbers. For example, the following pair range represents the Unicode characters from 0x2164
through 0x2156
, inclusive: unicode-range: U+2154-2156;
For more information about downloadable font definitions, see “@font-face.”
Available in Safari 3.1 and later.
CSS 3.
Defines the horizontal interletter spacing of characters within the text of an element.
letter-spacing: length |
The size of the character spacing.
Length units
normal
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the alignment for inline content within an element.
text-align: position |
The inline content alignment.
-webkit-auto
Text is aligned to the default alignment.
-webkit-center
Text is aligned to the center.
-webkit-left
Text is aligned to the left.
-webkit-right
Text is aligned to the right.
center
, end
, justify
, left
, right
, start
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines special styling for text, such as underlines.
text-decoration: style |
The type of decoration.
line-through
, none
, overline
, underline
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the amount to indent the first line of text within an element.
text-indent: length; |
The amount to indent.
Numbers as a percentage, length units
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Controls overflow of non-wrapped text.
text-overflow: behavior; |
The overflow behavior.
clip
, ellipsis
This property controls how Safari displays text that exceeds the specified width of the enclosing paragraph if the “overflow” property is set to hidden
and style rules or nowrap
tags prevent the text from wrapping (or if a single word is too long to fit by itself).
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 3.
Defines a variety of properties for an element’s text shadow within one declaration.
text-shadow: color x_offset y_offset blur_radius |
The color of the shadow.
The horizontal offset of the shadow.
The vertical offset of the shadow.
The blur radius of the shadow.
none
Although the CSS specification allows it, multiple shadows are not supported in Safari. Changes to this property can be animated.
Available in Safari 1.1 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines a capitalization transformation for the text in an element.
text-transform: transformation |
The capitalization transformation.
capitalize
, lowercase
, none
, uppercase
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines how whitespace characters in an element are handled onscreen.
white-space: policy |
The policy for displaying whitespace in the element.
normal
, nowrap
, pre
, pre-line
, pre-wrap
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies the level of strictness when breaking lines of text in ideographic languages such as Chinese, Japanese, and Korean.
word-break: strictness |
The level of strictness.
break-all
, break-word
, normal
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Stable CSS 3.
Defines the amount of space between words.
word-spacing: length |
The amount of spacing.
Length units
normal
Changes to this property can be animated.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies word-splitting behavior for wrapping lines that are too long for the enclosing box and contain no spaces.
word-wrap: behavior |
The wrapping behavior.
break-word
, normal
Available in Safari 2.0 and later.
Available in iPhone OS 1.0 and later.
Stable CSS 3.
Defines properties for showing content as though displayed on an electronic marquee sign.
-webkit-marquee: direction increment repetition style speed |
direction
The direction of the marquee.
increment
The distance the marquee moves in each increment
repetition
The number of times the marquee repeats.
style
The style of the marquee’s motion.
speed
The scroll or slide speed of the marquee.
Available in Safari 3.0 and later. (Called -khtml-marquee
in Safari 2.0.) Available in iPhone OS 1.0.
Under development.
Specifies the direction of motion for a marquee box.
-webkit-marquee-direction: direction |
The direction of the marquee.
ahead
The marquee moves from bottom to top.
auto
The marquee moves in the default direction.
backwards
The marquee moves from right to left.
down
The marquee moves from bottom to top.
forwards
The marquee moves from left to right.
left
The marquee moves from right to left.
reverse
The marquee moves from top to bottom.
right
The marquee moves from left to right.
up
The marquee moves from bottom to top.
Available in Safari 3.0 and later. (Called -khtml-marquee-direction
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Defines the distance the marquee moves in each increment.
-webkit-marquee-increment: distance |
The distance the marquee moves in each increment
Numbers as a percentage, length units
The marquee moves a large amount in each increment.
The marquee moves a medium amount in each increment.
The marquee moves a small amount in each increment.
Available in Safari 3.0 and later. (Called -khtml-marquee-increment
in Safari 2.0.) Available in iPhone 1.0 and later.
Under development.
Specifies the number of times a marquee box repeats (or infinite
).
-webkit-marquee-repetition: iterations |
The number of times the marquee repeats.
Integers, nonnegative values
infinite
The marquee repeats infinitely.
Available in Safari 3.0 and later. (Called -khtml-marquee-repetition
in Safari 2.0.) Available in iPhone OS 1.0.
Under development.
Defines the scroll or slide speed of a marquee box.
-webkit-marquee-speed: speed |
-webkit-marquee-speed: distance / time |
The scroll or slide speed of the marquee.
The distance term in the speed equation.
The time term in the speed equation.
Integers, time units, nonnegative values
The marquee moves at a fast speed.
The marquee moves at a normal speed.
The marquee moves at a slow speed.
This property can either take one speed parameter (slow
, for example) or a measure of distance and a measure of time separated by a slash (/
).
Available in Safari 3.0 and later. (Called -khtml-marquee-speed
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies the style of marquee motion.
-webkit-marquee-style: style |
The style of the marquee’s motion.
The marquee shifts back and forth.
The marquee does not move.
The marquee loops in its specified direction.
The marquee moves in its specified direction, but stops either when the entirety of its content has been displayed or the content reaches the opposite border of its box, whichever comes second.
The values scroll
and slide
both cause the content to start outside the box and move into the box, but if the value scroll
is specified, the content stops moving once the last content is visible. The value alternate
causes the content to shift back and forth within the box in the specified direction.
Available in Safari 3.0 and later. (Called -khtml-marquee-style
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies a fill color for text.
-webkit-text-fill-color: color |
The fill color. Colors can be specified with a constant, an RGB value, or a hexadecimal value.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
If not specified, the color specified by the color
property is used. -webkit-fill-color
is commonly used in combination with -webkit-text-stroke
. Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Apple extension.
Specifies the shape to use in place of letters in a password input field.
-webkit-text-security: shape |
The shape to use in place of letters.
A circle shape.
A disc shape.
No shape is used.
A square shape.
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Apple extension.
Specifies a size adjustment for displaying text content in Safari on iPhone.
-webkit-text-size-adjust: percentage |
The size at which to display text in Safari on iPhone.
The text size is automatically adjusted for Safari on iPhone.
The text size is not adjusted.
Available in iPhone OS 1.0 and later.
Apple extension—iPhone OS only.
Specifies the width and color of the outline (stroke) of text.
-webkit-text-stroke: width color |
The width of the stroke.
The color of the stroke.
This property is commonly used in combination with -webkit-text-fill-color
.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Apple extension.
Specifies the color of the outline (stroke) of text.
-webkit-text-stroke-color: color |
The color of the stroke.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
If not specified, the color specified by the color
property is used. -webkit-text-stroke-color
is commonly used in combination with -webkit-text-fill-color
. Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Apple extension.
Specifies the width for the text outline.
-webkit-text-stroke-width: width |
The width of the stroke.
Length units
A medium stroke.
A thick stroke.
A thin stroke.
This property is significant only in combination with -webkit-text-stroke-color
.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Apple extension.
Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.
-webkit-line-break: setting |
The line-breaking setting.
The line breaks after white space.
A standard line-breaking rule.
Available in Safari 3.0 and later. (Called -khtml-line-break
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Changes the appearance of buttons and other controls to resemble native controls.
-webkit-appearance: appearance |
The appearance of the control.
caps-lock-indicator
The indicator that appears in a password field when Caps Lock is active.
Available in Safari 4.0 and later.
Available in iPhone OS 2.0 and later
button
, button-bevel
, caret
, checkbox
, default-button
, listbox
, listitem
, media-fullscreen-button
, media-mute-button
, media-play-button
, media-seek-back-button
, media-seek-forward-button
, media-slider
, media-sliderthumb
, menulist
, menulist-button
, menulist-text
, menulist-textfield
, none
, push-button
, radio
, searchfield
, searchfield-cancel-button
, searchfield-decoration
, searchfield-results-button
, searchfield-results-decoration
, slider-horizontal
, slider-vertical
, sliderthumb-horizontal
, sliderthumb-vertical
, square-button
, textarea
, textfield
The following constants are unsupported in Safari 4.0:
scrollbarbutton-down
, scrollbarbutton-left
, scrollbarbutton-right
, scrollbarbutton-up
, scrollbargripper-horizontal
, scrollbargripper-vertical
, scrollbarthumb-horizontal
, scrollbarthumb-vertical
, scrollbartrack-horizontal
, scrollbartrack-vertical
Available in Safari 3.0 and later.
Available in iPhone OS 1.0 and later.
Experimental CSS 3.
Defines the behavior of nonbreaking spaces within text.
-webkit-nbsp-mode: behavior; |
The behavior of nonbreaking spaces.
Nonbreaking spaces are treated as usual.
Nonbreaking spaces are treated like standard spaces.
Available in Safari 3.0 and later. (Called -khtml-nbsp-mode
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Overrides ordering defaults for right-to-left content.
-webkit-rtl-ordering: order; |
The order of the content.
Raw content is in mixed order (requiring a bidirectional renderer).
Right-to-left content is encoded in reverse order so an entire line of text can be rendered from left to right in a unidirectional fashion.
The distinction between these two character orders is normally handled automatically as a side effect of character set. This property allows you to override whether the browser should treat the content as being in logical or visual order.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Apple extension.
Specifies that an entire element should be draggable instead of its contents.
-webkit-user-drag: behavior; |
The dragging behavior of the element.
The default dragging behavior is used.
The entire element is draggable instead of its contents.
The element cannot be dragged at all.
Available in Safari 3.0 and later. (Called -khtml-user-drag
in Safari 2.0.)
Apple extension.
Determines whether a user can edit the content of an element.
-webkit-user-modify: policy; |
The user modification policy.
The content is read-only.
The content can be read and written.
The content can be read and written, but any rich formatting of pasted text is lost.
This is closely related to the contentEditable
attribute.
Safari 3.0 and later. (Called -khtml-user-modify
in Safari 2.0.)
Apple extension.
Determines whether a user can select the content of an element.
-webkit-user-select: policy; |
The user selection policy.
The user can select content in the element.
The user cannot select any content.
The user can select text in the element.
Available in Safari 3.0 and later. (Called -khtml-user-select
in Safari 2.0.)
Available in iPhone OS 3.0 and later.
Apple extension.
Defines the model of an element’s border.
border-collapse: behavior; |
collapse
, separate
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the spacing between an element’s border and the content within.
border-spacing: length; |
The size of the spacing.
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the side of a table on which its caption appears.
caption-side: side; |
The side of the table that will have a caption.
bottom
, left
, right
, top
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Sets the border behavior for cells with no content.
empty-cells: behavior; |
The behavior for cells with no content.
hide
, show
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Specifies whether to use automatic or fixed table layout.
table-layout: behavior; |
If auto
, layout is determined by all cells in the table; if fixed
, layout is determined by the first row of content only.
auto
, fixed
Automatic table layout, specified by the value auto
, is the default table layout behavior. In this mode, the table layout is calculated based on the contents of every cell in every row of the table.
Fixed table layout, specified by the value fixed
, is a faster (but more restrictive) layout behavior. In this layout mode, the layout of the table is calculated based only on the first row of tabular content (not including any heading rows). This mode allows the layout to be calculated much earlier in the page load process and greatly simplifies the calculations, but can cause content in later rows to overflow the table’s boundaries.
Available in Safari 1.0 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the spacing between the horizontal portion of an element’s border and the content within.
-webkit-border-horizontal-spacing: value; |
The amount of horizontal spacing.
Length units, nonnegative values
Equivalent to the horizontal portion of the border-spacing property. Changes to this property can be animated.
Available in Safari 3.0 and later. (Called -khtml-border-horizontal-spacing
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Defines the spacing between the vertical portion of an element’s border and the content within.
-webkit-border-vertical-spacing: value; |
The amount of vertical spacing.
Length units, nonnegative values
Equivalent to the vertical portion of the border-spacing property. Changes to this property can be animated.
Available in Safari 3.0 and later. (Called -khtml-border-vertical-spacing
in Safari 2.0.) Available in iPhone OS 1.0 and later.
Apple extension.
Determines whether a column break can and should occur after an element in a multicolumn flow layout.
-webkit-column-break-after: policy; |
The column break policy.
A column break is always inserted after the element.
A right column break is inserted after the element where appropriate.
Column breaks are avoided after the element.
A left column break is inserted after the element.
A right column break is inserted after the element.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Determines whether a column break can and should occur before an element in a multicolumn flow layout.
-webkit-column-break-before: policy; |
The column break policy.
A column break is always inserted before the element.
A right column break is inserted before the element where appropriate.
Column breaks are avoided before the element.
A left column break is inserted before the element.
A right column break is inserted before the element.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Determines whether a column break should be avoided within the bounds of an element in a multicolumn flow layout.
-webkit-column-break-inside: policy; |
The column break policy.
A right column break is inserted within the element where appropriate.
Column breaks are avoided within the element.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Specifies the number of columns desired in a multicolumn flow.
-webkit-column-count: number_of_columns; |
The number of columns in the multicolumn flow.
Integers, nonnegative values
The element has one column.
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Specifies the space between columns in a multicolumn flow.
-webkit-column-gap: width; |
The width of the gap.
Length units
Columns in the element have the normal gap width between them.
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Specifies the color, style, and width of the column rule.
-webkit-column-rule: width style color; |
The width of the column rule.
The style of the column rule.
The color of the column rule.
The column rule appears in the middle of the column gap in a multicolumn flow layout.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Specifies the color of the column rule.
-webkit-column-rule-color: color; |
The color of the column rule.
currentcolor
The value of the element’s color
property.
-webkit-activelink
The default color of a hyperlink that is being clicked.
-webkit-focus-ring-color
The color that surrounds a UI element, such as a text field, that has focus.
-webkit-link
The default color of a hyperlink that has been visited.
-webkit-text
The default text color.
activeborder
, activecaption
, appworkspace
, aqua
, background
, black
, blue
, buttonface
, buttonhighlight
, buttonshadow
, buttontext
, captiontext
, fuchsia
, gray
, graytext
, green
, grey
, highlight
, highlighttext
, inactiveborder
, inactivecaption
, inactivecaptiontext
, infobackground
, infotext
, lime
, maroon
, match
, menu
, menutext
, navy
, olive
, orange
, purple
, red
, scrollbar
, silver
, teal
, threeddarkshadow
, threedface
, threedhighlight
, threedlightshadow
, threedshadow
, transparent
, white
, window
, windowframe
, windowtext
, yellow
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Specifies the style of the column rule.
-webkit-column-rule-style: style; |
The style of the column rule.
The column rule has a dashed line style.
The column rule has a dotted line style.
The column rule has a double solid line style.
The column rule has a grooved style.
The column rule is hidden.
The column rule has an inset style.
The column rule has no style.
The column rule has an outset style.
The column rule has a ridged style.
The column rule has a solid line style.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Specifies the width of the column rule.
-webkit-column-rule-width: width; |
The width of the column rule.
Length units
The column rule has a medium width.
The column rule has a thick width.
The column rule has a thin width.
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Specifies the width of the column in a multicolumn flow.
-webkit-column-width: width; |
The width of the column.
Length units
Columns in the element are of normal width.
Changes to this property can be animated.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
A composite property that specifies the width and number of columns in a multicolumn flow layout.
-webkit-columns: width count |
The width of each column.
The number of columns.
Available in Safari 3.0 and later.
Available in iPhone OS 2.0 and later.
Under development.
Defines the cursor to display onscreen when the pointer is over an element.
cursor: style; |
The type of cursor.
An open hand cursor indicating the element can be grabbed.
A closed hand cursor indicating the element has been grabbed.
A zoom-in cursor.
A zoom-out cursor.
alias
, all-scroll
, auto
, cell
, col-resize
, context-menu
, copy
, crosshair
, default
, e-resize
, ew-resize
, hand
, help
, move
, n-resize
, ne-resize
, nesw-resize
, no-drop
, none
, not-allowed
, ns-resize
, nw-resize
, nwse-resize
, pointer
, progress
, row-resize
, s-resize
, se-resize
, sw-resize
, text
, vertical-text
, w-resize
, wait
Although the CSS specification allows it, Safari does not support custom cursors.
Available in Safari 1.2 and later.
CSS 2.1.
Defines a variety of properties for an element’s outline (drawn outside the element’s border) within one declaration.
outline: color style width; |
The color of the outline.
The style of the outline.
The width of the outline.
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the color of an element’s outline.
outline-color: color; |
The color of the outline.
The color that surrounds a UI element, such as a text field, that has focus.
invert
Changes to this property can be animated.
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the offset of an element’s outline from its border.
outline-offset: length; |
The size of the offset.
Length units
Changes to this property can be animated.
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the style of an element’s outline.
outline-style: value; |
The style of the outline.
auto
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the width of an element's outline.
outline-width: value; |
The width of the outline.
Length units
medium
, thick
, thin
Changes to this property can be animated.
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
CSS 2.1.
Defines the parts of an element that responds to pointer events, such as a click, mouse over, or hover.
pointer-events: value; |
The parts of the element that respond to pointer events.
auto
The entire element responds to pointer events.
none
The element does not respond to pointer events.
Providing a value of none
does not disable the Inspect Element option that appears when the element is Control-clicked, however the option may return the wrong element.
Available in Safari 4.0 and later.
Apple extension.
Specifies the alignment of nested elements within an outer flexible box element.
-webkit-box-align: alignment; |
The alignment of nested elements.
Elements are aligned with the baseline of the box.
Elements are aligned with the center of the box.
Elements are aligned with the end of the box.
Elements are aligned with the start of the box.
Elements are stretched to fill the box.
This property specifies the horizontal alignment if the box direction is vertical, and vice versa. This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-align
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies the direction in which child elements of a flexible box element are laid out.
-webkit-box-direction: layout_direction; |
The layout direction.
Elements are laid out in the default direction.
Elements are laid out in the reverse direction.
This applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-direction
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies an element’s flexibility.
-webkit-box-flex: flex_value; |
The flexibility of the element.
Floating-point numbers
Flexible elements can stretch or shrink to fit the size of the bounding box of their parent element. The amount of stretching or shrinkage of an element is determined by its flex value relative to the flex values of other elements within the same parent element.
This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-flex
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies groups of dynamically resizing elements that are adjusted to be the same size.
-webkit-box-flex-group: group_number; |
The group number of the flexible element.
Integers, nonnegative values
During size adjustment of flex boxes, any boxes with the same group number are adjusted to be the same size.
This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-flex-group
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later. Safari 3.0 and later.
Under development.
Specifies whether a flexible box should contain multiple lines of content.
-webkit-box-lines: behavior; |
If multiple
, the flexible box can contain multiple lines of content; if single
, only one line is allowed.
The box can contain multiple lines of content.
The box can contain only one line of content.
This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-lines
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies a rough ordering of elements in a flexible box.
-webkit-box-ordinal-group: group_number; |
The ordinal group number of the element.
Integers, nonnegative values
Elements with lower ordinal group values are displayed first.
This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-ordinal-group
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies the layout of elements nested within a flexible box element.
-webkit-box-orient: orientation; |
The orientation of elements nested in the flexible box.
Elements are oriented along the box’s axis.
Elements are oriented horizontally.
Elements are oriented along the inline axis.
Elements are oriented vertically.
This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-orient
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Specifies alignment of child elements within the current element in the direction of orientation.
-webkit-box-pack: alignment; |
The alignment of child elements.
Child elements are aligned to the center of the element.
Child elements are aligned to the end of the element.
Child elements are justified with both the start and end of the element.
Child elements are aligned to the start of the element.
For elements whose children are aligned horizontally, a packing value of start
indicates left alignment with extra space towards the right side, a value of end
indicates right alignment with extra space to the left, a value of center
indicates center alignment with extra space split evenly on either side, and a value of justify
indicates that the outer elements should be aligned on the left and right, with space added evenly between the elements.
Similarly, for elements whose children are aligned vertically, a value of start
indicates that the elements should be aligned to the top, a value of end
indicates that the elements should be aligned to the bottom, and so on.
This property is similar to “-webkit-box-align,” which specifies alignment in the opposite direction from the direction of orientation.
This property applies only to flexible box layouts. For more information about flexible boxes, see http://www.w3.org/TR/css3-layout/.
Available in Safari 3.0 and later. (Called -khtml-box-pack
in Safari 1.1 through Safari 2.0.) Available in iPhone OS 1.0 and later.
Under development.
Disables the default callout shown when you touch and hold a touch target.
-webkit-touch-callout: behavior; |
The touch callout behavior.
On iPhone OS, when you touch and hold a touch target such as a link, Safari displays a callout containing information about the link. This property allows you to disable that callout.
The current allowable values are none and inherit
.
Available in iPhone OS 2.0 and later.
Apple extension—iPhone OS only.
Specifies the behavior of regions in a Dashboard widget.
-webkit-dashboard-region: |
dashboard-region( ... ) |
[...] |
No behavior is specified.
This property is described in more detail in “Declaring Control Regions” in Dashboard Programming Topics.
Available in Safari 3.0 and later. (Called -apple-dashboard-region
in Safari 2.0.)
Apple extension—Dashboard only.
Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iPhone.
-webkit-tap-highlight-color: color; |
The tapped link color.
This property obeys the alpha value, if specified. If you don’t specify an alpha value, Safari on iPhone applies a default alpha value to the color. To disable tap highlighting, set the alpha value to 0
(invisible). If you set the alpha value to 1.0
(opaque), the element is not visible when tapped.
Available in iPhone OS 1.1.1 and later.
Apple extension—iPhone OS only.
WebKit provides partial support for a number of properties that are not supported for developer use. This list may include:
Properties designed for Apple internal use, such as properties specific to the way Mail and other applications use WebKit.
Properties that are in a very early stage of development and are not really usable yet.
Properties that are used within WebKit itself and cannot be parsed in a CSS file.
Properties that are parsed for historical reasons, but that are not actually used.
Because these properties are unsupported, they are not documented in detail. However, they are listed here so that if you find them in the source code, in test cases, and so on, you will be able to determine their status.
-webkit-border-fit
-webkit-font-size-delta
-webkit-highlight
-webkit-line-clamp
-webkit-match-nearest-mail-blockquote-color
-webkit-text-decorations-in-effect
-webkit-transition-repeat-count
font-size-adjust
—Describes the font aspect ratio to preserve proportionality in the event of font substitution. Unsupported CSS 2 property; removed in CSS 2.1; reintroduced in CSS 3.
font-stretch
—Selects a normal, condensed, or extended variant of a font in an element or describes availability of these variants in a font definition. Declared in CSS 2.1/CSS 3.
marker-offset
—Sets the offset of a marker (abullet in a bulleted list, for example). Unsupported CSS 2 property; removed in CSS 2.1.
marks
—Sets what type of crop marks to use on paged media. Unsupported CSS 2 property; removed in CSS 2.1.
page
—Used for named page support. Unsupported CSS 2 property; removed in CSS 2.1.
quotes
—Sets the quotation mark characters used for nested <q> tags.
size
—Sets page dimensions for paged media. Unsupported CSS 2 property; removed in CSS 2.1.
speak-header
—Sets whether a browser should speak the contents of the corresponding table heading cell before speaking the contents of each cell. Unsupported CSS 2 aural media property. Aural media deprecated in CSS 2.1. Property reintroduced in CSS 3
text-line-through
—Composite property describing overstrike color, style, and mode. Declared in CSS 3.
text-line-through-color
—Describes color for overstrike. Declared in CSS 3.
text-line-through-mode
—Describes the mode for overstrike. Declared in CSS 3.
text-line-through-style
—Describes the style for overstrike. Declared in CSS 3.
text-line-through-width
—Describes the width for overstrike. Declared in CSS 3.
text-overline
—Composite property describing overline color, style, mode, and width(like underline, but above the text). Declared in CSS 3.
text-overline-color
—Describes the color of overline (like underline, but above the text). Declared in CSS 3.
text-overline-mode
—Describes the mode of overline (like underline, but above the text). Declared in CSS 3.
text-overline-style
—Describes the style of overline (like underline, but above the text). Declared in CSS 3.
text-overline-width
—Describes the width of overline (like underline, but above the text). Declared in CSS 3.
text-underline
—Composite property describing underline color, style, mode, and width. Declared in CSS 3.
text-underline-color
—Describes the color of underline. Declared in CSS 3.
text-underline-mode
—Describes the mode of underline. Declared in CSS 3.
text-underline-style
—Describes the style of underline. Declared in CSS 3.
text-underline-width
—Describes the width of underline. Declared in CSS 3.
scrollbar-3dlight-color
—Microsoft Internet Explorer property.
scrollbar-arrow-color
—Microsoft Internet Explorer property.
scrollbar-darkshadow-color
—Microsoft Internet Explorer property.
scrollbar-face-color
—Microsoft Internet Explorer property.
scrollbar-highlight-color
—Microsoft Internet Explorer property.
scrollbar-shadow-color
—Microsoft Internet Explorer property.
scrollbar-track-color
—Microsoft Internet Explorer property.
Last updated: 2010-05-07