@pitlane/theme

Type-safe styling with design tokens for Remix 3.

createTheme takes a schema tree and the token tree it describes, and returns a typed token accessor plus a <Theme /> component that installs the tokens as CSS custom properties. Token values are the CSS they become; the schema, built from @pitlane/theme/schema, names each token's type. The css, tva, combine, and cx helpers enforce the token palette at the type level on top of remix/ui's css() mixin.

Classes

ThemeError

The error createTheme throws for every structural failure: one problem, one sentence.

Failure	Message shape
No schema entry	`"space.md" has no schema entry`
Unknown reference	`"color.bg" references unknown token "color.nope"`
Reference type mismatch	`"color.bg" references "space.md" of type "dimension" where "color" is required`
Reference to an untyped token	`"color.bg" references untyped token "animate.spin"`
Reference cycle	`Reference cycle: color.a → color.b → color.a`
Variable collision	`Tokens "a.b" and "a-b" both produce the CSS variable --a-b`
Reserved characters	`Token or group name "a.b" contains characters reserved by references (".", "{", "}")`
Empty identifier	`Token path segment "!!" produces an empty CSS identifier`
Unknown mode token	`Mode "dark" overrides unknown token "color.nope"`

Bad token values raise ValidationError from remix/data-schema instead, because there may be several and each carries its own path.

See

createTheme

Extends

Error

Constructors

Constructor

new ThemeError(message?): ThemeError;

Parameters

message?

string

Returns

ThemeError

Inherited from

Error.constructor

Constructor

new ThemeError(message?, options?): ThemeError;

Parameters

message?

string

options?

ErrorOptions

Returns

ThemeError

Inherited from

Error.constructor

Properties

cause?

optional cause?: unknown;

Inherited from

Error.cause

message

message: string;

Inherited from

Error.message

name

name: string = "ThemeError";

Overrides

Error.name

stack?

optional stack?: string;

Inherited from

Error.stack

Methods

isError()

static isError(error): error is Error;

Indicates whether the argument provided is a built-in Error instance or not.

Parameters

error

unknown

Returns

error is Error

Inherited from

Error.isError

Interfaces

CombinedTVAFn()

A component built by combine. Accepts the union of the input components' props and honors each input's own defaults.

Type Parameters

Fns

Fns extends readonly TVAFn<VariantShape>[]

CombinedTVAFn<node>(props?): ThemedCSSMixin<node>;

Resolves every input and returns a mix-ready descriptor.

Type Parameters

node

node extends Element = Element

Parameters

props?

CombinedProps<Fns>

Returns

ThemedCSSMixin<node>

Methods

resolve()

resolve(props?): ThemedCSSProps;

Returns the merged style object without building a descriptor.

Parameters

props?

CombinedProps<Fns>

Returns

ThemedCSSProps

ScaleFn()

The accessor leaf for a token declared with s.scale(): callable for steps, with the base itself as .token.

.token is what a projection re-roots and what raw resolves, so it is load-bearing rather than decorative.

See

TokenTree

ScaleFn(steps): DimensionToken;

The accessor leaf for a token declared with s.scale(): callable for steps, with the base itself as .token.

.token is what a projection re-roots and what raw resolves, so it is load-bearing rather than decorative.

Parameters

steps

number

Returns

DimensionToken

See

TokenTree

Properties

token

readonly token: DimensionToken;

ThemeComponent()

The <Theme /> component createTheme returns. Render it once near the document root to install the custom properties.

It is an ordinary component with one extra property, $theme, holding the init it was compiled from, so a published theme can be handed straight back to createTheme.

Type Parameters

T

T

ThemeComponent(handle): () => RemixElement;

The <Theme /> component createTheme returns. Render it once near the document root to install the custom properties.

It is an ordinary component with one extra property, $theme, holding the init it was compiled from, so a published theme can be handed straight back to createTheme.

Parameters

handle

Handle<ThemeProps>

Returns

() => RemixElement

Properties

$theme

readonly $theme: T;

ThemedCSSProps

The style-object type accepted by css and every tva slot.

Two layers stack. Token-mapped longhands enforce the matching token brand plus a small set of CSS keywords and the literal 0. Every other property carries csstype's value union, so closed-grammar properties such as display, position, resize, and overflow only accept their real keywords. Unknown keys — nested selectors, at-rules, and CSS custom properties — recurse or stay loose.

Wide below is the CSS-wide keyword union "inherit" | "initial" | "unset" | "revert" | "revert-layer".

Property family	Accepted values
`color`, `backgroundColor`, `borderColor`, the four per-side and two logical border colors, `outlineColor`, `textDecorationColor`, `columnRuleColor`, `caretColor`, `accentColor`, `fill`, `stroke`	`ColorToken \| "transparent" \| "currentColor" \| Wide`
`width`, `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, their `blockSize`/`inlineSize` logical forms, `flexBasis`	`DimensionToken \| 0 \| "auto" \| "min-content" \| "max-content" \| "fit-content" \| Wide`
`top`, `right`, `bottom`, `left`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, and their `inset`/`margin` logical start/end forms	`DimensionToken \| 0 \| "auto" \| Wide`
`paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, the logical padding start/end forms, `fontSize`, `textIndent`, `outlineOffset`, the four corner radii, `rowGap`, `columnGap`	`DimensionToken \| 0 \| Wide`
`letterSpacing`, `wordSpacing`	`DimensionToken \| 0 \| "normal" \| Wide`
`borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, `outlineWidth`	`DimensionToken \| 0 \| "thin" \| "medium" \| "thick" \| Wide`
`padding`, `margin`, `inset`, `borderRadius` (box shorthands)	a single value as the longhand, or a tuple of 1–4 such values, space-joined
`gap`, `paddingBlock`, `paddingInline`, `marginBlock`, `marginInline`, `insetBlock`, `insetInline`	the longhand value, or a 2-tuple
`fontFamily`	`FontFamilyToken \| Wide`
`fontWeight`	`FontWeightToken \| "normal" \| "bold" \| "lighter" \| "bolder" \| Wide`
`lineHeight`	`NumberToken \| DimensionToken \| "normal" \| Wide`
`opacity`, `zIndex`, `flexGrow`, `flexShrink`, `order`	`NumberToken \| number \| Wide` (plain numbers stay legal)
`transitionDuration`, `transitionDelay`, `animationDuration`, `animationDelay`	`DurationToken \| Wide`
`transitionTimingFunction`, `animationTimingFunction`	`CubicBezierToken \| "ease" \| "linear" \| "ease-in" \| "ease-out" \| "ease-in-out" \| "step-start" \| "step-end" \| Wide`
`boxShadow`, `textShadow`	`ShadowToken \| "none" \| Wide`
every other CSS property	csstype's union for that property, with `dimension` tokens for lengths and `duration` tokens for times

See

css

Extends

KeywordProps.TokenMappedProps

Indexable

[key: string]: 
  | string
  | number
  | ThemedCSSProps
  | readonly (string | number)[]
  | null
  | undefined

Properties

accentColor?

optional accentColor?: ColorLike;

Inherited from

TokenMappedProps.accentColor

alignContent?

optional alignContent?: AlignContent;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
29	28	9	12	11
21 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/align-content

Inherited from

KeywordProps.alignContent

alignItems?

optional alignItems?: AlignItems;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
29	20	9	12	11
21 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/align-items

Inherited from

KeywordProps.alignItems

alignmentBaseline?

optional alignmentBaseline?: AlignmentBaseline;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Initial value: baseline

Chrome	Firefox	Safari	Edge	IE
1	No	5.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/alignment-baseline

Inherited from

KeywordProps.alignmentBaseline

alignSelf?

optional alignSelf?: AlignSelf;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
29	20	9	12	10
21 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/align-self

Inherited from

KeywordProps.alignSelf

alignTracks?

optional alignTracks?: AlignTracks;

Syntax: [ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#

Initial value: normal

Inherited from

KeywordProps.alignTracks

all?

optional all?: Globals;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: initial | inherit | unset | revert | revert-layer

Initial value: There is no practical initial value for it.

Chrome	Firefox	Safari	Edge	IE
37	27	9.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/all

Inherited from

KeywordProps.all

anchorName?

optional anchorName?: AnchorName;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <dashed-ident>#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
125	preview	26	125	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/anchor-name

Inherited from

KeywordProps.anchorName

anchorScope?

optional anchorScope?: AnchorScope;

Syntax: none | all | <dashed-ident>#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
131	preview	26	131	No

Inherited from

KeywordProps.anchorScope

animation?

optional animation?: Animation<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation>#

Chrome	Firefox	Safari	Edge	IE
43	16	9	12	10
3 -x-	5 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation

Inherited from

KeywordProps.animation

animationComposition?

optional animationComposition?: AnimationComposition;

Since July 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <single-animation-composition>#

Initial value: replace

Chrome	Firefox	Safari	Edge	IE
112	115	16	112	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-composition

Inherited from

KeywordProps.animationComposition

animationDelay?

optional animationDelay?: DurationToken | Wide;

Inherited from

TokenMappedProps.animationDelay

animationDirection?

optional animationDirection?: AnimationDirection;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-direction>#

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
43	16	9	12	10
3 -x-	5 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-direction

Inherited from

KeywordProps.animationDirection

animationDuration?

optional animationDuration?: DurationToken | Wide;

Inherited from

TokenMappedProps.animationDuration

animationFillMode?

optional animationFillMode?: AnimationFillMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-fill-mode>#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
43	16	9	12	10
3 -x-	5 -x-	5 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-fill-mode

Inherited from

KeywordProps.animationFillMode

animationIterationCount?

optional animationIterationCount?: AnimationIterationCount;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-iteration-count>#

Initial value: 1

Chrome	Firefox	Safari	Edge	IE
43	16	9	12	10
3 -x-	5 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-iteration-count

Inherited from

KeywordProps.animationIterationCount

animationName?

optional animationName?: AnimationName;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: [ none | <keyframes-name> ]#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
43	16	9	12	10
3 -x-	5 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-name

Inherited from

KeywordProps.animationName

animationPlayState?

optional animationPlayState?: AnimationPlayState;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-play-state>#

Initial value: running

Chrome	Firefox	Safari	Edge	IE
43	16	9	12	10
3 -x-	5 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-play-state

Inherited from

KeywordProps.animationPlayState

animationRange?

optional animationRange?: AnimationRange<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ <'animation-range-start'> <'animation-range-end'>? ]#

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-range

Inherited from

KeywordProps.animationRange

animationRangeEnd?

optional animationRangeEnd?: AnimationRangeEnd<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-range-end

Inherited from

KeywordProps.animationRangeEnd

animationRangeStart?

optional animationRangeStart?: AnimationRangeStart<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-range-start

Inherited from

KeywordProps.animationRangeStart

animationTimeline?

optional animationTimeline?: AnimationTimeline;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <single-animation-timeline>#

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/animation-timeline

Inherited from

KeywordProps.animationTimeline

animationTimingFunction?

optional animationTimingFunction?: Easing;

Inherited from

TokenMappedProps.animationTimingFunction

appearance?

optional appearance?: Appearance;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | auto | <compat-auto> | <compat-special>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
84	80	15.4	84	No
1 -x-	1 -x-	3 -x-	12 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/appearance

Inherited from

KeywordProps.appearance

aspectRatio?

optional aspectRatio?: AspectRatio;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: auto || <ratio>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
88	89	15	88	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/aspect-ratio

Inherited from

KeywordProps.aspectRatio

backdropFilter?

optional backdropFilter?: BackdropFilter;

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: none | <filter-value-list>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
76	103	18	79	No
		9 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/backdrop-filter

Inherited from

KeywordProps.backdropFilter

backfaceVisibility?

optional backfaceVisibility?: BackfaceVisibility;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: visible | hidden

Initial value: visible

Chrome	Firefox	Safari	Edge	IE
36	16	15.4	12	10
12 -x-	10 -x-	5.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/backface-visibility

Inherited from

KeywordProps.backfaceVisibility

background?

optional background?: Background<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-layer>#? , <final-bg-layer>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background

Inherited from

KeywordProps.background

backgroundAttachment?

optional backgroundAttachment?: BackgroundAttachment;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <attachment>#

Initial value: scroll

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-attachment

Inherited from

KeywordProps.backgroundAttachment

backgroundBlendMode?

optional backgroundBlendMode?: BackgroundBlendMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <blend-mode>#

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
35	30	8	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-blend-mode

Inherited from

KeywordProps.backgroundBlendMode

backgroundClip?

optional backgroundClip?: BackgroundClip;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-clip>#

Initial value: border-box

Chrome	Firefox	Safari	Edge	IE
1	4	5	12	9
		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-clip

Inherited from

KeywordProps.backgroundClip

backgroundColor?

optional backgroundColor?: ColorLike;

Inherited from

TokenMappedProps.backgroundColor

backgroundImage?

optional backgroundImage?: BackgroundImage;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-image>#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-image

Inherited from

KeywordProps.backgroundImage

backgroundOrigin?

optional backgroundOrigin?: BackgroundOrigin;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <visual-box>#

Initial value: padding-box

Chrome	Firefox	Safari	Edge	IE
1	4	3	12	9

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-origin

Inherited from

KeywordProps.backgroundOrigin

backgroundPosition?

optional backgroundPosition?: BackgroundPosition<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-position>#

Initial value: 0% 0%

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-position

Inherited from

KeywordProps.backgroundPosition

backgroundPositionX?

optional backgroundPositionX?: BackgroundPositionX<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Syntax: [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

Initial value: 0%

Chrome	Firefox	Safari	Edge	IE
1	49	1	12	6

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-position-x

Inherited from

KeywordProps.backgroundPositionX

backgroundPositionY?

optional backgroundPositionY?: BackgroundPositionY<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Syntax: [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

Initial value: 0%

Chrome	Firefox	Safari	Edge	IE
1	49	1	12	6

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-position-y

Inherited from

KeywordProps.backgroundPositionY

backgroundRepeat?

optional backgroundRepeat?: BackgroundRepeat;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <repeat-style>#

Initial value: repeat

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-repeat

Inherited from

KeywordProps.backgroundRepeat

backgroundSize?

optional backgroundSize?: BackgroundSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-size>#

Initial value: auto auto

Chrome	Firefox	Safari	Edge	IE
3	4	5	12	9
1 -x-		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/background-size

Inherited from

KeywordProps.backgroundSize

baselineShift?

optional baselineShift?: BaselineShift<0 | DimensionToken>;

Syntax: <length-percentage> | sub | super | baseline

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
1	No	4	79	No

Inherited from

KeywordProps.baselineShift

blockSize?

optional blockSize?: SizeIntrinsic;

Inherited from

TokenMappedProps.blockSize

border?

optional border?: Border<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-width> || <line-style> || <color>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border

Inherited from

KeywordProps.border

borderBlock?

optional borderBlock?: BorderBlock<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'border-block-start'>

Chrome	Firefox	Safari	Edge	IE
87	66	14.1	87	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block

Inherited from

KeywordProps.borderBlock

borderBlockColor?

optional borderBlockColor?: ColorLike;

Inherited from

TokenMappedProps.borderBlockColor

borderBlockEnd?

optional borderBlockEnd?: BorderBlockEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-end

Inherited from

KeywordProps.borderBlockEnd

borderBlockEndColor?

optional borderBlockEndColor?: BorderBlockEndColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-color'>

Initial value: currentcolor

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-end-color

Inherited from

KeywordProps.borderBlockEndColor

borderBlockEndStyle?

optional borderBlockEndStyle?: BorderBlockEndStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-style'>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-end-style

Inherited from

KeywordProps.borderBlockEndStyle

borderBlockEndWidth?

optional borderBlockEndWidth?: BorderBlockEndWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'>

Initial value: medium

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-end-width

Inherited from

KeywordProps.borderBlockEndWidth

borderBlockStart?

optional borderBlockStart?: BorderBlockStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-start

Inherited from

KeywordProps.borderBlockStart

borderBlockStartColor?

optional borderBlockStartColor?: BorderBlockStartColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-color'>

Initial value: currentcolor

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-start-color

Inherited from

KeywordProps.borderBlockStartColor

borderBlockStartStyle?

optional borderBlockStartStyle?: BorderBlockStartStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-style'>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-start-style

Inherited from

KeywordProps.borderBlockStartStyle

borderBlockStartWidth?

optional borderBlockStartWidth?: BorderBlockStartWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'>

Initial value: medium

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-start-width

Inherited from

KeywordProps.borderBlockStartWidth

borderBlockStyle?

optional borderBlockStyle?: BorderBlockStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'border-top-style'>{1,2}

Initial value: none

Chrome	Firefox	Safari	Edge	IE
87	66	14.1	87	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-style

Inherited from

KeywordProps.borderBlockStyle

borderBlockWidth?

optional borderBlockWidth?: BorderBlockWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'border-top-width'>{1,2}

Initial value: medium

Chrome	Firefox	Safari	Edge	IE
87	66	14.1	87	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-block-width

Inherited from

KeywordProps.borderBlockWidth

borderBottom?

optional borderBottom?: BorderBottom<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-width> || <line-style> || <color>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-bottom

Inherited from

KeywordProps.borderBottom

borderBottomColor?

optional borderBottomColor?: ColorLike;

Inherited from

TokenMappedProps.borderBottomColor

borderBottomLeftRadius?

optional borderBottomLeftRadius?: Size;

Inherited from

TokenMappedProps.borderBottomLeftRadius

borderBottomRightRadius?

optional borderBottomRightRadius?: Size;

Inherited from

TokenMappedProps.borderBottomRightRadius

borderBottomStyle?

optional borderBottomStyle?: BorderBottomStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-style>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-bottom-style

Inherited from

KeywordProps.borderBottomStyle

borderBottomWidth?

optional borderBottomWidth?: LineWidth;

Inherited from

TokenMappedProps.borderBottomWidth

borderCollapse?

optional borderCollapse?: BorderCollapse;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: separate | collapse

Initial value: separate

Chrome	Firefox	Safari	Edge	IE
1	1	1.1	12	5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-collapse

Inherited from

KeywordProps.borderCollapse

borderColor?

optional borderColor?: ColorLike;

Inherited from

TokenMappedProps.borderColor

borderEndEndRadius?

optional borderEndEndRadius?: BorderEndEndRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <'border-top-left-radius'>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
89	66	15	89	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-end-end-radius

Inherited from

KeywordProps.borderEndEndRadius

borderEndStartRadius?

optional borderEndStartRadius?: BorderEndStartRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <'border-top-left-radius'>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
89	66	15	89	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-end-start-radius

Inherited from

KeywordProps.borderEndStartRadius

borderImage?

optional borderImage?: BorderImage;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Chrome	Firefox	Safari	Edge	IE
16	15	6	12	11
7 -x-	3.5 -x-	3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-image

Inherited from

KeywordProps.borderImage

borderImageOutset?

optional borderImageOutset?: BorderImageOutset<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ <length [0,∞]> | <number [0,∞]> ]{1,4}

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
15	15	6	12	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-image-outset

Inherited from

KeywordProps.borderImageOutset

borderImageRepeat?

optional borderImageRepeat?: BorderImageRepeat;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

Syntax: [ stretch | repeat | round | space ]{1,2}

Initial value: stretch

Chrome	Firefox	Safari	Edge	IE
15	15	6	12	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-image-repeat

Inherited from

KeywordProps.borderImageRepeat

borderImageSlice?

optional borderImageSlice?: BorderImageSlice;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} && fill?

Initial value: 100%

Chrome	Firefox	Safari	Edge	IE
15	15	6	12	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-image-slice

Inherited from

KeywordProps.borderImageSlice

borderImageSource?

optional borderImageSource?: BorderImageSource;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: none | <image>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
15	15	6	12	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-image-source

Inherited from

KeywordProps.borderImageSource

borderImageWidth?

optional borderImageWidth?: BorderImageWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

Initial value: 1

Chrome	Firefox	Safari	Edge	IE
16	13	6	12	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-image-width

Inherited from

KeywordProps.borderImageWidth

borderInline?

optional borderInline?: BorderInline<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'border-block-start'>

Chrome	Firefox	Safari	Edge	IE
87	66	14.1	87	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline

Inherited from

KeywordProps.borderInline

borderInlineColor?

optional borderInlineColor?: ColorLike;

Inherited from

TokenMappedProps.borderInlineColor

borderInlineEnd?

optional borderInlineEnd?: BorderInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-end

Inherited from

KeywordProps.borderInlineEnd

borderInlineEndColor?

optional borderInlineEndColor?: BorderInlineEndColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-color'>

Initial value: currentcolor

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No
	3 (-moz-border-end-color)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-end-color

Inherited from

KeywordProps.borderInlineEndColor

borderInlineEndStyle?

optional borderInlineEndStyle?: BorderInlineEndStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-style'>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No
	3 (-moz-border-end-style)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-end-style

Inherited from

KeywordProps.borderInlineEndStyle

borderInlineEndWidth?

optional borderInlineEndWidth?: BorderInlineEndWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'>

Initial value: medium

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No
	3 (-moz-border-end-width)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-end-width

Inherited from

KeywordProps.borderInlineEndWidth

borderInlineStart?

optional borderInlineStart?: BorderInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'> || <'border-top-style'> || <color>

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-start

Inherited from

KeywordProps.borderInlineStart

borderInlineStartColor?

optional borderInlineStartColor?: BorderInlineStartColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-color'>

Initial value: currentcolor

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No
	3 (-moz-border-start-color)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-start-color

Inherited from

KeywordProps.borderInlineStartColor

borderInlineStartStyle?

optional borderInlineStartStyle?: BorderInlineStartStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-style'>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No
	3 (-moz-border-start-style)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-start-style

Inherited from

KeywordProps.borderInlineStartStyle

borderInlineStartWidth?

optional borderInlineStartWidth?: BorderInlineStartWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'>

Initial value: medium

Chrome	Firefox	Safari	Edge	IE
69	41	12.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-start-width

Inherited from

KeywordProps.borderInlineStartWidth

borderInlineStyle?

optional borderInlineStyle?: BorderInlineStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'border-top-style'>{1,2}

Initial value: none

Chrome	Firefox	Safari	Edge	IE
87	66	14.1	87	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-style

Inherited from

KeywordProps.borderInlineStyle

borderInlineWidth?

optional borderInlineWidth?: BorderInlineWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'border-top-width'>{1,2}

Initial value: medium

Chrome	Firefox	Safari	Edge	IE
87	66	14.1	87	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-inline-width

Inherited from

KeywordProps.borderInlineWidth

borderLeft?

optional borderLeft?: BorderLeft<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-width> || <line-style> || <color>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-left

Inherited from

KeywordProps.borderLeft

borderLeftColor?

optional borderLeftColor?: ColorLike;

Inherited from

TokenMappedProps.borderLeftColor

borderLeftStyle?

optional borderLeftStyle?: BorderLeftStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-style>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-left-style

Inherited from

KeywordProps.borderLeftStyle

borderLeftWidth?

optional borderLeftWidth?: LineWidth;

Inherited from

TokenMappedProps.borderLeftWidth

borderRadius?

optional borderRadius?: Size | Repeat1to4<PadItem>;

Inherited from

TokenMappedProps.borderRadius

borderRight?

optional borderRight?: BorderRight<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-width> || <line-style> || <color>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-right

Inherited from

KeywordProps.borderRight

borderRightColor?

optional borderRightColor?: ColorLike;

Inherited from

TokenMappedProps.borderRightColor

borderRightStyle?

optional borderRightStyle?: BorderRightStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-style>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-right-style

Inherited from

KeywordProps.borderRightStyle

borderRightWidth?

optional borderRightWidth?: LineWidth;

Inherited from

TokenMappedProps.borderRightWidth

borderSpacing?

optional borderSpacing?: BorderSpacing<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length>{1,2}

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-spacing

Inherited from

KeywordProps.borderSpacing

borderStartEndRadius?

optional borderStartEndRadius?: BorderStartEndRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <'border-top-left-radius'>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
89	66	15	89	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-start-end-radius

Inherited from

KeywordProps.borderStartEndRadius

borderStartStartRadius?

optional borderStartStartRadius?: BorderStartStartRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <'border-top-left-radius'>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
89	66	15	89	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-start-start-radius

Inherited from

KeywordProps.borderStartStartRadius

borderStyle?

optional borderStyle?: BorderStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-style>{1,4}

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-style

Inherited from

KeywordProps.borderStyle

borderTop?

optional borderTop?: BorderTop<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-width> || <line-style> || <color>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-top

Inherited from

KeywordProps.borderTop

borderTopColor?

optional borderTopColor?: ColorLike;

Inherited from

TokenMappedProps.borderTopColor

borderTopLeftRadius?

optional borderTopLeftRadius?: Size;

Inherited from

TokenMappedProps.borderTopLeftRadius

borderTopRightRadius?

optional borderTopRightRadius?: Size;

Inherited from

TokenMappedProps.borderTopRightRadius

borderTopStyle?

optional borderTopStyle?: BorderTopStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-style>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-top-style

Inherited from

KeywordProps.borderTopStyle

borderTopWidth?

optional borderTopWidth?: LineWidth;

Inherited from

TokenMappedProps.borderTopWidth

borderWidth?

optional borderWidth?: BorderWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-width>{1,4}

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/border-width

Inherited from

KeywordProps.borderWidth

bottom?

optional bottom?: SizeAuto;

Inherited from

TokenMappedProps.bottom

boxAlign?

optional boxAlign?: BoxAlign;

The box-align CSS property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box.

Syntax: start | center | end | baseline | stretch

Initial value: stretch

Deprecated

Inherited from

KeywordProps.boxAlign

boxDecorationBreak?

optional boxDecorationBreak?: BoxDecorationBreak;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: slice | clone

Initial value: slice

Chrome	Firefox	Safari	Edge	IE
130	32	7 -x-	130	No
22 -x-			79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/box-decoration-break

Inherited from

KeywordProps.boxDecorationBreak

boxDirection?

optional boxDirection?: BoxDirection;

The box-direction CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

Syntax: normal | reverse | inherit

Initial value: normal

Deprecated

Inherited from

KeywordProps.boxDirection

boxFlex?

optional boxFlex?: BoxFlex;

The -moz-box-flex and -webkit-box-flex CSS properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.

Syntax: <number>

Initial value: 0

Deprecated

Inherited from

KeywordProps.boxFlex

boxFlexGroup?

optional boxFlexGroup?: BoxFlexGroup;

The box-flex-group CSS property assigns the flexbox's child elements to a flex group.

Syntax: <integer>

Initial value: 1

Deprecated

Inherited from

KeywordProps.boxFlexGroup

boxLines?

optional boxLines?: BoxLines;

The box-lines CSS property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).

Syntax: single | multiple

Initial value: single

Deprecated

Inherited from

KeywordProps.boxLines

boxOrdinalGroup?

optional boxOrdinalGroup?: BoxOrdinalGroup;

The box-ordinal-group CSS property assigns the flexbox's child elements to an ordinal group.

Syntax: <integer>

Initial value: 1

Deprecated

Inherited from

KeywordProps.boxOrdinalGroup

boxOrient?

optional boxOrient?: BoxOrient;

The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

Syntax: horizontal | vertical | inline-axis | block-axis | inherit

Initial value: inline-axis

Deprecated

Inherited from

KeywordProps.boxOrient

boxPack?

optional boxPack?: BoxPack;

The -moz-box-pack and -webkit-box-pack CSS properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box.

Syntax: start | center | end | justify

Initial value: start

Deprecated

Inherited from

KeywordProps.boxPack

boxShadow?

optional boxShadow?: ShadowLike;

Inherited from

TokenMappedProps.boxShadow

boxSizing?

optional boxSizing?: BoxSizing;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: content-box | border-box

Initial value: content-box

Chrome	Firefox	Safari	Edge	IE
10	29	5.1	12	8
1 -x-	1 -x-	3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/box-sizing

Inherited from

KeywordProps.boxSizing

breakAfter?

optional breakAfter?: BreakAfter;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2019.

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
50	65	10	12	10

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/break-after

Inherited from

KeywordProps.breakAfter

breakBefore?

optional breakBefore?: BreakBefore;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2019.

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
50	65	10	12	10

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/break-before

Inherited from

KeywordProps.breakBefore

breakInside?

optional breakInside?: BreakInside;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2019.

Syntax: auto | avoid | avoid-page | avoid-column | avoid-region

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
50	65	10	12	10

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/break-inside

Inherited from

KeywordProps.breakInside

captionSide?

optional captionSide?: CaptionSide;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: top | bottom

Initial value: top

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/caption-side

Inherited from

KeywordProps.captionSide

caret?

optional caret?: Caret;

Syntax: <'caret-color'> || <'caret-shape'>

Inherited from

KeywordProps.caret

caretColor?

optional caretColor?: ColorLike;

Inherited from

TokenMappedProps.caretColor

caretShape?

optional caretShape?: CaretShape;

Syntax: auto | bar | block | underscore

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
No	No	No	No	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/caret-shape

Inherited from

KeywordProps.caretShape

clear?

optional clear?: Clear;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/clear

Inherited from

KeywordProps.clear

clip?

optional clip?: Clip;

The clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed.

Syntax: <shape> | auto

Initial value: auto

Deprecated

Inherited from

KeywordProps.clip

clipPath?

optional clipPath?: ClipPath;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

Initial value: none

Chrome	Firefox	Safari	Edge	IE
55	3.5	9.1	79	10
23 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/clip-path

Inherited from

KeywordProps.clipPath

clipRule?

optional clipRule?: ClipRule;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: nonzero | evenodd

Initial value: nonzero

Chrome	Firefox	Safari	Edge	IE
≤15	3.5	≤5	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/clip-rule

Inherited from

KeywordProps.clipRule

color?

optional color?: ColorLike;

Inherited from

TokenMappedProps.color

colorAdjust?

optional colorAdjust?: PrintColorAdjust;

Since May 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: economy | exact

Initial value: economy

Chrome	Firefox	Safari	Edge	IE
136	97	15.4	136	No
17 -x-	48 (color-adjust)	6 -x-	79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/print-color-adjust

Inherited from

KeywordProps.colorAdjust

colorInterpolation?

optional colorInterpolation?: ColorInterpolation;

Inherited from

KeywordProps.colorInterpolation

colorInterpolationFilters?

optional colorInterpolationFilters?: ColorInterpolationFilters;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | sRGB | linearRGB

Initial value: linearRGB

Chrome	Firefox	Safari	Edge	IE
1	3	3	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/color-interpolation-filters

Inherited from

KeywordProps.colorInterpolationFilters

colorRendering?

optional colorRendering?: ColorRendering;

Inherited from

KeywordProps.colorRendering

colorScheme?

optional colorScheme?: ColorScheme;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2022.

Syntax: normal | [ light | dark | <custom-ident> ]+ && only?

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
81	96	13	81	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/color-scheme

Inherited from

KeywordProps.colorScheme

columnCount?

optional columnCount?: ColumnCount;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <integer> | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
50	52	9	12	10
1 -x-		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/column-count

Inherited from

KeywordProps.columnCount

columnFill?

optional columnFill?: ColumnFill;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: auto | balance

Initial value: balance

Chrome	Firefox	Safari	Edge	IE
50	52	9	12	10
		8 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/column-fill

Inherited from

KeywordProps.columnFill

columnGap?

optional columnGap?: Size;

Inherited from

TokenMappedProps.columnGap

columnRule?

optional columnRule?: ColumnRule<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Chrome	Firefox	Safari	Edge	IE
50	52	9	12	10
1 -x-		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/column-rule

Inherited from

KeywordProps.columnRule

columnRuleColor?

optional columnRuleColor?: ColorLike;

Inherited from

TokenMappedProps.columnRuleColor

columnRuleStyle?

optional columnRuleStyle?: ColumnRuleStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'border-style'>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
50	52	9	12	10
1 -x-		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/column-rule-style

Inherited from

KeywordProps.columnRuleStyle

columnRuleWidth?

optional columnRuleWidth?: ColumnRuleWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'border-width'>

Initial value: medium

Chrome	Firefox	Safari	Edge	IE
50	52	9	12	10
1 -x-		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/column-rule-width

Inherited from

KeywordProps.columnRuleWidth

columns?

optional columns?: Columns<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'column-width'> || <'column-count'>

Chrome	Firefox	Safari	Edge	IE
50	52	9	12	10
		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/columns

Inherited from

KeywordProps.columns

columnSpan?

optional columnSpan?: ColumnSpan;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: none | all

Initial value: none

Chrome	Firefox	Safari	Edge	IE
50	71	9	12	10
6 -x-		5.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/column-span

Inherited from

KeywordProps.columnSpan

columnWidth?

optional columnWidth?: ColumnWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.

Syntax: <length> | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
50	50	9	12	10
1 -x-		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/column-width

Inherited from

KeywordProps.columnWidth

contain?

optional contain?: Contain;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | strict | content | [ [ size || inline-size ] || layout || style || paint ]

Initial value: none

Chrome	Firefox	Safari	Edge	IE
52	69	15.4	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/contain

Inherited from

KeywordProps.contain

container?

optional container?: Container;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023.

Syntax: <'container-name'> [ / <'container-type'> ]?

Chrome	Firefox	Safari	Edge	IE
105	110	16	105	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/container

Inherited from

KeywordProps.container

containerName?

optional containerName?: ContainerName;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023.

Syntax: none | <custom-ident>+

Initial value: none

Chrome	Firefox	Safari	Edge	IE
105	110	16	105	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/container-name

Inherited from

KeywordProps.containerName

containerType?

optional containerType?: ContainerType;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023.

Syntax: normal | [ [ size | inline-size ] || scroll-state ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
105	110	16	105	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/container-type

Inherited from

KeywordProps.containerType

containIntrinsicBlockSize?

optional containIntrinsicBlockSize?: ContainIntrinsicBlockSize<0 | DimensionToken>;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto? [ none | <length> ]

Initial value: none

Chrome	Firefox	Safari	Edge	IE
95	107	17	95	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/contain-intrinsic-block-size

Inherited from

KeywordProps.containIntrinsicBlockSize

containIntrinsicHeight?

optional containIntrinsicHeight?: ContainIntrinsicHeight<0 | DimensionToken>;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto? [ none | <length> ]

Initial value: none

Chrome	Firefox	Safari	Edge	IE
95	107	17	95	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/contain-intrinsic-height

Inherited from

KeywordProps.containIntrinsicHeight

containIntrinsicInlineSize?

optional containIntrinsicInlineSize?: ContainIntrinsicInlineSize<0 | DimensionToken>;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto? [ none | <length> ]

Initial value: none

Chrome	Firefox	Safari	Edge	IE
95	107	17	95	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/contain-intrinsic-inline-size

Inherited from

KeywordProps.containIntrinsicInlineSize

containIntrinsicSize?

optional containIntrinsicSize?: ContainIntrinsicSize<0 | DimensionToken>;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: [ auto? [ none | <length> ] ]{1,2}

Chrome	Firefox	Safari	Edge	IE
83	107	17	83	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/contain-intrinsic-size

Inherited from

KeywordProps.containIntrinsicSize

containIntrinsicWidth?

optional containIntrinsicWidth?: ContainIntrinsicWidth<0 | DimensionToken>;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto? [ none | <length> ]

Initial value: none

Chrome	Firefox	Safari	Edge	IE
95	107	17	95	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/contain-intrinsic-width

Inherited from

KeywordProps.containIntrinsicWidth

content?

optional content?: Content;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/content

Inherited from

KeywordProps.content

contentVisibility?

optional contentVisibility?: ContentVisibility;

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: visible | auto | hidden

Initial value: visible

Chrome	Firefox	Safari	Edge	IE
85	125	18	85	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/content-visibility

Inherited from

KeywordProps.contentVisibility

counterIncrement?

optional counterIncrement?: CounterIncrement;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ <counter-name> <integer>? ]+ | none

Initial value: none

Chrome	Firefox	Safari	Edge	IE
2	1	3	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/counter-increment

Inherited from

KeywordProps.counterIncrement

counterReset?

optional counterReset?: CounterReset;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | none

Initial value: none

Chrome	Firefox	Safari	Edge	IE
2	1	3	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/counter-reset

Inherited from

KeywordProps.counterReset

counterSet?

optional counterSet?: CounterSet;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: [ <counter-name> <integer>? ]+ | none

Initial value: none

Chrome	Firefox	Safari	Edge	IE
85	68	17.2	85	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/counter-set

Inherited from

KeywordProps.counterSet

cursor?

optional cursor?: Cursor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2021.

Syntax: [ [ <url> [ <x> <y> ]? , ]* <cursor-predefined> ]

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
1	1	1.2	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/cursor

Inherited from

KeywordProps.cursor

cx?

optional cx?: Cx<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: <length> | <percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
43	69	9	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/cx

Inherited from

KeywordProps.cx

cy?

optional cy?: Cy<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: <length> | <percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
43	69	9	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/cy

Inherited from

KeywordProps.cy

d?

optional d?: D;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | path(<string>)

Initial value: none

Chrome	Firefox	Safari	Edge	IE
52	97	No	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/d

Inherited from

KeywordProps.d

direction?

optional direction?: Direction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: ltr | rtl

Initial value: ltr

Chrome	Firefox	Safari	Edge	IE
2	1	1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/direction

Inherited from

KeywordProps.direction

display?

optional display?: Display;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

Initial value: inline

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/display

Inherited from

KeywordProps.display

dominantBaseline?

optional dominantBaseline?: DominantBaseline;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
1	1	4	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/dominant-baseline

Inherited from

KeywordProps.dominantBaseline

emptyCells?

optional emptyCells?: EmptyCells;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: show | hide

Initial value: show

Chrome	Firefox	Safari	Edge	IE
1	1	1.2	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/empty-cells

Inherited from

KeywordProps.emptyCells

fieldSizing?

optional fieldSizing?: FieldSizing;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: content | fixed

Initial value: fixed

Chrome	Firefox	Safari	Edge	IE
123	No	preview	123	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/field-sizing

Inherited from

KeywordProps.fieldSizing

fill?

optional fill?: ColorLike;

Inherited from

TokenMappedProps.fill

fillOpacity?

optional fillOpacity?: FillOpacity;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <'opacity'>

Initial value: 1

Chrome	Firefox	Safari	Edge	IE
1	1	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/fill-opacity

Inherited from

KeywordProps.fillOpacity

fillRule?

optional fillRule?: FillRule;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: nonzero | evenodd

Initial value: nonzero

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/fill-rule

Inherited from

KeywordProps.fillRule

filter?

optional filter?: Filter;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Syntax: none | <filter-value-list>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
53	35	9.1	12	No
18 -x-		6 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/filter

Inherited from

KeywordProps.filter

flex?

optional flex?: Flex<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Chrome	Firefox	Safari	Edge	IE
29	22	9	12	11
21 -x-		7 -x-		10 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/flex

Inherited from

KeywordProps.flex

flexBasis?

optional flexBasis?: SizeIntrinsic;

Inherited from

TokenMappedProps.flexBasis

flexDirection?

optional flexDirection?: FlexDirection;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: row | row-reverse | column | column-reverse

Initial value: row

Chrome	Firefox	Safari	Edge	IE
29	22	9	12	11
21 -x-		7 -x-		10 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/flex-direction

Inherited from

KeywordProps.flexDirection

flexFlow?

optional flexFlow?: FlexFlow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <'flex-direction'> || <'flex-wrap'>

Chrome	Firefox	Safari	Edge	IE
29	28	9	12	11
21 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/flex-flow

Inherited from

KeywordProps.flexFlow

flexGrow?

optional flexGrow?: Numeric;

Inherited from

TokenMappedProps.flexGrow

flexShrink?

optional flexShrink?: Numeric;

Inherited from

TokenMappedProps.flexShrink

flexWrap?

optional flexWrap?: FlexWrap;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: nowrap | wrap | wrap-reverse

Initial value: nowrap

Chrome	Firefox	Safari	Edge	IE
29	28	9	12	11
21 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/flex-wrap

Inherited from

KeywordProps.flexWrap

float?

optional float?: Float;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: left | right | none | inline-start | inline-end

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/float

Inherited from

KeywordProps.float

floodColor?

optional floodColor?: FloodColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <color>

Initial value: black

Chrome	Firefox	Safari	Edge	IE
5	3	6	12	≤11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/flood-color

Inherited from

KeywordProps.floodColor

floodOpacity?

optional floodOpacity?: FloodOpacity;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <'opacity'>

Initial value: black

Chrome	Firefox	Safari	Edge	IE
5	3	6	12	≤11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/flood-opacity

Inherited from

KeywordProps.floodOpacity

font?

optional font?: Font;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	3

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font

Inherited from

KeywordProps.font

fontFamily?

optional fontFamily?: Wide | FontFamilyToken;

Inherited from

TokenMappedProps.fontFamily

fontFeatureSettings?

optional fontFeatureSettings?: FontFeatureSettings;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: normal | <feature-tag-value>#

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
48	34	9.1	15	10
16 -x-	15 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-feature-settings

Inherited from

KeywordProps.fontFeatureSettings

fontKerning?

optional fontKerning?: FontKerning;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | normal | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
33	32	9	79	No
		6 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-kerning

Inherited from

KeywordProps.fontKerning

fontLanguageOverride?

optional fontLanguageOverride?: FontLanguageOverride;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | <string>

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
143	34	No	143	No
	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-language-override

Inherited from

KeywordProps.fontLanguageOverride

fontOpticalSizing?

optional fontOpticalSizing?: FontOpticalSizing;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Syntax: auto | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
79	62	13.1	17	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-optical-sizing

Inherited from

KeywordProps.fontOpticalSizing

fontPalette?

optional fontPalette?: FontPalette;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2022.

Syntax: normal | light | dark | <palette-identifier> | <palette-mix()>

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
101	107	15.4	101	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-palette

Inherited from

KeywordProps.fontPalette

fontSize?

optional fontSize?: Size;

Inherited from

TokenMappedProps.fontSize

fontSizeAdjust?

optional fontSizeAdjust?: FontSizeAdjust;

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Initial value: none

Chrome	Firefox	Safari	Edge	IE
127	3	16.4	127	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-size-adjust

Inherited from

KeywordProps.fontSizeAdjust

fontSmooth?

optional fontSmooth?: FontSmooth<0 | DimensionToken>;

The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered.

Syntax: auto | never | always | <absolute-size> | <length>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
5 (-webkit-font-smoothing)	25 (-moz-osx-font-smoothing)	4 (-webkit-font-smoothing)	79 (-webkit-font-smoothing)	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-smooth

Inherited from

KeywordProps.fontSmooth

fontStretch?

optional fontStretch?: FontStretch;

The font-stretch CSS property selects a normal, condensed, or expanded face from a font.

Syntax: <font-stretch-absolute>

Initial value: normal

Deprecated

Inherited from

KeywordProps.fontStretch

fontStyle?

optional fontStyle?: FontStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: normal | italic | oblique <angle>?

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-style

Inherited from

KeywordProps.fontStyle

fontSynthesis?

optional fontSynthesis?: FontSynthesis;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2022.

Syntax: none | [ weight || style || small-caps || position]

Initial value: weight style small-caps position

Chrome	Firefox	Safari	Edge	IE
97	34	9	97	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-synthesis

Inherited from

KeywordProps.fontSynthesis

fontSynthesisPosition?

optional fontSynthesisPosition?: FontSynthesisPosition;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | none

Initial value: none

Chrome	Firefox	Safari	Edge	IE
No	118	No	No	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-synthesis-position

Inherited from

KeywordProps.fontSynthesisPosition

fontSynthesisSmallCaps?

optional fontSynthesisSmallCaps?: FontSynthesisSmallCaps;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Syntax: auto | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
97	111	16.4	97	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-synthesis-small-caps

Inherited from

KeywordProps.fontSynthesisSmallCaps

fontSynthesisStyle?

optional fontSynthesisStyle?: FontSynthesisStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Syntax: auto | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
97	111	16.4	97	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-synthesis-style

Inherited from

KeywordProps.fontSynthesisStyle

fontSynthesisWeight?

optional fontSynthesisWeight?: FontSynthesisWeight;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Syntax: auto | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
97	111	16.4	97	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-synthesis-weight

Inherited from

KeywordProps.fontSynthesisWeight

fontVariant?

optional fontVariant?: FontVariant;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant

Inherited from

KeywordProps.fontVariant

fontVariantAlternates?

optional fontVariantAlternates?: FontVariantAlternates;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Syntax: normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
111	34	9.1	111	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-alternates

Inherited from

KeywordProps.fontVariantAlternates

fontVariantCaps?

optional fontVariantCaps?: FontVariantCaps;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
52	34	9.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-caps

Inherited from

KeywordProps.fontVariantCaps

fontVariantEastAsian?

optional fontVariantEastAsian?: FontVariantEastAsian;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
63	34	9.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-east-asian

Inherited from

KeywordProps.fontVariantEastAsian

fontVariantEmoji?

optional fontVariantEmoji?: FontVariantEmoji;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | text | emoji | unicode

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
131	141	No	131	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-emoji

Inherited from

KeywordProps.fontVariantEmoji

fontVariantLigatures?

optional fontVariantLigatures?: FontVariantLigatures;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
34	34	9.1	79	No
31 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-ligatures

Inherited from

KeywordProps.fontVariantLigatures

fontVariantNumeric?

optional fontVariantNumeric?: FontVariantNumeric;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
52	34	9.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-numeric

Inherited from

KeywordProps.fontVariantNumeric

fontVariantPosition?

optional fontVariantPosition?: FontVariantPosition;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | sub | super

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
No	34	9.1	No	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variant-position

Inherited from

KeywordProps.fontVariantPosition

fontVariationSettings?

optional fontVariationSettings?: FontVariationSettings;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

Syntax: normal | [ <string> <number> ]#

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
62	62	11	17	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/font-variation-settings

Inherited from

KeywordProps.fontVariationSettings

fontWeight?

optional fontWeight?: 
  | "normal"
  | Wide
  | FontWeightToken
  | "bold"
  | "lighter"
  | "bolder";

Inherited from

TokenMappedProps.fontWeight

fontWidth?

optional fontWidth?: FontWidth;

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
No	No	18.4	No	No

Inherited from

KeywordProps.fontWidth

forcedColorAdjust?

optional forcedColorAdjust?: ForcedColorAdjust;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | none | preserve-parent-color

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
89	113	No	79	10 (-ms-high-contrast-adjust)
			12 (-ms-high-contrast-adjust)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/forced-color-adjust

Inherited from

KeywordProps.forcedColorAdjust

gap?

optional gap?: Size | readonly [PadItem, PadItem];

Inherited from

TokenMappedProps.gap

glyphOrientationVertical?

optional glyphOrientationVertical?: GlyphOrientationVertical;

Inherited from

KeywordProps.glyphOrientationVertical

grid?

optional grid?: Grid;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid

Inherited from

KeywordProps.grid

gridArea?

optional gridArea?: GridArea;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <grid-line> [ / <grid-line> ]{0,3}

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-area

Inherited from

KeywordProps.gridArea

gridAutoColumns?

optional gridAutoColumns?: GridAutoColumns<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: <track-size>+

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
57	70	10.1	16	10 (-ms-grid-columns)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-auto-columns

Inherited from

KeywordProps.gridAutoColumns

gridAutoFlow?

optional gridAutoFlow?: GridAutoFlow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: [ row | column ] || dense

Initial value: row

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-auto-flow

Inherited from

KeywordProps.gridAutoFlow

gridAutoRows?

optional gridAutoRows?: GridAutoRows<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: <track-size>+

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
57	70	10.1	16	10 (-ms-grid-rows)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-auto-rows

Inherited from

KeywordProps.gridAutoRows

gridColumn?

optional gridColumn?: GridColumn;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <grid-line> [ / <grid-line> ]?

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-column

Inherited from

KeywordProps.gridColumn

gridColumnEnd?

optional gridColumnEnd?: GridColumnEnd;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <grid-line>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-column-end

Inherited from

KeywordProps.gridColumnEnd

gridColumnGap?

optional gridColumnGap?: GridColumnGap<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage>

Initial value: 0

Deprecated

Inherited from

KeywordProps.gridColumnGap

gridColumnStart?

optional gridColumnStart?: GridColumnStart;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <grid-line>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-column-start

Inherited from

KeywordProps.gridColumnStart

gridGap?

optional gridGap?: GridGap<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <'grid-row-gap'> <'grid-column-gap'>?

Deprecated

Inherited from

KeywordProps.gridGap

gridRow?

optional gridRow?: GridRow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <grid-line> [ / <grid-line> ]?

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-row

Inherited from

KeywordProps.gridRow

gridRowEnd?

optional gridRowEnd?: GridRowEnd;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <grid-line>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-row-end

Inherited from

KeywordProps.gridRowEnd

gridRowGap?

optional gridRowGap?: GridRowGap<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <length-percentage>

Initial value: 0

Deprecated

Inherited from

KeywordProps.gridRowGap

gridRowStart?

optional gridRowStart?: GridRowStart;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: <grid-line>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-row-start

Inherited from

KeywordProps.gridRowStart

gridTemplate?

optional gridTemplate?: GridTemplate;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template

Inherited from

KeywordProps.gridTemplate

gridTemplateAreas?

optional gridTemplateAreas?: GridTemplateAreas;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: none | <string>+

Initial value: none

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template-areas

Inherited from

KeywordProps.gridTemplateAreas

gridTemplateColumns?

optional gridTemplateColumns?: GridTemplateColumns<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Initial value: none

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	10 (-ms-grid-columns)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template-columns

Inherited from

KeywordProps.gridTemplateColumns

gridTemplateRows?

optional gridTemplateRows?: GridTemplateRows<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Initial value: none

Chrome	Firefox	Safari	Edge	IE
57	52	10.1	16	10 (-ms-grid-rows)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/grid-template-rows

Inherited from

KeywordProps.gridTemplateRows

hangingPunctuation?

optional hangingPunctuation?: HangingPunctuation;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | [ first || [ force-end | allow-end ] || last ]

Initial value: none

Chrome	Firefox	Safari	Edge	IE
No	No	10	No	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/hanging-punctuation

Inherited from

KeywordProps.hangingPunctuation

height?

optional height?: SizeIntrinsic;

Inherited from

TokenMappedProps.height

hyphenateCharacter?

optional hyphenateCharacter?: HyphenateCharacter;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto | <string>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
106	98	17	106	No
6 -x-		5.1 -x-	79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/hyphenate-character

Inherited from

KeywordProps.hyphenateCharacter

hyphenateLimitChars?

optional hyphenateLimitChars?: HyphenateLimitChars;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ auto | <integer> ]{1,3}

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
109	137	No	109	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/hyphenate-limit-chars

Inherited from

KeywordProps.hyphenateLimitChars

hyphens?

optional hyphens?: Hyphens;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: none | manual | auto

Initial value: manual

Chrome	Firefox	Safari	Edge	IE
55	43	17	79	10 -x-
13 -x-	6 -x-	5.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/hyphens

Inherited from

KeywordProps.hyphens

imageOrientation?

optional imageOrientation?: ImageOrientation;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2020.

Syntax: from-image | <angle> | [ <angle>? flip ]

Initial value: from-image

Chrome	Firefox	Safari	Edge	IE
81	26	13.1	81	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/image-orientation

Inherited from

KeywordProps.imageOrientation

imageRendering?

optional imageRendering?: ImageRendering;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | crisp-edges | pixelated | smooth

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
13	3.6	6	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/image-rendering

Inherited from

KeywordProps.imageRendering

imageResolution?

optional imageResolution?: ImageResolution;

The image-resolution CSS property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as background-image images.

Syntax: [ from-image || <resolution> ] && snap?

Initial value: 1dppx

Inherited from

KeywordProps.imageResolution

imeMode?

optional imeMode?: ImeMode;

Syntax: auto | normal | active | inactive | disabled

Initial value: auto

Deprecated

Inherited from

KeywordProps.imeMode

initialLetter?

optional initialLetter?: InitialLetter;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | [ <number> <integer>? ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
110	No	9 -x-	110	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/initial-letter

Inherited from

KeywordProps.initialLetter

initialLetterAlign?

optional initialLetterAlign?: InitialLetterAlign;

Syntax: [ auto | alphabetic | hanging | ideographic ]

Initial value: auto

Inherited from

KeywordProps.initialLetterAlign

inlineSize?

optional inlineSize?: SizeIntrinsic;

Inherited from

TokenMappedProps.inlineSize

inset?

optional inset?: SizeAuto | Repeat1to4<MarginItem>;

Inherited from

TokenMappedProps.inset

insetArea?

optional insetArea?: PositionArea;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <position-area>

Initial value: none

Deprecated

Inherited from

KeywordProps.insetArea

insetBlock?

optional insetBlock?: SizeAuto | readonly [MarginItem, MarginItem];

Inherited from

TokenMappedProps.insetBlock

insetBlockEnd?

optional insetBlockEnd?: SizeAuto;

Inherited from

TokenMappedProps.insetBlockEnd

insetBlockStart?

optional insetBlockStart?: SizeAuto;

Inherited from

TokenMappedProps.insetBlockStart

insetInline?

optional insetInline?: SizeAuto | readonly [MarginItem, MarginItem];

Inherited from

TokenMappedProps.insetInline

insetInlineEnd?

optional insetInlineEnd?: SizeAuto;

Inherited from

TokenMappedProps.insetInlineEnd

insetInlineStart?

optional insetInlineStart?: SizeAuto;

Inherited from

TokenMappedProps.insetInlineStart

interpolateSize?

optional interpolateSize?: InterpolateSize;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: numeric-only | allow-keywords

Initial value: numeric-only

Chrome	Firefox	Safari	Edge	IE
129	No	No	129	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/interpolate-size

Inherited from

KeywordProps.interpolateSize

isolation?

optional isolation?: Isolation;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | isolate

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
41	36	8	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/isolation

Inherited from

KeywordProps.isolation

justifyContent?

optional justifyContent?: JustifyContent;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
29	20	9	12	11
21 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/justify-content

Inherited from

KeywordProps.justifyContent

justifyItems?

optional justifyItems?: JustifyItems;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2016.

Initial value: legacy

Chrome	Firefox	Safari	Edge	IE
52	20	9	12	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/justify-items

Inherited from

KeywordProps.justifyItems

justifySelf?

optional justifySelf?: JustifySelf;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
57	45	10.1	16	10

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/justify-self

Inherited from

KeywordProps.justifySelf

justifyTracks?

optional justifyTracks?: JustifyTracks;

Syntax: [ normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] ]#

Initial value: normal

Inherited from

KeywordProps.justifyTracks

KhtmlBoxAlign?

optional KhtmlBoxAlign?: BoxAlign;

Syntax: start | center | end | baseline | stretch

Initial value: stretch

Deprecated

Inherited from

KeywordProps.KhtmlBoxAlign

KhtmlBoxDirection?

optional KhtmlBoxDirection?: BoxDirection;

The box-direction CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

Syntax: normal | reverse | inherit

Initial value: normal

Deprecated

Inherited from

KeywordProps.KhtmlBoxDirection

KhtmlBoxFlex?

optional KhtmlBoxFlex?: BoxFlex;

The -moz-box-flex and -webkit-box-flex CSS properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.

Syntax: <number>

Initial value: 0

Deprecated

Inherited from

KeywordProps.KhtmlBoxFlex

KhtmlBoxFlexGroup?

optional KhtmlBoxFlexGroup?: BoxFlexGroup;

The box-flex-group CSS property assigns the flexbox's child elements to a flex group.

Syntax: <integer>

Initial value: 1

Deprecated

Inherited from

KeywordProps.KhtmlBoxFlexGroup

KhtmlBoxLines?

optional KhtmlBoxLines?: BoxLines;

The box-lines CSS property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).

Syntax: single | multiple

Initial value: single

Deprecated

Inherited from

KeywordProps.KhtmlBoxLines

KhtmlBoxOrdinalGroup?

optional KhtmlBoxOrdinalGroup?: BoxOrdinalGroup;

The box-ordinal-group CSS property assigns the flexbox's child elements to an ordinal group.

Syntax: <integer>

Initial value: 1

Deprecated

Inherited from

KeywordProps.KhtmlBoxOrdinalGroup

KhtmlBoxOrient?

optional KhtmlBoxOrient?: BoxOrient;

The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

Syntax: horizontal | vertical | inline-axis | block-axis | inherit

Initial value: inline-axis

Deprecated

Inherited from

KeywordProps.KhtmlBoxOrient

KhtmlBoxPack?

optional KhtmlBoxPack?: BoxPack;

Syntax: start | center | end | justify

Initial value: start

Deprecated

Inherited from

KeywordProps.KhtmlBoxPack

KhtmlLineBreak?

optional KhtmlLineBreak?: LineBreak;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: auto | loose | normal | strict | anywhere

Initial value: auto

Deprecated

Inherited from

KeywordProps.KhtmlLineBreak

KhtmlOpacity?

optional KhtmlOpacity?: Opacity;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <opacity-value>

Initial value: 1

Deprecated

Inherited from

KeywordProps.KhtmlOpacity

KhtmlUserSelect?

optional KhtmlUserSelect?: UserSelect;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | text | none | all

Initial value: auto

Deprecated

Inherited from

KeywordProps.KhtmlUserSelect

left?

optional left?: SizeAuto;

Inherited from

TokenMappedProps.left

letterSpacing?

optional letterSpacing?: SpacingText;

Inherited from

TokenMappedProps.letterSpacing

lightingColor?

optional lightingColor?: LightingColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <color>

Initial value: white

Chrome	Firefox	Safari	Edge	IE
5	3	6	12	≤11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/lighting-color

Inherited from

KeywordProps.lightingColor

lineBreak?

optional lineBreak?: LineBreak;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: auto | loose | normal | strict | anywhere

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
58	69	11	14	5.5
1 -x-		3 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/line-break

Inherited from

KeywordProps.lineBreak

lineClamp?

optional lineClamp?: LineClamp;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <integer>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
6 -x-	68 -x-	18.2-18.4	17 -x-	No
		5 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/line-clamp

Inherited from

KeywordProps.lineClamp

lineHeight?

optional lineHeight?: 
  | DimensionToken
  | "normal"
  | Wide
  | NumberToken;

Inherited from

TokenMappedProps.lineHeight

lineHeightStep?

optional lineHeightStep?: LineHeightStep<0 | DimensionToken>;

The line-height-step CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.

Syntax: <length>

Initial value: 0

Inherited from

KeywordProps.lineHeightStep

listStyle?

optional listStyle?: ListStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/list-style

Inherited from

KeywordProps.listStyle

listStyleImage?

optional listStyleImage?: ListStyleImage;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <image> | none

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/list-style-image

Inherited from

KeywordProps.listStyleImage

listStylePosition?

optional listStylePosition?: ListStylePosition;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: inside | outside

Initial value: outside

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/list-style-position

Inherited from

KeywordProps.listStylePosition

listStyleType?

optional listStyleType?: ListStyleType;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <counter-style> | <string> | none

Initial value: disc

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/list-style-type

Inherited from

KeywordProps.listStyleType

margin?

optional margin?: SizeAuto | Repeat1to4<MarginItem>;

Inherited from

TokenMappedProps.margin

marginBlock?

optional marginBlock?: SizeAuto | readonly [MarginItem, MarginItem];

Inherited from

TokenMappedProps.marginBlock

marginBlockEnd?

optional marginBlockEnd?: SizeAuto;

Inherited from

TokenMappedProps.marginBlockEnd

marginBlockStart?

optional marginBlockStart?: SizeAuto;

Inherited from

TokenMappedProps.marginBlockStart

marginBottom?

optional marginBottom?: SizeAuto;

Inherited from

TokenMappedProps.marginBottom

marginInline?

optional marginInline?: SizeAuto | readonly [MarginItem, MarginItem];

Inherited from

TokenMappedProps.marginInline

marginInlineEnd?

optional marginInlineEnd?: SizeAuto;

Inherited from

TokenMappedProps.marginInlineEnd

marginInlineStart?

optional marginInlineStart?: SizeAuto;

Inherited from

TokenMappedProps.marginInlineStart

marginLeft?

optional marginLeft?: SizeAuto;

Inherited from

TokenMappedProps.marginLeft

marginRight?

optional marginRight?: SizeAuto;

Inherited from

TokenMappedProps.marginRight

marginTop?

optional marginTop?: SizeAuto;

Inherited from

TokenMappedProps.marginTop

marginTrim?

optional marginTrim?: MarginTrim;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | in-flow | all

Initial value: none

Chrome	Firefox	Safari	Edge	IE
No	No	16.4	No	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/margin-trim

Inherited from

KeywordProps.marginTrim

marker?

optional marker?: Marker;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: none | <url>

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/marker

Inherited from

KeywordProps.marker

markerEnd?

optional markerEnd?: MarkerEnd;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: none | <url>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/marker-end

Inherited from

KeywordProps.markerEnd

markerMid?

optional markerMid?: MarkerMid;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: none | <url>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/marker-mid

Inherited from

KeywordProps.markerMid

markerStart?

optional markerStart?: MarkerStart;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: none | <url>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/marker-start

Inherited from

KeywordProps.markerStart

mask?

optional mask?: Mask<0 | DimensionToken>;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <mask-layer>#

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	12-79	No
1 -x-		3.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask

Inherited from

KeywordProps.mask

maskBorder?

optional maskBorder?: MaskBorder;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

Chrome	Firefox	Safari	Edge	IE
1 (-webkit-mask-box-image)	No	17.2	79 (-webkit-mask-box-image)	No
		3.1 (-webkit-mask-box-image)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-border

Inherited from

KeywordProps.maskBorder

maskBorderMode?

optional maskBorderMode?: MaskBorderMode;

The mask-border-mode CSS property specifies the blending mode used in a mask border.

Syntax: luminance | alpha

Initial value: alpha

Inherited from

KeywordProps.maskBorderMode

maskBorderOutset?

optional maskBorderOutset?: MaskBorderOutset<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ <length> | <number> ]{1,4}

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
1 (-webkit-mask-box-image-outset)	No	17.2	79 (-webkit-mask-box-image-outset)	No
		3.1 (-webkit-mask-box-image-outset)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-border-outset

Inherited from

KeywordProps.maskBorderOutset

maskBorderRepeat?

optional maskBorderRepeat?: MaskBorderRepeat;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ stretch | repeat | round | space ]{1,2}

Initial value: stretch

Chrome	Firefox	Safari	Edge	IE
1 (-webkit-mask-box-image-repeat)	No	17.2	79 (-webkit-mask-box-image-repeat)	No
		3.1 (-webkit-mask-box-image-repeat)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-border-repeat

Inherited from

KeywordProps.maskBorderRepeat

maskBorderSlice?

optional maskBorderSlice?: MaskBorderSlice;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <number-percentage>{1,4} fill?

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
1 (-webkit-mask-box-image-slice)	No	17.2	79 (-webkit-mask-box-image-slice)	No
		3.1 (-webkit-mask-box-image-slice)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-border-slice

Inherited from

KeywordProps.maskBorderSlice

maskBorderSource?

optional maskBorderSource?: MaskBorderSource;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <image>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1 (-webkit-mask-box-image-source)	No	17.2	79 (-webkit-mask-box-image-source)	No
		3.1 (-webkit-mask-box-image-source)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-border-source

Inherited from

KeywordProps.maskBorderSource

maskBorderWidth?

optional maskBorderWidth?: MaskBorderWidth<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ <length-percentage> | <number> | auto ]{1,4}

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
1 (-webkit-mask-box-image-width)	No	17.2	79 (-webkit-mask-box-image-width)	No
		3.1 (-webkit-mask-box-image-width)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-border-width

Inherited from

KeywordProps.maskBorderWidth

maskClip?

optional maskClip?: MaskClip;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: [ <coord-box> | no-clip ]#

Initial value: border-box

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	120	No
1 -x-		4 -x-	79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-clip

Inherited from

KeywordProps.maskClip

maskComposite?

optional maskComposite?: MaskComposite;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <compositing-operator>#

Initial value: add

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	18-79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-composite

Inherited from

KeywordProps.maskComposite

maskImage?

optional maskImage?: MaskImage;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <mask-reference>#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	16-79	No
1 -x-		4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-image

Inherited from

KeywordProps.maskImage

maskMode?

optional maskMode?: MaskMode;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <masking-mode>#

Initial value: match-source

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	120	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-mode

Inherited from

KeywordProps.maskMode

maskOrigin?

optional maskOrigin?: MaskOrigin;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <coord-box>#

Initial value: border-box

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	120	No
1 -x-		4 -x-	79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-origin

Inherited from

KeywordProps.maskOrigin

maskPosition?

optional maskPosition?: MaskPosition<0 | DimensionToken>;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <position>#

Initial value: 0% 0%

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	18-79	No
1 -x-		3.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-position

Inherited from

KeywordProps.maskPosition

maskRepeat?

optional maskRepeat?: MaskRepeat;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <repeat-style>#

Initial value: repeat

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	18-79	No
1 -x-		3.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-repeat

Inherited from

KeywordProps.maskRepeat

maskSize?

optional maskSize?: MaskSize<0 | DimensionToken>;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <bg-size>#

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
120	53	15.4	18-79	No
4 -x-		4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-size

Inherited from

KeywordProps.maskSize

maskType?

optional maskType?: MaskType;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: luminance | alpha

Initial value: luminance

Chrome	Firefox	Safari	Edge	IE
24	35	7	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mask-type

Inherited from

KeywordProps.maskType

masonryAutoFlow?

optional masonryAutoFlow?: MasonryAutoFlow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Syntax: [ pack | next ] || [ definite-first | ordered ]

Initial value: pack

Inherited from

KeywordProps.masonryAutoFlow

mathDepth?

optional mathDepth?: MathDepth;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto-add | add(<integer>) | <integer>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
109	117	No	109	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/math-depth

Inherited from

KeywordProps.mathDepth

mathShift?

optional mathShift?: MathShift;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | compact

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
109	No	No	109	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/math-shift

Inherited from

KeywordProps.mathShift

mathStyle?

optional mathStyle?: MathStyle;

Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: normal | compact

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
109	117	14.1	109	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/math-style

Inherited from

KeywordProps.mathStyle

maxBlockSize?

optional maxBlockSize?: SizeIntrinsic;

Inherited from

TokenMappedProps.maxBlockSize

maxHeight?

optional maxHeight?: SizeIntrinsic;

Inherited from

TokenMappedProps.maxHeight

maxInlineSize?

optional maxInlineSize?: SizeIntrinsic;

Inherited from

TokenMappedProps.maxInlineSize

maxLines?

optional maxLines?: MaxLines;

Syntax: none | <integer>

Initial value: none

Inherited from

KeywordProps.maxLines

maxWidth?

optional maxWidth?: SizeIntrinsic;

Inherited from

TokenMappedProps.maxWidth

minBlockSize?

optional minBlockSize?: SizeIntrinsic;

Inherited from

TokenMappedProps.minBlockSize

minHeight?

optional minHeight?: SizeIntrinsic;

Inherited from

TokenMappedProps.minHeight

minInlineSize?

optional minInlineSize?: SizeIntrinsic;

Inherited from

TokenMappedProps.minInlineSize

minWidth?

optional minWidth?: SizeIntrinsic;

Inherited from

TokenMappedProps.minWidth

mixBlendMode?

optional mixBlendMode?: MixBlendMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <blend-mode> | plus-darker | plus-lighter

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
41	32	8	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/mix-blend-mode

Inherited from

KeywordProps.mixBlendMode

motion?

optional motion?: Offset<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

Chrome	Firefox	Safari	Edge	IE
55	72	16	79	No
46 (motion)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset

Inherited from

KeywordProps.motion

motionDistance?

optional motionDistance?: OffsetDistance<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: <length-percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
55	72	16	79	No
46 (motion-distance)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-distance

Inherited from

KeywordProps.motionDistance

motionPath?

optional motionPath?: OffsetPath;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | <offset-path> || <coord-box>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
55	72	15.4	79	No
46 (motion-path)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-path

Inherited from

KeywordProps.motionPath

motionRotation?

optional motionRotation?: OffsetRotate;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: [ auto | reverse ] || <angle>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
56	72	16	79	No
46 (motion-rotation)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-rotate

Inherited from

KeywordProps.motionRotation

MozAnimation?

optional MozAnimation?: Animation<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation>#

Inherited from

KeywordProps.MozAnimation

MozAnimationDelay?

optional MozAnimationDelay?: AnimationDelay<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Inherited from

KeywordProps.MozAnimationDelay

MozAnimationDirection?

optional MozAnimationDirection?: AnimationDirection;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-direction>#

Initial value: normal

Inherited from

KeywordProps.MozAnimationDirection

MozAnimationDuration?

optional MozAnimationDuration?: AnimationDuration<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: [ auto | <time [0s,∞]> ]#

Initial value: 0s

Inherited from

KeywordProps.MozAnimationDuration

MozAnimationFillMode?

optional MozAnimationFillMode?: AnimationFillMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-fill-mode>#

Initial value: none

Inherited from

KeywordProps.MozAnimationFillMode

MozAnimationIterationCount?

optional MozAnimationIterationCount?: AnimationIterationCount;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-iteration-count>#

Initial value: 1

Inherited from

KeywordProps.MozAnimationIterationCount

MozAnimationName?

optional MozAnimationName?: AnimationName;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: [ none | <keyframes-name> ]#

Initial value: none

Inherited from

KeywordProps.MozAnimationName

MozAnimationPlayState?

optional MozAnimationPlayState?: AnimationPlayState;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-play-state>#

Initial value: running

Inherited from

KeywordProps.MozAnimationPlayState

MozAnimationTimingFunction?

optional MozAnimationTimingFunction?: AnimationTimingFunction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <easing-function>#

Initial value: ease

Inherited from

KeywordProps.MozAnimationTimingFunction

MozAppearance?

optional MozAppearance?: MozAppearance;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Initial value: none (but this value is overridden in the user agent CSS)

Inherited from

KeywordProps.MozAppearance

MozBackfaceVisibility?

optional MozBackfaceVisibility?: BackfaceVisibility;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: visible | hidden

Initial value: visible

Inherited from

KeywordProps.MozBackfaceVisibility

MozBackgroundClip?

optional MozBackgroundClip?: BackgroundClip;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-clip>#

Initial value: border-box

Deprecated

Inherited from

KeywordProps.MozBackgroundClip

MozBackgroundOrigin?

optional MozBackgroundOrigin?: BackgroundOrigin;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <visual-box>#

Initial value: padding-box

Deprecated

Inherited from

KeywordProps.MozBackgroundOrigin

MozBackgroundSize?

optional MozBackgroundSize?: BackgroundSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-size>#

Initial value: auto auto

Deprecated

Inherited from

KeywordProps.MozBackgroundSize

MozBinding?

optional MozBinding?: MozBinding;

Syntax: <url> | none

Initial value: none

Inherited from

KeywordProps.MozBinding

MozBorderBottomColors?

optional MozBorderBottomColors?: MozBorderBottomColors;

Syntax: <color>+ | none

Initial value: none

Inherited from

KeywordProps.MozBorderBottomColors

MozBorderEndColor?

optional MozBorderEndColor?: BorderInlineEndColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-color'>

Initial value: currentcolor

Inherited from

KeywordProps.MozBorderEndColor

MozBorderEndStyle?

optional MozBorderEndStyle?: BorderInlineEndStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-style'>

Initial value: none

Inherited from

KeywordProps.MozBorderEndStyle

MozBorderEndWidth?

optional MozBorderEndWidth?: BorderInlineEndWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-width'>

Initial value: medium

Inherited from

KeywordProps.MozBorderEndWidth

MozBorderImage?

optional MozBorderImage?: BorderImage;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Inherited from

KeywordProps.MozBorderImage

MozBorderLeftColors?

optional MozBorderLeftColors?: MozBorderLeftColors;

Syntax: <color>+ | none

Initial value: none

Inherited from

KeywordProps.MozBorderLeftColors

MozBorderRadius?

optional MozBorderRadius?: BorderRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

Deprecated

Inherited from

KeywordProps.MozBorderRadius

MozBorderRadiusBottomleft?

optional MozBorderRadiusBottomleft?: BorderBottomLeftRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Deprecated

Inherited from

KeywordProps.MozBorderRadiusBottomleft

MozBorderRadiusBottomright?

optional MozBorderRadiusBottomright?: BorderBottomRightRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Deprecated

Inherited from

KeywordProps.MozBorderRadiusBottomright

MozBorderRadiusTopleft?

optional MozBorderRadiusTopleft?: BorderTopLeftRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Deprecated

Inherited from

KeywordProps.MozBorderRadiusTopleft

MozBorderRadiusTopright?

optional MozBorderRadiusTopright?: BorderTopRightRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Deprecated

Inherited from

KeywordProps.MozBorderRadiusTopright

MozBorderRightColors?

optional MozBorderRightColors?: MozBorderRightColors;

Syntax: <color>+ | none

Initial value: none

Inherited from

KeywordProps.MozBorderRightColors

MozBorderStartColor?

optional MozBorderStartColor?: BorderInlineStartColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-color'>

Initial value: currentcolor

Inherited from

KeywordProps.MozBorderStartColor

MozBorderStartStyle?

optional MozBorderStartStyle?: BorderInlineStartStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'border-top-style'>

Initial value: none

Inherited from

KeywordProps.MozBorderStartStyle

MozBorderTopColors?

optional MozBorderTopColors?: MozBorderTopColors;

Syntax: <color>+ | none

Initial value: none

Inherited from

KeywordProps.MozBorderTopColors

MozBoxAlign?

optional MozBoxAlign?: BoxAlign;

Syntax: start | center | end | baseline | stretch

Initial value: stretch

Deprecated

Inherited from

KeywordProps.MozBoxAlign

MozBoxDirection?

optional MozBoxDirection?: BoxDirection;

The box-direction CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

Syntax: normal | reverse | inherit

Initial value: normal

Deprecated

Inherited from

KeywordProps.MozBoxDirection

MozBoxFlex?

optional MozBoxFlex?: BoxFlex;

The -moz-box-flex and -webkit-box-flex CSS properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.

Syntax: <number>

Initial value: 0

Deprecated

Inherited from

KeywordProps.MozBoxFlex

MozBoxOrdinalGroup?

optional MozBoxOrdinalGroup?: BoxOrdinalGroup;

The box-ordinal-group CSS property assigns the flexbox's child elements to an ordinal group.

Syntax: <integer>

Initial value: 1

Deprecated

Inherited from

KeywordProps.MozBoxOrdinalGroup

MozBoxOrient?

optional MozBoxOrient?: BoxOrient;

The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

Syntax: horizontal | vertical | inline-axis | block-axis | inherit

Initial value: inline-axis

Deprecated

Inherited from

KeywordProps.MozBoxOrient

MozBoxPack?

optional MozBoxPack?: BoxPack;

Syntax: start | center | end | justify

Initial value: start

Deprecated

Inherited from

KeywordProps.MozBoxPack

MozBoxShadow?

optional MozBoxShadow?: BoxShadow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: none | <shadow>#

Initial value: none

Deprecated

Inherited from

KeywordProps.MozBoxShadow

MozBoxSizing?

optional MozBoxSizing?: BoxSizing;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: content-box | border-box

Initial value: content-box

Inherited from

KeywordProps.MozBoxSizing

MozColumnCount?

optional MozColumnCount?: ColumnCount;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <integer> | auto

Initial value: auto

Deprecated

Inherited from

KeywordProps.MozColumnCount

MozColumnFill?

optional MozColumnFill?: ColumnFill;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: auto | balance

Initial value: balance

Deprecated

Inherited from

KeywordProps.MozColumnFill

MozColumnRule?

optional MozColumnRule?: ColumnRule<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Inherited from

KeywordProps.MozColumnRule

MozColumnRuleColor?

optional MozColumnRuleColor?: ColumnRuleColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <color>

Initial value: currentcolor

Inherited from

KeywordProps.MozColumnRuleColor

MozColumnRuleStyle?

optional MozColumnRuleStyle?: ColumnRuleStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'border-style'>

Initial value: none

Inherited from

KeywordProps.MozColumnRuleStyle

MozColumnRuleWidth?

optional MozColumnRuleWidth?: ColumnRuleWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'border-width'>

Initial value: medium

Inherited from

KeywordProps.MozColumnRuleWidth

MozColumns?

optional MozColumns?: Columns<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'column-width'> || <'column-count'>

Inherited from

KeywordProps.MozColumns

MozColumnWidth?

optional MozColumnWidth?: ColumnWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.

Syntax: <length> | auto

Initial value: auto

Inherited from

KeywordProps.MozColumnWidth

MozContextProperties?

optional MozContextProperties?: MozContextProperties;

Syntax: none | [ fill | fill-opacity | stroke | stroke-opacity ]#

Initial value: none

Inherited from

KeywordProps.MozContextProperties

MozFloatEdge?

optional MozFloatEdge?: MozFloatEdge;

The non-standard -moz-float-edge CSS property specifies whether the height and width properties of the element include the margin, border, or padding thickness.

Syntax: border-box | content-box | margin-box | padding-box

Initial value: content-box

Deprecated

Inherited from

KeywordProps.MozFloatEdge

MozFontFeatureSettings?

optional MozFontFeatureSettings?: FontFeatureSettings;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: normal | <feature-tag-value>#

Initial value: normal

Inherited from

KeywordProps.MozFontFeatureSettings

MozFontLanguageOverride?

optional MozFontLanguageOverride?: FontLanguageOverride;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | <string>

Initial value: normal

Inherited from

KeywordProps.MozFontLanguageOverride

MozForceBrokenImageIcon?

optional MozForceBrokenImageIcon?: MozForceBrokenImageIcon;

The -moz-force-broken-image-icon extended CSS property can be used to force the broken image icon to be shown even when a broken image has an alt attribute.

Syntax: 0 | 1

Initial value: 0

Deprecated

Inherited from

KeywordProps.MozForceBrokenImageIcon

MozHyphens?

optional MozHyphens?: Hyphens;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: none | manual | auto

Initial value: manual

Inherited from

KeywordProps.MozHyphens

MozMarginEnd?

optional MozMarginEnd?: MarginInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'margin-top'>

Initial value: 0

Inherited from

KeywordProps.MozMarginEnd

MozMarginStart?

optional MozMarginStart?: MarginInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'margin-top'>

Initial value: 0

Inherited from

KeywordProps.MozMarginStart

MozOpacity?

optional MozOpacity?: Opacity;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <opacity-value>

Initial value: 1

Deprecated

Inherited from

KeywordProps.MozOpacity

MozOrient?

optional MozOrient?: MozOrient;

The -moz-orient CSS property specifies the orientation of the element to which it's applied.

Syntax: inline | block | horizontal | vertical

Initial value: inline

Inherited from

KeywordProps.MozOrient

MozOsxFontSmoothing?

optional MozOsxFontSmoothing?: FontSmooth<0 | DimensionToken>;

The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered.

Syntax: auto | never | always | <absolute-size> | <length>

Initial value: auto

Inherited from

KeywordProps.MozOsxFontSmoothing

MozOutline?

optional MozOutline?: Outline<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Syntax: <'outline-width'> || <'outline-style'> || <'outline-color'>

Deprecated

Inherited from

KeywordProps.MozOutline

MozOutlineColor?

optional MozOutlineColor?: OutlineColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: auto | <color>

Initial value: auto

Deprecated

Inherited from

KeywordProps.MozOutlineColor

MozOutlineRadius?

optional MozOutlineRadius?: MozOutlineRadius<0 | DimensionToken>;

Syntax: <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?

Inherited from

KeywordProps.MozOutlineRadius

MozOutlineRadiusBottomleft?

optional MozOutlineRadiusBottomleft?: MozOutlineRadiusBottomleft<0 | DimensionToken>;

Syntax: <outline-radius>

Initial value: 0

Inherited from

KeywordProps.MozOutlineRadiusBottomleft

MozOutlineRadiusBottomright?

optional MozOutlineRadiusBottomright?: MozOutlineRadiusBottomright<0 | DimensionToken>;

Syntax: <outline-radius>

Initial value: 0

Inherited from

KeywordProps.MozOutlineRadiusBottomright

MozOutlineRadiusTopleft?

optional MozOutlineRadiusTopleft?: MozOutlineRadiusTopleft<0 | DimensionToken>;

Syntax: <outline-radius>

Initial value: 0

Inherited from

KeywordProps.MozOutlineRadiusTopleft

MozOutlineRadiusTopright?

optional MozOutlineRadiusTopright?: MozOutlineRadiusTopright<0 | DimensionToken>;

Syntax: <outline-radius>

Initial value: 0

Inherited from

KeywordProps.MozOutlineRadiusTopright

MozOutlineStyle?

optional MozOutlineStyle?: OutlineStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: auto | <outline-line-style>

Initial value: none

Deprecated

Inherited from

KeywordProps.MozOutlineStyle

MozOutlineWidth?

optional MozOutlineWidth?: OutlineWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <line-width>

Initial value: medium

Deprecated

Inherited from

KeywordProps.MozOutlineWidth

MozPaddingEnd?

optional MozPaddingEnd?: PaddingInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'padding-top'>

Initial value: 0

Inherited from

KeywordProps.MozPaddingEnd

MozPaddingStart?

optional MozPaddingStart?: PaddingInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'padding-top'>

Initial value: 0

Inherited from

KeywordProps.MozPaddingStart

MozPerspective?

optional MozPerspective?: Perspective<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <length>

Initial value: none

Inherited from

KeywordProps.MozPerspective

MozPerspectiveOrigin?

optional MozPerspectiveOrigin?: PerspectiveOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <position>

Initial value: 50% 50%

Inherited from

KeywordProps.MozPerspectiveOrigin

MozStackSizing?

optional MozStackSizing?: MozStackSizing;

Syntax: ignore | stretch-to-fit

Initial value: stretch-to-fit

Inherited from

KeywordProps.MozStackSizing

MozTabSize?

optional MozTabSize?: TabSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.

Syntax: <integer> | <length>

Initial value: 8

Inherited from

KeywordProps.MozTabSize

MozTextAlignLast?

optional MozTextAlignLast?: TextAlignLast;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Initial value: auto

Deprecated

Inherited from

KeywordProps.MozTextAlignLast

MozTextBlink?

optional MozTextBlink?: MozTextBlink;

Syntax: none | blink

Initial value: none

Inherited from

KeywordProps.MozTextBlink

MozTextDecorationColor?

optional MozTextDecorationColor?: TextDecorationColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <color>

Initial value: currentcolor

Deprecated

Inherited from

KeywordProps.MozTextDecorationColor

MozTextDecorationLine?

optional MozTextDecorationLine?: TextDecorationLine;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

Initial value: none

Deprecated

Inherited from

KeywordProps.MozTextDecorationLine

MozTextDecorationStyle?

optional MozTextDecorationStyle?: TextDecorationStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: solid | double | dotted | dashed | wavy

Initial value: solid

Deprecated

Inherited from

KeywordProps.MozTextDecorationStyle

MozTextSizeAdjust?

optional MozTextSizeAdjust?: TextSizeAdjust;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | auto | <percentage>

Initial value: auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).

Inherited from

KeywordProps.MozTextSizeAdjust

MozTransform?

optional MozTransform?: Transform;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <transform-list>

Initial value: none

Inherited from

KeywordProps.MozTransform

MozTransformOrigin?

optional MozTransformOrigin?: TransformOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Initial value: 50% 50% 0

Inherited from

KeywordProps.MozTransformOrigin

MozTransformStyle?

optional MozTransformStyle?: TransformStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: flat | preserve-3d

Initial value: flat

Inherited from

KeywordProps.MozTransformStyle

MozTransition?

optional MozTransition?: Transition<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-transition>#

Inherited from

KeywordProps.MozTransition

MozTransitionDelay?

optional MozTransitionDelay?: TransitionDelay<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Deprecated

Inherited from

KeywordProps.MozTransitionDelay

MozTransitionDuration?

optional MozTransitionDuration?: TransitionDuration<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Deprecated

Inherited from

KeywordProps.MozTransitionDuration

MozTransitionProperty?

optional MozTransitionProperty?: TransitionProperty;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <single-transition-property>#

Initial value: all

Deprecated

Inherited from

KeywordProps.MozTransitionProperty

MozTransitionTimingFunction?

optional MozTransitionTimingFunction?: TransitionTimingFunction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <easing-function>#

Initial value: ease

Deprecated

Inherited from

KeywordProps.MozTransitionTimingFunction

MozUserFocus?

optional MozUserFocus?: MozUserFocus;

The -moz-user-focus CSS property is used to indicate whether an element can have the focus.

Initial value: none

Deprecated

Inherited from

KeywordProps.MozUserFocus

MozUserInput?

optional MozUserInput?: MozUserInput;

In Mozilla applications, -moz-user-input determines if an element will accept user input.

Syntax: auto | none | enabled | disabled

Initial value: auto

Deprecated

Inherited from

KeywordProps.MozUserInput

MozUserModify?

optional MozUserModify?: MozUserModify;

The user-modify property has no effect in Firefox. It was originally planned to determine whether or not the content of an element can be edited by a user.

Syntax: read-only | read-write | write-only

Initial value: read-only

Inherited from

KeywordProps.MozUserModify

MozUserSelect?

optional MozUserSelect?: UserSelect;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | text | none | all

Initial value: auto

Inherited from

KeywordProps.MozUserSelect

MozWindowDragging?

optional MozWindowDragging?: MozWindowDragging;

Syntax: drag | no-drag

Initial value: drag

Inherited from

KeywordProps.MozWindowDragging

MozWindowShadow?

optional MozWindowShadow?: MozWindowShadow;

Syntax: default | menu | tooltip | sheet | none

Initial value: default

Inherited from

KeywordProps.MozWindowShadow

msAccelerator?

optional msAccelerator?: MsAccelerator;

Syntax: false | true

Initial value: false

Inherited from

KeywordProps.msAccelerator

msBlockProgression?

optional msBlockProgression?: MsBlockProgression;

Syntax: tb | rl | bt | lr

Initial value: tb

Inherited from

KeywordProps.msBlockProgression

msContentZoomChaining?

optional msContentZoomChaining?: MsContentZoomChaining;

Syntax: none | chained

Initial value: none

Inherited from

KeywordProps.msContentZoomChaining

msContentZooming?

optional msContentZooming?: MsContentZooming;

Syntax: none | zoom

Initial value: zoom for the top level element, none for all other elements

Inherited from

KeywordProps.msContentZooming

msContentZoomLimit?

optional msContentZoomLimit?: MsContentZoomLimit;

Syntax: <'-ms-content-zoom-limit-min'> <'-ms-content-zoom-limit-max'>

Inherited from

KeywordProps.msContentZoomLimit

msContentZoomLimitMax?

optional msContentZoomLimitMax?: MsContentZoomLimitMax;

Syntax: <percentage>

Initial value: 400%

Inherited from

KeywordProps.msContentZoomLimitMax

msContentZoomLimitMin?

optional msContentZoomLimitMin?: MsContentZoomLimitMin;

Syntax: <percentage>

Initial value: 100%

Inherited from

KeywordProps.msContentZoomLimitMin

msContentZoomSnap?

optional msContentZoomSnap?: MsContentZoomSnap;

Syntax: <'-ms-content-zoom-snap-type'> || <'-ms-content-zoom-snap-points'>

Inherited from

KeywordProps.msContentZoomSnap

msContentZoomSnapPoints?

optional msContentZoomSnapPoints?: MsContentZoomSnapPoints;

Syntax: snapInterval( <percentage>, <percentage> ) | snapList( <percentage># )

Initial value: snapInterval(0%, 100%)

Inherited from

KeywordProps.msContentZoomSnapPoints

msContentZoomSnapType?

optional msContentZoomSnapType?: MsContentZoomSnapType;

Syntax: none | proximity | mandatory

Initial value: none

Inherited from

KeywordProps.msContentZoomSnapType

msFilter?

optional msFilter?: MsFilter;

Syntax: <string>

Initial value: "" (the empty string)

Inherited from

KeywordProps.msFilter

msFlex?

optional msFlex?: Flex<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Inherited from

KeywordProps.msFlex

msFlexDirection?

optional msFlexDirection?: FlexDirection;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: row | row-reverse | column | column-reverse

Initial value: row

Inherited from

KeywordProps.msFlexDirection

msFlexPositive?

optional msFlexPositive?: FlexGrow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <number>

Initial value: 0

Inherited from

KeywordProps.msFlexPositive

msFlowFrom?

optional msFlowFrom?: MsFlowFrom;

Syntax: [ none | <custom-ident> ]#

Initial value: none

Inherited from

KeywordProps.msFlowFrom

msFlowInto?

optional msFlowInto?: MsFlowInto;

Syntax: [ none | <custom-ident> ]#

Initial value: none

Inherited from

KeywordProps.msFlowInto

msGridColumns?

optional msGridColumns?: MsGridColumns<0 | DimensionToken>;

Syntax: none | <track-list> | <auto-track-list>

Initial value: none

Inherited from

KeywordProps.msGridColumns

msGridRows?

optional msGridRows?: MsGridRows<0 | DimensionToken>;

Syntax: none | <track-list> | <auto-track-list>

Initial value: none

Inherited from

KeywordProps.msGridRows

msHighContrastAdjust?

optional msHighContrastAdjust?: MsHighContrastAdjust;

Syntax: auto | none

Initial value: auto

Inherited from

KeywordProps.msHighContrastAdjust

msHyphenateLimitChars?

optional msHyphenateLimitChars?: MsHyphenateLimitChars;

Syntax: auto | <integer>{1,3}

Initial value: auto

Inherited from

KeywordProps.msHyphenateLimitChars

msHyphenateLimitLines?

optional msHyphenateLimitLines?: MsHyphenateLimitLines;

Syntax: no-limit | <integer>

Initial value: no-limit

Inherited from

KeywordProps.msHyphenateLimitLines

msHyphenateLimitZone?

optional msHyphenateLimitZone?: MsHyphenateLimitZone<0 | DimensionToken>;

Syntax: <percentage> | <length>

Initial value: 0

Inherited from

KeywordProps.msHyphenateLimitZone

msHyphens?

optional msHyphens?: Hyphens;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: none | manual | auto

Initial value: manual

Inherited from

KeywordProps.msHyphens

msImeAlign?

optional msImeAlign?: MsImeAlign;

Syntax: auto | after

Initial value: auto

Inherited from

KeywordProps.msImeAlign

msImeMode?

optional msImeMode?: ImeMode;

Syntax: auto | normal | active | inactive | disabled

Initial value: auto

Deprecated

Inherited from

KeywordProps.msImeMode

msLineBreak?

optional msLineBreak?: LineBreak;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: auto | loose | normal | strict | anywhere

Initial value: auto

Inherited from

KeywordProps.msLineBreak

msOrder?

optional msOrder?: Order;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <integer>

Initial value: 0

Inherited from

KeywordProps.msOrder

msOverflowStyle?

optional msOverflowStyle?: MsOverflowStyle;

Syntax: auto | none | scrollbar | -ms-autohiding-scrollbar

Initial value: auto

Inherited from

KeywordProps.msOverflowStyle

msOverflowX?

optional msOverflowX?: OverflowX;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: visible | hidden | clip | scroll | auto

Initial value: visible

Inherited from

KeywordProps.msOverflowX

msOverflowY?

optional msOverflowY?: OverflowY;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: visible | hidden | clip | scroll | auto

Initial value: visible

Inherited from

KeywordProps.msOverflowY

msScrollbar3dlightColor?

optional msScrollbar3dlightColor?: MsScrollbar3dlightColor;

Syntax: <color>

Initial value: depends on user agent

Inherited from

KeywordProps.msScrollbar3dlightColor

msScrollbarArrowColor?

optional msScrollbarArrowColor?: MsScrollbarArrowColor;

Syntax: <color>

Initial value: ButtonText

Inherited from

KeywordProps.msScrollbarArrowColor

msScrollbarBaseColor?

optional msScrollbarBaseColor?: MsScrollbarBaseColor;

Syntax: <color>

Initial value: depends on user agent

Inherited from

KeywordProps.msScrollbarBaseColor

msScrollbarDarkshadowColor?

optional msScrollbarDarkshadowColor?: MsScrollbarDarkshadowColor;

Syntax: <color>

Initial value: ThreeDDarkShadow

Inherited from

KeywordProps.msScrollbarDarkshadowColor

msScrollbarFaceColor?

optional msScrollbarFaceColor?: MsScrollbarFaceColor;

Syntax: <color>

Initial value: ThreeDFace

Inherited from

KeywordProps.msScrollbarFaceColor

msScrollbarHighlightColor?

optional msScrollbarHighlightColor?: MsScrollbarHighlightColor;

Syntax: <color>

Initial value: ThreeDHighlight

Inherited from

KeywordProps.msScrollbarHighlightColor

msScrollbarShadowColor?

optional msScrollbarShadowColor?: MsScrollbarShadowColor;

Syntax: <color>

Initial value: ThreeDDarkShadow

Inherited from

KeywordProps.msScrollbarShadowColor

msScrollbarTrackColor?

optional msScrollbarTrackColor?: MsScrollbarTrackColor;

Syntax: <color>

Initial value: Scrollbar

Inherited from

KeywordProps.msScrollbarTrackColor

msScrollChaining?

optional msScrollChaining?: MsScrollChaining;

Syntax: chained | none

Initial value: chained

Inherited from

KeywordProps.msScrollChaining

msScrollLimit?

optional msScrollLimit?: MsScrollLimit;

Syntax: <'-ms-scroll-limit-x-min'> <'-ms-scroll-limit-y-min'> <'-ms-scroll-limit-x-max'> <'-ms-scroll-limit-y-max'>

Inherited from

KeywordProps.msScrollLimit

msScrollLimitXMax?

optional msScrollLimitXMax?: MsScrollLimitXMax<0 | DimensionToken>;

Syntax: auto | <length>

Initial value: auto

Inherited from

KeywordProps.msScrollLimitXMax

msScrollLimitXMin?

optional msScrollLimitXMin?: MsScrollLimitXMin<0 | DimensionToken>;

Syntax: <length>

Initial value: 0

Inherited from

KeywordProps.msScrollLimitXMin

msScrollLimitYMax?

optional msScrollLimitYMax?: MsScrollLimitYMax<0 | DimensionToken>;

Syntax: auto | <length>

Initial value: auto

Inherited from

KeywordProps.msScrollLimitYMax

msScrollLimitYMin?

optional msScrollLimitYMin?: MsScrollLimitYMin<0 | DimensionToken>;

Syntax: <length>

Initial value: 0

Inherited from

KeywordProps.msScrollLimitYMin

msScrollRails?

optional msScrollRails?: MsScrollRails;

Syntax: none | railed

Initial value: railed

Inherited from

KeywordProps.msScrollRails

msScrollSnapPointsX?

optional msScrollSnapPointsX?: MsScrollSnapPointsX;

Syntax: snapInterval( <length-percentage>, <length-percentage> ) | snapList( <length-percentage># )

Initial value: snapInterval(0px, 100%)

Inherited from

KeywordProps.msScrollSnapPointsX

msScrollSnapPointsY?

optional msScrollSnapPointsY?: MsScrollSnapPointsY;

Syntax: snapInterval( <length-percentage>, <length-percentage> ) | snapList( <length-percentage># )

Initial value: snapInterval(0px, 100%)

Inherited from

KeywordProps.msScrollSnapPointsY

msScrollSnapType?

optional msScrollSnapType?: MsScrollSnapType;

Syntax: none | proximity | mandatory

Initial value: none

Inherited from

KeywordProps.msScrollSnapType

msScrollSnapX?

optional msScrollSnapX?: MsScrollSnapX;

Syntax: <'-ms-scroll-snap-type'> <'-ms-scroll-snap-points-x'>

Inherited from

KeywordProps.msScrollSnapX

msScrollSnapY?

optional msScrollSnapY?: MsScrollSnapY;

Syntax: <'-ms-scroll-snap-type'> <'-ms-scroll-snap-points-y'>

Inherited from

KeywordProps.msScrollSnapY

msScrollTranslation?

optional msScrollTranslation?: MsScrollTranslation;

Syntax: none | vertical-to-horizontal

Initial value: none

Inherited from

KeywordProps.msScrollTranslation

msTextAutospace?

optional msTextAutospace?: MsTextAutospace;

Syntax: none | ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space

Initial value: none

Inherited from

KeywordProps.msTextAutospace

msTextCombineHorizontal?

optional msTextCombineHorizontal?: TextCombineUpright;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | all | [ digits <integer>? ]

Initial value: none

Inherited from

KeywordProps.msTextCombineHorizontal

msTextOverflow?

optional msTextOverflow?: TextOverflow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ clip | ellipsis | <string> ]{1,2}

Initial value: clip

Inherited from

KeywordProps.msTextOverflow

msTouchAction?

optional msTouchAction?: TouchAction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2019.

Syntax: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

Initial value: auto

Inherited from

KeywordProps.msTouchAction

msTouchSelect?

optional msTouchSelect?: MsTouchSelect;

Syntax: grippers | none

Initial value: grippers

Inherited from

KeywordProps.msTouchSelect

msTransform?

optional msTransform?: Transform;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <transform-list>

Initial value: none

Inherited from

KeywordProps.msTransform

msTransformOrigin?

optional msTransformOrigin?: TransformOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Initial value: 50% 50% 0

Inherited from

KeywordProps.msTransformOrigin

msTransition?

optional msTransition?: Transition<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-transition>#

Inherited from

KeywordProps.msTransition

msTransitionDelay?

optional msTransitionDelay?: TransitionDelay<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Inherited from

KeywordProps.msTransitionDelay

msTransitionDuration?

optional msTransitionDuration?: TransitionDuration<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Inherited from

KeywordProps.msTransitionDuration

msTransitionProperty?

optional msTransitionProperty?: TransitionProperty;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <single-transition-property>#

Initial value: all

Inherited from

KeywordProps.msTransitionProperty

msTransitionTimingFunction?

optional msTransitionTimingFunction?: TransitionTimingFunction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <easing-function>#

Initial value: ease

Inherited from

KeywordProps.msTransitionTimingFunction

msUserSelect?

optional msUserSelect?: MsUserSelect;

Syntax: none | element | text

Initial value: text

Inherited from

KeywordProps.msUserSelect

msWordBreak?

optional msWordBreak?: WordBreak;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: normal | break-all | keep-all | break-word | auto-phrase

Initial value: normal

Inherited from

KeywordProps.msWordBreak

msWrapFlow?

optional msWrapFlow?: MsWrapFlow;

Initial value: auto

Inherited from

KeywordProps.msWrapFlow

msWrapMargin?

optional msWrapMargin?: MsWrapMargin<0 | DimensionToken>;

Syntax: <length>

Initial value: 0

Inherited from

KeywordProps.msWrapMargin

msWrapThrough?

optional msWrapThrough?: MsWrapThrough;

Syntax: wrap | none

Initial value: wrap

Inherited from

KeywordProps.msWrapThrough

msWritingMode?

optional msWritingMode?: WritingMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Initial value: horizontal-tb

Inherited from

KeywordProps.msWritingMode

OAnimation?

optional OAnimation?: Animation<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation>#

Deprecated

Inherited from

KeywordProps.OAnimation

OAnimationDelay?

optional OAnimationDelay?: AnimationDelay<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Deprecated

Inherited from

KeywordProps.OAnimationDelay

OAnimationDirection?

optional OAnimationDirection?: AnimationDirection;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-direction>#

Initial value: normal

Deprecated

Inherited from

KeywordProps.OAnimationDirection

OAnimationDuration?

optional OAnimationDuration?: AnimationDuration<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: [ auto | <time [0s,∞]> ]#

Initial value: 0s

Deprecated

Inherited from

KeywordProps.OAnimationDuration

OAnimationFillMode?

optional OAnimationFillMode?: AnimationFillMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-fill-mode>#

Initial value: none

Deprecated

Inherited from

KeywordProps.OAnimationFillMode

OAnimationIterationCount?

optional OAnimationIterationCount?: AnimationIterationCount;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-iteration-count>#

Initial value: 1

Deprecated

Inherited from

KeywordProps.OAnimationIterationCount

OAnimationName?

optional OAnimationName?: AnimationName;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: [ none | <keyframes-name> ]#

Initial value: none

Deprecated

Inherited from

KeywordProps.OAnimationName

OAnimationPlayState?

optional OAnimationPlayState?: AnimationPlayState;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-play-state>#

Initial value: running

Deprecated

Inherited from

KeywordProps.OAnimationPlayState

OAnimationTimingFunction?

optional OAnimationTimingFunction?: AnimationTimingFunction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <easing-function>#

Initial value: ease

Deprecated

Inherited from

KeywordProps.OAnimationTimingFunction

OBackgroundSize?

optional OBackgroundSize?: BackgroundSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-size>#

Initial value: auto auto

Deprecated

Inherited from

KeywordProps.OBackgroundSize

objectFit?

optional objectFit?: ObjectFit;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: fill | contain | cover | none | scale-down

Initial value: fill

Chrome	Firefox	Safari	Edge	IE
32	36	10	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/object-fit

Inherited from

KeywordProps.objectFit

objectPosition?

optional objectPosition?: ObjectPosition<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <position>

Initial value: 50% 50%

Chrome	Firefox	Safari	Edge	IE
32	36	10	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/object-position

Inherited from

KeywordProps.objectPosition

objectViewBox?

optional objectViewBox?: ObjectViewBox;

Syntax: none | <basic-shape-rect>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
104	No	No	104	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/object-view-box

Inherited from

KeywordProps.objectViewBox

OBorderImage?

optional OBorderImage?: BorderImage;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Deprecated

Inherited from

KeywordProps.OBorderImage

offset?

optional offset?: Offset<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

Chrome	Firefox	Safari	Edge	IE
55	72	16	79	No
46 (motion)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset

Inherited from

KeywordProps.offset

offsetAnchor?

optional offsetAnchor?: OffsetAnchor<0 | DimensionToken>;

Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto | <position>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
116	72	16	116	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-anchor

Inherited from

KeywordProps.offsetAnchor

offsetBlock?

optional offsetBlock?: InsetBlock<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'top'>{1,2}

Deprecated

Inherited from

KeywordProps.offsetBlock

offsetBlockEnd?

optional offsetBlockEnd?: InsetBlockEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'top'>

Initial value: auto

Deprecated

Inherited from

KeywordProps.offsetBlockEnd

offsetBlockStart?

optional offsetBlockStart?: InsetBlockStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'top'>

Initial value: auto

Deprecated

Inherited from

KeywordProps.offsetBlockStart

offsetDistance?

optional offsetDistance?: OffsetDistance<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: <length-percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
55	72	16	79	No
46 (motion-distance)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-distance

Inherited from

KeywordProps.offsetDistance

offsetInline?

optional offsetInline?: InsetInline<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'top'>{1,2}

Deprecated

Inherited from

KeywordProps.offsetInline

offsetInlineEnd?

optional offsetInlineEnd?: InsetInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'top'>

Initial value: auto

Deprecated

Inherited from

KeywordProps.offsetInlineEnd

offsetInlineStart?

optional offsetInlineStart?: InsetInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <'top'>

Initial value: auto

Deprecated

Inherited from

KeywordProps.offsetInlineStart

offsetPath?

optional offsetPath?: OffsetPath;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | <offset-path> || <coord-box>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
55	72	15.4	79	No
46 (motion-path)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-path

Inherited from

KeywordProps.offsetPath

offsetPosition?

optional offsetPosition?: OffsetPosition<0 | DimensionToken>;

Since January 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: normal | auto | <position>

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
116	122	16	116	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-position

Inherited from

KeywordProps.offsetPosition

offsetRotate?

optional offsetRotate?: OffsetRotate;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: [ auto | reverse ] || <angle>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
56	72	16	79	No
46 (motion-rotation)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-rotate

Inherited from

KeywordProps.offsetRotate

offsetRotation?

optional offsetRotation?: OffsetRotate;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: [ auto | reverse ] || <angle>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
56	72	16	79	No
46 (motion-rotation)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/offset-rotate

Inherited from

KeywordProps.offsetRotation

OObjectFit?

optional OObjectFit?: ObjectFit;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: fill | contain | cover | none | scale-down

Initial value: fill

Deprecated

Inherited from

KeywordProps.OObjectFit

OObjectPosition?

optional OObjectPosition?: ObjectPosition<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <position>

Initial value: 50% 50%

Deprecated

Inherited from

KeywordProps.OObjectPosition

opacity?

optional opacity?: Numeric;

Inherited from

TokenMappedProps.opacity

order?

optional order?: Numeric;

Inherited from

TokenMappedProps.order

orphans?

optional orphans?: Orphans;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <integer>

Initial value: 2

Chrome	Firefox	Safari	Edge	IE
25	No	1.3	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/orphans

Inherited from

KeywordProps.orphans

OTabSize?

optional OTabSize?: TabSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.

Syntax: <integer> | <length>

Initial value: 8

Deprecated

Inherited from

KeywordProps.OTabSize

OTextOverflow?

optional OTextOverflow?: TextOverflow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ clip | ellipsis | <string> ]{1,2}

Initial value: clip

Deprecated

Inherited from

KeywordProps.OTextOverflow

OTransform?

optional OTransform?: Transform;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <transform-list>

Initial value: none

Deprecated

Inherited from

KeywordProps.OTransform

OTransformOrigin?

optional OTransformOrigin?: TransformOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Initial value: 50% 50% 0

Deprecated

Inherited from

KeywordProps.OTransformOrigin

OTransition?

optional OTransition?: Transition<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-transition>#

Deprecated

Inherited from

KeywordProps.OTransition

OTransitionDelay?

optional OTransitionDelay?: TransitionDelay<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Deprecated

Inherited from

KeywordProps.OTransitionDelay

OTransitionDuration?

optional OTransitionDuration?: TransitionDuration<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Deprecated

Inherited from

KeywordProps.OTransitionDuration

OTransitionProperty?

optional OTransitionProperty?: TransitionProperty;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <single-transition-property>#

Initial value: all

Deprecated

Inherited from

KeywordProps.OTransitionProperty

OTransitionTimingFunction?

optional OTransitionTimingFunction?: TransitionTimingFunction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <easing-function>#

Initial value: ease

Deprecated

Inherited from

KeywordProps.OTransitionTimingFunction

outline?

optional outline?: Outline<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.

Syntax: <'outline-width'> || <'outline-style'> || <'outline-color'>

Chrome	Firefox	Safari	Edge	IE
94	88	16.4	94	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/outline

Inherited from

KeywordProps.outline

outlineColor?

optional outlineColor?: ColorLike;

Inherited from

TokenMappedProps.outlineColor

outlineOffset?

optional outlineOffset?: Size;

Inherited from

TokenMappedProps.outlineOffset

outlineStyle?

optional outlineStyle?: OutlineStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: auto | <outline-line-style>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1.5	1.2	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/outline-style

Inherited from

KeywordProps.outlineStyle

outlineWidth?

optional outlineWidth?: LineWidth;

Inherited from

TokenMappedProps.outlineWidth

overflow?

optional overflow?: Overflow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ visible | hidden | clip | scroll | auto ]{1,2}

Initial value: visible

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow

Inherited from

KeywordProps.overflow

overflowAnchor?

optional overflowAnchor?: OverflowAnchor;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
56	66	preview	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-anchor

Inherited from

KeywordProps.overflowAnchor

overflowBlock?

optional overflowBlock?: OverflowBlock;

Since September 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: visible | hidden | clip | scroll | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
135	69	26	135	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-block

Inherited from

KeywordProps.overflowBlock

overflowClipBox?

optional overflowClipBox?: OverflowClipBox;

Syntax: padding-box | content-box

Initial value: padding-box

Inherited from

KeywordProps.overflowClipBox

overflowClipMargin?

optional overflowClipMargin?: OverflowClipMargin<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <visual-box> || <length [0,∞]>

Initial value: 0px

Chrome	Firefox	Safari	Edge	IE
90	102	No	90	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-clip-margin

Inherited from

KeywordProps.overflowClipMargin

overflowInline?

optional overflowInline?: OverflowInline;

Since September 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: visible | hidden | clip | scroll | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
135	69	26	135	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-inline

Inherited from

KeywordProps.overflowInline

overflowWrap?

optional overflowWrap?: OverflowWrap;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

Syntax: normal | break-word | anywhere

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
23	49	7	18	5.5 (word-wrap)
1 (word-wrap)	3.5 (word-wrap)	1 (word-wrap)	12 (word-wrap)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-wrap

Inherited from

KeywordProps.overflowWrap

overflowX?

optional overflowX?: OverflowX;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: visible | hidden | clip | scroll | auto

Initial value: visible

Chrome	Firefox	Safari	Edge	IE
1	3.5	3	12	5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-x

Inherited from

KeywordProps.overflowX

overflowY?

optional overflowY?: OverflowY;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: visible | hidden | clip | scroll | auto

Initial value: visible

Chrome	Firefox	Safari	Edge	IE
1	3.5	3	12	5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overflow-y

Inherited from

KeywordProps.overflowY

overlay?

optional overlay?: Overlay;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | auto

Initial value: none

Chrome	Firefox	Safari	Edge	IE
117	No	No	117	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overlay

Inherited from

KeywordProps.overlay

overscrollBehavior?

optional overscrollBehavior?: OverscrollBehavior;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: [ contain | none | auto ]{1,2}

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
63	59	16	18	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overscroll-behavior

Inherited from

KeywordProps.overscrollBehavior

overscrollBehaviorBlock?

optional overscrollBehaviorBlock?: OverscrollBehaviorBlock;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: contain | none | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
77	73	16	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overscroll-behavior-block

Inherited from

KeywordProps.overscrollBehaviorBlock

overscrollBehaviorInline?

optional overscrollBehaviorInline?: OverscrollBehaviorInline;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: contain | none | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
77	73	16	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overscroll-behavior-inline

Inherited from

KeywordProps.overscrollBehaviorInline

overscrollBehaviorX?

optional overscrollBehaviorX?: OverscrollBehaviorX;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: contain | none | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
63	59	16	18	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overscroll-behavior-x

Inherited from

KeywordProps.overscrollBehaviorX

overscrollBehaviorY?

optional overscrollBehaviorY?: OverscrollBehaviorY;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Syntax: contain | none | auto

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
63	59	16	18	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/overscroll-behavior-y

Inherited from

KeywordProps.overscrollBehaviorY

padding?

optional padding?: Size | Repeat1to4<PadItem>;

Inherited from

TokenMappedProps.padding

paddingBlock?

optional paddingBlock?: Size | readonly [PadItem, PadItem];

Inherited from

TokenMappedProps.paddingBlock

paddingBlockEnd?

optional paddingBlockEnd?: Size;

Inherited from

TokenMappedProps.paddingBlockEnd

paddingBlockStart?

optional paddingBlockStart?: Size;

Inherited from

TokenMappedProps.paddingBlockStart

paddingBottom?

optional paddingBottom?: Size;

Inherited from

TokenMappedProps.paddingBottom

paddingInline?

optional paddingInline?: Size | readonly [PadItem, PadItem];

Inherited from

TokenMappedProps.paddingInline

paddingInlineEnd?

optional paddingInlineEnd?: Size;

Inherited from

TokenMappedProps.paddingInlineEnd

paddingInlineStart?

optional paddingInlineStart?: Size;

Inherited from

TokenMappedProps.paddingInlineStart

paddingLeft?

optional paddingLeft?: Size;

Inherited from

TokenMappedProps.paddingLeft

paddingRight?

optional paddingRight?: Size;

Inherited from

TokenMappedProps.paddingRight

paddingTop?

optional paddingTop?: Size;

Inherited from

TokenMappedProps.paddingTop

page?

optional page?: Page;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2023.

Syntax: auto | <custom-ident>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
85	110	1	85	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/page

Inherited from

KeywordProps.page

pageBreakAfter?

optional pageBreakAfter?: PageBreakAfter;

The page-break-after CSS property adjusts page breaks after the current element.

Initial value: auto

Deprecated

Inherited from

KeywordProps.pageBreakAfter

pageBreakBefore?

optional pageBreakBefore?: PageBreakBefore;

The page-break-before CSS property adjusts page breaks before the current element.

Initial value: auto

Deprecated

Inherited from

KeywordProps.pageBreakBefore

pageBreakInside?

optional pageBreakInside?: PageBreakInside;

The page-break-inside CSS property adjusts page breaks inside the current element.

Syntax: auto | avoid

Initial value: auto

Deprecated

Inherited from

KeywordProps.pageBreakInside

paintOrder?

optional paintOrder?: PaintOrder;

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: normal | [ fill || stroke || markers ]

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
123	60	11	123	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/paint-order

Inherited from

KeywordProps.paintOrder

perspective?

optional perspective?: Perspective<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <length>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
36	16	9	12	10
12 -x-	10 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/perspective

Inherited from

KeywordProps.perspective

perspectiveOrigin?

optional perspectiveOrigin?: PerspectiveOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <position>

Initial value: 50% 50%

Chrome	Firefox	Safari	Edge	IE
36	16	9	12	10
12 -x-	10 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/perspective-origin

Inherited from

KeywordProps.perspectiveOrigin

placeContent?

optional placeContent?: PlaceContent;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'align-content'> <'justify-content'>?

Chrome	Firefox	Safari	Edge	IE
59	45	9	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/place-content

Inherited from

KeywordProps.placeContent

placeItems?

optional placeItems?: PlaceItems;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'align-items'> <'justify-items'>?

Chrome	Firefox	Safari	Edge	IE
59	45	11	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/place-items

Inherited from

KeywordProps.placeItems

placeSelf?

optional placeSelf?: PlaceSelf;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'align-self'> <'justify-self'>?

Chrome	Firefox	Safari	Edge	IE
59	45	11	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/place-self

Inherited from

KeywordProps.placeSelf

pointerEvents?

optional pointerEvents?: PointerEvents;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	12	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/pointer-events

Inherited from

KeywordProps.pointerEvents

position?

optional position?: Position;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: static | relative | absolute | sticky | fixed

Initial value: static

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/position

Inherited from

KeywordProps.position

positionAnchor?

optional positionAnchor?: PositionAnchor;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | <anchor-name>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
125	preview	26	125	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/position-anchor

Inherited from

KeywordProps.positionAnchor

positionArea?

optional positionArea?: PositionArea;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <position-area>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
129	preview	26	129	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/position-area

Inherited from

KeywordProps.positionArea

positionTry?

optional positionTry?: PositionTry;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <'position-try-order'>? <'position-try-fallbacks'>

Chrome	Firefox	Safari	Edge	IE
125	preview	26	125	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/position-try

Inherited from

KeywordProps.positionTry

positionTryFallbacks?

optional positionTryFallbacks?: PositionTryFallbacks;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | [ [<dashed-ident> || <try-tactic>] | <'position-area'> ]#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
128	preview	26	128	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/position-try-fallbacks

Inherited from

KeywordProps.positionTryFallbacks

positionTryOptions?

optional positionTryOptions?: PositionTryFallbacks;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | [ [<dashed-ident> || <try-tactic>] | <'position-area'> ]#

Initial value: none

Deprecated

Inherited from

KeywordProps.positionTryOptions

positionTryOrder?

optional positionTryOrder?: PositionTryOrder;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | <try-size>

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
125	No	26	125	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/position-try-order

Inherited from

KeywordProps.positionTryOrder

positionVisibility?

optional positionVisibility?: PositionVisibility;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: always | [ anchors-valid || anchors-visible || no-overflow ]

Initial value: anchors-visible

Chrome	Firefox	Safari	Edge	IE
125	preview	No	125	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/position-visibility

Inherited from

KeywordProps.positionVisibility

printColorAdjust?

optional printColorAdjust?: PrintColorAdjust;

Since May 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: economy | exact

Initial value: economy

Chrome	Firefox	Safari	Edge	IE
136	97	15.4	136	No
17 -x-	48 (color-adjust)	6 -x-	79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/print-color-adjust

Inherited from

KeywordProps.printColorAdjust

quotes?

optional quotes?: Quotes;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | auto | [ <string> <string> ]+

Initial value: depends on user agent

Chrome	Firefox	Safari	Edge	IE
11	1.5	9	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/quotes

Inherited from

KeywordProps.quotes

r?

optional r?: R<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: <length> | <percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
43	69	9	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/r

Inherited from

KeywordProps.r

resize?

optional resize?: Resize;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	4	3	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/resize

Inherited from

KeywordProps.resize

right?

optional right?: SizeAuto;

Inherited from

TokenMappedProps.right

rotate?

optional rotate?: Rotate;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

Syntax: none | <angle> | [ x | y | z | <number>{3} ] && <angle>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
104	72	14.1	104	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/rotate

Inherited from

KeywordProps.rotate

rowGap?

optional rowGap?: Size;

Inherited from

TokenMappedProps.rowGap

rubyAlign?

optional rubyAlign?: RubyAlign;

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: start | center | space-between | space-around

Initial value: space-around

Chrome	Firefox	Safari	Edge	IE
128	38	18.2	128	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/ruby-align

Inherited from

KeywordProps.rubyAlign

rubyMerge?

optional rubyMerge?: RubyMerge;

Syntax: separate | collapse | auto

Initial value: separate

Inherited from

KeywordProps.rubyMerge

rubyOverhang?

optional rubyOverhang?: RubyOverhang;

Syntax: auto | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
No	No	18.2	No	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/ruby-overhang

Inherited from

KeywordProps.rubyOverhang

rubyPosition?

optional rubyPosition?: RubyPosition;

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: [ alternate || [ over | under ] ] | inter-character

Initial value: alternate

Chrome	Firefox	Safari	Edge	IE
84	38	18.2	12-79	No
1 -x-		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/ruby-position

Inherited from

KeywordProps.rubyPosition

rx?

optional rx?: Rx<0 | DimensionToken>;

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <length> | <percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
43	69	17.4	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/rx

Inherited from

KeywordProps.rx

ry?

optional ry?: Ry<0 | DimensionToken>;

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <length> | <percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
43	69	17.4	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/ry

Inherited from

KeywordProps.ry

scale?

optional scale?: Scale;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

Syntax: none | [ <number> | <percentage> ]{1,3}

Initial value: none

Chrome	Firefox	Safari	Edge	IE
104	72	14.1	104	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scale

Inherited from

KeywordProps.scale

scrollbarColor?

optional scrollbarColor?: ScrollbarColor;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | <color>{2}

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
121	64	No	121	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scrollbar-color

Inherited from

KeywordProps.scrollbarColor

scrollbarGutter?

optional scrollbarGutter?: ScrollbarGutter;

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto | stable && both-edges?

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
94	97	18.2	94	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scrollbar-gutter

Inherited from

KeywordProps.scrollbarGutter

scrollbarWidth?

optional scrollbarWidth?: ScrollbarWidth;

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto | thin | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
121	64	18.2	121	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scrollbar-width

Inherited from

KeywordProps.scrollbarWidth

scrollBehavior?

optional scrollBehavior?: ScrollBehavior;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: auto | smooth

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
61	36	15.4	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-behavior

Inherited from

KeywordProps.scrollBehavior

scrollInitialTarget?

optional scrollInitialTarget?: ScrollInitialTarget;

Syntax: none | nearest

Initial value: none

Chrome	Firefox	Safari	Edge	IE
133	No	No	133	No

Inherited from

KeywordProps.scrollInitialTarget

scrollMargin?

optional scrollMargin?: ScrollMargin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2021.

Syntax: <length>{1,4}

Chrome	Firefox	Safari	Edge	IE
69	90	14.1	79	No
		11 (scroll-snap-margin)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin

Inherited from

KeywordProps.scrollMargin

scrollMarginBlock?

optional scrollMarginBlock?: ScrollMarginBlock<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <length>{1,2}

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-block

Inherited from

KeywordProps.scrollMarginBlock

scrollMarginBlockEnd?

optional scrollMarginBlockEnd?: ScrollMarginBlockEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-block-end

Inherited from

KeywordProps.scrollMarginBlockEnd

scrollMarginBlockStart?

optional scrollMarginBlockStart?: ScrollMarginBlockStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-block-start

Inherited from

KeywordProps.scrollMarginBlockStart

scrollMarginBottom?

optional scrollMarginBottom?: ScrollMarginBottom<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-bottom)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-bottom

Inherited from

KeywordProps.scrollMarginBottom

scrollMarginInline?

optional scrollMarginInline?: ScrollMarginInline<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <length>{1,2}

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-inline

Inherited from

KeywordProps.scrollMarginInline

scrollMarginInlineEnd?

optional scrollMarginInlineEnd?: ScrollMarginInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-inline-end

Inherited from

KeywordProps.scrollMarginInlineEnd

scrollMarginInlineStart?

optional scrollMarginInlineStart?: ScrollMarginInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-inline-start

Inherited from

KeywordProps.scrollMarginInlineStart

scrollMarginLeft?

optional scrollMarginLeft?: ScrollMarginLeft<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-left)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-left

Inherited from

KeywordProps.scrollMarginLeft

scrollMarginRight?

optional scrollMarginRight?: ScrollMarginRight<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-right)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-right

Inherited from

KeywordProps.scrollMarginRight

scrollMarginTop?

optional scrollMarginTop?: ScrollMarginTop<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-top)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-top

Inherited from

KeywordProps.scrollMarginTop

scrollPadding?

optional scrollPadding?: ScrollPadding<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: [ auto | <length-percentage> ]{1,4}

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding

Inherited from

KeywordProps.scrollPadding

scrollPaddingBlock?

optional scrollPaddingBlock?: ScrollPaddingBlock<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: [ auto | <length-percentage> ]{1,2}

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-block

Inherited from

KeywordProps.scrollPaddingBlock

scrollPaddingBlockEnd?

optional scrollPaddingBlockEnd?: ScrollPaddingBlockEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-block-end

Inherited from

KeywordProps.scrollPaddingBlockEnd

scrollPaddingBlockStart?

optional scrollPaddingBlockStart?: ScrollPaddingBlockStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-block-start

Inherited from

KeywordProps.scrollPaddingBlockStart

scrollPaddingBottom?

optional scrollPaddingBottom?: ScrollPaddingBottom<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-bottom

Inherited from

KeywordProps.scrollPaddingBottom

scrollPaddingInline?

optional scrollPaddingInline?: ScrollPaddingInline<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: [ auto | <length-percentage> ]{1,2}

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-inline

Inherited from

KeywordProps.scrollPaddingInline

scrollPaddingInlineEnd?

optional scrollPaddingInlineEnd?: ScrollPaddingInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-inline-end

Inherited from

KeywordProps.scrollPaddingInlineEnd

scrollPaddingInlineStart?

optional scrollPaddingInlineStart?: ScrollPaddingInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-inline-start

Inherited from

KeywordProps.scrollPaddingInlineStart

scrollPaddingLeft?

optional scrollPaddingLeft?: ScrollPaddingLeft<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-left

Inherited from

KeywordProps.scrollPaddingLeft

scrollPaddingRight?

optional scrollPaddingRight?: ScrollPaddingRight<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-right

Inherited from

KeywordProps.scrollPaddingRight

scrollPaddingTop?

optional scrollPaddingTop?: ScrollPaddingTop<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: auto | <length-percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-padding-top

Inherited from

KeywordProps.scrollPaddingTop

scrollSnapAlign?

optional scrollSnapAlign?: ScrollSnapAlign;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: [ none | start | end | center ]{1,2}

Initial value: none

Chrome	Firefox	Safari	Edge	IE
69	68	11	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-snap-align

Inherited from

KeywordProps.scrollSnapAlign

scrollSnapCoordinate?

optional scrollSnapCoordinate?: ScrollSnapCoordinate<0 | DimensionToken>;

Syntax: none | <position>#

Initial value: none

Deprecated

Inherited from

KeywordProps.scrollSnapCoordinate

scrollSnapDestination?

optional scrollSnapDestination?: ScrollSnapDestination<0 | DimensionToken>;

Syntax: <position>

Initial value: 0px 0px

Deprecated

Inherited from

KeywordProps.scrollSnapDestination

scrollSnapMargin?

optional scrollSnapMargin?: ScrollMargin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2021.

Syntax: <length>{1,4}

Chrome	Firefox	Safari	Edge	IE
69	68-90	14.1	79	No
		11 (scroll-snap-margin)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin

Inherited from

KeywordProps.scrollSnapMargin

scrollSnapMarginBottom?

optional scrollSnapMarginBottom?: ScrollMarginBottom<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-bottom)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-bottom

Inherited from

KeywordProps.scrollSnapMarginBottom

scrollSnapMarginLeft?

optional scrollSnapMarginLeft?: ScrollMarginLeft<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-left)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-left

Inherited from

KeywordProps.scrollSnapMarginLeft

scrollSnapMarginRight?

optional scrollSnapMarginRight?: ScrollMarginRight<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-right)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-right

Inherited from

KeywordProps.scrollSnapMarginRight

scrollSnapMarginTop?

optional scrollSnapMarginTop?: ScrollMarginTop<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

Syntax: <length>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
69	68	14.1	79	No
		11 (scroll-snap-margin-top)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-margin-top

Inherited from

KeywordProps.scrollSnapMarginTop

scrollSnapPointsX?

optional scrollSnapPointsX?: ScrollSnapPointsX;

Syntax: none | repeat( <length-percentage> )

Initial value: none

Deprecated

Inherited from

KeywordProps.scrollSnapPointsX

scrollSnapPointsY?

optional scrollSnapPointsY?: ScrollSnapPointsY;

Syntax: none | repeat( <length-percentage> )

Initial value: none

Deprecated

Inherited from

KeywordProps.scrollSnapPointsY

scrollSnapStop?

optional scrollSnapStop?: ScrollSnapStop;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2022.

Syntax: normal | always

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
75	103	15	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-snap-stop

Inherited from

KeywordProps.scrollSnapStop

scrollSnapType?

optional scrollSnapType?: ScrollSnapType;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2022.

Initial value: none

Chrome	Firefox	Safari	Edge	IE
69	39-68	11	79	10 -x-
		9 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-snap-type

Inherited from

KeywordProps.scrollSnapType

scrollSnapTypeX?

optional scrollSnapTypeX?: ScrollSnapTypeX;

Syntax: none | mandatory | proximity

Initial value: none

Deprecated

Inherited from

KeywordProps.scrollSnapTypeX

scrollSnapTypeY?

optional scrollSnapTypeY?: ScrollSnapTypeY;

Syntax: none | mandatory | proximity

Initial value: none

Deprecated

Inherited from

KeywordProps.scrollSnapTypeY

scrollTimeline?

optional scrollTimeline?: ScrollTimeline;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-timeline

Inherited from

KeywordProps.scrollTimeline

scrollTimelineAxis?

optional scrollTimelineAxis?: ScrollTimelineAxis;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ block | inline | x | y ]#

Initial value: block

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-timeline-axis

Inherited from

KeywordProps.scrollTimelineAxis

scrollTimelineName?

optional scrollTimelineName?: ScrollTimelineName;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ none | <dashed-ident> ]#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/scroll-timeline-name

Inherited from

KeywordProps.scrollTimelineName

shapeImageThreshold?

optional shapeImageThreshold?: ShapeImageThreshold;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <opacity-value>

Initial value: 0.0

Chrome	Firefox	Safari	Edge	IE
37	62	10.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/shape-image-threshold

Inherited from

KeywordProps.shapeImageThreshold

shapeMargin?

optional shapeMargin?: ShapeMargin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <length-percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
37	62	10.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/shape-margin

Inherited from

KeywordProps.shapeMargin

shapeOutside?

optional shapeOutside?: ShapeOutside;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: none | [ <shape-box> || <basic-shape> ] | <image>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
37	62	10.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/shape-outside

Inherited from

KeywordProps.shapeOutside

shapeRendering?

optional shapeRendering?: ShapeRendering;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | optimizeSpeed | crispEdges | geometricPrecision

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
1	3	4	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/shape-rendering

Inherited from

KeywordProps.shapeRendering

speakAs?

optional speakAs?: SpeakAs;

Syntax: normal | spell-out || digits || [ literal-punctuation | no-punctuation ]

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
No	No	11.1	No	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/speak-as

Inherited from

KeywordProps.speakAs

stopColor?

optional stopColor?: StopColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <'color'>

Initial value: black

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stop-color

Inherited from

KeywordProps.stopColor

stopOpacity?

optional stopOpacity?: StopOpacity;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <'opacity'>

Initial value: black

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stop-opacity

Inherited from

KeywordProps.stopOpacity

stroke?

optional stroke?: ColorLike;

Inherited from

TokenMappedProps.stroke

strokeColor?

optional strokeColor?: StrokeColor;

Syntax: <color>

Initial value: transparent

Chrome	Firefox	Safari	Edge	IE
No	No	11.1	No	No

Inherited from

KeywordProps.strokeColor

strokeDasharray?

optional strokeDasharray?: StrokeDasharray<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: none | <dasharray>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stroke-dasharray

Inherited from

KeywordProps.strokeDasharray

strokeDashoffset?

optional strokeDashoffset?: StrokeDashoffset<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <length-percentage> | <number>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stroke-dashoffset

Inherited from

KeywordProps.strokeDashoffset

strokeLinecap?

optional strokeLinecap?: StrokeLinecap;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: butt | round | square

Initial value: butt

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stroke-linecap

Inherited from

KeywordProps.strokeLinecap

strokeLinejoin?

optional strokeLinejoin?: StrokeLinejoin;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: miter | miter-clip | round | bevel | arcs

Initial value: miter

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stroke-linejoin

Inherited from

KeywordProps.strokeLinejoin

strokeMiterlimit?

optional strokeMiterlimit?: StrokeMiterlimit;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <number>

Initial value: 4

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stroke-miterlimit

Inherited from

KeywordProps.strokeMiterlimit

strokeOpacity?

optional strokeOpacity?: StrokeOpacity;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <'opacity'>

Initial value: 1

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stroke-opacity

Inherited from

KeywordProps.strokeOpacity

strokeWidth?

optional strokeWidth?: StrokeWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <length-percentage> | <number>

Initial value: 1px

Chrome	Firefox	Safari	Edge	IE
1	1.5	4	≤15	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/stroke-width

Inherited from

KeywordProps.strokeWidth

tableLayout?

optional tableLayout?: TableLayout;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: auto | fixed

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
14	1	1	12	5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/table-layout

Inherited from

KeywordProps.tableLayout

tabSize?

optional tabSize?: TabSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.

Syntax: <integer> | <length>

Initial value: 8

Chrome	Firefox	Safari	Edge	IE
21	91	7	79	No
	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/tab-size

Inherited from

KeywordProps.tabSize

textAlign?

optional textAlign?: TextAlign;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Initial value: start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	3

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-align

Inherited from

KeywordProps.textAlign

textAlignLast?

optional textAlignLast?: TextAlignLast;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
47	49	16	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-align-last

Inherited from

KeywordProps.textAlignLast

textAnchor?

optional textAnchor?: TextAnchor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2016.

Syntax: start | middle | end

Initial value: start

Chrome	Firefox	Safari	Edge	IE
1	3	4	≤14	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-anchor

Inherited from

KeywordProps.textAnchor

textAutospace?

optional textAutospace?: TextAutospace;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | <autospace> | auto

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
140	145	18.4	140	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-autospace

Inherited from

KeywordProps.textAutospace

textBox?

optional textBox?: TextBox;

Syntax: normal | <'text-box-trim'> || <'text-box-edge'>

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
133	No	18.2	133	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-box

Inherited from

KeywordProps.textBox

textBoxEdge?

optional textBoxEdge?: TextBoxEdge;

Syntax: auto | <text-edge>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
133	No	18.2	133	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-box-edge

Inherited from

KeywordProps.textBoxEdge

textBoxTrim?

optional textBoxTrim?: TextBoxTrim;

Syntax: none | trim-start | trim-end | trim-both

Initial value: none

Chrome	Firefox	Safari	Edge	IE
133	No	18.2	133	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-box-trim

Inherited from

KeywordProps.textBoxTrim

textCombineUpright?

optional textCombineUpright?: TextCombineUpright;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | all | [ digits <integer>? ]

Initial value: none

Chrome	Firefox	Safari	Edge	IE
48	48	15.4	79	11 (-ms-text-combine-horizontal)
9 (-webkit-text-combine)		5.1 (-webkit-text-combine)

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-combine-upright

Inherited from

KeywordProps.textCombineUpright

textDecoration?

optional textDecoration?: TextDecoration<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	3

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-decoration

Inherited from

KeywordProps.textDecoration

textDecorationColor?

optional textDecorationColor?: ColorLike;

Inherited from

TokenMappedProps.textDecorationColor

textDecorationLine?

optional textDecorationLine?: TextDecorationLine;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

Initial value: none

Chrome	Firefox	Safari	Edge	IE
57	36	12.1	79	No
		8 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-decoration-line

Inherited from

KeywordProps.textDecorationLine

textDecorationSkip?

optional textDecorationSkip?: TextDecorationSkip;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

Initial value: objects

Chrome	Firefox	Safari	Edge	IE
57-64	No	12.1	No	No
		7 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-decoration-skip

Inherited from

KeywordProps.textDecorationSkip

textDecorationSkipInk?

optional textDecorationSkipInk?: TextDecorationSkipInk;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: auto | all | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
64	70	15.4	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-decoration-skip-ink

Inherited from

KeywordProps.textDecorationSkipInk

textDecorationStyle?

optional textDecorationStyle?: TextDecorationStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: solid | double | dotted | dashed | wavy

Initial value: solid

Chrome	Firefox	Safari	Edge	IE
57	36	12.1	79	No
		8 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-decoration-style

Inherited from

KeywordProps.textDecorationStyle

textDecorationThickness?

optional textDecorationThickness?: TextDecorationThickness<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2021.

Syntax: auto | from-font | <length> | <percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
89	70	12.1	89	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-decoration-thickness

Inherited from

KeywordProps.textDecorationThickness

textEmphasis?

optional textEmphasis?: TextEmphasis;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: <'text-emphasis-style'> || <'text-emphasis-color'>

Chrome	Firefox	Safari	Edge	IE
99	46	7	99	No
25 -x-			79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-emphasis

Inherited from

KeywordProps.textEmphasis

textEmphasisColor?

optional textEmphasisColor?: TextEmphasisColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: <color>

Initial value: currentcolor

Chrome	Firefox	Safari	Edge	IE
99	46	7	99	No
25 -x-			79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-emphasis-color

Inherited from

KeywordProps.textEmphasisColor

textEmphasisPosition?

optional textEmphasisPosition?: TextEmphasisPosition;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: auto | [ over | under ] && [ right | left ]?

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
99	46	7	99	No
25 -x-			79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-emphasis-position

Inherited from

KeywordProps.textEmphasisPosition

textEmphasisStyle?

optional textEmphasisStyle?: TextEmphasisStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
99	46	7	99	No
25 -x-			79 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-emphasis-style

Inherited from

KeywordProps.textEmphasisStyle

textIndent?

optional textIndent?: Size;

Inherited from

TokenMappedProps.textIndent

textJustify?

optional textJustify?: TextJustify;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | inter-character | inter-word | none

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
No	55	No	12-79	11

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-justify

Inherited from

KeywordProps.textJustify

textOrientation?

optional textOrientation?: TextOrientation;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Syntax: mixed | upright | sideways

Initial value: mixed

Chrome	Firefox	Safari	Edge	IE
48	41	14	79	No
12 -x-		5.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-orientation

Inherited from

KeywordProps.textOrientation

textOverflow?

optional textOverflow?: TextOverflow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ clip | ellipsis | <string> ]{1,2}

Initial value: clip

Chrome	Firefox	Safari	Edge	IE
1	7	1.3	12	6

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-overflow

Inherited from

KeywordProps.textOverflow

textRendering?

optional textRendering?: TextRendering;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
4	1	5	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-rendering

Inherited from

KeywordProps.textRendering

textShadow?

optional textShadow?: ShadowLike;

Inherited from

TokenMappedProps.textShadow

textSizeAdjust?

optional textSizeAdjust?: TextSizeAdjust;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | auto | <percentage>

Initial value: auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).

Chrome	Firefox	Safari	Edge	IE
54	No	No	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-size-adjust

Inherited from

KeywordProps.textSizeAdjust

textSpacingTrim?

optional textSpacingTrim?: TextSpacingTrim;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: space-all | normal | space-first | trim-start

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
123	No	No	123	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-spacing-trim

Inherited from

KeywordProps.textSpacingTrim

textTransform?

optional textTransform?: TextTransform;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: none | [ capitalize | uppercase | lowercase ] || full-width || full-size-kana | math-auto

Initial value: none

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-transform

Inherited from

KeywordProps.textTransform

textUnderlineOffset?

optional textUnderlineOffset?: TextUnderlineOffset<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.

Syntax: auto | <length> | <percentage>

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
87	70	12.1	87	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-underline-offset

Inherited from

KeywordProps.textUnderlineOffset

textUnderlinePosition?

optional textUnderlinePosition?: TextUnderlinePosition;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: auto | from-font | [ under || [ left | right ] ]

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
33	74	12.1	12	6
		9 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-underline-position

Inherited from

KeywordProps.textUnderlinePosition

textWrap?

optional textWrap?: TextWrap;

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <'text-wrap-mode'> || <'text-wrap-style'>

Initial value: wrap

Chrome	Firefox	Safari	Edge	IE
114	121	17.4	114	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-wrap

Inherited from

KeywordProps.textWrap

textWrapMode?

optional textWrapMode?: TextWrapMode;

Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: wrap | nowrap

Initial value: wrap

Chrome	Firefox	Safari	Edge	IE
130	124	17.4	130	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-wrap-mode

Inherited from

KeywordProps.textWrapMode

textWrapStyle?

optional textWrapStyle?: TextWrapStyle;

Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto | balance | stable | pretty

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
130	124	17.5	130	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/text-wrap-style

Inherited from

KeywordProps.textWrapStyle

timelineScope?

optional timelineScope?: TimelineScope;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <dashed-ident>#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
116	No	26	116	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/timeline-scope

Inherited from

KeywordProps.timelineScope

top?

optional top?: SizeAuto;

Inherited from

TokenMappedProps.top

touchAction?

optional touchAction?: TouchAction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2019.

Syntax: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
36	52	13	12	11
				10 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/touch-action

Inherited from

KeywordProps.touchAction

transform?

optional transform?: Transform;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <transform-list>

Initial value: none

Chrome	Firefox	Safari	Edge	IE
36	16	9	12	10
1 -x-	3.5 -x-	3.1 -x-		9 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transform

Inherited from

KeywordProps.transform

transformBox?

optional transformBox?: TransformBox;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: content-box | border-box | fill-box | stroke-box | view-box

Initial value: view-box

Chrome	Firefox	Safari	Edge	IE
64	55	11	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transform-box

Inherited from

KeywordProps.transformBox

transformOrigin?

optional transformOrigin?: TransformOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Initial value: 50% 50% 0

Chrome	Firefox	Safari	Edge	IE
36	16	9	12	10
1 -x-	3.5 -x-	2 -x-		9 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transform-origin

Inherited from

KeywordProps.transformOrigin

transformStyle?

optional transformStyle?: TransformStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: flat | preserve-3d

Initial value: flat

Chrome	Firefox	Safari	Edge	IE
36	16	9	12	No
12 -x-	10 -x-	4 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transform-style

Inherited from

KeywordProps.transformStyle

transition?

optional transition?: Transition<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-transition>#

Chrome	Firefox	Safari	Edge	IE
26	16	9	12	10
1 -x-		3.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transition

Inherited from

KeywordProps.transition

transitionBehavior?

optional transitionBehavior?: TransitionBehavior;

Since August 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <transition-behavior-value>#

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
117	129	17.4	117	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transition-behavior

Inherited from

KeywordProps.transitionBehavior

transitionDelay?

optional transitionDelay?: DurationToken | Wide;

Inherited from

TokenMappedProps.transitionDelay

transitionDuration?

optional transitionDuration?: DurationToken | Wide;

Inherited from

TokenMappedProps.transitionDuration

transitionProperty?

optional transitionProperty?: TransitionProperty;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <single-transition-property>#

Initial value: all

Chrome	Firefox	Safari	Edge	IE
26	16	9	12	10
1 -x-		3.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transition-property

Inherited from

KeywordProps.transitionProperty

transitionTimingFunction?

optional transitionTimingFunction?: Easing;

Inherited from

TokenMappedProps.transitionTimingFunction

translate?

optional translate?: Translate<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2022.

Syntax: none | <length-percentage> [ <length-percentage> <length>? ]?

Initial value: none

Chrome	Firefox	Safari	Edge	IE
104	72	14.1	104	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/translate

Inherited from

KeywordProps.translate

unicodeBidi?

optional unicodeBidi?: UnicodeBidi;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
2	1	1.3	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/unicode-bidi

Inherited from

KeywordProps.unicodeBidi

userSelect?

optional userSelect?: UserSelect;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | text | none | all

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
54	69	3 -x-	79	10 -x-
1 -x-	1 -x-		12 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/user-select

Inherited from

KeywordProps.userSelect

vectorEffect?

optional vectorEffect?: VectorEffect;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position

Initial value: none

Chrome	Firefox	Safari	Edge	IE
6	15	5.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/vector-effect

Inherited from

KeywordProps.vectorEffect

verticalAlign?

optional verticalAlign?: VerticalAlign<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Initial value: baseline

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/vertical-align

Inherited from

KeywordProps.verticalAlign

viewTimeline?

optional viewTimeline?: ViewTimeline;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/view-timeline

Inherited from

KeywordProps.viewTimeline

viewTimelineAxis?

optional viewTimelineAxis?: ViewTimelineAxis;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ block | inline | x | y ]#

Initial value: block

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/view-timeline-axis

Inherited from

KeywordProps.viewTimelineAxis

viewTimelineInset?

optional viewTimelineInset?: ViewTimelineInset<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ [ auto | <length-percentage> ]{1,2} ]#

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/view-timeline-inset

Inherited from

KeywordProps.viewTimelineInset

viewTimelineName?

optional viewTimelineName?: ViewTimelineName;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ none | <dashed-ident> ]#

Initial value: none

Chrome	Firefox	Safari	Edge	IE
115	No	26	115	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/view-timeline-name

Inherited from

KeywordProps.viewTimelineName

viewTransitionClass?

optional viewTransitionClass?: ViewTransitionClass;

Syntax: none | <custom-ident>+

Initial value: none

Chrome	Firefox	Safari	Edge	IE
125	144	18.2	125	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/view-transition-class

Inherited from

KeywordProps.viewTransitionClass

viewTransitionName?

optional viewTransitionName?: ViewTransitionName;

Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: none | <custom-ident> | match-element

Initial value: none

Chrome	Firefox	Safari	Edge	IE
111	144	18	111	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/view-transition-name

Inherited from

KeywordProps.viewTransitionName

visibility?

optional visibility?: Visibility;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: visible | hidden | collapse

Initial value: visible

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	4

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/visibility

Inherited from

KeywordProps.visibility

WebkitAlignContent?

optional WebkitAlignContent?: AlignContent;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>

Initial value: normal

Inherited from

KeywordProps.WebkitAlignContent

WebkitAlignItems?

optional WebkitAlignItems?: AlignItems;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | anchor-center

Initial value: normal

Inherited from

KeywordProps.WebkitAlignItems

WebkitAlignSelf?

optional WebkitAlignSelf?: AlignSelf;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Initial value: auto

Inherited from

KeywordProps.WebkitAlignSelf

WebkitAnimation?

optional WebkitAnimation?: Animation<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation>#

Inherited from

KeywordProps.WebkitAnimation

WebkitAnimationDelay?

optional WebkitAnimationDelay?: AnimationDelay<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Inherited from

KeywordProps.WebkitAnimationDelay

WebkitAnimationDirection?

optional WebkitAnimationDirection?: AnimationDirection;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-direction>#

Initial value: normal

Inherited from

KeywordProps.WebkitAnimationDirection

WebkitAnimationDuration?

optional WebkitAnimationDuration?: AnimationDuration<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: [ auto | <time [0s,∞]> ]#

Initial value: 0s

Inherited from

KeywordProps.WebkitAnimationDuration

WebkitAnimationFillMode?

optional WebkitAnimationFillMode?: AnimationFillMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-fill-mode>#

Initial value: none

Inherited from

KeywordProps.WebkitAnimationFillMode

WebkitAnimationIterationCount?

optional WebkitAnimationIterationCount?: AnimationIterationCount;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-iteration-count>#

Initial value: 1

Inherited from

KeywordProps.WebkitAnimationIterationCount

WebkitAnimationName?

optional WebkitAnimationName?: AnimationName;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: [ none | <keyframes-name> ]#

Initial value: none

Inherited from

KeywordProps.WebkitAnimationName

WebkitAnimationPlayState?

optional WebkitAnimationPlayState?: AnimationPlayState;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-animation-play-state>#

Initial value: running

Inherited from

KeywordProps.WebkitAnimationPlayState

WebkitAnimationTimingFunction?

optional WebkitAnimationTimingFunction?: AnimationTimingFunction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <easing-function>#

Initial value: ease

Inherited from

KeywordProps.WebkitAnimationTimingFunction

WebkitAppearance?

optional WebkitAppearance?: WebkitAppearance;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Initial value: none (but this value is overridden in the user agent CSS)

Inherited from

KeywordProps.WebkitAppearance

WebkitBackdropFilter?

optional WebkitBackdropFilter?: BackdropFilter;

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: none | <filter-value-list>

Initial value: none

Inherited from

KeywordProps.WebkitBackdropFilter

WebkitBackfaceVisibility?

optional WebkitBackfaceVisibility?: BackfaceVisibility;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: visible | hidden

Initial value: visible

Inherited from

KeywordProps.WebkitBackfaceVisibility

WebkitBackgroundClip?

optional WebkitBackgroundClip?: BackgroundClip;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-clip>#

Initial value: border-box

Inherited from

KeywordProps.WebkitBackgroundClip

WebkitBackgroundOrigin?

optional WebkitBackgroundOrigin?: BackgroundOrigin;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <visual-box>#

Initial value: padding-box

Inherited from

KeywordProps.WebkitBackgroundOrigin

WebkitBackgroundSize?

optional WebkitBackgroundSize?: BackgroundSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <bg-size>#

Initial value: auto auto

Inherited from

KeywordProps.WebkitBackgroundSize

WebkitBorderBefore?

optional WebkitBorderBefore?: WebkitBorderBefore<0 | DimensionToken>;

The -webkit-border-before CSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.

Syntax: <'border-width'> || <'border-style'> || <color>

Inherited from

KeywordProps.WebkitBorderBefore

WebkitBorderBeforeColor?

optional WebkitBorderBeforeColor?: WebkitBorderBeforeColor;

Syntax: <color>

Initial value: currentcolor

Inherited from

KeywordProps.WebkitBorderBeforeColor

WebkitBorderBeforeStyle?

optional WebkitBorderBeforeStyle?: WebkitBorderBeforeStyle;

Syntax: <'border-style'>

Initial value: none

Inherited from

KeywordProps.WebkitBorderBeforeStyle

WebkitBorderBeforeWidth?

optional WebkitBorderBeforeWidth?: WebkitBorderBeforeWidth<0 | DimensionToken>;

Syntax: <'border-width'>

Initial value: medium

Inherited from

KeywordProps.WebkitBorderBeforeWidth

WebkitBorderBottomLeftRadius?

optional WebkitBorderBottomLeftRadius?: BorderBottomLeftRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Inherited from

KeywordProps.WebkitBorderBottomLeftRadius

WebkitBorderBottomRightRadius?

optional WebkitBorderBottomRightRadius?: BorderBottomRightRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Inherited from

KeywordProps.WebkitBorderBottomRightRadius

WebkitBorderImage?

optional WebkitBorderImage?: BorderImage;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Inherited from

KeywordProps.WebkitBorderImage

WebkitBorderImageSlice?

optional WebkitBorderImageSlice?: BorderImageSlice;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} && fill?

Initial value: 100%

Inherited from

KeywordProps.WebkitBorderImageSlice

WebkitBorderRadius?

optional WebkitBorderRadius?: BorderRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

Inherited from

KeywordProps.WebkitBorderRadius

WebkitBorderTopLeftRadius?

optional WebkitBorderTopLeftRadius?: BorderTopLeftRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Inherited from

KeywordProps.WebkitBorderTopLeftRadius

WebkitBorderTopRightRadius?

optional WebkitBorderTopRightRadius?: BorderTopRightRadius<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: <length-percentage [0,∞]>{1,2}

Initial value: 0

Inherited from

KeywordProps.WebkitBorderTopRightRadius

WebkitBoxAlign?

optional WebkitBoxAlign?: BoxAlign;

Syntax: start | center | end | baseline | stretch

Initial value: stretch

Deprecated

Inherited from

KeywordProps.WebkitBoxAlign

WebkitBoxDecorationBreak?

optional WebkitBoxDecorationBreak?: BoxDecorationBreak;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: slice | clone

Initial value: slice

Inherited from

KeywordProps.WebkitBoxDecorationBreak

WebkitBoxDirection?

optional WebkitBoxDirection?: BoxDirection;

The box-direction CSS property specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

Syntax: normal | reverse | inherit

Initial value: normal

Deprecated

Inherited from

KeywordProps.WebkitBoxDirection

WebkitBoxFlex?

optional WebkitBoxFlex?: BoxFlex;

The -moz-box-flex and -webkit-box-flex CSS properties specify how a -moz-box or -webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.

Syntax: <number>

Initial value: 0

Deprecated

Inherited from

KeywordProps.WebkitBoxFlex

WebkitBoxFlexGroup?

optional WebkitBoxFlexGroup?: BoxFlexGroup;

The box-flex-group CSS property assigns the flexbox's child elements to a flex group.

Syntax: <integer>

Initial value: 1

Deprecated

Inherited from

KeywordProps.WebkitBoxFlexGroup

WebkitBoxLines?

optional WebkitBoxLines?: BoxLines;

The box-lines CSS property determines whether the box may have a single or multiple lines (rows for horizontally oriented boxes, columns for vertically oriented boxes).

Syntax: single | multiple

Initial value: single

Deprecated

Inherited from

KeywordProps.WebkitBoxLines

WebkitBoxOrdinalGroup?

optional WebkitBoxOrdinalGroup?: BoxOrdinalGroup;

The box-ordinal-group CSS property assigns the flexbox's child elements to an ordinal group.

Syntax: <integer>

Initial value: 1

Deprecated

Inherited from

KeywordProps.WebkitBoxOrdinalGroup

WebkitBoxOrient?

optional WebkitBoxOrient?: BoxOrient;

The box-orient CSS property sets whether an element lays out its contents horizontally or vertically.

Syntax: horizontal | vertical | inline-axis | block-axis | inherit

Initial value: inline-axis

Deprecated

Inherited from

KeywordProps.WebkitBoxOrient

WebkitBoxPack?

optional WebkitBoxPack?: BoxPack;

Syntax: start | center | end | justify

Initial value: start

Deprecated

Inherited from

KeywordProps.WebkitBoxPack

WebkitBoxReflect?

optional WebkitBoxReflect?: WebkitBoxReflect<0 | DimensionToken>;

The -webkit-box-reflect CSS property lets you reflect the content of an element in one specific direction.

Syntax: [ above | below | right | left ]? <length>? <image>?

Initial value: none

Inherited from

KeywordProps.WebkitBoxReflect

WebkitBoxShadow?

optional WebkitBoxShadow?: BoxShadow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: none | <shadow>#

Initial value: none

Inherited from

KeywordProps.WebkitBoxShadow

WebkitBoxSizing?

optional WebkitBoxSizing?: BoxSizing;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: content-box | border-box

Initial value: content-box

Inherited from

KeywordProps.WebkitBoxSizing

WebkitClipPath?

optional WebkitClipPath?: ClipPath;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

Initial value: none

Inherited from

KeywordProps.WebkitClipPath

WebkitColumnCount?

optional WebkitColumnCount?: ColumnCount;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <integer> | auto

Initial value: auto

Inherited from

KeywordProps.WebkitColumnCount

WebkitColumnFill?

optional WebkitColumnFill?: ColumnFill;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: auto | balance

Initial value: balance

Inherited from

KeywordProps.WebkitColumnFill

WebkitColumnRule?

optional WebkitColumnRule?: ColumnRule<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Inherited from

KeywordProps.WebkitColumnRule

WebkitColumnRuleColor?

optional WebkitColumnRuleColor?: ColumnRuleColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <color>

Initial value: currentcolor

Inherited from

KeywordProps.WebkitColumnRuleColor

WebkitColumnRuleStyle?

optional WebkitColumnRuleStyle?: ColumnRuleStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'border-style'>

Initial value: none

Inherited from

KeywordProps.WebkitColumnRuleStyle

WebkitColumnRuleWidth?

optional WebkitColumnRuleWidth?: ColumnRuleWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'border-width'>

Initial value: medium

Inherited from

KeywordProps.WebkitColumnRuleWidth

WebkitColumns?

optional WebkitColumns?: Columns<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: <'column-width'> || <'column-count'>

Inherited from

KeywordProps.WebkitColumns

WebkitColumnSpan?

optional WebkitColumnSpan?: ColumnSpan;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: none | all

Initial value: none

Inherited from

KeywordProps.WebkitColumnSpan

WebkitColumnWidth?

optional WebkitColumnWidth?: ColumnWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.

Syntax: <length> | auto

Initial value: auto

Inherited from

KeywordProps.WebkitColumnWidth

WebkitFilter?

optional WebkitFilter?: Filter;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Syntax: none | <filter-value-list>

Initial value: none

Inherited from

KeywordProps.WebkitFilter

WebkitFlex?

optional WebkitFlex?: Flex<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Inherited from

KeywordProps.WebkitFlex

WebkitFlexBasis?

optional WebkitFlexBasis?: FlexBasis<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: content | <'width'>

Initial value: auto

Inherited from

KeywordProps.WebkitFlexBasis

WebkitFlexDirection?

optional WebkitFlexDirection?: FlexDirection;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: row | row-reverse | column | column-reverse

Initial value: row

Inherited from

KeywordProps.WebkitFlexDirection

WebkitFlexFlow?

optional WebkitFlexFlow?: FlexFlow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <'flex-direction'> || <'flex-wrap'>

Inherited from

KeywordProps.WebkitFlexFlow

WebkitFlexGrow?

optional WebkitFlexGrow?: FlexGrow;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <number>

Initial value: 0

Inherited from

KeywordProps.WebkitFlexGrow

WebkitFlexShrink?

optional WebkitFlexShrink?: FlexShrink;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <number>

Initial value: 1

Inherited from

KeywordProps.WebkitFlexShrink

WebkitFlexWrap?

optional WebkitFlexWrap?: FlexWrap;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: nowrap | wrap | wrap-reverse

Initial value: nowrap

Inherited from

KeywordProps.WebkitFlexWrap

WebkitFontFeatureSettings?

optional WebkitFontFeatureSettings?: FontFeatureSettings;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: normal | <feature-tag-value>#

Initial value: normal

Inherited from

KeywordProps.WebkitFontFeatureSettings

WebkitFontKerning?

optional WebkitFontKerning?: FontKerning;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | normal | none

Initial value: auto

Inherited from

KeywordProps.WebkitFontKerning

WebkitFontSmoothing?

optional WebkitFontSmoothing?: FontSmooth<0 | DimensionToken>;

The font-smooth CSS property controls the application of anti-aliasing when fonts are rendered.

Syntax: auto | never | always | <absolute-size> | <length>

Initial value: auto

Inherited from

KeywordProps.WebkitFontSmoothing

WebkitFontVariantLigatures?

optional WebkitFontVariantLigatures?: FontVariantLigatures;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

Initial value: normal

Inherited from

KeywordProps.WebkitFontVariantLigatures

WebkitHyphenateCharacter?

optional WebkitHyphenateCharacter?: HyphenateCharacter;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: auto | <string>

Initial value: auto

Inherited from

KeywordProps.WebkitHyphenateCharacter

WebkitHyphens?

optional WebkitHyphens?: Hyphens;

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: none | manual | auto

Initial value: manual

Inherited from

KeywordProps.WebkitHyphens

WebkitInitialLetter?

optional WebkitInitialLetter?: InitialLetter;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: normal | [ <number> <integer>? ]

Initial value: normal

Inherited from

KeywordProps.WebkitInitialLetter

WebkitJustifyContent?

optional WebkitJustifyContent?: JustifyContent;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

Initial value: normal

Inherited from

KeywordProps.WebkitJustifyContent

WebkitLineBreak?

optional WebkitLineBreak?: LineBreak;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: auto | loose | normal | strict | anywhere

Initial value: auto

Inherited from

KeywordProps.WebkitLineBreak

WebkitLineClamp?

optional WebkitLineClamp?: WebkitLineClamp;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <integer>

Initial value: none

Inherited from

KeywordProps.WebkitLineClamp

WebkitLogicalHeight?

optional WebkitLogicalHeight?: BlockSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'width'>

Initial value: auto

Inherited from

KeywordProps.WebkitLogicalHeight

WebkitLogicalWidth?

optional WebkitLogicalWidth?: InlineSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'width'>

Initial value: auto

Inherited from

KeywordProps.WebkitLogicalWidth

WebkitMarginEnd?

optional WebkitMarginEnd?: MarginInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'margin-top'>

Initial value: 0

Inherited from

KeywordProps.WebkitMarginEnd

WebkitMarginStart?

optional WebkitMarginStart?: MarginInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'margin-top'>

Initial value: 0

Inherited from

KeywordProps.WebkitMarginStart

WebkitMask?

optional WebkitMask?: WebkitMask<0 | DimensionToken>;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: [ <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || [ <visual-box> | border | padding | content | text ] || [ <visual-box> | border | padding | content ] ]#

Inherited from

KeywordProps.WebkitMask

WebkitMaskAttachment?

optional WebkitMaskAttachment?: WebkitMaskAttachment;

Syntax: <attachment>#

Initial value: scroll

Inherited from

KeywordProps.WebkitMaskAttachment

WebkitMaskBoxImage?

optional WebkitMaskBoxImage?: MaskBorder;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

Inherited from

KeywordProps.WebkitMaskBoxImage

WebkitMaskBoxImageOutset?

optional WebkitMaskBoxImageOutset?: MaskBorderOutset<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ <length> | <number> ]{1,4}

Initial value: 0

Inherited from

KeywordProps.WebkitMaskBoxImageOutset

WebkitMaskBoxImageRepeat?

optional WebkitMaskBoxImageRepeat?: MaskBorderRepeat;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ stretch | repeat | round | space ]{1,2}

Initial value: stretch

Inherited from

KeywordProps.WebkitMaskBoxImageRepeat

WebkitMaskBoxImageSlice?

optional WebkitMaskBoxImageSlice?: MaskBorderSlice;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <number-percentage>{1,4} fill?

Initial value: 0

Inherited from

KeywordProps.WebkitMaskBoxImageSlice

WebkitMaskBoxImageSource?

optional WebkitMaskBoxImageSource?: MaskBorderSource;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | <image>

Initial value: none

Inherited from

KeywordProps.WebkitMaskBoxImageSource

WebkitMaskBoxImageWidth?

optional WebkitMaskBoxImageWidth?: MaskBorderWidth<0 | DimensionToken>;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: [ <length-percentage> | <number> | auto ]{1,4}

Initial value: auto

Inherited from

KeywordProps.WebkitMaskBoxImageWidth

WebkitMaskClip?

optional WebkitMaskClip?: WebkitMaskClip;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Initial value: border

Inherited from

KeywordProps.WebkitMaskClip

WebkitMaskComposite?

optional WebkitMaskComposite?: WebkitMaskComposite;

The -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.

Syntax: <composite-style>#

Initial value: source-over

Inherited from

KeywordProps.WebkitMaskComposite

WebkitMaskImage?

optional WebkitMaskImage?: WebkitMaskImage;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <mask-reference>#

Initial value: none

Inherited from

KeywordProps.WebkitMaskImage

WebkitMaskOrigin?

optional WebkitMaskOrigin?: WebkitMaskOrigin;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: [ <coord-box> | border | padding | content ]#

Initial value: padding

Inherited from

KeywordProps.WebkitMaskOrigin

WebkitMaskPosition?

optional WebkitMaskPosition?: WebkitMaskPosition<0 | DimensionToken>;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <position>#

Initial value: 0% 0%

Inherited from

KeywordProps.WebkitMaskPosition

WebkitMaskPositionX?

optional WebkitMaskPositionX?: WebkitMaskPositionX<0 | DimensionToken>;

The -webkit-mask-position-x CSS property sets the initial horizontal position of a mask image.

Syntax: [ <length-percentage> | left | center | right ]#

Initial value: 0%

Inherited from

KeywordProps.WebkitMaskPositionX

WebkitMaskPositionY?

optional WebkitMaskPositionY?: WebkitMaskPositionY<0 | DimensionToken>;

The -webkit-mask-position-y CSS property sets the initial vertical position of a mask image.

Syntax: [ <length-percentage> | top | center | bottom ]#

Initial value: 0%

Inherited from

KeywordProps.WebkitMaskPositionY

WebkitMaskRepeat?

optional WebkitMaskRepeat?: WebkitMaskRepeat;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <repeat-style>#

Initial value: repeat

Inherited from

KeywordProps.WebkitMaskRepeat

WebkitMaskRepeatX?

optional WebkitMaskRepeatX?: WebkitMaskRepeatX;

The -webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally.

Syntax: repeat | no-repeat | space | round

Initial value: repeat

Inherited from

KeywordProps.WebkitMaskRepeatX

WebkitMaskRepeatY?

optional WebkitMaskRepeatY?: WebkitMaskRepeatY;

The -webkit-mask-repeat-y property sets whether and how a mask image is repeated (tiled) vertically.

Syntax: repeat | no-repeat | space | round

Initial value: repeat

Inherited from

KeywordProps.WebkitMaskRepeatY

WebkitMaskSize?

optional WebkitMaskSize?: WebkitMaskSize<0 | DimensionToken>;

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: <bg-size>#

Initial value: auto auto

Inherited from

KeywordProps.WebkitMaskSize

WebkitMaxInlineSize?

optional WebkitMaxInlineSize?: MaxInlineSize<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'max-width'>

Initial value: none

Inherited from

KeywordProps.WebkitMaxInlineSize

WebkitOrder?

optional WebkitOrder?: Order;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <integer>

Initial value: 0

Inherited from

KeywordProps.WebkitOrder

WebkitOverflowScrolling?

optional WebkitOverflowScrolling?: WebkitOverflowScrolling;

Syntax: auto | touch

Initial value: auto

Inherited from

KeywordProps.WebkitOverflowScrolling

WebkitPaddingEnd?

optional WebkitPaddingEnd?: PaddingInlineEnd<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'padding-top'>

Initial value: 0

Inherited from

KeywordProps.WebkitPaddingEnd

WebkitPaddingStart?

optional WebkitPaddingStart?: PaddingInlineStart<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <'padding-top'>

Initial value: 0

Inherited from

KeywordProps.WebkitPaddingStart

WebkitPerspective?

optional WebkitPerspective?: Perspective<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <length>

Initial value: none

Inherited from

KeywordProps.WebkitPerspective

WebkitPerspectiveOrigin?

optional WebkitPerspectiveOrigin?: PerspectiveOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <position>

Initial value: 50% 50%

Inherited from

KeywordProps.WebkitPerspectiveOrigin

WebkitPrintColorAdjust?

optional WebkitPrintColorAdjust?: PrintColorAdjust;

Since May 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: economy | exact

Initial value: economy

Inherited from

KeywordProps.WebkitPrintColorAdjust

WebkitRubyPosition?

optional WebkitRubyPosition?: RubyPosition;

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: [ alternate || [ over | under ] ] | inter-character

Initial value: alternate

Inherited from

KeywordProps.WebkitRubyPosition

WebkitScrollSnapType?

optional WebkitScrollSnapType?: ScrollSnapType;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2022.

Initial value: none

Inherited from

KeywordProps.WebkitScrollSnapType

WebkitShapeMargin?

optional WebkitShapeMargin?: ShapeMargin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <length-percentage>

Initial value: 0

Inherited from

KeywordProps.WebkitShapeMargin

WebkitTapHighlightColor?

optional WebkitTapHighlightColor?: WebkitTapHighlightColor;

-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which element they're tapping on.

Syntax: <color>

Initial value: black

Inherited from

KeywordProps.WebkitTapHighlightColor

WebkitTextCombine?

optional WebkitTextCombine?: TextCombineUpright;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | all | [ digits <integer>? ]

Initial value: none

Inherited from

KeywordProps.WebkitTextCombine

WebkitTextDecorationColor?

optional WebkitTextDecorationColor?: TextDecorationColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: <color>

Initial value: currentcolor

Inherited from

KeywordProps.WebkitTextDecorationColor

WebkitTextDecorationLine?

optional WebkitTextDecorationLine?: TextDecorationLine;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

Initial value: none

Inherited from

KeywordProps.WebkitTextDecorationLine

WebkitTextDecorationSkip?

optional WebkitTextDecorationSkip?: TextDecorationSkip;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

Initial value: objects

Inherited from

KeywordProps.WebkitTextDecorationSkip

WebkitTextDecorationStyle?

optional WebkitTextDecorationStyle?: TextDecorationStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: solid | double | dotted | dashed | wavy

Initial value: solid

Inherited from

KeywordProps.WebkitTextDecorationStyle

WebkitTextEmphasis?

optional WebkitTextEmphasis?: TextEmphasis;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: <'text-emphasis-style'> || <'text-emphasis-color'>

Inherited from

KeywordProps.WebkitTextEmphasis

WebkitTextEmphasisColor?

optional WebkitTextEmphasisColor?: TextEmphasisColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: <color>

Initial value: currentcolor

Inherited from

KeywordProps.WebkitTextEmphasisColor

WebkitTextEmphasisPosition?

optional WebkitTextEmphasisPosition?: TextEmphasisPosition;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: auto | [ over | under ] && [ right | left ]?

Initial value: auto

Inherited from

KeywordProps.WebkitTextEmphasisPosition

WebkitTextEmphasisStyle?

optional WebkitTextEmphasisStyle?: TextEmphasisStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Syntax: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>

Initial value: none

Inherited from

KeywordProps.WebkitTextEmphasisStyle

WebkitTextFillColor?

optional WebkitTextFillColor?: WebkitTextFillColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Syntax: <color>

Initial value: currentcolor

Inherited from

KeywordProps.WebkitTextFillColor

WebkitTextOrientation?

optional WebkitTextOrientation?: TextOrientation;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Syntax: mixed | upright | sideways

Initial value: mixed

Inherited from

KeywordProps.WebkitTextOrientation

WebkitTextSizeAdjust?

optional WebkitTextSizeAdjust?: TextSizeAdjust;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: none | auto | <percentage>

Initial value: auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).

Inherited from

KeywordProps.WebkitTextSizeAdjust

WebkitTextStroke?

optional WebkitTextStroke?: WebkitTextStroke<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <length> || <color>

Inherited from

KeywordProps.WebkitTextStroke

WebkitTextStrokeColor?

optional WebkitTextStrokeColor?: WebkitTextStrokeColor;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <color>

Initial value: currentcolor

Inherited from

KeywordProps.WebkitTextStrokeColor

WebkitTextStrokeWidth?

optional WebkitTextStrokeWidth?: WebkitTextStrokeWidth<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

Syntax: <length>

Initial value: 0

Inherited from

KeywordProps.WebkitTextStrokeWidth

WebkitTextUnderlinePosition?

optional WebkitTextUnderlinePosition?: TextUnderlinePosition;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: auto | from-font | [ under || [ left | right ] ]

Initial value: auto

Inherited from

KeywordProps.WebkitTextUnderlinePosition

WebkitTouchCallout?

optional WebkitTouchCallout?: WebkitTouchCallout;

The -webkit-touch-callout CSS property controls the display of the default callout shown when you touch and hold a touch target.

Syntax: default | none

Initial value: default

Inherited from

KeywordProps.WebkitTouchCallout

WebkitTransform?

optional WebkitTransform?: Transform;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <transform-list>

Initial value: none

Inherited from

KeywordProps.WebkitTransform

WebkitTransformOrigin?

optional WebkitTransformOrigin?: TransformOrigin<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Initial value: 50% 50% 0

Inherited from

KeywordProps.WebkitTransformOrigin

WebkitTransformStyle?

optional WebkitTransformStyle?: TransformStyle;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: flat | preserve-3d

Initial value: flat

Inherited from

KeywordProps.WebkitTransformStyle

WebkitTransition?

optional WebkitTransition?: Transition<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <single-transition>#

Inherited from

KeywordProps.WebkitTransition

WebkitTransitionDelay?

optional WebkitTransitionDelay?: TransitionDelay<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Inherited from

KeywordProps.WebkitTransitionDelay

WebkitTransitionDuration?

optional WebkitTransitionDuration?: TransitionDuration<DurationToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <time>#

Initial value: 0s

Inherited from

KeywordProps.WebkitTransitionDuration

WebkitTransitionProperty?

optional WebkitTransitionProperty?: TransitionProperty;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: none | <single-transition-property>#

Initial value: all

Inherited from

KeywordProps.WebkitTransitionProperty

WebkitTransitionTimingFunction?

optional WebkitTransitionTimingFunction?: TransitionTimingFunction;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Syntax: <easing-function>#

Initial value: ease

Inherited from

KeywordProps.WebkitTransitionTimingFunction

WebkitUserModify?

optional WebkitUserModify?: WebkitUserModify;

Syntax: read-only | read-write | read-write-plaintext-only

Initial value: read-only

Inherited from

KeywordProps.WebkitUserModify

WebkitUserSelect?

optional WebkitUserSelect?: WebkitUserSelect;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: auto | text | none | all

Initial value: auto

Inherited from

KeywordProps.WebkitUserSelect

WebkitWritingMode?

optional WebkitWritingMode?: WritingMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Initial value: horizontal-tb

Inherited from

KeywordProps.WebkitWritingMode

whiteSpace?

optional whiteSpace?: WhiteSpace;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'>

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
1	1	1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/white-space

Inherited from

KeywordProps.whiteSpace

whiteSpaceCollapse?

optional whiteSpaceCollapse?: WhiteSpaceCollapse;

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: collapse | preserve | preserve-breaks | preserve-spaces | break-spaces

Initial value: collapse

Chrome	Firefox	Safari	Edge	IE
114	124	17.4	114	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/white-space-collapse

Inherited from

KeywordProps.whiteSpaceCollapse

widows?

optional widows?: Widows;

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Syntax: <integer>

Initial value: 2

Chrome	Firefox	Safari	Edge	IE
25	No	1.3	12	8

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/widows

Inherited from

KeywordProps.widows

width?

optional width?: SizeIntrinsic;

Inherited from

TokenMappedProps.width

willChange?

optional willChange?: WillChange;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Syntax: auto | <animateable-feature>#

Initial value: auto

Chrome	Firefox	Safari	Edge	IE
36	36	9.1	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/will-change

Inherited from

KeywordProps.willChange

wordBreak?

optional wordBreak?: WordBreak;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Syntax: normal | break-all | keep-all | break-word | auto-phrase

Initial value: normal

Chrome	Firefox	Safari	Edge	IE
1	15	3	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/word-break

Inherited from

KeywordProps.wordBreak

wordSpacing?

optional wordSpacing?: SpacingText;

Inherited from

TokenMappedProps.wordSpacing

wordWrap?

optional wordWrap?: WordWrap;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

Syntax: normal | break-word

Initial value: normal

Inherited from

KeywordProps.wordWrap

writingMode?

optional writingMode?: WritingMode;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Syntax: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Initial value: horizontal-tb

Chrome	Firefox	Safari	Edge	IE
48	41	10.1	12	9
8 -x-		5.1 -x-

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/writing-mode

Inherited from

KeywordProps.writingMode

x?

optional x?: X<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: <length> | <percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
42	69	9	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/x

Inherited from

KeywordProps.x

y?

optional y?: Y<0 | DimensionToken>;

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Syntax: <length> | <percentage>

Initial value: 0

Chrome	Firefox	Safari	Edge	IE
42	69	9	79	No

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/y

Inherited from

KeywordProps.y

zIndex?

optional zIndex?: Numeric;

Inherited from

TokenMappedProps.zIndex

zoom?

optional zoom?: Zoom;

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Syntax: normal | reset | <number [0,∞]> || <percentage [0,∞]>

Initial value: 1

Chrome	Firefox	Safari	Edge	IE
1	126	3.1	12	5.5

See

https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/zoom

Inherited from

KeywordProps.zoom

ThemeInit

The argument createTheme accepts: a schema tree, the token tree it describes, and any modes.

The members are typed as bare objects on purpose. A const type parameter constrained to an index-signature type widens the literal it was inferred from, which would erase every brand; the shapes are enforced by the schema factories being typed values, by an undeclared leaf resolving to unknown, and by validation at module load.

Properties

modes?

optional modes?: object;

schema

schema: object;

tokens

tokens: object;

ThemeMode

A theme's mode: a condition plus the values it overrides.

Type Parameters

T

T

Properties

media?

optional media?: string;

The media query this mode applies under. Defaults to (prefers-color-scheme: <name>) for the names light and dark, and is required for any other name.

selector?

optional selector?: string;

A selector this mode also applies under, for a user-selectable toggle. An attribute selector outranks the media block on specificity, so an explicit choice beats the OS preference.

tokens

tokens: DeepPartialTokens<T>;

The values this mode overrides. Structure only, never types.

ThemePatch

The argument extend accepts. schema is optional, because a patch that only adds tokens to an existing namespace needs no new entry.

Properties

modes?

optional modes?: object;

schema?

optional schema?: object;

tokens

tokens: object;

ThemeResult

The object createTheme returns: the typed token accessor, the raw resolver, the <Theme /> component, and the two derivation methods.

Type Parameters

T

T

Properties

Theme

readonly Theme: ThemeComponent<T>;

The component that installs the custom properties.

token

readonly token: TokenTree<T>;

A typed mirror of the token tree whose leaves are branded var() reference strings. A s.scale() leaf is callable.

Methods

extend()

extend<schema, tokens>(patch): ThemeResult<Merged<T, {
  schema: schema;
  tokens: tokens;
}>>;

Deep-merges a patch onto this theme and returns a new one. A leaf replaces wholesale; every other node recurses.

The callback form receives this theme's accessor, so a patch can reference what it extends.

Type Parameters

schema

schema extends object

tokens

tokens extends object

Parameters

patch

| ExtendPatch<T, schema, tokens> | ((base) => ExtendPatch<T, schema, tokens>)

The tokens and schema to merge, or a callback returning them

Returns

ThemeResult<Merged<T, { schema: schema; tokens: tokens; }>>

A new theme

Throws

ThemeError when the patch holds no tokens group

raw()

raw(ref): string;

Resolves a token reference to its concrete base value, following references to the end.

Parameters

ref

AnyToken | UntypedToken

A token reference minted by this theme

Returns

string

The serialized base value

Throws

ThemeError when the reference was not minted here

select()

select<P>(projection): ThemeResult<P>;

Replaces this theme with a projection of it. The callback receives this theme's accessor; every value in the projection is a reference into it, and the new path decides the new custom property name, so a projection may also reshape and rename.

Type Parameters

P

P extends ThemeInit

Parameters

projection

(base) => P

A callback returning the schema and tokens to keep

Returns

ThemeResult<P>

A new theme

Throws

ThemeError when the projection holds no tokens group

Tokens

The token tree createTheme accepts: nested records whose leaves are TokenValues. No reserved keys, so it is plain JSON and a designer can diff it.

Indexable

[key: string]: TokenValue | Tokens

TVAConfig

Configuration for tva. Every style slot is ThemedCSSProps, carrying the same brand enforcement as css.

Type Parameters

V

V extends VariantShape

Properties

base?

optional base?: ThemedCSSProps;

Styles applied to every invocation, before any variant.

compoundVariants?

optional compoundVariants?: readonly Selection<V> & object[];

Extra styles applied when every listed variant condition matches, merged after the individual variants in array order.

defaultVariants?

optional defaultVariants?: Selection<V>;

Options used for axes the caller leaves unset. Passing an axis undefined explicitly still falls back to its default.

variants?

optional variants?: V;

The variant axes. Each axis maps option names to styles; name an axis's options true and false to accept a boolean.

TVAFn()

A variant component built by tva. Call it with a variant selection to get a mix-ready descriptor; call resolve for the merged ThemedCSSProps without building a descriptor.

Type Parameters

V

V extends VariantShape

TVAFn<node>(props?): ThemedCSSMixin<node>;

Resolves the selection and returns a mix-ready descriptor. Node-generic like css: MixinDescriptor is invariant in its node, so the element type binds per mix callsite.

Type Parameters

node

node extends Element = Element

Parameters

props?

Selection<V>

Returns

ThemedCSSMixin<node>

Methods

resolve()

resolve(props?): ThemedCSSProps;

Returns the merged style object for a selection without producing a descriptor. combine is built on it.

Parameters

props?

Selection<V>

Returns

ThemedCSSProps

Type Aliases

AnyToken

type AnyToken = BrandByType[TokenType];

The union of all twelve token brands. Brands are compile-time tags naming each token's type; they let css reject a dimension where a color belongs. They exist only in the type system — every ref is a plain string at runtime, so brands cost nothing — and they are theme-independent, so tokens minted by two different createTheme calls mix freely in one css call.

BorderToken

type BorderToken = string & object;

Compile-time brand for a border token.

Type Declaration

[BORDER]

readonly [BORDER]: true;

ClassValue

type ClassValue = 
  | string
  | number
  | null
  | undefined
  | false
  | readonly ClassValue[]
| Record<string, boolean | null | undefined>;

A value cx accepts: a string, a number, a nested array of the same, or a record whose truthy keys are emitted. null, undefined, and false are dropped. Compatible with clsx.

ColorToken

type ColorToken = string & object;

Compile-time brand for a color token.

Type Declaration

[COLOR]

readonly [COLOR]: true;

CubicBezierToken

type CubicBezierToken = string & object;

Compile-time brand for a cubicBezier token.

Type Declaration

[CUBIC_BEZIER]

readonly [CUBIC_BEZIER]: true;

DeepPartialTokens

type DeepPartialTokens<T> = 0 extends 1 & T ? unknown : { [K in keyof T]?: T[K] extends Leaf ? TokenValue : DeepPartialTokens<T[K]> };

The mode-override shape for a token tree: every group optional, every leaf a value. A mode overrides values, never structure or types.

Type Parameters

T

T

DimensionToken

type DimensionToken = string & object;

Compile-time brand for a dimension token.

Type Declaration

[DIMENSION]

readonly [DIMENSION]: true;

DurationToken

type DurationToken = string & object;

Compile-time brand for a duration token.

Type Declaration

[DURATION]

readonly [DURATION]: true;

FontFamilyToken

type FontFamilyToken = string & object;

Compile-time brand for a fontFamily token.

Type Declaration

[FONT_FAMILY]

readonly [FONT_FAMILY]: true;

FontWeightToken

type FontWeightToken = string & object;

Compile-time brand for a fontWeight token.

Type Declaration

[FONT_WEIGHT]

readonly [FONT_WEIGHT]: true;

GradientToken

type GradientToken = string & object;

Compile-time brand for a gradient token.

Type Declaration

[GRADIENT]

readonly [GRADIENT]: true;

NumberToken

type NumberToken = string & object;

Compile-time brand for a number token.

Type Declaration

[NUMBER]

readonly [NUMBER]: true;

ShadowToken

type ShadowToken = string & object;

Compile-time brand for a shadow token.

Type Declaration

[SHADOW]

readonly [SHADOW]: true;

StrokeStyleToken

type StrokeStyleToken = string & object;

Compile-time brand for a strokeStyle token.

Type Declaration

[STROKE_STYLE]

readonly [STROKE_STYLE]: true;

ThemedCSSMixin

type ThemedCSSMixin<node> = MixinDescriptor<node, [RemixCSSProps], ElementProps>;

The descriptor css produces. MixinDescriptor is invariant in its node type, so — exactly like remix/ui's own css factory — the node binds per callsite through the generic parameter.

Type Parameters

node

node extends Element = Element

See

css

ThemeProps

type ThemeProps = object;

Props for the ThemeComponent. nonce sets the nonce attribute on the emitted <style> element for Content Security Policy setups.

Properties

nonce?

optional nonce?: string;

TokenTree

type TokenTree<T> = 0 extends 1 & T ? unknown : T extends object ? TreeOf<Tok, Sch, never> : unknown;

The accessor shape for an init T: the same nesting as its token tree, with every leaf replaced by the branded var(--…) reference its schema declares. Numeric keys index with brackets (t.color.gray[900]).

A leaf whose schema entry is missing resolves to unknown, which is unusable in css(). The compiler also throws for it at module load.

Type Parameters

T

T

See

ThemeResult

TokenType

type TokenType = typeof TOKEN_TYPES[number];

The twelve DTCG token $type values.

See

AnyToken

TokenValue

type TokenValue = number | readonly (number | string)[] | string;

A token value: the CSS it becomes. A string, a number, or an array of either. Anything else is a group.

See

Tokens

TransitionToken

type TransitionToken = string & object;

Compile-time brand for a transition token.

Type Declaration

[TRANSITION]

readonly [TRANSITION]: true;

TVAProps

type TVAProps<F> = F extends TVAFn<infer V> ? Selection<V> : never;

Extracts a tva component's variant props, like cva's VariantProps. All props are optional; wrap the component to require one.

Type Parameters

F

F

Example

export type ButtonProps = TVAProps<typeof button>;
// { intent?: "primary" | "secondary"; size?: "sm" | "md" }

UntypedToken

type UntypedToken = string & object;

Compile-time brand for a token declared with s.any(). It carries no CSS type, so the open-grammar properties (animation, aspectRatio, background) accept it and the token-mapped longhands reject it.

Type Declaration

[UNTYPED]

readonly [UNTYPED]: true;

Functions

combine()

function combine<Fns>(...fns): CombinedTVAFn<Fns>;

Composes tva components, like cva's compose. Each input resolves independently against the shared props, the results deep-merge in argument order, and one css call produces the descriptor. The result accepts the union of the inputs' props and honors each input's own defaults.

Type Parameters

Fns

Fns extends readonly TVAFn<VariantShape>[]

Parameters

fns

...Fns

Returns

CombinedTVAFn<Fns>

See

CombinedTVAFn

Example

tsx

export let pillButton = combine(button, rounded);
<button mix={pillButton({ intent: "primary", pill: true })} />;

createTheme()

Call Signature

function createTheme<schema, tokens>(init): ThemeResult<{
  schema: schema;
  tokens: tokens;
}>;

Compiles a theme from a schema tree and the token tree it describes.

Values are the CSS they become: a color is any CSS color, a dimension is any CSS length, and a composite is the shorthand text. The schema names each token's type, which is what the accessor's compile-time brands are read from and what css() enforces.

A reference to another token is a property access on the layer below, so it needs an ThemeResult.extend layer. The accessor leaf is already a var() string, which keeps its indirection in the emitted CSS so a mode override cascades through it. There is no string syntax for a reference; a leftover "{a.b.c}" raises ThemeError.

All validation and serialization happen eagerly: a malformed theme throws at module load rather than emitting broken CSS. Bad values raise ValidationError from remix/data-schema, carrying one issue per bad token with its path. Structural problems raise ThemeError.

Type Parameters

schema

schema extends object

tokens

tokens extends object

Parameters

init

The schema, tokens, and modes, or a <Theme /> to re-derive from

modes?

Record<string, ThemeMode<tokens>>

schema

schema

tokens

tokens

Returns

ThemeResult<{ schema: schema; tokens: tokens; }>

The ThemeResult

Throws

ThemeError on a structural failure

Throws

ValidationError on one or more invalid values

See

ThemeInit for the accepted shape.

Example

import { createTheme } from "@pitlane/theme";
import * as s from "@pitlane/theme/schema";

export let { token: t, raw, Theme } = createTheme({
    schema: { color: s.color(), spacing: s.scale() },
    tokens: { color: { white: "#fff" }, spacing: "0.25rem" },
}).extend(base => ({
    schema: { color: s.color() },
    tokens: { color: { page: base.color.white } },
}));

t.color.page; // "var(--color-page)"
raw(t.color.page); // "#fff"
t.spacing(4); // "calc(var(--spacing) * 4)"

Call Signature

function createTheme<T>(theme): ThemeResult<T>;

Compiles a theme from a schema tree and the token tree it describes.

Type Parameters

T

T

Parameters

theme

ThemeComponent<T>

Returns

ThemeResult<T>

The ThemeResult

Throws

ThemeError on a structural failure

Throws

ValidationError on one or more invalid values

See

ThemeInit for the accepted shape.

Example

import { createTheme } from "@pitlane/theme";
import * as s from "@pitlane/theme/schema";

export let { token: t, raw, Theme } = createTheme({
    schema: { color: s.color(), spacing: s.scale() },
    tokens: { color: { white: "#fff" }, spacing: "0.25rem" },
}).extend(base => ({
    schema: { color: s.color() },
    tokens: { color: { page: base.color.white } },
}));

t.color.page; // "var(--color-page)"
raw(t.color.page); // "#fff"
t.spacing(4); // "calc(var(--spacing) * 4)"

css()

function css<node>(styles): ThemedCSSMixin<node>;

Brand-enforced wrapper over remix/ui's css() mixin. Token-mapped longhands accept the matching token brand, CSS-wide keywords, property keywords, and 0; anything else — including a raw color: "#ff0000" — is a type error. Every other CSS property carries csstype's value union, so display, position, resize, and the rest of the closed-grammar properties accept only their real keywords. Nested selectors, at-rules, and custom properties recurse.

Branded token refs are already var() strings and pass through; an array value joins with spaces, which is how the box shorthands take a 1–4 tuple. A comma list needs a template string.

css() is node-generic, exactly like remix/ui's own css: the descriptor binds to the element type of the mix position it appears in, so write css({ … }) inline at each element and share ThemedCSSProps objects, never stored descriptors.

Interpolating a token into a template string (`1px solid ${t.color.line}`) yields a plain string, which the open-grammar shorthands accept.

Type Parameters

node

node extends Element = Element

Parameters

styles

ThemedCSSProps

Returns

ThemedCSSMixin<node>

See

ThemedCSSProps for the accepted per-property values.
ThemedCSSMixin for the returned descriptor.

Example

tsx

<div
    mix={css({
        color: t.color.bg,
        padding: [t.space.sm, t.space.md],
        margin: 0,
        "&:hover": { color: t.color.gray[900] },
    })}
/>

cx()

function cx(...inputs): string;

clsx-compatible className joiner for interop with plain stylesheets, since mix and className compose on the same element. Strings and numbers join with spaces, falsy values drop, arrays flatten, and truthy object keys join.

Parameters

inputs

...ClassValue[]

Returns

string

See

ClassValue

Example

tsx

<span className={cx("mono", isAlias && "alias-tag")} />;

lightDark()

function lightDark(light, dark): string;

A light-dark() color, resolved by the browser against the color-scheme property. A subtree that sets color-scheme flips whatever the media query says, which is what a theme toggle needs.

Both arguments may be token references, so a mode override of either primitive still reaches the result.

light-dark() is color-only. Use modes for anything else.

Parameters

light

string

The color for a light color-scheme

dark

string

The color for a dark color-scheme

Returns

string

The light-dark() function text

Example

tokens: { surface: { page: lightDark("#ffffff", "#1a1a1a") } }

scale()

function scale<base>(base): (steps) => base;

Turns one token into a multiplier, so a scale does not have to name every step. The returned function produces calc(<base> * <steps>), keeping whichever brand the base carried.

Use this for a token you did not declare as a scale. A token declared with s.scale() is already a multiplier, and its base is t.spacing.token when you need it.

The result is a CSS string like any other, so it also works as an authored token value.

Type Parameters

base

base extends ScalableToken

The token to multiply

Parameters

base

base

Returns

A function from steps to a token of the same type

(steps) => base

Example

import { scale } from "@pitlane/theme";

let step = scale(t.tracking.tight);
css({ letterSpacing: step(2) }); // calc(var(--tracking-tight) * 2)

tva()

function tva<V>(config): TVAFn<V>;

Builds a variant resolver modeled on cva. Where cva composes class strings, tva composes brand-enforced style objects into a mix-ready descriptor.

Each invocation resolves the selection by deep-merging base, then every matching variant in declaration order, then every matching compound variant in array order, and feeds the result to a single css call. defaultVariants fills in unset axes, and boolean axes come from options named true and false.

Type Parameters

V

V extends VariantShape

Parameters

config

TVAConfig<V>

Returns

TVAFn<V>

See

TVAConfig for the configuration shape.
TVAProps to extract the props type.

Example

export let button = tva({
    base: { borderRadius: t.radius.md },
    variants: {
        intent: {
            primary: { backgroundColor: t.color.accent },
            secondary: { backgroundColor: "transparent" },
        },
        size: { sm: { fontSize: t.text.sm }, md: { fontSize: t.text.md } },
        block: { true: { display: "flex" } },
    },
    compoundVariants: [
        { intent: "secondary", size: "md", css: { fontSize: t.text.lg } },
    ],
    defaultVariants: { intent: "primary", size: "md" },
});

<button mix={button({ intent: "secondary", block: true })} />;

@pitlane/theme ​

Classes ​

ThemeError ​

See ​

Extends ​

Constructors ​

Constructor ​

Parameters ​

message? ​

Returns ​

Inherited from ​

Constructor ​

Parameters ​

message? ​

options? ​

Returns ​

Inherited from ​

Properties ​

cause? ​

Inherited from ​

message ​

Inherited from ​

name ​

Overrides ​

stack? ​

Inherited from ​

Methods ​

isError() ​

Parameters ​

error ​

Returns ​

Inherited from ​

Interfaces ​

CombinedTVAFn() ​

Type Parameters ​

Fns ​

Type Parameters ​

node ​

Parameters ​

props? ​

Returns ​

Methods ​

resolve() ​

Parameters ​

props? ​

Returns ​

ScaleFn() ​

See ​

Parameters ​

steps ​

Returns ​

See ​

Properties ​

token ​

ThemeComponent() ​

Type Parameters ​

T ​

Parameters ​

handle ​

Returns ​

Properties ​

$theme ​

ThemedCSSProps ​

See ​

Extends ​

Indexable ​

Properties ​

accentColor? ​

Inherited from ​

alignContent? ​

See ​

Inherited from ​

alignItems? ​

See ​

Inherited from ​

alignmentBaseline? ​

See ​

Inherited from ​

alignSelf? ​

See ​

@pitlane/theme

Classes

ThemeError

See

Extends

Constructors

Constructor

Parameters

message?

Returns

Inherited from

Constructor

Parameters

message?

options?

Returns

Inherited from

Properties

cause?

Inherited from

message

Inherited from

name

Overrides

stack?

Inherited from

Methods

isError()

Parameters

error

Returns

Inherited from

Interfaces

CombinedTVAFn()

Type Parameters

Fns

Type Parameters

node

Parameters

props?

Returns

Methods

resolve()

Parameters

props?

Returns

ScaleFn()

See

Parameters

steps

Returns

See

Properties

token

ThemeComponent()

Type Parameters

T

Parameters

handle

Returns

Properties

$theme

ThemedCSSProps

See

Extends

Indexable

Properties

accentColor?

Inherited from

alignContent?

See

Inherited from

alignItems?

See

Inherited from

alignmentBaseline?

See

Inherited from

alignSelf?

See