CSS values serialization

  • Revision slug: Web/CSS/CSS_values_serialization
  • Revision title: CSS values serialization
  • Revision id: 414101
  • Created:
  • Creator: Marsf
  • Is current revision? No
  • Comment add the text-shadow property

Revision Content

This page lists all CSS properties and indicates on which elements they have effects, how their computed values is calculated and the canonical order to use when serializing values.

Animations
Property Applies to Computed value Canonical order
{{cssxref("animation")}} {{cssappliestostartdef("animation")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedshorthand("animation", "animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state")}} {{cssorderofappearancedef("animation")}}
{{cssxref("animation-delay")}} {{cssappliestostartdef("animation-delay")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-delay")}} {{cssuniqueorderdef("animation-delay")}}
{{cssxref("animation-direction")}} {{cssappliestostartdef("animation-direction")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-direction")}} {{cssuniqueorderdef("animation-direction")}}
{{cssxref("animation-duration")}} {{cssappliestostartdef("animation-duration")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-duration")}} {{cssuniqueorderdef("animation-duration")}}
{{cssxref("animation-fill-mode")}} {{cssappliestostartdef("animation-fill-mode")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-fill-mode")}} {{cssuniqueorderdef("animation-fill-mode")}}
{{cssxref("animation-iteration-count")}} {{cssappliestostartdef("animation-iteration-count")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-iteration-count")}} {{cssuniqueorderdef("animation-iteration-count")}}
{{cssxref("animation-name")}} {{cssappliestostartdef("animation-name")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-name")}} {{cssuniqueorderdef("animation-name")}}
{{cssxref("animation-play-state")}} {{cssappliestostartdef("animation-play-state")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-play-state")}} {{cssuniqueorderdef("animation-play-state")}}
{{cssxref("animation-timing-function")}} {{cssappliestostartdef("animation-timing-function")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("animation-timing-function")}} {{cssuniqueorderdef("animation-timing-function")}}
as
Property Applies to Computed value Canonical order
{{cssxref("transition")}} {{cssappliestostartdef("transition")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("transition")}} {{cssorderofappearancedef("transition")}}
{{cssxref("transition-delay")}} {{cssappliestostartdef("transition-delay")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("transition-delay")}} {{cssuniqueorderdef("transition-delay")}}
{{cssxref("transition-duration")}} {{cssappliestostartdef("transition-duration")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("transition-duration")}} {{cssuniqueorderdef("transition-duration")}}
{{cssxref("transition-property")}} {{cssappliestostartdef("transition-property")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("transition-property")}} {{cssuniqueorderdef("transition-property")}}
{{cssxref("transition-timing-function")}} {{cssappliestostartdef("transition-timing-function")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("transition-timing-function")}} {{cssuniqueorderdef("transition-timing-function")}}
Transforms
Property Applies to Computed value Canonical order
{{cssxref("transform")}} {{cssappliestodef("transform", "transformable elements")}} {{csscomputeddef("transform", "as specified, but with relative lengths converted into absolute lengths")}} {{cssuniqueorderdef("transform")}}
{{cssxref("transform-origin")}} {{cssappliestodef("transform-origin", "transformable elements")}} {{csscomputedstartdef("transform-origin")}}for {{xref_csslength()}} the absolute value, otherwise a percentage{{csscomputedenddef}} {{cssorderdef("transform-origin", "One or two values, with length made absolute and keywords translated to percentages")}}
{{cssxref("transform-style")}} {{cssappliestodef("transform-style", "transformable elements")}} {{csscomputedasspecifieddef("transform-style")}} {{cssuniqueorderdef("transform-style")}}
{{cssxref("perspective")}} {{cssappliestodef("perspective", "transformable elements")}} {{csscomputedstartdef("perspective")}}the absolute length or none{{csscomputedenddef}} {{cssuniqueorderdef("perspective")}}
{{cssxref("perspective-origin")}} {{cssappliestodef("perspective-origin", "transformable elements")}} {{csscomputedstartdef("perspective-origin")}}for {{xref_csslength()}} the absolute value, otherwise a percentage{{csscomputedenddef}} {{cssorderdef("perspective-origin", "One or two values, with length made absolute and keywords translated to percentages")}}
{{cssxref("backface-visibility")}} {{cssappliestodef("backface-visibility", "transformable elements")}} {{csscomputedasspecifieddef("backface-visibility")}} {{cssuniqueorderdef("backface-visibility")}}
Color
Property Applies to Computed value Canonical order
{{cssxref("color")}} {{cssappliestodef("color", "all elements")}} {{csscomputedstartdef("color")}}If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).{{csscomputedenddef}} {{cssuniqueorderdef("color")}}
{{cssxref("opacity")}} {{cssappliestodef("opacity", "all elements")}} {{csscomputedstartdef("opacity")}}the specified value, clipped in the range [0,1]{{csscomputedenddef}} {{cssuniqueorderdef("opacity")}}
Columns
Property Applies to Computed value Canonical order
{{cssxref("columns")}} {{cssappliestostartdef("columns")}}non-replaced block or table elements, table-cell or inline-block elements{{cssappliestoenddef}} {{csscomputedshorthand("columns", "column-width column-count")}} {{cssorderofappearancedef("columns")}}
{{cssxref("column-width")}} {{cssappliestostartdef("column-width")}}non-replaced block or table elements, table-cell or inline-block elements{{cssappliestoenddef}} {{csscomputeddef("column-width", "the absolute length, zero or larger")}} {{cssuniqueorderdef("column-width")}}
{{cssxref("column-count")}} {{cssappliestostartdef("column-count")}}non-replaced block or table elements, table-cell or inline-block elements{{cssappliestoenddef}} {{csscomputedasspecifieddef("column-count")}} {{cssuniqueorderdef("column-count")}}
{{cssxref("column-gap")}} {{cssappliestodef("column-gap", "multicol elements")}} {{csscomputedstartdef("column-gap")}}the absolute length or the keyword normal{{csscomputedenddef}} {{cssuniqueorderdef("column-gap")}}
{{cssxref("column-rule")}} {{cssappliestodef("column-rule", "multicol elements")}} {{csscomputedshorthand("column-rule", "column-rule-color column-rule-style column-rule-width")}} {{cssorderofappearancedef("column-rule")}}
{{cssxref("column-rule-color")}} {{cssappliestodef("column-rule-color", "multicol elements")}} {{csscomputedcolordef("column-rule-color")}} {{cssuniqueorderdef("column-rule-color")}}
{{cssxref("column-rule-style")}} {{cssappliestodef("column-rule-style", "multicol elements")}} {{csscomputedasspecifieddef("column-rule-style")}} {{cssuniqueorderdef("column-rule-style")}}
{{cssxref("column-rule-width")}} {{cssappliestodef("column-rule-width", "multicol elements")}} {{csscomputedstartdef("column-rule-width")}}an absolute length; 0 if the column rule style is none or hidden{{csscomputedenddef}} {{cssuniqueorderdef("column-rule-width")}}
{{cssxref("break-before")}} {{cssappliestodef("break-before", "block-level elements")}} {{csscomputedasspecifieddef("break-before")}} {{cssuniqueorderdef("break-before")}}
{{cssxref("break-after")}} {{cssappliestodef("break-after", "block-level elements")}} {{csscomputedasspecifieddef("break-after")}} {{cssuniqueorderdef("break-after")}}
{{cssxref("break-inside")}} {{cssappliestodef("break-inside", "block-level elements")}} {{csscomputedasspecifieddef("break-inside")}} {{cssuniqueorderdef("break-inside")}}
{{cssxref("column-span")}} {{cssappliestodef("column-span", "in-flow block-level elements")}}
{{csscomputedasspecifieddef("column-span")}}
{{cssuniqueorderdef("column-span")}}
{{cssxref("column-fill")}} {{cssappliestodef("column-fill", "multicol elements")}}
{{csscomputedasspecifieddef("column-fill")}}
{{cssuniqueorderdef("column-fill")}}
Text
Property Applies to Computed value Canonical order
{{cssxref("hyphens")}} {{cssappliestodef("hyphens", "all elements")}}
{{csscomputedasspecifieddef("hyphens")}}
{{cssuniqueorderdef("hyphens")}}
{{cssxref("letter-spacing")}} {{cssappliestodef("letter-spacing", "all elements")}}
{{csscomputedstartdef("letter-spacing")}}an optimum value consisting of either an absolute length or the keyword normal{{csscomputedenddef}}
{{cssuniqueorderdef("letter-spacing")}}
{{cssxref("word-wrap")}} {{cssappliestodef("word-wrap", "all elements")}}
{{csscomputedasspecifieddef("word-wrap")}}
{{cssuniqueorderdef("word-wrap")}}
{{cssxref("overflow-wrap")}} {{cssappliestodef("overflow-wrap", "all elements")}}
{{csscomputedasspecifieddef("overflow-wrap")}}
{{cssuniqueorderdef("overflow-wrap")}}
{{cssxref("text-transform")}} {{cssappliestodef("text-transform", "all elements")}}
{{csscomputedasspecifieddef("text-transform")}}
{{cssuniqueorderdef("text-transform")}}
{{cssxref("tab-size")}} {{cssappliestodef("tab-size", "block containers")}} {{csscomputeddef("tab-size", "the specified integer or an absolute length")}} {{cssuniqueorderdef("tab-size")}}
{{cssxref("text-align")}} {{cssappliestodef("text-align", "block containers")}} {{csscomputedstartdef("text-align")}}as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right{{csscomputedenddef}} {{cssorderofappearancedef("text-align")}}
{{cssxref("text-align-last")}} {{cssappliestodef("text-align-last", "block containers")}}
{{csscomputedasspecifieddef("text-align-last")}}
{{cssuniqueorderdef("text-align-last")}}
{{cssxref("text-indent")}} {{cssappliestodef("text-indent", "block containers")}} {{csscomputeddef("text-indent", "the percentage as specified or the absolute length, plus any keywords as specified")}} {{cssorderdef("text-indent", "the length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.")}}
{{cssxref("direction")}} {{cssappliestodef("direction", "all elements")}} {{csscomputedasspecifieddef("direction")}} {{cssuniqueorderdef("direction")}}
{{cssxref("white-space")}} {{cssappliestodef("white-space", "all elements")}} {{csscomputedasspecifieddef("white-space")}} {{cssuniqueorderdef("white-space")}}
{{cssxref("word-break")}} {{cssappliestodef("word-break", "all elements")}} {{csscomputedasspecifieddef("word-break")}} {{cssuniqueorderdef("word-break")}}
{{cssxref("word-spacing")}} {{cssappliestodef("word-spacing", "all elements")}}
{{csscomputedstartdef("word-spacing")}}an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal{{csscomputedenddef}}
{{cssuniqueorderdef("word-spacing")}}
Text decorations
Property Applies to Computed value Canonical order
{{cssxref("text-decoration")}} {{cssappliestodef("text-decoration", "all elements")}} {{csscomputedshorthand("text-decoration", "text-decoration-line text-decoration-style text-decoration-color")}} {{cssorderofappearancedef("text-decoration")}}
{{cssxref("text-decoration-color")}} {{cssappliestodef("text-decoration-color", "all elements")}} {{csscomputedcolordef("text-decoration-color")}} {{cssuniqueorderdef("text-decoration-color")}}
{{cssxref("text-decoration-style")}} {{cssappliestodef("text-decoration-style", "all elements")}} {{csscomputedasspecifieddef("text-decoration-style")}} {{cssuniqueorderdef("text-decoration-style")}}
{{cssxref("text-decoration-line")}} {{cssappliestodef("text-decoration-line", "all elements")}} {{csscomputedasspecifieddef("text-decoration-line")}} {{cssorderofappearancedef("text-decoration-line")}}
{{cssxref("text-decoration-skip")}} {{cssappliestodef("text-decoration-skip", "all elements")}} {{csscomputedasspecifieddef("text-decoration-skip")}} {{cssorderofappearancedef("text-decoration-skip")}}
{{cssxref("text-shadow")}} {{cssappliestodef("text-shadow", "all elements")}} {{csscomputeddef("text-shadow", "a color plus three absolute lengths")}} {{cssuniqueorderdef("text-shadow")}}
{{cssxref("text-underline-position")}} {{cssappliestodef("text-underline-position", "all elements")}} {{csscomputedasspecifieddef("text-underline-position")}} {{cssorderofappearancedef("text-underline-position")}}
Flexible boxes
Property Applies to Computed value Canonical order
{{cssxref("align-content")}} {{cssappliestodef("align-content", "multi-line flex containers")}} {{csscomputedasspecifieddef("align-content")}} {{cssuniqueorderdef("align-content")}}
{{cssxref("align-items")}} {{cssappliestodef("align-items", "flex containers")}} {{csscomputedasspecifieddef("align-items")}} {{cssuniqueorderdef("align-items")}}
{{cssxref("align-self")}} {{cssappliestodef("align-self", "flex items")}} {{csscomputeddef("align-self", "auto computes to parent's align-items; otherwise as specified")}} {{cssuniqueorderdef("align-self")}}
{{cssxref("flex-basis")}} {{cssappliestodef("flex-basis", "flex items")}} {{csscomputeddef("flex-basis", "as specified, with lengths made absolute")}} {{cssorderstartdef("flex-basis")}}{{cssorder("width")}}{{cssorderenddef}}
{{cssxref("flex-direction")}} {{cssappliestodef("flex-direction", "flex containers")}} {{csscomputedasspecifieddef("flex-direction")}} {{cssuniqueorderdef("flex-direction")}}
{{cssxref("flex-flow")}} {{cssappliestodef("flex-flow", "flex containers")}} {{csscomputedshorthand("flex-flow", "flex-direction flex-wrap")}} {{cssorderofappearancedef("flex-flow")}}
{{cssxref("flex-grow")}} {{cssappliestodef("flex-grow", "flex items")}} {{csscomputedasspecifieddef("flex-grow")}} {{cssuniqueorderdef("flex-grow")}}
{{cssxref("flex-shrink")}} {{cssappliestodef("flex-shrink", "flex items")}} {{csscomputedasspecifieddef("flex-shrink")}} {{cssuniqueorderdef("flex-shrink")}}
{{cssxref("flex")}} {{cssappliestodef("flex", "flex items")}} {{csscomputedshorthand("flex", "flex-grow flex-shrink flex-basis")}} {{cssorderofappearancedef("flex")}}
{{cssxref("flex-wrap")}} {{cssappliestodef("flex-wrap", "flex containers")}} {{csscomputedasspecifieddef("flex-wrap")}} {{cssuniqueorderdef("flex-wrap")}}
{{cssxref("justify-content")}} {{cssappliestodef("justify-content", "flex containers")}} {{csscomputedasspecifieddef("justify-content")}} {{cssuniqueorderdef("justify-content")}}
{{cssxref("order")}} {{cssappliestodef("order", "flex items and absolutely-positioned flex container children")}} {{csscomputedasspecifieddef("order")}} {{cssuniqueorderdef("order")}}
Background & Borders
Property Applies to Computed value Canonical order
{{cssxref("background")}} {{cssappliestodef("background", "all elements")}} {{csscomputedshorthand("background", "background-color background-image background-clip background-position background-size background-repeat background-attachment")}} {{cssorderofappearancedef("background")}}
{{cssxref("background-attachment")}} {{cssappliestodef("background-attachment", "all elements")}} {{csscomputedasspecifieddef("background-attachment")}} {{cssuniqueorderdef("background-attachment")}}
{{cssxref("background-clip")}} {{cssappliestodef("background-clip", "all elements")}} {{csscomputedasspecifieddef("background-clip")}} {{cssuniqueorderdef("background-clip")}}
{{cssxref("background-color")}} {{cssappliestodef("background-color", "all elements")}} {{csscomputedcolordef("background-color")}} {{cssuniqueorderdef("background-color")}}
{{cssxref("background-image")}} {{cssappliestodef("background-image", "all elements")}} {{csscomputeddef("background-image", "as specified, but with URIs made absolute")}} {{cssuniqueorderdef("background-image")}}
{{cssxref("background-origin")}} {{cssappliestodef("background-origin", "all elements")}} {{csscomputedasspecifieddef("background-origin")}} {{cssuniqueorderdef("background-origin")}}
{{cssxref("background-position")}} {{cssappliestodef("background-position", "all elements")}} {{csscomputedstartdef("background-position")}}a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a {{xref_csslength}}), otherwise as a percentage{{csscomputedenddef}} {{cssuniqueorderdef("background-position")}}
{{cssxref("background-repeat")}} {{cssappliestodef("background-repeat", "all elements")}} {{csscomputeddef("background-repeat", "a list, each item consisting of two keywords, one per dimension")}} {{cssuniqueorderdef("background-repeat")}}
{{cssxref("background-size")}} {{cssappliestodef("background-size", "all elements")}} {{csscomputeddef("background-size", "as specified, with lengths made absolute")}} {{cssuniqueorderdef("background-size")}}
{{cssxref("border")}} {{cssappliestodef("border", "all elements")}} {{csscomputedshorthand("border", "border-width border-style border-color")}} {{cssorderofappearancedef("border")}}
{{cssxref("border-bottom")}} {{cssappliestodef("border-bottom", "all elements")}} {{csscomputedshorthand("border-bottom", "border-bottom-width border-bottom-style border-bottom-color")}} {{cssorderofappearancedef("border-bottom")}}
{{cssxref("border-bottom-color")}} {{cssappliestodef("border-bottom-color", "all elements")}} {{csscomputedcolordef("border-bottom-color")}} {{cssuniqueorderdef("border-bottom-color")}}
{{cssxref("border-bottom-left-radius")}} {{cssappliestostartdef("border-bottom-left-radius")}}all elements; but UA are not required to apply to table and inline-table elements when {{cssxref("border-collapse")}} is collapse. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}} {{csscomputeddef("border-bottom-left-radius", "two absolute length or percentages")}} {{cssuniqueorderdef("border-bottom-left-radius")}}
{{cssxref("border-bottom-right-radius")}} {{cssappliestostartdef("border-bottom-right-radius")}}all elements; but UA are not required to apply to table and inline-table elements when {{cssxref("border-collapse")}} is collapse. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}} {{csscomputeddef("border-bottom-right-radius", "two absolute length or percentages")}} {{cssuniqueorderdef("border-bottom-right-radius")}}
{{cssxref("border-bottom-style")}} {{cssappliestodef("border-bottom-style", "all elements")}} {{csscomputedasspecifieddef("border-bottom-style")}} {{cssuniqueorderdef("border-bottom-style")}}
{{cssxref("border-bottom-width")}} {{cssappliestodef("border-bottom-width", "all elements")}} {{csscomputedstartdef("border-bottom-width")}}the absolute length or 0 if {{cssxref("border-bottom-style")}} is none or hidden{{csscomputedenddef}} {{cssuniqueorderdef("border-bottom-width")}}
{{cssxref("border-color")}} {{cssappliestodef("border-color", "all elements")}} {{csscomputedshorthand("border-color", "border-bottom-color border-left-color border-right-color border-top-color")}} {{cssuniqueorderdef("border-color")}}
{{cssxref("border-image")}} {{cssappliestoshorthand("border-image", "border-image-outset border-image-repeat border-image-slice border-image-source border-image-width")}} {{csscomputedshorthand("border-image", "border-image-outset border-image-repeat border-image-slice border-image-source border-image-width")}} {{cssuniqueorderdef("border-image")}}
{{cssxref("border-image-outset")}} {{cssappliestostartdef("border-image-outset")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is collapse{{cssappliestoenddef}} {{csscomputeddef("border-image-outset", "all lengths made absolute, otherwise as specified")}} {{cssuniqueorderdef("border-image-outset")}}
{{cssxref("border-image-repeat")}} {{cssappliestostartdef("border-image-repeat")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is collapse{{cssappliestoenddef}} {{csscomputedasspecifieddef("border-image-repeat")}} {{cssuniqueorderdef("border-image-repeat")}}
{{cssxref("border-image-slice")}} {{cssappliestostartdef("border-image-slice")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is collapse{{cssappliestoenddef}} {{csscomputedstartdef("border-image-slice")}}one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified{{csscomputedenddef}} {{cssorderstartdef("border-image-slice")}}the percentages or lengths, eventually followed by the keyword fill{{cssorderenddef}}
{{cssxref("border-image-source")}} {{cssappliestostartdef("border-image-source")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is collapse{{cssappliestoenddef}} {{csscomputeddef("border-image-source", "none or the image with its URI made absolute")}} {{cssuniqueorderdef("border-image-source")}}
{{cssxref("border-image-width")}} {{cssappliestostartdef("border-image-width")}}all elements, except table elements when {{cssxref("border-collapse")}} is collapse{{cssappliestoenddef}} {{csscomputeddef("border-image-width", "all lengths made absolute, otherwise as specified")}} {{cssuniqueorderdef("border-image-width")}}
{{cssxref("border-left")}} {{cssappliestodef("border-left", "all elements")}} {{csscomputedshorthand("border-left", "border-left-width border-left-style border-left-color")}} {{cssorderofappearancedef("border-left")}}
{{cssxref("border-left-color")}} {{cssappliestodef("border-left-color", "all elements")}} {{csscomputedcolordef("border-left-color")}} {{cssuniqueorderdef("border-left-color")}}
{{cssxref("border-left-style")}} {{cssappliestodef("border-left-style", "all elements")}} {{csscomputedasspecifieddef("border-left-style")}} {{cssuniqueorderdef("border-left-style")}}
{{cssxref("border-left-width")}} {{cssappliestodef("border-left-width", "all elements")}} {{csscomputedstartdef("border-left-width")}}the absolute length or 0 if {{cssxref("border-left-style")}} is none or hidden{{csscomputedenddef}} {{cssuniqueorderdef("border-left-width")}}
{{cssxref("border-radius")}} {{cssappliestostartdef("border-radius")}}all elements; but UA are not required to apply to table and inline-table elements when {{cssxref("border-collapse")}} is collapse. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}} {{csscomputedshorthand("border-radius", "border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius")}} {{cssuniqueorderdef("border-radius")}}
{{cssxref("border-right")}} {{cssappliestodef("border-right", "all elements")}} {{csscomputedshorthand("border-right", "border-right-width border-right-style border-right-color")}} {{cssorderofappearancedef("border-right")}}
{{cssxref("border-right-color")}} {{cssappliestodef("border-right-color", "all elements")}} {{csscomputedcolordef("border-right-color")}} {{cssuniqueorderdef("border-right-color")}}
{{cssxref("border-right-style")}} {{cssappliestodef("border-right-style", "all elements")}} {{csscomputedasspecifieddef("border-right-style")}} {{cssuniqueorderdef("border-right-style")}}
{{cssxref("border-right-width")}} {{cssappliestodef("border-right-width", "all elements")}} {{csscomputedstartdef("border-right-width")}}the absolute length or 0 if {{cssxref("border-right-style")}} is none or hidden{{csscomputedenddef}} {{cssuniqueorderdef("border-right-width")}}
{{cssxref("border-style")}} {{cssappliestodef("border-style", "all elements")}} {{csscomputedshorthand("border-style", "border-bottom-style border-left-style border-right-style border-top-style")}} {{cssuniqueorderdef("border-style")}}
{{cssxref("border-top")}} {{cssappliestodef("border-top", "all elements")}} {{csscomputedshorthand("border-top", "border-top-width border-top-style border-top-color")}} {{cssorderofappearancedef("border-top")}}
{{cssxref("border-top-color")}} {{cssappliestodef("border-top-color", "all elements")}} {{csscomputedcolordef("border-top-color")}} {{cssuniqueorderdef("border-top-color")}}
{{cssxref("border-top-left-radius")}} {{cssappliestostartdef("border-top-left-radius")}}all elements; but UA are not required to apply to table and inline-table elements when {{cssxref("border-collapse")}} is collapse. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}} {{csscomputeddef("border-top-left-radius", "two absolute length or percentages")}} {{cssuniqueorderdef("border-top-left-radius")}}
{{cssxref("border-top-right-radius")}} {{cssappliestostartdef("border-top-right-radius")}}all elements; but UA are not required to apply to table and inline-table elements when {{cssxref("border-collapse")}} is collapse. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}} {{csscomputeddef("border-top-right-radius", "two absolute length or percentages")}} {{cssuniqueorderdef("border-top-right-radius")}}
{{cssxref("border-top-style")}} {{cssappliestodef("border-top-style", "all elements")}} {{csscomputedasspecifieddef("border-top-style")}} {{cssuniqueorderdef("border-top-style")}}
{{cssxref("border-top-width")}} {{cssappliestodef("border-top-width", "all elements")}} {{csscomputedstartdef("border-top-width")}}the absolute length or 0 if {{cssxref("border-top-style")}} is none or hidden{{csscomputedenddef}} {{cssuniqueorderdef("border-top-width")}}
{{cssxref("border-width")}} {{cssappliestodef("border-width", "all elements")}} {{csscomputedshorthand("border-width", "border-bottom-width border-left-width border-right-width border-top-width")}} {{cssuniqueorderdef("border-width")}}
Box Model
Property Applies to Computed value Canonical order
{{cssxref("box-decoration-break")}} {{cssappliestodef("box-decoration-break", "all elements")}} {{csscomputedasspecifieddef("box-decoration-break")}} {{cssuniqueorderdef("box-decoration-break")}}
{{cssxref("box-shadow")}} {{cssappliestodef("box-shadow", "all elements")}} {{csscomputeddef("box-shadow", "any length made absolute; any specified color computed; otherwise as specified")}} {{cssuniqueorderdef("box-shadow")}}
{{cssxref("margin")}} {{cssappliestostartdef("margin")}}all elements except elements with table {{cssxref("display")}} types other than table-caption, table and inline-table{{cssappliestoenddef}} {{csscomputedshorthand("margin", "margin-bottom margin-left margin-right margin-top")}} {{cssuniqueorderdef("margin")}}
{{cssxref("margin-bottom")}} {{cssappliestostartdef("margin-bottom")}}all elements except elements with table {{cssxref("display")}} types other than table-caption, table and inline-table{{cssappliestoenddef}} {{csscomputeddef("margin-bottom", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("margin-bottom")}}
{{cssxref("margin-left")}} {{cssappliestostartdef("margin-left")}}all elements except elements with table {{cssxref("display")}} types other than table-caption, table and inline-table{{cssappliestoenddef}} {{csscomputeddef("margin-left", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("margin-left")}}
{{cssxref("margin-right")}} {{cssappliestostartdef("margin-right")}}all elements except elements with table {{cssxref("display")}} types other than table-caption, table and inline-table{{cssappliestoenddef}} {{csscomputeddef("margin-right", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("margin-right")}}
{{cssxref("margin-top")}} {{cssappliestostartdef("margin-top")}}all elements except elements with table {{cssxref("display")}} types other than table-caption, table and inline-table{{cssappliestoenddef}} {{csscomputeddef("margin-top", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("margin-top")}}
{{cssxref("padding")}} {{cssappliestostartdef("padding")}}all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column{{cssappliestoenddef}} {{csscomputedshorthand("padding", "padding-bottom padding-left padding-right padding-top")}} {{cssuniqueorderdef("padding")}}
{{cssxref("padding-bottom")}} {{cssappliestostartdef("padding-bottom")}}all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column{{cssappliestoenddef}} {{csscomputeddef("padding-bottom", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("padding-bottom")}}
{{cssxref("padding-left")}} {{cssappliestostartdef("padding-left")}}all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column{{cssappliestoenddef}} {{csscomputeddef("padding-left", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("padding-left")}}
{{cssxref("padding-right")}} {{cssappliestostartdef("padding-right")}}all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column{{cssappliestoenddef}} {{csscomputeddef("padding-right", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("padding-right")}}
{{cssxref("padding-top")}} {{cssappliestostartdef("padding-top")}}all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column{{cssappliestoenddef}} {{csscomputeddef("padding-top", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("padding-top")}}
{{cssxref("box-sizing")}} {{cssappliestodef("box-sizing", "all elements that accept width or height")}} {{csscomputedasspecifieddef("box-sizing")}} {{cssuniqueorderdef("box-sizing")}}
{{cssxref("max-height")}} {{cssappliestodef("max-height", "all elements but non-replaced inline elements, table columns, and column groups")}} {{csscomputedstartdef("max-height")}}the percentage as specified or the absolute length or none{{csscomputedenddef}} {{cssuniqueorderdef("max-height")}}
{{cssxref("min-height")}} {{cssappliestodef("min-height", "all elements but non-replaced inline elements, table columns, and column groups")}} {{csscomputeddef("min-height", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("min-height")}}
{{cssxref("height")}} {{cssappliestodef("height", "all elements but non-replaced inline elements, table columns, and column groups")}} {{csscomputedstartdef("height")}}a percentage or auto or the absolute length{{csscomputedenddef}} {{cssuniqueorderdef("height")}}
{{cssxref("max-width")}} {{cssappliestodef("max-width", "all elements but non-replaced inline elements, table rows, and row groups")}} {{csscomputedstartdef("max-width")}}the percentage as specified or the absolute length or none{{csscomputedenddef}} {{cssuniqueorderdef("max-width")}}
{{cssxref("min-width")}} {{cssappliestodef("min-width", "all elements but non-replaced inline elements, table rows, and row groups")}} {{csscomputeddef("min-width", "the percentage as specified or the absolute length")}} {{cssuniqueorderdef("min-width")}}
{{cssxref("width")}} {{cssappliestodef("width", "all elements but non-replaced inline elements, table rows, and row groups")}} {{csscomputedstartdef("width")}}the percentage or auto as specified or the absolute length{{csscomputedenddef}} {{cssorderdef("width", "the length or percentage before the keyword, if both are present")}}
{{cssxref("overflow")}} {{cssappliestodef("overflow", "non-replaced block-level elements and non-replaced inline-block elements")}} {{csscomputedasspecifieddef("overflow")}} {{cssuniqueorderdef("overflow")}}
{{cssxref("overflow-x")}} {{cssappliestodef("overflow-x", "non-replaced block-level elements and non-replaced inline-block elements")}} {{csscomputedasspecifieddef("overflow-x")}} {{cssuniqueorderdef("overflow-x")}}
{{cssxref("overflow-y")}} {{cssappliestodef("overflow-y", "non-replaced block-level elements and non-replaced inline-block elements")}} {{csscomputedasspecifieddef("overflow-y")}} {{cssuniqueorderdef("overflow-y")}}
{{cssxref("visibility")}} {{cssappliestodef("visibility", "all elements")}} {{csscomputedasspecifieddef("visibility")}} {{cssuniqueorderdef("visibility")}}
Table
Property Applies to Computed value Canonical order
{{cssxref("border-collapse")}} {{cssappliestodef("border-collapse", "table and inline-table elements")}} {{csscomputedasspecifieddef("border-collapse")}} {{cssuniqueorderdef("border-collapse")}}
{{cssxref("border-spacing")}} {{cssappliestodef("border-spacing", "table and inline-table elements")}} {{csscomputeddef("border-spacing", "two absolute lengths")}} {{cssuniqueorderdef("border-spacing")}}
{{cssxref("caption-side")}} {{cssappliestodef("caption-side", "table-caption elements")}} {{csscomputedasspecifieddef("caption-side")}} {{cssuniqueorderdef("caption-side")}}
{{cssxref("empty-cells")}} {{cssappliestodef("empty-cells", "table-cell elements")}} {{csscomputedasspecifieddef("empty-cells")}} {{cssuniqueorderdef("empty-cells")}}
{{cssxref("table-layout")}} {{cssappliestodef("table-layout", "table and inline-table elements")}} {{csscomputedasspecifieddef("table-layout")}} {{cssuniqueorderdef("table-layout")}}
{{cssxref("vertical-align")}} {{cssappliestodef("vertical-align", "inline-level and table-cell elements")}} {{csscomputeddef("vertical-align", "for percentage and length values, the absolute length, otherwise the keyword as specified")}} {{cssuniqueorderdef("vertical-align")}}
Positioning
Property Applies to Computed value Canonical order
{{cssxref("bottom")}} {{cssappliestodef("bottom", "positioned elements")}} {{csscomputedstartdef("bottom")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto{{csscomputedenddef}} {{cssuniqueorderdef("bottom")}}
{{cssxref("left")}} {{cssappliestodef("left", "positioned elements")}} {{csscomputedstartdef("left")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto{{csscomputedenddef}} {{cssuniqueorderdef("left")}}
{{cssxref("right")}} {{cssappliestodef("right", "positioned elements")}} {{csscomputedstartdef("right")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto{{csscomputedenddef}} {{cssuniqueorderdef("right")}}
{{cssxref("top")}} {{cssappliestodef("top", "positioned elements")}} {{csscomputedstartdef("top")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto{{csscomputedenddef}} {{cssuniqueorderdef("top")}}
{{cssxref("float")}} {{cssappliestodef("float", "all elements, but has no effect if the value of display is none.")}} {{csscomputedasspecifieddef("float")}} {{cssuniqueorderdef("float")}}
{{cssxref("clear")}} {{cssappliestodef("clear", "block-level elements")}} {{csscomputedasspecifieddef("clear")}} {{cssuniqueorderdef("clear")}}
{{cssxref("position")}} {{cssappliestodef("position", "all elements")}} {{csscomputedasspecifieddef("position")}} {{cssuniqueorderdef("position")}}
{{cssxref("z-index")}} {{cssappliestodef("z-index", "positioned elements")}} {{csscomputedasspecifieddef("z-index")}} {{cssuniqueorderdef("z-index")}}
Fonts
Property Applies to Computed value Canonical order
{{cssxref("font")}} {{cssappliestodef("font", "all elements")}} {{csscomputedshorthand("font", "font-style font-variant font-weight font-stretch font-size line-height font-family")}} {{cssorderofappearancedef("font")}}
{{cssxref("font-family")}} {{cssappliestodef("font-family", "all elements")}} {{csscomputedasspecifieddef("font-family")}} {{cssuniqueorderdef("font-family")}}
{{cssxref("font-variant")}} {{cssappliestodef("font-variant", "all elements")}} {{csscomputedasspecifieddef("font-variant")}} {{cssuniqueorderdef("font-variant")}}
{{cssxref("font-weight")}} {{cssappliestodef("font-weight", "all elements")}} {{csscomputedstartdef("font-weight")}}the keyword or the numerical value as specified, with bolder and lighter transformed to the real value{{csscomputedenddef}} {{cssuniqueorderdef("font-weight")}}
{{cssxref("font-stretch")}} {{cssappliestodef("font-stretch", "all elements")}} {{csscomputedasspecifieddef("font-stretch")}} {{cssuniqueorderdef("font-stretch")}}
{{cssxref("font-size")}} {{cssappliestodef("font-size", "all elements")}} {{csscomputeddef("font-size", "as specified, but with relative lengths converted into absolute lengths")}} {{cssuniqueorderdef("font-size")}}
{{cssxref("line-height")}} {{cssappliestodef("line-height", "all elements")}} {{csscomputeddef("line-height", "for percentage and length values, the absolute length, otherwise as specified")}} {{cssuniqueorderdef("line-height")}}
{{cssxref("font-feature-settings")}} {{cssappliestodef("font-feature-settings", "all elements")}} {{csscomputedasspecifieddef("font-feature-settings")}} {{cssuniqueorderdef("font-feature-settings")}}
{{cssxref("font-size-adjust")}} {{cssappliestodef("font-size-adjust", "all elements")}} {{csscomputedasspecifieddef("font-size-adjust")}} {{cssuniqueorderdef("font-size-adjust")}}
{{cssxref("font-style")}} {{cssappliestodef("font-style", "all elements")}} {{csscomputedasspecifieddef("font-style")}} {{cssuniqueorderdef("font-style")}}
Images
Property Applies to Computed value Canonical order
{{cssxref("image-rendering")}} {{cssappliestodef("image-rendering", "all elements")}} {{csscomputedasspecifieddef("image-rendering")}} {{cssuniqueorderdef("image-rendering")}}
{{cssxref("image-orientation")}} {{cssappliestodef("image-orientation", "all elements")}} {{csscomputedstartdef("image-orientation")}}an {{xref_cssangle}}, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turn{{csscomputedenddef}} {{cssuniqueorderdef("image-orientation")}}
Counters & Lists
Property Applies to Computed value Canonical order
{{cssxref("counter-increment")}} {{cssappliestodef("counter-increment", "all elements")}} {{csscomputedasspecifieddef("counter-increment")}} {{cssuniqueorderdef("counter-increment")}}
{{cssxref("counter-reset")}} {{cssappliestodef("counter-reset", "all elements")}} {{csscomputedasspecifieddef("counter-reset")}} {{cssuniqueorderdef("counter-reset")}}
{{cssxref("list-style")}} {{cssappliestodef("list-style", "list items")}} {{csscomputedshorthand("list-style", "list-style-image list-style-position list-style-type")}} {{cssorderofappearancedef("list-style")}}
{{cssxref("list-style-image")}} {{cssappliestodef("list-style-image", "list items")}} {{csscomputeddef("list-style-image", "none or the image with its URI made absolute")}} {{cssuniqueorderdef("list-style-image")}}
{{cssxref("list-style-position")}} {{cssappliestodef("list-style-position", "list items")}} {{csscomputedasspecifieddef("list-style-position")}} {{cssuniqueorderdef("list-style-position")}}
{{cssxref("list-style-type")}} {{cssappliestodef("list-style-type", "list items")}} {{csscomputedasspecifieddef("list-style-type")}} {{cssuniqueorderdef("list-style-type")}}
Page
Property Applies to Computed value Canonical order
{{cssxref("orphans")}} {{cssappliestodef("orphans", "block container elements")}} {{csscomputedasspecifieddef("orphans")}} {{cssuniqueorderdef("orphans")}}
{{cssxref("page-break-after")}} {{cssappliestodef("page-break-after", "block-level elements in the normal flow of the root element. UA may also apply it to other elements like table-row elements.")}} {{csscomputedasspecifieddef("page-break-after")}} {{cssuniqueorderdef("page-break-after")}}
{{cssxref("page-break-before")}} {{cssappliestodef("page-break-before", "block-level elements in the normal flow of the root element. UA may also apply it to other elements like table-row elements.")}} {{csscomputedasspecifieddef("page-break-before")}} {{cssuniqueorderdef("page-break-before")}}
{{cssxref("page-break-inside")}} {{cssappliestodef("page-break-inside", "block-level elements in the normal flow of the root element. UA may also apply it to other elements like table-row elements.")}} {{csscomputedasspecifieddef("page-break-inside")}} {{cssuniqueorderdef("page-break-inside")}}
{{cssxref("widows")}} {{cssappliestodef("widows", "block container elements")}} {{csscomputedasspecifieddef("widows")}} {{cssuniqueorderdef("widows")}}
User interface
Property Applies to Computed value Canonical order
{{cssxref("outline")}} {{cssappliestodef("outline", "all elements")}} {{csscomputedshorthand("outline", "outline-color outline-width outline-style")}} {{cssorderofappearancedef("outline")}}
{{cssxref("outline-color")}} {{cssappliestodef("outline-color", "all elements")}} {{csscomputedstartdef("outline-color")}}For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).{{csscomputedenddef}} {{cssuniqueorderdef("outline-color")}}
{{cssxref("outline-width")}} {{cssappliestodef("outline-width", "all elements")}} {{csscomputedstartdef("outline-width")}}an absolute length; if the keyword none is specified, the computed value is 0{{csscomputedenddef}} {{cssuniqueorderdef("outline-width")}}
{{cssxref("outline-style")}} {{cssappliestodef("outline-style", "all elements")}} {{csscomputedasspecifieddef("outline-style")}} {{cssuniqueorderdef("outline-style")}}
{{cssxref("outline-offset")}} {{cssappliestodef("outline-offset", "all elements")}} {{csscomputeddef("outline-offset", "as specified, but with relative lengths converted into absolute lengths")}} {{cssuniqueorderdef("outline-offset")}}
{{cssxref("cursor")}} {{cssappliestodef("cursor", "all elements")}} {{csscomputeddef("cursor", "as specified, but with relative URI converted into absolute URI")}} {{cssuniqueorderdef("cursor")}}
{{cssxref("resize")}} {{cssappliestodef("resize", "elements with overflow other than visible")}} {{csscomputedasspecifieddef("resize")}} {{cssuniqueorderdef("resize")}}
{{cssxref("text-overflow")}} {{cssappliestodef("text-overflow", "block container elements")}} {{csscomputedasspecifieddef("text-overflow")}} {{cssuniqueorderdef("text-overflow")}}
Generated content
Property Applies to Computed value Canonical order
{{cssxref("content")}} {{cssappliestostartdef("content")}}{{cssxref("::before")}} and {{cssxref("::after")}} pseudo-elements{{cssappliestoenddef}} {{csscomputedstartdef("content")}}On elements, always computes to normal. On {{cssxref("::before")}} and {{cssxref("::after")}}, if normal is specified, computes to none. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.{{csscomputedenddef}} {{cssuniqueorderdef("content")}}
{{cssxref("quotes")}} {{cssappliestodef("quotes", "all elements")}} {{csscomputedasspecifieddef("quotes")}} {{cssuniqueorderdef("quotes")}}
Miscellaneous
Property Applies to Computed value Canonical order
{{cssxref("clip")}} {{cssappliestodef("clip", "absolutely positioned elements")}} {{csscomputedstartdef("clip")}}auto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwise{{csscomputedenddef}} {{cssuniqueorderdef("clip")}}
{{cssxref("display")}} {{cssappliestodef("display", "all elements")}} {{csscomputedstartdef("display")}}as the specified value, except for positioned and floating elements and for the root element. In both case the computed value may be another keyword than the one specified.{{csscomputedenddef()}} {{cssuniqueorderdef("display")}}
{{cssxref("unicode-bidi")}} {{cssappliestodef("unicode-bidi", "all elements, though some values have no effect on non-inline elements")}} {{csscomputedasspecifieddef("unicode-bidi")}} {{cssuniqueorderdef("unicode-bidi")}}
{{cssxref("ime-mode")}} {{cssappliestodef("ime-mode", "text fields")}} {{csscomputedasspecifieddef("ime-mode")}} {{cssuniqueorderdef("ime-mode")}}

Revision Source

<p>This page lists all CSS properties and indicates on which elements they have effects, how their computed values is calculated and the canonical order to use when serializing values.</p>
<table class="standard-table">
  <thead>
    <tr>
      <th colspan="4" scope="col">Animations</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{cssxref("animation")}}</td>
      <td>{{cssappliestostartdef("animation")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedshorthand("animation", "animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state")}}</td>
      <td>{{cssorderofappearancedef("animation")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-delay")}}</td>
      <td>{{cssappliestostartdef("animation-delay")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-delay")}}</td>
      <td>{{cssuniqueorderdef("animation-delay")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-direction")}}</td>
      <td>{{cssappliestostartdef("animation-direction")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-direction")}}</td>
      <td>{{cssuniqueorderdef("animation-direction")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-duration")}}</td>
      <td>{{cssappliestostartdef("animation-duration")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-duration")}}</td>
      <td>{{cssuniqueorderdef("animation-duration")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-fill-mode")}}</td>
      <td>{{cssappliestostartdef("animation-fill-mode")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-fill-mode")}}</td>
      <td>{{cssuniqueorderdef("animation-fill-mode")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-iteration-count")}}</td>
      <td>{{cssappliestostartdef("animation-iteration-count")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-iteration-count")}}</td>
      <td>{{cssuniqueorderdef("animation-iteration-count")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-name")}}</td>
      <td>{{cssappliestostartdef("animation-name")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-name")}}</td>
      <td>{{cssuniqueorderdef("animation-name")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-play-state")}}</td>
      <td>{{cssappliestostartdef("animation-play-state")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-play-state")}}</td>
      <td>{{cssuniqueorderdef("animation-play-state")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("animation-timing-function")}}</td>
      <td>{{cssappliestostartdef("animation-timing-function")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("animation-timing-function")}}</td>
      <td>{{cssuniqueorderdef("animation-timing-function")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">as</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("transition")}}</td>
      <td>{{cssappliestostartdef("transition")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("transition")}}</td>
      <td>{{cssorderofappearancedef("transition")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("transition-delay")}}</td>
      <td>{{cssappliestostartdef("transition-delay")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("transition-delay")}}</td>
      <td>{{cssuniqueorderdef("transition-delay")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("transition-duration")}}</td>
      <td>{{cssappliestostartdef("transition-duration")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("transition-duration")}}</td>
      <td>{{cssuniqueorderdef("transition-duration")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("transition-property")}}</td>
      <td>{{cssappliestostartdef("transition-property")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("transition-property")}}</td>
      <td>{{cssuniqueorderdef("transition-property")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("transition-timing-function")}}</td>
      <td>{{cssappliestostartdef("transition-timing-function")}}all elements, {{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("transition-timing-function")}}</td>
      <td>{{cssuniqueorderdef("transition-timing-function")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Transforms</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("transform")}}</td>
      <td>{{cssappliestodef("transform", "transformable elements")}}</td>
      <td>{{csscomputeddef("transform", "as specified, but with relative lengths converted into absolute lengths")}}</td>
      <td>{{cssuniqueorderdef("transform")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("transform-origin")}}</td>
      <td>{{cssappliestodef("transform-origin", "transformable elements")}}</td>
      <td>{{csscomputedstartdef("transform-origin")}}for {{xref_csslength()}} the absolute value, otherwise a percentage{{csscomputedenddef}}</td>
      <td>{{cssorderdef("transform-origin", "One or two values, with length made absolute and keywords translated to percentages")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("transform-style")}}</td>
      <td>{{cssappliestodef("transform-style", "transformable elements")}}</td>
      <td>{{csscomputedasspecifieddef("transform-style")}}</td>
      <td>{{cssuniqueorderdef("transform-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("perspective")}}</td>
      <td>{{cssappliestodef("perspective", "transformable elements")}}</td>
      <td>{{csscomputedstartdef("perspective")}}the absolute length or <code>none</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("perspective")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("perspective-origin")}}</td>
      <td>{{cssappliestodef("perspective-origin", "transformable elements")}}</td>
      <td>{{csscomputedstartdef("perspective-origin")}}for {{xref_csslength()}} the absolute value, otherwise a percentage{{csscomputedenddef}}</td>
      <td>{{cssorderdef("perspective-origin", "One or two values, with length made absolute and keywords translated to percentages")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("backface-visibility")}}</td>
      <td>{{cssappliestodef("backface-visibility", "transformable elements")}}</td>
      <td>{{csscomputedasspecifieddef("backface-visibility")}}</td>
      <td>{{cssuniqueorderdef("backface-visibility")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Color</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("color")}}</td>
      <td>{{cssappliestodef("color", "all elements")}}</td>
      <td>{{csscomputedstartdef("color")}}If the value is translucent, the computed value will be the <code>rgba()</code> corresponding one. If it isn't, it will be the <code>rgb()</code> corresponding one. The <code>transparent</code> keyword maps to <code>rgb(0,0,0)</code>.{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("opacity")}}</td>
      <td>{{cssappliestodef("opacity", "all elements")}}</td>
      <td>{{csscomputedstartdef("opacity")}}the specified value, clipped in the range <code>[0,1]</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("opacity")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Columns</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("columns")}}</td>
      <td>{{cssappliestostartdef("columns")}}non-replaced <code>block</code> or <code>table</code> elements, <code>table-cell</code> or <code>inline-block</code> elements{{cssappliestoenddef}}</td>
      <td>{{csscomputedshorthand("columns", "column-width column-count")}}</td>
      <td>{{cssorderofappearancedef("columns")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-width")}}</td>
      <td>{{cssappliestostartdef("column-width")}}non-replaced <code>block</code> or <code>table</code> elements, <code>table-cell</code> or <code>inline-block</code> elements{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("column-width", "the absolute length, zero or larger")}}</td>
      <td>{{cssuniqueorderdef("column-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-count")}}</td>
      <td>{{cssappliestostartdef("column-count")}}non-replaced <code>block</code> or <code>table</code> elements, <code>table-cell</code> or <code>inline-block</code> elements{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("column-count")}}</td>
      <td>{{cssuniqueorderdef("column-count")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-gap")}}</td>
      <td>{{cssappliestodef("column-gap", "multicol elements")}}</td>
      <td>{{csscomputedstartdef("column-gap")}}the absolute length or the keyword <code>normal</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("column-gap")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule")}}</td>
      <td>{{cssappliestodef("column-rule", "multicol elements")}}</td>
      <td>{{csscomputedshorthand("column-rule", "column-rule-color column-rule-style column-rule-width")}}</td>
      <td>{{cssorderofappearancedef("column-rule")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule-color")}}</td>
      <td>{{cssappliestodef("column-rule-color", "multicol elements")}}</td>
      <td>{{csscomputedcolordef("column-rule-color")}}</td>
      <td>{{cssuniqueorderdef("column-rule-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule-style")}}</td>
      <td>{{cssappliestodef("column-rule-style", "multicol elements")}}</td>
      <td>{{csscomputedasspecifieddef("column-rule-style")}}</td>
      <td>{{cssuniqueorderdef("column-rule-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-rule-width")}}</td>
      <td>{{cssappliestodef("column-rule-width", "multicol elements")}}</td>
      <td>{{csscomputedstartdef("column-rule-width")}}an absolute length; <code>0</code> if the column rule style is <code>none</code> or <code>hidden</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("column-rule-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("break-before")}}</td>
      <td>{{cssappliestodef("break-before", "block-level elements")}}</td>
      <td>{{csscomputedasspecifieddef("break-before")}}</td>
      <td>{{cssuniqueorderdef("break-before")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("break-after")}}</td>
      <td>{{cssappliestodef("break-after", "block-level elements")}}</td>
      <td>{{csscomputedasspecifieddef("break-after")}}</td>
      <td>{{cssuniqueorderdef("break-after")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("break-inside")}}</td>
      <td>{{cssappliestodef("break-inside", "block-level elements")}}</td>
      <td>{{csscomputedasspecifieddef("break-inside")}}</td>
      <td>{{cssuniqueorderdef("break-inside")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-span")}}</td>
      <td>{{cssappliestodef("column-span", "in-flow block-level elements")}}</td>
      <td>
        <div class="comment">
          {{csscomputedasspecifieddef("column-span")}}</div>
      </td>
      <td>{{cssuniqueorderdef("column-span")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("column-fill")}}</td>
      <td>{{cssappliestodef("column-fill", "multicol elements")}}</td>
      <td>
        <div class="comment">
          {{csscomputedasspecifieddef("column-fill")}}</div>
      </td>
      <td>{{cssuniqueorderdef("column-fill")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Text</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("hyphens")}}</td>
      <td>{{cssappliestodef("hyphens", "all elements")}}</td>
      <td>
        <div class="comment">
          {{csscomputedasspecifieddef("hyphens")}}</div>
      </td>
      <td>{{cssuniqueorderdef("hyphens")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("letter-spacing")}}</td>
      <td>{{cssappliestodef("letter-spacing", "all elements")}}</td>
      <td>
        <div class="comment">
          <div class="comment">
            {{csscomputedstartdef("letter-spacing")}}an optimum value consisting of either an absolute length or the keyword <code>normal</code>{{csscomputedenddef}}</div>
        </div>
      </td>
      <td>{{cssuniqueorderdef("letter-spacing")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("word-wrap")}}</td>
      <td>{{cssappliestodef("word-wrap", "all elements")}}</td>
      <td>
        <div class="comment">
          {{csscomputedasspecifieddef("word-wrap")}}</div>
      </td>
      <td>{{cssuniqueorderdef("word-wrap")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("overflow-wrap")}}</td>
      <td>{{cssappliestodef("overflow-wrap", "all elements")}}</td>
      <td>
        <div class="comment">
          <div class="comment">
            {{csscomputedasspecifieddef("overflow-wrap")}}</div>
        </div>
      </td>
      <td>{{cssuniqueorderdef("overflow-wrap")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-transform")}}</td>
      <td>{{cssappliestodef("text-transform", "all elements")}}</td>
      <td>
        <div class="comment">
          {{csscomputedasspecifieddef("text-transform")}}</div>
      </td>
      <td>{{cssuniqueorderdef("text-transform")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("tab-size")}}</td>
      <td>{{cssappliestodef("tab-size", "block containers")}}</td>
      <td>{{csscomputeddef("tab-size", "the specified integer or an absolute length")}}</td>
      <td>{{cssuniqueorderdef("tab-size")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-align")}}</td>
      <td>{{cssappliestodef("text-align", "block containers")}}</td>
      <td>{{csscomputedstartdef("text-align")}}as specified, except for the <code>match-parent</code> value which is calculated against its parent's direction value and results in a computed value of either <code>left</code> or <code>right</code>{{csscomputedenddef}}</td>
      <td>{{cssorderofappearancedef("text-align")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-align-last")}}</td>
      <td>{{cssappliestodef("text-align-last", "block containers")}}</td>
      <td>
        <div class="comment">
          <div class="comment">
            {{csscomputedasspecifieddef("text-align-last")}}</div>
        </div>
      </td>
      <td>{{cssuniqueorderdef("text-align-last")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-indent")}}</td>
      <td>{{cssappliestodef("text-indent", "block containers")}}</td>
      <td>{{csscomputeddef("text-indent", "the percentage as specified or the absolute length, plus any keywords as specified")}}</td>
      <td>{{cssorderdef("text-indent", "the length or percentage before the keywords, if both are present. If several keywords are present, they appear in the same order as their appearance in the formal grammar.")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("direction")}}</td>
      <td>{{cssappliestodef("direction", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("direction")}}</td>
      <td>{{cssuniqueorderdef("direction")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("white-space")}}</td>
      <td>{{cssappliestodef("white-space", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("white-space")}}</td>
      <td>{{cssuniqueorderdef("white-space")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("word-break")}}</td>
      <td>{{cssappliestodef("word-break", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("word-break")}}</td>
      <td>{{cssuniqueorderdef("word-break")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("word-spacing")}}</td>
      <td>{{cssappliestodef("word-spacing", "all elements")}}</td>
      <td>
        <div class="comment">
          <div class="comment">
            {{csscomputedstartdef("word-spacing")}}an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword <code>normal</code>{{csscomputedenddef}}</div>
        </div>
      </td>
      <td>{{cssuniqueorderdef("word-spacing")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Text decorations</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("text-decoration")}}</td>
      <td>{{cssappliestodef("text-decoration", "all elements")}}</td>
      <td>{{csscomputedshorthand("text-decoration", "text-decoration-line text-decoration-style text-decoration-color")}}</td>
      <td>{{cssorderofappearancedef("text-decoration")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-decoration-color")}}</td>
      <td>{{cssappliestodef("text-decoration-color", "all elements")}}</td>
      <td>{{csscomputedcolordef("text-decoration-color")}}</td>
      <td>{{cssuniqueorderdef("text-decoration-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-decoration-style")}}</td>
      <td>{{cssappliestodef("text-decoration-style", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("text-decoration-style")}}</td>
      <td>{{cssuniqueorderdef("text-decoration-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-decoration-line")}}</td>
      <td>{{cssappliestodef("text-decoration-line", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("text-decoration-line")}}</td>
      <td>{{cssorderofappearancedef("text-decoration-line")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-decoration-skip")}}</td>
      <td>{{cssappliestodef("text-decoration-skip", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("text-decoration-skip")}}</td>
      <td>{{cssorderofappearancedef("text-decoration-skip")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-shadow")}}</td>
      <td>{{cssappliestodef("text-shadow", "all elements")}}</td>
      <td>{{csscomputeddef("text-shadow", "a color plus three absolute lengths")}}</td>
      <td>{{cssuniqueorderdef("text-shadow")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-underline-position")}}</td>
      <td>{{cssappliestodef("text-underline-position", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("text-underline-position")}}</td>
      <td>{{cssorderofappearancedef("text-underline-position")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Flexible boxes</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("align-content")}}</td>
      <td>{{cssappliestodef("align-content", "multi-line flex containers")}}</td>
      <td>{{csscomputedasspecifieddef("align-content")}}</td>
      <td>{{cssuniqueorderdef("align-content")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("align-items")}}</td>
      <td>{{cssappliestodef("align-items", "flex containers")}}</td>
      <td>{{csscomputedasspecifieddef("align-items")}}</td>
      <td>{{cssuniqueorderdef("align-items")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("align-self")}}</td>
      <td>{{cssappliestodef("align-self", "flex items")}}</td>
      <td>{{csscomputeddef("align-self", "auto computes to parent's align-items; otherwise as specified")}}</td>
      <td>{{cssuniqueorderdef("align-self")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("flex-basis")}}</td>
      <td>{{cssappliestodef("flex-basis", "flex items")}}</td>
      <td>{{csscomputeddef("flex-basis", "as specified, with lengths made absolute")}}</td>
      <td>{{cssorderstartdef("flex-basis")}}{{cssorder("width")}}{{cssorderenddef}}</td>
    </tr>
    <tr>
      <td>{{cssxref("flex-direction")}}</td>
      <td>{{cssappliestodef("flex-direction", "flex containers")}}</td>
      <td>{{csscomputedasspecifieddef("flex-direction")}}</td>
      <td>{{cssuniqueorderdef("flex-direction")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("flex-flow")}}</td>
      <td>{{cssappliestodef("flex-flow", "flex containers")}}</td>
      <td>{{csscomputedshorthand("flex-flow", "flex-direction flex-wrap")}}</td>
      <td>{{cssorderofappearancedef("flex-flow")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("flex-grow")}}</td>
      <td>{{cssappliestodef("flex-grow", "flex items")}}</td>
      <td>{{csscomputedasspecifieddef("flex-grow")}}</td>
      <td>{{cssuniqueorderdef("flex-grow")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("flex-shrink")}}</td>
      <td>{{cssappliestodef("flex-shrink", "flex items")}}</td>
      <td>{{csscomputedasspecifieddef("flex-shrink")}}</td>
      <td>{{cssuniqueorderdef("flex-shrink")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("flex")}}</td>
      <td>{{cssappliestodef("flex", "flex items")}}</td>
      <td>{{csscomputedshorthand("flex", "flex-grow flex-shrink flex-basis")}}</td>
      <td>{{cssorderofappearancedef("flex")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("flex-wrap")}}</td>
      <td>{{cssappliestodef("flex-wrap", "flex containers")}}</td>
      <td>{{csscomputedasspecifieddef("flex-wrap")}}</td>
      <td>{{cssuniqueorderdef("flex-wrap")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("justify-content")}}</td>
      <td>{{cssappliestodef("justify-content", "flex containers")}}</td>
      <td>{{csscomputedasspecifieddef("justify-content")}}</td>
      <td>{{cssuniqueorderdef("justify-content")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("order")}}</td>
      <td>{{cssappliestodef("order", "flex items and absolutely-positioned flex container children")}}</td>
      <td>{{csscomputedasspecifieddef("order")}}</td>
      <td>{{cssuniqueorderdef("order")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Background &amp; Borders</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("background")}}</td>
      <td>{{cssappliestodef("background", "all elements")}}</td>
      <td>{{csscomputedshorthand("background", "background-color background-image background-clip background-position background-size background-repeat background-attachment")}}</td>
      <td>{{cssorderofappearancedef("background")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-attachment")}}</td>
      <td>{{cssappliestodef("background-attachment", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("background-attachment")}}</td>
      <td>{{cssuniqueorderdef("background-attachment")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-clip")}}</td>
      <td>{{cssappliestodef("background-clip", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("background-clip")}}</td>
      <td>{{cssuniqueorderdef("background-clip")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-color")}}</td>
      <td>{{cssappliestodef("background-color", "all elements")}}</td>
      <td>{{csscomputedcolordef("background-color")}}</td>
      <td>{{cssuniqueorderdef("background-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-image")}}</td>
      <td>{{cssappliestodef("background-image", "all elements")}}</td>
      <td>{{csscomputeddef("background-image", "as specified, but with URIs made absolute")}}</td>
      <td>{{cssuniqueorderdef("background-image")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-origin")}}</td>
      <td>{{cssappliestodef("background-origin", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("background-origin")}}</td>
      <td>{{cssuniqueorderdef("background-origin")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-position")}}</td>
      <td>{{cssappliestodef("background-position", "all elements")}}</td>
      <td>{{csscomputedstartdef("background-position")}}a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a {{xref_csslength}}), otherwise as a percentage{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("background-position")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-repeat")}}</td>
      <td>{{cssappliestodef("background-repeat", "all elements")}}</td>
      <td>{{csscomputeddef("background-repeat", "a list, each item consisting of two keywords, one per dimension")}}</td>
      <td>{{cssuniqueorderdef("background-repeat")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("background-size")}}</td>
      <td>{{cssappliestodef("background-size", "all elements")}}</td>
      <td>{{csscomputeddef("background-size", "as specified, with lengths made absolute")}}</td>
      <td>{{cssuniqueorderdef("background-size")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border")}}</td>
      <td>{{cssappliestodef("border", "all elements")}}</td>
      <td>{{csscomputedshorthand("border", "border-width border-style border-color")}}</td>
      <td>{{cssorderofappearancedef("border")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-bottom")}}</td>
      <td>{{cssappliestodef("border-bottom", "all elements")}}</td>
      <td>{{csscomputedshorthand("border-bottom", "border-bottom-width border-bottom-style border-bottom-color")}}</td>
      <td>{{cssorderofappearancedef("border-bottom")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-bottom-color")}}</td>
      <td>{{cssappliestodef("border-bottom-color", "all elements")}}</td>
      <td>{{csscomputedcolordef("border-bottom-color")}}</td>
      <td>{{cssuniqueorderdef("border-bottom-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-bottom-left-radius")}}</td>
      <td>{{cssappliestostartdef("border-bottom-left-radius")}}all elements; but UA are not required to apply to <code>table</code> and <code>inline-table</code> elements when {{cssxref("border-collapse")}} is <code>collapse</code>. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("border-bottom-left-radius", "two absolute length or percentages")}}</td>
      <td>{{cssuniqueorderdef("border-bottom-left-radius")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-bottom-right-radius")}}</td>
      <td>{{cssappliestostartdef("border-bottom-right-radius")}}all elements; but UA are not required to apply to <code>table</code> and <code>inline-table</code> elements when {{cssxref("border-collapse")}} is <code>collapse</code>. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("border-bottom-right-radius", "two absolute length or percentages")}}</td>
      <td>{{cssuniqueorderdef("border-bottom-right-radius")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-bottom-style")}}</td>
      <td>{{cssappliestodef("border-bottom-style", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("border-bottom-style")}}</td>
      <td>{{cssuniqueorderdef("border-bottom-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-bottom-width")}}</td>
      <td>{{cssappliestodef("border-bottom-width", "all elements")}}</td>
      <td>{{csscomputedstartdef("border-bottom-width")}}the absolute length or <code>0</code> if {{cssxref("border-bottom-style")}} is <code>none</code> or <code>hidden</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("border-bottom-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-color")}}</td>
      <td>{{cssappliestodef("border-color", "all elements")}}</td>
      <td>{{csscomputedshorthand("border-color", "border-bottom-color border-left-color border-right-color border-top-color")}}</td>
      <td>{{cssuniqueorderdef("border-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-image")}}</td>
      <td>{{cssappliestoshorthand("border-image", "border-image-outset border-image-repeat border-image-slice border-image-source border-image-width")}}</td>
      <td>{{csscomputedshorthand("border-image", "border-image-outset border-image-repeat border-image-slice border-image-source border-image-width")}}</td>
      <td>{{cssuniqueorderdef("border-image")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-image-outset")}}</td>
      <td>{{cssappliestostartdef("border-image-outset")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is <code>collapse</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("border-image-outset", "all lengths made absolute, otherwise as specified")}}</td>
      <td>{{cssuniqueorderdef("border-image-outset")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-image-repeat")}}</td>
      <td>{{cssappliestostartdef("border-image-repeat")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is <code>collapse</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputedasspecifieddef("border-image-repeat")}}</td>
      <td>{{cssuniqueorderdef("border-image-repeat")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-image-slice")}}</td>
      <td>{{cssappliestostartdef("border-image-slice")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is <code>collapse</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputedstartdef("border-image-slice")}}one to four percentage(s) (as specified) or absolute length(s), plus the keyword <code>fill</code> if specified{{csscomputedenddef}}</td>
      <td>{{cssorderstartdef("border-image-slice")}}the percentages or lengths, eventually followed by the keyword <code>fill</code>{{cssorderenddef}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-image-source")}}</td>
      <td>{{cssappliestostartdef("border-image-source")}}all elements, except internal table elements when {{cssxref("border-collapse")}} is <code>collapse</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("border-image-source", "none or the image with its URI made absolute")}}</td>
      <td>{{cssuniqueorderdef("border-image-source")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-image-width")}}</td>
      <td>{{cssappliestostartdef("border-image-width")}}all elements, except table elements when {{cssxref("border-collapse")}} is <code>collapse</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("border-image-width", "all lengths made absolute, otherwise as specified")}}</td>
      <td>{{cssuniqueorderdef("border-image-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-left")}}</td>
      <td>{{cssappliestodef("border-left", "all elements")}}</td>
      <td>{{csscomputedshorthand("border-left", "border-left-width border-left-style border-left-color")}}</td>
      <td>{{cssorderofappearancedef("border-left")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-left-color")}}</td>
      <td>{{cssappliestodef("border-left-color", "all elements")}}</td>
      <td>{{csscomputedcolordef("border-left-color")}}</td>
      <td>{{cssuniqueorderdef("border-left-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-left-style")}}</td>
      <td>{{cssappliestodef("border-left-style", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("border-left-style")}}</td>
      <td>{{cssuniqueorderdef("border-left-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-left-width")}}</td>
      <td>{{cssappliestodef("border-left-width", "all elements")}}</td>
      <td>{{csscomputedstartdef("border-left-width")}}the absolute length or <code>0</code> if {{cssxref("border-left-style")}} is <code>none</code> or <code>hidden</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("border-left-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-radius")}}</td>
      <td>{{cssappliestostartdef("border-radius")}}all elements; but UA are not required to apply to <code>table</code> and <code>inline-table</code> elements when {{cssxref("border-collapse")}} is <code>collapse</code>. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}}</td>
      <td>{{csscomputedshorthand("border-radius", "border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius")}}</td>
      <td>{{cssuniqueorderdef("border-radius")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-right")}}</td>
      <td>{{cssappliestodef("border-right", "all elements")}}</td>
      <td>{{csscomputedshorthand("border-right", "border-right-width border-right-style border-right-color")}}</td>
      <td>{{cssorderofappearancedef("border-right")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-right-color")}}</td>
      <td>{{cssappliestodef("border-right-color", "all elements")}}</td>
      <td>{{csscomputedcolordef("border-right-color")}}</td>
      <td>{{cssuniqueorderdef("border-right-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-right-style")}}</td>
      <td>{{cssappliestodef("border-right-style", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("border-right-style")}}</td>
      <td>{{cssuniqueorderdef("border-right-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-right-width")}}</td>
      <td>{{cssappliestodef("border-right-width", "all elements")}}</td>
      <td>{{csscomputedstartdef("border-right-width")}}the absolute length or <code>0</code> if {{cssxref("border-right-style")}} is <code>none</code> or <code>hidden</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("border-right-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-style")}}</td>
      <td>{{cssappliestodef("border-style", "all elements")}}</td>
      <td>{{csscomputedshorthand("border-style", "border-bottom-style border-left-style border-right-style border-top-style")}}</td>
      <td>{{cssuniqueorderdef("border-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-top")}}</td>
      <td>{{cssappliestodef("border-top", "all elements")}}</td>
      <td>{{csscomputedshorthand("border-top", "border-top-width border-top-style border-top-color")}}</td>
      <td>{{cssorderofappearancedef("border-top")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-top-color")}}</td>
      <td>{{cssappliestodef("border-top-color", "all elements")}}</td>
      <td>{{csscomputedcolordef("border-top-color")}}</td>
      <td>{{cssuniqueorderdef("border-top-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-top-left-radius")}}</td>
      <td>{{cssappliestostartdef("border-top-left-radius")}}all elements; but UA are not required to apply to <code>table</code> and <code>inline-table</code> elements when {{cssxref("border-collapse")}} is <code>collapse</code>. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("border-top-left-radius", "two absolute length or percentages")}}</td>
      <td>{{cssuniqueorderdef("border-top-left-radius")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-top-right-radius")}}</td>
      <td>{{cssappliestostartdef("border-top-right-radius")}}all elements; but UA are not required to apply to <code>table</code> and <code>inline-table</code> elements when {{cssxref("border-collapse")}} is <code>collapse</code>. The behavior on internal table elements is undefined for the moment.{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("border-top-right-radius", "two absolute length or percentages")}}</td>
      <td>{{cssuniqueorderdef("border-top-right-radius")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-top-style")}}</td>
      <td>{{cssappliestodef("border-top-style", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("border-top-style")}}</td>
      <td>{{cssuniqueorderdef("border-top-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-top-width")}}</td>
      <td>{{cssappliestodef("border-top-width", "all elements")}}</td>
      <td>{{csscomputedstartdef("border-top-width")}}the absolute length or <code>0</code> if {{cssxref("border-top-style")}} is <code>none</code> or <code>hidden</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("border-top-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-width")}}</td>
      <td>{{cssappliestodef("border-width", "all elements")}}</td>
      <td>{{csscomputedshorthand("border-width", "border-bottom-width border-left-width border-right-width border-top-width")}}</td>
      <td>{{cssuniqueorderdef("border-width")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Box Model</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("box-decoration-break")}}</td>
      <td>{{cssappliestodef("box-decoration-break", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("box-decoration-break")}}</td>
      <td>{{cssuniqueorderdef("box-decoration-break")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("box-shadow")}}</td>
      <td>{{cssappliestodef("box-shadow", "all elements")}}</td>
      <td>{{csscomputeddef("box-shadow", "any length made absolute; any specified color computed; otherwise as specified")}}</td>
      <td>{{cssuniqueorderdef("box-shadow")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("margin")}}</td>
      <td>{{cssappliestostartdef("margin")}}all elements except elements with table {{cssxref("display")}} types other than <code>table-caption</code>, <code>table</code> and <code>inline-table</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputedshorthand("margin", "margin-bottom margin-left margin-right margin-top")}}</td>
      <td>{{cssuniqueorderdef("margin")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("margin-bottom")}}</td>
      <td>{{cssappliestostartdef("margin-bottom")}}all elements except elements with table {{cssxref("display")}} types other than <code>table-caption</code>, <code>table</code> and <code>inline-table</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("margin-bottom", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("margin-bottom")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("margin-left")}}</td>
      <td>{{cssappliestostartdef("margin-left")}}all elements except elements with table {{cssxref("display")}} types other than <code>table-caption</code>, <code>table</code> and <code>inline-table</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("margin-left", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("margin-left")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("margin-right")}}</td>
      <td>{{cssappliestostartdef("margin-right")}}all elements except elements with table {{cssxref("display")}} types other than <code>table-caption</code>, <code>table</code> and <code>inline-table</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("margin-right", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("margin-right")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("margin-top")}}</td>
      <td>{{cssappliestostartdef("margin-top")}}all elements except elements with table {{cssxref("display")}} types other than <code>table-caption</code>, <code>table</code> and <code>inline-table</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("margin-top", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("margin-top")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("padding")}}</td>
      <td>{{cssappliestostartdef("padding")}}all elements except <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code>, <code>table-row</code>, <code>table-column-group</code> and <code>table-column</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputedshorthand("padding", "padding-bottom padding-left padding-right padding-top")}}</td>
      <td>{{cssuniqueorderdef("padding")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("padding-bottom")}}</td>
      <td>{{cssappliestostartdef("padding-bottom")}}all elements except <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code>, <code>table-row</code>, <code>table-column-group</code> and <code>table-column</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("padding-bottom", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("padding-bottom")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("padding-left")}}</td>
      <td>{{cssappliestostartdef("padding-left")}}all elements except <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code>, <code>table-row</code>, <code>table-column-group</code> and <code>table-column</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("padding-left", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("padding-left")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("padding-right")}}</td>
      <td>{{cssappliestostartdef("padding-right")}}all elements except <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code>, <code>table-row</code>, <code>table-column-group</code> and <code>table-column</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("padding-right", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("padding-right")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("padding-top")}}</td>
      <td>{{cssappliestostartdef("padding-top")}}all elements except <code>table-row-group</code>, <code>table-header-group</code>, <code>table-footer-group</code>, <code>table-row</code>, <code>table-column-group</code> and <code>table-column</code>{{cssappliestoenddef}}</td>
      <td>{{csscomputeddef("padding-top", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("padding-top")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("box-sizing")}}</td>
      <td>{{cssappliestodef("box-sizing", "all elements that accept width or height")}}</td>
      <td>{{csscomputedasspecifieddef("box-sizing")}}</td>
      <td>{{cssuniqueorderdef("box-sizing")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("max-height")}}</td>
      <td>{{cssappliestodef("max-height", "all elements but non-replaced inline elements, table columns, and column groups")}}</td>
      <td>{{csscomputedstartdef("max-height")}}the percentage as specified or the absolute length or <code>none</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("max-height")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("min-height")}}</td>
      <td>{{cssappliestodef("min-height", "all elements but non-replaced inline elements, table columns, and column groups")}}</td>
      <td>{{csscomputeddef("min-height", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("min-height")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("height")}}</td>
      <td>{{cssappliestodef("height", "all elements but non-replaced inline elements, table columns, and column groups")}}</td>
      <td>{{csscomputedstartdef("height")}}a percentage or <code>auto</code> or the absolute length{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("height")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("max-width")}}</td>
      <td>{{cssappliestodef("max-width", "all elements but non-replaced inline elements, table rows, and row groups")}}</td>
      <td>{{csscomputedstartdef("max-width")}}the percentage as specified or the absolute length or <code>none</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("max-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("min-width")}}</td>
      <td>{{cssappliestodef("min-width", "all elements but non-replaced inline elements, table rows, and row groups")}}</td>
      <td>{{csscomputeddef("min-width", "the percentage as specified or the absolute length")}}</td>
      <td>{{cssuniqueorderdef("min-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("width")}}</td>
      <td>{{cssappliestodef("width", "all elements but non-replaced inline elements, table rows, and row groups")}}</td>
      <td>{{csscomputedstartdef("width")}}the percentage or <code>auto</code> as specified or the absolute length{{csscomputedenddef}}</td>
      <td>{{cssorderdef("width", "the length or percentage before the keyword, if both are present")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("overflow")}}</td>
      <td>{{cssappliestodef("overflow", "non-replaced block-level elements and non-replaced inline-block elements")}}</td>
      <td>{{csscomputedasspecifieddef("overflow")}}</td>
      <td>{{cssuniqueorderdef("overflow")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("overflow-x")}}</td>
      <td>{{cssappliestodef("overflow-x", "non-replaced block-level elements and non-replaced inline-block elements")}}</td>
      <td>{{csscomputedasspecifieddef("overflow-x")}}</td>
      <td>{{cssuniqueorderdef("overflow-x")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("overflow-y")}}</td>
      <td>{{cssappliestodef("overflow-y", "non-replaced block-level elements and non-replaced inline-block elements")}}</td>
      <td>{{csscomputedasspecifieddef("overflow-y")}}</td>
      <td>{{cssuniqueorderdef("overflow-y")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("visibility")}}</td>
      <td>{{cssappliestodef("visibility", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("visibility")}}</td>
      <td>{{cssuniqueorderdef("visibility")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Table</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("border-collapse")}}</td>
      <td>{{cssappliestodef("border-collapse", "table and inline-table elements")}}</td>
      <td>{{csscomputedasspecifieddef("border-collapse")}}</td>
      <td>{{cssuniqueorderdef("border-collapse")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("border-spacing")}}</td>
      <td>{{cssappliestodef("border-spacing", "table and inline-table elements")}}</td>
      <td>{{csscomputeddef("border-spacing", "two absolute lengths")}}</td>
      <td>{{cssuniqueorderdef("border-spacing")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("caption-side")}}</td>
      <td>{{cssappliestodef("caption-side", "table-caption elements")}}</td>
      <td>{{csscomputedasspecifieddef("caption-side")}}</td>
      <td>{{cssuniqueorderdef("caption-side")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("empty-cells")}}</td>
      <td>{{cssappliestodef("empty-cells", "table-cell elements")}}</td>
      <td>{{csscomputedasspecifieddef("empty-cells")}}</td>
      <td>{{cssuniqueorderdef("empty-cells")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("table-layout")}}</td>
      <td>{{cssappliestodef("table-layout", "table and inline-table elements")}}</td>
      <td>{{csscomputedasspecifieddef("table-layout")}}</td>
      <td>{{cssuniqueorderdef("table-layout")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("vertical-align")}}</td>
      <td>{{cssappliestodef("vertical-align", "inline-level and table-cell elements")}}</td>
      <td>{{csscomputeddef("vertical-align", "for percentage and length values, the absolute length, otherwise the keyword as specified")}}</td>
      <td>{{cssuniqueorderdef("vertical-align")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Positioning</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("bottom")}}</td>
      <td>{{cssappliestodef("bottom", "positioned elements")}}</td>
      <td>{{csscomputedstartdef("bottom")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, <code>auto</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("bottom")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("left")}}</td>
      <td>{{cssappliestodef("left", "positioned elements")}}</td>
      <td>{{csscomputedstartdef("left")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, <code>auto</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("left")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("right")}}</td>
      <td>{{cssappliestodef("right", "positioned elements")}}</td>
      <td>{{csscomputedstartdef("right")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, <code>auto</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("right")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("top")}}</td>
      <td>{{cssappliestodef("top", "positioned elements")}}</td>
      <td>{{csscomputedstartdef("top")}}if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, <code>auto</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("top")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("float")}}</td>
      <td>{{cssappliestodef("float", "all elements, but has no effect if the value of display is none.")}}</td>
      <td>{{csscomputedasspecifieddef("float")}}</td>
      <td>{{cssuniqueorderdef("float")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("clear")}}</td>
      <td>{{cssappliestodef("clear", "block-level elements")}}</td>
      <td>{{csscomputedasspecifieddef("clear")}}</td>
      <td>{{cssuniqueorderdef("clear")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("position")}}</td>
      <td>{{cssappliestodef("position", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("position")}}</td>
      <td>{{cssuniqueorderdef("position")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("z-index")}}</td>
      <td>{{cssappliestodef("z-index", "positioned elements")}}</td>
      <td>{{csscomputedasspecifieddef("z-index")}}</td>
      <td>{{cssuniqueorderdef("z-index")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Fonts</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("font")}}</td>
      <td>{{cssappliestodef("font", "all elements")}}</td>
      <td>{{csscomputedshorthand("font", "font-style font-variant font-weight font-stretch font-size line-height font-family")}}</td>
      <td>{{cssorderofappearancedef("font")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-family")}}</td>
      <td>{{cssappliestodef("font-family", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("font-family")}}</td>
      <td>{{cssuniqueorderdef("font-family")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-variant")}}</td>
      <td>{{cssappliestodef("font-variant", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("font-variant")}}</td>
      <td>{{cssuniqueorderdef("font-variant")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-weight")}}</td>
      <td>{{cssappliestodef("font-weight", "all elements")}}</td>
      <td>{{csscomputedstartdef("font-weight")}}the keyword or the numerical value as specified, with <code>bolder</code> and <code>lighter</code> transformed to the real value{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("font-weight")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-stretch")}}</td>
      <td>{{cssappliestodef("font-stretch", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("font-stretch")}}</td>
      <td>{{cssuniqueorderdef("font-stretch")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-size")}}</td>
      <td>{{cssappliestodef("font-size", "all elements")}}</td>
      <td>{{csscomputeddef("font-size", "as specified, but with relative lengths converted into absolute lengths")}}</td>
      <td>{{cssuniqueorderdef("font-size")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("line-height")}}</td>
      <td>{{cssappliestodef("line-height", "all elements")}}</td>
      <td>{{csscomputeddef("line-height", "for percentage and length values, the absolute length, otherwise as specified")}}</td>
      <td>{{cssuniqueorderdef("line-height")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-feature-settings")}}</td>
      <td>{{cssappliestodef("font-feature-settings", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("font-feature-settings")}}</td>
      <td>{{cssuniqueorderdef("font-feature-settings")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-size-adjust")}}</td>
      <td>{{cssappliestodef("font-size-adjust", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("font-size-adjust")}}</td>
      <td>{{cssuniqueorderdef("font-size-adjust")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("font-style")}}</td>
      <td>{{cssappliestodef("font-style", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("font-style")}}</td>
      <td>{{cssuniqueorderdef("font-style")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Images</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("image-rendering")}}</td>
      <td>{{cssappliestodef("image-rendering", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("image-rendering")}}</td>
      <td>{{cssuniqueorderdef("image-rendering")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("image-orientation")}}</td>
      <td>{{cssappliestodef("image-orientation", "all elements")}}</td>
      <td>{{csscomputedstartdef("image-orientation")}}an {{xref_cssangle}}, rounded to the next quarter turn from <code>0deg</code> and normalized, that is moduloing the value by <code>1turn</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("image-orientation")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Counters &amp; Lists</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("counter-increment")}}</td>
      <td>{{cssappliestodef("counter-increment", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("counter-increment")}}</td>
      <td>{{cssuniqueorderdef("counter-increment")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("counter-reset")}}</td>
      <td>{{cssappliestodef("counter-reset", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("counter-reset")}}</td>
      <td>{{cssuniqueorderdef("counter-reset")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("list-style")}}</td>
      <td>{{cssappliestodef("list-style", "list items")}}</td>
      <td>{{csscomputedshorthand("list-style", "list-style-image list-style-position list-style-type")}}</td>
      <td>{{cssorderofappearancedef("list-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("list-style-image")}}</td>
      <td>{{cssappliestodef("list-style-image", "list items")}}</td>
      <td>{{csscomputeddef("list-style-image", "none or the image with its URI made absolute")}}</td>
      <td>{{cssuniqueorderdef("list-style-image")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("list-style-position")}}</td>
      <td>{{cssappliestodef("list-style-position", "list items")}}</td>
      <td>{{csscomputedasspecifieddef("list-style-position")}}</td>
      <td>{{cssuniqueorderdef("list-style-position")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("list-style-type")}}</td>
      <td>{{cssappliestodef("list-style-type", "list items")}}</td>
      <td>{{csscomputedasspecifieddef("list-style-type")}}</td>
      <td>{{cssuniqueorderdef("list-style-type")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Page</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("orphans")}}</td>
      <td>{{cssappliestodef("orphans", "block container elements")}}</td>
      <td>{{csscomputedasspecifieddef("orphans")}}</td>
      <td>{{cssuniqueorderdef("orphans")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("page-break-after")}}</td>
      <td>{{cssappliestodef("page-break-after", "block-level elements in the normal flow of the root element. UA may also apply it to other elements like table-row elements.")}}</td>
      <td>{{csscomputedasspecifieddef("page-break-after")}}</td>
      <td>{{cssuniqueorderdef("page-break-after")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("page-break-before")}}</td>
      <td>{{cssappliestodef("page-break-before", "block-level elements in the normal flow of the root element. UA may also apply it to other elements like table-row elements.")}}</td>
      <td>{{csscomputedasspecifieddef("page-break-before")}}</td>
      <td>{{cssuniqueorderdef("page-break-before")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("page-break-inside")}}</td>
      <td>{{cssappliestodef("page-break-inside", "block-level elements in the normal flow of the root element. UA may also apply it to other elements like table-row elements.")}}</td>
      <td>{{csscomputedasspecifieddef("page-break-inside")}}</td>
      <td>{{cssuniqueorderdef("page-break-inside")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("widows")}}</td>
      <td>{{cssappliestodef("widows", "block container elements")}}</td>
      <td>{{csscomputedasspecifieddef("widows")}}</td>
      <td>{{cssuniqueorderdef("widows")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">User interface</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("outline")}}</td>
      <td>{{cssappliestodef("outline", "all elements")}}</td>
      <td>{{csscomputedshorthand("outline", "outline-color outline-width outline-style")}}</td>
      <td>{{cssorderofappearancedef("outline")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("outline-color")}}</td>
      <td>{{cssappliestodef("outline-color", "all elements")}}</td>
      <td>{{csscomputedstartdef("outline-color")}}For the keyword <code>invert</code>, the computed value is <code>invert</code>. For the color value, if the value is translucent, the computed value will be the <code>rgba()</code> corresponding one. If it isn't, it will be the <code>rgb()</code> corresponding one. The transparent keyword maps to <code>rgb(0,0,0)</code>.{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("outline-color")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("outline-width")}}</td>
      <td>{{cssappliestodef("outline-width", "all elements")}}</td>
      <td>{{csscomputedstartdef("outline-width")}}an absolute length; if the keyword <code>none</code> is specified, the computed value is <code>0</code>{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("outline-width")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("outline-style")}}</td>
      <td>{{cssappliestodef("outline-style", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("outline-style")}}</td>
      <td>{{cssuniqueorderdef("outline-style")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("outline-offset")}}</td>
      <td>{{cssappliestodef("outline-offset", "all elements")}}</td>
      <td>{{csscomputeddef("outline-offset", "as specified, but with relative lengths converted into absolute lengths")}}</td>
      <td>{{cssuniqueorderdef("outline-offset")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("cursor")}}</td>
      <td>{{cssappliestodef("cursor", "all elements")}}</td>
      <td>{{csscomputeddef("cursor", "as specified, but with relative URI converted into absolute URI")}}</td>
      <td>{{cssuniqueorderdef("cursor")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("resize")}}</td>
      <td>{{cssappliestodef("resize", "elements with overflow other than visible")}}</td>
      <td>{{csscomputedasspecifieddef("resize")}}</td>
      <td>{{cssuniqueorderdef("resize")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("text-overflow")}}</td>
      <td>{{cssappliestodef("text-overflow", "block container elements")}}</td>
      <td>{{csscomputedasspecifieddef("text-overflow")}}</td>
      <td>{{cssuniqueorderdef("text-overflow")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Generated content</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("content")}}</td>
      <td>{{cssappliestostartdef("content")}}{{cssxref("::before")}} and {{cssxref("::after")}} <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>{{cssappliestoenddef}}</td>
      <td>{{csscomputedstartdef("content")}}On elements, always computes to <code>normal</code>. On {{cssxref("::before")}} and {{cssxref("::after")}}, if<code> normal</code> is specified, computes to <code>none</code>. Otherwise, for URI values, the absolute URI; for <code>attr()</code> values, the resulting string; for other keywords, as specified.{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("content")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("quotes")}}</td>
      <td>{{cssappliestodef("quotes", "all elements")}}</td>
      <td>{{csscomputedasspecifieddef("quotes")}}</td>
      <td>{{cssuniqueorderdef("quotes")}}</td>
    </tr>
    <tr>
      <th colspan="4" scope="col">Miscellaneous</th>
    </tr>
    <tr>
      <th scope="col">Property</th>
      <th scope="col">Applies to</th>
      <th scope="col">Computed value</th>
      <th scope="col">Canonical order</th>
    </tr>
    <tr>
      <td>{{cssxref("clip")}}</td>
      <td>{{cssappliestodef("clip", "absolutely positioned elements")}}</td>
      <td>{{csscomputedstartdef("clip")}}<code>auto</code> if specified as <code>auto</code>, otherwise a rectangle with four values, each of which is <code>auto</code> if specified as <code>auto</code> or the computed length otherwise{{csscomputedenddef}}</td>
      <td>{{cssuniqueorderdef("clip")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("display")}}</td>
      <td>{{cssappliestodef("display", "all elements")}}</td>
      <td>{{csscomputedstartdef("display")}}as the specified value, except for positioned and floating elements and for the root element. In both case the computed value may be another keyword than the one specified.{{csscomputedenddef()}}</td>
      <td>{{cssuniqueorderdef("display")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("unicode-bidi")}}</td>
      <td>{{cssappliestodef("unicode-bidi", "all elements, though some values have no effect on non-inline elements")}}</td>
      <td>{{csscomputedasspecifieddef("unicode-bidi")}}</td>
      <td>{{cssuniqueorderdef("unicode-bidi")}}</td>
    </tr>
    <tr>
      <td>{{cssxref("ime-mode")}}</td>
      <td>{{cssappliestodef("ime-mode", "text fields")}}</td>
      <td>{{csscomputedasspecifieddef("ime-mode")}}</td>
      <td>{{cssuniqueorderdef("ime-mode")}}</td>
    </tr>
  </tbody>
</table>
Revert to this revision