mozilla

CSS values syntax

This page provides the CSS values syntax for Animations, Transitions, Transforms, Colors, Columns, Text, Fonts, Boxes, Background, Borders, Tables, Positioning, Images, Shapes, Pointers, Inline and more. The property call, as well as the syntax, initial values, inherited status and media applied to are all included.

Animations

Property Syntax Initial value Inherited Media
animation <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> the concatenation of the initial values of its longhand properties:
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
  • animation-play-state: running
no visual
animation-delay <time># 0s no visual
animation-direction <single-animation-direction>#
where <single-animation-direction> = normal | reverse | alternate | alternate-reverse
normal no visual
animation-duration <time># 0s no visual
animation-fill-mode <single-animation-fill-mode>#
where <single-animation-fill-mode> = none | forwards | backwards | both
none no visual
animation-iteration-count <single-animation-iteration-count>#
where <single-animation-iteration-count> = infinite | <number>
1 no visual
animation-name <single-animation-name>#
where <single-animation-name> = none | IDENT
none no visual
animation-play-state <single-animation-play-state>#
where <single-animation-play-state> = running | paused
running no visual
animation-timing-function <timing-function># ease no visual

Transitions

Property Syntax Initial value Inherited Media
transition [ none | <single-transition-property> ] || <time> || <timing-function> || <time> the concatenation of the initial values of its longhand properties:
  • transition-delay: 0s
  • transition-duration: 0s
  • transition-property: all
  • transition-timing-function: ease
no interactive
transition-delay <time># 0s no interactive
transition-duration <time># 0s no interactive
transition-property none | <single-transition-property>#  [ ‘,’ <single-transition-property># ]*
where <single-transition-property> = all | IDENT
all no visual
transition-timing-function <timing-function># ease no interactive

Transforms

Property Syntax Initial value Inherited Media
transform none | <transform-function>+ none no visual
transform-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>? 50% 50% 0 no visual
transform-style flat | preserve-3d flat no visual
perspective none | <length> none no visual
perspective-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] 50% 50% no visual
backface-visibility visible | hidden visible no visual

Color

Property Syntax Initial value Inherited Media
color <color> Varies from one browser to another yes visual
opacity <number> 1.0 no visual

Columns

Property Syntax Initial value Inherited Media
columns <'column-width'> || <'column-count'> the concatenation of the initial values of its longhand properties:
  • column-width: auto
  • column-count: auto
no visual
column-width <length> | auto auto no visual
column-count <number> | auto auto no visual
column-gap <length> | normal normal no visual
column-rule <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> the concatenation of the initial values of its longhand properties:
  • column-rule-width: medium
  • column-rule-style: none
  • column-rule-color: currentColor
no visual
column-rule-color <color> currentColor no visual
column-rule-style <br-style> none no visual
column-rule-width <br-width> medium no visual
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-colum auto no paged
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-colum auto no paged
break-inside auto | avoid | avoid-page | avoid-column auto no paged
column-span none | all none no visual
column-fill auto | balance balance no visual, but, in continuous media, has no effect in overflow columns

Text

Property Syntax Initial value Inherited Media
hyphens none | manual | auto manual yes visual
letter-spacing normal | <length> normal yes visual
word-wrap normal | break-word normal yes visual
overflow-wrap normal | break-word normal yes visual
text-transform none | capitalize | uppercase | lowercase | full-width none yes visual
tab-size <integer> | <length> 8 yes visual
text-align start | end | left | right | center | justify | match-parent | start end 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. yes visual
text-align-last auto | start | end | left | right | center | justify auto yes visual
text-indent <length> | <percentage> && [ hanging || each-line ] 0 yes visual
white-space normal | pre | nowrap | pre-wrap | pre-line normal yes visual
word-break normal | break-all | keep-all normal yes visual
word-spacing normal | <length> normal yes visual
line-break auto | loose | normal | strict auto no visual
text-size-adjust none | auto | <percentage> auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable. yes visual

Text decorations

Property Syntax Initial value Inherited Media
text-decoration <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> the concatenation of the initial values of its longhand properties:
  • text-decoration-color: currentColor
  • text-decoration-style: solid
  • text-decoration-line: none
no visual
text-decoration-color <color> currentColor no visual
text-decoration-style solid | double | dotted | dashed | wavy solid no visual
text-decoration-line none | [ underline || overline || line-through || blink ] none no visual
text-decoration-skip none | [ objects || spaces || ink || edges || box-decoration ] objects yes visual
text-shadow none | <shadow-t>#
where <shadow-t> = [ <length>{2,3} && <color>? ]
none yes visual
text-underline-position auto | [ under || [ left | right ] ] auto yes visual

Writing modes

Property Syntax Initial value Inherited Media
direction ltr | rtl ltr yes visual
unicode-bidi normal | embed | isolate | bidi-override | isolate-override | plaintext normal no visual
writing-mode horizontal-tb | vertical-rl | vertical-lr horizontal-tb yes visual
text-orientation mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation mixed yes visual

Flexible boxes

Property Syntax Initial value Inherited Media
align-content flex-start | flex-end | center | space-between | space-around | stretch stretch no visual
align-items flex-start | flex-end | center | baseline | stretch stretch no visual
align-self auto | flex-start | flex-end | center | baseline | stretch auto no visual
flex-basis content | <'width'> auto no visual
flex-direction row | row-reverse | column | column-reverse row no visual
flex-flow <'flex-direction'> || <'flex-wrap'> the concatenation of the initial values of its longhand properties:
  • flex-direction: row
  • flex-wrap: nowrap
no visual
flex-grow <number> 0 no visual
flex-shrink <number> 1 no visual
flex none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] the concatenation of the initial values of its longhand properties:
  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto
no visual
flex-wrap nowrap | wrap | wrap-reverse nowrap no visual
justify-content flex-start | flex-end | center | space-between | space-around flex-start no visual
order <integer> 0 no visual

Background & Borders

Property Syntax Initial value Inherited Media
background [ <bg-layer> , ]* <final-bg-layer>
where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>
the concatenation of the initial values of its longhand properties:
  • background-image: none
  • background-position: 0% 0%
  • background-size: auto auto
  • background-repeat: repeat
  • background-origin: padding-box
  • background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • background-clip: border-box
  • background-color: transparent
no visual
background-attachment <attachment>#
where <attachment> = scroll | fixed | local
scroll no visual
background-clip <box>#
where <box> = border-box | padding-box | content-box
border-box no visual
background-color <color> transparent no visual
background-image <bg-image>#
where <bg-image> = none | <image>
none no visual
background-origin <box># padding-box no visual
background-position <position># 0% 0% no visual
background-repeat <repeat-style>#
where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat no visual
background-size <bg-size>#
where <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
auto auto no visual
border <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
  • border-width: the concatenation of the initial values of its longhand properties:
    • border-top-width: medium
    • border-right-width: medium
    • border-bottom-width: medium
    • border-left-width: medium
  • border-style: the concatenation of the initial values of its longhand properties:
    • border-top-style: none
    • border-right-style: none
    • border-bottom-style: none
    • border-left-style: none
  • border-color: the concatenation of the initial values of its longhand properties:
    • border-top-color: currentColor
    • border-right-color: currentColor
    • border-bottom-color: currentColor
    • border-left-color: currentColor
no visual
border-bottom <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
  • border-bottom-width: medium
  • border-bottom-style: none
  • border-bottom-color: currentColor
no visual
border-bottom-color <color> currentColor no visual
border-bottom-left-radius [ <length> | <percentage> ]{1,2} 0 no visual
border-bottom-right-radius [ <length> | <percentage> ]{1,2} 0 no visual
border-bottom-style <br-style> none no visual
border-bottom-width <br-width> medium no visual
border-color <color>{1,4} the concatenation of the initial values of its longhand properties:
  • border-top-color: currentColor
  • border-right-color: currentColor
  • border-bottom-color: currentColor
  • border-left-color: currentColor
no visual
border-image <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'> the concatenation of the initial values of its longhand properties:
  • border-image-source: none
  • border-image-slice: 100%
  • border-image-width: 1
  • border-image-outset: 0s
  • border-image-repeat: stretch
no visual
border-image-outset [ <length> | <number> ]{1,4} 0s no visual
border-image-repeat [ stretch | repeat | round ]{1,2} stretch no visual
border-image-slice [<number> | <percentage>]{1,4} && fill? 100% no visual
border-image-source none | <image> none no visual
border-image-width [ <length> | <percentage> | <number> | auto ]{1,4} 1 no visual
border-left <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
  • border-left-width: medium
  • border-left-style: none
  • border-left-color: currentColor
no visual
border-left-color <color> currentColor no visual
border-left-style <br-style> none no visual
border-left-width <br-width> medium no visual
border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? the concatenation of the initial values of its longhand properties:
  • border-top-left-radius: 0
  • border-top-right-radius: 0
  • border-bottom-right-radius: 0
  • border-bottom-left-radius: 0
no visual
border-right <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
  • border-right-width: medium
  • border-right-style: none
  • border-right-color: currentColor
no visual
border-right-color <color> currentColor no visual
border-right-style <br-style> none no visual
border-right-width <br-width> medium no visual
border-style <br-style>{1,4}
where <br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
the concatenation of the initial values of its longhand properties:
  • border-top-style: none
  • border-right-style: none
  • border-bottom-style: none
  • border-left-style: none
no visual
border-top <br-width> || <br-style> || <color> the concatenation of the initial values of its longhand properties:
  • border-top-width: medium
  • border-top-style: none
  • border-top-color: currentColor
no visual
border-top-color <color> currentColor no visual
border-top-left-radius [ <length> | <percentage> ]{1,2} 0 no visual
border-top-right-radius [ <length> | <percentage> ]{1,2} 0 no visual
border-top-style <br-style> none no visual
border-top-width <br-width> medium no visual
border-width <br-width>{1,4}
where <br-width> = <length> | thin | medium | thick
the concatenation of the initial values of its longhand properties:
  • border-top-width: medium
  • border-right-width: medium
  • border-bottom-width: medium
  • border-left-width: medium
no visual

Box Model

Property Syntax Initial value Inherited Media
box-decoration-break slice | clone slice no visual
box-shadow none | <shadow>#
where <shadow> = inset? && [ <length>{2,4} && <color>? ]
none no visual
margin [ <length> | <percentage> | auto ]{1,4} the concatenation of the initial values of its longhand properties:
  • margin-bottom: 0
  • margin-left: 0
  • margin-right: 0
  • margin-top: 0
no visual
margin-bottom <length> | <percentage> | auto 0 no visual
margin-left <length> | <percentage> | auto 0 no visual
margin-right <length> | <percentage> | auto 0 no visual
margin-top <length> | <percentage> | auto 0 no visual
padding [ <length> | <percentage> ]{1,4} the concatenation of the initial values of its longhand properties:
  • padding-bottom: 0
  • padding-left: 0
  • padding-right: 0
  • padding-top: 0
no visual
padding-bottom <length> | <percentage> 0 no visual
padding-left <length> | <percentage> 0 no visual
padding-right <length> | <percentage> 0 no visual
padding-top <length> | <percentage> 0 no visual
box-sizing content-box | padding-box | border-box content-box no visual
max-height <length> | <percentage> | none | max-content | min-content | fit-content | fill-available none no visual
min-height <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available 0 no visual
height auto | <length> | <percentage> auto no visual
max-width <length> | <percentage> | none | max-content | min-content | fit-content | fill-available none no visual
min-width <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available 0 no visual
width [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto auto no visual
overflow visible | hidden | scroll | auto visible no visual
overflow-x visible | hidden | scroll | auto visible no visual
overflow-y visible | hidden | scroll | auto visible no visual
visibility visible | hidden | collapse visible yes visual

Table

Property Syntax Initial value Inherited Media
border-collapse collapse | separate separate yes visual
border-spacing <length> <length>? 0 yes visual
caption-side top | bottom | block-start | block-end | inline-start | inline-end top yes visual
empty-cells show | hide show yes visual
table-layout auto | fixed auto no visual
vertical-align baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> baseline no visual

Positioning

Property Syntax Initial value Inherited Media
bottom <length> | <percentage> | auto auto no visual
left <length> | <percentage> | auto auto no visual
right <length> | <percentage> | auto auto no visual
top <length> | <percentage> | auto auto no visual
float left | right | none none no visual
clear none | left | right | both none no visual
position static | relative | absolute | sticky | fixed static no visual
z-index auto | <integer> auto no visual

Fonts

Property Syntax Initial value Inherited Media
font [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar the concatenation of the initial values of its longhand properties:
  • font-style: normal
  • font-variant: normal
  • font-weight: normal
  • font-stretch: normal
  • font-size: medium
  • line-height: normal
  • font-family: depends on user agent
yes visual
font-family [ <family-name> | <generic-family> ]#
where <family-name> = <string> | <IDENT>+
and <generic-name> = serif | sans-serif | cursive | fantasy | monospace
depends on user agent yes visual
font-variant 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 ] normal yes visual
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal yes visual
font-stretch normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal yes visual
font-size <absolute-size> | <relative-size> | <length> | <percentage>
where <absolute-size> = xx-small | s-small | small | medium | large | x-large | xx-large
and <relative-size> = larger | smaller
medium yes visual
line-height normal | <number> | <length> | <percentage> normal yes visual
font-feature-settings normal | <feature-tag-value>#
where <feature-tag-value> = <string> [ <integer> | on | off ]?
normal yes visual
font-language-override normal | <string> normal yes visual
font-size-adjust none | <number> none yes visual
font-style normal | italic | oblique normal yes visual
font-synthesis none | [ weight || style ] weight style yes visual
font-kerning auto | normal | none auto yes visual
font-variant-ligatures normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
where <common-lig-values> = [ common-ligatures | no-common-ligatures ]
and <discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]
and <historical-lig-values> = [ historical-ligatures | no-historical-ligatures ]
and <contextual-alt-values> = [ contextual | no-contextual ]
normal yes visual
font-variant-position normal | sub | super normal yes visual
font-variant-caps normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps normal yes visual
font-variant-numeric normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]
and <numeric-spacing-values> = [ proportional-nums | tabular-nums ]
and <numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
normal yes visual
font-variant-east-asian normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
and <east-asian-width-values> = [ full-width | proportional-width ]
normal yes visual
font-variant-alternates 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>) ]
where <feature-value-name> = IDENT
normal yes visual

Images

Property Syntax Initial value Inherited Media
object-fit fill | contain | cover | none | scale-down fill yes visual
object-position <position> 50% 50% yes visual
image-rendering auto | crisp-edges | pixelated auto yes visual
image-orientation from-image | <angle> | [<angle>? flip] 0deg yes visual

Counters & Lists

Property Syntax Initial value Inherited Media
counter-increment [<user-ident> <integer>?]+ | none none no all
counter-reset [<user-ident> <integer>?]+ | none none no all
list-style <'list-style-type'> || <'list-style-position'> || <'list-style-image'> the concatenation of the initial values of its longhand properties:
  • list-style-type: disc
  • list-style-position: outside
  • list-style-image: none
yes visual
list-style-image <uri> | none none yes visual
list-style-position inside | outside outside yes visual
list-style-type <custom-ident> | <string> | symbols() | none disc yes visual

Page

Property Syntax Initial value Inherited Media
orphans <integer> 2 yes visual, paged
page-break-after auto | always | avoid | left | right auto no visual, paged
page-break-before auto | always | avoid | left | right auto no visual, paged
page-break-inside auto | avoid auto no visual, paged
widows <integer> 2 yes visual, paged

User interface

Property Syntax Initial value Inherited Media
outline [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] the concatenation of the initial values of its longhand properties:
  • outline-color: invert, for browsers supporting it, currentColor for the other
  • outline-style: none
  • outline-width: medium
no visual, interactive
outline-color <color> | invert invert, for browsers supporting it, currentColor for the other no visual, interactive
outline-width <br-width> medium no visual, interactive
outline-style auto | <br-style> none no visual, interactive
outline-offset <length> 0 no visual, interactive
cursor [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] auto yes visual, interactive
resize none | both | horizontal | vertical none no visual
text-overflow [ clip | ellipsis | <string> ]{1,2} clip no visual

Generated content

Property Syntax Initial value Inherited Media
content normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ normal no all
quotes [<string> <string>]+ | none user agent specific yes visual

Fragmentation

Property Syntax Initial value Inherited Media
box-decoration-break slice | clone slice no visual

Miscellaneous

Property Syntax Initial value Inherited Media
clip <shape> | auto
where <shape> = rect(<top>, <right>, <bottom>, <left>)
auto no visual
display none | inline | block | list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents inline no all
ime-mode auto | normal | active | inactive | disabled auto no interactive
all initial | inherit | unset There is no practical initial value for it. no There is no practical media for it.
will-change auto | <animateable-feature>#
where <animateable-feature> = scroll-position | contents | <custom-ident>
auto no all
text-rendering auto | optimizeSpeed | optimizeLegibility | geometricPrecision auto yes visual

Compositing and Blending

Property Syntax Initial value Inherited Media
background-blend-mode <blend-mode># normal no none
mix-blend-mode <blend-mode> normal no visual
isolation auto | isolate auto no visual

Shapes

Property Syntax Initial value Inherited Media
shape-outside none | <shape-box> || <basic-shape> | <image> none no visual
shape-margin <length> | <percentage> 0 no visual
shape-image-threshold <number> 0.0 no visual

Pointer Events

Property Syntax Initial value Inherited Media
touch-action auto | none | [ pan-x || pan-y ] | manipulation auto no visual
pointer-events auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit auto yes visual

Inline

Property Syntax Initial value Inherited Media
initial-letter normal | [<number> <integer>?] normal no visual
initial-letter-align [ auto | alphabetic | hanging | ideographic ] auto no visual

Display

Property Syntax Initial value Inherited Media
display-inside auto | block | table | flex | grid | ruby auto no all
display-outside block-level | inline-level | run-in | contents | none | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container inline-level no all
display-list none | list-item none no all
box-suppress show | discard | hide show no all

CSSOM View

Property Syntax Initial value Inherited Media
scroll-behavior auto | smooth auto no visual

Logical Properties

Property Syntax Initial value Inherited Media
block-size <'width'> auto no visual
inline-size <'width'> auto no visual
min-block-size <'min-width'> 0 no visual
min-inline-size <'min-width'> 0 no visual
max-block-size <'max-width'> 0 no visual
max-inline-size <'max-width'> 0 no visual
margin-block-start <'margin-left'> 0 no visual
margin-block-end <'margin-left'> 0 no visual
margin-inline-start <'margin-left'> 0 no visual
margin-inline-end <'margin-left'> 0 no visual
offset-block-start <'left'> auto no visual
offset-block-end <'left'> auto no visual
offset-inline-start <'left'> auto no visual
offset-inline-end <'left'> auto no visual
padding-block-start <'padding-left'> 0 no visual
padding-block-end <'padding-left'> 0 no visual
padding-inline-start <'padding-left'> 0 no visual
padding-inline-end <'padding-left'> 0 no visual
border-block-start-width <'border-width'> medium no visual
border-block-end-width <'border-width'> medium no visual
border-inline-start-width <'border-width'> medium no visual
border-inline-end-width <'border-width'> medium no visual
border-block-start-style <'border-style'> none no visual
border-block-end-style <'border-style'> none no visual
border-inline-start-style <'border-style'> none no visual
border-inline-end-style <'border-style'> none no visual
border-block-start-color <'color'> currentcolor no visual
border-block-end-color <'color'> currentcolor no visual
border-inline-start-color <'color'> currentcolor no visual
border-inline-end-color <'color'> currentcolor no visual
border-block-start <'border-width'> || <'border-style'> || <'color'> currentcolor no visual
border-block-end <'border-width'> || <'border-style'> || <'color'> currentcolor no visual
border-inline-start <'border-width'> || <'border-style'> || <'color'> currentcolor no visual
border-inline-end <'border-width'> || <'border-style'> || <'color'> currentcolor no visual

Ruby

Property Syntax Initial value Inherited Media
ruby-position over | under | inter-character over yes visual
ruby-merge separate | collapse | auto separate yes visual
ruby-align start | center | space-between | space-around space-around yes visual

Scroll Snap Points

Property Syntax Initial value Inherited Media
scroll-snap-type none | mandatory | proximity none no interactive
scroll-snap-points-x none | repeat(<length>) none no interactive
scroll-snap-points-y none | repeat(<length>) none no interactive
scroll-snap-destination <position> 0px 0px no interactive
scroll-snap-coordinate none | <position># none no interactive

Device Adaption

Property Syntax Initial value Inherited Media
@viewport/min-width <viewport-length> auto no visual, continuous
@viewport/max-width <viewport-length> auto no visual, continuous
@viewport/width <viewport-length>{1,2} the concatenation of the initial values of its longhand properties:
  • @viewport/min-width: auto
  • @viewport/max-width: auto
no visual, continuous
@viewport/min-height <viewport-length> auto no visual, continuous
@viewport/max-height <viewport-length> auto no visual, continuous
@viewport/height <viewport-length>{1,2} the concatenation of the initial values of its longhand properties:
  • @viewport/min-height: auto
  • @viewport/max-height: auto
no visual, continuous
@viewport/zoom auto | <number> | <percentage> auto no visual, continuous
@viewport/min-zoom auto | <number> | <percentage> auto no visual, continuous
@viewport/max-zoom auto | <number> | <percentage> auto no visual, continuous
@viewport/user-zoom zoom | fixed zoom no visual, continuous
@viewport/orientation auto | portrait | landscape auto no visual, continuous

Counter Style

Property Syntax Initial value Inherited Media
@counter-style/system cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ] symbolic    
@counter-style/range [[<integer> | infinite ] {2,2}#] | auto auto    
@counter-style/prefix <symbol> empty string    

文档标签和贡献者

向此页面作出贡献: teoli, ziyunfei
最后编辑者: ziyunfei,