import { type StandardShorthandPropertiesFallback } from "https://deno.land/std@0.39.0/types/react/csstype.d.ts";
Properties
The **all**
CSS shorthand property sets all of an element's properties (other than unicode-bidi
and direction
) to their initial or inherited values, or to the values specified in another stylesheet origin.
Initial value: There is no practical initial value for it.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
37 | 27 | 9.1 | No | No |
The animation
shorthand CSS property sets an animated transition between styles. It is a shorthand for animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
, and animation-play-state
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
43 | 16 | 9 | 12 | 10 |
3 -x- | 5 -x- | 4 -x- |
The background
shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The border
CSS property sets an element's border. It's a shorthand for border-width
, border-style
, and border-color
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The border-block
CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
69 | 66 | No | No | No |
The border-block-end
CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
69 | 41 | 12.1 | No | No |
The border-block-start
CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
69 | 41 | 12.1 | No | No |
The border-bottom
CSS property is a shorthand that sets the values of border-bottom-width
, border-bottom-style
and border-bottom-color
. These properties set an element's bottom border.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The border-color
shorthand CSS property sets the color of all sides of an element's border.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The border-image
CSS property draws an image in place of an element's border-style
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
16 | 15 | 6 | 12 | 11 |
7 -x- | 3.5 -x- | 3 -x- |
The border-inline
CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
69 | 66 | No | No | No |
The border-inline-end
CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
69 | 41 | 12.1 | No | No |
The border-inline-start
CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
69 | 41 | 12.1 | No | No |
The border-left
CSS property is a shorthand that sets the values of border-left-width
, border-left-style
and border-left-color
. These properties set an element's left border.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The border-radius
CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
4 | 4 | 5 | 12 | 9 |
1 -x- | 3 -x- |
The border-right
CSS property is a shorthand that sets the values of border-right-width
, border-right-style
and border-right-color
. These properties set an element's right border.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 5.5 |
The border-style
CSS property is a shorthand property that sets the line style for all four sides of an element's border.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The border-top
CSS property is a shorthand that sets the values of border-top-width
, border-top-style
and border-top-color
. These properties set an element's top border.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The border-width
shorthand CSS property sets the widths of all four sides of an element's border.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The column-rule
CSS property sets the width, style, and color of the rule (line) drawn between columns in a multi-column layout.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
50 | 52 | 9 | 12 | 10 |
1 -x- | 3.5 -x- | 3 -x- |
The columns
CSS property sets the column width and column count of an element.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
50 | 52 | 9 | 12 | 10 |
9 -x- | 3 -x- |
The flex
CSS property sets how a flex item will grow or shrink to fit the space available in its flex container. It is a shorthand for flex-grow
, flex-shrink
, and flex-basis
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
29 | 20 | 9 | 12 | 11 |
21 -x- | 6.1 -x- | 10 -x- |
The flex-flow
CSS property is a shorthand property for flex-direction
and flex-wrap
properties.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
29 | 28 | 9 | 12 | 11 |
21 -x- | 6.1 -x- |
The font
CSS property is a shorthand for font-style
, font-variant
, font-weight
, font-size
, line-height
, and font-family
. Alternatively, it sets an element's font to a system font.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 3 |
The gap
CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap
and column-gap
.
Supported in Flex Layout
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
No | 63 | No | No | No |
Supported in Grid Layout
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
66 | 61 | 10.1 (grid-gap) | 16 | No |
57 (grid-gap) | 52 (grid-gap) |
Supported in Multi-column Layout
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
66 | 61 | No | 16 | No |
The grid
CSS property is a shorthand property that sets all of the explicit grid properties (grid-template-rows
, grid-template-columns
, and grid-template-areas
), and all the implicit grid properties (grid-auto-rows
, grid-auto-columns
, and grid-auto-flow
), in a single declaration.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
57 | 52 | 10.1 | 16 | No |
The grid-area
CSS property is a shorthand property for grid-row-start
, grid-column-start
, grid-row-end
and grid-column-end
, specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
57 | 52 | 10.1 | 16 | No |
The grid-column
CSS property is a shorthand property for grid-column-start
and grid-column-end
specifying a grid item's size and location within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
57 | 52 | 10.1 | 16 | No |
The grid-row
CSS property is a shorthand property for grid-row-start
and grid-row-end
specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
57 | 52 | 10.1 | 16 | No |
The grid-template
CSS property is a shorthand property for defining grid columns, rows, and areas.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
57 | 52 | 10.1 | 16 | No |
Initial value: none
The list-style
CSS property is a shorthand to set list style properties list-style-type
, list-style-image
, and list-style-position
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The margin
CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top
, margin-right
, margin-bottom
, and margin-left
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 3 |
The mask
CSS property hides an element (partially or fully) by masking or clipping the image at specific points.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 2 | 3.2 | 12 | No |
The mask-border
CSS property lets you create a mask along the edge of an element's border.
The offset
CSS property is a shorthand property for animating an element along a defined path.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
55 | n/a | No | No | No |
46 (motion) |
The offset
CSS property is a shorthand property for animating an element along a defined path.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
55 | n/a | No | No | No |
46 (motion) |
The outline
CSS property is a shorthand to set various outline properties in a single declaration: outline-style
, outline-width
, and outline-color
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1.5 | 1.2 | 12 | 8 |
The padding
CSS property sets the padding area on all four sides of an element. It is a shorthand for padding-top
, padding-right
, padding-bottom
, and padding-left
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 4 |
The CSS place-items
shorthand property sets the align-items
and justify-items
properties, respectively. If the second value is not set, the first value is also used for it.
Supported in Flex Layout
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
59 | 45 | 11 | No | No |
Supported in Grid Layout
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
59 | 45 | 11 | No | No |
The place-self
CSS property is a shorthand property sets both the align-self
and justify-self
properties. The first value is the align-self
property value, the second the justify-self
one. If the second value is not present, the first value is also used for it.
Supported in Flex Layout
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
59 | 45 | No | No | No |
Supported in Grid Layout
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
59 | 45 | No | No | No |
The text-decoration
CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line
, text-decoration-color
, and text-decoration-style
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
1 | 1 | 1 | 12 | 3 |
The text-emphasis
CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style
and text-emphasis-color
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
25 | 46 | 6.1 | No | No |
The transition
CSS property is a shorthand property for transition-property
, transition-duration
, transition-timing-function
, and transition-delay
.
Chrome | Firefox | Safari | Edge | IE |
---|---|---|---|---|
26 | 16 | 9 | 12 | 10 |
1 -x- | 4 -x- | 3.1 -x- |