CSS values and units - Learn web development
numbers, lengths, and percentages there are various numeric data types that you might find yourself using in css.
... <percentage> a <percentage> represents a fraction of some other value, for example 50%.
... percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.
...And 11 more matches

border-radius - CSS: Cascading Style Sheets
eft | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* global values */ border-radius: inherit; border-radius: initial; border-radius: unset; the border-radius property is specified as: one, two, three, or four <length> or <percentage> values.
... followed optionally by "/" and one, two, three, or four <length> or <percentage> values.
... values radius is a <length> or a <percentage> denoting a radius to use for the border in each corner of the border.
...And 10 more matches

-webkit-box-reflect - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

additive-symbols - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

negative - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

pad - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

prefix - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

suffix - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

symbols - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

background-image - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

border-image-source - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

content - CSS: Cascading Style Sheets
)<leader-type> = dotted | solid | space | <string>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )<counter-style> = <counter-style-name> | symbols()where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

filter - CSS: Cascading Style Sheets
except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).
...the parameter is specified as a css length, but does not accept percentage values.
...alueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
...And 9 more matches

mask-border-source - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

mask-image - CSS: Cascading Style Sheets
ent()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>?
...[ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 9 more matches

Sizing items in CSS - Learn web development
due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on the web.
... using percentages in many ways, percentages act like length units, and as we discussed in the lesson on values and units, they can often be used interchangeably with lengths.
... when using a percentage you need to be aware what it is a percentage of.
...And 8 more matches

Legacy layout methods - Learn web development
cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> body { width: 90%; max-width: 900px; margin: 0 auto; } div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } you'll notice here that we are using percentages for all the widths — this is quite a good strategy, as it creates a liquid layout, one that adjusts to different screen sizes and keeps the same proportions for the column widths at smaller screen sizes.
...if we instead decided to lay out our design on a grid with columns that grow and shrink according to browser width, we would need to calculate percentage widths for the columns and gutters between them.
...to achieve this we can turn the reference pixel widths into percentages.
...And 8 more matches

-webkit-border-before - CSS: Cascading Style Sheets
the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from one browser to anotherapplies toall elementsinheritedyespercentagesas each of the properties of the shorthand:-webkit-border-before-width: logical-width of containing blockcomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-ri...
...the transparent keyword maps to rgba(0,0,0,0).animation typediscrete formal syntax <'border-width'> | <'border-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 7 more matches

backdrop-filter - CSS: Cascading Style Sheets
alueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <number-percentage> )<contrast()> = contrast( [ <number-percentage> ] )<drop-shadow()> = drop-shadow( <length>{2,3} <color>?
... )<grayscale()> = grayscale( <number-percentage> )<hue-rotate()> = hue-rotate( <angle> )<invert()> = invert( <number-percentage> )<opacity()> = opacity( [ <number-percentage> ] )<saturate()> = saturate( <number-percentage> )<sepia()> = sepia( <number-percentage> )where <number-percentage> = <number> | <percentage><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...And 7 more matches

image() - CSS: Cascading Style Sheets
)where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 7 more matches

-moz-border-bottom-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-moz-border-left-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-moz-border-right-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-moz-border-top-colors - Archive of obsolete content
formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-3dlight-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-arrow-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-base-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-darkshadow-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-face-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-highlight-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-shadow-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-ms-scrollbar-track-color - Archive of obsolete content
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-webkit-tap-highlight-color - CSS: Cascading Style Sheets
formal definition initial valueblackapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-webkit-text-fill-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyescomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-webkit-text-stroke-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyescomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

-webkit-text-stroke - CSS: Cascading Style Sheets
and:-webkit-text-stroke-width: absolute <length>-webkit-text-stroke-color: computed coloranimation typeas each of the properties of the shorthand:-webkit-text-stroke-width: discrete-webkit-text-stroke-color: a color formal syntax <length> | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

background-color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-block-end - CSS: Cascading Style Sheets
-top-color: computed coloranimation typeas each of the properties of the shorthand:border-block-end-color: a colorborder-block-end-style: discreteborder-block-end-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-block-start - CSS: Cascading Style Sheets
olor: computed coloranimation typeas each of the properties of the shorthand:border-block-start-color: a colorborder-block-start-style: discreteborder-block-start-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-block - CSS: Cascading Style Sheets
the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-bottom - CSS: Cascading Style Sheets
-bottom-style: discreteborder-bottom-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-color - CSS: Cascading Style Sheets
ight-color: computed colorborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a color formal syntax <color>{1,4}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-inline-end - CSS: Cascading Style Sheets
d-color: computed coloranimation typeas each of the properties of the shorthand:border-inline-end-color: a colorborder-inline-end-style: discreteborder-inline-end-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-inline-start - CSS: Cascading Style Sheets
r: computed coloranimation typeas each of the properties of the shorthand:border-inline-start-color: a colorborder-inline-start-style: discreteborder-inline-start-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-inline - CSS: Cascading Style Sheets
the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-left-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-left - CSS: Cascading Style Sheets
rder-left-style: discreteborder-left-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-right-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-right - CSS: Cascading Style Sheets
er-right-style: discreteborder-right-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-top-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border-top - CSS: Cascading Style Sheets
border-top-style: discreteborder-top-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

border - CSS: Cascading Style Sheets
rder-right-width: a lengthborder-top-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

box-shadow - CSS: Cascading Style Sheets
&& <length>{2,4} && <color>?where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

caret-color - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueauto is computed as specified and <color> values are computed as defined for the color property.animation typea color formal syntax auto | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

color - CSS: Cascading Style Sheets
the transparent keyword maps to rgba(0,0,0,0).animation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

column-rule-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies tomulticol elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

font-stretch - CSS: Cascading Style Sheets
/* keyword values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; /* percentage values */ font-stretch: 50%; font-stretch: 100%; font-stretch: 200%; /* global values */ font-stretch: inherit; font-stretch: initial; font-stretch: unset; syntax this property may be specified as a single keyword value or a single <percentage> value.
... <percentage> a <percentage> value between 50% and 200% (inclusive).
...css fonts level 4 extends the syntax to accept a <percentage> value as well.
...And 6 more matches

outline-color - CSS: Cascading Style Sheets
the transparent keyword maps to rgba(0,0,0,0).animation typea color formal syntax <color> | invertwhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

scrollbar-color - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typea color formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

text-decoration-color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

text-emphasis-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

text-shadow - CSS: Cascading Style Sheets
]where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
...) | rgb( <percentage>#{3} , <alpha-value>?
...)<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]?
...And 6 more matches

line-height - CSS: Cascading Style Sheets
syntax /* keyword value */ line-height: normal; /* unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* <length> values */ line-height: 3em; /* <percentage> values */ line-height: 34%; /* global values */ line-height: inherit; line-height: initial; line-height: unset; the line-height property is specified as any one of the following: a <number> a <length> a <percentage> the keyword normal.
... <percentage> relative to the font size of the element itself.
... the computed value is this <percentage> multiplied by the element's computed font size.
...And 5 more matches

perspective-origin - CSS: Cascading Style Sheets
it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the width of the element.
... center, a keyword being a shortcut for the 50% percentage value.
... right, a keyword being a shortcut for the 100% percentage value.
...And 5 more matches

Content type - SVG: Scalable Vector Graphics
the format of an rgb value in the functional notation is an rgb start-function, followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")".
... note that the non-property <length> definition also allows a percentage unit identifier.
... the meaning of a percentage length value depends on the attribute for which the percentage length value has been specified.
...And 5 more matches

JS_GetGCParameter
_mark_slice, jsgc_allocation_threshold, jsgc_min_empty_chunk_count, jsgc_max_empty_chunk_count, jsgc_compaction_enabled, jsgc_allocation_threshold_factor, jsgc_allocation_threshold_factor_avoid_interrupt, jsgc_nursery_free_threshold_for_idle_collection, jsgc_pretenure_threshold, jsgc_pretenure_group_threshold, jsgc_nursery_free_threshold_for_idle_collection_percent, jsgc_min_nursery_bytes, jsgc_min_last_ditch_gc_period, } jsgcparamkey; value (c++/js shell) description jsgc_max_bytes / "maxbytes" maximum nominal heap before last ditch gc.
... the first two parameters are in mb and the remaining two are in percentage of heap size.
... jsgc_high_frequency_high_limit / "highfrequencyhighlimit" jsgc_high_frequency_heap_growth_max / "highfrequencyheapgrowthmax" jsgc_high_frequency_heap_growth_min / "highfrequencyheapgrowthmin" jsgc_low_frequency_heap_growth / "lowfrequencyheapgrowth" heap growth percentage for low frequency gcs.
...And 4 more matches

CanvasRenderingContext2D.filter - Web APIs
brightness() a css <percentage>.
... contrast() a css <percentage>.
... grayscale() a css <percentage>.
...And 4 more matches

Intersection Observer API - Web APIs
this is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.
...the values can be percentages.
... threshold either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
...And 4 more matches

CSS values and units - CSS: Cascading Style Sheets
numeric data types <integer> <number> <dimension> <percentage> integers an integer is one or more decimal digits, 0 through 9, such as 1024 or -55.
... percentages a <percentage> is a type that represents a fraction of some other value.
... percentage values are always relative to another quantity, for example a length.
...And 4 more matches

<basic-shape> - CSS: Cascading Style Sheets
all the lengths expressed in percentages are resolved from the used dimensions of the reference box.
...a percentage value here is resolved from the used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2).
...percentage values here are resolved against the used width (for the rx value) and the used height (for the ry value) of the reference box.
...And 4 more matches

border-bottom-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-left-radius: radius */ border-bottom-left-radius: 3px; /* percentage values */ /* circle if box is a square or ellipse if box is a rectangle */ border-bottom-left-radius: 20%; /* same as above: 20% of horizontal(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of horizontal(width) and 10% of vertical(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ bor...
...der-bottom-left-radius: 0.5em 1em; border-bottom-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
...And 4 more matches

border-bottom-right-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-bottom-right-radius: radius */ border-bottom-right-radius: 3px; /* percentage values */ border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */ border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */ border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-radius: horizontal v...
...ertical */ border-bottom-right-radius: 0.5em 1em; border-bottom-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
...And 4 more matches

<color> - CSS: Cascading Style Sheets
functional notation: rgb[a](r, g, b[, a]) r (red), g (green), and b (blue) can be either <number>s or <percentage>s, where the number 255 corresponds to 100%.
... a (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
... s (saturation) and l (lightness) are percentages.
...And 4 more matches

grid-template-columns - CSS: Cascading Style Sheets
<percentage> is a non-negative <percentage> value relative to the inline size of the grid container.
... if the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto.
... the intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
...And 4 more matches

grid-template-rows - CSS: Cascading Style Sheets
<percentage> is a non-negative <percentage> value, relative to the block size of the grid container.
... if the size of the grid container depends on the size of its tracks, then the percentage must be treated as auto.
... the intrinsic size contributions of the track may be adjusted to the size of the grid container, and increase the final size of the track by the minimum amount that would result in honoring the percentage.
...And 4 more matches

transform-origin - CSS: Cascading Style Sheets
one-value syntax: the value must be a <length>, a <percentage>, or one of the keywords left, center, right, top, and bottom.
... two-value syntax: one value must be a <length>, a <percentage>, or one of the keywords left, center, and right.
... the other value must be a <length>, a <percentage>, or one of the keywords top, center, and bottom.
...And 4 more matches

width - CSS: Cascading Style Sheets
syntax /* <length> values */ width: 300px; width: 25em; /* <percentage> value */ width: 75%; /* keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto; /* global values */ width: inherit; width: initial; width: unset; the width property is specified as either: one of the following keyword values: min-content, max-content, fit-content, auto.
... a <length> or a <percentage>.
... <percentage> defines the width as a percentage of the containing block's width.
...And 4 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
legal values for each of these parameters are: red, green, and blue each must be an <integer> value between 0 and 255 (inclusive), or a <percentage> from 0% to 100%.
...you can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.
...saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue.
...And 4 more matches

nsISelection2
void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); attributes attribute type description type short returns the type of the selection (see nsiselectioncontroller for available constants).
... void scrollintoview( in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent ); parameters aregion the region inside the selection to scroll into view (see selection region constants defined in nsiselectioncontroller).
... avpercent how to align the frame vertically.
...And 3 more matches

nsISelectionPrivate
obsolete since gecko 12.0 long gettableselectiontype(in nsidomrange range); void removeselectionlistener(in nsiselectionlistener listenertoremove); void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native code only!
... void scrollintoview( in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent ); parameters aregion the region inside the selection to scroll into view (see selection region constants defined in nsiselectioncontroller).
... avpercent how to align the frame vertically.
...And 3 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
or value can be a percentage.
... must be followed by a percent sign (%).
... value is a percentage.
...And 3 more matches

@keyframes - CSS: Cascading Style Sheets
<percentage> a percentage of the time through the animation sequence at which the specified keyframe should occur.
...each @keyframes rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.
... you can list the keyframe percentages in any order; they will be handled in the order they should occur.
...And 3 more matches

Using CSS gradients - CSS: Cascading Style Sheets
to fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values.
... if you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.
...by default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box: <div class="simple-radial"></div> div { width: 240px; height: 120px; } .simple-radial { background: radial-gradient(red, blue); } positioning radial color stops again like linear gradients, you can position each radial color stop with a percentage or absolute length.
...And 3 more matches

Layout and the containing block - CSS: Cascading Style Sheets
percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block.
... calculating percentage values from the containing block as noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block.
... the properties that work this way are box model properties and offset properties: the height, top, and bottom properties compute percentage values from the height of the containing block.
...And 3 more matches

border-top-left-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
... the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
...And 3 more matches

border-top-right-radius - CSS: Cascading Style Sheets
syntax /* the corner is a circle */ /* border-top-right-radius: radius */ border-top-right-radius: 3px; /* the corner is an ellipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius: 0.5em 1em; border-top-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner.
... with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner.
... the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner.
...And 3 more matches

translate - CSS: Cascading Style Sheets
syntax /* keyword values */ translate: none; /* single values */ translate: 100px; translate: 50%; /* two values */ translate: 100px 200px; translate: 50% 105px; /* three values */ translate: 50% 105px 5rem; values single <length-percentage> value a <length> or <percentage> that specifies a 2d translation, with the same translation along both the x and y axes.
... two <length-percentage> values two <length> or <percentage> that specify the x and y axis translation values (respectively) of a 2d translation.
... three values two <length-percentage> and single <length> values that specify the x, y, and z axis translation values (respectively) of a 3d translation.
...And 3 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: auto|baseline|super|sub|<percentage>|<length>|inherit; animatable: yes clip deprecated it defines what portion of an element is visible.
... value: <number>|<percentage>; animatable: yes fill-rule it indicates how to determine what side of a path is inside a shape.
... value: <number>|<percentage>; animatable: yes font-family it indicates which font family will be used to render the text of the element.
...And 3 more matches

<rect> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the rect.
... value type: <length>|<percentage> ; default value: 0; animatable: yes width the width of the rect.
... value type: auto|<length>|<percentage> ; default value: auto; animatable: yes height the height of the rect.
...And 3 more matches

<symbol> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
... value type: <length>|<percentage>|left|center|right ; default value: 0; animatable: yes refy this attribute determines the y coordinate of the reference point of the symbol.
... value type: <length>|<percentage>|top|center|bottom ; default value: 0; animatable: yes viewbox this attribute defines the bound of the svg viewport for the current symbol.
...And 3 more matches

-ms-content-zoom-snap-points - Archive of obsolete content
initial valuesnapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values snapinterval( <percentage>, <percentage> ) specifies where the snap-points will be placed.
... the first percentage specifies where the first snap-point will be placed.
... the second percentage specifies the distance between subsequent snap-points, both zoomed in and zoomed out from the initial snap-point.
...And 2 more matches

VTTRegion - Web APIs
vttregion.width a double representing the width of the region, as a percentage of the video.
... vttregion.regionanchorx a double representing the region anchor x offset, as a percentage of the region.
... vttregion.regionanchory a double representing the region anchor y offset, as a percentage of the region.
...And 2 more matches

Web applications and ARIA FAQ - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> this progress bar is built using a <div>, which is not very descriptive.
...var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, so that assistive technologies know what kind of widget it is.
...function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } will adding aria change my page styles or behavior?
...And 2 more matches

font-stretch - CSS: Cascading Style Sheets
<percentage> a <percentage> value between 50% and 200% (inclusive).
...css fonts level 4 extends the syntax to accept a <percentage> value as well.
... keyword to numeric mapping the table below shows the mapping between keyword values and numeric percentages: keyword percentage ultra-condensed 50% extra-condensed 62.5% condensed 75% semi-condensed 87.5% normal 100% semi-expanded 112.5% expanded 125% extra-expanded 150% ultra-expanded 200% variable fonts most fonts have a particular width which corresponds to one of ...
...And 2 more matches

CSS reference - CSS: Cascading Style Sheets
--webkit-line-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackgr...
...ngfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-render...
...ingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-o...
...And 2 more matches

background-position-x - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-...
... <percentage> the offset of the given background image's horizontal position relative to the container.
... formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ left | right | x-start | x-end ]?
...And 2 more matches

background-position-y - CSS: Cascading Style Sheets
syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; backgrou...
... <percentage> the offset of the given background image's vertical position relative to the container.
... formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ top | bottom | y-start | y-end ]?
...And 2 more matches

calc() - CSS: Cascading Style Sheets
it can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
...for instance, calc(50% -8px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(50% - 8px) is a percentage followed by a subtraction operator and a length.
... likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage.
...And 2 more matches

clip-path - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to reference box when specified, otherwise border-boxcomputed valueas specified, but with <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fi...
...ll-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
..., [ <length-percentage> <length-percentage> ]# )<path()> = path( [ <fill-rule>, ]?
...And 2 more matches

font-size - CSS: Cascading Style Sheets
syntax /* <absolute-size> values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* <relative-size> values */ font-size: smaller; font-size: larger; /* <length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size: 80%; /* global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or relative-size keywords as a <length> or a <percentage>, relative to the parent element's font size values xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large absol...
... <percentage> a positive <percentage> value, relative to the parent element's font size.
...this means em units and percentages do the same thing for font-size.
...And 2 more matches

grid-auto-columns - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* <length> values */ grid-auto-columns: 100px; grid-auto-columns: 20cm; grid-auto-columns: 50vmax; /* <percentage> values */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400px); grid-auto-columns: fit-content(5cm); grid-auto-co...
... <percentage> is a non-negative <percentage> value relative to the block size of the grid container.
... if the block size of the grid container is indefinite, the percentage value is treated like auto.
...And 2 more matches

grid-auto-rows - CSS: Cascading Style Sheets
syntax /* keyword values */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* <flex> values */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple track-size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33...
... <percentage> is a non-negative <percentage> value relative to the block size of the grid container.
... if the block size of the grid container is indefinite, the percentage value is treated like auto.
...And 2 more matches

height - CSS: Cascading Style Sheets
syntax /* keyword value */ height: auto; /* <length> values */ height: 120px; height: 10em; /* <percentage> value */ height: 75%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value.
... <percentage> defines the height as a percentage of the containing block's height.
... fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
...And 2 more matches

max-height - CSS: Cascading Style Sheets
syntax /* <length> value */ max-height: 3.5em; /* <percentage> value */ max-height: 75%; /* keyword values */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content(20em); /* global values */ max-height: inherit; max-height: initial; max-height: unset; values <length> defines the max-height as an absolute value.
... <percentage> defines the max-height as a percentage of the containing block's height.
... fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
...And 2 more matches

min-height - CSS: Cascading Style Sheets
syntax /* <length> value */ min-height: 3.5em; /* <percentage> value */ min-height: 10%; /* keyword values */ min-height: max-content; min-height: min-content; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value.
... <percentage> defines the min-height as a percentage of the containing block's height.
... fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
...And 2 more matches

minmax() - CSS: Cascading Style Sheets
each parameter can be a <length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto.
... <percentage> a non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks.
... if the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto.
...And 2 more matches

repeating-radial-gradient() - CSS: Cascading Style Sheets
<color-stop> a color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis).
... a percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray.
... percentage values in between are linearly positioned on the virtual gradient ray.
...And 2 more matches

translate() - CSS: Cascading Style Sheets
syntax /* single <length-percentage> values */ transform: translate(200px); transform: translate(50%); /* double <length-percentage> values */ transform: translate(100px, 200px); transform: translate(100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%); values single <length-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector.
...a percentage value refers to the width of the reference box defined by the transform-box property.
... double <length-percentage> values this value describes two <length> or <percentage> values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector.
...And 2 more matches

Intl.NumberFormat() constructor - JavaScript
"percent" for percent formatting "unit" for unit formatting unit the unit to use in unit formatting, possible values are core unit identifiers, defined in uts #35, part 2, section 6.
...possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information).
...possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0.
...And 2 more matches

<line> - SVG: Scalable Vector Graphics
value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes x2 defines the x-axis coordinate of the line ending point.
... value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y1 defines the y-axis coordinate of the line starting point.
... value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes y2 defines the y-axis coordinate of the line ending point.
...And 2 more matches

<text> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the starting point of the text baseline.
... value type: <length>|<percentage> ; default value: 0; animatable: yes dx shifts the text position horizontally from a previous text element.
... value type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text element.
...And 2 more matches

<tspan> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes y the y coordinate of the starting point of the text baseline.
... value type: <length>|<percentage> ; default value: none; animatable: yes dx shifts the text position horizontally from a previous text element.
... value type: <length>|<percentage> ; default value: none; animatable: yes dy shifts the text position vertically from a previous text element.
...And 2 more matches

Index - Archive of obsolete content
the 95% confidence interval is the calculated percentage of the mean value to fall within 95% of the measured results.
... the percentage difference is calculated between the two vms.
...the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user.
... 2168 -moz-scrollbar-thumb-proportional -moz-scrollbar-thumb-proportional, @media, css, css:mozilla extensions, non-standard, media feature if the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1.

-ms-scroll-snap-points-x - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
... snapinterval( <length-percentage>, <length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points.
... snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-x property.

-ms-scroll-snap-points-y - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
... snapinterval( <length-percentage>, <length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points.
... snaplist( <length-percentage># ) specifies the position of individual snap-points as a comma-separated list of values, each of which represents a zoom factor.
... formal syntax snapinterval( <length-percentage>, <length-percentage> ) | snaplist( <length-percentage># )where <length-percentage> = <length> | <percentage> examples this example demonstrates both types of values for the -ms-scroll-snap-points-y property.

Responsive design - Learn web development
flexible floated layouts were achieved by giving each element a percentage width, and ensuring that across the layout the totals were not more than 100%.
... in his original piece on fluid grids, marcotte detailed a formula for taking a layout designed using pixels and converting it into percentages.
...you can see how we no longer need to use strange percentage values to calculate the size of the columns: example, source code.
...1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

nsIMemoryReporter
units_percentage 3 the amount contains a fraction that should be expressed as a percentage.
... note: the amount field should be given a value 100 times the actual percentage; this number will be divided by 100 when shown.
... this allows a fractional percentage to be shown even though amount is an integer.
... for example if the actual percentage is 12.34%, amount should be 1234.

-moz-image-rect - CSS: Cascading Style Sheets
top the top edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
... right the right edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
... bottom the bottom edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
... left the left edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.

-moz-outline-radius - CSS: Cascading Style Sheets
utline-radius: 25px 1em 12% 4mm; /* global values */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; constituent properties this property is a shorthand for the following css properties: -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-radius.
... <percentage> a <percentage>; see border-radius for details.
... formal definition initial valueas each of the properties of the shorthand:-moz-outline-radius-topleft: 0-moz-outline-radius-topright: 0-moz-outline-radius-bottomright: 0-moz-outline-radius-bottomleft: 0applies toall elementsinheritednopercentagesas each of the properties of the shorthand:-moz-outline-radius-topleft: refer to the corresponding dimension of the border box-moz-outline-radius-topright: refer to the corresponding dimension of the border box-moz-outline-radius-bottomright: refer to the corresponding dimension of the border box-moz-outline-radius-bottomleft: refer to the corresponding dimension of the border boxcomputed valu...
...eas each of the properties of the shorthand:-moz-outline-radius-topleft: as specified-moz-outline-radius-topright: as specified-moz-outline-radius-bottomright: as specified-moz-outline-radius-bottomleft: as specifiedanimation typeas each of the properties of the shorthand:-moz-outline-radius-topleft: a length, percentage or calc();-moz-outline-radius-topright: a length, percentage or calc();-moz-outline-radius-bottomright: a length, percentage or calc();-moz-outline-radius-bottomleft: a length, percentage or calc(); formal syntax <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?where <outline-radius> = <length> | <percentage> examples rounding an outline note: this example will not display the desired effect if you are viewing this in a browser other than firefox.

height - CSS: Cascading Style Sheets
<percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
... formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-height: automax-height: nonepercentagesas each of the properties of the shorthand:min-height: the percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.max-height: the percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.computed valueas each of the properties of the shorthand:min-height: the percentage as specified or the absolute lengthmax-height: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } specifications specification status comment css device adaptationthe definition of '"height" descriptor' in that specification.

border-image-slice - CSS: Cascading Style Sheets
age-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 45; /* top | right | bottom | left */ border-image-slice: 7 12 14 5; /* using the `fill` keyword */ border-image-slice: 10% fill 7 12; /* global values */ border-image-slice: inherit; border-image-slice: initial; border-image-slice: unset; the border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
...for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
... <percentage> represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.
...it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border imagecomputed valueone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedanimation typeby computed value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples adjustable border width and slice the folowing example shows a simple <div> with a border image set on it.

border-image-width - CSS: Cascading Style Sheets
syntax /* keyword value */ border-image-width: auto; /* <length> value */ border-image-width: 1rem; /* <percentage> value */ border-image-width: 25%; /* <number> value */ border-image-width: 3; /* vertical | horizontal */ border-image-width: 2em 3em; /* top | horizontal | bottom */ border-image-width: 5% 15% 10%; /* top | right | bottom | left */ border-image-width: 5% 2em 10% auto; /* global values */ border-image-width: inherit; border-image-width: initial; border-image-width: unset; the border-im...
... values <length-percentage> the width of the border, specified as a <length> or a <percentage>.
... percentages are relative to the width of the border image area for horizontal offsets and the height of the border image area for vertical offsets.
...it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, whic...

bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ bottom: 3px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block.
... <percentage> a <percentage> of the containing block's height.
...this computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed.

column-gap (grid-column-gap) - CSS: Cascading Style Sheets
syntax /* keyword value */ column-gap: normal; /* <length> values */ column-gap: 3px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below.
... <percentage> the size of the gap between columns, defined as a <percentage>.
... the <percentage> property's value must be non-negative.
... formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: auto; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid ...

gap (grid-gap) - CSS: Cascading Style Sheets
syntax /* one <length> value */ gap: 20px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* one <percentage> value */ gap: 16%; gap: 100%; /* two <length> values */ gap: 20px 10px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* one or two <percentage> values */ gap: 16% 100%; gap: 21px 82%; /* calc() values */ gap: calc(10% + 20px); gap: calc(20px + 10%) calc(10% - 5px); /* global values */ gap: inherit; gap: initial; gap: unset; this property is specified as a value for <'row-gap'> foll...
... <'row-gap'> and <'column-gap'> are each specified as a <length> or a <percentage>.
... <percentage> is the width of the gutter separating the grid lines, relative to the dimension of the element.
...containers, grid containersinheritednocomputed valueas each of the properties of the shorthand:row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementscolumn-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>?

left - CSS: Cascading Style Sheets
syntax /* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block.
... <percentage> a <percentage> of the containing block's width.
...this computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples positioning elements html <div id="wrap"> <div id="example_1"> <pre> position: absolute; ...

margin - CSS: Cascading Style Sheets
each value is a <length>, a <percentage>, or the keyword auto.
... <percentage> the size of the margin as a percentage, relative to the width of the containing block.
... formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin */ margin: 1.6em 20px; /* top and bottom: 1.6em margin */ /* left and right: 20px margin */ margin: 10px 3% -1em; /* top: 10px ma...
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:margin-bottom: the percentage as specified or the absolute lengthmargin-left: the percentage as specified or the absolute lengthmargin-right: the percentage as specified or the absolute lengthmargin-top: the percentage as specified or the absolute lengthanimation typea length ...

mask-border-slice - CSS: Cascading Style Sheets
ask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
...for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
... <percentage> represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.
... formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of the mask border imagecomputed valueas specifiedanimation typediscrete formal syntax <number-percentage>{1,4} fill?where <number-percentage> = <number> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.

mask-border-width - CSS: Cascading Style Sheets
syntax /* keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
... values <length-percentage> the width of the mask border, specified as a <length> or a <percentage>.
... percentages are relative to the width of the border area for horizontal offsets and the height of the border area for vertical offsets.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.

mask-size - CSS: Cascading Style Sheets
each value can be a <length>, a <percentage>, or auto.
... <percentage> a <percentage> value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of mask-origin.
...negative percentages are not allowed.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(htt...

max-block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ max-block-size: 300px; max-block-size: 25em; /* <percentage> values */ max-block-size: 75%; /* keyword values */ max-block-size: auto; max-block-size: max-content; max-block-size: min-content; max-block-size: fit-content(20em); /* global values */ max-block-size: inherit; max-block-size: initial; max-block-size: unset; values the max-block-size property's value can be any value that's legal for the max-width and max-height properties: <length> ...
... <percentage> defines the max-width as a percentage of the containing block's width.
... fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max-block-size with horizontal and vertical text in this example, the same text (the opening sentences from herman melville's novel moby-dick) is presented in both the horizontal-tb and vertical-rl writing modes.

max-width - CSS: Cascading Style Sheets
syntax /* <length> value */ max-width: 3.5em; /* <percentage> value */ max-width: 75%; /* keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /* global values */ max-width: inherit; max-width: initial; max-width: unset; values <length> defines the max-width as an absolute value.
... <percentage> defines the max-width as a percentage of the containing block's width.
... fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max width in pixels in this example, the "child" will b...

min-width - CSS: Cascading Style Sheets
syntax /* <length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /* keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value.
... <percentage> defines the min-width as a percentage of the containing block's width.
... fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e.
... formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.

offset-path - CSS: Cascading Style Sheets
] ) | <path()> | <url> | [ <basic-shape> | <geometry-box> ]where <size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<path()> = path( [ <fill-rule>, ]?
... <string> )<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <length-percentage> = <length> | <percentage><fill-rule> = nonzero | evenodd<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
..., [ <length-percentage> <length-percentage> ]# )<shape-box> = <box> | margin-boxwhere <shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<box> = border-box | padding-box | content-box examples animating an element with offset-path the offset-path properties in the css code sample defines a motion path that is identical to the <path> element in the svg.

offset-position - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-position: auto; offset-position: top; offset-position: bottom; offset-position: left; offset-position: right; offset-position: center; /* <percentage> values */ offset-position: 25% 75%; /* <length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position: 10ch 8em; /* edge offsets values */ offset-position: bottom 10px right 20px; offset-position: right 3em bottom 10px; offset-position: bottom 10px right; offset-position: top right 10px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property.
...if three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).
... formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrefertosizeofcontainingblockcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting initial offset position <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } specifications specification status comment motion path module level 1the definition of 'offset-position' in that specification.

padding - CSS: Cascading Style Sheets
each value is a <length> or a <percentage>.
... <percentage> the size of the padding as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:padding-bottom: the percentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding wi...
...th pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-color: lime; padding: 20px 50px; } h3 { background-color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px padding */ /* left and right: 20px padding */ padding: 10px 3% 20px; /* top: 10px padding */ /* left and right: 3% padding */ /* bottom: 20px padding */ padding: 1em 3px 30px 5px; /* top: 1em padding */ ...

<position> - CSS: Cascading Style Sheets
if specified, an offset can be either a relative <percentage> value or an absolute <length> value.
...word /* a value for horizontal position, keyword for vertical position */ value value /* a value for each direction (horizontal then vertical) */ /* 4-value syntax */ keyword value keyword value /* each value is an offset from the keyword that preceeds it */ formal syntax [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length> | <percentage> ] [ top | center | bottom | <length> | <percentage> ]?
... | [ [ left | right ] [ <length> | <percentage> ] ] && [ [ top | bottom ] [ <length> | <percentage> ] ] ] note: the background-position property also accepts a three-value syntax.
... recommendation allows combination of a keyword with a <length> or <percentage> value.

radial-gradient() - CSS: Cascading Style Sheets
<linear-color-stop> a color-stop's <color> value, followed by an one or two optional stop positions (either a <percentage> or a <length> along the gradient's axis).
... a percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray.
... percentage values in between are linearly positioned on the gradient ray.
...percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%.

right - CSS: Cascading Style Sheets
syntax /* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block.
... <percentage> a <percentage> of the containing block's width.
...this computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="...

text-decoration-thickness - CSS: Cascading Style Sheets
syntax /* single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px; /* percentage */ text-decoration-thickness: 10%; /* global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: unset; values auto the browser chooses an appropriate width for the text decoration line.
... <percentage> specifies the thickness of the text decoration line as a <percentage> of 1em in the current font.
... a percentage inherits as a relative value, and so therefore scales with changes in the font.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style...

text-indent - CSS: Cascading Style Sheets
syntax /* <length> values */ text-indent: 3mm; text-indent: 40px; /* <percentage> value relative to the containing block width */ text-indent: 15%; /* keyword values */ text-indent: 5em each-line; text-indent: 5em hanging; text-indent: 5em hanging each-line; /* global values */ text-indent: inherit; text-indent: initial; text-indent: unset; values <length> indentation is specified as an absolute <length>.
... <percentage> indentation is a <percentage> of the containing block's width.
... formal definition initial value0applies toblock containersinheritedyespercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length, plus any keywords as specifiedanimation typea length, percentage or calc(); formal syntax <length-percentage> && hanging?
... && each-line?where <length-percentage> = <length> | <percentage> examples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 5em; background: powderblue; } result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volu...

text-size-adjust - CSS: Cascading Style Sheets
/* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages.
... syntax the text-size-adjust property is specified as none, auto, or a <percentage>.
... <percentage> enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.
... formal definition initial valueauto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).applies toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text fontcomputed valueas specifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification status comment css mobile text size adjustment module level 1the definition of 'text-size-adjust' in that specification.

text-underline-offset - CSS: Cascading Style Sheets
syntax /* single keyword */ text-underline-offset: auto; /* length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* percentage */ text-underline-offset: 20%; /* global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below.
... <percentage> specifies the offset of underlines as a <percentage> of 1 em in the element's font.
... a percentage inherits as a relative value, and so therefore scales with changes in the font.
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it.

top - CSS: Cascading Style Sheets
syntax /* <length> values */ top: 3px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /* keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block.
... <percentage> a <percentage> of the containing block's height.
...this computed value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment css positioned layout module level 3the definition of 'top' in that specification.

transform - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()>...
... | <skew()> | <skewx()> | <skewy()> | <matrix3d()> | <translate3d()> | <translatez()> | <scale3d()> | <scalez()> | <rotate3d()> | <rotatex()> | <rotatey()> | <rotatez()> | <perspective()>where <matrix()> = matrix( <number>#{6} )<translate()> = translate( <length-percentage> , <length-percentage>?
... )<translatex()> = translatex( <length-percentage> )<translatey()> = translatey( <length-percentage> )<scale()> = scale( <number> , <number>?
...)<skewx()> = skewx( [ <angle> | <zero> ] )<skewy()> = skewy( [ <angle> | <zero> ] )<matrix3d()> = matrix3d( <number>#{16} )<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )<translatez()> = translatez( <length> )<scale3d()> = scale3d( <number> , <number> , <number> )<scalez()> = scalez( <number> )<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )<rotatex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rotatez( [ <angle> | <zero> ] )<perspective()> = perspective( <length> )where <length-percentage> = <length> | <percentag...

vertical-align - CSS: Cascading Style Sheets
syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /* global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; the vertical-align property is specified as one of the values listed below.
... <percentage> aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property.
... values for table cells baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>) aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="lin...

word-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ word-spacing: normal; /* <length> values */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser.
... <percentage> specifies extra spacing as a percentage of the affected character’s advance width.
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the d...
... working draft replaces the previous values with a <spacing-limit> value that defines the same thing, plus the <percentage> value.

zoom - CSS: Cascading Style Sheets
/* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size.
... <percentage> zoom factor.
...equivalent to the corresponding percentage (1.0 = 100% = normal).
... formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { ...

refX - SVG: Scalable Vector Graphics
value <length-percentage> | <number> | left | center | right default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... percentage values are interpreted as being a percentage of the viewbox width.
... value <length> | left | center | right default value none animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... percentage values are interpreted as being a percentage of the viewbox width.

refY - SVG: Scalable Vector Graphics
value <length-percentage> | <number> | top | center | bottom default value 0 animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... percentage values are interpreted as being a percentage of the viewbox height.
... value <length> | top | center | bottom default value none animatable yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.
... percentage values are interpreted as being a percentage of the viewbox height.

transform-origin - SVG: Scalable Vector Graphics
usage notes values [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset.
... one-value syntax: the value must be a <length>, a <percentage>, or one of the keywords left, center, right, top, and bottom.
... two-value syntax: one value must be a <length>, a <percentage>, or one of the keywords left, center, and right.
... the other value must be a <length>, a <percentage>, or one of the keywords top, center, and bottom.

<ellipse> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y position of the ellipse.
... value type: <length>|<percentage> ; default value: 0; animatable: yes rx the radius of the ellipse on the x axis.
... value type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the radius of the ellipse on the y axis.
... value type: auto|<length>|<percentage> ; default value: auto; animatable: yes pathlength this attribute lets specify the total length for the path, in user units.

<foreignObject> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: auto; animatable: yes width the width of the foreignobject.
... value type: <length>|<percentage> ; default value: auto; animatable: yes x the x coordinate of the foreignobject.
... value type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordinate of the foreignobject.
... value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element.

<pattern> - SVG: Scalable Vector Graphics
value type: <length>|<percentage>; default value: 0; animatable: yes href this attribute reference a template pattern that provides default values for the <pattern> attributes.
... value type: <length>|<percentage> ; default value: 0; animatable: yes x this attribute determines the x coordinate shift of the pattern tile.
... value type: <length>|<percentage> ; default value: 0; animatable: yes xlink:href deprecated since svg 2 this attribute reference a template pattern that provides default values for the <pattern> attributes.
... value type: <length>|<percentage> ; default value: 0; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejo...

<svg> - SVG: Scalable Vector Graphics
(not the height of its coordinate system.) value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio how the svg fragment must be deformed if it is displayed with a different aspect ratio.
...(not the width of its coordinate system.) value type: <length>|<percentage> ; default value: auto; animatable: yes x the displayed x coordinate of the svg container.
... value type: <length>|<percentage> ; default value: 0; animatable: yes y the displayed y coordinate of the svg container.
... value type: <length>|<percentage> ; default value: 0; animatable: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning these attributes can also be used as css properties.

Table Layout Strategy - Archive of obsolete content
the words the table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as px, mm etc., proportional width - prop the cell width specified via 1*, 2* etc.
...+ padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others the priority of allocations for columns is as follows: max(min_con, min_adj) max (pct, pct_adj) fix fi...
... overspeficied percent columns <col width="30%"><col width="60%"><tbody></tbody>foobar <col width="33%"><col><tbody></tbody>foobar <table border width="200px"> <col width="30%"><col width="60%"> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> the columns reach here only 90 % percent of the width so the remaining 20px need to be redistributed between the cols.

Running Tamarin performance tests - Archive of obsolete content
results from the two shells will be shown side to side and the percent speedup will be shown.
...if more than 2 repetitions are specified the 95% percentile confidence rating is calculated.
... the confidence rating measures the percentage of the mean 95% of the results were within the range.

Browser Feature Detection - Archive of obsolete content
this test takes that idea to the extreme and tests a large number of properties and methods to determine the level of support a browser has for particular standards and reports a rating as the percentage of names the browser defines.
... browser sniffing via api name detection the following tables list the api names defined for specific w3c dom apis and lists the percentage of names that your browser actually defines followed by a list of each of the api names tested along with an indication of whether the name was defined for your browser.
...; i < features.length; i++) if (typeof(object[features[i].name]) != 'undefined') { features[i].supported = true; ++level; } return math.floor( (100 * level) / features.length ); } function generatereport(object, featureset, description) { var i; var features = _features[featureset]; document.write('<p><b>' + featureset + ' support for properties/methods in ' + description + ', percentage of names defined = ' + supports(object, featureset) + '%<\/b><\/p>'); document.write('<table cellspacing="0">'); for (i = 0; i < features.length; i++) { if (features[i].supported) document.write('<tr><td>' + features[i].name + '<\/td><td>' + features[i].supported + '<\/td><\/tr>'); else document.write('<tr><td>' + features[i].name + '<\/td><td style="background-color:re...

-ms-content-zoom-limit-max - Archive of obsolete content
initial value400%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe largest allowed zoom factor.
...smaller values zoom out.computed valueas specifiedanimation typediscrete syntax values <percentage> the maximum zoom factor.
... formal syntax <percentage> specifications not part of any specification.

-ms-content-zoom-limit-min - Archive of obsolete content
initial value100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe smallest allowed zoom factor.
...smaller values zoom out.computed valueas specifiedanimation typediscrete syntax values <percentage> the minimum zoom factor.
... formal syntax <percentage> specifications not part of any specification.

Backgrounds and borders - Learn web development
in this case we could use the background-size property, which can take length or percentage values, to size the image to fit inside the background.
... you can use keywords such as top and right (look up the others on the background-position page): .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; } and lengths, and percentages: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; } you can also mix keyword values with lengths or percentages, for example: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; } finally, you can also use a 4-value syntax in order to indicate a distance from certain edges of...
...two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius.

Grids - Learn web development
you can use any length unit, or percentages to create these column tracks.
...background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and percentages, we can use the fr unit to flexibly size grid rows and columns.
... .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } these gaps can be any length unit or a percentage, but not an fr unit.

How can we design for all types of users? - Learn web development
relative units are expressed in em, % and rem: percent-based sizes: % this unit tells your browser that an element's font size must be n% of the previous element whose font size was expressed.
... em-based sizes: em this unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100.
... here is the html we're using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> </body> </html> a percent-based css will look like this: body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */ span.subheading { font-size:50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */ the same problem expressed with ems: body { font-size:1em; } ...

Gecko Profiler FAQ
a better idea would be picking up a real browser workload where through previous profiling we know that malloc overhead contributes a measurable percentage of overhead to the overall time and then study the change to that workload after replacing the allocator.
... what actually means the percentage of the running time?
... the percentage of samples with stacks under this stack.

CSSPrimitiveValue - Web APIs
(for example, a pixel value cannot be converted to a centimeter value.) percentage values can't be converted since they are relative to the parent value (or another property value).
... there is one exception for color percentage values: since a color percentage value is relative to the range 0-255, a color percentage value can be converted to a number (see also the rgbcolor interface).
... css_percentage the value is a <percentage>.

StorageEstimate.quota - Web APIs
example in this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.
... html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'quota' in that specification.

StorageEstimate.usage - Web APIs
example in this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.
... html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'usage' in that specification.

StorageManager.estimate() - Web APIs
this variance is based on factors such as: how often the user visits public site popularity data user engagement signals like bookmarking, adding to homescreen, or accepting push notifications example in this example, we obtain the usage estimates and present the percentage of storage capacity currently used to the user.
... html content <label> you’re currently using about <output id="percent"> </output>% of your available storage.
... </label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status comment storagethe definition of 'estimate()' in that specification.

URLUtilsReadOnly.hash - Web APIs
the hash is not percent encoded.
...n iossamsung internethash experimentalchrome no support noedge no support nofirefox full support 38 full support 38 no support 3.5 — 38notes notes before firefox 38, firefox returned the hash percent encoded.
... nowebview android no support nochrome android no support nofirefox android full support 38 full support 38 no support 4 — 38notes notes before firefox 38, firefox returned the hash percent encoded.

VTTCue - Web APIs
vttcue.snaptolines returns true if the vttcue.line attribute is an integer number of lines or a percentage of the video size.
...this can be the string auto or a number representing the percentage of the vttcue.region, or the video size if vttcue.region is null.
... vttcue.size returns a double representing the size of the cue, as a percentage of the video size.

ARIA - Accessibility
here's the markup for a progress bar widget: <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> </div> this progress bar is built using a <div>, which has no meaning.
...var progressbar = document.getelementbyid("percent-loaded"); // set its aria roles and states, // so that assistive technologies know what kind of widget it is.
...function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } note that aria was invented after html4, so does not validate in html4 or its xhtml variants.

Web Accessibility: Understanding Colors and Luminance - Accessibility
the srgb color space the mdn document, <color> notes "the css data type represents a color in the srgb color space." color has many ways of being defined, including rgb, rgb decimal, rgb percent, hsl, cmyk among others.
... looking at how the rgb color space is used to describe a color "red", you can see that the same color may be expressed in a shorthand, three-digit hex number that converts to a rgb value, as a full six-digit hex number that also converts to the same rgb value, or as a rgba value, expressed in percentages.
...there are also different ways to refrence rgb: rgb decimal reference: 153, 0, 0 and an rgb percent reference: 60, 0, 0.

-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-bottomleft is either a css <length> or a percentage of the corresponding dimensions of the border box.
... <percentage> the radius of the circle defining the rounding of the bottom-left corner of the element, specified as the percentages of the bottom and left sides of the border box.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples rounding a outline since this is a firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than firefox.

-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-bottomright is either a css <length> or a percentage of the corresponding dimensions of the border box.
... <percentage> the radius of the circle defining the rounding of the bottom-right corner of the element, specified as the percentages of the bottom and right sides of the border box.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.

-moz-outline-radius-topleft - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-topleft is either a css <length> or a percentage of the corresponding dimensions of the border box.
... <percentage> the radius of the circle defining the rounding of the top-left corner of the element, specified as the percentages of the top and left sides of the border box.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox.

-moz-outline-radius-topright - CSS: Cascading Style Sheets
syntax the value of -moz-outline-radius-topright is either a css <length> or a percentage of the corresponding dimensions of the border box.
... <percentage> the radius of the circle defining the rounding of the top-right corner of the element, specified as the percentages of the top and right sides of the border box.
... formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox.

-webkit-mask-position-x - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-x: left; -webkit-mask-position-x: center; -webkit-mask-position-x: right; /* <percentage> values */ -webkit-mask-position-x: 100%; -webkit-mask-position-x: -50%; /* <length> values */ -webkit-mask-position-x: 50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x: 50px, 25%, -3em; /* global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-p...
...percentages are calculated against the horizontal dimension of the box padding area.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-...

-webkit-mask-position-y - CSS: Cascading Style Sheets
/* keyword values */ -webkit-mask-position-y: top; -webkit-mask-position-y: center; -webkit-mask-position-y: bottom; /* <percentage> values */ -webkit-mask-position-y: 100%; -webkit-mask-position-y: -50%; /* <length> values */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y: 50px, 25%, -3em; /* global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-per...
...percentages are calculated against the vertical dimension of the box padding area.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position...

max-height - CSS: Cascading Style Sheets
syntax /* keyword value */ max-height: auto; /* <length> values */ max-height: 400px; max-height: 50em; max-height: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other css descriptors' values.
... <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status comment css device adaptationthe definition of '"max-height" descriptor' in that specification.

max-width - CSS: Cascading Style Sheets
syntax /* keyword value */ max-width: auto; /* <length> values */ max-width: 600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values.
... <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status comment css device adaptationthe definition of '"max-width" descriptor' in that specification.

max-zoom - CSS: Cascading Style Sheets
syntax /* keyword value */ max-zoom: auto; /* <number> values */ max-zoom: 0.8; max-zoom: 2.0; /* <percentage> value */ max-zoom: 150%; values auto the user agent will set the document's upper zoom factor limit.
... <percentage> a non-negative percentage limiting the maximum value of the zoom factor.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.

min-height - CSS: Cascading Style Sheets
syntax /* keyword value */ min-height: auto; /* <length> values */ min-height: 120px; min-height: 20em; min-height: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other css descriptors' values.
... <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status comment css device adaptationthe definition of '"min-height" descriptor' in that specification.

min-width - CSS: Cascading Style Sheets
syntax /* keyword value */ min-width: auto; /* <length> values */ min-width: 320px; min-width: 40em; min-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other css descriptors' values.
... <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
... formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification.

min-zoom - CSS: Cascading Style Sheets
syntax /* keyword value */ min-zoom: auto; /* <number> values */ min-zoom: 0.8; min-zoom: 2.0; /* <percentage> value */ min-zoom: 150%; values auto the user agent will set the document's lower zoom factor limit.
... <percentage> a non-negative percentage limiting the minimum value of the zoom factor.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" descriptor' in that specification.

zoom - CSS: Cascading Style Sheets
syntax /* keyword value */ zoom: auto; /* <number> values */ zoom: 0.8; zoom: 2.0; /* <percentage> values */ zoom: 150%; values auto the user agent will set the document's initial zoom factor.
... <percentage> a non-negative percentage value used as the zoom factor.
... formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"zoom" descriptor' in that specification.

<alpha-value> - CSS: Cascading Style Sheets
the <alpha-value> css data type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color.
... syntax the value of an <alpha-value> is given as either a <number> or a <percentage>.
... if the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque.

background-size - CSS: Cascading Style Sheets
each value can be a <length>, a <percentage>, or auto.
... <percentage> stretches the image in the corresponding dimension to the specified percentage of the background positioning area.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrelative to the background positioning areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples please see scaling background im...

block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element.
... initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); syntax values the block-size property takes the same values as the width and height properties.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.

border-end-end-radius - CSS: Cascading Style Sheets
syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
...percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext...

border-end-start-radius - CSS: Cascading Style Sheets
syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
...percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { w...

border-start-end-radius - CSS: Cascading Style Sheets
syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
...percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { w...

border-start-start-radius - CSS: Cascading Style Sheets
syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse.
...percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { ...

clamp() - CSS: Cascading Style Sheets
the clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
... formal syntax clamp( <calc-sum>#{3} )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples min, max, and clamp comparison in this example we have a simple responsive example that makes use of min(), max(), and clamp() for some of the sizes.

fit-content() - CSS: Cascading Style Sheets
syntax the fit-content() function accepts a <length> or a <percentage> as an argument.
... /* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length.
... <percentage> a percentage relative to the available space in the given axis.

grid-template - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimension of the content areagrid-template-rows: refer to corresponding dimension of the content areacomputed valueas each of the properties of the shorthand:grid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-rows: as specified, but with relative len...
...]+ [ / <explicit-track-list> ]?where <line-names> = '[' <custom-ident>* ']'<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )<explicit-track-list> = [ <line-names>?
... <track-size> ]+ <line-names>?where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples defining a grid template css #page { display: grid; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] [main-left] "nav main" 1fr [main-right] [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid-area: foot; } html <sec...

<length> - CSS: Cascading Style Sheets
note: although <percentage> values are also css dimensions, and are usable in some of the same properties that accept <length> values, they are not themselves <length> values.
... see <length-percentage>.
... viewport-percentage lengths viewport-percentage lengths define the <length> value relative to the size of the viewport, i.e., the visible portion of the document.

margin-bottom - CSS: Cascading Style Sheets
s */ margin-bottom: 10px; /* an absolute length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:...

margin-left - CSS: Cascading Style Sheets
* <length> values */ margin-left: 10px; /* an absolute length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment ...

margin-right - CSS: Cascading Style Sheets
h> values */ margin-right: 20px; /* an absolute length */ margin-right: 1em; /* relative to the text size */ margin-right: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment...

margin-top - CSS: Cascading Style Sheets
yntax /* <length> values */ margin-top: 10px; /* an absolute length */ margin-top: 1em; /* relative to the text size */ margin-top: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>.
... <percentage> the size of the margin as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box modelthe definition of 'margin-top' in that specification.

mask-position - CSS: Cascading Style Sheets
formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <po...
...sition> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option ...

max() - CSS: Cascading Style Sheets
the max() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
... formal syntax max( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples setting a minimum size for a font another use case for css functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

min() - CSS: Cascading Style Sheets
the min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.
... notes math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
... formal syntax min( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when using min() to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).

offset-anchor - CSS: Cascading Style Sheets
syntax /* keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: center; offset-anchor: auto; /* <percentage> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value fro...
... formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrelativetowidthandheightcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting various offset-anchor values in the following example, we have three <div> elements nested in <section> elements.

opacity - CSS: Cascading Style Sheets
syntax values <alpha-value> a <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel).
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy ...
... working draft defines percentage opacity values.

padding-bottom - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /* global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; the padding-bottom property is specified as a single value chosen from the list below.
... <percentage> the size of the padding as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specification.

padding-left - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /* global values */ padding-left: inherit; padding-left: initial; padding-left: unset; the padding-left property is specified as a single value chosen from the list below.
... <percentage> the size of the padding as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification.

padding-right - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* global values */ padding-right: inherit; padding-right: initial; padding-right: unset; the padding-right property is specified as a single value chosen from the list below.
... <percentage> the size of the padding as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.

padding-top - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-top: 0.5em; padding-top: 0; padding-top: 2cm; /* <percentage> value */ padding-top: 10%; /* global values */ padding-top: inherit; padding-top: initial; padding-top: unset; the padding-top property is specified as a single value chosen from the list below.
... <percentage> the size of the padding as a percentage, relative to the width of the containing block.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification.

repeat() - CSS: Cascading Style Sheets
<percentage> a non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks.
... if the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto.
... the user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

repeating-linear-gradient() - CSS: Cascading Style Sheets
<linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis).
... a percentage of 0%, or a length of 0, represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat.
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples zebra stripes body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-45deg, transparent 0 ...

row-gap (grid-row-gap) - CSS: Cascading Style Sheets
syntax /* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /* global values */ row-gap: inherit; row-gap: initial; row-gap: unset; values <length-percentage> is the width of the gutter separating the rows.
... <percentage> values are relative to the dimension of the element.
... formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result ...

scroll-snap-points-x - CSS: Cascading Style Sheets
repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge.
...percentages refer to the width of the container.
... formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #conta...

scroll-snap-points-y - CSS: Cascading Style Sheets
repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge.
...percentages refer to the width of the container.
... formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size:...

text-overflow - CSS: Cascading Style Sheets
each value is specified as one of: one of the keyword values: clip, ellipsis, fade the function fade(), which is passed a <length> or a <percentage> to control the fade distance a <string>.
... fade( <length> | <percentage> ) this function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
...the <percentage> is resolved against the width of the line box.

translate3d() - CSS: Cascading Style Sheets
syntax translate3d(tx, ty, tz) values tx is a <length> or <percentage> representing the abscissa of the translating vector.
... ty is a <length> or <percentage> representing the ordinate of the translating vector.
...it can't be a <percentage> value; in that case the property containing the transform is considered invalid.

translateX() - CSS: Cascading Style Sheets
syntax /* <length-percentage> values */ transform: translatex(200px); transform: translatex(50%); values <length-percentage> is a <length> or <percentage> representing the abscissa of the translating vector.
... a percentage value refers to the width of the reference box defined by the transform-box property.
... 10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translate...

translateY() - CSS: Cascading Style Sheets
syntax /* <length-percentage> values */ transform: translatey(200px); transform: translatey(50%); values <length-percentage> the value is a <length> or <percentage> representing the ordinate of the translating vector.
... a percentage value refers to the height of the reference box defined by the transform-box property.
... 10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(10px); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specification.

<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
height sets the height in pixels or percentage value.
... vspace sets the vertical margin in pixels or percentage value.
... width sets the width in pixels or percentage value.

baseline-shift - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <tref>, and <tspan> usage notes value <length-percentage> | sub | super default value 0 animatable yes sub the dominant-baseline is shifted to the default position for subscripts.
... <length-percentage> a length value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified length.
... a percentage value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified percentage of the line-height.

simple-storage - Archive of obsolete content
it indicates the percentage of quota your storage occupies.
... quotausage a number in the range [0, infinity) that indicates the percentage of quota occupied by storage.

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
that's a significant percentage when we're used to our pages looking the same in every browser.
...what are the browser percentages of your current user base, and what about your target user base (which may be different)?

Style System Overview - Archive of obsolete content
this happens when properties are inherited or when percentage units are used in a way that is handled by the style code (rather than reflow).
... style data cached in rule tree if the data struct doesn't depend on the parent style context in any ways (inheritance, perhaps by omission; percentages and ems when computed), we can cache it in the rule tree.

Actionscript Performance Tests - Archive of obsolete content
the 95% confidence interval is the calculated percentage of the mean value to fall within 95% of the measured results.
... the percentage difference is calculated between the two vms.

Things I've tried to do with XUL - Archive of obsolete content
how do i use percentage-based height/width with xul?
... enn: percentages won't have any effect in these examples though, since the actual height of the container isn't known, and 30% of an unknown number is still an unknown number.

Using Spacers - Archive of obsolete content
you may also sometimes see a flex value specified as a percentage.
... this has no special meaning and is treated as if the percent sign was not there.

2006-09-29 - Archive of obsolete content
* @param amargin the sum of the left and right margins of the * frame, including actual values resulting from * percentages, but not including actual values * resulting from 'auto'.
... * @param apadding the sum of the left and right margins of the * frame, including actual values resulting from * percentages.

-ms-hyphenate-limit-zone - Archive of obsolete content
initial value0applies toblock container elementsinheritedyespercentagescalculated with respect to the width of the line boxcomputed valueas specifiedanimation typediscrete syntax values <percentage> an integer followed by a percent sign (%), which specifies the width of the hyphenation zone, calculated with respect to the line box.
... formal syntax <percentage> | <length> specifications not part of any specification.

Speed index - MDN Web Docs Glossary: Definitions of Web-related terms
the calculation calculates what percent of the page is visually complete at every 100ms interval until the page is visually complete.
... the overall score, the above the fold metric, is a sum of the individual 10 times per second intervals of the percent of the screen that is not-visually complete.

Advanced styling effects - Learn web development
the second is grayscale(); by using a percentage we are setting how much color we want to be removed.
... play with the percentage and pixel parameters in the live example to see how the images change.

Styling tables - Learn web development
this is why we've selected the four different headings with the thead th:nth-child(n) (:nth-child) selector ("select the nth child that is a <th> element in a sequence, inside a <thead> element") and given them set percentage widths.
...by using percentages, so the design is more responsive.

Supporting older browsers - Learn web development
a good example of this is if we were to add percentage widths to our floated items to make the columns more like the grid display, stretching to fill the container.
... in the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width.

Index - Learn web development
114 css values and units beginner, css, function, image, learn, number, position, color, length, percentage, units, values this has been a quick run through of the most common types of values and units you might encounter.
... 123 sizing items in css beginner, css, intrinsic size, learn, max size, min size, percentage, sizing, viewport units this lesson has given you a rundown of some key issues that you might run into when sizing things on the web.

Debugging Table Reflow
the following constraint types are known: enoconstraint = 0, epixelconstraint = 1, // pixel width epercentconstraint = 2, // percent width eproportionconstraint = 3, // 1*, 2*, etc.
...+ padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others in the last log snippet none of these width's has been set.

Mozilla Quirks Mode Behavior
there are a bunch of quirks to get percentage heights on images, tables, objects, and applets (etc.?) to "work" (the way they did in netscape navigator 4), even though css says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height.
... in quirks mode, percentage values are supported on the cellspacing attribute, but treated as pixels (bug 106336).

BloatView
the delta numbers show the percentage change between runs for the amount of leaks and amount of bloat (negative numbers are better!).
...the percentage 99999.99% will show up indicating an "infinite" amount of leakage.

A guide to searching crash reports
crash reports always include a platform field (though it may be empty if something has gone wrong) and so the percentages add up to 100.
...for that reason, the percentages do not add up to 100.

nsIMsgSearchValue
r; attribute nsmsgpriorityvalue priority; attribute prtime date; // see nsmsgmessageflags.idl and nsmsgfolderflags.idl attribute unsigned long status; attribute unsigned long size; attribute nsmsgkey msgkey; attribute long age; // in days attribute nsimsgfolder folder; attribute nsmsglabelvalue label; attribute nsmsgjunkstatus junkstatus; /* * junkpercent is set by the message filter plugin, and is approximately * proportional to the probability that a message is junk.
... * (range 0-100, 100 is junk) */ attribute unsigned long junkpercent; astring tostring(); }; ...

nsIMsgSearchValue
r; attribute nsmsgpriorityvalue priority; attribute prtime date; // see nsmsgmessageflags.idl and nsmsgfolderflags.idl attribute unsigned long status; attribute unsigned long size; attribute nsmsgkey msgkey; attribute long age; // in days attribute nsimsgfolder folder; attribute nsmsglabelvalue label; attribute nsmsgjunkstatus junkstatus; /* * junkpercent is set by the message filter plugin, and is approximately * proportional to the probability that a message is junk.
... * (range 0-100, 100 is junk) */ attribute unsigned long junkpercent; astring tostring(); }; ...

Mail composition back end
ns_imethod onprogress(const char *amsgid, - the message id for the message being sent pruint32 aprogress, - the progress so far pruint32 aprogressmax) = 0; - the maximum progress (aprogress should be used as a numerator and aprogressmax as a denominator for a message sent percentage) onstatus the onstatus gives the listener status updates for the current operation.
... ns_imethod onprogress( pruint32 aprogress, - the progress so far pruint32 aprogressmax) = 0; - the maximum progress (aprogress should be used as a numerator and aprogressmax as a denominator for a message sent percentage) nsisupports *listenerdata) = 0; - the nsisupports pointer passed in to the original copy operation onstopcopy the onstopcopy interface is called when the copy operation has completed.

Migrating from Firebug - Firefox Developer Tools
like in firebug it lists the total execution time of each function call under total time as well as the number of calls under samples, the time spent within the function under self time and the related percentages in reference to the total execution time.
... note: the times and percentages listed in the devtools' call tree view is not equivalent to the ones shown in firebug, because it uses different apis sampling the execution of the javascript code.

Call Tree - Firefox Developer Tools
total cost is that number as a percentage of the total number of samples in the selected portion of the recording.
... self cost is calculated from self time as a percentage of the total number of samples in the selected portion of the recording.

CSSNumericValue.type - Web APIs
the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percenthint, or time.
... examples let mathsum = css.px("23").sub(css.percent("4")).sub(css.cm("3")).sub(css.in("9")); // returns an object with the structure: {length: 1, percenthint: "length"} let cssnumerictype = mathsum.type(); specifications specification status comment css typed om level 1the definition of 'type' in that specification.

Using the CSS Typed Object Model - Web APIs
ofinterest[i] ).unit )); row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting browser, the above output should looks something like this: property value unit padding-top 0 px margin-bottom 16 px font-size 16 px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height auto undefined you'll note the <length> unit returned is px, the <percentage> unit returned is percent, the <time> unit is s for 'seconds', and the unitless <number> unit is number.
... had the width or height been defined in a <length> or <percent>, the cssunitvalue unit would have been px or percent respectively.

Element.querySelectorAll() - Web APIs
examples dataset selector & attribute selectors <section class="box" id="sect1"> <div class="funnel-chart-percent1">10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> // dataset selectors const refs = [...document.queryselectorall(`[data-name*="funnel-chart-percent"]`)]; // attribute selectors // const refs = [...document.queryselectorall(`[class*="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class^="f...
...unnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class$="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class~="funnel-chart-percent"]`)]; obtaining a list of matches to obtain a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <div> elements within "mybox" with a class of either "note" or "alert": var matches = mybox.queryselectorall("div.note, div.alert"); here, we get a list of the document's <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test".

Using files from web applications - Web APIs
function fileupload(img, file) { const reader = new filereader(); this.ctrl = createthrobber(img); const xhr = new xmlhttprequest(); this.xhr = xhr; const self = this; this.xhr.upload.addeventlistener("progress", function(e) { if (e.lengthcomputable) { const percentage = math.round((e.loaded * 100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addeventlistener("load", function(e){ self.ctrl.update(100); const canvas = self.ctrl.ctx.canvas; canvas.parentnode.removechild(canvas); }, false); xhr.open("post", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnu...
... before actually transferring the data, several preparatory steps are taken: the xmlhttprequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.

HTMLImageElement.sizes - Web APIs
it may be specified using font-relative units (such as em or ex), absolute units (such as px or cm), or the vw unit, which lets you specify the width as a percentage of the viewport width (1vw being 1% of the viewport width).
... note: the source size value must not be specified as a percentage of the container size; that is, lengths such as 50% or 100% are not allowed, as there would be uncertainty as to what the specified value is a percentage of.

HTMLMarqueeElement - Web APIs
htmlmarqueeelement.height sets the height in pixels or percentage value.
... htmlmarqueeelement.width sets the width in pixels or percentage value.

Index - Web APIs
432 cssnumericvalue.type api, css typed object model api, cssnumericvalue, experimental, houdini, property, reference, type the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percenthint, or time.
...the hash is not percent encoded.

IntersectionObserver.IntersectionObserver() - Web APIs
syntax var observer = new intersectionobserver(callback[, options]); parameters callback a function which is called when the percentage of the target element is visible crosses a threshold.
... the callback receives as input two parameters: entries an array of intersectionobserverentry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold.

ResizeObserverEntry.contentBoxSize - Web APIs
this example includes a green box, sized as a percentage of the viewport size.
...we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size.

ResizeObserverEntry.target - Web APIs
this example includes a green box, sized as a percentage of the viewport size.
...we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size.

Resize Observer API - Web APIs
examples you find a couple of simple examples on our github repo: resize-observer-border-radius.html (see source): a simple example with a green box, sized as a percentage of the viewport size.
...we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice square corners that scale with the box size.

SVGLength - Web APIs
ts(in unsigned short unittype, in float valueinspecifiedunits) void converttospecifiedunits(in unsigned short unittype) properties readonly unsigned short unittype float value float valueinspecifiedunits domstring valueasstring constants svg_lengthtype_unknown = 0 svg_lengthtype_number = 1 svg_lengthtype_percentage = 2 svg_lengthtype_ems = 3 svg_lengthtype_exs = 4 svg_lengthtype_px = 5 svg_lengthtype_cm = 6 svg_lengthtype_mm = 7 svg_lengthtype_in = 8 svg_lengthtype_pt = 9 svg_lengthtype_pc = 10 normative document svg 1.1 (2nd edition) example <svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg...
... svg_lengthtype_percentage 2 a percentage value was specified.

URLUtilsReadOnly - Web APIs
nohash experimentalchrome no support noedge no support nofirefox full support 38 full support 38 no support 3.5 — 38notes notes before firefox 38, firefox returned the hash percent encoded.
... nowebview android no support nochrome android no support nofirefox android full support 38 full support 38 no support 4 — 38notes notes before firefox 38, firefox returned the hash percent encoded.

VideoPlaybackQuality.droppedVideoFrames - Web APIs
example this example calls getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been dropped.
... var videoelem = document.getelementbyid("my_vid"); var percentelem = document.getelementbyid("percent"); var quality = videoelem.getvideoplaybackquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status comment media playback qualitythe definition of 'videoplaybackquality.droppedvideoframes' in that specification.

Using the progressbar role - Accessibility
note: assistive technologies generally will render the value of aria-valuenow as a percent of the range between the value of aria-valuemin and aria-valuemax, unless aria-valuetext is specified.
... examples example 1: basic progressbar with percentage values <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> example 2: using aria-valuetext <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="step 2: copying files...

-webkit-mask-box-image - CSS: Cascading Style Sheets
initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... <percentage> the mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).

width - CSS: Cascading Style Sheets
<percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively.
... formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-width: automax-width: nonepercentagesas each of the properties of the shorthand:min-width: refer to the width of the containing blockmax-width: refer to the width of the containing blockcomputed valueas each of the properties of the shorthand:min-width: the percentage as specified or the absolute lengthmax-width: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifications specification status comment css device ad...

Styling Columns - CSS: Cascading Style Sheets
the allowed value for column-gap is a <length-percentage>, this means percentages are allowed.
... percentage values for column-gap are calculated as a percentage of the width of the multicol container.

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
if you assign percentage widths to flex items — either as flex-basis or by adding a width to the item itself leaving the value of flex-basis as auto — you can get the impression of a two dimensional layout.
... here i have set flex-grow and flex-shrink to 0 to make inflexible flex items and am then controlling flexibility using percentages, just like we used to do in float layouts.

Basic Shapes - CSS: Cascading Style Sheets
this argument can be a length or percentage but can also be one of the keywords closest-side or farthest-side.
... our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value.

CSS data types - CSS: Cascading Style Sheets
index the data types defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color-hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <positio...
...n> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.

attr() - CSS: Cascading Style Sheets
% <percentage> the attribute value is parsed as a css <number>, that is without the unit (e.g.
... 12.5), and interpreted as a <percentage>.

border-block-start-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.

border-image - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentag...
...it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentag...

border-inline-end-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.

Computed value - CSS: Cascading Style Sheets
the computation needed to reach a property's computed value typically involves converting relative values (such as those in em units or percentages) to absolute values.
... however, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values.

brightness() - CSS: Cascading Style Sheets
syntax brightness(amount) parameters amount the brightness of the result, specified as a <number> or a <percentage>.
... examples setting brightness using numbers and percentages brightness(0%) /* completely black */ brightness(0.4) /* 40% brightness */ brightness(1) /* no effect */ brightness(200%) /* double brightness */ specifications specification status filter effects module level 1the definition of 'brightness()' in that specification.

contrast() - CSS: Cascading Style Sheets
syntax contrast(amount) parameters amount the contrast of the result, specified as a <number> or a <percentage>.
... examples setting contrast using numbers and percentages contrast(0) /* completely gray */ contrast(65%) /* 65% contrast */ contrast(1) /* no effect */ contrast(200%) /* double contrast */ specifications specification status filter effects module level 1the definition of 'contrast()' in that specification.

flex-basis - CSS: Cascading Style Sheets
values <'width'> an absolute <length>, a <percentage> of the parent flex container's main size property, or the keyword auto.
... formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="...

font - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesas each of the properties of the shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcomputed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifi...
...edfont-size: as specified, but with relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as specifiedfont-family: as specifiedanimation typeas each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont-size: a lengthline-height: either number or lengthfont-family: discrete formal syntax [ [ <'font-style'> | <font-variant-css21> | <'font-weight'> | <'font-stretch'> ]?

grid - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-template-rows: nonegrid-template-columns: nonegrid-template-areas: nonegrid-auto-rows: autogrid-auto-columns: autogrid-auto-flow: rowgrid-column-gap: 0grid-row-gap: 0column-gap: normalrow-gap: normalapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-rows: refer to corresponding dimension of the content areagrid-template-columns: refer to corresponding dimension of the content areagrid-auto-rows: refer to corresponding dimension of the content areagrid-auto-columns: refer to corresponding dimension of the content areacomputed valueas each of the properties of the shorthand:grid-templ...
...ate-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedgrid-auto-rows: the percentage as specified or the absolute lengthgrid-auto-columns: the percentage as specified or the absolute lengthgrid-auto-flow: as specifiedgrid-column-gap: the percentage as specified or the absolute lengthgrid-row-gap: the percentage as specified or the absolute lengthcolumn-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsrow-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typediscrete formal syntax <'grid-template'> | <'grid-template-r...

inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the elemen...
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.

inset-block-end - CSS: Cascading Style Sheets
/* <length> values */ inset-block-end: 3px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end: 10%; /* keyword value */ inset-block-end: auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.

inset-block-start - CSS: Cascading Style Sheets
/* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.

inset-block - CSS: Cascading Style Sheets
/* <length> values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10% 5%; /* keyword value */ inset-block: auto; /* global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following css properties: inset-block-end inset-block-start syntax values the inset-block property takes the same values as the...
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.

inset-inline-end - CSS: Cascading Style Sheets
/* <length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /* keyword value */ inset-inline-end: auto; /* global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values le...

inset-inline-start - CSS: Cascading Style Sheets
/* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and va...

inset-inline - CSS: Cascading Style Sheets
/* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* keyword value */ inset-inline: auto; /* global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following css properties: inset-inline-end inset-inline-start syntax values the inset-inline property takes the same value...
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that speci...

inset - CSS: Cascading Style Sheets
/* <length> values */ inset: 10px; /* value applied to all edges */ inset: 4px 8px; /* top/bottom left/right */ inset: 5px 15px 10px; /* top left/right bottom */ inset: 2.4em 3em 3em 3em; /* top right bottom left */ /* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */ inset: 10% 5% 5% 5%; /* keyword value */ inset: auto; /* global values */ inset: inherit; inset: initial; inset: unset; syntax values the inset property takes the same values as the left property.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specificat...

linear-gradient() - CSS: Cascading Style Sheets
<linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis).
...a color-stop's position can be explicitly defined by using a <length> or a <percentage>.

margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; hei...
... initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete ...

max-inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ max-inline-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* keyword values */ max-inline-size: auto; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content(20em); /* global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset; values the max-inline-size property takes the same values as the max-width and max-height properties.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.

min-block-size - CSS: Cascading Style Sheets
syntax /* <length> values */ min-block-size: 100px; min-block-size: 5em; /* <percentage> values */ min-block-size: 10%; /* keyword values */ min-block-size: max-content; min-block-size: min-content; min-block-size: fit-content(20em); /* global values */ min-block-size: inherit; min-block-size: initial; min-block-size: unset; if the writing mode is vertically oriented, the value of min-block-size relates to the minimum width of the element; otherwise, it relates to the minimum...
... formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition...

min-inline-size - CSS: Cascading Style Sheets
syntax /* <length> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size relates to the minimum height of the element; otherwise, it relates to th...
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and...

object-position - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itselfcomputed valueas specifiedanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples positioning image content html here we see html that includes two <img> elements, each displaying the mdn logo.

offset-distance - CSS: Cascading Style Sheets
syntax /* default value */ offset-distance: 0; /* the middle of the offset-path */ offset-distance: 50%; /* a fixed length positioned along the path */ offset-distance: 40px; <length-percentage> a length that specifies how far the element is along the path (defined with offset-path).
... formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion path typically comes from animating the offset-distance property.

offset - CSS: Cascading Style Sheets
t: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percen...
...tageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:offset-position: a positionoffset-path: as <angle>, <basic-shape> or <path()>offset-distance: a length, percentage or calc();offset-anchor: a positionoffset-rotate: as <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax [ <'offset-position'>?

padding-block-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-end: 10px; /* an absolute length */ padding-block-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; ...

padding-block-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color...

padding-block - CSS: Cascading Style Sheets
/* <length> values */ padding-block: 10px 20px; /* an absolute length */ padding-block: 1em 2em; /* relative to the text size */ padding-block: 10px; /* sets both start and end values */ /* <percentage> values */ padding-block: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-block: inherit; padding-block: initial; padding-block: unset; these values corresponds to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orientation.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css l...

padding-inline-end - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-end: 10px; /* an absolute length */ padding-inline-end: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color:...

padding-inline-start - CSS: Cascading Style Sheets
syntax /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length relative to the text size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property.
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-colo...

padding-inline - CSS: Cascading Style Sheets
/* <length> values */ padding-inline: 10px 20px; /* an absolute length */ padding-inline: 1em 2em; /* relative to the text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the paddin...
... formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment ...

scale - CSS: Cascading Style Sheets
two length/percentage values two <number>s that specify the x and y axis scaling values (respectively) of a 2d scale.
... three length/percentage values three <number>s that specify the x, y, and z axis scaling values (respectively) of a 3d scale.

scroll-padding-block-end - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-block-end: auto; /* <length> values */ scroll-padding-block-end: 10px; scroll-padding-block-end: 1em; scroll-padding-block-end: 10%; /* global values */ scroll-padding-block-end: inherit; scroll-padding-block-end: initial; scroll-padding-block-end: unset; values <length-percentage> an inwards offset from the block end edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-end' in that specification.

scroll-padding-block-start - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-block-start: auto; /* <length> values */ scroll-padding-block-start: 10px; scroll-padding-block-start: 1em; scroll-padding-block-start: 10%; /* global values */ scroll-padding-block-start: inherit; scroll-padding-block-start: initial; scroll-padding-block-start: unset; values <length-percentage> an inwards offset from the block start edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block-start' in that specification.

scroll-padding-block - CSS: Cascading Style Sheets
horthand for the following css properties: scroll-padding-block-end scroll-padding-block-start syntax /* keyword values */ scroll-padding-block: auto; /* <length> values */ scroll-padding-block: 10px; scroll-padding-block: 1em .5em; scroll-padding-block: 10%; /* global values */ scroll-padding-block: inherit; scroll-padding-block: initial; scroll-padding-block: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block' in that specification.

scroll-padding-bottom - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-bottom: auto; /* <length> values */ scroll-padding-bottom: 10px; scroll-padding-bottom: 1em; scroll-padding-bottom: 10%; /* global values */ scroll-padding-bottom: inherit; scroll-padding-bottom: initial; scroll-padding-bottom: unset; values <length-percentage> an inwards offset from the bottom edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-bottom' in that specification.

scroll-padding-inline-end - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-inline-end: auto; /* <length> values */ scroll-padding-inline-end: 10px; scroll-padding-inline-end: 1em; scroll-padding-inline-end: 10%; /* global values */ scroll-padding-inline-end: inherit; scroll-padding-inline-end: initial; scroll-padding-inline-end: unset; values <length-percentage> an inwards offset from the inline end edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-end' in that specification.

scroll-padding-inline-start - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-inline-start: auto; /* <length> values */ scroll-padding-inline-start: 10px; scroll-padding-inline-start: 1em; scroll-padding-inline-start: 10%; /* global values */ scroll-padding-inline-start: inherit; scroll-padding-inline-start: initial; scroll-padding-inline-start: unset; values <length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline-start' in that specification.

scroll-padding-inline - CSS: Cascading Style Sheets
for the following css properties: scroll-padding-inline-end scroll-padding-inline-start syntax /* keyword values */ scroll-padding-inline: auto; /* <length> values */ scroll-padding-inline: 10px; scroll-padding-inline: 1em .5em; scroll-padding-inline: 10%; /* global values */ scroll-padding-inline: inherit; scroll-padding-inline: initial; scroll-padding-inline: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline' in that specification.

scroll-padding-left - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-left: auto; /* <length> values */ scroll-padding-left: 10px; scroll-padding-left: 1em; scroll-padding-left: 10%; /* global values */ scroll-padding-left: inherit; scroll-padding-left: initial; scroll-padding-left: unset; values <length-percentage> an inwards offset from the left edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-left' in that specification.

scroll-padding-right - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-right: auto; /* <length> values */ scroll-padding-right: 10px; scroll-padding-right: 1em; scroll-padding-right: 10%; /* global values */ scroll-padding-right: inherit; scroll-padding-right: initial; scroll-padding-right: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-right' in that specification.

scroll-padding-top - CSS: Cascading Style Sheets
syntax /* keyword values */ scroll-padding-top: auto; /* <length> values */ scroll-padding-top: 10px; scroll-padding-top: 1em; scroll-padding-top: 10%; /* global values */ scroll-padding-top: inherit; scroll-padding-top: initial; scroll-padding-top: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-top' in that specification.

scroll-padding - CSS: Cascading Style Sheets
shorthand for the following css properties: scroll-padding-bottom scroll-padding-left scroll-padding-right scroll-padding-top syntax /* keyword values */ scroll-padding: auto; /* <length> values */ scroll-padding: 10px; scroll-padding: 1em .5em 1em 1em; scroll-padding: 10%; /* global values */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding' in that specification.

scroll-snap-coordinate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednopercentagesrefer to the element’s border boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position formal syntax none | <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap coordinates html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer coordinate0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer coordinate25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer coordinate50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20...

scroll-snap-destination - CSS: Cascading Style Sheets
formal definition initial value0px 0pxapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
... | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap destination html <div id="container"> <div> <p>at coordinate (0, 0)</p> <div class="scrollcontainer destination0"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (25, 0)</p> <div class="scrollcontainer destination25"> <div>1</div> <div>2</div> <div>3</div> </div> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer destination50"> <div>1</div> <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right:...

shape-margin - CSS: Cascading Style Sheets
syntax /* <length> values */ shape-margin: 10px; shape-margin: 20mm; /* <percentage> value */ shape-margin: 60%; /* global values */ shape-margin: inherit; shape-margin: initial; shape-margin: unset; values <length-percentage> sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block.
... formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, and the economic laws of society are uncertain to every one except some individual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be so after this...

<embed>: The Embed External Content element - HTML: Hypertext Markup Language
this must be an absolute value; percentages are not allowed.
...this must be an absolute value; percentages are not allowed.

<object> - HTML: Hypertext Markup Language
no percentages) name the name of valid browsing context (html5), or the name of the control (html 4).
...no percentages) examples embed a flash movie <!-- embed a flash movie --> <object data="movie.swf" type="application/x-shockwave-flash"></object> <!-- embed a flash movie with parameters --> <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object> specifications specification status comment html living standardthe definit...

<table>: The Table element - HTML: Hypertext Markup Language
if the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value.
... cellspacing this attribute defines the size of the space between two cells in a percentage value or pixels.

<video>: The Video Embed element - HTML: Hypertext Markup Language
height the height of the video's display area, in css pixels (absolute values only; no percentages.) intrinsicsize this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute.
... width the width of the video's display area, in css pixels (absolute values only; no percentages).

Data URLs - HTTP
note the use of percent-encoding (url-encoding) for the quote and space characters.
... also, for csv data (mime type "text/csv"), percent-encoding is needed to preserve the line endings that delimit rows of the spreadsheet.

Intl.PluralRules() constructor - JavaScript
possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information).
...possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency formatting is the larger of minimumfractiondigits and the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that information); the default for percent formatting is the larger of minimumfractiondigits and 0.

encodeURIComponent() - JavaScript
// the following are not required for percent-encoding per rfc5987, // so we can allow for a little better readability over the wire: |`^ replace(/%(?:7c|60|5e)/g, unescape); } // here is an alternative to the above function function encoderfc5987valuechars2(str) { return encodeuricomponent(str).
...// i.e., %27 %28 %29 %2a (note that valid encoding of "*" is %2a // which necessitates calling touppercase() to properly encode) // the following are not required for percent-encoding per rfc5987, // so we can allow for a little better readability over the wire: |`^ replace(/%(7c|60|5e)/g, (str, hex) => string.fromcharcode(parseint(hex, 16))); } specifications specification ecmascript (ecma-262)the definition of 'encodeuricomponent' in that specification.

cx - SVG: Scalable Vector Graphics
value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for circles.
... value <length-percentage> default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses.

cy - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for circles.
... value <length> | <percentage> default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses.

flood-opacity - SVG: Scalable Vector Graphics
-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value <alpha-value> initial value 1 animatable yes <alpha-value> a number or percentage indicating the opacity value to use across the current filter primitive subregion.
... a number of 0 or a percentage of 0% represents a fully transparent color, 1 or 100% represents a fully opaque color.

font-stretch - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> usage notes value <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> default value normal animatable yes specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
... working draft adds the <percentage> syntax for variable fonts.

gradientUnits - SVG: Scalable Vector Graphics
percentages represent values relative to the current svg viewport.
... percentages represent values relative to the bounding box for the object.

markerHeight - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3 animatable yes <length-percentage> this value defines either an absolute or a relative height of the marker.
... candidate recommendation allowed percentage and number values.

markerWidth - SVG: Scalable Vector Graphics
only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3 animatable yes <length-percentage> this value defines either an absolute or a relative width of the marker.
... candidate recommendation allowed percentage and number values.

r - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes note: starting with svg2, r is a geometry property meaning this attribute can also be used as a css property for circles.
... value <length> | <percentage> default value 50% animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'r' in that specification.

rx - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for rects.

ry - SVG: Scalable Vector Graphics
value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for ellipses.
... value <length> | <percentage> | auto default value auto animatable yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for rects.

startOffset - SVG: Scalable Vector Graphics
</textpath> </text> </svg> usage notes value <length-percentage> | <number> default value 0 animatable yes <length-percentage> a length represents a distance along the path measured in the current user coordinate system for the <textpath> element.
... if a percentage is given, then the start offset represents a percentage distance along the entire path.

stop-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value <opacity-value> default value 1 animatable yes <opacity-value> this value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color gradient stop.
... candidate recommendation refers to the definition in css colors 3, but allows percentage values.

textLength - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage.
... candidate recommendation allowed percentages and numbers as values.

viewBox - SVG: Scalable Vector Graphics
html,body,svg { height:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/200...
...0/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with the point of coordinate 0,0 in the center of the viewport t...

x1 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x co...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied t...

x2 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x co...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied ...

y1 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coo...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to.

y2 - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coo...
...the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to.

<circle> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: 0; animatable: yes cy the y-axis coordinate of the center of the circle.
... value type: <length>|<percentage> ; default value: 0; animatable: yes r the radius of the circle.

<textPath> - SVG: Scalable Vector Graphics
value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes textlength the width of the space into which the text will render.
... value type: <length>|<percentage>|<number> ; default value: auto; animatable: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-ch...

<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:decimal-format name=name decimal-separator=character grouping-separator=character infinity=string minus-sign=character nan=string percent=character per-mille=charater zero-digit=character digit=character pattern-separator=character /> required attributes none.
... percent specifies the percentage sign character.

Downloading Files - Archive of obsolete content
var privacy = privatebrowsingutils.privacycontextfromwindow(aurlsourcewindow); var progresselement = document.getelementbyid("progress_element"); persist.progresslistener = { onprogresschange: function(awebprogress, arequest, acurselfprogress, amaxselfprogress, acurtotalprogress, amaxtotalprogress) { var percentcomplete = math.round((acurtotalprogress / amaxtotalprogress) * 100); progresselement.textcontent = percentcomplete +"%"; }, onstatechange: function(awebprogress, arequest, astateflags, astatus) { // do something } } persist.saveuri(obj_uri, null, null, null, "", targetfile, privacy); downloading files that require credentials before calling nsiwebbrowserpersist.saveuri(), you nee...

Using the Stylesheet Service - Archive of obsolete content
'#' must be percent-encoded, details see bug 659650.

MMgc - Archive of obsolete content
memory profiler mmgc's memory profiler can display the state of your application's heap, showing the different classes of object in memory, along with object counts, byte counts, and percentage of total memory.

Using content preferences - Archive of obsolete content
browser.zoom.sitespecific toolkit.zoommanager.zoomvalues zoom.maxpercent and zoom.minpercent browser.download.lastdir path of a filesystem directory related about:config preferences: browser.download.lastdir the last directory for any site use downloadlastdir.jsm for access to these preferences.

Block and Line Layout Cheat Sheet - Archive of obsolete content
nsinlineframe mflags ns_inline_frame_contains_percent_aware_child this flag is set if the inline frame has any children that have a percentage value set (via the style context) for the width or height of the content area, padding, border, or margin.

Layout System Overview - Archive of obsolete content
of course this is a small percentage of the total classes in layout (see the detailed design documents for the details on all of the classes, in the context of their actual role).

HostWindow - Archive of obsolete content
status - area of the statusbar that displays the loading status message and a "percent complete" progress bar, as well as the "gear" menu that provides access to prism commands such as displaying the error console.

Rsyncing the CVS Repository - Archive of obsolete content
optionally, the --progress option will show the progress for each file, and a percentage of the total files that are transferred.

Table Layout Regression Tests - Archive of obsolete content
writing regression data to e:\moz_src\mozilla\layout\html\tests\block\base\baseline\width-fixed_html.rgd writing regression data to e:\moz_src\mozilla\layout\html\tests\block\base\baseline\width-percent_html.rgd writing regression data to e:\moz_src\mozilla\layout\html\tests\block\base\baseline\margin1_html.rgd writing regression data to e:\moz_src\mozilla\layout\html\tests\block\base\baseline\pre_html.rgd writing regression data to e:\moz_src\mozilla\layout\html\tests\block\base\baseline\pre1_html.rgd the second verify run creates first the frame dumps in the verify subdirectories (verify) and...

URIs and URLs - Archive of obsolete content
an escaped character is encoded as a character triplet, consisting of the percent character "%" followed by the two hexadecimal digits representing the octet code.

Binding Attachment and Detachment - Archive of obsolete content
-moz-binding value: none | [,]* <uri> | inherit initial value: none applies to: all elements (not generated content or pseudo-elements) inherited: no percentages: n/a the value of the -moz-binding property is a set of urls that identify specific bindings.

progressmeter.max - Archive of obsolete content
the default value if not specified is 100 such that the value may be used as a percentage.

Index - Archive of obsolete content
the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user.

Progress Meters - Archive of obsolete content
the value should be set to an integer percentage from 0 to 100.

Property Files - Archive of obsolete content
in case you need to format a string that already contains the percentage character in it (to get something like "50% off" returned), escape the percentage character with another percentage character, like this: my.percentage.string = %s%% off not escaping the percentage character will generate an incorrect string that strips the space character between the percentage character and the next word of the string ("50%off").

Accessibility/XUL Accessibility Reference - Archive of obsolete content
progressmeter <progressmeter mode="determined" value="10" /> as progress advances, jaws indicates percentage to the user radio see radiogroup radiogroup <label value='<!--radio group-->' control='radioid' /> <radiogroup id='radioid'> <radio selected="true" label='<!--option1-->' /> <radio label='<!--option2-->' /> </radiogroup> row see grid rows see grid stack all elements can be focused, even if not vi...

progressmeter - Archive of obsolete content
the default value if not specified is 100 such that the value may be used as a percentage.

scrollbar - Archive of obsolete content
the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user.

-ms-content-zoom-limit - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-content-zoom-limit-max: 400%-ms-content-zoom-limit-min: 100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesas each of the properties of the shorthand:-ms-content-zoom-limit-max: the largest allowed zoom factor.

-moz-scrollbar-thumb-proportional - Archive of obsolete content
syntax <integer> if the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1.

Game monetization - Game development
there are many companies offering advert systems — you sign up and allow them to show adverts in exchange for a percentage of the earnings.

Index - MDN Web Docs Glossary: Definitions of Web-related terms
320 percent-encoding glossary, webmechanics percent-encoding is a mechanism to encode 8-bit characters that have specific meaning in the context of urls.

MDN Web Docs Glossary: Definitions of Web-related terms
object reference oop opengl openssl opera browser operand operator origin ota owasp p p2p pac packet page load time page prediction parameter parent object parse parser pdf perceived performance percent-encoding php pixel placeholder names plaintext png polyfill polymorphism pop3 port prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise pr...

What is accessibility? - Learn web development
centers for disease control and prevention disability and functioning (noninstitutionalized adults 18 years and over) reports the usa "percent of adults with any physical functioning difficulty: 16.1%".

Test your skills: sizing - Learn web development
you should also give the inner box padding of 10% using the width (or inline size) as the size from which that percentage is calculated.

Fundamental text and font styling - Learn web development
font size (set with the font-size property) can take values measured in most of these units (and others, such as percentages), however the most common units you'll use to size text are: px (pixels): the number of pixels high you want the text to be.

How much does it cost to do something on the Web? - Learn web development
is 95% percent reliability adequate, or do you need professional, around-the-clock service?

Other form controls - Learn web development
<progress max="100" value="75">75/100</progress> this is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.

Use JavaScript within a webpage - Learn web development
for example, if you've implemented a nice javascript progress bar, make sure to supplement it with matching text percentages inside the html.

Creating hyperlinks - Learn web development
bject and body: <a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=the%20subject%20of%20the%20email&body=the%20body%20of%20the%20email"> send mail with cc, bcc, subject and body </a> note: the values of each field must be url-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces percent-escaped.

Responsive images - Learn web development
a space the width of the slot the image will fill when the media condition is true (480px) note: for the slot width, you may provide an absolute length (px, em) or a length relative to the viewport (vw), but not percentages.

Handling text — strings in JavaScript - Learn web development
the third one calculates a percentage result and rounds it to the nearest integer.

The business case for web performance - Learn web development
here are some kpis to consider: conversion rate the percent of your traffic that takes an intended action, such as completing a purchase or signing up for a newsletter.

Accessibility API cross-reference
<p> <p> shows percentage completion for task progressbar progress_bar n/a progressbar page showing properties of something propertypage n/a n/a n/a your average, run-of-the-mill button pushbutton push_button push_button button <button> only one radio button in a group is selectable.

Accessibility information for UI designers and developers
text sizing users should be able to enlarge their text size up to 200 percent without breaking functionality.

Embedding API for Accessibility
no audio setboolpref("browser.accept.audio", acceptaudio); no timed events setboolpref("browser.accept.timed_events", accepttimedevents); no timer speed setintpref("timer.relative_speed", percent); /* 100 corresponds to normal speed, 200 to double speed */ no allow cycling in lists and links setboolpref("keyboardnav.allow_cycling", allowcycling); no mouse pointer moves with keyboard focus setboolpref("keyboardnav.mouse_follows_keyboard_focus", mous...

Mozilla’s UAAG evaluation report
zooming is really the best solution, because the document retains its look - all font sizes are increased the same percentage.

Using the Browser API
this takes a single method — a zoom factor — which dictates the percentage to zoom in or out by.

mozbrowserselectionstatechanged
this is unitless and represents a percentage increase/decrease, e.g.

HTMLIFrameElement.zoom()
it acts like a percentage, so for example 1.1 would zoom in by 10%, whereas 0.9 would zoom out by 10%.

Download
progress read only number progress percent, from 0 to 100.

Application Translation with Mercurial
this detects often more than 90 percent of the possible reasons for the reviewer to not accept the patch.

Mozilla Content Localized in Your Language
percentages how are percentages expressed in your language?

Localization and Plurals
chrome://mozapps/locale/downloads/do...tes,hours,days chrome://mozapps/locale/downloads/do...dstitlepercent chrome://browser/locale/browser.prop...auseddownloads version history 0.1: initial version with pluralrule check, properties input loading, table generation, sample output display 0.2: use pluralform.numforms() to get the number of forms instead of figuring out locally to better support future rules - requires build from 2007/01/27 or later 0.3: generate a list of what numbers fall into whi...

Localization content best practices
units another example is localizing percentages or units.

Localization technical reviews
as your work is approved, you'll see a green circle in the furthest column to the right as well as a measure of percentage in the middle column.

Mozilla Style System
} else if (stylepos->mwidth.getunit() == estyleunit_percent) { ...

Activity Monitor, Battery Status Menu and top
% cpu: cpu usage percentage.

DMD
it also indicates what percentage of the total heap size and the unreported portion of the heap these blocks represent.

Memory reporting
each reporter implements a collectreports function which takes a nsimemoryreportercallback argument; for each measurement the reporter must pass in several values, including: a path (which identifies the report); an amount (the most important thing); a unit (most commonly bytes, but sometimes a unitless count or percentage); a description of what is measured.

about:memory
measurement basics most measurements use bytes as their unit, but some are counts or percentages.

powermetrics
user%: percentage of that cpu time spent in user space (as opposed to kernel mode.) deadlines (<2 ms, 2-5 ms): these two columns count how many "short" timers woke up threads in the process, per second, during the sample period.

tools/power/rapl
once sampling is finished — either because the user interrupted it, or because the requested number of samples has been taken — the following summary data is shown: 10 samples taken over a period of 10.000 seconds distribution of 'total' values: mean = 8.85 w std dev = 3.50 w 0th percentile = 5.17 w (min) 5th percentile = 5.17 w 25th percentile = 5.17 w 50th percentile = 8.13 w 75th percentile = 11.16 w 95th percentile = 14.63 w 100th percentile = 14.63 w (max) the distribution data is omitted if there was zero or one samples taken.

NSPR's Position On Abrupt Thread Termination
but what percentage of c programs actually bother?

Gecko Roles
role_progressbar represents a progress bar, dynamically showing the user the percent complete of an operation in progress.

Frecency algorithm
determine percentage bonus for type of visit (ie: the "transition type"): ....

nsIAccessibleRole
role_progressbar 48 represents a progress bar, dynamically showing the user the percent complete of an operation in progress.

nsIDownload
optional percentcomplete long the percentage of the file transfer that has been completed, or -1 if the file's size is unknown.

nsIMsgSearchTerm
te(in prtime atime); matchstatus boolean matchstatus(in unsigned long astatus); matchpriority boolean matchpriority(in nsmsgpriorityvalue priority); matchage boolean matchage(in prtime days); matchsize boolean matchsize(in unsigned long size); matchlabel boolean matchlabel(in nsmsglabelvalue alabelvalue); matchjunkstatus boolean matchjunkstatus(in string ajunkscore); matchjunkpercent /* * test search term match for junkpercent * * @param ajunkpercent junkpercent for message (0-100, 100 is junk) * @return true if matches */ boolean matchjunkpercent(in unsigned long ajunkpercent); matchjunkscoreorigin /* * test search term match for junkscoreorigin * @param ajunkscoreorigin who set junk score?

nsMsgSearchAttrib
city = 29; const nsmsgsearchattribvalue street = 30; const nsmsgsearchattribvalue title = 31; const nsmsgsearchattribvalue organization = 32; const nsmsgsearchattribvalue department = 33; // 34 - 43, reserved for ab / ldap; const nsmsgsearchattribvalue hasattachmentstatus = 44; const nsmsgsearchattribvalue junkstatus = 45; const nsmsgsearchattribvalue junkpercent = 46; const nsmsgsearchattribvalue junkscoreorigin = 47; const nsmsgsearchattribvalue label = 48; /* mail only...can search by label */ const nsmsgsearchattribvalue hdrproperty = 49; // uses nsimsgsearchterm::hdrproperty const nsmsgsearchattribvalue folderflag = 50; // uses nsimsgsearchterm::status const nsmsgsearchattribvalue uint32hdrproperty = 51; // uses nsimsgsearcht...

nsMsgSearchTerm
| _a == nsmsgsearchattrib::messagekey || \ _a == nsmsgsearchattrib::size || _a == nsmsgsearchattrib::ageindays || \ _a == nsmsgsearchattrib::folderinfo || _a == nsmsgsearchattrib::location || \ _a == nsmsgsearchattrib::label || _a == nsmsgsearchattrib::junkstatus || \ _a == nsmsgsearchattrib::folderflag || _a == nsmsgsearchattrib::uint32hdrproperty || \ _a == nsmsgsearchattrib::junkpercent || _a == nsmsgsearchattrib::hasattachmentstatus)) %} ...

nsMsgSearchValue
msgsearchvalue); %{c++ typedef struct nsmsgsearchvalue { nsmsgsearchattribvalue attribute; union { nsmsgpriorityvalue priority; prtime date; pruint32 msgstatus; /* see msg_flag in msgcom.h */ pruint32 size; nsmsgkey key; print32 age; /* in days */ nsimsgfolder *folder; nsmsglabelvalue label; pruint32 junkstatus; pruint32 junkpercent; } u; char *string; } nsmsgsearchvalue; ...

Performance
you can see an example of setting the maximum cache size to be a percentage of memory in nsnavhistory::initdb in toolkit/components/places/src/nsnavhistory.cpp.

Activity Manager examples
ed, initiator is not provided process.init("processing folder: " + folder.prettiestname, null); // note that we don't define a custom icon, default process icon // will be used process.contexttype = "account"; // group this activity by account process.contextobj = folder.server; // account in question gactivitymanager.addactivity(process); // step 2: showing some progress let percent = 50; process.setprogress(percent, "junk processing 25 of 50 messages", 25, 50); // step 3: removing the process and adding an event using process' attributes process.state = components.interfaces.nsiactivityprocess.state_completed; gactivitymanager.removeactivity(process.id); let event = components.classes["@mozilla.org/activity-event;1"].createinstance(nsiae); // localization is omitted, ini...

Version, UI, and Status Information - Plugins
the user might appreciate seeing the percentage completed of the current operation or the url of a button or other link object when the cursor is over it, all of which the browser shows.

Aggregate view - Firefox Developer Tools
the "total bytes" column shows you the number of bytes occupied by objects in each category, and that number as a percentage of the whole heap size for that tab.

Dominators view - Firefox Developer Tools
each entry displays: the retained size of the node, as bytes and as a percentage of the total the shallow size of the node, as bytes and as a percentage of the total the nodes's name and address in memory.

Allocations - Firefox Developer Tools
it includes the following columns: self count: the number of allocation-samples that were taken in this function (also shown as a percentage of the total) self bytes: the total number of bytes allocated in the allocation-samples in this function (also shown as a percentage of the total) rows are sorted by the "self bytes" column.

Background Tasks API - Web APIs
progressbarelem is the <progress> element showing the percentage of the tasks processed so far.

CSS numeric factory functions - Web APIs
syntax css.number(number); css.percent(number); // <length> css.em(number); css.ex(number); css.ch(number); css.ic(number); css.rem(number); css.lh(number); css.rlh(number); css.vw(number); css.vh(number); css.vi(number); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); cs...

CSSKeyframesRule - Web APIs
the key is a domstring containing an index of the keyframe to be returned, resolving to a percentage between 0% and 100%.

CSSMathSum - Web APIs
dstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( stylemap.get('width').values[0] ); // cssunitvalue {value: 30, unit: "percent"} console.log( stylemap.get('width').values[0].value ); // 30 console.log( stylemap.get('width').values[0].unit ); // 'percent' console.log( stylemap.get('width').values[1] ); // cssunitvalue {value: -20, unit: "px"} console.log( stylemap.get('width').values[1].value ); // -20 console.log( stylemap.get('width').values[1].unit ); // 'px' the specification is still evolving.

CSSNumericValue.add() - Web APIs
examples let mathsum = css.px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); // prints "calc(23px + 4% + 3cm + 9in)" console.log(mathsum.tostring()); specifications specification status comment css typed om level 1the definition of 'add' in that specification.

CSSNumericValue.div() - Web APIs
examples let mathproduct = css.px("24").div(css.percent("4")); // prints "calc(24px / 4%)" mathproduct.tostring(); specifications specification status comment css typed om level 1the definition of 'div' in that specification.

CSSNumericValue.mul() - Web APIs
examples let mathsum = css.px("23").mul(css.percent("4")).mul(css.cm("3")).mul(css.in("9")); // prints "calc(23px * 4% * 3cm * 9in)" console.log(mathsum.tostring()); specifications specification status comment css typed om level 1the definition of 'mul' in that specification.

CSSNumericValue.sub() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification.

CSSNumericValue.sum() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification.

CSSNumericValue.toSum() - Web APIs
examples let v = css.px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); v.tostring() // => "calc(23px + 4% + 3cm + 9in)" v.tosum("px", "percent").tostring() // => "calc(1000.39px + 4%)" specifications specification status comment css typed om level 1the definition of 'tosum' in that specification.

CSSPrimitiveValue.getFloatValue() - Web APIs
css_percentage the value is a <percentage>.

CSSPrimitiveValue.primitiveType - Web APIs
css_percentage the value is a <percentage>.

CSSPrimitiveValue.setFloatValue() - Web APIs
css_percentage the value is a <percentage>.

Document.requestStorageAccess() - Web APIs
the maximum number of concurrent storage access grants an origin can obtain is a positive integer currently defined as one percent of the number of top-level origins visited in the current session or 5, whichever is higher.

HTMLHyperlinkElementUtils.hash - Web APIs
the fragment is not percent-decoded.

HTMLTableElement.cellPadding - Web APIs
"10") or a percentage value (e.g.

HTMLTableElement.cellSpacing - Web APIs
syntax htmltableelement.cellspacing = spacing; var spacing = htmltableelement.cellspacing; value a domstring which is either a number of pixels (such as "10") or a percentage value (like "10%").

HTMLTableElement.width - Web APIs
syntax htmltableelement.width = width; var width = htmltableelement.width; where width is a string representing the width in number of pixels or as a percentage value.

HTMLTableElement - Web APIs
htmltableelement.width is a domstring containing the length in pixels or in percentage of the desired width fo the entire table.

ImageData.data - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // percentage in the x direction, times 255 let x = (i % 400) / 400 * 255; // percentage in the y direction, times 255 let y = math.ceil(i / 400) / 100 * 255; // modify pixel data imagedata.data[i + 0] = x; // r value imagedata.data[i + 1] = y; // g value imagedata.data[i + 2] = 255 - x; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canv...

IntersectionObserver - Web APIs
each offset can be expressed in pixels (px) or as a percentage (%).

KeyframeEffect.getKeyframes() - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.

KeyframeEffect.setKeyframes() - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.

Location: hash - Web APIs
the fragment is not percent-decoded.

Transcoding assets for Media Source Extensions - Web APIs
this is usually a file size increase of 1 percent or less.

The 'X' property - Web APIs
usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual computed value absolute length or percentage animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).

SpeechSynthesisUtterance.rate - Web APIs
other values act as a percentage relative to this, so for example 2 is twice as fast, 0.5 is half as fast, etc.

URL.hash - Web APIs
the fragment is not percent-decoded.

VideoPlaybackQuality.corruptedVideoFrames - Web APIs
example this example determines the percentage of frames which have been corrupted, and if the value is greater than 5%, calls a funciton called downgradevideo() that would be implemented to switch to a different video that might tax the network less.

VideoPlaybackQuality.creationTime - Web APIs
example this example calls getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been lost by either corruption or being dropped.

VideoPlaybackQuality.totalVideoFrames - Web APIs
example this example calls getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been lost by either corruption or being dropped.

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
to zoom using a scaling factor or percentage, you can map 1x (100% of normal size) to the largest value of fov you allow (which leads to the most content being visible), then map your maximum magnification to the maximum value of fov you support and map corresponding values in between.

Keyframe Formats - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.

Using the Web Animations API - Web APIs
however, unlike css, the web animations api doesn’t need to explicitly be told the percentages along the animation for each key to appear at.

Window.devicePixelRatio - Web APIs
the updatepixelratio() function fetches the current value of devicepixelratio, then sets the innertext of the element pixelratiobox to a string which displays the ratio both as a percentage and as a raw decimal value with up to two decimal places.

Window.getComputedStyle() - Web APIs
an example difference between pre- and post-layout values includes the resolution of percentages for width or height, as those will be replaced by their pixel equivalent only for used values.

Using XMLHttpRequest - Web APIs
// progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcomputable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ...

Using the aria-valuenow attribute - Accessibility
value string representation of a number possible effects on user agents and assistive technology for elements with role progressbar and scrollbar, assistive technologies should render the actual value as a percentage, calculated as a position on the range from aria-valuemin to aria-valuemax if both are defined, otherwise the actual value with a percent indicator.

Accessibility Information for Web Authors - Accessibility
a study has established that about 8 percent of all men have some form of color deficiency.

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mas...

orientation - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification.

user-zoom - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.

@viewport - CSS: Cascading Style Sheets
lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport.

Using CSS animations - CSS: Cascading Style Sheets
since the timing of the animation is defined in the css style that configures the animation, keyframes use a <percentage> to indicate the time during the animation sequence at which they take place.

Using URL values for the cursor property - CSS: Cascading Style Sheets
however, the svg image must contain a length-valued (not percentage-valued) height and width on its root svg node.

Variable fonts guide - CSS: Cascading Style Sheets
this is typically set in css using the font-stretch property, with values expressed as a percentage above or below ‘normal’ (100%), any number greater than 0 is technically valid—though it is far more likely that the range would fall closer to the 100% mark, such as 75%-125%.

Basic Concepts of grid layout - CSS: Cascading Style Sheets
you can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose.

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
an example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above.

Logical properties for floating and positioning - CSS: Cascading Style Sheets
these properties take a length or a percentage as a value, and relate to the user's screen dimensions.

Grid wrapper - CSS: Cascading Style Sheets
using a numeric unit (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using percentage values or viewport units will mean this wrapper grows or shrinks in response to its context.

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
if background-size specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins.

Linear-gradient Generator - CSS: Cascading Style Sheets
</div> <div class="section"> <div class="title"> active axis </div> <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> ...

Value definition syntax - CSS: Cascading Style Sheets
<percentage> | <length> | left | center | right | top | bottom this example matches the following values: 3% 0 3.5em left center right top bottom but not: center 3%, as only one of the components must be present.

border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; borde...

border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; borde...

border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inlin...

border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inlin...

column-width - CSS: Cascading Style Sheets
percentage values are also invalid.

conic-gradient() - CSS: Cascading Style Sheets
browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.

grayscale() - CSS: Cascading Style Sheets
syntax grayscale(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>.

invert() - CSS: Cascading Style Sheets
syntax invert(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>.

opacity() - CSS: Cascading Style Sheets
syntax opacity(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>.

saturate() - CSS: Cascading Style Sheets
syntax saturate(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>.

sepia() - CSS: Cascading Style Sheets
syntax sepia(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>.

flex - CSS: Cascading Style Sheets
x-shrink: 1flex-basis: autoapplies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:flex-grow: as specifiedflex-shrink: as specifiedflex-basis: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a length, percentage or calc(); formal syntax none | [ <'flex-grow'> <'flex-shrink'>?

margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .e...

margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } ...

margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; heig...

margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .

margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } ...

mask-border - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-s...

repeating-conic-gradient() - CSS: Cascading Style Sheets
browsers supporting repeating conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.

shape-image-threshold - CSS: Cascading Style Sheets
formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient background image.

Used value - CSS: Cascading Style Sheets
an element could then explicitly inherit a width/height of a parent, whose computed value is a percentage.

Cross-browser audio basics - Developer guides
} play.addeventlistener('click', function() { myaudio.play(); play.style.display = "none"; pause.style.display = "block"; }); pause.addeventlistener('click', function() { myaudio.pause(); pause.style.display = "none"; play.style.display = "block"; }); // display progress myaudio.addeventlistener('timeupdate', function() { //sets the percentage bar.style.width = parseint(((myaudio.currenttime / myaudio.duration) * 100), 10) + "%"; }); } you should end up with something like this: seeking using the seek bar this is a good start, but it would be nice to be able to navigate the audio using the progress bar.

Video player styling basics - Developer guides
max-height:30.875rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.0971659919028340080971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the enclosing <figure> element (this was worked out with experimentation based on the required button height).

Creating a cross-browser video player - Developer guides
internet explorer 9), is also updated at this time, setting its width to be a percentage of the total time played.

Block formatting context - Developer guides
le; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .75); border: 1px solid black; padding: 10px; } rather than inline-blocks with width:<percentage>, in this case we don't have to specify the width of the right div.

Using HTML sections and outlines - Developer guides
if a significant percentage of your particular target audience is using internet explorer 8 or older, then you can follow the below instructions to make them behave as expected.

<col> - HTML: Hypertext Markup Language
in addition to the standard pixel and percentage values, this attribute might take the special form 0*, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents.

<hr>: The Thematic Break (Horizontal Rule) element - HTML: Hypertext Markup Language
width sets the length of the rule on the page through a pixel or percentage value.

<input type="range"> - HTML: Hypertext Markup Language
as a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate.

POST - HTTP
non-alphanumeric characters in both keys and values are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead) multipart/form-data: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part.

Intl.NumberFormat.prototype.formatToParts() - JavaScript
percentsign the percent sign string ("%").

Values - MathML
(the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value.

The "codecs" parameter in common media types - Web media technologies
as is the case with any mime type parameter, codecs must be changed to codecs* (note the asterisk character, *) if any of the properties of the codec use special characters which must be percent-encoded per rfc 2231, section 4: mime parameter value and encoded word extensions.

Navigation and resource timings - Web Performance
compression to get the compression savings percentage, we divide the transfersize by the decodedbodysize, and subtract that from 100%.

Privacy, permissions, and information security
for example, if a site leaks a list of users' names and zip codes online, a bad actor could almost certainly track down at least some percentage of those users by simply using the corresponding phone books.

Introduction to progressive web apps - Progressive web apps (PWAs)
in addition, there are tools to measure how complete (as a percentage) a web app is, such as lighthouse.

Media - Progressive web apps (PWAs)
it is equally appropriate to use ems (em) to match the font size, and percentages (%).

The building blocks of responsive design - Progressive web apps (PWAs)
fluid grids the best place to start is with fluid measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels.

fill-opacity - SVG: Scalable Vector Graphics
, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for fill-opacity, however, it is not widely ...

filterUnits - SVG: Scalable Vector Graphics
objectboundingbox in that case, x, y, width and height represent fractions or percentages of the bounding box on the referencing element.

font-size - SVG: Scalable Vector Graphics
nt but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-size property.

maskUnits - SVG: Scalable Vector Graphics
objectboundingbox this value indicates that all coordinates for the geometry attributes represent fractions or percentages of the bounding box of the element to which the mask is applied.

patternUnits - SVG: Scalable Vector Graphics
objectboundingbox this value indicates that all coordinates for the geometry properties represent fractions or percentages of the bounding box of the element to which the mask is applied.

primitiveUnits - SVG: Scalable Vector Graphics
objectboundingbox this value indicates that any length values within the filter definitions represent fractions or percentages of the bounding box on the referencing element.

stroke-dasharray - SVG: Scalable Vector Graphics
stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps.

stroke-dashoffset - SVG: Scalable Vector Graphics
er units which ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes the offset is usually expressed in user units resolved against the pathlength but if a <percentage> is used, the value is resolved as a percentage of the current viewport.

stroke-opacity - SVG: Scalable Vector Graphics
<polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a css property --> <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for stroke-opac...

stroke-width - SVG: Scalable Vector Graphics
>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px animatable yes note: a percentage value is always computed as a percentage of the normalized viewbox diagonal length.

<stop> - SVG: Scalable Vector Graphics
value type: <number>|<percentage>; default value: 0; animatable: yes stop-color this attribute defines the color of the gradient stop.

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
xlink:type, xlink:role, xlink:arcrole, xlink:show, and xlink:actuate attributes removed implementation status unknown xlink:href attribute deprecated in favor of href implemented (bug 1245751) xlink:title attribute deprecated in favor of child <title> implementation status unknown spaces in svg view fragments implementation status unknown pixel: and percent: spatial media fragments implementation status unknown linking to <view> elements does not cause implicit box transformation to show nearest ancestor <svg> element implementation status unknown unspecified svg view fragment parameters don't cause corresponding attributes to be reset to initial values implementation status unknown viewtarget attribute of <view> ...