safari width auto

Safari CSS Reference

• Table of Contents
• Jump To…
• Download Sample Code

Supported CSS Properties

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 webpage, 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 in iOS.

Defines a variety of border properties for an element within one declaration.

The width of the border on all sides.

The style of the border.

The color of the border.

border-color

Border-style, border-width, border-bottom.

Defines a variety of properties for an element’s bottom border within one declaration.

The width of the bottom border.

border-bottom-color

border-bottom-style

border-bottom-width

Defines the color of the bottom border of an element.

The color of the bottom border.

The value of the element’s color property.

The default color of a hyperlink that is being clicked.

The color that surrounds a UI element, such as a text field, that has focus.

The default color of a hyperlink that has been visited.

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.

Defines the style of the bottom border of an element.

The style of the bottom border.

dashed , dotted , double , groove , hidden , inset , none , outset , ridge , solid

Defines the width of the bottom border of an element.

Length units

medium , thick , thin

Defines the color of an element’s border.

border-left-color

Border-right-color, border-top-color, border-left.

Defines a variety of properties for an element’s left border within one declaration.

The width of the left border.

The style of the left border.

The color of the left border.

border-left-style

border-left-width

Defines the color of the left border of an element.

Defines the style of the left border of an element.

Defines the width of the left border of an element.

border-right

Defines a variety of properties for an element’s right border within one declaration.

The width of the right border.

The style of the right border.

The color of the right border.

border-right-style

border-right-width

Defines the color of the right border of an element.

Defines the style of the right border of an element.

Defines the width of the right border of an element.

Defines the style for an element’s border.

border-top-style

Defines a variety of properties for an element’s top border within one declaration.

The width of the top border.

The style of the top border.

The color of the top border.

border-top-width

Defines the color of the top border of an element.

Defines the style of the top border of an element.

Defines the width of the top border of an element.

Defines the width of the border of an element.

The width of the border.

Defines the width of an element’s outer-element margin.

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.

margin-bottom

Margin-left, margin-right.

Defines the width of the bottom margin of an element.

Numbers as a percentage, length units

Defines the width of the left margin of an element.

Defines the width of the right margin of an element.

Defines the width of the top margin of an element.

Defines the width of an element’s inner-element padding.

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.

padding-bottom

Padding-left, padding-right, padding-top.

Defines the width of the bottom padding of an element.

Defines the width of the left padding of an element.

Defines the width of the right padding of an element.

Defines the width of the top padding of an element.

-webkit-border-bottom-left-radius

Specifies that the bottom-left corner of a box be rounded with the specified radius.

The radius of the rounded corner.

The horizontal radius of the rounded corner.

The vertical radius of the rounded corner.

-webkit-border-bottom-right-radius

-webkit-border-radius

-webkit-border-top-left-radius

-webkit-border-top-right-radius

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 iOS 1.0 and later.

Experimental CSS 3.

Specifies that the bottom-right corner of a box be rounded with the specified radius.

-webkit-border-image

Specifies an image as the border for a box.

The method of which to produce the image. This could be expressed by the url() syntax, which contains the URI of the image (in the same fashion as the background-image property), or by a procedural function such as gradient() .

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 image is tiled.

The image is stretched before it is tiled to prevent partial tiles

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 four inset values that follow method 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 as well as vector coordinates.

After the required fields, you can optionally include a border width field or fields, preceded by a slash ( / ). 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. Note that border-width constants like thick are not valid.

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).

Specifies that the corners of a box be rounded with the specified radius.

The radius of the rounded corners.

The horizontal radius of the rounded corners.

The vertical radius of the rounded corners.

Specifies that the top-left corner of a box be rounded with the specified radius.

Specifies that the top-right corner of a box be rounded with the specified radius.

-webkit-box-sizing

Specifies that the size of a box be measured according to either its content (default) or its total size including borders.

The model by which the size of the box is measured.

The box size includes borders in addition to content.

The box size only includes content.

Available in iOS 1.1 and later. (Called box-sizing in iOS 1.0.)

-webkit-box-shadow

Applies a drop shadow effect to the border box of an object.

The horizontal offset of the shadow.

The vertical offset of the shadow.

The blur radius of the shadow.

The color of the shadow.

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 iOS 2.0 and later.

-webkit-margin-bottom-collapse

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.

The behavior of the bottom margin.

Two adjacent margins are collapsed into a single margin.

The element’s margin is discarded if it is adjacent to another element with a margin.

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.)

Apple extension.

-webkit-margin-collapse

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.

The behavior of the vertical margins.

-webkit-margin-top-collapse

Available in Safari 3.0 and later. (Called -khtml-magin-collapse in Safari 2.0.)

-webkit-margin-start

Provides the width of the starting margin.

The width of the starting margin.

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.)

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.

The behavior of the top margin.

Available in Safari 3.0 and later. (Called -khtml-magin-top-collapse in Safari 2.0.)

-webkit-padding-start

Provides the width of the starting padding.

The width of the starting padding.

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.)

Visual Formatting Model

Defines the location of the bottom edge of the element for both absolute and relative positioning.

The location of the bottom edge of the element.

Available in Safari 1.0 and later.

Available in iOS 1.0 and later

Defines the sides of an element on which no floating elements are permitted to be displayed.

The sides of the element on which no floating elements can be displayed.

both , left , none , right

Sets the direction in which text is rendered.

The direction of the text.

Defines how an element is displayed onscreen.

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

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.

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.)

Note:  With the exception of elements with intrinsic width (an img tag, for example), you should always set the width property on floating elements to ensure consistent behavior across browsers.

Defines the height of a structural element.

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.

Defines the location of the left edge of the element for both absolute and relative positioning.

The location of the left edge of the element.

line-height

Defines the vertical interline spacing of lines within the text of an element.

The interline spacing value.

Floating-point numbers, Numbers as a percentage, length units

Defines the maximum height of a structural element.

The maximum height.

intrinsic , min-intrinsic , none

Available in Safari 1.3 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the maximum width of a structural element.

The maximum width.

Available in Safari 1.0 and later. (Positioned elements require Safari 2.0.2 and later.)

Defines the minimum height of a structural element.

The minimum height.

intrinsic , min-intrinsic

Defines the minimum width of a structural element.

The minimum width.

Specifies how to blend the offscreen rendering into the current composite rendering.

The opacity.

Floating-point numbers

Available in Safari 2.0 and later. (Called -khtml-opacity in Safari 1.1.)

Specifies how an element is positioned.

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 .

Defines the location of the right edge of the element for both absolute and relative positioning.

The location of the right edge of the element.

Defines the location of the top edge of the element for both absolute and relative positioning.

The location of the top edge of the element.

unicode-bidi

Defines the Unicode bidirectional text algorithm used to display text.

The bidirectional text algorithm.

bidi-override , embed , normal

This property must be set if you intend to change the direction of inline text.

vertical-align

Defines the vertical alignment of elements inline with text.

The vertical alignment of the text.

The center of the element is aligned with the baseline of the text.

baseline , bottom , middle , sub , super , text-bottom , text-top , top

Defines the width of a structural element.

The width of the element.

Overrides the default stacking order of elements.

The z-index of the element.

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 ).

Specifies the magnification of an element.

The magnification of the element.

Numbers as a percentage, floating-point numbers, nonnegative values

A zoom level of 100% .

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 .

Available in Safari 4.0 and later.

Visual Effects

Defines the clipping region.

The clipping region.

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.

Defines the treatment of content that overflows the element’s bounds.

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.

Defines the treatment of content that overflows the element’s horizontal bounds.

The content behaves like a marquee.

auto , hidden , overlay , scroll , visible

Stable CSS 3.

Defines the treatment of content that overflows the element’s vertical bounds.

Specifies the directions in which resizing is allowed.

The directions in which resizing is allowed.

auto , both , horizontal , none , vertical

Defines whether or not an element is visible onscreen.

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 .)

-webkit-animation

Combines common animation properties into a single property.

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.

-webkit-animation-delay

Defines when an animation starts.

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 .

The animation begins immediately.

This property allows an animation to begin execution some time after it is applied.

-webkit-animation-direction

Determines whether the animation should play in reverse on alternate iterations.

The direction to play. The default value is normal .

Play each iteration of the animation in the forward direction.

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.

-webkit-animation-duration

Specifies the length of time that an animation takes to complete one iteration.

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 .

-webkit-animation-fill-mode

Specifies whether the effects of an animation are apparent before the animation starts and after it ends.

The animation’s fill mode. Can be none , forwards , backwards , or both .

The effects of the animation are apparent only during the defined duration of the animation.

The animation’s final keyframe continues to apply after the final iteration of the animation completes.

The animation’s initial keyframe is applied as soon as the animation style is applied to an element. This only affects animations that have a nonzero value for -webkit-animation-delay .

The animation’s initial keyframe is applied as soon as the animation style is applied to an element, and the animation’s final keyframe continues to apply after the final iteration of the animation completes. The initial keyframe only affects animations that have a nonzero value for -webkit-animation-delay .

By default, an animation starts as soon as the style that describes the animation is applied to an element; however, the -webkit-animation-delay property can delay the start of an animation. Specifying a value of backwards or both for this property overrides the -webkit-animation-delay property and tells the animation to start as soon as the style is applied.

Available in Safari 5.0 and later.

Available in iOS 4.0 and later.

-webkit-animation-iteration-count

Specifies the number of times an animation iterates.

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 iteration. Negative values are invalid. The default value is 1 .

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.

-webkit-animation-name

Specifies the name of an animation.

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 "" .

-webkit-animation-play-state

Determines whether the animation is running or paused.

The state of an animation.

Plays the animation.

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 .

-webkit-animation-timing-function

Defines how an animation progresses between keyframes.

The function to apply between keyframes. The default value is ease .

Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0) .

Equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 1.0, 1.0) .

Equivalent to cubic-bezier(0, 0, 0.58, 1.0) .

Equivalent to cubic-bezier(0.42, 0, 0.58, 1.0) .

Equivalent to steps(1, end) .

Available in iOS 5.0 and later.

Available in Safari 5.1 and later.

Equivalent to steps(1, start) .

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 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.

-webkit-backface-visibility

Determines whether or not a transformed element is visible when it is not facing the screen.

Determines whether or not the back face of a transformed element is visible. The default value is visible .

The element is always visible even when it is not facing the screen.

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.

-webkit-box-reflect

Defines a reflection of a border box.

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.

The reflection appears above the border box.

The reflection appears below the border box.

The reflection appears to the left of the border box.

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.

-webkit-mask

Defines a variety of mask properties within one declaration.

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.

-webkit-mask-attachment

Defines the scrolling or fixed nature of the image mask.

If fixed , the mask does not move when the page scrolls; if scroll , the image moves when the page scrolls.

-webkit-mask-box-image

Defines an image to be used as a mask for a border box.

The file path of the image.

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).

-webkit-mask-clip

Specifies whether the mask should extend into the border of a box.

The clipping behavior of the mask.

-webkit-mask-composite

Sets a compositing style for a mask.

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.

-webkit-mask-image

Defines an image to be used as a mask for an element.

-webkit-mask-origin

Determines where the -webkit-mask-position property is anchored.

The origin of the mask position.

The mask’s position is anchored at the upper-left corner of the element’s border.

The mask’s position is anchored at the upper-left corner of the element’s content.

The mask’s position is anchored at the upper-left corner of the element’s padding.

-webkit-mask-position

Defines the position of a mask.

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.

-webkit-mask-position-x

Defines the x-coordinate of the position of a mask.

-webkit-mask-position-y

Defines the y-coordinate of the position of a mask.

-webkit-mask-repeat

Defines the repeating qualities of a mask.

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.

-webkit-mask-size

Overrides the size of a mask.

The width and height of the mask.

The width of the mask.

The height of the mask.

-webkit-perspective

Gives depth to a scene, causing elements farther away from the viewer to appear smaller.

The distance in pixels from the viewer’s position to the z= 0 plane. The default value is 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 Safari 4.0.3 and later running on Mac OS X v10.6 and later.

-webkit-perspective-origin

Sets the origin of the -webkit-perspective property described in -webkit-perspective .

The x-origin as a percentage or value.

The y-origin as a percentage or value.

Sets the y-origin to the top of the element’s border box.

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.

Sets the y-origin to the bottom of the element’s border box.

Sets the x-origin to the left side of the border box.

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.

-webkit-transform

Specifies transformations to be applied to an element.

A transform function. Possible values are described in Transform Functions

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:

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).

Available in Safari 3.1 and later.

-webkit-transform-origin

Sets the origin for the -webkit-transform property.

The x origin as a percentage or value.

The y origin as a percentage or value.

Sets the y origin to the top of the element’s border box.

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.

Sets the y origin to the bottom of the element’s border box.

Sets the x origin to the left side of the border box.

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.

-webkit-transform-origin-x

The x coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-y

The y coordinate of the origin for transforms applied to an element with respect to its border box.

-webkit-transform-origin-z

The z coordinate of the origin for transforms applied to an element with respect to its border box.

The z origin as a percentage or value.

-webkit-transform-style

Defines how nested, transformed elements are rendered in 3D space.

The transform style.

Flatten all children of this element into the 2D plane.

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 .

-webkit-transition

Combines -webkit-transition-delay , -webkit-transition-duration , -webkit-transition-property , and -webkit-transition-timing-function into a single property.

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.

-webkit-transition-delay

Defines when the transition starts.

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 .

The transition begins immediately.

-webkit-transition-duration

Defines how long the transition from the old value to the new value should take.

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 .

-webkit-transition-property

Specifies the name of the CSS property to which the transition is applied.

The name of the transition. You can list multiple properties. Property names should be bare, unquoted names. The default value is all .

No transition specified.

The default transition name.

-webkit-transition-timing-function

Specifies how the intermediate values used during a transition are calculated.

The timing function.

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 .

Generated Content, Automatic Numbering, and Lists

Embeds an arbitrary batch of content (such as a movie or a specially formatted string) to be embedded alongside a CSS property.

The file path of the content.

A function that procedurally generates an image, such as gradient .

counter-increment

Increments a numerical counter for auto-numbering.

The name of the counter.

The amount by which the counter increments.

This property is commonly used in conjunction with the content property to create section numbers or other auto-numbered containers. For example:

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”.

counter-reset

Resets a counter used by the counter-increment property and the counter function.

For an example of this property, see the documentation for counter-increment .

Defines the display style for a list and list elements.

The type of list.

The position of the list marker.

The file path of an image to be used as the list marker.

list-style-image

List-style-position, list-style-type.

Defines an image to use as the opening symbol of a list element.

Defines the position of the marker of a list element.

The position of the marker.

The marker is placed inside the text. Wrapping text appears directly below the marker.

The text of the list item is indented from the marker.

Defines the type of marker of a list element.

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

Paged Media

Defines the minimum number of lines in a paragraph that must be left at the bottom of a page (before a page break).

The number of lines.

Available in Safari 1.3 and later.

page-break-after

Defines the page break behavior following an element's definition.

The page break behavior.

always , auto , avoid , left , right

Safari 1.2 and later.

page-break-before

Defines the page break behavior before an element's definition.

page-break-inside

Defines the page break behavior within an element.

auto , avoid

Safari 1.3 and later.

Defines the minimum number of lines in a paragraph that must be left at the top of a page (after a page break).

Colors and Backgrounds

Defines a variety of background properties within one declaration.

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.

background-attachment

Defines the scrolling or fixed nature of the page background.

scroll , fixed

background-color

Defines an element’s background color.

background-image

Defines an element’s background image.

background-position

Defines the origin of a background image.

The x-coordinate of the origin of the background image.

The y-coordinate of the origin of the background image.

background-position-x

Defines the x-coordinate of the origin of a background image.

background-position-y

Defines the y-coordinate of the origin of a background image.

background-repeat

Defines the repeating qualities 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.

Defines the color of the text of an element.

The color. Colors can be specified with a constants, an RGB value, or a hexadecimal value.

-webkit-background-clip

Specifies the clipping behavior of the background of a box.

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.

-webkit-background-composite

Sets a compositing style for background images and colors.

The compositing style of the background.

Under development.

-webkit-background-origin

Determines where the background-position property is anchored.

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.

-webkit-background-size

Overrides the size of a background image.

The width and height of the background image.

The width of the background image.

The height of the background image.

Defines a variety of properties for an element’s text font within one declaration.

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.

The style of the text of a standard size UI element, such as a button.

The style of the text of a miniature size UI element, such as a button.

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.

font-family

Defines a list of fonts for element styling or downloadable font definitions.

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, constants 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.

Defines the font size for the text in an element or in a downloadable font definition.

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 .

Defines the font style for the text in an element or a downloadable font definition.

italic , normal , oblique

font-variant

Defines special font properties for the text in an element or for a downloadable font definition.

normal , small-caps

Available in Safari 1.0 and later. (The value small-caps is not supported.) Downloadable fonts supported in Safari 3.1 and later.

font-weight

Defines the font weight of the text in an element or for a downloadable font definition.

Integers, nonnegative values

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , bold , bolder , lighter , normal

Provides a list of locations for a downloadable font definition.

This property takes a comma-delimited list of font locations which may be locally installed font family names or HTTP URLs.

unicode-range

Describes the unicode characters supported by a downloadable font definition.

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;

letter-spacing

Defines the horizontal interletter spacing of characters within the text of an element.

The size of the character spacing.

Defines the alignment for inline content within an element.

The inline content alignment.

Text is aligned to the default alignment.

Text is aligned to the center.

Text is aligned to the left.

Text is aligned to the right.

center , end , justify , left , right , start

text-decoration

Defines special styling for text, such as underlines.

The type of decoration.

line-through , none , overline , underline

text-indent

Defines the amount to indent the first line of text within an element.

The amount to indent.

text-overflow

Controls overflow of non-wrapped text.

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).

text-shadow

Defines a variety of properties for an element’s text shadow within one declaration.

Although the CSS specification allows it, multiple shadows are not supported in Safari. Changes to this property can be animated.

text-transform

Defines a capitalization transformation for the text in an element.

The capitalization transformation.

capitalize , lowercase , none , uppercase

white-space

Defines how whitespace characters in an element are handled onscreen.

The policy for displaying whitespace in the element.

normal , nowrap , pre , pre-line , pre-wrap

Specifies the level of strictness when breaking lines of text in ideographic languages such as Chinese, Japanese, and Korean.

The level of strictness.

break-all , break-word , normal

word-spacing

Defines the amount of space between words.

The amount of spacing.

Specifies word-splitting behavior for wrapping lines that are too long for the enclosing box and contain no spaces.

The wrapping behavior.

break-word , normal

Available in Safari 2.0 and later.

-webkit-marquee

Defines properties for showing content as though displayed on an electronic marquee sign.

The direction of the marquee.

The distance the marquee moves in each increment

The number of times the marquee repeats.

The style of the marquee’s motion.

The scroll or slide speed of the marquee.

-webkit-marquee-direction

-webkit-marquee-increment, -webkit-marquee-repetition, -webkit-marquee-speed, -webkit-marquee-style.

Available in Safari 3.0 and later. (Called -khtml-marquee in Safari 2.0.)

Available in iOS 1.0.

Specifies the direction of motion for a marquee box.

The marquee moves from bottom to top.

The marquee moves in the default direction.

The marquee moves from right to left.

The marquee moves from left to right.

The marquee moves from top to bottom.

Available in Safari 3.0 and later. (Called -khtml-marquee-direction in Safari 2.0.)

Defines the distance the marquee moves in each increment.

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.)

Specifies the number of times a marquee box repeats (or infinite ).

The marquee repeats infinitely.

Available in Safari 3.0 and later. (Called -khtml-marquee-repetition in Safari 2.0.)

Defines the scroll or slide speed of a marquee box.

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.)

Specifies the style of marquee 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.)

-webkit-text-fill-color

Specifies a fill color for text.

The fill color. Colors can be specified with a constant, an RGB value, or a hexadecimal value.

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.

-webkit-text-security

Specifies the shape to use in place of letters in a password input field.

The shape to use in place of letters.

A circle shape.

A disc shape.

No shape is used.

A square shape.

-webkit-text-size-adjust

Specifies a size adjustment for displaying text content in Safari on iOS.

The size at which to display text in Safari on iOS.

The text size is automatically adjusted for Safari on iOS.

The text size is not adjusted.

Apple extension—Safari on iOS only.

-webkit-text-stroke

Specifies the width and color of the outline (stroke) of text.

The width of the stroke.

The color of the stroke.

-webkit-text-stroke-color

-webkit-text-stroke-width.

This property is commonly used in combination with -webkit-text-fill-color .

Specifies the color of the outline (stroke) of text.

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.

Specifies the width for the text outline.

A medium stroke.

A thick stroke.

A thin stroke.

This property is significant only in combination with -webkit-text-stroke-color .

-webkit-line-break

Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.

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.)

-webkit-appearance

Changes the appearance of buttons and other controls to resemble native controls.

The appearance of the control.

The indicator that appears in a password field when Caps Lock is active.

Available in iOS 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

-webkit-nbsp-mode

Defines the behavior of nonbreaking spaces within text.

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.)

-webkit-rtl-ordering

Overrides ordering defaults for right-to-left content.

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.

-webkit-user-drag

Specifies that an entire element should be draggable instead of its contents.

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.)

-webkit-user-modify

Determines whether a user can edit the content of an element.

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.

Available in Safari 3.0 and later. (Called -khtml-user-modify in Safari 2.0.)

-webkit-user-select

Determines whether a user can select the content of an element.

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 iOS 3.0 and later.

border-collapse

Defines the model of an element’s border.

collapse , separate

border-spacing

Defines the spacing between an element’s border and the content within.

The size of the spacing.

-webkit-border-horizontal-spacing

-webkit-border-vertical-spacing, caption-side.

Defines the side of a table on which its caption appears.

The side of the table that will have a caption.

bottom , left , right , top

empty-cells

Sets the border behavior for cells with no content.

The behavior for cells with no content.

hide , show

table-layout

Specifies whether to use automatic or fixed table layout.

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.

Defines the spacing between the horizontal portion of an element’s border and the content within.

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.)

Defines the spacing between the vertical portion of an element’s border and the content within.

The amount of vertical spacing.

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.)

-webkit-column-break-after

Determines whether a column break can and should occur after an element in a multicolumn flow layout.

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.

-webkit-column-break-before

Determines whether a column break can and should occur before an element in a multicolumn flow layout.

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.

-webkit-column-break-inside

Determines whether a column break should be avoided within the bounds of an element in a multicolumn flow layout.

A right column break is inserted within the element where appropriate.

Column breaks are avoided within the element.

-webkit-column-count

Specifies the number of columns desired in a multicolumn flow.

The number of columns in the multicolumn flow.

The element has one column.

-webkit-column-gap

Specifies the space between columns in a multicolumn flow.

The width of the gap.

Columns in the element have the normal gap width between them.

-webkit-column-rule

Specifies the color, style, and width of the column rule.

The width of the column rule.

The style of the column rule.

The color of the column rule.

-webkit-column-rule-color

-webkit-column-rule-style, -webkit-column-rule-width.

The column rule appears in the middle of the column gap in a multicolumn flow layout.

Specifies the color of the column rule.

Specifies 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.

Specifies the width of the column rule.

The column rule has a medium width.

The column rule has a thick width.

The column rule has a thin width.

-webkit-column-width

Specifies the width of the column in a multicolumn flow.

The width of the column.

Columns in the element are of normal width.

-webkit-columns

A composite property that specifies the width and number of columns in a multicolumn flow layout.

The width of each column.

The number of columns.

User Interface

Defines the cursor to display onscreen when the pointer is over an element.

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.

Defines a variety of properties for an element’s outline (drawn outside the element’s border) within one declaration.

The color of the outline.

The style of the outline.

The width of the outline.

outline-color

Outline-style, outline-width.

Defines the color of an element’s outline.

outline-offset

Defines the offset of an element’s outline from its border.

The size of the offset.

Defines the style of an element’s outline.

Defines the width of an element's outline.

pointer-events

Defines the parts of an element that responds to pointer events, such as a click, mouse over, or hover.

The parts of the element that respond to pointer events.

The entire element responds to pointer events.

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.

-webkit-box-align

Specifies the alignment of nested elements within an outer flexible box element.

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.)

-webkit-box-direction

Specifies the direction in which child elements of a flexible box element are laid out.

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.)

-webkit-box-flex

Specifies an element’s flexibility.

The flexibility of the element.

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.)

-webkit-box-flex-group

Specifies groups of dynamically resizing elements that are adjusted to be the same size.

The group number of the flexible element.

During size adjustment of flex boxes, any boxes with the same group number are adjusted to be the same size.

Available in Safari 3.0 and later. (Called -khtml-box-flex-group in Safari 1.1 through Safari 2.0.)

-webkit-box-lines

Specifies whether a flexible box should contain multiple lines of content.

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.

Available in Safari 3.0 and later. (Called -khtml-box-lines in Safari 1.1 through Safari 2.0.)

-webkit-box-ordinal-group

Specifies a rough ordering of elements in a flexible box.

The ordinal group number of the element.

Elements with lower ordinal group values are displayed first.

Available in Safari 3.0 and later. (Called -khtml-box-ordinal-group in Safari 1.1 through Safari 2.0.)

-webkit-box-orient

Specifies the layout of elements nested within a flexible box element.

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.

Available in Safari 3.0 and later. (Called -khtml-box-orient in Safari 1.1 through Safari 2.0.)

-webkit-box-pack

Specifies alignment of child elements within the current element in the direction of orientation.

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.

Available in Safari 3.0 and later. (Called -khtml-box-pack in Safari 1.1 through Safari 2.0.)

-webkit-dashboard-region

Specifies the behavior of regions in a Dashboard widget.

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.

-webkit-overflow-scrolling

Specifies whether to use native-style scrolling in an overflow:scroll element.

The style of scrolling.

One finger scrolling without momentum.

Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms).

The default value is auto .

-webkit-tap-highlight-color

Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iOS.

The tapped link color.

This property obeys the alpha value, if specified. If you don’t specify an alpha value, Safari on iOS 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 iOS 1.1.1 and later.

-webkit-touch-callout

Disables the default callout shown when you touch and hold a touch target.

The touch callout behavior.

On iOS, 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 .

Additional Unsupported Properties

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-Specific Unsupported Properties

-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

Unsupported Properties from the CSS Specification

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 (a bullet 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.

Unsupported Properties Specific to Other Browsers

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.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-10-27

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.

• Español – América Latina
• Português – Brasil
• Tiếng Việt

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly

The new CSS property that helps maintain spacing in responsive layouts.

Aspect ratio

Browser Support

Aspect ratio is most commonly expressed as two integers and a colon in the dimensions of: width:height, or x:y. The most common aspect ratios for photography are 4:3 and 3:2, while video, and more recent consumer cameras, tend to have a 16:9 aspect ratio.

With the advent of responsive design, maintaining aspect ratio has been increasingly important for web developers, especially as image dimensions differ and element sizes shift based on available space.

Some examples of where maintaining aspect ratio become important are:

• Creating responsive iframes, where they are 100% of a parent's width, and the height should remain a specific viewport ratio
• Creating intrinsic placeholder containers for images, videos , and embeds to prevent re-layout when the items load and take up space
• Creating uniform, responsive space for interactive data visualizations or SVG animations
• Creating uniform, responsive space for multi-element components such as cards or calendar dates
• Creating uniform, responsive space for multiple images of varying dimension (can be used alongside object-fit )

Defining an aspect ratio helps us with sizing media in a responsive context. Another tool in this bucket is the object-fit property, which enables users to describe how an object (such an as image) within a block should fill that block:

The initial and fill values re-adjust the image to fill the space. In our example, this causes the image to be squished and blurry, as it re-adjusts pixels. Not ideal. object-fit: cover uses the image's smallest dimension to fill the space and crops the image to fit into it based on this dimension. It "zooms in" at its lowest boundary. object-fit: contain ensures that the entire image is always visible, and so the opposite of cover , where it takes the size of the largest boundary (in our example above this is width), and resizes the image to maintain its intrinsic aspect ratio while fitting into the space. The object-fit: none case shows the image cropped in its center (default object position) at its natural size.

object-fit: cover tends to work in most situations to ensure a nice uniform interface when dealing with images of varying dimensions, however, you lose information this way (the image is cropped at its longest edges).

If these details are important (for example, when working with a flat lay of beauty products), cropping important content is not acceptable. So the ideal scenario would be responsive images of varying sizes that fit the UI space without cropping.

The old hack: maintaining aspect ratio with padding-top

In order to make these more responsive, we can use aspect ratio. This allows for us to set a specific ratio size and base the rest of the media on an individual axis (height or width).

A currently well-accepted cross-browser solution for maintaining aspect ratio based on an image's width is known as the "Padding-Top Hack". This solution requires a parent container and an absolutely placed child container. One would then calculate the aspect ratio as a percentage to set as the padding-top . For example:

• 1:1 aspect ratio = 1 / 1 = 1 = padding-top: 100%
• 4:3 aspect ratio = 3 / 4 = 0.75 = padding-top: 75%
• 3:2 aspect ratio = 2 / 3 = 0.66666 = padding-top: 66.67%
• 16:9 aspect ratio = 9 / 16 = 0.5625 = padding-top: 56.25%

Now that we have identified the aspect ratio value, we can apply that to our parent container. Consider the following example:

We could then write the following CSS:

Maintaining aspect ratio with aspect-ratio

Unfortunately, calculating these padding-top values is not very intuitive, and requires some additional overhead and positioning. With the new intrinsic aspect-ratio CSS property , the language for maintaining aspect ratios is much more clear.

With the same markup, we can replace: padding-top: 56.25% with aspect-ratio: 16 / 9 , setting aspect-ratio to a specified ratio of width / height .

Using aspect-ratio instead of padding-top is much more clear, and does not overhaul the padding property to do something outside of its usual scope.

This new property also adds the ability to set aspect ratio to auto , where "replaced elements with an intrinsic aspect ratio use that aspect ratio; otherwise the box has no preferred aspect ratio." If both auto and a <ratio> are specified together, the preferred aspect ratio is the specified ratio of width divided by height unless it is a replaced element with an intrinsic aspect ratio, in which case that aspect ratio is used instead.

Example: consistency in a grid

This works really well with CSS layout mechanisms like CSS Grid and Flexbox as well. Consider a list with children that you want to maintain a 1:1 aspect ratio, such as a grid of sponsor icons:

Example: preventing layout shift

Another great feature of aspect-ratio is that it can create placeholder space to prevent Cumulative Layout Shift and deliver better Web Vitals . In this first example, loading an asset from an API such as Unsplash creates a layout shift when the media is finished loading.

Using aspect-ratio , on the other hand, creates a placeholder to prevent this layout shift:

Bonus tip: image attributes for aspect ratio

Another way to set an image's aspect ratio is through image attributes . If you know the dimensions of the image ahead of time, it is a best practice to set these dimensions as its width and height .

For our example above, knowing the dimensions are 800px by 600px, the image markup would look like: <img src="image.jpg" alt="..." width="800" height="600"> . If the image sent has the same aspect ratio, but not necessarily those exact pixel values, we could still use image attribute values to set the ratio, combined with a style of width: 100% so that the image takes up the proper space. All together that would look like:

In the end, the effect is the same as setting the aspect-ratio on the image via CSS, and cumulative layout shift is avoided ( see demo on Codepen ).

With the new aspect-ratio CSS property, launching across multiple modern browsers, maintaining proper aspect ratios in your media and layout containers gets a little bit more straightforward.

Photos by Amy Shamblen and Lionel Gustave via Unsplash.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2021-01-28 UTC.

aspect-ratio

The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It’s a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures a box stays in that proportion.

In other words, this property helps us to size elements consistently, so the ratio of an element stays the same as it grows or shrinks.

aspect-ratio is defined in the CSS Box Sizing Module Level 4 specification , which is currently in Working Draft. That means it’s still in progress and has a chance of changing. But with Chrome and Firefox supporting it behind an experimental flag, and Safari Technology Preview adding support for it in early 2021 , there are strong signals that aspect-ratio is gaining a lot of momentum.

In plain English: aspect-ratio is either assumed to be auto by default, or accepts a <ratio> as a value where <width / height> .

• Initial value: auto
• Applies to: all elements except inline boxes and internal ruby or table boxes
• Inherited: no
• Percentages: n/a
• Computed value: specified keyword or a pair of numbers
• Animation type: discrete

Safari Technology Preview 153 shipped on September 7, 2022. In the release, the initital value of aspect-ratio replaces auto with default .

• auto :  The default value, which specifies that the element has no preferred aspect ratio and should size itself as it normally would. Therefore, replaced elements, like images with an intrinsic aspect ratio, use  that  aspect ratio.
• <ratio> :  Two positive numeric values separated by a forward slash ( / ) with or without space around them, targeting the width and height of the element. In the case of a single value, the second value is considered to be 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by  box-sizing .
• initial :  Applies the property’s default setting, which is auto .
• inherit :  Adopts the aspect-ratio value of the parent.
• unset :  Removes the current aspect ratio from the element.

It can take two values

This property can take two values at the same time, one being auto , and the other a <ratio> :

If both auto and a <ratio> are specified together, the preferred aspect ratio is the specified ratio of width divided by height, unless it is a replaced element with an intrinsic aspect ratio, in which case that aspect ratio is used instead.

As you can see in the following demo, the same values are set for a div and an  <img> (a replaced element), the div element is using the <ratio> and becomes a square, but the image follows its intrinsic aspect ratio. If you remove  auto  from the values, you can see that the image is forced to be a square:

It works on replaced and non-replaced content

If you’re thinking, “Uhm, yeah, doesn’t the browser already do this for us on images?” the answer is: absolutely . Browsers do some fancy aspect ratio calculations on replaced content like images. So, if an image has, say, a width of 500px, the browser flexes its CSS layout algorithms to maintain the image’s intrinsic or “natural” dimensions . The aspect-ratio property can be used to effectively override those natural dimensions.

But non-replaced content does not have a natural proportion. That’s most of the stuff we work with, like divs. Rather than try to maintain the element’s natural proportions, aspect-ratio sets a “preferred” sizing.

Now, the spec currently notes that older CSS specifications, notably CSS 2.1, does not contain a clear distinction between replaced and non-replaced content. That means we could see some additional special cases added to the spec to help clarify them. For the time being, we’re seeing browsers rolling out support for setting preferred aspect ratios on replaced and non-replaced separately, where some of the browsers with early support behind an experimental flag might only support aspect-ratio for non-replaced content. Definitely worth keeping an eye on the browser support as it evolves.

It works on its own without specifying a width or height

So, yeah, we can simply drop it on an element like this:

…and the element’s default width: auto kicks in implicitly to set the element’s dimensions.

It changes when width or height are on the same element

Let’s say we have an element with a width of 300px and an aspect-ratio of 3/1 .

By nature, aspect-ratio wants to calculate the element’s dimensions on its own and will do so based on the context where it’s used. But with that width tossed in, it tells aspect-ratio to calculate the element’s aspect ratio box using 300px as the width. As a result, it’s like we’ve just written:

This makes sense! Remember, when no width or height are specified, the browser assumes those are auto and goes from there. When we provide explicit width and height values, those are what get used.

It’s ignored in some situations

This is where things get a little mind-bendy because there are cases where aspect-ratio is overlooked or it’s calculations are affected by other properties. That includes:

When both width and height are declared on the element

We just saw how declaring either width or height on and element will affect the calculation of aspect-ratio . But if the element already has both a width and height , those get used instead of aspect-ratio . It requires both properties to override aspect-ratio ; setting either height or width alone will not break the element’s aspect ratio.

Makes senes, right? If using either width or height forces the aspect-ratio to use that value in the calculation, then it logically follows that using both would completely override aspect-ratio altogether since both values are already provided and set.

When content breaks out of the ratio

Simply put, if you have an element with an aspect ratio and the content is so long such that it forces the element to expand, then the element will expand. And if the element expands, its dimensions change and, thus, no more aspect ratio. This is why the spec says the property sets the “preferred” aspect ratio. It’s preferred, but not prescribed.

Don’t like how that works? Setting min-height: 0; on the element will allow the content to overflow the preferred aspect ratio instead of expanding it.

When it “loses” to min-* and max-* properties

We just sort of saw how that works, right? When content exceeds the dimensions of the box, the aspect-ratio is effectively gone because the box expands with the content. We can override that with min-width: 0 .

That’s because all of the min-* and max-* properties typically battle width and height for supremacy in the war over Box Model calculations. For example:

That’s because min-width is either preventing width from going below a specific value, or it is ignored because the width has set already set the element beyond the minimum width it needs to be. The same thing goes for min-height , max-width , and max-height .

The point of all this: if we set both a min-* or max-* property on the same element as aspect-ratio and they “win” over width or height , then those will override aspect-ratio . Told you it was a little mind-bendy. 🤯

Replaced elements like images or videos already have an intrinsic aspect ratio, therefore when they grow or shrink, they maintain their aspect ratio, but non-replaced elements don’t have that luxury and sometimes you need that behavior for them.

Here are some examples where  aspect-ratio  becomes handy.

A very common use case is when you want to embed an iframe for displaying a video from another site like YouTube. In this case if you set the width to 100% and you set a height, the video is going to be deformed.

In order to have a responsive iframe that preserves its aspect ratio you can do as following:

If the iframe has width and height attributes set like this:

…then you can automatically set the aspect-ratio like this:

Setting a background-image to an element doesn’t have any effect on the size of that element. So for creating a hero image, if the image is in the background, you need to set a height on the element and having a fixed height is not very responsive!

Here you can use aspect-ratio property In order to have a hero that preserve the aspect ratio of its background-image :

Imagine, In a flexbox or a grid layout with auto-fill mechanism, you may want items to stay square, but items width and height can shrink or grow based on their content or their parent’s size and as a result it’s most likely that items don’t stay square.

Setting  aspect-ratio  to  1 / 1  changes the height dynamically while your item’s width scales:

In the following image gallery, since images have random sizes, the aspect-ratio property is used in order to keep their height consistent. Remove aspect-ratio on the item list and see the effect.

Also, with using  object-fit , you can fit the images into the right dimensions.

Browser support

Data on support for the mdn-css__properties__aspect-ratio feature across the major browsers

Dealing with legacy browser support

Before having this property one way of dealing with this issue was  padded-box technique  and now thanks to CSS  @supports  we can use that technique for older browsers.

In the following example, the pseudo-element tactic is used to add fallback for aspect ratio property in older browsers:

More information

A first look at `aspect-ratio`.

`aspect-ratio` is going to deprecate FitVids

Designing an aspect ratio unit for css.

Aspect Ratio Boxes

Aspect ratios for grid items, what if we got aspect-ratio sized images by doing almost nothing, related properties.

Responsive Image Height different under safari and chrome and firefox

Hi all, I am currently experiencing an issue on a website I am designing for myself. The issue is that on my portfolio-grid page, I am displaying a grid of images distributed across two columns.

Under chrome and firefox all the images in this grid are of equal height, however, in Safari, there are two images(Napa & SLD Residence) whose height is 600pixels instead of 358px.

The images are coming from a CMS. When I had uploaded the images into the CMS to be used as thumbnails, these were all uploaded as 800x600pixels and heavily compressed from my end. Additionally, I ran the command - ( CMD + SHIFT + I) to create responsive images as per the webflow tutorial.

Inspecting the HTML code, for the two images (Napa & SLD Residence), I saw that the responsive images weren’t included as part of their markup. However, when I looked at the other images, they did have their responsive images listed in the markup. I can’t figure out why this has happened.

Additionally, I don’t know why Safari is causing an issue on these two images (Napa & SLD Residence).

Finally, I am running custom scripts (Locomotive Scroll) and disabling the scripts still shows the same problem.

Any advice is greatly appreciated.

– edit Removed project links after solving the problem.

Well I worked out the issue. It looks like under the largest breakpoint of 1900pixels, the image height was set to auto when in fact it should have been 100%. On the smaller breakpoints, I had already done this.

This article helped me out: Images stretched in Safari and Chrome - CSS-Tricks - CSS-Tricks

CSS property: width: auto

• 6 - 10 : Supported
• 11 : Supported
• 12 - 121 : Supported
• 122 : Supported
• 2 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 4 - 121 : Supported
• 123 - 125 : Supported
• 3.1 - 17.3 : Supported
• 17.4 : Supported
• TP : Supported
• 10 - 12.1 : Not supported
• 15 - 107 : Supported
• 108 : Supported

Safari on iOS

• 3.2 - 17.3 : Supported
• all : Support unknown

Android Browser

• 2.1 - 4.3 : Not supported
• 4.4 - 4.4.4 : Supported

Opera Mobile

• 12 - 12.1 : Not supported
• 80 : Supported

Chrome for Android

Firefox for android, uc browser for android.

• 15.5 : Support unknown

Samsung Internet

• 4 - 22 : Supported
• 23 : Supported
• 14.9 : Support unknown

Baidu Browser

• 13.52 : Support unknown

KaiOS Browser

• 2.5 : Support unknown
• 3 : Support unknown

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How do I resize the Safari browser window

I'm trying to resize my Safari browser to be a specific height/width. In Firefox I use the Web Developer Toolbar, and in IE I user their developer tools.

How do I do this in Safari? I've already enabled the developer tools, but I don't see a resize option.

2 Answers 2

You could do it with Javascript. Simply type something like this into the address bar.

A couple of things though. This will resize the inner frame of the window, so the entire window including borders and toolbars will be larger. Also, this seems to work only on windows with a single tab, and I only tried it on a Mac, would think it behaves the same on other platforms thou.

• This works, but is not an ideal solution. I'd like to have an iPad and iPhone (amongst others) resolution saved. –  Nathan Koop May 29, 2012 at 14:56

I personally prefer the response above me because of it's simplicity. There are, however some resizing plugins, both free and paid:

Resizer (free afaik)

Resize ($29)

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged windows-7 safari ..

• The Overflow Blog
• Exploring what inspired folks to start coding
• Why the creator of Node.js® created a new JavaScript runtime
• Featured on Meta
• Changing how community leadership works on Stack Exchange: a proposal and...
• Shifting the data dump schedule: A proposal
• Google Cloud will be Sponsoring Super User SE

Hot Network Questions

• Can a UK photographer legally photograph a US wedding if the wedding day shoot itself is unpaid?
• Why are nitric acid and hydrogen combinations not used as rocket fuel?
• Why does `nice` with a negative argument (e.g. `nice -15`) increment niceness?
• Clausen–Scholze's Theorem 9.1 of Analytic.pdf, in view of light condensed sets, AKA is the Liquid Tensor Experiment easier now?
• Can I Clear The Grid?
• How to ask a professor from 29 years ago to write you a recommendation?
• Gravitational potential and its relationship to field strength
• Short story. Trader in a one man spaceship tries to deliver an elephant at the request of an alien customer
• Cooling fan direction
• PowerShell redirection of Write-Host to file is not working
• Can religious, mystical, or spiritual experiences reveal truth?
• Hypothesis Testing for Means & Proportions. t-test vs z-test
• How do I get a hotel room in the centre when everything is sold out (and more expensive) because of a big event?
• Why don't Airbus planes have perfectly smooth front sections?
• How could a Massive Animal Thermoregulate?
• Is there a literary term for a word which looks completely 'flat' when spelled out in lowercase?
• Why aren't helicopter blades tapered?
• How to fill the blank in "Many of the world's great novels are reported ___ (make) into movies last year."?
• How to make a ParametricPlot3D curve rotate smoothly?
• Residual finiteness of hyperbolic 3-manifold groups
• Seeking a Polynomial Time Algorithm for Balanced Weight Assignment to Nodes in a Tree
• is the use of 突っ込まないで considered rude?
• Could uploading a paper on arXiv before publishing it in a journal lead to being "scooped", or does it actually prevent that?
• What happens if I connect a charger via USB-C to an iMac (M1 2021)?

• Skip to main content
• Select language
• Skip to search

Formal syntax

Min-content.

The width property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

The min-width and max-width properties override width .

The width property is specified as either:

• one of the following keyword values: available , min-content , max-content , fit-content , auto .
• a "><length> or a "><percentage> . This may optionally be followed by one of the following keywords: border-box , content-box .
• the intrinsic minimum width
• the smaller of the intrinsic preferred width and the available width

Default width

Pixels and ems, max-content, specifications, browser compatibility.

[1] WebKit implements a variation of this value under the name fill-available as of December 2013.

[2] Earlier versions of WebKit implemented an earlier version of this value under the name intrinsic , but implements fit-content since version 6.1 as well.

[3] Unprefixed.

[4] Old WebKit support  intrinsic and min-intrinsic keywords, but removed in Chrome 48 .

• box model , height , box-sizing , min-width , max-width

Document Tags and Contributors

• CSS Property
• NeedsBrowserCompatibility
• NeedsMobileBrowserCompatibility
• CSS Reference
• CSS Box Model
• Introduction to the CSS box model
• Mastering margin collapsing
• box-decoration-break
• margin-bottom
• margin-left
• margin-right
• padding-bottom
• padding-left
• padding-right
• padding-top
• ."> visibility

Similar Tutorials

Maker's Aid

How to Stop Safari From Auto-Zooming on Input Fields

No more zooming, no more problems. Here’s how to prevent Safari from auto-zooming on forms on iPhone.

If you have an input field on your website with a font size of less than 16 pixels, Safari on iPhone considers the text too small to read and automatically zooms in on the form field when the user taps on it.

While I appreciate the idea behind this feature, Google Analytics reports and Microsoft Clarity session recordings from my websites show that it also surprises and sometimes frustrates iPhone users as they don’t expect it.

So if you don’t disable it, it can have a negative impact on your form’s conversion rates (and, as a whole, your website’s engagement rates).

The question is how to do it…

Add a Viewport Meta Tag

The quickest and easiest way to stop Safari from zooming in on input fields with small text on iPhones is to add a <meta name="viewport"> tag with the following attributes and properties to your website’s <head> section:

Many years ago, Apple invented the viewport tag to give web developers more control over the way that their websites got rendered on iPhones. Nowadays, every browser supports the viewport tag—and having one has become the norm for usability on mobile devices.

The “viewport” is the part of the window where the content can be seen at any given moment of time. You can use the viewport meta tag to control the width and the scale of the viewport to make your website more user-friendly for users on phones.

Coincidentally, you can also use the viewport meta tag to disable Safari’s not-always-desirable auto-zoom on iPhones.

In the viewport meta tag above:

width=device-width sets the width of the page to the same as the width of the device’s screen.

initial-scale=1 sets the initial zoom of the page to 1.0 of that width, or no zoom at all.

maximum-scale=1 fixes the maximum scale of the page to 1.0. This prevents Safari from auto-zooming while still allowing the user to zoom in manually.

Change the Text Size of Input Fields

Alternatively, if you’re fine with using fixed (and not relative) font size in your CSS stylesheet, you can set the font-size property of all input fields to 16 pixels or bigger:

You can also do this through CSS inheritance:

The two examples above apply to all input fields. If you want to style a specific input field, use one or more the following CSS attribute selectors:

• input[type="date"]
• input[type="datetime"]
• input[type="month"]
• input[type="week"]
• input[type="time"]
• input[type="number"]
• input[type="range"]
• input[type="text"]
• input[type="url"]
• input[type="search"]
• input[type="email"]
• input[type="tel"]
• input[type="password"]
• input[type="button"]
• input[type="checkbox"]
• input[type="radio"]
• input[type="file"]

After setting the font size of these inputs to 16 pixels or bigger, you should no longer be able to observe the auto-zoom problem on Safari on iPhones.

My IPhone was disabled due to Safari Zoom. The text was so large that I couldn’t even get into my phone.

Not a great idea for Accessibility (for people with low vision) to add “maximum-scale=1”, read more here: https://www.a11yproject.com/posts/never-use-maximum-scale/ and https://dequeuniversity.com/rules/axe/4.4/meta-viewport

André Elmoznino Laufer you are pointing to an article from 2013 that was fixed in 2019. In current browsers user still can zoom if you don’t set user-scalable to ‘no’. ‘maximum-scale=1’ only prevents auto zoom shenanigans

Good point Maksim

You would go through the work of disabling an accessibility feature instead of making your forms better?

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

To provide the best experiences, we and our partners use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us and our partners to process personal data such as browsing behavior or unique IDs on this site and show (non-) personalized ads. Not consenting or withdrawing consent, may adversely affect certain features and functions.

Click below to consent to the above or make granular choices. Your choices will be applied to this site only. You can change your settings at any time, including withdrawing your consent, by using the toggles on the Cookie Policy, or by clicking on the manage consent button at the bottom of the screen.

WebKit Features in Safari 17.4

Mar 5, 2024

by Jen Simmons and Jon Davis

Architectural improvements

Form elements, web assembly, web inspector, changes to safari, safari extensions, web authentication, bug fixes and more, updating to safari 17.4.

Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes.

You can experience Safari 17.4 on iOS 17.4, iPadOS 17.4, macOS Sonoma 14.4, macOS Ventura, macOS Monterey, and in visionOS 1.1.

It’s always exciting to ship new features that you can use while building websites and web apps for your users. WebKit engineers also work on many important projects beyond implementing new web platform features. Recently, much effort has gone into multiple infrastructure projects that strengthen WebKit for the long-term.

We completed the final installment of our multi-year long rewrite of our inline layout engine (more on that later). We built two new iOS frameworks with hundreds of new APIs to support functionality used by web browsers, including multiprocess, JIT, and advanced keyboard & touch event access — and we are pivoting WebKit to use these new frameworks. We’re working on several other large projects that deepen security and privacy. And we’ve been hard at work to make Safari even faster. For many years, Safari has held the crown of the world’s fastest browser. It’s important to us to keep pushing the boundaries of speed, as the websites you build continue to get more complex. Hundreds of recent changes result in Safari 17.4 showing a significant performance bump.

Safari 17.4 brings two improvements to web apps on Mac.

First, Safari adds support for the shortcuts manifest member on macOS Sonoma. This gives you a mechanism in the manifest file for defining custom menu commands that will appear in the File menu and the Dock context menu.

A web app shortcut consists of a name , (the words you’d like to appear in the menu), and a url . When a user activates the command, it opens the specified URL inside the web app.

Users can set up custom keyboard shortcuts for app menu commands in System Settings > Keyboard > Keyboard Shortcuts > App Shortcuts. By default, macOS does not assign web app shortcuts any keyboard commands.

Second, Safari 17.4 now supports the categories manifest member on macOS Sonoma. This member provides you with a mechanism for telling the browser which categories your web app belongs in. On Mac, when a user creates a Launchpad folder that contains web apps, the folder is automatically named accordingly.

Switch control

The switch is a popular interface for many use cases, but until now, there was no easy way to put a switch on the web. Instead developers might use a checkbox input field, remove the visual look of the checkbox with appearance: none , and write custom styles to create something that looks like a switch.

Now, with WebKit for Safari 17.4, HTML supports a native switch. If you code <input type="checkbox" switch> , the browser will simply create a switch for you, and map it to role=switch and related ARIA features.

Extending the current HTML checkbox provides several benefits and honors the W3C’s HTML Design Principles . First, this design degrades gracefully — which means you can use <input type="checkbox" switch> today. Browser that have support will show a switch, while browsers that do not have support will show a checkbox. No user will get a broken experience, and you don’t have to wait until all of your users have a browser with support in order to utilize this on your website or web app. This design also does not reinvent the wheel . It matches the way form controls have always worked on the web, and feels just like the code you’re used to. It’s an incremental evolution of the web. And as a simple solution, it avoids needless complexity .

The accent-color property can be used to change the background color of the switch in the “on” state. And, exactly like other form controls, you can use appearance: none to remove the system default styling and apply your own, perhaps while leveraging :before and :after .

In the future, there will likely be multiple pseudo-elements to make it even easier to style the switch with your custom styles. You can try out ::track and ::thumb in Safari Technology Preview today and let us know what you think of this approach. See how they work in this demo , after enabling the “::thumb and ::track pseudo-elements” feature flag . (These pseudos are waiting to ship until there is a more comprehensive plan for styling form controls proposed, discussed and resolved on at the CSS Working Group.)

Vertical writing modes

From the beginning , the web has always been interactive. Even before any method of custom styling was available, form controls and input fields provided the means for users to communicate back to the website and to each other. The web was also originally designed in an era when the Latin alphabet (used by many languages, including English) was the presumed default, with its horizontal top-to-bottom writing mode.

For thirty years, form controls have presumed a horizontal writing mode . Typesetting in a vertical writing mode for languages like Chinese, Japanese, Korean, and Mongolian did not include vertical form controls. Now that’s changed. Starting in Safari 17.4, vertical form controls are supported. This includes meter, range, progress and other form controls that could make for great UI in any language when laid out in a vertical format.

Horizontal Rules inside Select

You can use an <hr> element (a horizontal rule) inside a <select> element to draw a separator line. WebKit shipped support in Safari 17.0 on macOS. Now, Safari 17.4 on iOS 17.4, iPadOS 17.4, and in visionOS 1.1 also has support.

Try a demo and read the story of how hr in select was supported years ago, went away, and is now restored.

WebKit for Safari 17.4 also adds support for the showPicker() method for <input type="date"> on macOS.

Inline Layout

One of the infrastructure projects that’s been underway in WebKit during the last several years is the complete rewrite of our inline layout engine. Safari 17.4 marks the completion of this project and the retirement of the twenty-one year-old legacy line layout engine.

Inline layout is integral to displaying content on the web. It determines the size and layout — wrapping, justification, spacing, and baseline alignment — of all text and other inline-level content. As developers, we often focus on the invisible block boxes on a web page and write CSS to layout those boxes using Flow, Tables, Flexbox or Grid. The content inside those boxes is placed using complex inline layout algorithms that developers often don’t need to think much about.

We’ve been shipping our new inline layout engine incrementally for many years. As more and more of the new engine was complete, more and more of the content on web pages was positioned by the new engine. This means users have been benefiting from WebKit’s new inline layout engine for a while. The legacy system was only triggered if there were something that hadn’t been yet implemented in the new engine. The last major step needed was the reimplementation of Ruby — and now it’s also a proper inline layout feature, fixing past inconsistencies.

Projects like these can be disruptive. Often browser teams will choose to not ship any new features while a multi-year rewrite project is in progress. WebKit instead chose to keep shipping new features, often implementing them twice — once in the legacy line layout engine, and again in the new inline layout engine. Now that this work is done, we no longer have to implement anything twice. This work also let us go through a large number of bugs reported on bugs.webkit.org , confirm they are no longer a problem, and close them as fixed.

We’re excited for WebKit’s future with this new engine. This investment results in increased interoperability by aligning to the latest web standards, fewer inline layout bugs, better performance, improvements to stability, and the ability to implement new features far more easily. The completion of inline layout also marks the beginning of rewriting the layout engine for other formatting contexts , starting with Flexbox.

Align content everywhere

When Flexbox shipped, it brought a powerful new tool to the web — box alignment . The align-content property made it possible to easily vertically center content inside a box! Or you could use it to align content to the bottom to the box, to align baselines of text, and more. When CSS Grid shipped, box alignment became possible in a second layout mode. Since 2017, you’ve been able to align the direct children of both Flexbox and Grid containers.

Now, we are proud to be the first browser shipping support for align-content inside two more formatting contexts — block layout and table layout. This means if all you want to do is align a box’s content in the block direction, you don’t need to involve Flexbox or Grid. Plus, you can now mix alignment with floats, and you can use it inside table cells.

In addition, we updated the handling of align-content and justify-content on scroll containers in WebKit for Safari 17.4. Now, for example, you can use CSS to set the initial scroll position to the end rather than the start of the content.

Be sure to test alignment on scroll containers across browsers, as many are still in the process of updating to the specified behavior. Those that have not yet updated may clip content.

CSS Scoping

Websites today can be complex, with large teams working across multiple projects, relying on pattern libraries or frameworks to keep everything organized and consistent. It can become tough for large teams to handle how their CSS cascades. Tools like Cascade Layers and :has() have changed the game, allowing developers to apply styles more masterfully. Yet, developers often want a way to scope styles to the individual component they’re working on, without worrying about the big picture or preventing unintended consequences.

CSS Scoping was created to provide several more powerful options for organizing and structuring CSS. (Note, there have been many debates over many years on how style scoping might work. Search results for “CSS scoping” often yield old, unimplemented or completely different ideas.)

WebKit for Safari 17.4 adds supports the @scope rule and expands the capabilities of the :scope pseudo-class. Scoping changes how the cascade works in some surprising ways, so do be sure to read about its impact before deploying widely.

If your project is making heavy use of components, constructed independently and loaded in random order, scoping can help you by ensuring certain styles only apply to the contents of a specific element, and never to anything else on the page.

By default, all CSS on a project applies universally. It has a “scoping root” of <html> . And the :root pseudo-element refers to the root element in the DOM — the html element. CSS Scoping lets you use <style> @scope to reset the scoping root to a certain element, to the parent of the <style> element.

In this case, because <article> is the direct parent of <style> @scope , all of the styles defined inside @scope will only impact article and the content inside article . Nothing outside article is affected.

But that’s not all CSS Scoping can do. Let’s imagine we want to apply styles to a sidebar, but we don’t want those styles to apply to everything in the sidebar. We can use @scope to create a donut of sorts — with a hole in the middle where the styles don’t apply.

By defining a scoping root with a scope-start selector ( aside ) and a scoping limit with a scope-end selector ( section ), we can effectively stop the cascading of the styles.

Also, anytime you use CSS Scoping, it radically changes what happens when there’s a tie in specificity.

Since the creation of CSS, when multiple selectors have equal specificity, the one that appears last in the CSS cascade is the one that gets applied. For example, if this is your CSS:

Then this is your result.

The headline is always yellow, because .yellow comes later in the CSS file. The order in the HTML does not matter.

But with scoping, the selector that applies to an element that’s closer in the DOM to the scoping root is the one that will apply when their specificities are tied .

Let’s use @scope instead of descendant selectors:

Now, the headline color is determined by the DOM order in HTML, not the cascade order in CSS:

The headline is yellow when .yellow is the closer ancestor, and it’s blue when .blue is the closer ancestor.

This is a fundamental change to how CSS works, so don’t get caught off guard. Use CSS Scoping with a lot of thought and care.

Note that a selector like .blue h1 { } has higher specificity than a selector like @scope (.yellow){ h1 { }} . The specificity of the scoping root’s selector is not added to the specificity of the selectors inside the @scope rule, unlike Nesting. And .blue h1 is higher specificity than h1 .

WebKit for Safari 17.4 also expands the purpose of the :scope pseudo-class. When used inside a @scope block, :scope matches the block’s defined scope root. This provides a way to apply styles to the root of the scope from inside the @scope block itself. In the following example, :scope applies a border to the article element.

White space and text wrap

For years, the white-space property in CSS has provided a mechanism for doing two things at once: 1) defining whether and how white space is collapsed, and 2) defining whether and how lines wrap. The CSS Working Group has since noted that this was likely a mistake , to handle two different qualities in one property. With the introduction of text-wrap , the CSSWG has rethought how the long and shorthand versions of these properties combine into an architecture that makes more sense and gives us needed flexibility.

Now the white-space property is a shorthand for two new longhand properties: white-space-collapse and text-wrap-mode , both added in WebKit for Safari 17.4. These longhands let you change the collapsing and wrapping modes independently, each without affecting the other.

The white-space-collapse property controls how white space is collapsed. By default, it’s set to collapse , causing strings of multiple spaces to become a single space. You can change the value instead to preserve in order to keep all the spaces, or use other the values: preserve-breaks , preserve-spaces , or break-spaces . These values all behave as they have for years with the white-space property.

The new text-wrap-mode property provides a mechanism for setting whether or not text should wrap. The wrap value turns it on, and the nowrap value turns it off.

This work sets the stage for the text-wrap shorthand and it’s longhands text-wrap-style and text-wrap-mode , some of which you can currently test in Safari Technology Preview .

Percentages in spacing

WebKit for Safari 17.4 adds support for percentages in letter-spacing and word-spacing . This lets you define spacing as a percentage of the element’s font-size — and keeps tracking the font-size even when it grows or shrinks on descendant elements.

Styling grammar and spelling errors

WebKit for Safari 17.4 adds support for the ::spelling-error and ::grammar-error pseudo-elements. These make it possible to create your own custom styling for text that is marked by the browser as misspelled or grammatically incorrect.

Alt text for generated content

The vast majority of content on the web is communicated through HTML, but CSS does have the ability to insert content into the page. Until now, sometimes this kind of content could not be made accessible. Now in WebKit for Safari 17.4, you can provide alternative text with accessible content fallback — content: "foo" / "alt-text";

For example, perhaps we want to prefix certain links with the little ⓘ icon to let users know this item leads to more detailed information. That symbol might be read by screenreader as “Circled Latin Small Letter I” or “Information source combining enclosing circle”, neither of which do a good job communicating the intended purpose. Perhaps a better experience would be to simply hear “Info:”.

Previously, the -webkit-alt property served this function. It has been deprecated in favor of the new content alt text syntax. The new syntax is also more expressive as it allows for cascading, and allows you to chain multiple strings and attr() as alternative text.

Transitions

When CSS Transitions were created, they allowed authors to create a gradual timed transition between old and new values by interpolation. Sometimes, however, interpolation is not possible. For example, there’s no meaningful intermediary value between float: left and float: right , so, transitions ignored these properties. They simply jumped from the first state to the second immediately, without any ability to define when the jump should happen.

Yet, web developers have wanted a way to at least be able to define when the transition should happen for discrete properties. So the CSS Working Group figured out a way to make that possible. Now, you can tell the browser that you want an element to be capable of transitioning discrete property values, which lets you control their transition timing using the easing functions .

WebKit for Safari 17.4 adds support for the transition-behavior property. The transition-behavior: allow-discrete rule lets you enable transitions between discrete property values, so that you can control their timing via transition .

The :has() pseudo-class provides tremendous value. We keep making it more and more powerful by adding support for additional pseudo-classes within :has() . WebKit for Safari 17.4 adds support for :has(:any-link) , :has(:link) , and :has(:-webkit-any-link) , making it possible to select an element depending on whether or not it contains a link.

WebKit for Safari 17.4 adds support for CSS custom properties to the ::backdrop pseudo-element, allowing variables to be applied to the backdrop behind dialog elements and other top layer items.

WebKit for Safari 17.4 also adds offset-position support for circle() and ellipse() .

And WebKit for Safari 17.4 makes -apple- prefixed pseudo-elements no longer valid.

This release of Safari adds support for an assortment of small Web API additions that give you extra tools in your developer toolkit.

With support for the element.checkVisibility() method, you can determine the visibility of an element across a variety of conditions including how CSS properties such as display , visibility , and opacity are applied.

WebKit for Safari 17.4 also extends its Declarative Shadow Root support. The Element.prototype.setHTMLUnsafe() , ShadowRoot.prototype.setHTMLUnsafe() , and Document.parseHTMLUnsafe() methods, as well as the ShadowRoot clonable property are now available. The setHTMLUnsafe() methods work similar to setting an element’s innerHTML property, enabling unsanitized DOM tree mutation but with additional support for declarative shadow roots. The parseHTMLUnsafe() method similarly parses unsanitized HTML with declarative shadow root support and returns a document. And the clonable read-only boolean property allows you to detect if a ShadowRoot is clonable.

WebKit for Safari 17.4 adds support for the CustomStateSet interface for custom element state management. This interface includes methods to add() , delete() , or detect if the element has() a given state, and more. Importantly, these states added to a custom element can be styled using the :state() pseudo-class by users of the custom element.

The DOMMatrixReadOnly interface now supports the scaleNonUniform() method that creates a new DOMMatrix scaling on X, Y, and Z axes. The X axis scaling factor must be specified, but the Y and Z axes default to 1 . The scaling is centered at the given origin that defaults to (0, 0, 0) .

Lastly, WebKit for Safari 17.4 adds support for AbortSignal.any() giving you a convenient way to combine abort signals such as user input (e.g. a user clicks a cancel button) and a timeout to send an abort signal to an async operation.

New JavaScript features in Safari 17.4 add new expressiveness and convenience with promise resolvers, improved internationalization formatting, ArrayBuffer ownership management, and Array grouping features.

WebKit for Safari 17.4 adds support for the Promise.withResolvers static method. It allows developers the convenience of creating a promise and configure the resolution and rejection handlers after it has been created. The method returns the promise along with the resolution and rejection functions.

The TimeZoneOffset format is now available for Intl.DateTimeFormat . It allows you to specify the difference of the local time to UTC time in positive or negative hours and minutes depending on whether the local time is ahead or behind.

Additionally, Number.prototype.toLocaleString and Intl.NumberFormat have been updated so the string representation correctly aligns with recent specification changes.

There’s also new expressive API for managing the concept of ownership for ArrayBuffers. ArrayBuffer.prototype.transfer creates a new ArrayBuffer with the same contents and properties as the target ArrayBuffer (such as being resizable) and detaches it from the original ArrayBuffer. You can use ArrayBuffer.prototype.transferToFixedLength() to guarantee a non-resizable ArrayBuffer with the same content as the buffer. ArrayBuffer.prototype.detached will tell you if the buffer has been transferred and is detached.

WebKit for Safari 17.4 also adds the Array grouping feature that includes Object.groupBy and Map.groupBy methods. These methods give you powerfully simple tools for grouping datasets.

Additional codecs

WebKit for Safari 17.4 adds support for several audio and video codecs.

First, WebKit for Safari 17.4 on iOS, iPadOS and in visionOS adds support for WebM . While the WebM container (with both the VP8 and VP9 video codecs) has been fully supported on macOS since Safari 14.1, support on iOS and iPadOS was limited to VP8 in WebRTC. Now, WebM is fully supported everywhere.

The Vorbis audio codec is also now supported in WebKit on iOS 17.4, iPadOS 17.4 and in visionOS 1.1.

And WebKit for Safari 17.4 expands what WebCodecs can do with the addition of support for the HEVC codec.

Source prioritization

When support for video embedding arrived in HTML5 with the <video> and <source> elements, the web standard specified that the first file that’s recognized by the browser should be chosen and played. This put the burden on the developer to make sure the best files were listed before lesser-quality files.

This made sense in a simpler time, when there were just a few codecs available. Now, there are many codecs with different qualities. It’s not always possible for developers to know which file is the best one for a user to stream. And it can be impossible to put them in one specific order that’s best for all users.

A browser might easily be capable of playing several of the files offered, but one of those files could be compressed with a codec that the user’s device can decode using hardware, while the rest might only be decoded by software alone.

It’s definitely a better user experience to use hardware decoding. Doing so significantly impacts power usage and makes a battery last longer. So now, in WebKit for Safari 17.4, the best file for the user is chosen, instead of defaulting to the first file that has support. Video codecs with hardware decoding support on various Apple devices include VP9, h.264, HEVC and AV1.

WebKit for Safari 17.4 adds support for HTML character entities to WebVTT (Web Video Text Tracks Format), the technology used to add subtitles and captions to video files on the web. HTML entities are a way to write special characters without having the browser mistakenly think they are part of the HTML code. For example, &middot; represents the “·” character.

MediaStream

WebKit for Safari 17.4 adds support whiteBalanceMode to MediaStream. In photography, adjusting white balance is a technique for compensating for the fact that “white” is a different color under different lighting conditions. Sunlight is very blue, while indoor lights tend to be quite orange. Our brains automatically adjust, so as humans, we rarely notice. But cameras need technology to help them adjust color temperature so that the resulting photo or video has the kind of coloring people expect. Now modes for white balance are available for the MediaStream Image Capture API on the web.

WebKit for Safari 17.4 adds support for kernelUnitLengthX and kernelUnitLengthY to SVGFESpecularLightingElement .

WebKit for Safari 17.4 adds support for four new WebGL extensions: EXT_clip_control , EXT_depth_clamp , EXT_polygon_offset_clamp , and WEBGL_polygon_mode .

WebKit for Safari 17.4 enables extended constant expressions to support more advanced WebAssembly linking.

Web Inspector for Safari 17.4 has two new features. First, when a page attempts to load a font URL blocked by Lockdown Mode, a message is logged to the Console.

Second, Web Inspector now groups load errors for source maps. Source map files are used for converting a combined or minified file back into its original state. Grouping load errors helps reduce noise while debugging. You can disable this behavior in Web Inspector Settings under Experimental settings.

Safari 17.4 itself includes three changes to the UI and user experience. First, you can now configure the Favorites Bar to show your bookmarks with only their icons. Edit the name of the bookmark in the favorites bar, and remove the name. The icon will remain.

Second, Safari 17.4 now supports webpage translation inside <iframe> elements.

And third, Safari 17.4 adds support for Apple Cash virtual card numbers and showing the user their Apple Cash balance when using AutoFill.

Safari 17.4 includes a change to web extensions that allows extensions to open Private Browsing windows even when they don’t have access to Private Browsing.

WebKit for Safari 17.4 adds support for WebAuthn’s PublicKeyCredentials.getClientCapabilities() function. Use it to find out which WebAuthn features are supported. It returns a Promise of a record<DOMString, boolean> containing capabilities and their values.

In addition to all the new features, WebKit for Safari 17.4 includes work polishing existing features.

Accessibility

• Fixed exposing the correct <summary> element role. (13661104)
• Fixed non-accessible content within iframes with ARIA roles. (104611075)
• Fixed VoiceOver word echo on text inputs with a combobox role. (112488137)
• Fixed an issue where innerHTML and innerText changes to labels did not update their corresponding input element’s accessibility title. (113872525)
• Fixed <details> and <summary> elements not included in VoiceOver form controls menu or list. (117308226)
• Fixed comboboxes not notifying assistive technologies when aria-activedescendant changes. (117747058)
• Fixed toggling accessibility preferences to correctly update form control appearance. (117914468)
• Fixed: Removed the default ARIA-level heading for a heading role, matching removal from ARIA specifications. (119059172)
• Fixed text missing from accessibility labels for many common shadow DOM scenarios. (120223342)

Browser Changes

• Fixed loading a ⌘Click fragment link in a background tab. (119079650)
• Fixed the default link color contrast for the dark color scheme. (61149466)
• Fixed getComputedStyle() for invalid pseudo-elements. (98504661)
• Fixed querySelector() to not throw an exception for -webkit- prefixed pseudo-elements. (99299129)
• Fixed :user-invalid triggering while typing a date. (110687369)
• Fixed: Updated text-transform: full-size-kana to align with Unicode 15. (111508663)
• Fixed contain: inline-size breaking grid-template-rows: auto . (113915953)
• Fixed svh and dvh units being unexpectedly equal when the Safari tab bar is not visible. (115085360)
• Fixed mixed-blend-mode to blend correctly against the root background. (115688282)
• Fixed backdrop-filter with many interoperability improvements. (115703346)
• Fixed oklab and oklch lightness value clamping. (116195533)
• Fixed flex layout invalidation in cases where the content of a flex item changes or style changes impact the preferred widths computation of its items. (117181858)
• Fixed selection gaps to get painted with the expected ::selection pseudo-element color. (117796745)
• Fixed parsing and serialization of -webkit- prefixed pseudo-elements. (118081134)
• Fixed ::backdrop to be allowed after ::slotted() . (119015204)
• Fixed to allow :checked and :indeterminate to match at the same time. (119075969)
• Fixed grid with size containment and min-height not sizing row correctly. (119736473)
• Fixed computing values of basic shape rect() and xywh() as the equivalent inset() . (119739406)
• Fixed poor performance with :has(+ :not(.class)) pseudo-class selector. (119819247)
• Fixed CSS content computed value serialization. (120061551)
• Fixed pseudo-element parsing in getComputedStyle() and KeyframeEffect.prototype.pseudoElement so they require them starting with :: (or : for 4 legacy pseudo-elements). (120170550)
• Fixed CSS linear() easing. (120290721)
• Fixed named at-rule container getting skipped when the container is named in a :host selector. (120428386)
• Fixed :not(:has(:not(foo))) getting misclassified as scope breaking. (120492012)
• Fixed the name for a ::slotted pseudo-element in a container query getting resolved against the wrong scope. (122224135)
• Made -apple- prefixed pseudo-elements no longer valid. (120268884)
• Fixed <select> not refreshing the dropdown after an <option> is removed on iPad. (88292987)
• Fixed text-indent to affect the selected file(s) label for file inputs. (105223868)
• Fixed dir=auto to work for hidden , password , submit , reset , and button input types, made dirname work for password and submit input types, and removed dirname support from number input types. (113127508)
• Fixed serialization of autocomplete with a webauthn token. (116107937)
• Fixed <option> elements outside of an <optgroup> getting added to the preceding group. (117930480)
• Fixed viewport units to be correct after entering and exiting fullscreen mode on iOS, iPadOS, and in visionOS. (120496571)
• Fixed the system-ui font family within <canvas> . (117231545)
• Fixed <progress> to use the page’s preferred rendering update interval. (118976548)
• Fixed missing support for the direction attribute in the list of attributes whose values are matched case-insensitively with attribute selectors. ( (119432066)
• Fixed stringification algorithm of the Function constructor to match specifications. (102065151)
• Fixed block-level function declarations to have correct scope in global code and aligned the detection of hoistable block-level legacy function declarations with the spec. (113880075)
• Fixed an edge case with detecting a semantic error in generators. (117497786)
• Fixed Temporal API to throw TypeErrors for unexpected primitives. (117992134)
• Fixed Temporal options handling to align with the specification. (118088676)
• Fixed Temporal.Now.timeZone() to be updated to timeZoneId() . (118674314)
• Fixed Link-stylesheet elements to not fire load events for non-text/css and non-2XX responses. (116112223)
• Fixed link-stylesheet elements to not fire load events for non-2XX responses such as 3XX responses that do not redirect. (116331826)

Lockdown Mode

• Fixed Lockdown Mode disabling on sites with COOP and COEP HTTP headers. (119503109)
• Fixed WebVTT regions to position according to specifications. (23091897)
• Fixed pausing MediaRecorder continuing to call ondataavailable at every timeslice event. (115979604)
• Fixed an HEVC decoder issue when translating annexb data. (116768196)
• Fixed WebVTT to treat negative percentages as invalid values. (117615681)
• Fixed object-fit: fill on <video> elements. (118020922)
• Fixed WebRTC calls not unmuting automatically after using Siri sometimes losing incoming audio. (118461093)
• Fixed white bars across the top and bottom of fullscreen video playback while using Light Mode. (118530255)
• Fixed the always empty video.buffered attribute. (118550061)
• Fixed WebVTT to correctly parse region id settings. (118551267)
• Fixed VideoEncoder produces no frames with latencyMode “realtime” when framerate/bitrate are not given. (118725549)
• Fixed AV1-in-MP4 codec string not shown in Show Media Stats. (118850797)
• Fixed getDisplayMedia frameRate always at 30 regardless of constraints. (118874132)
• Fixed returning to fullscreen from picture-in-picture breaking subsequent touch input. (119832557)
• Fixed HLS video captions where there are multiple text tracks available. ( (119839950)
• Fixed fullscreen video not scaling to display size when the Safari window is in Full Screen App Mode. (119893556)
• Fixed handling key renewal requests that cause playback errors for some DRM content. (120230860)
• Fixed camera and mic activation failure due to media capability granting and activation order. (120510826)
• Fixed paint-on captions shifting during playback. (120847946)
• Fixed videos shifting up and down when fullscreen overlay controls appear or disappear. (120848395)
• Fixed volume slider flickering when adjusting volume in Safari in visionOS. (120855936)
• Fixed blocked encrypted sampled not getting enqueued after a CDM is attached to a SourceBuffer. (120879185)
• Fixed video playback on Twitter.com in Safari in visionOS. (121391975)
• Fixed[Netflix.com content that can become zoomed-in and cropped when in fullscreen mode. (121822831)
• Fixed pseudo-element font size calculation to fix subtitle size in fullscreen mode. (122584350)
• Fixed incorrectly oriented Traditional Mongolian script characters.(93426525)
• Fixed resizing behavior with writing-mode: vertical-rl or direction: rtl . (102620110)
• Fixed opacity and rendering the root element background image. (115396444)
• Fixed the color of the drop shadow to preserve its alpha channel. (115812347)
• Fixed filters with outsets to repaint the entire filterRegion if GraphicsStyles are used. (115817290)
• Fixed compositing the filter style transparency layers to not clip the destination context. (115901634)
• Fixed a bug where the returned transform from getComputedStyle was incorrect. (117523629)
• Fixed handling images with color spaces not supported by the backend to fallback to render in sRGB. (118238178)
• Fixed check boxes and radio buttons to avoid floats. (118660695)
• Fixed rendering for a <div> within a transformed parent <div> with overflow: hidden . (118901069)
• Fixed rendering issues when editing text. (119833765)
• Fixed offsetHeight and offsetWidth are 0 for an inline box wrapping a block. (119955792)
• Fixed a floating element causing a list item bullet to be orphaned on constrained lines. (120022893)
• Fixed incorrect inline box (hugging) outline painting in vertical writing modes. (120217559)
• Fixed incorrect ch unit value in vertical-rl and vertical-lr when text-orientation is not upright. (120293590)
• Fixed graphics artifacts when scrolling a Heroku app. (120373474)
• Fixed overflow: hidden to not prevent CSS Subgrid from applying. (120848131)
• Fixed the repaint area for underline text decorations. (121082290)
• Fixed align-content and justify-content on scroll containers causing overflowing content to become inaccessible. (121366949)
• Fixed rendering floats and an out-of-flow <br> element with clear . (121444267)
• Fixed a line break at gaps between two inline elements in a container with white-space: nowrap . (121859917)
• Fixed cropped first letter for custom fonts that report negative advance width. (121891210)
• Removed margin-trim behavior for floats to match specification changes. (115794102)
• Fixed sending an error back to the caller if an error occurs for scripting.executeScript() . (107996753)
• Fixed an issue where scripts may not be removed after calling scripting.unregisterContentScripts() . (113171510)
• Fixed unusable horizontal scrollbars for right-to-left, vertical-rl , or flexbox reverse mode elements. (104944522)
• Fixed a scrollTo() followed by an animated scroll ending at the wrong scroll position. (117608836)
• Fixed wheel overflow behavior with Shadow DOM elements. (118496293)
• Fixed keyboard scrolling beyond the page getting stuck at a bad scroll offset. (120053910)
• Fixed cases where website data is unexpectedly evicted. (119818267)
• Fixed applying rx or ry exclusively via CSS having no effect. (113500023)
• Fixed negative SVGTransform scale values to be correctly stringified. (118656892)
• Fixed the layout of an SVG when it is inside an <iframe> without affecting the size of the <iframe> . (120178866)
• Removed support for SVGRenderingIntent. (102516681)
• Fixed CSS invoked URL parsing to always use UTF-8 as agreed by the W3C CSS WG. (114889625)

Web Animations

• Fixed style invalidation for animations. (118500247)
• Fixed a paused animation where currentTime is changed to 0 not restarting when unpaused. (118826588)
• Fixed invalid coordinates on wheel and gesturechange events inside an iframe. (105243167)
• Fixed HTMLAreaElement to align with the HTML Standard. (110028213)
• Fixed the result of Range.getClientRects() and Range.getBoundingRect() for certain ranges. (112543805)
• Fixed Scroll To Text Fragment to not scroll after dynamic stylesheet loads and the user has scrolled. (112608578)
• Fixed SharedWorker referrer policy to default to its context referrer policy if none is provided in its script http response. (114625126)
• Fixed URL encoding for Request ‘s referrer feature and Response.redirect() . They now always use UTF-8. (115219660)
• Fixed reprocessing <meta name="color-scheme"> when their name or content attribute changes. (115958450)
• Fixed FetchResponse.formData() to parse headers names as case insensitive. (116742000)
• Fixed declarative shadow trees to match the latest specifications. (117655691)
• Fixed jiggling caused by repeated calls to scrollIntoView({ block: 'center' }) . (117755250)
• Fixed fullscreen warning banner to prevent cutting off long domain names. (118078137)
• Fixed updating resizeBy and resizeTo to use int rather than float to align with specifications. (118872048)
• Fixed the CookieChangeEvent to not be exposed when the Cookie Store API is disabled. (118902989)
• Fixed Element.prototype.setAttributeNode() to not treat attribute names case insensitively. (119013600)
• Fixed toggling the spellcheck attribute not toggling spelling markers on input elements. (119269616)
• Fixed removing highlights in the Custom Highlights API. (119531671)
• Fixed getElementsByName() to only return HTML elements, not SVG, MathML, or other types of elements. (120275680)
• Fixed the button value for a pointerup event not matching the pointerdown event. (120429508)
• Fixed a wheel event to fire on an element that has been re-inserted after document.open . (120893136)
• Fixed Scroll To Text Fragment Text Directives to find text with additional unrendered white space in their node data. (120913588)
• Fixed changing HTMLCanvasElement width or height causing intermediate buffer allocations. (122309325)
• Fixed canvas captureStream stuttering with WebGL. ((122471664)
• Fixed Home Screen Web Apps in Simulator to be listed under a “Home Screen Web Apps” section in the device submenu of the Develop menu. (117742935)
• Fixed the tan() function to not trigger the color picker. (118724061)
• Fixed Canvas WebGL context capture to WebCodecsVideoFrame not capturing all frames. (108459224)
• Fixed: Improved performance of MSAA rendering, including antialiased default framebuffer and fixed PBO uploads of PVRTC1 textures. (117461678)
• Fixed WebGL OffscreenCanvas returning the previously created WebGL1 context when asking for WebGL2. (119028794)
• Fixed WebGL to be available in nested workers. (120279728)
• Fixed HTML content not displaying in a Simulator, affecting projects using the web extension project template. (121338366)
• Fixed media tracks obtained with {"width":1920,"height":1080,"frameRate":24} . (61747755)
• Fixed triggering resolution scaling in the case of WebRTC maintain-framerate degradationPreference . (121041723)
• Fixed a bug that prevented HTML canvas elements from always being marked dirty on initialization. This could cause some video effects to have choppy animations. (121257960)

Safari 17.4 is available on iOS 17.4 , iPadOS 17.4 , macOS Sonoma 14.4 , macOS Ventura, macOS Monterey and in visionOS 1.1.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.4, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.4 release notes .

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Select auto width in Safari #326

eugeniojauregui commented Apr 26, 2013

fidian commented Jun 4, 2013

Sorry, something went wrong.

eugeniojauregui commented Jul 9, 2013

jeffclemens commented Jul 19, 2013

roubaobaozi commented Jul 31, 2013

adibreaban commented Jan 27, 2014

Roubaobaozi commented jan 30, 2014, adibreaban commented jan 30, 2014, roubaobaozi commented jan 31, 2014, adibreaban commented jan 31, 2014, roubaobaozi commented apr 3, 2014.

gandoulfe commented Jun 6, 2014

Roubaobaozi commented jun 12, 2014.

fidian commented Jun 20, 2016

No branches or pull requests

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

CSS font-size-adjust : How to auto-adjust your font size

In this article, we’ll take a look at how the font-size-adjust attribute helps you auto-adjust your font size. We’ll cover the following topics:

• How the CSS font-size-adjust attribute works

Browser compatibility for font-size-adjust

• How the font-size CSS attribute compares to font-size-adjust

How CSS font-size-adjust works

Developers often employ numerous font families and font sizes on a single webpage for style and readability purposes. A developer might, for example, use the Open Sans typeface for headlines and the Roboto Mono font for the body.

When a font cannot be accessed, the browser falls back on the second font provided, which may cause a significant shift in font size, and, in turn, shift around other parts of our UI. To give a better depiction of this as it would appear when implemented, take a look at the below illustration.

This example compares two typefaces with differing x-heights and demonstrates how the x-height of one may be adjusted to match the x-height of the other using font-size-adjust . Though both examples use the same two fonts, in the first line without font-size-adjust applied, all of the lowercase letters in the first font are much taller than those in the second font.

This is where font-size-adjust comes in handy — in the second line, the attribute adjusts the size of the letters in the second font to match the x-height of the first font’s letters.

font-size-adjust is useful because it determines font readability based on the size of lowercase letters, rather than the size of capital letters, and adjusts the size of lowercase letters to the size of those in the font currently in use.

Using the font-size-adjust attribute can help prevent this from happening by giving you more control over the font size. However, not all typefaces are supported by all browsers, and using unsupported typefaces may make your website look weird, as previously discussed. Let’s take a look at browser compatibility in the next section.

Before we move into the details, let’s review browser support for the font-size-adjust property. As of writing of this article, the CSS font-size-adjust property is currently only supported by Firefox by default.

​​Chrome and Opera support this property behind the “Experimental Web Platform Features” flag, which may be activated in chrome:/flags , and ranges from version 43 to 30. The CSS font-size-adjust attribute isn’t currently supported by Edge or Safari.

Source: MDN Docs

Now, let’s take a brief look at the CSS font-size property more broadly before diving into the CSS font-size-adjust property.

The CSS font-size property

The font-size CSS property sets the size of the font overall. There are some key things to note about the font-size property:

• When the font-size property is set to a fixed value in em , the size is calculated based on the font size of the parent element
• If other elements are stated in em , changing the font size of one element may impact the font size of others
• When font size is provided as a percentage, it is calculated relative to the font size of the parent element

Here is a sample of the font-size syntax:

The CSS font-size-adjust property

As we mentioned before, the CSS attribute docs specify that the element’s font size should be adjusted based on the height of lowercase letters, rather than the height of uppercase letters.

When the primary font type cannot be accessed, the CSS font-size-adjust property allows developers to control font size at the component level. In such cases, a font backup is referenced, and the browser switches to display the secondary font.

But if there is a variation in the aspect ratio of the desired original and current fonts, this may cause issues with legibility and accessibility. The CSS font-size-adjust property may be used in situations where we need to retain the text’s legibility while maintaining its aesthetic.

The font-size-adjust syntax is as follows:

• Number : The font-size-adjust property is set to a number
• None : This is the default value
• Initial : Sets the value of this property to its default
• Inherit : The font-size-adjust property is passed down from parent to child

Let’s look at an example. Say that the font-size-adjust property receives a value of 0.5 , which will return a font size that is half the given font size for lowercase letters.

Over 200k developers use LogRocket to create better digital experiences

See the Pen font-size-adjust by Adekanye Oluwatomiyin ( @Adetomi ) on CodePen .

We can also set this property as a number and multiply it by the font-size property to make it compatible with browsers that do not support font-size-adjust . Here’s another example:

This sets the x-height of the font’s lowercase letters to 20 * 0.5 , which is equal to 10px .

In browsers that do not support font-size-adjust , a 20px font will still be executed when using this method.

Based on the image above, the difference between the two fonts isn’t very obvious. Whereas, if you use none , the predefined font, and its given size:

You can more clearly see that there is a clear difference between these two fonts. The size of both sentences is based on the font-size property, using the predefined font-size.

You should now have a better understanding of what the CSS font-size-adjust property does, why it’s important, and how to include it in your CSS styles.

You can start using this property in your web applications in order to improve legibility and aesthetics. Given that it is only supported by one browser, to avoid size difference due to browser incompatibility, it’s probably still a best practice to pick typefaces with closely comparable ratios.

Thank you, and happy styling.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket .

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Exploring Catalyst, Tailwind’s UI kit for React

Tailwind’s Catalyst UI kit offers many features and customization options for React user interface development.

Using react-to-print to generate a printable document

ReactToPrint is a great tool for easily adding a print feature to your React app while preserving your document’s neat, consistent look.

Migrating a JavaScript frontend to Leptos, a Rust framework

Leptos is a Rust frontend framework with excellent performance and support for modern features like signals, SSR, CSR, and more.

Actix Web adoption guide: Overview, examples, and alternatives

Actix Web is definitely a compelling option to consider, whether you are starting a new project or considering a framework switch.

One Reply to "CSS <code>font-size-adjust</code>: How to auto-adjust your font size"

It helped me a lot in setting the subtitles to display well. I always thought that you have to enter in PX and you can also enter in%. And can font family also use something to use the default from the page and not impose it?

Leave a Reply Cancel reply

2018 Primetime Emmy & James Beard Award Winner

R&K Insider

Join our newsletter to get exclusives on where our correspondents travel, what they eat, where they stay. Free to sign up.

A History of Moscow in 13 Dishes

Featured city guides.