background-position - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...>. a position defines an x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. if two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). 1-value syntax: the value may be: the keyword value center, which centers the image. one of the keyword values top, left, bottom, right. this specifies an edge against which to place the item. the other dimension is then set to 50%, so the item is placed in the middle of the edge specified. a <length> or <percentage>. this spec...
... coordinate relative to the left edge, with the y coordinate set to 50%. 2-value syntax: one value defines x and the other defines y. each value may be: one of the keyword values top, left, bottom, right. if left or right are given here, then this defines x and the other given value defines y. if top or bottom are given, then this defines y and the other value defines x. a <length> or <percentage>. if the other value is left or right, then this value defines y, relative to the top edge. if the other value is top or bottom, then this value defines x, relative to the left edge. if both values are <length> or <percentage> values, then the first defines x and the second y. note that: if one value is top or bottom, then the other value may not be top or bottom. if one value is left or rig...
...And 9 more matches

grid-template-columns - CSS: Cascading Style Sheets
peat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid. any columns will be implicitly generated and their size will be determined by the grid-auto-columns property. <length> a non-negative length, giving the width of the column. <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 th...
... <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). ...
...actor. it is invalid as a minimum. auto is a keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. fit-content( [ <length> | <percentage> ] ) represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of columns that exhib...
...And 9 more matches

grid-template-rows - CSS: Cascading Style Sheets
t; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value. values none is a keyword meaning that there is no explicit grid. any rows will be implicitly generated and their size will be determined by the grid-auto-rows property. <length> is a non-negative length. <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 t...
... <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). ...
...actor. it is invalid as a minimum. auto is a keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. fit-content( [ <length> | <percentage> ] ) represents the formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e. minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of rows that exhibit ...
...And 9 more matches

additive-symbols - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 8 more matches

negative - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 8 more matches

pad - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 8 more matches

prefix - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 8 more matches

suffix - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 8 more matches

symbols - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 8 more matches

mask-image - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 8 more matches

height - CSS: Cascading Style Sheets
value provided. if two viewport values are provided, the first value will set the minimum height and the second value will set the maximum height. syntax /* one value */ height: auto; height: 320px; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
.... if two viewport values are provided, the first value will set the minimum height and the second value will set the maximum height. syntax /* one value */ height: auto; height: 320px; height: 15em; /* two values */ height: 320px 200px; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
...ther css descriptors' values. <length> a non-negative absolute or relative length. <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. must be non-negative. 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. ...
...And 7 more matches

background-image - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 7 more matches

offset-position - CSS: Cascading Style Sheets
the offset-position css property defines the initial position of the offset-path. 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. <position> a ...
...>. a position defines an x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. if two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. ...
...izontal position and the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). for more explanation of these value types, see background-position. ...
...And 7 more matches

CSS values and units - Learn web development
for each value will give you information about browser support. for example, if you look at the page for <color> you will see that the browser compatibility section lists different types of color value and support for them. let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values. numbers, lengths, and percentages there are various numeric data types that you might find yourself using in css. the following are all classed as numeric: data type description <integer> an <integer> is a whole number such as 1024 or -55. <number> a <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or ...
...or -55. <number> a <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2. <dimension> a <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types. <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. lengths the numeric type you will come across most frequently is <length>, for example 10px (pixels) or 30em. there are two types of lengths used in css — relative and abso...
...% of the viewport's larger dimension. exploring an example in the example below you can see how some relative and absolute length units behave. the first box has a width set in pixels. as an absolute unit this width will remain the same no matter what else changes. the second box has a width set in vw (viewport width) units. this value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. if you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. to see this in action you'll have to try the example after opening it in its own browser tab. the third box uses em units. these are relative to the font size. i've set a font size of 1em on the cont...
...And 6 more matches

content - CSS: Cascading Style Sheets
ring> | <url> ] , [ content | before | after | first-letter ]? )<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>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...adient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...op-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<counter-style> = <counter-style-name> | symbols()where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 6 more matches

font-stretch - CSS: Cascading Style Sheets
the font-stretch css property selects a normal, condensed, or expanded face from a font. /* 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. values normal specifies a normal font face. semi-condensed, condensed, extra-condensed, ultra-condensed specifies a more condensed font face than normal, with ultra-...
...yword value or a single <percentage> value. values normal specifies a normal font face. semi-condensed, condensed, extra-condensed, ultra-condensed specifies a more condensed font face than normal, with ultra-condensed as the most condensed. semi-expanded, expanded, extra-expanded, ultra-expanded specifies a more expanded font face than normal, with ultra-expanded as the most expanded. <percentage> a <percentage> value between 50% and 200% (inclusive). negative values are not allowed for this property. in earlier versions of the font-stretch specification, the property accepts only the nine keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype ...
... in earlier versions of the font-stretch specification, the property accepts only the nine keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. however, note that the <percentage> syntax is not yet supported by all browsers: check the browser compatibility table for details. ...
...And 6 more matches

margin - CSS: Cascading Style Sheets
ntax /* apply to all four sides */ margin: 1em; margin: -3px; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* global values */ margin: inherit; margin: initial; margin: unset; the margin property may be specified using one, two, three, or four values. each value is a <length>, a <percentage>, or the keyword auto. negative values draw the element closer to its neighbors than it would be by default. when one value is specified, it applies the same margin to all four sides. when two values are specified, the first margin applies to the top and bottom, the second to the left and right. when three values are specified, the first margin applies to the top, the second to the right ...
...ecified, the first margin applies to the top and bottom, the second to the left and right. when three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the margin as a fixed value. ...
...top and bottom, the second to the left and right. when three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the margin as a fixed value. ...
...And 6 more matches

text-indent - CSS: Cascading Style Sheets
is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. 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>. negative values are allowed. see <length> values for poss...
...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>. negative values are allowed. see <length> values for possible units. <percentage> indentation is a <percentage> of the containing block's width. each-line indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break. hanging inverts which lines are indented. all lines except the first line will be indented. formal definition initial value0applies toblock containersinh...
...entation is a <percentage> of the containing block's width. each-line indentation affects the first line of the block container as well as each line after a forced line break, but does not affect lines after a soft wrap break. hanging inverts which lines are indented. all lines except the first line will be indented. ...
...And 6 more matches

Legacy layout methods - Learn web development
eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. 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. try adjusting the width of your browser window to see for yourself. this is a valuable tool for responsive web design. note: you can see this example running at 0_two-column-layout.html (...
...d in the lesson on floats and clearing. the easiest type of grid framework to create is a fixed width one — we just need to work out how much total width we want our design to be, how many columns we want, and how wide the gutters and columns should be. 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. in the next sections we will look at how to create both. we will create a 12 column grid — a very common choice that is seen to be very adaptable to different situations given that 12 is nicely divisible by 6, 4, 3, and 2. a simple fixed width grid lets first create a grid system that uses fixed width columns. start out by making a local ...
... grid system working, you can simply define the rows and the number of columns in each row, then fill each container with your required content. great! creating a fluid grid our grid works nicely, but it has a fixed width. we really want a flexible (fluid) grid that will grow and shrink with the available space in the browser viewport. to achieve this we can turn the reference pixel widths into percentages. the equation that turns a fixed width into a flexible percentage-based one is as follows. target / context = result for our column width, our target width is 60 pixels and our context is the 960 pixel wrapper. we can use the following to calculate a percentage. 60 / 960 = 0.0625 we then move the decimal point 2 places giving us a percentage of 6.25%. so, in our css we can replace the 60...
...And 5 more matches

border-top-left-radius - CSS: Cascading Style Sheets
rty, the value of this property is then reset to its initial value by the shorthand property. 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. values <length...
...ge> 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. values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall e...
...e width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 5 more matches

border-top-right-radius - CSS: Cascading Style Sheets
the value of this property is then reset to its initial value by the shorthand property. 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. values <length...
...ge> 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. values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall e...
...e width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 5 more matches

filter - CSS: Cascading Style Sheets
g the filter function default values, then all filter functions are interpolated according to their specific rules. otherwise, discrete interpolation is used. functions the filter property is specified as none or one or more of the functions listed below. if the parameter for any function is invalid, the function returns none. 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). when a single filter property has two or more functions it's results will be different from when two or more filter properties are separately applied with the same functions. svg filter url() takes an uri pointing to an svg filter, which may be embedded in an external xml file. filter: url(resources.svg#c1) filter fu...
...sources.svg#c1) filter functions blur() the blur() fucntion applies a gaussian blur to the input image. the value of radius defines the value of the standard deviation to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. filter: blur(5px) <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> ...
...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> =...
...And 5 more matches

image() - CSS: Cascading Style Sheets
a fallback in case none of the specified images are able to be rendered. disambiguation: image(), the htmlimageelement constructor. ...
...on: image(), the htmlimageelement constructor. ...
...? , <color>? ]! ...
...And 5 more matches

max-height - CSS: Cascading Style Sheets
ing larger than the value specified for max-height. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. max-height overrides height, but min-height overrides max-height. 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. auto the ...
...min(max-content, max(min-content, argument)). accessibility concerns ensure that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text size. ...
...re that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text size. ...
...And 5 more matches

padding - CSS: Cascading Style Sheets
op syntax /* apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em; /* global values */ padding: inherit; padding: initial; padding: unset; the padding property may be specified using one, two, three, or four values. each value is a <length> or a <percentage>. negative values are invalid. when one value is specified, it applies the same padding to all four sides. when two values are specified, the first padding applies to the top and bottom, the second to the left and right. when three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the pad...
...ied, the first padding applies to the top and bottom, the second to the left and right. when three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the padding as a fixed value. <percentage> the size of the padding as a percentage, relative to the width of the containing block. formal definition initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-lett...
...s a percentage, relative to the width of the containing block. formal definition initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...And 5 more matches

translate - CSS: Cascading Style Sheets
perty. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value. 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. equivalent to a translate() (2d translation) function with a single value specified. two <length-percentage> values two <length> or <percentage> that specify the x and y axis translation values (respectively) of a 2d translation. equivalent to a translate() (2d translati...
...ion, with the same translation along both the x and y axes. equivalent to a translate() (2d translation) function with a single value specified. two <length-percentage> values two <length> or <percentage> that specify the x and y axis translation values (respectively) of a 2d translation. equivalent to a translate() (2d translation) function with two values specified. three values two <length-percentage> and single <length> values that specify the x, y, and z axis translation values (respectively) of a 3d translation. equivalent to a translate3d() (3d translation) function. none specifies that no translation should be applied. ...
...d translation) function with two values specified. three values two <length-percentage> and single <length> values that specify the x, y, and z axis translation values (respectively) of a 3d translation. equivalent to a translate3d() (3d translation) function. none specifies that no translation should be applied. ...
...And 5 more matches

width - CSS: Cascading Style Sheets
to border-box, it sets the width of the border area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-width and max-width properties override width. 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>. values <length> defines the width as an...
...: 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>. values <length> defines the width as an absolute value. <percentage> defines the width as a percentage of the containing block's width. auto the browser will calculate and select a width for the specified element. max-content the intrinsic preferred width. min-content the intrinsic minimum width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-cont...
... accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is zoomed to increase text size. ...
...And 5 more matches

-ms-scroll-snap-points-x - Archive of obsolete content
the -ms-scroll-snap-points-x css property is a microsoft extension that specifies where snap-points will be located along the x-axis. 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>. ...
...a microsoft extension that specifies where snap-points will be located along the x-axis. 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>. ...
... that specifies where snap-points will be located along the x-axis. 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. ...
...And 4 more matches

-ms-scroll-snap-points-y - Archive of obsolete content
the -ms-scroll-snap-points-y css property is a microsoft extension that specifies where snap-points will be located along the y-axis. 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>. ...
...a microsoft extension that specifies where snap-points will be located along the y-axis. 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>. ...
... that specifies where snap-points will be located along the y-axis. 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. ...
...And 4 more matches

-webkit-mask-position-x - CSS: Cascading Style Sheets
the -webkit-mask-position-x css property sets the initial horizontal position of a mask image. ...
...that means, a value of 0% means the left...
...that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge o...
...And 4 more matches

-webkit-mask-position-y - CSS: Cascading Style Sheets
the -webkit-mask-position-y css property sets the initial vertical position of a mask image. ...
...a value of 0% means the top edge of the imag...
...a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is al...
...And 4 more matches

border-end-end-radius - CSS: Cascading Style Sheets
rder-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall e...
...e width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 4 more matches

border-end-start-radius - CSS: Cascading Style Sheets
start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall e...
...e width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 4 more matches

border-start-end-radius - CSS: Cascading Style Sheets
end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall e...
...e width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 4 more matches

border-start-start-radius - CSS: Cascading Style Sheets
ius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property. syntax values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall e...
...e width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 4 more matches

column-gap (grid-column-gap) - CSS: Cascading Style Sheets
, and grid layouts. css grid layout initially defined the grid-column-gap property. this prefixed property is being replaced by column-gap. however, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property. 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. values normal the browser's default spacing is used between columns. for multi-column layout this is specified as 1em. for all other layout types it is 0. <length> the size of the gap between columns, define...
... column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below. values normal the browser's default spacing is used between columns. for multi-column layout this is specified as 1em. for all other layout types it is 0. <length> the size of the gap between columns, defined as a <length>. the <length> property's value must be non-negative. ...
...ty is specified as one of the values listed below. values normal the browser's default spacing is used between columns. for multi-column layout this is specified as 1em. for all other layout types it is 0. <length> the size of the gap between columns, defined as a <length>. the <length> property's value must be non-negative. <percentage> the size of the gap between columns, defined as a <percentage>. the <percentage> property's value must be non-negative. ...
...And 4 more matches

font-size - CSS: Cascading Style Sheets
ttps://github.com/mdn/interactive-examples and send us a pull request. ...
... larger, smaller relative-size keywords. ...
...arent element's font size, roughly by the ratio used to separate the absolute-size keywords above. <length> a positive <length> value. for most font-relative units (such as em and ex), the font size is relative to the parent element's font size. for font-relative units that are root-based (such as rem), the font size is relative to the size of the font used by the <html> (root) element. <percentage> a positive <percentage> value, relative to the parent element's font size. note: to maximize accessibility, it is generally best to use values that are relative to the user's default font size. description there are several ways to specify the font size, including with keywords or numerical values for pixels or ems. choose the appropriate method based on the needs for the particula...
...And 4 more matches

height - CSS: Cascading Style Sheets
border area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-height and max-height properties override height. 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. auto the browser will calculate and select a height for the specified element. max-content the intrinsic preferred height. min-content the intrinsic m...
...min(max-content, max(min-content, )). ...
...ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size. ...
...And 4 more matches

left - CSS: Cascading Style Sheets
ates in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. for relatively positioned elements, the distance that the element is mo...
...eft: 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. for relatively positioned elements, the distance that the element is moved to the right of its normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the right property, while width: auto is treated as a width based on the content; or if right is also auto, the element is positioned where it should horizontally be positioned if it were a static element. for relatively positioned elements,...
.... for relatively positioned elements, the distance of the element from its normal position is based on the right property; or if right is also auto, the element is not moved horizontally at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, or the auto keyword. description the effect of left depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the left property specifies the distance between the element's left edge and the left edge of its containing block. (the containing block is the ancestor to which the element is relatively positioned.) when...
...And 4 more matches

line-height - CSS: Cascading Style Sheets
his interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. values normal depends on the user agent. desktop browsers (including firefox) use a default value of roughly 1.2, depending on the element's fon...
...is this unitless <number> multiplied by the element's own font size. the computed value is the same as the specified <number>. in most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance. <length> the specified <length> is used in the calculation of the line box height. values given in em units may produce unexpected results (see example below). <percentage> relative to the font size of the element itself. the computed value is this <percentage> multiplied by the element's computed font size. percentage values may produce unexpected results (see the second example below). -moz-block-height sets the line height to the content height of the current block. accessibility concerns use a minimum value of 1.5 for line-height for main paragraph c...
...his will help people experiencing low vision conditions, as well as people with cognitive concerns such as dyslexia. if the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately. w3c understanding wcag 2.1 formal definition initial valuenormalapplies toall elements. ...
...And 4 more matches

mask-border-source - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 4 more matches

max-width - CSS: Cascading Style Sheets
m becoming larger than the value specified by max-width. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. max-width overrides width, but min-width overrides max-width. 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. auto the browser wil...
...min(max-content, max(min-content, argument)). accessibility concerns ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size. ...
...s ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size. ...
...And 4 more matches

right - CSS: Cascading Style Sheets
es in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. for relatively positioned elements, the distance that the element...
... 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. for relatively positioned elements, the distance that the element is moved to the left of its normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the left property, while width: auto is treated as a width based on the content; or if left is also auto, the element is positioned where it should horizontally be positioned if it were a static element. for relatively positioned elements, t...
...nt. for relatively positioned elements, the distance of the element from its normal position is based on the left property; or if left is also auto, the element is not moved horizontally at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). this computed value is then handled as if it were a <length>, <percentage>, or the auto keyword. description the effect of right depends on how the element is positioned (i.e., the value of the position property): when position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block. when position is set to relative, the right property specifies the distance the element...
...And 4 more matches

scroll-snap-coordinate - CSS: Cascading Style Sheets
is displayed. syntax values none specifies that the element does not contribute to a snap point. <position> specifies the offset of the snap coordinates from the start edge of the element’s border box. for each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate. ...
...ond value its y coordinate. ...
... 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> ]? ...
...And 4 more matches

shape-margin - CSS: Cascading Style Sheets
nteractive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content. ...
...m/mdn/interactive-examples and send us a pull request. the margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content. 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. ...
...th> 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. ...
...And 4 more matches

top - CSS: Cascading Style Sheets
. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. 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. for relatively positioned elements, the distance that the element is moved b...
...ining 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. for relatively positioned elements, the distance that the element is moved below its normal position. <percentage> a <percentage> of the containing block's height. auto specifies that: for absolutely positioned elements, the position of the element is based on the bottom property, while height: auto is treated as a height based on the content; or if bottom is also auto, the element is positioned where it should vertically be positioned if it were a static element. for relatively positioned elemen...
.... for relatively positioned elements, the distance of the element from its normal position is based on the bottom property; or if bottom is also auto, the element is not moved vertically at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). ...
...And 4 more matches

transform - CSS: Cascading Style Sheets
of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. ...
...)<scalex()> = scalex( <number> )<scaley()> = scaley( <number> )<rotate()> = rotate( [ <angle> | <zero> ] )<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )<skewx()> = skewx( [ <angle> | <zero> ] )<skewy()> = skewy( [ ...
...> = <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>? )<scalex()> = scalex( <number> )<scaley()> = scaley( <number> )<rotate()> = rotate( [ <angle> | <zero> ] )<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )<skewx()> = skewx( [ <angle> | <zero> ] )<skewy()> = skewy( [ <angle> | <zero> ] )<m...
...And 4 more matches

-moz-border-bottom-colors - Archive of obsolete content
values. <color> specifies the color of a line of pixels of the bottom border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...arent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...or border-color is used, if specified. ...
...And 3 more matches

-moz-border-left-colors - Archive of obsolete content
r values. <color> specifies the color of a line of pixels of the left border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...arent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...or border-color is used, if specified. ...
...And 3 more matches

-moz-border-right-colors - Archive of obsolete content
values. <color> specifies the color of a line of pixels of the right border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...arent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...or border-color is used, if specified. ...
...And 3 more matches

-moz-border-top-colors - Archive of obsolete content
or values. <color> specifies the color of a line of pixels of the top border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...arent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. ...
...or border-color is used, if specified. ...
...And 3 more matches

nsISelection2
read only. methods getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, i...
...read only. methods getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode...
...ainst the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. results returns the ranges that overlap (or touch) the input range. scrollintoview() scrolls a region of the selection, so that it is visible in the scrolled view. 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). aissynchronous when true, scrolls the selection into view before returning. if false, posts a request which is processed at some point after the method returns. avpercent how to align the frame vertically. a value of 0 means ...
...And 3 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...
...lucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. ...
... the rgb() corresponding one. ...
...And 3 more matches

-webkit-box-reflect - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 3 more matches

font-stretch - CSS: Cascading Style Sheets
d using any one of the values listed below. values normal specifies a normal font face. semi-condensed, condensed, extra-condensed, ultra-condensed specifies a more condensed font face than normal, with ultra-condensed as the most condensed. semi-expanded, expanded, extra-expanded, ultra-expanded specifies a more expanded font face than normal, with ultra-expanded as the most expanded. <percentage> a <percentage> value between 50% and 200% (inclusive). negative values are not allowed for this property. in earlier versions of the font-stretch specification, the property accepts only the nine keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype ...
...racter widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. ...
...ntype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. 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 the keyterm values. however some f...
...And 3 more matches

Using CSS gradients - CSS: Cascading Style Sheets
olors are evenly spaced along the gradient. <div class="auto-spaced-linear-gradient"></div> div { width: 120px; height: 120px; } .auto-spaced-linear-gradient { background: linear-gradient(red, yellow, blue, orange); } positioning color stops you don't have to leave your color stops at their default positions. 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. if you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with t...
... two colors. ...
...radial color stops again like linear gradients, you can position each radial color stop with a percentage or absolute length. <div class="radial-gradient"></div> div { width: 120px; height: 120px; } .radial-gradient { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); } positioning the center of the gradient you can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top. <div class="radial-gradient"></div> div { width: 120px; height: 240px; } .radial-gradient { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); } sizing radial gradients unlike linear gradients, ...
...And 3 more matches

CSS values and units - CSS: Cascading Style Sheets
image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted. if unquoted, it is parsed as a <url-token>, which has extra requirements including the escaping of certain characters. see <url> for more information. numeric data types <integer> <number> <dimension> <percentage> integers an integer is one or more decimal digits, 0 through 9, such as 1024 or -55. an integer may be preceded by a + or - symbol, with no space between the symbol and the integer. numbers a <number> represents a real number, which may or may not have a decimal point with a fractional component, for example 0.255, 128 or -1.2. numbers may also be preceded by a + or - symbol. dimensions...
...ion units are represented by the type <resolution>. they represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a css inch, centimeter, or pixel. it accepts the following values: unit description dpi dots per inch. dpcm dots per centimetre. dppx, x dots per px unit. 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. each property that allows percentages also defines the quantity to which the percentage refers. this quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a contai...
...tage values are always relative to another quantity, for example a length. each property that allows percentages also defines the quantity to which the percentage refers. this quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else. as an example, if you specify the width of a box as a percentage, it refers to the percentage of the box's parent's computed width: .box { width: 50%; } mixing percentages and dimensions some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. in this case the allowed value is detailed in the specification as a combination unit, e.g. <length-percentage>. other possible combinations are as follo...
...And 3 more matches

border-bottom-left-radius - CSS: Cascading Style Sheets
the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
... values <length...
...(height) */ border-bottom-left-radius: 20% 10%; /* the corner is an ellipse */ /* border-bottom-left-radius: horizontal vertical */ border-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. 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. values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be express...
...And 3 more matches

border-bottom-right-radius - CSS: Cascading Style Sheets
background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-right-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
... values <length...
...izontal(width) and 10% of vertical(height) */ /*the corner is an ellipse */ /* border-bottom-right-radius: horizontal vertical */ 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. 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. values <length-percentage> denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be express...
...And 3 more matches

border-image-source - CSS: Cascading Style Sheets
&& <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> ...
...side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? ...
...-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...And 3 more matches

clip-path - CSS: Cascading Style Sheets
d height values of the viewbox attribute. none no clipping path is created. note: a computed value other than none results in the creation of a new stacking context the same way that css opacity does for values other than 1. ...
...computed 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> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<path()> = path( [ <fill-rule>, ]? <string> )<shape-box> = <box> | margin-boxwhere <length-percentage> = <length> | <percentage><shape-radius> = <len...
...{1,4} [ round <'border-radius'> ]? )<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<path()> = path( [ <fill-rule>, ]? ...
...And 3 more matches

grid-auto-columns - CSS: Cascading Style Sheets
s are created to hold it. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
...ns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; values <length> is a non-negative length. <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. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outsid...
...a keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be streched by the align-content and justify-content properties. ...
...And 3 more matches

grid-auto-rows - CSS: Cascading Style Sheets
ows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
...nt auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset; values <length> is a non-negative length. <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. <flex> is a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. when appearing outsid...
... keyword that is identical to maximal content if it's a maximum. as a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties. ...
...And 3 more matches

grid-template - CSS: Cascading Style Sheets
ote: the grid shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. use grid (as opposed to grid-template) to prevent these values from cascading in seperately. ...
...ted into absolute lengthsgrid-template-areas: as specifiedanimation typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ...
...plate-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <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>? ...
...And 3 more matches

mask-position - CSS: Cascading Style Sheets
ed by commas. values <position> one to four values representing a 2d position regarding the edges of the element's box. relative or absolute offsets can be given. note that the position can be set outside of the element's box. ...
...l 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 <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ...
...hat 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 <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ...
...And 3 more matches

min-height - CSS: Cascading Style Sheets
ight. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the element's height is set to the value of min-height whenever min-height is larger than max-height or height. 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. auto the browser will calcu...
... values <length> defines the min-height as an absolute value. <percentage> defines the min-height as a percentage of the containing block's height. auto the browser will calculate and select a min-height for the specified element. none no limit on the size of the box. max-content the intrinsic preferred min-height. min-content the intrinsic minimum min-height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block. if the...
... formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block. ...
...And 3 more matches

min-width - CSS: Cascading Style Sheets
min-width. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the element's width is set to the value of min-width whenever min-width is larger than max-width or width. 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. auto the browser will calculate and s...
...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. auto the browser will calculate and select a min-width for the specified element. none no limit on the size of the box. max-content the intrinsic preferred min-width. min-content the intrinsic minimum min-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). ...
...-content the intrinsic preferred min-width. min-content the intrinsic minimum min-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). ...
...And 3 more matches

perspective-origin - CSS: Cascading Style Sheets
x-position y-position; /* when both x-position and y-position are keywords, the following is also valid */ perspective-origin: y-position x-position; /* global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset; values x-position indicates the position of the abscissa of the vanishing point. 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. the value may be negative. left, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. right, a keyword being a shortcut for the 100% percentage value. y-position indicates the position of the ordinate of the vanishing point. it...
...value or relative to the width of the element. the value may be negative. left, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. right, a keyword being a shortcut for the 100% percentage value. y-position indicates the position of the ordinate of the vanishing point. it can have one of the following values: <length-percentage> indicating the position as an absolute length value or relative to the height of the element. the value may be negative. top, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. bottom, a keyword being a shortcut for the 100% percentage value. formal definition initial value50% 50%applies totransformable elementsinhe...
...dicating the position as an absolute length value or relative to the height of the element. the value may be negative. top, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. bottom, a keyword being a shortcut for the 100% percentage value. ...
...And 3 more matches

<position> - CSS: Cascading Style Sheets
one or two keywords, with optional offsets. the keyword values are center, top, right, bottom, and left. each keyword represents either an edge of the element's box or the center line between two edges. depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges. if specified, an offset can be either a relative <percentage> value or an absolute <length> value. positive values are offset towards the right or the bottom, whichever is appropriate. negative values are offset in the opposite directions. if only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center. /* 1-value syntax */ keyword /* either the horizontal or vertical pos...
...this is not allowed in other properties that use <position>. interpolation when animated, a point's abscissa and ordinate values are interpolated indepe...
...this is not allowed in other properties that use <position>. interpolation when animated, a point's abscissa and ordinate values are interpolated independently. however, because the speed of the interpolat...
...And 3 more matches

row-gap (grid-row-gap) - CSS: Cascading Style Sheets
ll request. css grid layout initially defined the grid-row-gap property. this prefixed property is being replaced by row-gap. however, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the interactive example above. ...
...however, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the interactive example above. 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. ...
... 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. ...
...And 3 more matches

scroll-snap-destination - CSS: Cascading Style Sheets
ion: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
... 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> ]? ...
...ative 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> ]? ...
...And 3 more matches

scroll-snap-points-x - CSS: Cascading Style Sheets
oll-snap-points-x: none; /* repeating snap points */ scroll-snap-points-x: repeat(400px); /* global values */ scroll-snap-points-x: inherit; scroll-snap-points-x: initial; scroll-snap-points-x: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. ...
...-points-x: initial; scroll-snap-points-x: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
...ts. elements within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
...And 3 more matches

scroll-snap-points-y - CSS: Cascading Style Sheets
oll-snap-points-y: none; /* repeated snap points */ scroll-snap-points-y: repeat(400px); /* global values */ scroll-snap-points-y: inherit; scroll-snap-points-y: initial; scroll-snap-points-y: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. ...
...points-y: initial; scroll-snap-points-y: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
...ts. elements within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. ...
...And 3 more matches

transform-origin - CSS: Cascading Style Sheets
lues, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. if two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical 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. three-value syntax: the first two values are the same as for the two-value syntax. the thir...
...t 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. three-value syntax: the first two values are the same as for the two-value syntax. the third value must be a <length>. it always represents the z offset. values x-offset is a <length> or a <percentage> describing how far from the left edge of the box the origin of the transform is set. offset-keyword is one of the left, right, top, bottom, or center keyword describing the corresponding offset. y-offset is a <length> or a <percentage> describing how far from the top edge of the box the origin of the transform is set. x-offset-keyword is one of the left, right, or center keyword describ...
...rom the top edge of the box the origin of the transform is set. x-offset-keyword is one of the left, right, or center keyword describing how far from the left edge of the box the origin of the transform is set. y-offset-keyword is one of the top, bottom, or center keyword describing how far from the top edge of the box the origin of the transform is set. ...
...And 3 more matches

vertical-align - CSS: Cascading Style Sheets
inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements. 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. values for inline elements parent-relative values these values vertically align the element relative to its parent element: baseline aligns the baseline of the element with the baseline...
...top aligns the top of the element with the top of the parent element's font. text-bottom aligns the bottom of the element with the bottom of the parent element's font. middle aligns the middle of the element with the baseline plus half the x-height of the parent. <length> aligns the baseline of the element to the given length above the baseline of its parent. a negative value is allowed. <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. a negative value is allowed. line-relative values the following values vertically align the element relative to the entire line: top aligns the top of the element and its descendants with the top of the entire line. bottom aligns...
...lement relative to the entire line: top aligns the top of the element and its descendants with the top of the entire line. bottom aligns the bottom of the element and its descendants with the bottom of the entire line. for elements that do not have a baseline, the bottom margin edge is used instead. 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. top aligns the top padding edge of the cell with the top of the row. middle centers the padding box of the cell within the row. bottom aligns the bottom padding edge of the cell with the bottom of the row. negative values are allowed. formal definition initial valuebaselineap...
...And 3 more matches

Content type - SVG: Scalable Vector Graphics
icating digits, not by adding zeros. for example, #fb0 expands to #ffbb00. this ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the display. 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 ")". an rgb start-function is the case-insensitive string "rgb(", for example "rgb(" or "rgb(". for compatibility, the all-lowercase form "rgb(" is preferred. the integer value 255 corresponds to 100%, and to f or ff in the hexadecimal notation: rgb(255,255,255) = rgb(100%,100%,100%) = #fff. white space characters are allowed around the numerical values. all rgb colors are ...
...hether defined in svg1.1 or in css2, the length identifier, if specified, must be in lower case. when lengths are used in an svg attribute, a <length> is instead defined as follows: length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")? the unit identifiers in such <length> values must be in lower case. 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. two common cases are: when a percentage length value represents a percentage of the viewport width or height when a percentage length value represents a percentage of the bounding box width or height on a given object. in the svg dom, <length> ...
...0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. paint <paint> the values for properties fill and stroke are specifications of the type of paint to use when filling or stroking a given graphics element. the available options and syntax for <paint> are described in specifying paint. within the svg dom, <paint> values are represented using svgpaint objects. percentage <percentage> percentages are specified as a number followed by a "%" character: percentage ::= number "%" note that the definition of <number> depends on whether the percentage is specified in a stylesheet or in an attribute that is not also a presentation attribute. percentage values are always relative to another value (for example, a length). each attribute or property that allo...
...And 3 more matches

Table Layout Strategy - Archive of obsolete content
fixed layout counter part. in the following the basic table layout strategy is discussed. the functionality is distributed over a large number of subroutines as shown in the chart below. 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. and the desired width - des the width the content could fill without any linebreaks. cells can be members of colspans. these colspans have to distribute their space to the columns they include. this information is ho...
...ne des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. ...
...ding #define fix 2 // fixed width either from the content or cell, col, etc. ...
...And 2 more matches

-ms-scrollbar-3dlight-color - Archive of obsolete content
epends on user agentapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the top and left edges of the scroll box and scroll arrows of the scroll bar. ...
...n typediscrete syntax values <color> the color of the top and left edges of the scroll box and scroll arrows of the scroll bar. ...
...oll box and scroll arrows of the scroll bar. ...
...And 2 more matches

-ms-scrollbar-arrow-color - Archive of obsolete content
he arrow elements of a scroll arrow. initial valuebuttontextapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the scroll arrows of the scroll bar. ...
...itedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the scroll arrows of the scroll bar. ...
...olor of the scroll arrows of the scroll bar. ...
...And 2 more matches

-ms-scrollbar-base-color - Archive of obsolete content
ments of a scroll bar. initial valuedepends on user agentapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the base color of the main elements of a scroll bar. ...
...dyescomputed valueas specifiedanimation typediscrete syntax values <color> the base color of the main elements of a scroll bar. ...
... color of the main elements of a scroll bar. ...
...And 2 more matches

-ms-scrollbar-darkshadow-color - Archive of obsolete content
cifies the color of a scroll bar's gutter. initial valuethreeddarkshadowapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the scroll bar's gutter. ...
...lementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the scroll bar's gutter. ...
...or> the color of the scroll bar's gutter. ...
...And 2 more matches

-ms-scrollbar-face-color - Archive of obsolete content
box and scroll arrows of a scroll bar. initial valuethreedfaceapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the scroll box and scroll arrows. ...
...heritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the scroll box and scroll arrows. ...
...e color of the scroll box and scroll arrows. ...
...And 2 more matches

-ms-scrollbar-highlight-color - Archive of obsolete content
applies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar. ...
...ax values <color> the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar. ...
... box, and the scroll arrows of a scroll bar. ...
...And 2 more matches

-ms-scrollbar-shadow-color - Archive of obsolete content
uethreeddarkshadowapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. ...
...typediscrete syntax values <color> the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. ...
...croll box and scroll arrows of a scroll bar. ...
...And 2 more matches

-ms-scrollbar-track-color - Archive of obsolete content
pecifies the color of the track element of a scrollbar. initial valuescrollbarapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the track element. ...
...oall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values <color> the color of the track element. ...
... <color> the color of the track element. ...
...And 2 more matches

Sizing items in CSS - Learn web development
v> from the example above — we can give it specific width and height values, and it will now have that size no matter what content is placed into it. as we discovered in our previous lesson on overflow, a set height can cause content to overflow if there is more content than the element has space to fit inside it. ...
...lues, and it will now have that size no matter what content is placed into it. as we discovered in our previous lesson on overflow, a set height can cause content to overflow if there is more content than the element has space to fit inside it. 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. in the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container. this is...
...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. in the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container. this is because percentages resolve against the size of the containing block. with no percentage applied our <div> would take up 100% of the available space, as it is a block level element. if we give it a percentage width, this becomes a percentage of the space it would normally fill. percentage margins and padding if you set margins and padding as a percentage, you may notice some strange behavior. in the below exam...
...And 2 more matches

JS_GetGCParameter
jsgc_max_malloc_bytes / "maxmallocbytes" number of js_malloc bytes before last ditch gc. jsgc_max_nursery_bytes / "maxnurserybytes" maximum size the nursery may grow...
...c_high_frequency_low_limit / "highfrequencylowlimit" controls for dynamic heap growth. when the gc is in "high frequency" mode (see above) then, the heap will be allowed to grow between collections according to these four parameters. see zoneheapthreshold::computezoneheapgrowthfactorforheapsize in gc.cpp for the details. 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. jsgc_dynamic_heap_growth / "dynami...
...if true, it is determined based on whether gcs are high- or low- frequency. ...
...And 2 more matches

nsIMsgSearchTerm
possible values: * plugin filt...
...possible values: * plugin filter imapflag user whitelist * @return ...
...possible values: * plugin filter imapflag user whitelist * @return true if matches ...
...And 2 more matches

nsISelectionPrivate
e beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results); native code only! 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 setpresshell(in nsipresshell apresshell); native code only! void settextrangestyle(in nsidomrange range, in consttextrangestyleref textrangestyle); native code only! void startbatchchanges(); wstring tostringwithformat(in string formattype, in unsigned long...
... tableselection_* constants. "none" means a table element is not selected. removeselectionlistener() void removeselectionlistener( in nsiselectionlistener listenertoremove ); parameters listenertoremove scrollintoview() scrolls a region of the selection, so that it is visible in the scrolled view. 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). aissynchronous when true, scrolls the selection into view before returning. if false, posts a request which is processed at some point after the method returns. avpercent how to align the frame vertically. a value of 0 means ...
...the selection into view before returning. if false, posts a request which is processed at some point after the method returns. avpercent how to align the frame vertically. a value of 0 means the frame's upper edge is aligned with the top edge of the visible area. a value of 100 means the frame's bottom edge is aligned with the bottom edge of the visible area. for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area. a value of 50 centers the frame vertically. a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible vertically (if possible). ahpercent how to align the frame horizontally. a value of 0 means the frame's left edge is aligned with the left edge of the visible area. a valu...
...And 2 more matches

Element.querySelectorAll() - Web APIs
g one element object for each descendant node that matches at least one of the specified selectors. note: if the specified selectors include a css pseudo-element, the returned list is always empty. exceptions syntaxerror the syntax of the specified selectors string is not valid. ...
...matches at least one of the specified selectors. note: if the specified selectors include a css pseudo-element, the returned list is always empty. exceptions syntaxerror the syntax of the specified selectors string is not valid. ...
...ote: if the specified selectors include a css pseudo-element, the returned list is always empty. exceptions syntaxerror the syntax of the specified selectors string is not valid. ...
...And 2 more matches

Intersection Observer API - Web APIs
pecify null. whether you're using the viewport or some other element as the root, the api works the same way, executing a callback function you provide whenever the visibility of the target element changes so that it crosses desired amounts of intersection with the root. the degree of intersection between the target element and its root is the intersection ratio. this is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0. creating an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: let options = { root: document.queryselector('#scrollarea'), rootmargin: '0px', threshold: 1.0 } let observer = n...
... callback is invoked. it has the following fields: root the element that is used as the viewport for checking visibility of the target. must be the ancestor of the target. defaults to the browser viewport if not specified or if null. rootmargin margin around the root. can have values similar to the css margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). the values can be percentages. this set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. defaults to all zeros. 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. if you only want to detect when visibility passes the 50% mark, you can use a value of ...
...ection root's bounding box to create the final intersection root bounds (which are disclosed in intersectionobserverentry.rootbounds when the callback is executed). thresholds rather than reporting every infinitesimal change in how much a target element is visible, the intersection observer api uses thresholds. when you create an observer, you can provide one or more numeric values representing percentages of the target element which are visible. then, the api only reports changes to visibility which cross these thresholds. for example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. when the callback is invoked, it receives a ...
...And 2 more matches

Web applications and ARIA FAQ - Accessibility
interface toolkits, including: dojo/dijit jquery ui fluid infusion google closure google web toolkit bbc glow yahoo! user interface library (yui) for more information about javascript toolkit accessibility: steve faulkner's wai-aria implementation in javascript ui libraries can you show me an example of aria in action? sure. 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. unfortunately, there isn't a more semantic tag available to developers in html 4, so we need to include aria roles and properties. these are specified by adding attributes to the element. in this example, the role="progressbar" attribute ...
...e aria-valuemin and aria-valuemax attributes specify the minimum and maximum values for the progress bar, and the aria-valuenow describes the current state of it. along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. ...
...cument.getelementbyid("percent-loaded"); // set its aria roles and states, so that assistive technologies know what kind of widget it is. progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-valuemax", 100); // create a function that can be called at any time to update the value of the progress bar. function updateprogress(percentcomplete) { progressbar.setattribute("aria-valuenow", percentcomplete); } will adding aria change my page styles or behavior? no, aria is only made available to assistive technology apis, and doesn't affect native browser functionality with respect to the dom or styling. from the browser's point of view, the native html defines the semantic meaning and behavior of an element, with aria attribu...
...And 2 more matches

-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomright css property can be used to round the bottom-right corner of an element's outline. syntax the value of -moz-outline-radius-bottomright is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <length>. ...
... be used to round the bottom-right corner of an element's outline. syntax the value of -moz-outline-radius-bottomright is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <length>. <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. ...
...ell. values <length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <length>. <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. ...
...And 2 more matches

-moz-outline-radius - CSS: Cascading Style Sheets
if a single value is set, it applies to all 4 corners. if two values are set, the first one applies to the top-left and bottom-right corners and the second one...
... if a single value is set, it applies to all 4 corners. ...
... if a single value is set, it applies to all 4 corners. ...
...And 2 more matches

-webkit-text-fill-color - CSS: Cascading Style Sheets
or: unset; syntax values <color> the foreground fill color of the element's text content. ...
...content. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

-webkit-text-stroke-color - CSS: Cascading Style Sheets
initial; -webkit-text-stroke-color: unset; syntax values <color> the color of the stroke. ...
... stroke. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

max-height - CSS: Cascading Style Sheets
the max-height css descriptor specifies the maximum height of the viewport of a document defined via the @viewport at-rule. the height will initially be set as close as possible to the initial viewport height considering the maximum height constraint. ...
...se as possible to the initial viewport height considering the maximum height constraint. 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. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
...ht: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
...And 2 more matches

max-width - CSS: Cascading Style Sheets
the max-width css descriptor specifies the maximum width of the viewport of a document defined via the @viewport at-rule. by default, the width is set as close as possible to the initial viewport considering the maximum width constraint. ...
...s set as close as possible to the initial viewport considering the maximum width constraint. 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. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
...h: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
...And 2 more matches

min-height - CSS: Cascading Style Sheets
the min-height css descriptor specifies the minimum height of the viewport of a document defined via the @viewport at-rule. the height will initially be set as close as possible to the initial viewport height considering the minimum height constraint. ...
...se as possible to the initial viewport height considering the minimum height constraint. 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. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
...ht: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. ...
...And 2 more matches

min-width - CSS: Cascading Style Sheets
the min-width css descriptor specifies the minimum width of the viewport of a document defined via @viewport. by default, min-width is set as close as possible to the initial viewport considering the minimum width constraint. ...
...is set as close as possible to the initial viewport considering the minimum width constraint. 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. <length> a non-negative absolute or relative length. <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. must be non-negative. ...
...n-width: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <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. must be non-negative. ...
...And 2 more matches

width - CSS: Cascading Style Sheets
the first value will be set to the min-width and the second value will be set max-width. syntax /* an example with one viewport value: */ @viewport { width: 320px; } /* an example with two viewport values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
... will be set to the min-width and the second value will be set max-width. syntax /* an example with one viewport value: */ @viewport { width: 320px; } /* an example with two viewport values: */ @viewport { width: 320px, 120px; } values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. ...
... other css descriptors' values. <length> a non-negative absolute or relative length. <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. must be non-negative. ...
...And 2 more matches

CSS reference - CSS: Cascading Style Sheets
ax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...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...
...tate()hyphensi<ident><image>image()image-orientationimage-renderingimage-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-sourcem...
...And 2 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> =...
...st()> = 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-valu...
...b()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ...
...And 2 more matches

background-color - CSS: Cascading Style Sheets
criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuetransparentapplies toall elements. ...
...entapplies toall elements. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

background-position-x - CSS: Cascading Style Sheets
the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
... center aligns the center of the background image with the center of the background position layer. right aligns the right edge of the background image with the right edge of the background position layer. <length> the offset of the given background image's left vertical edge from the background position layer's left vertical edge. (some browsers allow assigning the right edge for offset). <percentage> the offset of the given background image's horizontal position relative to the container. a value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image. formal de...
...position relative to the container. a value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image. ...
...And 2 more matches

background-position-y - CSS: Cascading Style Sheets
the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...r of the background image with the vertical center of the background position layer. bottom aligns the bottom edge of the background image with the bottom edge of the background position layer. <length> the offset of the given background image's horizontal edge from the corresponding background position layer's top horizontal edge. (some browsers allow assigning the bottom edge for offset). <percentage> the offset of the given background image's vertical position relative to the container. a value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the bottom edge of the background image is aligned with the bottom edge of the container, thus a value of 50% vertically centers the background image. formal defini...
...al position relative to the container. a value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the bottom edge of the background image is aligned with the bottom edge of the container, thus a value of 50% vertically centers the background image. ...
...And 2 more matches

<basic-shape> - CSS: Cascading Style Sheets
. syntax the <basic-shape> data type is defined with one of the basic shape functions listed below. when creating a shape, the reference box is defined by each property that uses <basic-shape> values. the coordinate system for the shape has its origin at the top-left corner of the reference box, with the x-axis running to the right and the y-axis running downwards. all the lengths expressed in percentages are resolved from the used dimensions of the reference box. shape functions the following shapes are supported. all <basic-shape> values use functional notation and are defined here using the value definition syntax. inset() inset( <shape-arg>{1,4} [round <border-radius>]? ) defines an inset rectangle. when all of the first four arguments are supplied they represent the top, right...
...rthand syntax. a pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. for this specification, this results in an empty float area. circle() circle( [<shape-radius>]? [at <position>]? ) the <shape-radius> argument represents r, the radius of the circle. negative values are invalid. a percentage value here is resolved from the used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2). the <position> argument defines the center of the circle. this defaults to center if omitted. ellipse() ellipse( [<shape-radius>{2}]? [at <position>]? ) the <shape-radius> arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. negative value...
...he used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2). the <position> argument defines the center of the circle. this defaults to center if omitted. ellipse() ellipse( [<shape-radius>{2}]? [at <position>]? ) the <shape-radius> arguments represent rx and ry, the x-axis and y-axis radii of the ellipse, in that order. negative values for either radius are invalid. 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. the position argument defines the center of the ellipse. this defaults to center if omitted. polygon() polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) <fill-rule> represents the filling rule used to determine the interior of the polygon. possible value...
...And 2 more matches

block-size - CSS: Cascading Style Sheets
it corresponds to either the width or the height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. a rela...
...ize: 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. a related property is inline-size, which defines the other dimension of the element. ...
...riting 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. a related property is inline-size, which defines the other dimension of the element. ...
...And 2 more matches

border-left-color - CSS: Cascading Style Sheets
ngle value. values <color> the color of the left border. formal definition initial valuecurrentcolorapplies toall elements. ...
...al valuecurrentcolorapplies toall elements. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

border-right-color - CSS: Cascading Style Sheets
gle value. values <color> the color of the right border. formal definition initial valuecurrentcolorapplies toall elements. ...
...al valuecurrentcolorapplies toall elements. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

border-top-color - CSS: Cascading Style Sheets
single value. values <color> the color of the top border. formal definition initial valuecurrentcolorapplies toall elements. ...
...al valuecurrentcolorapplies toall elements. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

bottom - CSS: Cascading Style Sheets
en both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. 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. for relatively positioned elements, the distance that the ...
...tom: 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. for relatively positioned elements, the distance that the element is moved above its normal position. <percentage> a <percentage> of the containing block's height. auto specifies that: for absolutely positioned elements, the position of the element is based on the top property, while height: auto is treated as a height based on the content; or if top is also auto, the element is positioned where it should vertically be positioned if it were a static element. for relatively positioned elements, th...
...lement. for relatively positioned elements, the distance of the element from its normal position is based on the top property; or if top is also auto, the element is not moved vertically at all. inherit specifies that the value is the same as the computed value from its parent element (which might not be its containing block). ...
...And 2 more matches

box-shadow - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueany length made absolute; any specified color computed; otherwise as specifiedanimation typea shadow list formal syntax none | <shadow>#where <shadow> = inset? ...
...y specified color computed; otherwise as specifiedanimation typea shadow list formal syntax none | <shadow>#where <shadow> = inset? && <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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
... ...
...And 2 more matches

color - CSS: Cascading Style Sheets
tedyescomputed valueif the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. ...
...orresponding one. if it isn't, it will be the rgb() corresponding one. ...
...ord 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

<color> - CSS: Cascading Style Sheets
onal. the three-digit notation (#rgb) is a shorter version of the six-digit form (#rrggbb). for example, #f09 is the same color as #ff0099. likewise, the four-digit rgb notation (#rgba) is a shorter version of the eight-digit form (#rrggbbaa). for example, #0f38 is the same color as #00ff3388. 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). functional notation: rgb[a](r g b[ / a]) css colors level 4 adds support for space-separated values in the functional notation. hsl colors the hsl color model defines a given color according to its hue, saturation, and lightnes...
... turns in css color module level 4. when written as a unitless <number>, it is interpreted as degrees, as specified in css color module level 3. by definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. as an <angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc. s (saturation) and l (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is “normal.” a (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity). functional notation: hsl[a](h s l[ / a]) css colors level 4 adds support for space-separated values in th...
...ample shows the many ways in which a single color can be created with the various rgb color syntaxes. /* these syntax variations all specify the same color: a fully opaque hot pink. */ /* hexadecimal syntax */ #f09 #f09 #ff0099 #ff0099 /* functional syntax */ rgb(255,0,153) rgb(255, 0, 153) rgb(255, 0, 153.0) rgb(100%,0%,60%) rgb(100%, 0%, 60%) rgb(100%, 0, 60%) /* error! don't mix numbers and percentages. */ rgb(255 0 153) /* hexadecimal syntax with alpha value */ #f09f #f09f #ff0099ff #ff0099ff /* functional syntax with alpha value */ rgb(255, 0, 153, 1) rgb(255, 0, 153, 100%) /* whitespace syntax */ rgb(255 0 153 / 1) rgb(255 0 153 / 100%) /* functional syntax with floats value */ rgb(255, 0, 153.6, 1) rgb(1e2, .5e1, .5e0, +.25e2%) rgb transparency variations /* hexadecimal syntax */...
...And 2 more matches

gap (grid-gap) - CSS: Cascading Style Sheets
examples and send us a pull request. css grid layout initially defined the grid-gap property. this prefixed property is being replaced by gap. however, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above. ...
...r, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above. 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'> followed optionally by a value for <'column-gap'>. if <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>. <'row-gap'> and <'column-gap...
...%; /* 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'> followed optionally by a value for <'column-gap'>. if <'column-gap'> is omitted, it’s set to the same value as <'row-gap'>. <'row-gap'> and <'column-gap'> are each specified as a <length> or a <percentage>. values <length> is the width of the gutter separating the grid lines. <percentage> is the width of the gutter separating the grid lines, relative to the dimension of the element. formal definition initial valueas each of the properties of the shorthand:row-gap: normalcolumn-gap: normalapplies tomulti-column elements, flex containers, grid containersinheritednocomputed valueas each ...
...And 2 more matches

margin-bottom - CSS: Cascading Style Sheets
auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-cap...
...; /* 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>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. ...
...gin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. ...
...And 2 more matches

margin-left - CSS: Cascading Style Sheets
auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both aut...
...n-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>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this table summarizes the different cases: value of display ...
...lex any any 0, except if there is any positive horizontal free space. in this case, it is evenly distributed to all horizontal auto margins. flexbox layout mode formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. ...
...And 2 more matches

margin-right - CSS: Cascading Style Sheets
auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both au...
...t: 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>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this table summarizes the different cases: value of display ...
...lex any any 0, except if there is any positive horizontal free space. in this case, it is evenly distributed to all horizontal auto margins. flexbox layout mode formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. ...
...And 2 more matches

margin-top - CSS: Cascading Style Sheets
auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-cap...
... 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>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. ...
...gin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. ...
...And 2 more matches

mask-size - CSS: Cascading Style Sheets
<bg-size> can be specified in one of three ways: using the keyword contain using the keyword cover using width and height values to specify a size using width and height, you can supply one or two values: if only one value is given it sets the width, with the height set to auto. if two values are given, the first sets width and the second sets height. each value can be a <length>, a <percentage>, or auto. values <length> a <length> value scales the mask image to the specified length in the corresponding dimension. negative lengths are not allowed. <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. the mask positioning area is, by defaul...
... auto a keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion. contain a keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). the image is letterboxed within the container. ...
...s no such intrinsic dimension, use the corresponding dimension of the mask positioning area. ...
...And 2 more matches

minmax() - CSS: Cascading Style Sheets
-breadth> values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* <inflexible-breadth>, <fixed-breadth> values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px) a function taking two parameters, min and max. ...
...0px) a function taking two parameters, min and max. each parameter can be a <length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto. if max < min, then max is ignored and minmax(min,max) is treated as min. as a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum. values <length> a non-negative length. <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...
... <flex> a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. ...
...And 2 more matches

outline-color - CSS: Cascading Style Sheets
lor value, if the value is translucent, the computed value will be the rgba() corresponding one. if it isn't, it will be the rgb() corresponding one. ...
...ing one. if it isn't, it will be the rgb() corresponding one. ...
...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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

text-decoration-color - CSS: Cascading Style Sheets
criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuecurrentcolorapplies toall elements. ...
...lorapplies toall elements. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

text-emphasis-color - CSS: Cascading Style Sheets
r> defines the color of the emphasis marks. if no color is present, it defaults to currentcolor. ...
...entcolor. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...And 2 more matches

translate() - CSS: Cascading Style Sheets
the translate() css function repositions an element in the horizontal and/or vertical directions. its result is a <transform-function> data type. this transformation is characterized by a two-dimensional vector. its coordinates define how much the element moves in each direction. 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. the ordinate (vertical, y-coordinate) of the translating vector will be ...
...ranslate(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. the ordinate (vertical, y-coordinate) of the translating vector will be set to 0. for example, translate(2) is equivalent to translate(2, 0). a percentage value refers to the width of the reference box defined by the transform-box property. ...
...h-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector. the ordinate (vertical, y-coordinate) of the translating vector will be set to 0. for example, translate(2) is equivalent to translate(2, 0). 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. a percentage as first value refers to the width, as second part to the height of the reference box defined by the transform-box property. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 carte...
...And 2 more matches

word-spacing - CSS: Cascading Style Sheets
s the length of space between words and between tags. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...rd-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. <length> specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font. <percentage> specifies extra spacing as a percentage of the affected character’s advance width. examples html <div id="mozdiv1">here are many words...</div> <div id="mozdiv2">...and many more!</div> css #mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to ...
...ferent font families have different character widths. there is no one value that can ensure all font families automatically maintain their legibility. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies toall elements. ...
...And 2 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
acity). however, instead of using a string, the color is defined using the css function rgb(). this function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel. 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%. alpha the alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). you can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0. for example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%). hsl functional notation designers and artists often prefer to work using the h...
...fer to work using the hsl (hue/saturation/luminosity) color method. on the web, hsl colors are represented using hsl functional notation. the hsl() css function is very similar to the rgb() function in usage otherwise. figure 1. an hsl color cylinder. hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. 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. as the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). image courtesy of user sharkd on wikipedia, distributed under the cc by-sa 3.0 license. the value of the hue (h) component of an hsl c...
...ough yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. the value can be specified in any <angle> unit supported by css, including degrees (deg), radians (rad), gradians (grad), or turns (turn). but this doesn't control how vivid or dull, or how bright or dark the color is. the saturation (s) component of the color specifies what percentage of the final color is comprised of the specified hue. the rest is defined by the grey level provided by the luminance (l) component. think of it like creating the perfect paint color: you start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. this is the hue (h) component: a value representi...
...And 2 more matches

Intl.NumberFormat() constructor - JavaScript
play the sign for the number; defaults to "auto" "auto" sign display for negative numbers only "never" never display sign "always" always display sign "exceptzero" sign display for positive and negative numbers, but not zero style the formatting style to use , the default is "decimal". "decimal" for plain number formatting. "currency" for currency formatting. "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. a subset of units from the full list was selected for use in ecmascript. pairs of simple units can be concatenated with "-per-" to make a compound unit. there is no default value; if the style is "unit", the unit...
... and maximumsignificantdigits in the other. if at least one property from the second group is defined, then the first group is ignored. minimumintegerdigits the minimum number of integer digits to use. possible values are from 1 to 21; the default is 1. minimumfractiondigits the minimum number of fraction digits to use. 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). maximumfractiondigits the maximum number of fraction digits to use. possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency ...
...tiondigits the maximum number of fraction digits to use. 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. minimumsignificantdigits the minimum number of significant digits to use. possible values are from 1 to 21; the default is 1. maximumsignificantdigits the maximum number of significant digits to use. possible values are from 1 to 21; the default is 21. examples basic usage in basic use without specifying a locale, a formatte...
...And 2 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
bject is aligned along the font baseline with respect to its parent. value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; animatable: yes baseline-shift it allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. value: auto|baseline|super|sub|<percentage>|<length>|inherit; animatable: yes clip deprecated it defines what portion of an element is visible. value: auto|<shape()>|inherit; animatable: yes clip-path it binds the element it is applied to with a given <clippath> element. value: none|<funciri>|inherit; animatable: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> ...
...able-background deprecated since svg 2 it tells the browser how to manage the accumulation of the background image. value: accumulate|new|inherit; animatable: no fill it defines the color of the inside of the graphical element it applies to. value: <paint>; animatable: yes fill-opacity it specifies the opacity of the color or the content the current object is filled with. value: <number>|<percentage>; animatable: yes fill-rule it indicates how to determine what side of a path is inside a shape. value: nonzero|evenodd|inherit; animatable: yes filter it defines the filter effects defined by the <filter> element that shall be applied to its element. value: <funciri>|none|inherit; animatable: yes flood-color it indicates what color to use to flood the current filter primitive subregio...
...: <funciri>|none|inherit; animatable: yes flood-color it indicates what color to use to flood the current filter primitive subregion defined through the <feflood> or <fedropshadow> element. value: <color>; animatable: yes flood-opacity it indicates the opacity value to use across the current filter primitive subregion defined through the <feflood> or <fedropshadow> element. value: <number>|<percentage>; animatable: yes font-family it indicates which font family will be used to render the text of the element. value: see css font-family; animatable: yes font-size it specifies the size of the font. value: see css font-size; animatable: yes font-size-adjust it specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters...
...And 2 more matches

Backgrounds and borders - Learn web development
e have set the value to no-repeat so you will only see one star. try out the different values — repeat-x and repeat-y — to see what their effects are. sizing the background image in the example above, we have a large image that has ended up being cropped as it is larger than the element it is a background of. 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 also use keywords: cover — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. in this case, part of the image is likely to end up outside the box. contain — the browser will make the image the right size to fit inside the box. in this case, y...
... default background-position value is (0,0). the most common background-position values take two individual values — a horizontal value followed by a vertical value. ...
...so in the css below we are positioning the background 20px from the top and 10px fro...
...ons. there are a variety of styles that you can use for borders. in the example below we have used a different border style for the four sides of my box. play with the border style, width, and color to see how borders work. rounded corners rounding corners on a box is achieved by using the border-radius property and associated longhands which relate to each corner of the box. two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. in a lot of cases, you will only pass in one value, which will be used for both. for example, to make all four corners of a box have a 10px radius: .box { border-radius: 10px; } or to make the top right corner have a horizontal radius of 1em, and a vertical radius of 10%: .box { ...

Using the CSS Typed Object Model - Web APIs
we didn't declare a width or a height for the paragraph, both o...
...s: 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. we didn't declare a width or a height for the paragraph, both of which default to auto and therefore return a csskeywordvalue instead of a cssunitvalue. csskeywordvalues do not have a unit property, so in these cases our get().unit returns undefined. had the width or height been defined ...
... there are other types available: an <image> will return a cssimagevalue. a <color> would return a cssstylevalue. a transform returns a csstransformvalue. a custom property returns a cssunparsedvalue. you can use a cssunitvalue or csskeywordvalue to create other objects. ...
...he unitless <number> unit is number. we didn't declare a width or a height for the paragraph, both of which default to auto and therefore return a csskeywordvalue instead of a cssunitvalue. csskeywordvalues do not have a unit property, so in these cases our get().unit returns undefined. had the width or height been defined in a <length> or <percent>, the cssunitvalue unit would have been px or percent respectively. there are other types available: an <image> will return a cssimagevalue. a <color> would return a cssstylevalue. a transform returns a csstransformvalue. a custom property returns a cssunparsedvalue. you can use a cssunitvalue or csskeywordvalue to create other objects. for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordvalues, or on...

CanvasRenderingContext2D.filter - Web APIs
takes an iri pointing to an svg filter element, which may be embedded in an external xml file. blur() a css <length>. applies a gaussian blur to the drawing. it defines the value of the standard deviation to the gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. a value of 0 leaves the input unchanged. brightness() a css <percentage>. applies a linear multiplier to the drawing, making it appear brighter or darker. a value under 100% darkens the image, while a value over 100% brightens it. a value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. contrast() a css <percentage>. adjusts the contrast of the drawing. a value of 0% will create a drawing that is completely b...
...<length> for possible units. specifies the horizontal distance of the shadow. <offset-y>: see <length> for possible units. specifies the vertical distance of the shadow. <blur-radius>: the larger this value, the bigger the blur, so the shadow becomes bigger and lighter. negative values are not allowed. <color>: see <color> values for possible keywords and notations. grayscale() a css <percentage>. converts the drawing to grayscale. a value of 100% is completely grayscale. a value of 0% leaves the drawing unchanged. hue-rotate() a css <angle>. applies a hue rotation on the drawing. a value of 0deg leaves the input unchanged. invert() a css <percentage>. inverts the drawing. a value of 100% means complete inversion. a value of 0% leaves the drawing unchanged. opacity() a css <perc...
...converts the drawing to sepia. a value of 100% means completely sepia. a value of 0% leaves the drawing unchanged. none no filter is applied. ...
...converts the drawing to sepia. a value of 100% means completely sepia. a value of 0% leaves the drawing unchanged. none no filter is applied. initial value. examples to view these examples, make sure to use a browser that supports this feature; see the compatibility table below. ...

ARIA - Accessibility
er incorporated into html5, and developers should prefer using the correct semantic html element over using aria, if such an element exists. for instance, native elements have built-in keyboard accessibility, roles and states. however, if you choose to use aria, you are responsible for mimicking (the equivalent) browser behaviour in script. 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. unfortunately, there isn't a more semantic tag available to developers in html 4, so we need to include aria roles and properties. these are specified by adding attributes to the element. in this example, the role="progressbar" attribut...
...y the minimum and maximum values for the progress bar, and the aria-valuenow describes the current state of it and therefore must be kept updated with javascript. along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <div> in the dom. ...
...however, the accessibility gains it provides far outweigh any technical invalidity. in html5, all aria attributes validate. ...
...tates, // so that assistive technologies know what kind of widget it is. progressbar.setattribute("role", "progressbar"); progressbar.setattribute("aria-valuemin", 0); progressbar.setattribute("aria-valuemax", 100); // create a function that can be called at any time to update // the value of the progress bar. 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. however, the accessibility gains it provides far outweigh any technical invalidity. in html5, all aria attributes validate. the new landmark elements (<main>, <header>, <nav> etc) have built-in aria roles, so there is no need to duplicate them. support like any other web technology, the...

-moz-outline-radius-topright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topright css property can be used to round the top-right corner of an element's outline. syntax the value of -moz-outline-radius-topright is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a css <length>. ...
...perty can be used to round the top-right corner of an element's outline. syntax the value of -moz-outline-radius-topright is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a css <length>. <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. ...
...used as well. values <length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a css <length>. <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. ...
...e element, specified as a css <length>. <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. spe...

-webkit-tap-highlight-color - CSS: Cascading Style Sheets
bkit-tap-highlight-color: transparent; /* for removing the highlight */ syntax values a <color value>. ...
... a <color value>. ...
...omputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> specifications not part of any standard. apple has a description in the safari web content guide...

@keyframes - CSS: Cascading Style Sheets
gives more control over the intermediate steps of the animation sequence than transitions. syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the keyframe list. this must match the identifier production in css syntax. from a starting offset of 0%. to an ending offset of 100%. <percentage> a percentage of the time through the animation sequence at which the specified keyframe should occur. description javascript can access the @keyframes at-rule with the css object model interface csskeyframesrule. to use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. each @keyframes rule c...
...nce at which the specified keyframe should occur. description javascript can access the @keyframes at-rule with the css object model interface csskeyframesrule. to use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. 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. valid keyframe lists if a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the sta...
...mated in keyframe rules are ignored, but supported properties will still be animated. resolving duplicates if multiple keyframe sets exist for a given name, the last one encountered by the parser is used. @keyframes rules don't cascade, so animations never derive keyframes from more than one rule set. if a given animation time offset is duplicated, all keyframes in the @keyframes rule for that percentage are used for that frame. there is cascading within a @keyframes rule if multiple keyframes specify the same percentage values. when properties are left out of some keyframes properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. for example: @keyframes identifier { 0% { top: 0; left: 0; } ...
... specifications specification status comment css animationsthe definition of '@keyframes' in that specification. working draft ...

Layout and the containing block - CSS: Cascading Style Sheets
nt is always the content area of its parent, but that isn't necessarily true. let's investigate the factors that determine what an element's containing block is. effects of the containing block before learning what determines the containing block of an element, it's useful to know why it matters in the first place. the size and position of an element are often impacted by its containing block. 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. identifying the containing block the process for identifying the containing block depends entirely on the value of the element's position property: if the position ...
...or perspective a filter value other than none or a will-change value of filter (only works on firefox). a contain value of paint (e.g. contain: paint;) note: the containing block in which the root element (<html>) resides is a rectangle called the initial containing block. it has the dimensions of the viewport (for continuous media) or the page area (for paged media). 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. the width, left, right, padding, and m...
... some examples the html code for all our examples is: <body> <section> <p>this is a paragraph!</p> </section> </body> only the css is altered in each instance below. ...
...ining block is the <body> element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context. <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: inline; background: lightgray; } p { width: 50%; /* == half the body's width */ height: 200px; /* note: a percentage would be 0 */ background: cyan; } example 3 in this example, the paragraph's containing block is <section> because the latter's position is absolute. the paragraph's percentage values are affected by the padding of its containing block, though if the containing block's box-sizing value were border-box this would not be the case. <body> <section> <p>this is a paragraph!</p> </s...

background-size - CSS: Cascading Style Sheets
-size: inherit; background-size: initial; background-size: unset; the background-size property is specified in one of the following ways: using the keyword values contain or cover. using a width value only, in which case the height defaults to auto. using both a width and a height value, in which case the first sets the width and the second sets the height. each value can be a <length>, a <percentage>, or auto. to specify the size of multiple background images, separate the value for each one with a comma. values contain scales the image as large as possible without cropping or stretching the image. cover scales the image as large as possible without stretching the image. if the proportions of the image differ from the element, it is cropped either vertically or horizontally so th...
... stretching the image. if the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. auto scales the background image in the corresponding direction such that its intrinsic proportions are maintained. <length> stretches the image in the corresponding dimension to the specified length. negative values are not allowed. <percentage> stretches the image in the corresponding dimension to the specified percentage of the background positioning area. the background positioning area is determined by the value of background-origin (by default, the padding box). however, if the background's background-attachment value is fixed, the positioning area is instead the entire viewport. negative values are not allowed. intrinsic dim...
...dimension and an auto dimension with a <gradient>, because it's impossible to replicate rendering in versions of firefox prior to 8, and in browsers not implementing firefox 8's rendering, without knowing the exact size of the element whose background is being specified. formal definition initial valueauto autoapplies toall elements. ...
...t knowing the exact size of the element whose background is being specified. formal definition initial valueauto autoapplies toall elements. 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 images for examples. specifications specification status comment css backgrounds and borders module level 3the definition of 'background-size' in that specification. ...

border-image-slice - CSS: Cascading Style Sheets
negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. when two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices mea...
... are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values <number> represents an edge offset in pixels for raster images and coordinates for vector images. 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. fill preserves the middle image region and displays it like a background image, but stacked above the actual background. its width and height are sized to match the top and left image reg...
... vertical offsets. fill preserves the middle image region and displays it like a background image, but stacked above the actual background. its width and height are sized to match the top and left image regions, respectively. formal definition initial value100%applies toall elements, except internal table elements when border-collapse is collapse. ...
...t like a background image, but stacked above the actual background. its width and height are sized to match the top and left image regions, respectively. formal definition initial value100%applies toall elements, except internal table elements when border-collapse is collapse. 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. the source image for the borders is as follows: the diamonds ...

border-image-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
...width to all four sides. when two values are specified, the first width applies to the top and bottom, the second to the left and right. when three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom. when four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise). 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. must not be negative. <number> the width of the border, specified as a multiple of the corresponding border-width. must not be negative. auto the width of the border is made ...
... border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding border-image-slice. if the image does not have the required intrinsic dimension, the corresponding border-width is used instead. formal definition initial value1applies toall elements, except internal table elements when border-collapse is collapse. ...
...h is used instead. formal definition initial value1applies toall elements, except internal table elements when border-collapse is collapse. 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, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels. html <p>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ...

border-image - CSS: Cascading Style Sheets
ons understanding success criterion 1.1.1 | understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal table elements when border-collapse is collapse. ...
...nopercentagesas 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 percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax <'border-image-source'> | <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outse...
...er-image' in that specification. candidate recommendation initial definition initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal table elements when border-collapse is collapse. ...
...nopercentagesas 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 percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relative lengths converted into absolute lengthsanimation typediscrete ...

calc() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* property: calc(expression) */ width: calc(100% - 80px); the calc() function takes a single expression as its parameter, with the expression's result used as the value. ...
...be a <number>. / division. the right-hand side must be a <number>. the operands in the expression may be any <length> syntax value. you can use different units for each value in your expression, if you wish. you may also use parentheses to establish computation order when needed. notes the + and - operators must be surrounded by whitespace. 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. the * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended. division by zero results ...
... it is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses. ...
...o and fixed layout tables may be treated as if auto had been specified. it is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses. formal syntax calc( <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 calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example: h1 { font-size: calc(1.5rem + 3vw); } this ensures that text size will scale if the page is zoomed. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 ...

caret-color - CSS: Cascading Style Sheets
r of the caret. ...
...computed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...age>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

column-rule-color - CSS: Cascading Style Sheets
as a single <color> value. values <color> the color of the rule that separates columns. ...
...umns. ...
...mputed 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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? ...
...system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a blue column rule html <p>this is a bunch of text split into three columns. ...

max-block-size - CSS: Cascading Style Sheets
ontal). see the example in writing-mode, which shows the different writing modes in action. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... 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> defines the max-width as an absolute value. ...
...ck-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> defines the max-width as an absolute value. <percentage> defines the max-width as a percentage of the containing block's width. auto the browser will calculate and select a max-width for the specified element. none no limit on the size of the box. max-content the intrinsic preferred max-width. min-content the intrinsic minimum max-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-conte...
...dth the writing-mode values sideways-lr and sideways-rl were removed from the css writing modes level 3 specification late in its design process. they may be restored in level 4. the writing modes lr, lr-tb, rl, rb, and rb-tl are no longer allowed in html contexts; they may only be used in svg 1.x contexts. 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. everything...

offset-anchor - CSS: Cascading Style Sheets
the offset-anchor css property specifies the point inside the box of an element travelling along an offset-path that is actually moving along the path. ...
... x/y coordinate, to place an item relative to the edges of an element's box. it can be defined using one to four values. for more specifics, see the <position> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...
... using one to four values. for more specifics, see the <position> and background-position reference pages. note that the 3-value position syntax does not work for any usage of <position>, except for in background(-position). ...
...sition>, except for in background(-position). 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. each <div> is given the same offset-path (a horizontal line 200 pixels...

padding-bottom - CSS: Cascading Style Sheets
ve examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
...; 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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...ing as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...he padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. 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. working draf...

padding-left - CSS: Cascading Style Sheets
nteractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
...ding-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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...ing as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...he padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. 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. working draft no...

padding-right - CSS: Cascading Style Sheets
ractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
...ght: 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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...ing as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...he padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. 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. working draft ...

padding-top - CSS: Cascading Style Sheets
interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. an element's padding area is the space between its content and its border. note: the padding property can be used to set paddings on all four sides of an element with a single declaration. ...
...em; 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. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...ing as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. ...
...he padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. 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. working draft no cha...

repeating-radial-gradient() - CSS: Cascading Style Sheets
the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard keywords only, as some implementations have already dropped those older variants. <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. formal syntax repeating-radial-gradient( [[ circle || <length> ] [at ...
...rcentage 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. ...
...--------/\-----------------/ contour, size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...
... size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...

scrollbar-color - CSS: Cascading Style Sheets
ugh contrast. see techniques for wcag 2.0: g183: using a contrast ratio of 3:1. ...
...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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...age>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples coloring overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. gumbo beet greens corn soko endive gumbo gourd. pa...

text-decoration-thickness - CSS: Cascading Style Sheets
the text-decoration-thickness css property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline. 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. from-font if the font file includes information about a preferred thickness, use that value. if the font file doesn't include this information, behave as if auto was set, with the b...
...idth for the text decoration line. from-font if the font file includes information about a preferred thickness, use that value. if the font file doesn't include this information, behave as if auto was set, with the browser choosing an appropriate thickness. <length> specifies the thickness of the text decoration line as a <length>, overriding the font file suggestion or the browser default. <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. the browser must use a minimum of 1 device pixel. for a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a differ...
... value, and so therefore scales with changes in the font. the browser must use a minimum of 1 device pixel. for a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size. formal definition initial valueautoapplies toall elements. ...
...s constant across the whole box it is applied to, even if there are child elements with a different font size. formal definition initial valueautoapplies toall elements. ...

text-shadow - CSS: Cascading Style Sheets
noneapplies toall elements. ...
...yescomputed valuea color plus three absolute lengthsanimation typea shadow list formal syntax none | <shadow-t>#where <shadow-t> = [ <length>{2,3} && <color>? ]where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <...
...age>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

text-size-adjust - CSS: Cascading Style Sheets
the text-size-adjust css property controls the text inflation algorithm used on some smartphones and tablets. other browsers will ignore this property. /* 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. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. to map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the v...
...rge the text to make it more readable. when an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. the text-size-adjust property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it. syntax the text-size-adjust property is specified as none, auto, or a <percentage>. values none disables the browser's inflation algorithm. auto enables the browser's inflation algorithm. this value is used to cancel a none value previously set with css. <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 ...
...nables the browser's inflation algorithm. this value is used to cancel a none value previously set with css. <percentage> enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size. ...
...s inflation algorithm, specifying a percentage value with which to increase the font size. ...

stroke-width - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from str...
... browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. de...
... browser compatibility the compatibility table on this page is generated from structured data. ...
... browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

<rect> - SVG: Scalable Vector Graphics
, width, and height. the rectangles may have their corners rounded. html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. ...
...vg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. 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. ...
..." height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. 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. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes rx the horizontal corner radius of the rect. defaults to ry if it is specified. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the vertical corner radius of the rect. defaults to rx if it is specified. va...
...o; animatable: yes height the height of the rect. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes rx the horizontal corner radius of the rect. defaults to ry if it is specified. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes ry the vertical corner radius of the rect. defaults to rx if it is specified. value type: auto|<length>|<percentage> ; default value: auto; animatable: yes pathlength the total length of the rectangle's perimeter, in user units. value type: <number> ; default value: none; animatable: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id,...

<symbol> - SVG: Scalable Vector Graphics
ot" x="5" y="5" style="opacity:1.0" /> <use xlink:href="#mydot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#mydot" x="35" y="5" style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol. 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: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid meet; animatable: yes refx this attribute determines the ...
...ribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid meet; animatable: yes refx this attribute determines the x coordinate of the reference point of the symbol. 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. value type: <list-of-numbers> ; default value: none; animatable: yes width ...
...ibute 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. value type: <list-of-numbers> ; default value: none; animatable: yes width this attribute determines the width of the symbol. value type: <length>|<percentage> ; default value: auto; animatable: yes x this attribute determines the x coordinate of the symbol. value type: <length>|<percentage> ; default value: 0; animatable: yes y this attribute determines the y coordinate of the symbol. ...
...-numbers> ; default value: none; animatable: yes width this attribute determines the width of the symbol. value type: <length>|<percentage> ; default value: auto; animatable: yes x this attribute determines the x coordinate of the symbol. value type: <length>|<percentage> ; default value: 0; animatable: yes y this attribute determines the y coordinate of the symbol. ...

Index - Archive of obsolete content
to capture the maximum private bytes memory (high water mark) for a test. by default each test is run a single time. to run each test multiple times use the --iterations flag. when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated. the 95% confidence interval is the calculated percentage of the mean value to fall within 95% of the measured results. for example if the mean is 100 and the 95% confidence interval is 2%, 95% of the expected values should fall between 98 and 102. to compare two vms against each other export avm2=<path to 2nd vm> or use --avm2=<path to 2nd vm>. the percentage difference is calculated between the two vms. see the --help usage for more details abo...
...you may also place the script inline inside the opening and closing script tags. 1902 scrollbar xul elements, xul reference when a container's contents which are larger that the size of the container, scroll bars may be placed at the side of the container to allow the user to scroll around in the container. the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. 1903 scrollbox needscontent, reference, référence(2), xul elements, xul reference a box that has additional functions that can be used to scroll the content. note that a scrollbox doesn't cause...
...e if the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. otherwise it's 0. 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. otherwise it's 0. 2169 -moz-touch-enabled -moz-touch-enabled, @media, css, css:mozilla extensions, non-standard, media feature if the device supports touch events (for a touch screen), this is 1. otherwise it's 0. 2170 -moz-windows-accent-color-in-titlebar -moz-windows-accent-color-in-titlebar, @media, css, css:mo...

Browser Feature Detection - Archive of obsolete content
among the methods of browser detection, many people recommend using the existence of specific properties or methods in a browser's dom to detect the browser type and whether it supports a given operation. 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. this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense. therefore, given that it's also badly out of date, it's been archived. you should not rely on any information here. browser sniffing via api name detection the following tables list the api names defined for ...
...this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense. therefore, given that it's also badly out of date, it's been archived. you should not rely on any information here. 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. it is clear from these test results that netscape 7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and opera have sufficient dom css 1 and dom level 1 & 2 document property and method...
...; 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-snap-points - Archive of obsolete content
the -ms-content-zoom-snap-points css property is a microsoft extension that specifies where zoom snap-points are located. 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. snaplist( <percentage># ) specifies the position of individual snap-points as a comma-separated list of percentages, each of which represents a zoom factor. i...
...in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the second selector, each snap-point is listed separately—100%, 200%, 300%, and so on. ...
...centages, each of which represents a zoom factor. if any value specified is less than that specified by the -ms-content-zoom-limit-min property, the value of -ms-content-zoom-limit-min is used. if any value specified is greater than that specified by the -ms-content-zoom-limit-max property, the value of -ms-content-zoom-limit-max is used. formal syntax snapinterval( <percentage>, <percentage> ) | snaplist( <percentage># ) examples this example demonstrates both types of values for the -ms-content-zoom-snap-points property. in the first selector, the first snap-point is at 0%, and the interval is set to 100%. in the second selector, each snap-point is listed separately—100%, 200%, 300%, and so on. .snappy1 { -ms-content-zoom-snap-points: snapinterval(0%, 100%); ... } ...

Grids - Learn web development
tainer { display: grid; } unlike flexbox, the items will not immediately look any different. declaring display: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. to see something that looks more grid-like, we will need to add some columns to the grid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. .container { display: grid; grid-template-columns: 200px 200px 200px; } add the 2nd declaration to your css rule, then reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid. simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetic...
...this unit represents one fraction of the available space in the grid container. change your track listing to the following definition, creating three 1fr tracks. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } you should now see that you have flexible tracks. the fr unit distributes space in proportio...
...cks has something large inside it there will be less free space to share out. gaps between tracks to create gaps between tracks we use the properties grid-column-gap for gaps between columns, grid-row-gap for gaps between rows, and grid-gap to set both at once. .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. simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } ...

Responsive design - Learn web development
reakpoint and change the design at the point where the content starts to look bad. for example, if the line lengths become unreadably long as the screen size increases, or a box becomes squashed with two words on each line as it narrows. in the early days of responsive design, our only option for performing layout was to use floats. 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. target / context = result for example, if our target column size is 60 pixels, and the context (or container) it is in is 960 pixels, we divide 60 by 960 to get a value ...
...ample below the flex items will each take an equal amount of space in the flex container, using the shorthand of flex: 1 as described in the layout topic flexbox: flexible sizing of flex items. .container { display: flex; } .item { flex: 1; } note: as an example, we have rebuilt the simple responsive layout above, this time using flexbox. you can see how we no longer need to use strange percentage values to calculate the size of the columns: example, source code. css grid in css grid layout the fr unit allows the distribution of available space across grid tracks. the next example creates a grid container with three tracks sized at 1fr. this will create three column tracks, each taking one part of the available space in the container. you can find out more about this approach to crea...
...ple, source code. as this approach to typography shows, you do not need to restrict media queries to only changing the layout of the page. they can be used to tweak any element to make it more usable or attractive at alternate screen sizes. using viewport units for responsive typography an interesting approach is to use the viewport unit vw to enable responsive typography. 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. h1 { font-size: 6vw; } the problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. therefore you should never set text using viewport units alone. there is a solut...

How can we design for all types of users? - Learn web development
pixels. in this case, zooming did nothing, even as late as internet explorer 8, which we still have to cater to because it's still around. relative units also called proportional units, relative units are computed relative to a parent element. relative units are friendlier to accessibility because they respect the settings on the user's system. ...
...it is said that "em" is the width of a capital “m” in the alphabet (roughly speaking, an “m” fits into a square). rem-based sizes: rem this unit is proportional to the root element's font size and is expressed as portions of 1, like em. ...
...thin the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16px). ...

Using files from web applications - Web APIs
the fileupload function accepts two inputs: an image element and a file from which to read the image data. ...
...hich to read the image data. ...
...(evt.target.result); }; reader.readasbinarystring(file); } the fileupload() function shown above creates a throbber, which is used to display progress information, and then creates an xmlhttprequest to handle uploading the data. 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. the xmlhttprequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). it then removes the throbber since it's no longer needed. this causes the t...

URLUtilsReadOnly.hash - Web APIs
syntax string = object.hash; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.hash#example var result = window.self.hash; // returns:'#hash' specifications specification status comment urlthe definition of 'urlutilsreadonly.hash' in that specification. living standard initial definition. browser compatibility the compatibility table in this page is generated from structured data. ...
...this has been fixed to match the spec.ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android...
...this has been fixed to match the spec.opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support ...

VideoPlaybackQuality.droppedVideoFrames - Web APIs
. this information can be used to determine whether or not to downgrade the video stream to avoid dropping frames. frames are typically dropped either before or after decoding them, when it's determined that it will not be possible to draw them to the screen at the correct time. ...
...er decoding them, when it's determined that it will not be possible to draw them to the screen at the correct time. example this example calls getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been dropped. that value is then presented in an element for the user's reference. ...
...that it will not be possible to draw them to the screen at the correct time. example this example calls getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been dropped. that value is then presented in an element for the user's reference. 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. editor's draft initial ...

Web Video Text Tracks Format (WebVTT) - Web APIs
ection is left to right line specifies where text appears vertically. if vertical is set, line specifies where text appears horizontally. value can be a line number. the line height is the height of the first line of the cue as it appears on the video. positive numbers indicate top down. negative numbers indicate bottom up. or value can be a percentage. must be an integer (i.e., no decimals) between 0 and 100 inclusive. must be followed by a percent sign (%). table 2 - line examples vertical omitted vertical:rl vertical:lr line:0 top right left line:-1 bottom left right line:0% to...
...ical:lr line:0 top right left line:-1 bottom left right line:0% top right left line:100% bottom left right position specifies where the text will appear horizontally. if vertical is set, position specifies where the text will appear vertically. value is a percentage. must be an integer (no decimals) between 0 and 100 inclusive. must be followed by a percent sign (%). table 3 - position examples vertical omitted vertical:rl vertical:lr position:0% left top top position:100% right bottom bottom size specifies the...
...sign (%). table 3 - position examples vertical omitted vertical:rl vertical:lr position:0% left top top position:100% right bottom bottom size specifies the width of the text area. if vertical is set, size specifies the height of the text area. value is a percentage. must be an integer (i.e., no decimals) between 0 and 100 inclusive. must be followed by a percent sign (%). table 4 - size examples vertical omitted vertical:rl vertical:lr size:100% full width full height full height size:50% half width half height half height ...

Web Accessibility: Understanding Colors and Luminance - Accessibility
ause of the current domination of the rgb color space in measuring color output, most calculations in this document are presumed to be in the rgb color space, and very specifically, in the srgb color space. 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. for digital concerns, much of the technology has historically resided in the rgb color space. this is because the companies behind the evolution of digital technology set the standards, and these standards still retain a powerful presence today. this is evolving, and new methods for measuring color involve measurements using other color spaces, but color measurements i...
... and rgba, among others and, one color within the same color space may be expressed in different ways. 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. em { color: #f00; } /* #rgb */ em { color: #ff0000; } /* #rrggbb */ em { color: #ff0000ff; } /* #rrggbbaa */ em { color: rgb(255, 0, 0); } em { color: rgb(100%, 0%, 0%); } em { color: rgb(255, 0, 0, 1); } em { color: rgba(100%, 0%, 0%, 100%); } conversions are not casual. see the stack exchange article, "formula to determine the brightness of rgb color".
...video, the photosensitive epilepsy analysis tool) measuring color & luminance methods that measures color exploring the rgb color space further, as it is the color space used by the data type <color>, note that there are actually multiple "versions" of the rgb color space, such as srgb, scrgb, and rgba. there are also different ways to refrence rgb: rgb decimal reference: 153, 0, 0 and an rgb percent reference: 60, 0, 0. window.getcomputedstyle() returns values using rgb decimal reference scale. for example, calling window.getcomputedstyle() on a div with a background-color: #990000; set returns the computed background color as rgb(153, 0, 0) -- the rgb decimal reference. window.getcomputedstyle() measures color in terms of rgb. css color module level 3 added hsl color values, stating "...

-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomleft css property can be used to round the bottom-left corner of an element's outline. syntax the value of -moz-outline-radius-bottomleft is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <length>. ...
...can be used to round the bottom-left corner of an element's outline. syntax the value of -moz-outline-radius-bottomleft is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <length>. <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. ...
...s well. values <length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <length>. <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. html <p>loo...

-moz-outline-radius-topleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topleft css property can be used to round the top-left corner of an element's outline. syntax the value of -moz-outline-radius-topleft is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a css <length>. ...
...property can be used to round the top-left corner of an element's outline. syntax the value of -moz-outline-radius-topleft is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a css <length>. <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. ...
...be used as well. values <length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a css <length>. <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. html <p>look at this paragraph's top-left corner.</p> css p { ...

-webkit-mask-box-image - CSS: Cascading Style Sheets
-webkit-mask-box-image sets the mask image for an element's border box. ...
... repeat the mask image is repeated as many times as is necessary to span the border box. may include a partial image if the mask image does not divide evenly into the border box. ...
...repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image. <gradient> a -webkit-gradient function to be used as a mask image. none used to specify that a border box is to have no mask image. <length> the size of the mask image's offset. see <length> for possible units. <percentage> the mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height). repeat the mask image is repeated as many times as is necessary to span the border box. may include a partial image if the mask image does not divide evenly into the border box. stretch the mask image is stretched to contain the border box exactly. round the mask image is stretched somewhat and repeated such th...

-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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... living standard i...

max-zoom - CSS: Cascading Style Sheets
or sets the maximum zoom factor of a document defined by the @viewport at-rule. the browser will not zoom in any further than this, whether automatically or at the user's request. a zoom factor of 1.0 or 100% corresponds to no zooming. larger values are zoomed in. smaller values are zoomed out. ...
... or 100% corresponds to no zooming. larger values are zoomed in. smaller values are zoomed out. 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. <number> a non-negative number limiting the maximum value of the zoom factor. <percentage> a non-negative percentage limiting the maximum value of the zoom factor. ...
...mber> 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. <number> a non-negative number limiting the maximum value of the zoom factor. <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. working draft initial defi...

min-zoom - CSS: Cascading Style Sheets
r sets the minimum zoom factor of a document defined by the @viewport at-rule. the browser will not zoom out any further than this, whether automatically or at the user's request. a zoom factor of 1.0 or 100% corresponds to no zooming. larger values are zoomed in. smaller values are zoomed out. ...
... or 100% corresponds to no zooming. larger values are zoomed in. smaller values are zoomed out. 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. <number> a non-negative number limiting the minimum value of the zoom factor. <percentage> a non-negative percentage limiting the minimum value of the zoom factor. ...
...mber> 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. <number> a non-negative number limiting the minimum value of the zoom factor. <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. working draft initial ...

zoom - CSS: Cascading Style Sheets
the zoom css descriptor sets the initial zoom factor of a document defined by the @viewport at-rule. a zoom factor of 1.0 or 100% corresponds to no zooming. larger values are zoomed in. smaller values are zoomed out. 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. ...
...maller values are zoomed out. 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. the user agent may use the size of canvas area on which the document is rendered to determine that factor. <number> a non-negative number used as the zoom factor. <percentage> a non-negative percentage value used as the zoom factor. ...
... values */ zoom: 150%; values auto the user agent will set the document's initial zoom factor. the user agent may use the size of canvas area on which the document is rendered to determine that factor. <number> a non-negative number used as the 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. working draft initial sp...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...

clamp() - CSS: Cascading Style Sheets
the clamp() css function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. it takes three parameters: a minimum value, a preferred value, and a maximum allowed value. the clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. clamp(min, val, max) is resolved as max(min, min(val, max)) the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the s...
...) and max() functions. as math expressions, so you can use addition, subtraction, multiplication and division without using the calc() function itself. you may also use parentheses to establish computation order when needed. you can use different units for each value in your expressions, and different units in any math function making up any of the arguments. 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. it is permitted to nest max() and min() functions as expression values, in which case the inner ones are treated as simple parentheses. the expressions are full math expressions, so you can use direct ad...
...alue in your expression. you may also use parentheses to establish computation order when needed. oftentimes you will want to use min() and max() within a clamp() function. 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. the <body> element's width is set as min(1000px, calc(70% + 100px)). this means that the width will be set at 1000px, unless the result of calc(70% + 100px) is less than 1000px, in which case it will be set to that ...

flex-basis - CSS: Cascading Style Sheets
eywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>. values <'width'> an absolute <length>, a <percentage> of the parent flex container's main size property, or the keyword auto. negative values are invalid. defaults to auto. content indicates automatic sizing, based on the flex item’s content. note: this value was not present in the initial release of flexible box layout, and thus some older implementations will not support it. the equivalent effect can be had by using auto together with a...
...eight property" keyword. it was implemented in bug 1032922. then, that change was reverted in bug 1093316, so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword). ...
...perty"; and a new content keyword is being introduced to trigger automatic sizing. (bug 1105111 covers adding that keyword). ...

inline-size - CSS: Cascading Style Sheets
t corresponds to either the width or the height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element. a related property is block-size, which defines the other dimension of the element. values the inline-size property takes the same values as the width and height properties. ...
... relates to the width of the element. a related property is block-size, which defines the other dimension of the element. values the inline-size property takes the same values as the width and height properties. ...

inset-block-end - CSS: Cascading Style Sheets
lock-end css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. ...
... /* <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. ...
...herit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property. ...

inset-block-start - CSS: Cascading Style Sheets
rt css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <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 elementsinheritedno...
...age>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. ...
... inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property. ...

inset-block - CSS: Cascading Style Sheets
element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
...e */ 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 left property. ...
...llowing css properties: inset-block-end inset-block-start syntax values the inset-block property takes the same values as the left property. ...

inset-inline-end - CSS: Cascading Style Sheets
ne-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <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. syntax values the inset-inline-end property takes the same values as the left property. formal...
...nd: 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. syntax values the inset-inline-end property takes the same values as the left property. ...
... inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-end property takes the same values as the left property. ...

inset-inline-start - CSS: Cascading Style Sheets
css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <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. syntax values the inset-inline-start property takes the same values as the left prope...
.../* 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. syntax values the inset-inline-start property takes the same values as the left property. ...
...nset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-start property takes the same values as the left property. ...

inset-inline - CSS: Cascading Style Sheets
tion, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
...set-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 values as the left property. ...
...owing css properties: inset-inline-end inset-inline-start syntax values the inset-inline property takes the same values as the left property. ...

inset - CSS: Cascading Style Sheets
ionality, and text orientation. it has the same multi-value syntax of the margin shorthand. it is a shorthand that corresponds to the top, right, bottom, and/or left properties. ...
...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. ...
... /* global values */ inset: inherit; inset: initial; inset: unset; syntax values the inset property takes the same values as the left property. ...

<length> - CSS: Cascading Style Sheets
syntax the <length> data type consists of a <number> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. ...
... syntax the <length> data type consists of a <number> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. ...
... element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this). rlh equal to the computed value of the line-height property on the root element (typically <html>), converted to an absolute length. when used on the font-size or line-height properties of the root element, it refers to the properties' initial value. 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. viewport lengths are invalid in @page declaration blocks. vh equal to 1% of the height of the viewport's initial containing block. vw equal to 1% of the width of the viewport's initial containing block. vi equal to 1% of the size of the initi...

margin-inline - CSS: Cascading Style Sheets
rgin-left properties, depending on the values defined for writing-mode, direction, and text-orientation. constituent properties this property is a shorthand for the following css properties: margin-inline-end margin-inline-start syntax values the margin-inline property takes the same values as the margin-left property. ...
...s this property is a shorthand for the following css properties: margin-inline-end margin-inline-start syntax values the margin-inline property takes the same values as the margin-left property. ...
...height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline' in that specification. editor's draft initial 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 ...

mask-border-slice - CSS: Cascading Style Sheets
negative values are invalid; values greater than their corresponding dimension are clamped to 100%. when one position is specified, it creates all four slices at the same distance from their respective sides. when two positions are specified, the first value creates slices measured from the top and bottom, the second creates slices mea...
... are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values <number> represents an edge offset in pixels for raster images and coordinates for vector images. 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. fill preserves the middle image region. its width and height are sized to match the top and left image regions, respectively. description the slicing process creates nine regions in to...
...t is discarded by default, but is used like a background image if the keyword fill is set. the mask-border-repeat, mask-border-width, and mask-border-outset properties determine how these regions are used to form the final mask border. 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. when it eventually starts to be supported, it will serve to define the size of the slices taken from the source image, and used ...

mask-border-width - CSS: Cascading Style Sheets
the mask-border-width css property sets the width of an element's mask border. 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. when one value is specified, it applies the same width to all four sides. when two values are specified, th...
...width to all four sides. when two values are specified, the first width applies to the top and bottom, the second to the left and right. when three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom. when four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise). 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. must not be negative. <number> the width of the mask border, specified as a multiple of the corresponding border-width. must not be negative. auto the width of the mask border is ma...
...mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding mask-border-slice. if the image does not have the required intrinsic dimension, the corresponding border-width is used instead. 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. when it eventually starts to be suppo...

max-inline-size - CSS: Cascading Style Sheets
element. it relates to max-block-size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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 ...
...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. ...
...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. ...

max() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...signed. the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>), or nested min() and max() functions. you can use different units for each value in your expression. you may also use parentheses to establish computation order when needed. 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. it is permitted to nest min() and other max() functions as expression values. the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without u...
...s. the operands in the expression may be any <length> syntax value. you can (and often need to) combine min() and max() values, or use max() within a clamp() or calc() function. 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. let's look at some css: h1 { font-size: 2rem; } h1.responsive { font-size: max(4vw, 2em, 2rem); } the font-size will at minimum be 2rems, or twice the default...

min-block-size - CSS: Cascading Style Sheets
to either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...alue of min-block-size relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. a related property is min-inline-size, which defines the other dimension of the element. values the min-block-size property takes the same values as the min-width and min-height properties. ...
... of the element. a related property is min-inline-size, which defines the other dimension of the element. values the min-block-size property takes the same values as the min-width and min-height properties. ...

min-inline-size - CSS: Cascading Style Sheets
o either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...lue of min-inline-size relates to the minimum height of the element; otherwise, it relates to the minimum width of the element. a related property is min-block-size, which defines the other dimension of the element. values the min-inline-size property takes the same values as the min-width and min-height properties. ...
...of the element. a related property is min-block-size, which defines the other dimension of the element. values the min-inline-size property takes the same values as the min-width and min-height properties. ...

min() - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...value result used as the value. the expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>). you can use different units for each value in your expression, if you wish. you may also use parentheses to establish computation order when needed. 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. it is permitted to nest max() and other min() functions as expression values. the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without u...
...en need to) combine min() and max() values, or use min() within a clamp() or calc() function. you can provide more than two arguments, if you have multiple constraints to apply. 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). mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input an...

object-position - CSS: Cascading Style Sheets
/* global values */ object-position: inherit; object-position: initial; object-position: unset; values <position> from one to four values that define the 2d position of the element. relative or absolute offsets can be used. note: the position can be set so that the replaced element is drawn outside its box. ...
...ur values that define the 2d position of the element. relative or absolute offsets can be used. note: the position can be set so that the replaced element is drawn outside its box. ...
... is drawn outside its box. 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. <img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9f...

offset-path - CSS: Cascading Style Sheets
al definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax none | ray( [ <angle> && <size>? && contain? ] ) | <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'> ]? )<circle()> = circle( [ <shape-radius> ]? [ at <posit...
...ath()><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'> ]? )<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <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> ]? ...
...position> ]? )<polygon()> = polygon( <fill-rule>? , [ <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. the path, as can be seen in the rendering of the svg code, is a line drawing of a house with a chimney. svg the top and bott...

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...
...[ <'offset-path'> [ <'offset-distance'> | <'...
...h> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-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'>? [ <'offset-path'> [ <'offset-distance'> | <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]? examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } ...

opacity - CSS: Cascading Style Sheets
ee to which content behind an element is hidden, and is the opposite of transparency. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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). any value outside the interval, though valid, is clamped to the nearest limit in the range. value meaning 0 the element is fully transparent (that is, invisible). any <number> strictly between 0 and 1 the element is translucent...
...r larger, or 24px or larger. ...
... css color module level 3the definition of 'opacity' in that specification. recommendation initial definition ...

repeating-linear-gradient() - CSS: Cascading Style Sheets
eft, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <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. <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color...
... \---------------------------------/ \---------------/ definition of the gradient line list of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...
... \---------------/ definition of the gradient line list of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...

scroll-padding-block-end - CSS: Cascading Style Sheets
one https://github.com/mdn/interactive-examples and send us a pull request. ...
...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. auto the offset is determind by the user agent. ...
...-block-end: unset; values <length-percentage> an inwards offset from the block end edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommend...

scroll-padding-block-start - CSS: Cascading Style Sheets
thub.com/mdn/interactive-examples and send us a pull request. ...
...-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. auto the offset is determind by the user agent. ...
...ck-start: unset; values <length-percentage> an inwards offset from the block start edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recomme...

scroll-padding-bottom - CSS: Cascading Style Sheets
es project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...t. 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. auto the offset is determind by the user agent. ...
...adding-bottom: unset; values <length-percentage> an inwards offset from the bottom edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommendati...

scroll-padding-inline-end - CSS: Cascading Style Sheets
ps://github.com/mdn/interactive-examples and send us a pull request. ...
.../ 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. auto the offset is determind by the user agent. ...
...inline-end: unset; values <length-percentage> an inwards offset from the inline end edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommen...

scroll-padding-inline-start - CSS: Cascading Style Sheets
m/mdn/interactive-examples and send us a pull request. ...
...-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. auto the offset is determind by the user agent. ...
...e-start: unset; values <length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recomm...

scroll-padding-left - CSS: Cascading Style Sheets
ractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...us a pull request. 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. auto the offset is determind by the user agent. ...
...oll-padding-left: unset; values <length-percentage> an inwards offset from the left edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommendation...

scroll-padding-right - CSS: Cascading Style Sheets
examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ull request. 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. auto the offset is determind by the user agent. ...
...ll-padding-right: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommendatio...

scroll-padding-top - CSS: Cascading Style Sheets
he interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...nd send us a pull request. 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. auto the offset is determind by the user agent. ...
...roll-padding-top: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommendation ...

text-underline-offset - CSS: Cascading Style Sheets
osition. text-underline-offset is not part of the text-decoration shorthand. while an element can have multiple text-decoration lines, text-underline-offset only impacts underlining, and not other possible line decoration options such as overline or line-through. 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. values auto the browser chooses the appropriate offset for underlines. <length> specifies the offset of underlines as a <length>, overriding the font file...
...tial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below. values auto the browser chooses the appropriate offset for underlines. <length> specifies the offset of underlines as a <length>, overriding the font file suggestion and the browser default. it is recommended to use em units so the offset scales with the font size. <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. for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment. formal defini...
...s as a relative value, and so therefore scales with changes in the font. for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment. formal definition initial valueautoapplies toall elements. 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. only the bottom one is offset.</p> p { text-decoration: underline wavy red; text-...

zoom - CSS: Cascading Style Sheets
the non-standard zoom css property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. however, unlike css transforms, zoom affects the layout size of the element. /* 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. reset do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing ctrl-- or ctrl++ keyboard shortcuts) to the document. only supported by webkit (and possibly blink). <percentage> zoom factor. 100% is equivalent to normal. values lar...
...normal size. reset do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing ctrl-- or ctrl++ keyboard shortcuts) to the document. only supported by webkit (and possibly blink). <percentage> zoom factor. 100% is equivalent to normal. values larger than 100% zoom in. values smaller than 100% zoom out. <number> zoom factor. equivalent to the corresponding percentage (1.0 = 100% = normal). values larger than 1.0 zoom in. values smaller than 1.0 zoom out. ...
...ormal. values larger than 100% zoom in. values smaller than 100% zoom out. <number> zoom factor. equivalent to the corresponding percentage (1.0 = 100% = normal). values larger than 1.0 zoom in. values smaller than 1.0 zoom out. ...

stroke-dashoffset - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check ...
... browser compatibility the compatibility table on this page is generated from structured data. ...
... browser compatibility the compatibility table on this page is generated from structured data. ...

<foreignObject> - SVG: Scalable Vector Graphics
of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing elit. sed mollis mollis mi ut ultricies. nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. ...
...tetur adipiscing elit. sed mollis mollis mi ut ultricies. nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. 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. ...
...trum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. 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. global attributes core attributes most notably: id, tabindex styling attributes c...

<line> - SVG: Scalable Vector Graphics
e used to create a line connecting two points. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point. 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. valu...
...fault 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. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes pathlength defines the total path length in user units. value type: <number> ; default value: none; 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, g...
... recommendation initial definition ...

<pattern> - SVG: Scalable Vector Graphics
n id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile. 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: <url>; default value: none; animatable: yes patterncontentunits this attribute defines the coordinate system for the contents of the <pattern>. value type: userspaceonuse|objectboundingbox; default value: userspaceonuse; animatable: y...
... xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid meet; animatable: yes viewbox this attribute defines the bound of the svg viewport for the pattern fragment. value type: <list-of-numbers> ; default value: none; animatable: yes width this attribute determines the width of the pattern tile. 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: <url>; default value: none; animatable: yes note: for browser...
...ce svg 2 this attribute reference a template pattern that provides default values for the <pattern> attributes. value type: <url>; default value: none; animatable: yes note: for browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used. y this attribute determines the y coordinate shift of the pattern tile. ...

<svg> - SVG: Scalable Vector Graphics
guage used by the svg fragment. value type: <string> ; default value: application/ecmascript; animatable: no contentstyletype deprecated since svg 2 the default style sheet language used by the svg fragment. value type: <string> ; default value: text/css; animatable: no height the displayed height of the rectangular viewport. (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. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid meet; animatable: yes version deprecated since svg 2 which version of svg is used for the inne...
...ince svg 2 which version of svg is used for the inner content of the element. value type: <number> ; default value: none; animatable: no viewbox the svg viewport coordinates for the current svg fragment. value type: <list-of-numbers> ; default value: none; animatable: yes width the displayed width of the rectangular viewport. ...
...t coordinates for the current svg fragment. value type: <list-of-numbers> ; default value: none; animatable: yes width the displayed width of the rectangular viewport. (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. no effect on outermost svg elements. value type: <length>|<percentage> ; default value: 0; animatable: yes y the displayed y coordinate of the svg container. no effect on outermost svg elements. 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. global attributes core attributes most notably: id, t...

<text> - SVG: Scalable Vector Graphics
color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline. 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. valu...
...can rotate glyphs individually. ...
...n of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...

<tspan> - SVG: Scalable Vector Graphics
height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana! </text> </svg> attributes x the x coordinate of the starting point of the text baseline. ...
...font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana! </text> </svg> attributes x the x coordinate of the starting point of the text baseline. 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. value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each individual glyph. can rotat...
...n of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; animatable: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...

simple-storage - Archive of obsolete content
egister a listener for the "overquota" event. it will be called when your storage goes over quota. function myonoverquotalistener() { console.log("uh oh."); } ss.on("overquota", myonoverquotalistener); listeners can also be removed: ss.removelistener("overquota", myonoverquotalistener); to find out how much of your quota you're using, check the module's quotausage property. it indicates the percentage of quota your storage occupies. if you're within your quota, it's a number from 0 to 1 (so a value of 0.5 means that you're using 50% of your quota and 1.0 means you're using your entire quota). if your add-on is using more than its quota, this value is greater than 1.0. therefore, when you're notified that you're over quota, you should respond by removing data from the storage space until yo...
... private browsing mode and how to use the sdk to avoid storing user data associated with private windows, refer to the documentation for the private-browsing module. globals properties storage a persistent object private to your add-on. properties with array, boolean, number, object, null, and string values will be persisted. quotausage a number in the range [0, infinity) that indicates the percentage of quota occupied by storage. a value in the range [0, 1] indicates that the storage is within quota. a value greater than 1 indicates that the storage exceeds quota. events overquota the module emits this event when your add-on's storage goes over its quota. ...

Downloading Files - Archive of obsolete content
. if, and only if, the url is not // related to a window, null should be used instead. ...
...wsingutils.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 need to set the progresslistener property of the nsiwebbrowserpersist instance to an object that implements nsiaut...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
but some users may write in, frustrated and complaining about the horrible design decisions we've made. those feedback loops will have to be managed appropriately. for wired news, we analyzed the traffic reports to get a picture of our user base. from looking at our data, we predict there could be as much as 14% of our users who will get the un-styled version of our content. that's a significant percentage when we're used to our pages looking the same in every browser. were there any other lessons you learned during the conversion process? as many times as i heard the message that design of content should be addressable separately from the content itself, i don't think i realized the full benefits of doing so until we actually went through the process of separating them. we're now set up to pr...
...could be ripe to make the leap. keep in mind the last disadvantage i just mentioned. not every browser will be able to support the css used to replace table layouts. in those cases, the browser will either render your documents with many bugs, or you'll have to consciously choose to hide certain bits of style information from browsers that can't support css adequately enough. what are the browser percentages of your current user base, and what about your target user base (which may be different)? will the majority of your users be viewing your pages with a newer, standards-compliant browser? going through the initial conversion may take longer for some sites, depending on the organization and complexity of the data. pages which draw their content from a database will probably require less labor ...

Style System Overview - Archive of obsolete content
different value or when there is an explicit inherit value). inherited structs act like reset ones in the descendants of any rule node for which the data are fully specified. style data cached in style context tree if a style struct for a context depends on the data in the parent context, we will cache that struct in the style context tree. 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). if the data are exactly the same as those of the parent, we copy the struct to the child style context and set a bit saying that it doesn't own the struct. (the context tree can be deep.) each rule node has a per-struct set of “none bits” that say that the rule node's set of rules (the rules on the path to th...
...it saying that it doesn't own the struct. (the context tree can be deep.) each rule node has a per-struct set of “none bits” that say that the rule node's set of rules (the rules on the path to the root) specify nothing non-inherited for the struct. 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. when we compute a data struct, we cache it as high as possible in the rule tree -- on the lowest of the rule nodes on the path to the root that specified something for that struct. a rule node that uses the same struct as its parent is marked with a “dependent bit” for that struct, which tells nsrulenode::getstyledata to just get...

Running Tamarin performance tests - Archive of obsolete content
i/dis...exsdk/flex+sdk. (optional) you may compare the performance of the avmshell to another avmshell. for example you may download or build the latest checked in avmshell to compare against a local change. to compare a build against another build set the avm2 environment variable to the other avmshell or use the "-s --avm2" options. results from the two shells will be shown side to side and the percent speedup will be shown. $ cd tamarin-redux/test/performance $ python runtests.py executing tests at 2008-07-22 13:56:54.820920 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe test avm sunspider/access-binary-trees.as 82.0 sunspider/access-fannkuch.as 152.0 sunspider/access-nbody.as ...
...te.as 36.0 36.0 0.0 by default tests sunspider and sunspider-as3 (optimized for as3) and run. other tests may be specified by selecting ./runtests.py -c [misc,scimark,jsbench]. also for better accuracy tests may be run multiple times. specifying ./runtests.py -i 10 will run each tests 10 time and use the fastest result. 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. performance test options there are a variety of options available with runtests.py - here is the help text followed by explanations for some options: $ ./runtests.py -h usage: runtests.py [options] [tests] -v --verbose enable additional output -e --avm ...

Things I've tried to do with XUL - Archive of obsolete content
this is a grab-bag type of faq, with a list of things that should work (hopefully with bug numbers), things that don't work (hopefully with explanations), and workarounds for both of the above. feel free to add your own xul experiences here. how do i use percentage-based height/width with xul? short answer: you can't easily, at least not yet. this means that creating any sort of visual display (not necessarily "ui"; my use case is for creating a calendar time display) that sizes sanely when the user resizes the window is unfortunately very difficult. (to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes...
...background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated. so, as soon as you add a label or some other element inside, there will be a different amount of "empty space" to allocate in different boxes. 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. vlad: sure; the snippets assume that there's some enclosing structure that will provide the actual height. wrap the whole thing in a <vbox height="300"> or something. :) silver: if you set height="0" and include "overflow: hidden" on ea...

-ms-hyphenate-limit-zone - Archive of obsolete content
the -ms-hyphenate-limit-zone css property is a microsoft extension specifying the width of the hyphenation zone. 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. negative values are not allowed. <length> a floating-point number, followed by a relative units designator, that indicates the width of the hyphenation zone. ...
...gn (%), which specifies the width of the hyphenation zone, calculated with respect to the line box. negative values are not allowed. <length> a floating-point number, followed by a relative units designator, that indicates the width of the hyphenation zone. for more information about supported length units, see css basic data types. negative values are not allowed. formal syntax <percentage> | <length> specifications not part of any specification. remarks the -ms-hyphenate-limit-zone property enables you to control the amount of trailing whitespace permitted during hyphenation. the hyphenation zone is always at the logical right side of the padding box. a word is considered for hyphenation only if it begins at or outside of the logical left limit of the hyphenation zone. ...

Styling tables - Learn web development
ain, which produces some strange results. with table-layout: fixed, you can size your columns according to the width of their headings, and then deal with their content as appropriate. 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. the entire column width follows the width of its heading, making for a nice way to size your table columns. chris coyier discusses this technique in more detail in fixed table layouts. we've coupled this with a width of 100%, meaning that the table will fill any container it is put in, and be nicely responsive (although it would still need some more work to get it looking good on ...
...auses the caption to be positioned on the bottom of the table, which along with the other declarations gives us this final look (see it live at punk-bands-complete.html): table styling quick tips before moving on, we thought we'd provide you with a quick list of the most useful points illustrated above: make your table markup as simple as possible, and keep things flexible, e.g. by using percentages, so the design is more responsive. use table-layout: fixed to create a more predictable table layout that allows you to easily set column widths by setting width on their headings (<th>). use border-collapse: collapse to make table elements borders collapse into each other, producing a neater and easier to control look. use <thead>, <tbody>, and <tfoot> to break up your table into logical ...

Index - Learn web development
o help you check your understanding of the css box model. 113 type, class, and id selectors beginner, css, class, learn, selectors, id in this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work. 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. you can have a look at all of the different types on the css values and units reference page; you will encounter many of these in use as you work through these lessons. 115 cascade and inheritance beginner, css, cascade, inheritance, learn, rules, source order...
...ow this lesson introduced the concept of overflow. you should understand that default css avoids making overflowing content invisible. you have discovered that you can manage potential overflow, and also, that you should test work to make sure it does not accidentally cause problematic overflow. 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. when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. 124 styling tables article, beginner, css, codingscripting, guide, n...

Debugging Table Reflow
rs: col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 this is followed by the information which width has been set for each column. the index of the column, whether it is anonymous and what kind of constrained has been appliedcolindex=0 isanonymous=0 constraint=0. the following constraint types are known: enoconstraint = 0, epixelconstraint = 1, // pixel width epercentconstraint = 2, // percent width eproportionconstraint = 3, // 1*, 2*, etc. cols attribute assigns 1* e0proportionconstraint = 4 // 0*, means to force to min width after this follows the width information for each column: widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 the table code knows ten different width's: #define num_widths 10 #define num_major_widths 3 // min, des, fix ...
...ne des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, 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. leaving assignnonpctcolwidths shows that alread...

Mozilla Quirks Mode Behavior
efox 10.0 / thunderbird 10.0 / seamonkey 2.7), this also works in standards mode (bug 80784, bug 93077). block and inline layout [this quirk is present in almost standards mode.] line height (not line-height) calculations are different to fix bug 5821 and bug 24186 (some other issues are described in bug 22274). see almost standards mode for more details. 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. see bug 33443#c9. see also bug 41656 and its duplicates. some of these quirks may cause other effects (see bug 54119). in quirks mode, the font element c...
...0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in quirks mode absmiddle (handled incorrectly?) and middle (perhaps incorrectly as well?) are accepted as values of align on table cells, and absmiddle, abscenter, and middle are supported on tables (treated the same as center). removed in bug 559834 and bug 573322, though middle and absmiddle in table cells work in all modes now. in quirks mode, percentage values are supported on the cellspacing attribute, but treated as pixels (bug 106336). obsolete since gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) this quirk has been adopted in standards mode now. frames in quirks mode marginwidth and marginheight on a frame are propagated to the contained body. in a frameset cols/rows specification 0* is treated as 1* (see bug 40383)...

BloatView
75840 19.40% nsxulelement 51648 0.00% 51648 0.00% nsprofile 51224 0.00% 51224 0.00% nsframe 47568 -26.15% 48096 -50.49% cssdeclarationimpl 42984 0.67% 43488 0.67% this "delta report" shows the leak offenders, sorted from most leaks to fewest. the delta numbers show the percentage change between runs for the amount of leaks and amount of bloat (negative numbers are better!). the bloat number is a metric determined by multiplying the total number of objects allocated of a given class by the class size. note that although this isn't necessarily the amount of memory consumed at any given time, it does give an indication of how much memory we're consuming. the more memory i...
...nt of bloat (negative numbers are better!). the bloat number is a metric determined by multiplying the total number of objects allocated of a given class by the class size. note that although this isn't necessarily the amount of memory consumed at any given time, it does give an indication of how much memory we're consuming. the more memory in general, the worse the performance and footprint. the percentage 99999.99% will show up indicating an "infinite" amount of leakage. this happens when something that didn't leak before is now leaking. bloatview and continuous integration bloatview runs on debug builds for many of the test suites mozilla has running under continuous integration. if a new leak occurs, it will trigger a test job failure. bloatview's output file can also show you where the le...

Gecko Profiler FAQ
you do want to think about various characteristics of an allocator which may have an impact on performance. for example, see julian’s great investigation on the impact of cache line sharing across multiple cores on jemalloc’s multi-core performance in https://bugzilla.mozi...
.... what's the best way to do repeatable tests? ie: i want to measure perf of loading the same page with different stylo configurations. probably by using talos, especially if you want to measure and not profile. you can make your own talos pageload test which has just the one page that you’re interested in in its manifest. what actually means the percentage of the running time? the percentage of samples with stacks under this stack. how you identify a user action in the main thread we’re missing ui for this at the moment. the profile contains markers for dom events, and those include user-generated events like mouse clicks, but these markers are only exposed as a huge unsearchable list in the markers tab. ...

A guide to searching crash reports
wn in the following screenshot. this has the same columns as the "signature facet" tab we saw earlier, except for the "bugs" column, because that is a special column that only applies to the signature facet. this tab shows the distribution of crash reports across the various platforms. 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. grouping by "moz crash reason" the second facet tab is a "moz crash reason facet" tab, with results like those shown in the following screenshot. this immediately shows which moz_crash calls are being hit frequently by users. only a subset of crash reports have the "moz crash reason" field -- those that crashed due to hitting a moz_crash call -- so all crashes that lack th...
...second facet tab is a "moz crash reason facet" tab, with results like those shown in the following screenshot. this immediately shows which moz_crash calls are being hit frequently by users. only a subset of crash reports have the "moz crash reason" field -- those that crashed due to hitting a moz_crash call -- so all crashes that lack that field are omitted from this tab. for that reason, the percentages do not add up to 100. an example of less useful grouping the usefulness of grouping varies from field to field. in particular, fields that can have many possible values (such as numeric fields) often don't group well. for example, if we do a default search grouped by uptime we get results like those in the following screenshot. in this example the top 10 groups account for less than 12% ...

Mail composition back end
s interface is called with progress notification on the send operation. 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 onstatus(const char *amsgid, - the message id for the message being sent const prunichar *amsg) = 0; - a message concerning the status of the send operation onstopsending the onstopsending interface is called when the sending operati...
...nal copy operation onprogress the onprogress interface is called with progress notification for the copy 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. this will be called in the case of both success and failure. ns_imethod onstopcopy( nsresult astatus, - the resulting status for the sen...

CSSMathSum - Web APIs
in th...
...in the future we may write the last three lines as: console.log( stylemap.get('width').values[1] ); // cssmathnegate {value...

CSSPrimitiveValue - Web APIs
interface might be obtained from the getpropertycssvalue() method of the cssstyledeclaration interface. a cssprimitivevalue object only occurs in a context of a css property. conversions are allowed between absolute values (from millimeters to centimeters, from degrees to radians, and so on) but not between relative values. (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). <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%...
...tvalue() method. css_ms the value is a <time> in milliseconds. the value can be obtained by using the getfloatvalue() method. css_number the value is a simple <number>. the value can be obtained by using the getfloatvalue() method. css_pc the value is a <length> in picas. the value can be obtained by using the getfloatvalue() method. css_percentage the value is a <percentage>. the value can be obtained by using the getfloatvalue() method. css_pt the value is a <length> in points. the value can be obtained by using the getfloatvalue() method. css_px the value is a <length> in pixels. the value can be obtained by using the getfloatvalue() method. css_rad the value is an <angle> in radians...

HTMLMarqueeElement - Web APIs
nate. if no value is specified, the default value is scroll. htmlmarqueeelement.bgcolor sets the background color through color name or hexadecimal value. htmlmarqueeelement.direction sets the direction of the scrolling within the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. htmlmarqueeelement.height sets the height in pixels or percentage value. htmlmarqueeelement.hspace sets the horizontal margin. htmlmarqueeelement.loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll continuously. htmlmarqueeelement.scrollamount sets the amount of scrolling at each interval in pixels. the default value is 6. htmlmarqueeelement.scrolldelay sets t...
...illiseconds. the default value is 85. note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is true. htmlmarqueeelement.truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is true, then those values are not ignored. htmlmarqueeelement.vspace sets the vertical margin. htmlmarqueeelement.width sets the width in pixels or percentage value. event handlers htmlmarqueeelement.onbounce fires when the marquee has reached the end of its scroll position. it can only fire when the behavior attribute is set to alternate. htmlmarqueeelement.onfinish fires when the marquee has finished the amount of scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number that is greater tha...

ImageData.data - Web APIs
ues within the data array, the for loop iterates by multiples of four. the values associated with each pixel are r (red), g (green), b (blue), and a (alpha), in that order. ...
...es associated with each pixel are r (red), g (green), b (blue), and a (alpha), in that order. ...

Index - Web APIs
f the cssnumericvalue interface converts the object's value to a cssmathsum object to values of the specified unit. 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. 433 cssomstring api, cssom, reference cssomstring is used to denote string data in cssom specifications and can refer to either domstring or usvstring. when a specification says cssomstring, it depends on the browser vendors to choose whether to use domstring or usvstring. while browser implementations that use utf-8 internally to represent strings in m...
... for working with urls. these were then inherited by other interfaces, such as workerlocation. 4383 urlutilsreadonly.hash api, experimental, expérimental(2), property, read-only, reference, référence(2), url api, urlutilsreadonly the urlutilsreadonly.hash read-only property returns a domstring containing a '#' followed by the fragment identifier of the url. the hash is not percent encoded. 4384 urlutilsreadonly.host api, experimental, expérimental(2), property, read-only, reference, référence(2), url api, urlutilsreadonly the urlutilsreadonly.host read-only property returns a domstring containing the host, that is the hostname, a ':', and the port of the url. 4385 urlutilsreadonly.hostname api, experimental, expérimental(2), property...

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...
...value description svg_lengthtype_unknown 0 the unit type is not one of predefined unit types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. svg_lengthtype_number 1 no unit type was provided (i.e., a unitless value was specified), which indicates a value in user units. svg_lengthtype_percentage 2 a percentage value was specified. svg_lengthtype_ems 3 a value was specified using the em units defined in css2. svg_lengthtype_exs 4 a value was specified using the ex units defined in css2. svg_lengthtype_px 5 a value was specified using the px units defined in css2. svg_lengthtype_cm 6 a value was specified using the cm uni...

StorageEstimate.quota - Web APIs
an estimate to help prevent its use for fingerprinting—that is, identifying a device using an amalgamation of the values of seemingly innocuous properties. syntax quota = storageestimate.quota; value a numeric value specifying an approximation of the total amount of storage space available for use by the application. ...
...seemingly innocuous properties. syntax quota = storageestimate.quota; value a numeric value specifying an approximation of the total amount of storage space available for use by the application. 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. living standard i...

StorageEstimate.usage - Web APIs
less. the value is an estimate because the user agent may use compression, duplication prevention techniques, and other methods to improve storage efficiency. syntax usage = storageestimate.usage; value a numeric value specifying an approximation of the total amount of storage space available for use by the application. ...
... to improve storage efficiency. syntax usage = storageestimate.usage; value a numeric value specifying an approximation of the total amount of storage space available for use by the application. 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. living standard i...

StorageManager.estimate() - Web APIs
tion, and obfuscation for security reasons, they will be imprecise. you may find that the quota varies from origin to origin. ...
... 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. living standard...

URLUtilsReadOnly - Web APIs
this has been fixed to match the spec.ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android...
...this has been fixed to match the spec.opera android no support nosafari ios no support nosamsung internet android no support nohost experimentalchrome no support noedge no support ...

VTTCue - Web APIs
r its interpretation. properties this interface also inherits properties from texttrackcue. vttcue.region a vttregion object describing the video's sub-region that the cue will be drawn onto, or null if none is assigned. vttcue.vertical returns an enum representing the cue writing direction. ...
... percentage of the video size. vttcue.line returns the line positioning of the cue. this can be the string auto or a number whose interpretation depends on the value of vttcue.snaptolines. vttcue.linealign returns an enum representing the alignment of the vttcue.line. vttcue.position returns the indentation of the cue within the line. 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.positionalign returns an enum representing the alignment of the cue. this is used to determine what the vttcue.position is anchored to. the default is auto. vttcue.size returns a double representing the size of the cue, as a percentage of the video size. vttcue.textalign returns an enum representing the alignment of...

VTTRegion - Web APIs
the vttregion interface—part of the api for handling webvtt (text tracks on media presentations)—describes a portion of the video to render a vttcue onto. constructor vttregion() returns a newly created vttregion object. properties vttregion.id a domstring that identifies the region. vttregion.width a double representing the width of the region, as a percentage of the video. vttregion.lines a double representing the height of the region, in number of lines. 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. vttregion.viewportanchorx a double representing the viewport anchor x offset, as a percentage of the video. ...
... vttregion.scroll an enum representing how adding new cues will move existing cues. examples var region = new vttregion(); region.width = 50; // use 50% of the video width region.lines = 4; // use 4 lines of height. region.viewportanchorx = 25; // have the region start at 25% from the left. ...

Using the progressbar role - Accessibility
is describing the loading progress of a particular region of a page, the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. it is not possible for the user to alter the value of a progressbar because it is always readonly. 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. it is best to set the values for aria-valuemin, aria-valuemax, and aria-valuenow in a manner that is appropriate for this calculation. note: elements with the role progressbar have an implicit aria-readonly value of true. possible effects on user agents and assistive technology screen reader...
...e effects on user agents and assistive technology screen readers should announce the progress updates as they occur. if the progress bar is labeled, the label text should be mentioned as well. note: opinions may differ on how assistive technology should handle this. the information provided above is one of those opinions and therefore not normative. 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... " aria-valuemax="100"> step 2: copying files... </div> working examples: notes aria attributes used progressbar aria-valuenow aria-valuemi...

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
in a one dimensional method like flexbox, we only control the row or column. in two dimensional layout like grid we control both at the same time. if you want the space distribution row by row, use flexbox. if you don’t, use grid. how do flexbox-based grid systems work? typically flexbox-based grid systems work by taking flexbox back to the familiar world of float-based layouts. ...
... if you need flex items to line up in the cross axis, controlling the width in this way will achieve that. in most cases however, adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layout for that component. ...

Basic Shapes - CSS: Cascading Style Sheets
to border-box, padding-box or content-box to see how the reference box used as the starting point before offsets are calculated changes. circle() the circle() value for shape-outside can accept two possible arguments. the first is the shape-radius. both circle() and ellipse() values for shape-outside are specified as accepting this argument of <shape-radius>. this argument can be a length or percentage but can also be one of the keywords closest-side or farthest-side. the keyword closest-side uses the length from the center of the shape to the closest side of the reference box. for circles, this is the closest side in any dimension. for ellipses, this is the closest side in the radius dimension. the keyword farthest-side uses the length from the center of the shape to the farthest side of ...
...hest side of the reference box. for circles, this is the farthest side in any dimension. for ellipses, this is the farthest side in the radius dimension. the second argument is a position. if omitted this will be set to center. however you can use any valid position here to indicate the position of the centre of the circle. 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. in the below example i have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. this gives a total width for the reference box of 140 pixels. i have given a value of 50% for the shape-radius value which means that our radius is 70px. i have then set the pos...

CSS data types - CSS: Cascading Style Sheets
css data types define typical values (including keywords and units) accepted by css properties and functions. they are a special kind of component value type. in formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">". ...
...x 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> <position> <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 ...

border-block-start-width - CSS: Cascading Style Sheets
please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. ...
...-end-width, which define the other border widths of the element. 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. see border-width. ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a bottom border html <div> this box has a border on the bottom side. </div> css div { border-bottom: 4px dashed blue; background-co...

border-inline-end-width - CSS: Cascading Style Sheets
, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the element. ...
...tart-width, which define the other border widths of the element. 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. see border-width. ...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a left border html <div> this box has a border on the left side. </div> css div { border-left: 4px dashed blue; background-color: g...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a right border to a div html <div> this box has a border on the right side. </div> css div { border-right: 4px dashed blue; backgro...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a top border html <div> this box has a border on the top side. </div> css div { border-top: 4px dashed blue; background-color: gold...

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( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value>...
...lue> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a pink outset border html <div>i have a border, an outline, and a box shadow! amazing, isn't it?</div> css div { border: 0.5rem outset ...

Computed value - CSS: Cascading Style Sheets
ild during inheritance. it is calculated from the specified value by: handling the special values inherit, initial, unset, and revert. doing the computation needed to reach the value described in the "computed value" line in the property's definition table. ...
...property's definition table. 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. for example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size). 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. additionally, unitless numbers specified on the line-height property become the computed value, as specified. the relative values that remain in the computed value become absolute when the used value is determined...

brightness() - CSS: Cascading Style Sheets
appear brighter or darker. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...syntax brightness(amount) parameters amount the brightness of the result, specified as a <number> or a <percentage>. a value under 100% darkens the image, while a value over 100% brightens it. a value of 0% will create an image that is completely black, while a value of 100% leaves the input unchanged. the lacuna value for interpolation is 1. 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. working draft ...

contrast() - CSS: Cascading Style Sheets
e contrast of the input image. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... syntax contrast(amount) parameters amount the contrast of the result, specified as a <number> or a <percentage>. a value under 100% decreases the contrast, while a value over 100% increases it. a value of 0% will create an image that is completely gray, while a value of 100% leaves the input unchanged. the lacuna value for interpolation is 1. 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. working draft ...

font - CSS: Cascading Style Sheets
op, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field. formal definition initial valueas each of the properties of the shorthand:font-style: normalfont-variant: normalfont-weight: normalfont-stretch: normalfont-size: mediumline-height: normalfont-family: depends on user agentapplies toall elements. ...
...-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 specifiedfont-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'> | <...

grid - CSS: Cascading Style Sheets
...
...ding dimension of the content areagrid-auto-columns: refer to corresponding dimension of the content areacomputed valueas each of the properties of the shorthand:grid-template-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 speci...

linear-gradient() - CSS: Cascading Style Sheets
ft, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <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). <color-hint> the color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: re...
...n interesting effect sometimes called magic corners: the corners nearest to the starting and ending points have the same color as their respective starting or ending points. customizing gradients by adding more color-stop points on the gradient line, you can create a highly customized transition between multiple colors. a color-stop's position can be explicitly defined by using a <length> or a <percentage>. if you don't specify the location of a color, it is placed halfway between the one that precedes it and the one that follows it. the following two gradients are equivalent. linear-gradient(red, orange, yellow, green, blue); linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); by default, colors transition smoothly from the color at one color stop to the color at the subse...

margin-block-end - CSS: Cascading Style Sheets
bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to margin-block-start, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-end property takes the same values as the margin-left property. ...
...to margin-block-start, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-end property takes the same values as the margin-left property. ...

margin-block-start - CSS: Cascading Style Sheets
bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to margin-block-end, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-start property takes the same values as the margin-left property. ...
...to margin-block-end, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-start property takes the same values as the margin-left property. ...

margin-block - CSS: Cascading Style Sheets
and margin-left property depending on the values defined for writing-mode, direction, and text-orientation. constituent properties this property is a shorthand for the following css properties: margin-block-end margin-block-start syntax values the margin-block property takes the same values as the margin-left property. ...
...ties this property is a shorthand for the following css properties: margin-block-end margin-block-start syntax values the margin-block property takes the same values as the margin-left property. ...

margin-inline-end - CSS: Cascading Style Sheets
nd: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element. values the margin-inline-end property takes the same values as the margin-left property. ...
...o margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element. values the margin-inline-end property takes the same values as the margin-left property. ...

margin-inline-start - CSS: Cascading Style Sheets
ner's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. values the margin-inline-start property takes the same values as the margin-left property. ...
... to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. values the margin-inline-start property takes the same values as the margin-left property. ...

offset-distance - CSS: Cascading Style Sheets
the offset-distance css property specifies a position along an offset-path for an element to be placed. 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). 100% represents the total length of the path (when the offset-path is defined as a basic shape or path()). ...
...ath */ 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). 100% represents the total length of the path (when the offset-path is defined as a basic shape or 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. if you want to a...

padding-block-end - CSS: Cascading Style Sheets
ientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-le...
...ty. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-inline-start, and padding-inline-end, which define the other paddings of the element. ...

padding-block-start - CSS: Cascading Style Sheets
ation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. description this property corresponds to the padding-top, padding-right, padding-bottom, or ...
...erty. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-end, padding-inline-start, and padding-inline-end, which define the other paddings of the element. ...

padding-block - CSS: Cascading Style Sheets
shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. /* <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. constituent properties ...
... padding-left property depending on the values defined for writing-mode, direction, and text-orientation. constituent properties this property is a shorthand for the following css properties: padding-block-end padding-block-start syntax values the padding-block property takes the same values as the padding-left property. ...

padding-inline-end - CSS: Cascading Style Sheets
t orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-...
...rty. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-block-end, and padding-inline-start, which define the other paddings of the element. ...

padding-inline-start - CSS: Cascading Style Sheets
ientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. 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. description this property corresponds to the padding-top, padding-right, padding-bottom, ...
...perty. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-block-end, and padding-inline-end, which define the other paddings of the element. ...

padding-inline - CSS: Cascading Style Sheets
rthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
...dding-inline-start syntax values the padding-inline property takes the same values as the padding-left property. description values for this property correspond 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. ...

radial-gradient() - CSS: Cascading Style Sheets
nter. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. use the standard keywords only, as some implementations have already dropped those older variants. <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. including two stop positions is equivalent to declaring two color stops with the same color at the two posit...
...n ending shape, and two or more color-stop points. to create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). the ending shape may be either a circle or an ellipse. color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. each shape is a single color determined by the color on the gradient ray it intersects. examples simple gradient <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient...

repeat() - CSS: Cascading Style Sheets
l, 10px [col-start] 30% [col-middle] 400px [col-end]) /* <fixed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) syntax values <length> a positive integer length. <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...
... <flex> a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-sized track takes a share of the remaining space in proportion to its flex factor. ...

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. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll containe...
...o the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommendation initial definition ...

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. auto the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll containe...
...o the offset is determind by the user agent. this will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. 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. candidate recommendation initial definition ...

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>. auto the offset is determind by the user agent. this will generally be 0px, but the user agent is free to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll co...
... the offset is determind by the user agent. this will generally be 0px, but the user agent is free to detect and do something else if a non-zero value is more appropriate. 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. candidate recommendation initial definition ...

text-overflow - CSS: Cascading Style Sheets
vior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). if two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line. 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>. values clip the default for this property. this keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. to clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: '';. ...
...> the <string> to be used to represent clipped text. the string is displayed inside the content area, shortening the size of the displayed text. if there is not enough space to display the string itself, it is clipped. fade this keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge. 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 argument determines the distance over which the fade effect is applied. the <percentage> is resolved against the width of the line box. values lower than 0 are clipped to 0. values greater than the width of the line box are clipped to...

translateX() - CSS: Cascading Style Sheets
the translatex() css function repositions an element horizontally on the 2d plane. its result is a <transform-function> data type. note: translatex(tx) is equivalent to translate(tx, 0) or translate3d(tx, 0, 0). 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. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. ...

translateY() - CSS: Cascading Style Sheets
the translatey() css function repositions an element vertically on the 2d plane. its result is a <transform-function> data type. note: translatey(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0). 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. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-c...
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. 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
the marquee. possible values are scroll, slide and alternate. if no value is specified, the default value is scroll. bgcolor sets the background color through color name or hexadecimal value. direction sets the direction of the scrolling within the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. height sets the height in pixels or percentage value. hspace sets the horizontal margin loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll continuously. scrollamount sets the amount of scrolling at each interval in pixels. the default value is 6. scrolldelay sets the interval between each scroll movement in milliseconds. the default value i...
... value is 6. scrolldelay sets the interval between each scroll movement in milliseconds. the default value is 85. note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is specified. truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is present, those values are not ignored. vspace sets the vertical margin in pixels or percentage value. width sets the width in pixels or percentage value. event handlers onbounce fires when the marquee has reached the end of its scroll position. it can only fire when the behavior attribute is set to alternate. onfinish fires when the marquee has finished the amount of scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number tha...

<object> - HTML: Hypertext Markup Language
ated by a subsequent <object> element. in html5, repeat the <object> element completely each that that the resource is reused. formhtml5 the form element, if any, that the object element is associated with (its form owner). the value of the attribute must be an id of a <form> element in the same document. height the height of the displayed resource, in css pixels. -- (absolute values only. no percentages) name the name of valid browsing context (html5), or the name of the control (html 4). standbyhtml 4 onlyobsolete since html5 a message that the browser can show while loading the object's implementation and data. tabindexhtml 4 onlyobsolete since html5 the position of the element in the tabbing navigation order for the current document. type the content type of the resource specified...
...y data. at least one of data and type must be defined. typemustmatchhtml5 this boolean attribute indicates if the type attribute and the actual content type of the resource must match to be used. usemap a hash-name reference to a <map> element; that is a '#' followed by the value of a name of a map element. width the width of the display resource, in css pixels. -- (absolute values only. ...

<table>: The Table element - HTML: Hypertext Markup Language
if set to 0, the frame attribute is set to void. to achieve a similar effect, use the css border shorthand property. cellpadding this attribute defines the space between the content of a cell and its border, displayed or not. if the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. 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. the same is true for the total horizontal space (left and right). to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements. cellspacing this attribute defines the size ...
...red and the total vertical space (top and bottom) will represent this value. the same is true for the total horizontal space (left and right). to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements. cellspacing this attribute defines the size of the space between two cells in a percentage value or pixels. the attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. to achieve a similar effect, apply the border-spacing property to the <table> element. border-spacing does not ...

<video>: The Video Embed element - HTML: Hypertext Markup Language
tal length) of the media in seconds, on the media's timeline. if no media is present on the element, or the media is not valid, the returned value is nan. if the media has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. 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. specifically, the image would raster at these dimensions and naturalwidth/naturalheight on images would return the values specified in this attribute. explainer, examples loop a boolean attribute; if specified, the browser will automat...
...y need to start downloading the video for playback. the specification does not force the browser to follow the value of this attribute; it is a mere hint. src the url of the video to embed. this is optional; you may instead use the <source> element within the video block to specify the video to embed. width the width of the video's display area, in css pixels (absolute values only; no percentages). events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. canplaythrough the browser estimates it can pla...

Intl.PluralRules() constructor - JavaScript
imumsignificantdigits in the other. if at least one property from the second group is defined, then the first group is ignored. minimumintegerdigits the minimum number of integer digits to use. possible values are from 1 to 21; the default is 1. minimumfractiondigits the minimum number of fraction digits to use. 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). maximumfractiondigits the maximum number of fraction digits to use. possible values are from 0 to 20; the default for plain number formatting is the larger of minimumfractiondigits and 3; the default for currency ...
...tiondigits the maximum number of fraction digits to use. 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. minimumsignificantdigits the minimum number of significant digits to use. possible values are from 1 to 21; the default is 1. maximumsignificantdigits the maximum number of significant digits to use. possible values are from 1 to 21; the default is 21. examples basic usage in basic use without specifying a locale, a formatte...

encodeURIComponent() - JavaScript
"content-disposition: attachment; filename*=utf-8''my%20file%282%29.txt" function encoderfc5987valuechars(str) { return encodeuricomponent(str). // note that although rfc3986 reserves "!", rfc5987 does not, // so we do not need to escape it replace(/['()]/g, escape). // i.e., %27 %28 %29 replace(/\*/g, '%2a'). // 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). // note that although rfc3986 reserves "!", rfc5987 does not, // so we do not need to escape it replace(/['(...
.../ note that although rfc3986 reserves "!", rfc5987 does not, // so we do not need to escape it replace(/['()*]/g, c => "%" + c.charcodeat(0).tostring(16)). // 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. ...

baseline-shift - SVG: Scalable Vector Graphics
r superscript. note: as a presentation attribute baseline-shift can be used as a css property. note: this property is going to be deprecated and authors are advised to use vertical-align instead. ...
... 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. super the dominant-baseline is shifted to the default position for superscripts. <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. specifications specification status comment ...

cx - SVG: Scalable Vector Graphics
ygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape. ...
... radialgradient for <radialgradient>, cx defines the x-axis coordinate of the end circle for the radial gradient. ...

cy - SVG: Scalable Vector Graphics
ent"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape. ...
... radialgradient for <radialgradient>, cy defines the y-axis coordinate of the end circle for the radial gradient. ...

flood-opacity - SVG: Scalable Vector Graphics
specifications specification status comment filter effects module level 1the definition of 'flood-opacity' in that specification. working draft aligned the v...
...yle="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. specifications specification status comment filter effects module level 1the definition of 'flood-opacity' in that specification. working draft aligned the value to the css <alpha-value> value. scalable vector graphics (svg) 1.1 (second edition)the definition of...

markerHeight - SVG: Scalable Vector Graphics
the markerheight attribute represents the height of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes. 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. relative values refer to the height specified via the viewbox and preserveaspectratio attributes. <number> this value defines the height of the marker in the units defined by the markerunits attribute. a value of zero disables rendering of the element and negative values are an error. specifications specification status co...
...butes. <number> this value defines the height of the marker in the units defined by the markerunits attribute. a value of zero disables rendering of the element and negative values are an error. specifications specification status comment scalable vector graphics (svg) 2the definition of 'markerheight' in that specification. candidate recommendation allowed percentage and number values. scalable vector graphics (svg) 1.1 (second edition)the definition of 'markerheight' in that specification. recommendation initial definition ...

markerWidth - SVG: Scalable Vector Graphics
the markerwidth attribute represents the width of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes. 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. relative values refer to the width specified via the viewbox and preserveaspectratio attributes. <number> this value defines the width of the marker in the units defined by the markerunits attribute. a value of zero disables rendering of the element and negative values are an error. specifications specification status comment...
...ributes. <number> this value defines the width of the marker in the units defined by the markerunits attribute. a value of zero disables rendering of the element and negative values are an error. specifications specification status comment scalable vector graphics (svg) 2the definition of 'markerwidth' in that specification. candidate recommendation allowed percentage and number values. scalable vector graphics (svg) 1.1 (second edition)the definition of 'markerwidth' in that specification. recommendation initial definition ...

r - SVG: Scalable Vector Graphics
width="60" height="60" fill="url(#mygradient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#mygradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size. with a value lower or equal to zero the circle won't be drawn at all. 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. radialgradient for <radialgradient>, r defines the radius of the end circle for the radial gradient. the gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle. ...
...y for circles. radialgradient for <radialgradient>, r defines the radius of the end circle for the radial gradient. the gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle. a value of lower or equal to zero will cause the area to be painted as a single color using the color and opacity of the last gradient <stop>. value <length> | <percentage> default value 50% animatable yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'r' in that specification. candidate recommendation definition as a geometry property scalable vector graphics (svg) 2the definition of 'r' in that specification. candidate recommendation ...

refX - SVG: Scalable Vector Graphics
the refx attribute defines the x coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refx defines the x coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. 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. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of t...
...coordinate. for backwards compatibility, the behavior when refx is not specified on a <symbol> element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker> element. 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. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. ...

refY - SVG: Scalable Vector Graphics
the refy attribute defines the y coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refy defines the y coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. 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. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of ...
...coordinate. for backwards compatibility, the behavior when refy is not specified on a <symbol> element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker> element. 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. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes.

rx - SVG: Scalable Vector Graphics
y="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape. with a value lower or equal to zero the ellipse won't be drawn at all. 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. rect for <rect>, rx defines the x-axis radius of the ellipse used to round off the corners of the rectangle. the way the value of the rx attribute is interpreted depend on both the ry attribute an...
...ut not for ry (or the opposite), then the browser will consider the missing value equal to the defined one. if neither rx nor ry has a properly specified value, then the browser will draw a rectangle with square corners. if rx is greater than half of the width of the rectangle, then the browser will consider the value for rx as half of the width of the rectangle. 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. specifications specification status comment scalable vector graphics (svg) 2the definition of 'rx' in that specification. candidate recommendation definition as a geo...

ry - SVG: Scalable Vector Graphics
y="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape. with a value lower or equal to zero the ellipse won't be drawn at all. 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. rect for <rect>, ry defines the y-axis radius of the ellipse used to round off the corners of the rectangle. the way the value of the ry attribute is interpreted depend on both the rx attribute an...
...ut not for rx (or the opposite), then the browser will consider the missing value equal to the defined one. if neither ry nor rx has a properly specified value, then the browser will draw a rectangle with square corners. if ry is greater than half of the width of the rectangle, then the browser will consider the value for ry as half of the width of the rectangle. 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. specifications specification status comment scalable vector graphics (svg) 2the definition of 'ry' in that specification. candidate recommendation definition as a geo...

textLength - SVG: Scalable Vector Graphics
eb fonts failing to load (or not having loaded yet). 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. <number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using...
...ntents of the widthdisplay box are updated with the new value as well, and we're finished. result here's what the example looks like. try dragging the slider around to get a feel for what it does. specifications specification status comment scalable vector graphics (svg) 2the definition of 'textlength' in that specification. candidate recommendation allowed percentages and numbers as values. scalable vector graphics (svg) 1.1 (second edition)the definition of 'textlength' in that specification. recommendation initial definition ...

transform-origin - SVG: Scalable Vector Graphics
the transform-origin svg attribute sets the origin for an item’s transformations. note: as a presentation attribute in svg, transform-origin corresponds in syntax and behavior to the transform-origin property in css, and can be used as css property to style svg. see the css transform-origin property for more information. 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. offsets that are not expli...
...lues, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. if two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical 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. three-value syntax: the first two values are the same as for the two-value syntax. the thir...

viewBox - SVG: Scalable Vector Graphics
th and height. the numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated svg element (not the browser viewport). ...
...nchanged 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/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 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/2...

x1 - SVG: Scalable Vector Graphics
and <lineargradient> 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> line for <line>, x1 defines the x coordinate of the starting point of the line. ...
... 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 coordinate of the starting point of the gradient vector used to map the gradient stop values. ...

x2 - SVG: Scalable Vector Graphics
>, and <lineargradient> 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> line for <line>, x2 defines the x coordinate of the ending point of the line. ...
...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 coordinate of the ending point of the gradient vector used to map the gradient stop values. ...

y1 - SVG: Scalable Vector Graphics
and <lineargradient> 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> line for <line>, y1 defines the y coordinate of the starting point of the line. ...
..." 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 coordinate of the starting point of the gradient vector used to map the gradient stop values. 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. --> <lineargradient y1="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%...

y2 - SVG: Scalable Vector Graphics
and <lineargradient> 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> line for <line>, y2 defines the y coordinate of the ending point of the line. ...
..."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 coordinate of the ending point of the gradient vector used to map the gradient stop values. 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. --> <lineargradient y2="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%"...

<ellipse> - SVG: Scalable Vector Graphics
he exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. ...
...ngle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. 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. value type: <number> ...

<textPath> - SVG: Scalable Vector Graphics
; default value: none; animatable: yes side which side of the path the text should be rendered. value type: left|right ; default value: left; animatable: yes spacing how space between glyphs should be handled. value type: auto|exact ; default value: exact; animatable: yes startoffset how far the beginning of the text should be offset from the beginning of the path. ...
...matable: yes spacing how space between glyphs should be handled. value type: auto|exact ; default value: exact; animatable: yes startoffset how far the beginning of the text should be offset from the beginning of the path. value type: <length>|<percentage>|<number> ; default value: 0; animatable: yes textlength the width of the space into which the text will render. ...

<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:decimal-format> element defines the characters and symbols that are to be used in converting numbers into strings using theformat-number( ) function. 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. optional attributes name specifies a name for this format. decimal-separator specifies the decimal point character. the default is (.). grouping-separator specifies the thousands separator character. the default is (,). infinity specifies the string ...
...r. the default is (.). grouping-separator specifies the thousands separator character. the default is (,). infinity specifies the string used to represent infinity. the default is the string "infinity". minus-sign specifies the minus sign character. the default is the hyphen (-). nan specifies the string used when the value is not a number. the default is the string "nan". percent specifies the percentage sign character. the default is (%). per-mille specifies the per thousand character. the default is (‰). zero-digit specifies the digit zero character. the default is (0). digit specifies the character used in the format pattern to stand for a digit. the default is (#). pattern-separator specifies the character separating positive and negative subpat...

Using the Stylesheet Service - Archive of obsolete content
which to load the stylesheets. the order the sheets are applied in is undefined. usage notes stylesheets added using this service get applied to both chrome and content documents. remember to declare the correct namespace if you want to apply stylesheets to xul documents. registered style sheets are not remembered across restarts. loadandregistersheet fails if css contains #id. '#' must be percent-encoded, details see bug 659650. historical information nsistylesheetservice was introduced in firefox 1.5. in firefox 1.5 and 2, adding and removing such style sheets takes effect upon the next load of a page. in firefox 3, the changes take effect immediately, though some declarations (especially those affecting xul) won't work until a reload. backwards compatibility you can check for the a...

MMgc - Archive of obsolete content
deletion traces etc. if you're trying to see why memory is not getting reclaimed; gc::whospointingatme() can be called from the msvc debugger and will spit out objects that are pointing to the given memory location. 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. it can also display stack traces for where every object was allocated. the report can be output to the console or to a file, and can be configured to be displayed pre/post sweep or via api call. the memory profiler use srtti and stack traces to get information by location and type: class avmplus::growablebuffer - 24.9% - 3015 kb 514 items, avg 6007b 98.9% - 2983 kb - 512 i...

Using content preferences - Archive of obsolete content
t.full-zoom view / zoom example: "1.10000002384186" (rounding variant of "1.1") related about:config preferences: browser.zoom.full boolean, set by the menu item view / zoom / zoom text only. despite the confusion in names, this preference is not site-specific. 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. browser.upload.lastdir path of a filesystem directory this preference i...

Block and Line Layout Cheat Sheet - Archive of obsolete content
e cell inner frames, absolutely positioned wrapper frames, and floated frames when the frame is created. nslinebox a block consists of lines and other blocks, stacked vertically. a block frame has one nslinebox for each line, and one nslinebox for each block child. these are stored as a doubly-linked list in the mlines member of nsblockframe. 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. nshtmlreflowstate the current state of reflow, built up as reflow recursively descends the frame tree. this is "passed in" to a child frame from its parent, and provides the constraints in which the ...

Layout System Overview - Archive of obsolete content
g text and graphics to fit within a given screen area sounds simple, but the interaction of in-flow and out-of-flow elements, the considerations of incremental page rendering, and the performance concerns of dynamic content changes makes for a system that has a lot of work to do, and a lot of data to manage. here are the high-level classes that make up the layout system. 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). presentation shell / presentation context together the presentation shell and the presentation context provide the root of the current presentation. the original design provided for a single presentation shell to manage multiple presentation contexts, t...

HostWindow - Archive of obsolete content
e splitter itself cannot be hidden as it is the only ui to show a collapsed sidebar. when not displayed the entire sidebar area, including the splitter are hidden. note: the sidebar is currently not supported. we are considering whether to support a sidebar in future versions of prism and welcome input on this subject. 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. to display the status bar, the statusbar option in webapp.ini must be set to true. command menu - a popup menu showing several prism-specific commands. ...

Rsyncing the CVS Repository - Archive of obsolete content
the mozilla.org cvs repository can be downloaded via rsync. this is useful for faster diffs or for attempting to import it into another version control system. here's how to do it: rsync -az --delete --stats cvs-mirror.mozilla.org::mozilla ~/cvs-mirror this will mirror the cvs repository into ~/cvs-mirror. optionally, the --progress option will show the progress for each file, and a percentage of the total files that are transferred. at the time of this writing, this will take 2.8 gb of disk space. note that for using this copy, the nolocks line in cvsroot/config will need to be commented out, as it requires a modified cvs binary. references thanks also to bz for telling me the exact commands that i need ...

Table Layout Regression Tests - Archive of obsolete content
tyleverifytree is disabled note: frameverifytree is disabled note: verifyreflow is disabled ++webshell == 3 ++domwindow == 3 running baseline test for e:\moz_src\mozilla\layout\html\tests\block\rtest.lst. ...

Actionscript Performance Tests - Archive of obsolete content
to capture the maximum private bytes memory (high water mark) for a test. by default each test is run a single time. to run each test multiple times use the --iterations flag. when the number of iterations is greater than 2 all times are displayed in [], faster time is displayed in the output column, and the 95% confidence interval is calculated. the 95% confidence interval is the calculated percentage of the mean value to fall within 95% of the measured results. for example if the mean is 100 and the 95% confidence interval is 2%, 95% of the expected values should fall between 98 and 102. to compare two vms against each other export avm2=<path to 2nd vm> or use --avm2=<path to 2nd vm>. the percentage difference is calculated between the two vms. see the --help usage for more details abo...

URIs and URLs - Archive of obsolete content
tion and length) to each basic segment and for the more global segments like path and prehost for example. necko provides pre written urlparsers for schemes based on hierachical naming systems. escaping to be able to parse an url safely it is sometimes necessary to "escape" certain characters, to hide them from the parser. an escaped character is encoded as a character triplet, consisting of the percent character "%" followed by the two hexadecimal digits representing the octet code. for example, "%20" is the escaped encoding for the us-ascii space character. another quote from rfc 2396: a uri is always in an "escaped" form, since escaping or unescaping a completed uri might change its semantics. normally, the only time escape encodings can safely be made is when the uri is being created from ...

Binding Attachment and Detachment - Archive of obsolete content
an individual url in the set consists of the binding document's url and the binding's document-unique identifier. ...

progressmeter.max - Archive of obsolete content
...

Index - Archive of obsolete content
you may also place the script inline inside the opening and closing script tags. 1171 scrollbar xul elements, xul reference when a container's contents which are larger that the size of the container, scroll bars may be placed at the side of the container to allow the user to scroll around in the container. the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. 1172 scrollbox needscontent, reference, référence(2), xul elements, xul reference a box that has additional functions that can be used to scroll the content. note that a scrollbox doesn't cause...

Progress Meters - Archive of obsolete content
inate progress meter where it fills up as the task completes. if this is set to undetermined, the progress meter is indeterminate where you do not know the length of time. the value determined is the default if you do not specify this attribute. value the current value of the progress meter. you should only use this for a progress meter that is determinate. the value should be set to an integer percentage from 0 to 100. the value would be changed by a script as the task completes. max the maximum value of the progress meter. should be used only with determinate. the find files example let's add a progress meter to our find file dialog. we would normally put an indeterminate progress meter as we don't know how many files we'll be searching or how long the search will take. however, we'll a...

Property Files - Archive of obsolete content
ill notice the formatting codes %1$s and %2$s is used, and replaced different order in the array. formatting code %n$s is specify the position of corresponding parameter directly. although the word order is not the same in all the languages, by using getformattedstring() the specification of the order can be put out the property files. 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"). non-ascii characters, utf-8 and escaping gec...

Using Spacers - Archive of obsolete content
ote that other factors, such as the button labels and button minimum sizes, will affect the actual sizes of the buttons. for instance, a button won't shrink less than the space needed to fit its label. specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely. it means that the element is not flexible at all. 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. you may have noticed that when you resize the find file dialog vertically, the buttons resize themselves to fit the height of the window. this is because all of the buttons have an implied vertical flex given to them by the window. in the next section we'll learn how to change this. find files example so far ...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
ist and menubar popup see popupset popupset be careful regarding keyboard access of popups. i don't see a means of accessing a popup brought up via the popup attribute. using context="popupid" allows access via shift+f10 on windows and linux. ...

progressmeter - Archive of obsolete content
bel="example" onmouseover="setloading(true)" onmouseout="setloading(false)"/> function setloading(state){ document.getelementbyid('myprogress').mode = (state) ? 'undetermined' : 'determined'; } attributes max type: integer the maximum value that progressmeter may have. the default value if not specified is 100 such that the value may be used as a percentage. mode type: one of the values below a determinedprogressmeter is used in cases where you know how long an operation will take. an undeterminedprogressmeter can be used when you don't and will typically be drawn as a spinning barber pole. determined the progress meter uses its value attribute to determine the amount of the bar that is filled in. undetermined the progressmet...

scrollbar - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] when a container's contents which are larger that the size of the container, scroll bars may be placed at the side of the container to allow the user to scroll around in the container. the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. attributes curpos, increment, maxpos, pageincrement examples <scrollbar curpos="5" maxpos="50"/> attributes curpos type: integer the current position of the scrollbar, which ranges from 0 to...

2006-09-29 - Archive of obsolete content
* ns_unconstrainedsize, but the |width| member must not be. * * @param aavailwidth the available width into which the element is * being placed (i.e., the width of its containing * block). * @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 aborder the sum of the left and right border widths of the * frame. * @param apadding the sum of the left and right margins of the * frame, including actual values resulting from * percentages. * @param ashrinkwrap whether the frame is in...

-ms-content-zoom-limit-max - Archive of obsolete content
the -ms-content-zoom-limit-max css property is a microsoft extension that specifies the selected elements' maximum zoom factor. initial value400%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe largest allowed zoom factor. a zoom factor of 100% corresponds to no zooming. larger values zoom in. smaller values zoom out.computed valueas specifiedanimation typediscrete syntax values <percentage> the maximum zoom factor. formal syntax <percentage> specifications not part of any specification. remarks this property constrains the limit for touch zooming as well as values of the mscontentzoomfactor property. this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. s...

-ms-content-zoom-limit-min - Archive of obsolete content
the -ms-content-zoom-limit-min css property is a microsoft extension that specifies the minimum zoom factor. initial value100%applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednopercentagesthe smallest allowed zoom factor. a zoom factor of 100% corresponds to no zooming. larger values zoom in. smaller values zoom out.computed valueas specifiedanimation typediscrete syntax values <percentage> the minimum zoom factor. formal syntax <percentage> specifications not part of any specification. remarks this property constrains the limit for touch zooming as well as values of the mscontentzoomfactor property. this property has no effect on non-zoomable elements. see -ms-content-zooming for details on zoomable elements. starting with windo...

-ms-content-zoom-limit - Archive of obsolete content
the -ms-content-zoom-limit css shorthand property is a microsoft extension that specifies values for the -ms-content-zoom-limit-min and -ms-content-zoom-limit-max properties. 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. a zoom factor of 100% corresponds to no zooming. larger values zoom in. smaller values zoom out.-ms-content-zoom-limit-min: the smallest allowed zoom factor. a zoom factor of 100% corresponds to no zooming. larger values zoom in. smaller values zoom out.computed valueas each of the properties of ...

-moz-scrollbar-thumb-proportional - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. 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. otherwise it's 0. media: media/visual accepts min/max prefixes: no ...

Game monetization - Game development
ng your game may benefit, but your game has to be addictive, which isn't as easy as it sounds. you still need to plan it out, and at some point you'll need a bit of luck too. if your game goes viral and people start sharing it, you can get a lot of downloads and money out of adverts. there are many companies offering advert systems — you sign up and allow them to show adverts in exchange for a percentage of the earnings. google adsense is said to be the most effective one, but it's not designed for games and it's a pretty bad practice to use it for that purpose. instead of risking of having your account closed and all the money blocked try to use the usual, gamedev targeted portals like leadbolt. they offer easy to implement systems to show the adverts in your games and split the earnings with...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
a compiler or interpreter that parses a source code file. 319 perceived performance glossary, perceived performance, reference, web performance perceived performance is a subjective measure of how fast a website seems to a user based on load time and site responsiveness. this measure relies on human perception, not an objective metric like time to interactive. 320 percent-encoding glossary, webmechanics percent-encoding is a mechanism to encode 8-bit characters that have specific meaning in the context of urls. it is sometimes called url encoding. the encoding consists of substitution: a '%' followed by the hexadecimal representation of the ascii value of the replace character. 321 pixel design, glossary, graphics a pixel is the smal...

Speed index - MDN Web Docs Glossary: Definitions of Web-related terms
speed index (si) is a page load performance metric that shows you how quickly the contents of a page are visibly populated. it is the average time at which visible parts of the page are displayed. expressed in milliseconds, and dependent on the size of the viewport, the lower the score, the better. 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. ...

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
e different controls of a web form, for example? you can find more details about keyboard controls in our cross browser testing using native keyboard accessibility section. in terms of statistics, a significant number of people have mobility impairments. the u.s. 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%". people with cognitive impairments cognitive impairment refers to a broad range of disabilities, from people with intellectual disabilities who have the most-limited capabilities, to all of us as we age and have difficulty thinking and remembering. the range includes people with mental illnesses, such as depression and schizophrenia. it...

Advanced styling effects - Learn web development
ve things you can do. one very nice property, which can help you bring interest to your designs, is the filter property. this property enables photoshop-like filters right from css. in the example below we have used two different values for filter. the first is blur() — this function can be passed a value to indicate how much the image should be blurred. 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. you could also swap the values for some others. try contrast(200%), invert(100%) or hue-rotate(20deg) on the live example below. take a look at the mdn page for filter for many other options you could try. you can apply filters to any element ...

Test your skills: sizing - Learn web development
n editor or in an online editor. task two this task has a box, which contains another box. your task is to make the inner box 60% of the width of the outer box. the value of the box-sizing property is set to border-box, which means that the total width includes any padding and border. 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. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task three this task has two images in boxes. one image is smaller than the box, the other is larger and breaking out of the box. if you imagine that the...

Supporting older browsers - Learn web development
sers, you may find you can give a decent experience by using css in this way. we add a simpler layout based on older and well-supported techniques, then use the newer css to create the layout that over 90% of your audience will see. there are cases, however, when the fallback code will need to include something that the new browsers will also interpret. 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. in grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the grid layout is introdu...

Fundamental text and font styling - Learn web development
of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font size in our previous module's css values and units article, we reviewed length and size units. 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. this is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. ems: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a cap...

How much does it cost to do something on the Web? - Learn web development
next steps now that you understand what kind of money your website may cost you, it's time to s...

Other form controls - Learn web development
meters and progress bars meters and progress bars are visual representations of numeric values. progress a progress bar represents a value that changes over time up to a maximum value specified by the max attribute. such a bar is created using a <progress> element. <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. the content inside the <progress> element is a fallback for browsers that don't support the element and for screen readers to vocalize it. meter a meter bar represents a fixed value in a range delimited by max and min values. this value is visually rendered as a bar, and to know how this bar looks, we compar...

Use JavaScript within a webpage - Learn web development
it wisely, or it can become a disaster if you use scripting without care. to make javascript work in your favor, it's worth knowing about certain best practices for adding javascript: make all content available as (structured) text. rely on html for your content as much as possible. for example, if you've implemented a nice javascript progress bar, make sure to supplement it with matching text percentages inside the html. likewise, your drop-down menus should be structured as unordered lists of links. make all functionality accessible from the keyboard. let users tab through all controls (e.g., links and form input) in a logical order. if you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events. test your site using a keyboard on...

Creating hyperlinks - Learn web development
also note the use of the question mark (?) to separate the main url from the field values, and ampersands (&) to separate each field in the mailto: url. this is standard url query notation. read the get method to understand what url query notation is more commonly used for. here are a few other sample mailto urls: mailto: mailto:nowhere@mozilla.org mailto:nowhere@mozilla.org,nobod...

Responsive images - Learn web development
, but for now let's just say that a media condition describes a possible state that the screen can be in. in this case, we are saying "when the viewport width is 600 pixels or less". 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. you may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). the browser ignores everything after the first matching condition, so be careful how you order the media conditions. so, with these attributes in place, the browser will: look at its device width. work out which media condition in the siz...

Handling text — strings in JavaScript - Learn web development
ls, for example: let examscore = 45; let examhighestscore = 70; examreport = `you scored ${ examscore }/${ examhighestscore } (${ math.round((examscore/examhighestscore*100)) }%). ${ examscore >= 49 ? 'well done, you passed!' : 'bad luck, you didn\'t pass this time.' }`; the first two placeholders here are pretty simple, only including a simple value in the string. the third one calculates a percentage result and rounds it to the nearest integer. the fourth one includes uses a ternary operator to check whether the score is above a certain mark and print a pass or fail message depending on the result. another point to note is that if you want to split a traditional string over multiple lines, you need to include a newline character, \n: output = 'i like the song "' + song + '".\ni gave it...

The business case for web performance - Learn web development
ndicators setting key performance indicators (kpi) as objectives can hiltie performance objectives that are also business objectives. kpis can be both a set of important business metrics in measuring the impact of user experience and performance on the business's top line, and a way of demonstrating the benefits of prioritizing performance. 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. when a business site is slow, it can prevent users from completing their intended task. this can lead to low conversion rates. time on site the average time that your users in aggregate spend on your site. when a site performance slowly, users are more likely to abandon the site prematu...

Accessibility API cross-reference
a pane or frame in the current window pane n/a region or group ? the most common content type in most documents. a paragraph generally encloses distinct portions of content that are not otherwise specified with other block level structure element types such as heading, table or list elements. <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. aria requires the parent to...

Accessibility information for UI designers and developers
it would be like removing the mouse indicator. see also: understanding sc 2.4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font sizes larger, or even provide custom css to meet their specific needs. ensure your design is flexible enough to allow for this. text sizing users should be able to enlarge their text size up to 200 percent without breaking functionality. text spacing users should be able to make the following changes to their text spacing: set line height (leading) to at least 1.5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times the font size this does not mean t...

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
gling guideline 4. ensure user control of rendering. checkpoint title status notes/plans checkpoint title status notes/plans 4.1 configure text size. (p1) c can be changed through preferences, zooming or user style sheet. zooming is really the best solution, because the document retains its look - all font sizes are increased the same percentage. zooming can be controlled via hotkeys ctrl+plus and ctrl+minus the prefs are at preferences, appearances, fonts there is also a hidden pref line that can be added to prefs.js, if you just want to change the minimum font size for a certain font: user_pref("font.minimum-size.x-western", newfontsizeinpoints); for other i18n charsets, change x-western to x-central-euro, x-cyri...

Using the Browser API
ed continues to match the website being shown when the user navigates back and forth through the history. browser.addeventlistener('mozbrowserlocationchange', function (e) { urlbar.value = e.detail; }); zooming in and out the browser content can be programmatically zoomed in and out using the htmliframeelement.zoom() method. this takes a single method — a zoom factor — which dictates the percentage to zoom in or out by. for example, 1.1 would mean "zoom in by 10%", and 0.9 would mean "zoom out by 10%". var zoomfactor = 1; ... zoomin.addeventlistener('touchend',function() { zoomfactor += 0.1; browser.zoom(zoomfactor); }); zoomout.addeventlistener('touchend',function() { zoomfactor -= 0.1; browser.zoom(zoomfactor); }); controlling the stop/reload button next, let's talk abo...

mozbrowserselectionstatechanged
cancut: a boolean indicating whether the cut command can be issued (true) or not (false). cancopy: a boolean indicating whether the copy command can be issued (true) or not (false). canpaste: a boolean indicating whether the paste command can be issued (true) or not (false). zoomfactor a number representing the current zoom factor in the child frame. this is unitless and represents a percentage increase/decrease, e.g. 1.1 is a 10% zoom in, and 0.9% is a 10% zoom out. iscollapsed a boolean indicating whether the current selection is collapsed (true) or not (false). visible a boolean indicating whether the current selection is visible (true) or not (false). states the current state of the selection. example var browser = document.queryselector("iframe"); browser.addeventliste...

HTMLIFrameElement.zoom()
. the zoom() method of the htmliframeelement interface changes the zoom factor of the browser <iframe>'s content. this is particularly useful for zooming in/out on non-touch-enabled devices. syntax var instanceofdomrequest = instanceofhtmliframeelement.zoom(zoomfactor); returns void. parameters zoomfactor a unitless number value representing the amount to zoom in or out. it acts like a percentage, so for example 1.1 would zoom in by 10%, whereas 0.9 would zoom out by 10%. examples var browser = document.queryselector('iframe'); var zoomfactor = 1; zoomin.addeventlistener('touchend',function() { zoomfactor += 0.1; browser.zoom(zoomfactor); }); zoomout.addeventlistener('touchend',function() { zoomfactor -= 0.1; browser.zoom(zoomfactor); }); specification not part of any s...

Download
ile should be launched with the default application associated with the contenttype property or the extension of the target file. onchange function this can be set to a function that is called after other properties change. warning: this property cannot be used if the download is part of a downloadlist. progress read only number progress percent, from 0 to 100. intermediate values are reported only if hasprogress is true. note: you shouldn't rely on this property being equal to 100 to determine whether the download is completed. you should use the individual state properties (for example, the succeeded property) instead. saver read only downloadsaver saver object associated with this download. source rea...

Application Translation with Mercurial
he qexport command which is defined in the .hgrc file (see above): hg qexport > ../firefox-29-aboutprivatebrowsing-v1.patch this creates a patch file called firefox-29-aboutprivatebrowsing-v1.patch containing the changes in the parent directory of de-mozilla-aurora (in this example: c:\mozilla\). proof-reading and altering the patch now proof-read the patch. this detects often more than 90 percent of the possible reasons for the reviewer to not accept the patch. if you find that changes have to be done, edit the real aboutprivatebrowsing.dtd file from the localization repository, save it and follow the steps from exporting the changes as patch (see above). validating the translation in the product this guide hasn't yet a section about the validation of the translation. please follow the ...

Mozilla Content Localized in Your Language
ut, 2). 2 or 3 letters and 3). single letter. and what is the order of year, month and day? reference material can be find here calendar calendar view: which date is considered the first day of the week, sunday or monday? is lunar calendar observed? other regional calendar observed? time format how is time expressed in your language? including 0-24 hr expression, hour, minute and second. percentages how are percentages expressed in your language? digit groups how are digit groups expressed in your language? example: 1.23 (decimal separator) or 1,000 (thousand separator) using comma or period. acronyms do you translate widely accepted acronyms such as cd, dvd, mb? if translated, is there an equavilent acronym and widely accepted in the language? gender are there exceptions to st...

Localization and Plurals
a table entry will populate the bottom box with sample uses of the word for some numbers. install pluralform checker v0.3 extension extension input it would be good to keep this list updated with all the words that need plural forms. people using the extension can then copy/paste this input. ...

Localization content best practices
r example, you shouldn't hard code date formats into applications: %a, %b %e // resulting in wednesday, may 20 this is fine in english, but in italian results in "mercoledì, mag 20", which sounds unnatural. every time you use this kind of structure, you should have a localizable string behind it, and let localizers decide the best order for their language. units another example is localizing percentages or units. some locales use a space between the number and the % symbol, some don't, some use a non-breaking space. splitting splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. when a composite string is needed, try to give the translators "room to move". word order if a strin...

Localization technical reviews
sion's progress. in order to ultimately have your revision included as an official build, your dashboards must be at 100% green. to the right, you'll see the current dashboard page for a german localization. revisions are approved using the buttons in the furthest column to the right. 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. first round approved! once your work is entirely approved, go out and celebrate! you've accomplished a massive undertaking and you deserve to be rewarded! go grab a drink with friends and enjoy your latest success! after you've finished celebrating your first approved release, it's time to start planning for the next one! when you update your localization for the next ...

Mozilla Style System
that forward to the frame's style context. thus, typical calling code looks like this: if (aframe->getstyledisplay()->mopacity < 1.0f) return pr_true; or like this: const nsstyleposition *stylepos = aframe->getstyleposition(); if (stylepos->mwidth.getunit() == estyleunit_coord) { nscoord w = stylepos->mwidth.getcoordvalue(); ... } else if (stylepos->mwidth.getunit() == estyleunit_percent) { ... rule tree style data computation css style sheet backend loading parsing data structures cascading html mapped attribute backend css style attribute backend handling of dynamic changes see also mozilla style system documentation (2002) style system tech talk (2002) ...

Activity Monitor, Battery Status Menu and top
stomized to show any of the available measurements (by right-clicking on the column strip) but only the "energy" tab groups child processes with parent processes, which is useful, so it's the best one to use. the following screenshot shows a customized "energy" tab. the power-related columns are as follows. energy impact / avg energy impact: see the separate section below. % cpu: cpu usage percentage. this can exceed 100% if multiple cores are being used. idle wake ups: in mac os 10.9 this measured "package idle exit" wakeups. this is the same value as powermetrics' "pkg idle" measurement (i.e. task_power_info::task_platform_idle_wakeups obtained from the task_info function.) in mac os 10.10 it appears to have been changed to measure interrupt-level wakeups (a superset of idle wa...

DMD
mi5/dom/xml/nsxmlcontentsink.cpp:1007) } } it tells you that there were 150 heap blocks that were allocated from the program point indicated by the "allocated at" stack trace, that these blocks took up 21,600 bytes, that all 150 blocks had a size of 144 bytes, and that 1,200 of those bytes were "slop" (wasted space caused by the heap allocator rounding up request sizes). it also indicates what percentage of the total heap size and the unreported portion of the heap these blocks represent. within each section, records are listed from largest to smallest. once-reported and twice-reported stack trace records also have stack traces for the report point(s). for example: reported at { #01: mozilla::dmd::report(void const*) (/home/njn/moz/mi2/memory/replace/dmd/dmd.cpp:1740) 0x7f68652581ca #02...

Memory reporting
rs a memory reporter makes one or more memory measurements (a.k.a. reports). 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. see the nsimemoryreporter documentation and nsimemoryreporter.idl for full details. making measurements nsimemoryreporter provides the high-level interface for a memory reporter, but the heart of a memory reporter is the measurement of the "amount". two ways to measure memory reporters can be divided into the two following kinds. traversal-based r...

about:memory
d json. these files can be loaded as is, but they can also be loaded after unzipping. interpreting memory reports almost everything you see in about:memory has an explanatory tool-tip. hover over any button to see a description of what it does. hover over any measurement to see a description of what it means. measurement basics most measurements use bytes as their unit, but some are counts or percentages. most measurements are presented within trees. for example: 585 (100.0%) -- preference-service └──585 (100.0%) -- referent ├──493 (84.27%) ── strong └───92 (15.73%) -- weak ├──92 (15.73%) ── alive └───0 (00.00%) ── dead leaf nodes represent actual measurements; the value of each internal node is the sum of all its chi...

powermetrics
and child processes (in coalitions) is obvious. the meaning of the columns is as follows. name: coalition/process name. process names within coalitions are indented. id: coalition/process id number. cpu ms/s: cpu time used by the coalition/process, per second, during the sample period. the sum of the process values typically exceeds the coalition value slightly, for unknown reasons. 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. high frequency timers, which typically have short time-to-deadlines, can cause high power consumption and should be avoided if possible. wakeups (intr, pkg idle): these two columns co...

tools/power/rapl
in the relevant column instead of a number, and it will contribute zero to the total. 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. options -i --sample-interval. the length of each sample in milliseconds. defaults to 1000. a warning is given if you set it below 50 b...

NSPR's Position On Abrupt Thread Termination
difficult. that is not what this memo is about. this is about providing an api that coaxes people to do the right thing in as many ways as possible. the existence of exit() in the unix/c environment is a perfect example of how programmers will employ the most expediant solution available. the definition of the language c is such that returning from main() is a perfectly fine thing to do. but what percentage of c programs actually bother? in unix, with its complex definition of a protection domain, it happens to work (one might even say it's more efficient) to exit from anywhere. but threads are not processes. if threads have to maintain the same type of resource knowledge as a process, they loose all of their benefit. threads are an implementation strategy to provide the illusion of concurrency w...

Gecko Roles
tions. all objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group. role_combobox represents a combo box; an edit control with an associated list box that provides a set of predefined choices. role_droplist represents the calendar control. role_progressbar represents a progress bar, dynamically showing the user the percent complete of an operation in progress. role_dial represents a dial or knob whose purpose is to allow a user to set a value. role_hotkeyfield represents a hot-key field that allows the user to enter a combination or sequence of keystrokes. role_slider represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values. ro...

Frecency algorithm
s is -1. places with this value can show up in autocomplete results. invalid places have a frecency value of zero, and will not show up in autocomplete results. examples of invalid places are "place:" queries, and unvisited livemark feed entries. the frecency calculation process for the 10 most recent visits (where 10 is determined by places.frecency.numvisits): .. determine percentage bonus for type of visit (ie: the "transition type"): .... 0 (places.frecency.embedvisitbonus) .... 120 (places.frecency.linkvisitbonus) .... 200 (places.frecency.typedvisitbonus) .... 140 (places.frecency.bookmarkvisitbonus) .... 0 (places.frecency.downloadvisitbonus) .... 0 (places.frecency.permredirectvisitbonus) .... 0 (places.f...

nsIAccessibleRole
io, html:input@type="radio", role="radio". role_combobox 46 represents a combo box; an edit control with an associated list box that provides a set of predefined choices. it is used for html:select, xul:menulist, role="combobox". role_droplist 47 represents the calendar control. it is used for date xforms:input. role_progressbar 48 represents a progress bar, dynamically showing the user the percent complete of an operation in progress. it is used for xul:progressmeter, role="progressbar". role_dial 49 represents a dial or knob whose purpose is to allow a user to set a value. role_hotkeyfield 50 represents a hot-key field that allows the user to enter a combination or sequence of keystrokes. role_slider 51 represents a slider, which allows the user to adjust a setting in given incremen...

nsIDownload
0 guid astring the guid of the download that is stored in the database. has the form of twelve alphanumeric characters. read only. mimeinfo nsimimeinfo provides the targets relevant mime information, including its mime type, helper application, and whether or not the helper should be executed automatically once the download is complete. read only. optional percentcomplete long the percentage of the file transfer that has been completed, or -1 if the file's size is unknown. read only. referrer nsiuri the referrer uri of the download. this is only valid for http downloads, and can be null. read only. resumable boolean indicates if the download can be resumed after being paused or not. this is only the case if the downloa...

nsIMemoryReporter
n instantaneous count of things currently in existence. for example, the number of tabs currently open. units_count_cumulative 2 the amount contains the number of times some event has occurred since the application started up. for example, the number of times the user has opened a new tab. the amount returned must never decrease over the lifetime of the application. 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. see also nsim...

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(); }; ...

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; ...

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(); }; ...

Performance
h a 'dummy' (and schema changing) transaction. that is not needed now. you can control the size of the memory cache using the cache_size pragma. this value controls the number of pages of the file that can be kept in memory at once. the page size can be set using the page_size pragma before any operations have been done on the file. 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. sharding the cache between connections by default, storage enables the sqlite shared-cache mode which makes multiple connections to the same database share the same cache. the cache is threadsafe. all you need to do is use services.storage.opendatabase(file). some features (virtual tables, full text indexes) a...

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
rmation, and check on the current version of the plug-in api and the browser. displaying a status line message users are accustomed to checking the ui status line at the bottom of the browser window for updates on the progress of an operation or the url of a link on the page. you can also use the status line to notify the user of plug-in-related information. 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. in fact, your plug-in interface should be consistent with the rest of the browser in this way. to accomplish this, the plug-in calls the npn_status method to display your message on the status line. void npn_status(npp instance, const char *message); th...

Aggregate view - Firefox Developer Tools
by the amount of memory occupied by objects of that type. for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. the "total count" column shows you the number of objects of each category that are currently allocated. 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. the screenshots in this section are taken from a snapshot of the monster example page. for example, in the screenshot above, you can see that: there are four array objects that account for 15% of the total heap. next to the type's name, there's an icon that contains three stars arranged in a triangle: click this to see every instance of that t...

Dominators view - Firefox Developer Tools
n one memory graph, and therefore more than one root. there may be many (often temporary) roots. for example: variables allocated on the stack need to be rooted, or internal caches may need to root their​ elements. any other node that's referenced from two different roots (since in this case, neither root dominates it). 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. entries are ordered by the amount of memory that they retain. for example: in this screenshot we can see five entries under "gc roots". the first two are call and window objects, and retain about 21% and 8% of the total size of the memory snapshot, respectively. y...

Migrating from Firebug - Firefox Developer Tools
ce but doesn't go into detail regarding javascript function calls. view javascript call performance what comes nearest to firebug's profiler output is the call tree view in the performance panel. 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. jump to function declaration like in firebug's profiler output the call tree view of the devtools' performance tool allows to jump to the line of code ...

Allocations - Firefox Developer Tools
f the allocations view the allocations view looks something like this: the allocations view periodically samples allocations that are made over the recording. each row represents a function in which at least one allocation-sample was taken during the recording. 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. so in the example above: 8904 samples were taken in signallater(), which is 28.57% of the total number of samples taken those samples allocated 1102888 bytes, which is 30.01% of the total memory al...

Call Tree - Firefox Developer Tools
er of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function). total time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. these numbers should roughly be the same as the number of samples. total cost is that number as a percentage of the total number of samples in the selected portion of the recording. self time is calculated as the time spent in that particular function, excluding its children. this comes from the captured stacks where this function is the leafmost function. self cost is calculated from self time as a percentage of the total number of samples in the selected portion of the recording. in the current ...

Background Tasks API - Web APIs
mentbyid("log"); next we have variables which reference the dom elements we need to interact with. these elements are: totaltaskcountelem is the <span> we use to insert the total number of tasks created into the status display in the progress box. currenttasknumberelem is the element used to display the number of tasks processed so far. progressbarelem is the <progress> element showing the percentage of the tasks processed so far. startbuttonelem is the start button. logelem is the <div> we'll insert logged text messages into. let logfragment = null; let statusrefreshscheduled = false; finally, we set up a couple of variables for other items: logfragment will be used to store a documentfragment that's generated by our logging functions to create content to append to the log when t...

CSS numeric factory functions - Web APIs
the css numeric factory functions, such as css.em() and css.turn() are methods that return cssunitvalues with the value being the numeric argument and the unit being the name of the method used. these functions create new numeric values less verbosely than using the cssunitvalue.cssunitvalue() constructor. ...

CSSKeyframesRule - Web APIs
hrown. csskeyframesrule.deleterule() deletes a keyframe rule from the current csskeyframesrule. the parameter is the index of the keyframe to be deleted, expressed as a domstring resolving as a number between 0% and 100%. csskeyframesrule.findrule() returns a keyframe rule corresponding to the given key. the key is a domstring containing an index of the keyframe to be returned, resolving to a percentage between 0% and 100%. if no such keyframe exists, findrule returns null. specification specification status comment css animationsthe definition of 'csskeyframesrule' in that specification. working draft initial definition ...

CSSNumericValue.add() - Web APIs
the add() method of the cssnumericvalue interface adds a supplied number to the cssnumericvalue. syntax var cssmathsum = cssnumericvalue.add(double | cssnumericvalue); parameters number either a number or a cssnumericvalue. return value a cssmathsum exceptions typeerror indicates that an invalid type was passed to the method. 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. working draft initial definition. ...

CSSNumericValue.div() - Web APIs
the div() method of the cssnumericvalue interface divides the cssnumericvalue by the supplied value. syntax var cssnumericvalue = cssnumericvalue.div(number); parameters number either a number or a cssnumericvalue. return value a cssmathproduct. exceptions typeerror indicates that an invalid type was passed to the method. 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. working draft initial definition. ...

CSSNumericValue.mul() - Web APIs
the mul() method of the cssnumericvalue interface multiplies the cssnumericvalue by the supplied value. syntax var cssmathproduct = cssnumericvalue.mul(number); parameters number either a number or a cssnumericvalue. return value a cssmathproduct exceptions typeerror indicates that an invalid type was passed to the method. 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. working draft initial definition. ...

CSSNumericValue.sub() - Web APIs
the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue. syntax var cssmathsum = cssnumericvalue.sub(number); parameters number either a number or a cssmathsum. return value a cssmathsum exceptions typeerror indicates that an invalid type was passed to the method. 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. working draft initial definition. ...

CSSNumericValue.sum() - Web APIs
the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue. syntax var cssmathsum = cssnumericvalue.sub(number); parameters number either a number or a cssmathsum return value a cssmathsum exceptions typeerror indicates that an invalid type was passed to the method. 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. working draft initial definition. ...

CSSNumericValue.toSum() - Web APIs
the cssnumericvalue interface converts the object's value to a cssmathsum object to values of the specified unit. syntax var cssmathsum = cssnumericvalue.tosum(units); parameters units the units to convert to. return value a cssnumericvalue. exceptions syntaxerror undefined typeerror indicates that an invalid type was passed to the method. 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. working draft initial definition. ...

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. syntax var cssnumerictype = cssnumericvalue.type(); parameters none. return value a cssnumerictype object. exceptions none. 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. working draft initial definition. ...

CSSPrimitiveValue.getFloatValue() - Web APIs
tfloatvalue method. css_in the value is a <length> in inches. css_khz the value is a <frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc the value is a <length> in picas. css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. return value a float value in the specified unit. exceptions type description domexception...

CSSPrimitiveValue.primitiveType - Web APIs
ing the getfloatvalue() method. css_ms the value is a <time> in milliseconds. the value can be obtained by using the getfloatvalue() method. css_number the value is a simple <number>. the value can be obtained by using the getfloatvalue() method. css_pc the value is a <length> in picas. the value can be obtained by using the getfloatvalue() method. css_percentage the value is a <percentage>. the value can be obtained by using the getfloatvalue() method. css_pt the value is a <length> in points. the value can be obtained by using the getfloatvalue() method. css_px the value is a <length> in pixels. the value can be obtained by using the getfloatvalue() method. css_rad the value is an <angle> in radians. the value c...

CSSPrimitiveValue.setFloatValue() - Web APIs
tfloatvalue method. css_in the value is a <length> in inches. css_khz the value is a <frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc the value is a <length> in picas. css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. floatvalue a float representing the new float value. return value void. exceptions type description ...

Document.requestStorageAccess() - Web APIs
current session for the duration of user’s session, up to a maximum of 24 hours. after the requesting origin has exceeded the maximum allowable number of storage access grants, any future call to requeststorageaccess() during the same browsing session will prompt the user. 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. the threshold is enforced on the level of etld+1, so for example two storage access grants for foo.example.com and bar.example.com will only count as a single exception against the limit. at the time of a requeststorageaccess() call, if the requesting origin has storage access to... ...fewer origins tha...

HTMLHyperlinkElementUtils.hash - Web APIs
if the url does not have a fragment identifier, this property contains an empty string, "". ...

HTMLImageElement.sizes - Web APIs
e page, the media condition is typically (but not necessarily) based entirely on width information. see syntax in using media queries for details on how to construct a media condition. source size values the source size value is a css length. 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. example in this example, a blog-like layout is created, displaying some text and an image which for which t...

HTMLTableElement.cellPadding - Web APIs
the htmltableelement.cellpadding property represents the padding around the individual cells of the table. syntax htmltableelement.cellpadding = padding; var padding = htmltableelement.cellpadding; padding is either a number of pixels (e.g. "10") or a percentage value (e.g. "10%"). example // set cell padding to 10 pixels let t = document.getelementbyid('tablea'); t.cellpadding = '10'; specification w3c dom 2 html specification htmltableelement .cellpadding. ...

HTMLTableElement.cellSpacing - Web APIs
htmltableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a table's cells. any two cells are separated by the sum of the cellspacing of each of the two cells. 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%"). example this example sets cell spacing for a given table to 10 pixels. var t = document.getelementbyid('tablea'); t.cellspacing = "10"; specification w3c dom 2 html specification htmltableelement .cellspacing. ...

HTMLTableElement.width - Web APIs
example mytable.width = "75%"; ...

HTMLTableElement - Web APIs
he internal borders of the table. it reflects the obsolete rules attribute and can take one of the following values: "none", "groups", "rows", "cols", or "all". htmltableelement.summary is a domstring containing a description of the purpose or the structure of the table. it reflects the obsolete summary attribute. htmltableelement.width is a domstring containing the length in pixels or in percentage of the desired width fo the entire table. it reflects the obsolete width attribute. methods inherits methods from its parent, htmlelement. htmltableelement.createthead() returns an htmlelement representing the first <thead> that is a child of the element. if none is found, a new one is created and inserted in the tree immediately before the first element that is neither a <caption>, no...

IntersectionObserver.IntersectionObserver() - Web APIs
ified, is checked to ensure it's syntactically correct, the thresholds are checked to ensure that they're all in the range 0.0 and 1.0 inclusive, and the threshold list is sorted in ascending numeric order. if the threshold list is empty, it's set to the array [0.0]. 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. observer the intersectionobserver for which the callback is being invoked. options optio...

IntersectionObserver - Web APIs
onobserver.rootmargin read only an offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. the value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. each offset can be expressed in pixels (px) or as a percentage (%). the default is "0px 0px 0px 0px". intersectionobserver.thresholds read only a list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. notifications for a target are generated when any of the thresholds are crossed for that target. if no value was passed to the constructor, 0 is used. meth...

KeyframeEffect.getKeyframes() - Web APIs
yframes = keyframeeffect.getkeyframes(); parameters none. return value returns a sequence of objects with the following format: property value pairs as many property value pairs as are contained in each keyframe of the animation. offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. this will be null if the keyframe is automatically spaced using keyframeeffect.spacing. computedoffset the computed offset for this keyframe, calculated when the list of computed keyframes was produced according to keyframeeffect.spacing. unlike offset, above, the computedoffset is never null. easing the timing function used from this keyframe ...

KeyframeEffect.setKeyframes() - Web APIs
e no effect on animation since "float" is not an animatable css property. offset, which must be written as cssoffset since "offset" represents the keyframe offset as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specified in this keyframe with the underlying value. this will be auto if the comp...

Location: hash - Web APIs
if the url does not have a fragment identifier, this property contains an empty string, "". ...

Transcoding assets for Media Source Extensions - Web APIs
aranteed to work with mse. this means that metadata within the container is spread out and not lumped together. to check whether an mp4 file is a proper mp4 stream, you can again use the mp4info utility to list the atoms of an mp4. note: the fragmented version is slightly larger than the original, due to additional metadata spread throughout the file. this is usually a file size increase of 1 percent or less. fragmenting if you have an asset that is not already an mp4, ffmpeg can handle emitting a properly fragmented mp4 during the transcode process, with the -movflags frag_keyframe+empty_moov command line flag: $ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4 if you already have an mp4, but it's not properly fragmented, you can ag...

ResizeObserverEntry.contentBoxSize - Web APIs
de, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. examples the following snippet is taken from the resize-observer-border-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. 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. const resizeobserver = new resizeobserver(entries => { for (let ...

ResizeObserverEntry.target - Web APIs
e returns a reference to the element or svgelement that is being observed. syntax var element = resizeobserverentry.target; var svgelement = resizeobserverentry.target; value an element or svgelement representing the element being observed. examples the following snippet is taken from the resize-observer-border-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. 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. to grab a reference to the observed element so we can update its b...

Resize Observer API - Web APIs
nterfaces resizeobserver provides the ability to register new observers and to start and stop observing elements. resizeobserverentry describes a single element which has been resized, identifying the element and its new size. 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. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. 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. resize-observer-text.html (see source): here we use t...

The 'X' property - Web APIs
the x property describes the horizontal coordinate of the position of the element. 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). its syntax is the same as that for <length> // rect draws a rectangle with uppe...

SpeechSynthesisUtterance.rate - Web APIs
spoken at. if unset, a default value of 1 will be used. syntax var myrate = speechsynthesisutteranceinstance.rate; speechsynthesisutteranceinstance.rate = 1.5; value a float representing the rate value. it can range between 0.1 (lowest) and 10 (highest), with 1 being the default pitch for the current platform or voice, which should correspond to a normal speaking rate. other values act as a percentage relative to this, so for example 2 is twice as fast, 0.5 is half as fast, etc. some speech synthesis engines or voices may constrain the minimum and maximum rates further. if ssml is used, this value will be overridden by prosody tags in the markup. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); v...

URL.hash - Web APIs
if the url does not have a fragment identifier, this property contains an empty string — "". note: this feature is available in web workers. syntax const string = url.hash url.hash = newhash value a usvstring. ...

VideoPlaybackQuality.corruptedVideoFrames - Web APIs
ideoplaybackquality.corruptedvideoframes; value the number of corrupted video frames that have been received since the <video> element was last loaded or reloaded. it is up to the user agent to determine whether or not to display a corrupted video frame. if a corrupted frame is dropped, then both corruptedvideoframes and droppedvideoframes are incremented. 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. var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downgradevideo(vi...

VideoPlaybackQuality.creationTime - Web APIs
e; value a domhighrestimestamp object which indicates the number of milliseconds that elapased between the time the browsing context was created and the time at which this sample of the video quality was obtained. for details on how the time is determined, see performance.now(). 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. if that exceeds 10% (0.1), a function called lostframesthresholdexceeded() is called to, perhaps, update a quality indicator to show an increase in frame loss. var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/qual...

VideoPlaybackQuality.totalVideoFrames - Web APIs
value the total number of frames that the <video> element has displayed or dropped since the media was loaded into it. essentially, this is the number of frames the element would have presented had no problems occurred. this value is reset when the media is reloaded or replaced. 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. if that exceeds 10% (0.1), a function called lostframesthresholdexceeded() is called to, perhaps, update a quality indicator to show an increase in frame loss. var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/qual...

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
rm, which is then returned to the caller. the near clipping plane is the distance in meters to a plane parallel to the display surface closer than which nothing gets drawn. any vertices which lie on the same side of that plane as the camera are not drawn. conversely, the far clipping plane is the distance in meters to a plane beyond which no vertices are drawn. 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. if you start each frame's rendering pass by computing the perspective matrix, you can then multply into that matrix all the other transforms you need to ...

Keyframe Formats - Web APIs
e no effect on animation since "float" is not an animatable css property. offset, which must be written as cssoffset since "offset" represents the keyframe offset as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specified in this keyframe with the underlying value. this will be auto if the comp...

Using the Web Animations API - Web APIs
alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects. each object represents a key from the original css. 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. it will automatically divide the animation into equal parts based on the number of keys you give it. this means that a keyframe object with three keys will play the middle key 50% of the way through each loop of the animation unless told otherwise. when we want to explicitly set a key’s offset from the other keys, we can specify an offset dire...

Window.devicePixelRatio - Web APIs
a query, which begins as (resolution: 1dppx) (for standard displays) or (resolution: 2dppx) (for retina/hidpi displays), checks to see if the current display resolution matches a specific number of device dots per px. 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. then the updatepixelratio() function is called once to display the starting value, after which the media query is created using matchmedia() and addeventlistener() is called to set up updatepixelratio() as a handler for the change event. html the html creates the boxes containing the instructions and the pixel-ratio box that will dis...

Window.getComputedStyle() - Web APIs
iginally, css 2.0 defined the computed values as the "ready to be used" final values of properties after cascading and inheritance, but css 2.1 redefined them as pre-layout, and used values as post-layout. for css 2.0 properties, getcomputedstyle returns the old meaning of computed values, now called used values. 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. returned values are sometimes deliberately inaccurate. to avoid the “css history leak” security issue, browsers may lie about the computed styles for a visited link, returning values as if the user never visited the linked url. see plugging the css history leak and privacy-related changes comin...

Using XMLHttpRequest - Web APIs
var oreq = new xmlhttprequest(); oreq.addeventlistener("progress", updateprogress); oreq.addeventlistener("load", transfercomplete); oreq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ... // progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcomputable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ... } else { // unable to compute progress information since the total size is unknown } } function transfercomplete(evt) { console.log("the transfer is complete."); } function transferfailed(evt) { console.log("an error occurred while transferring the file."); } function transfercanceled(evt) { console.log("the transfer has be...

Using the aria-valuenow attribute - Accessibility
each value in the value space, but the aria-valuetext would be one of the strings: small, medium, or large. aria-valuenow is a required attribute of role slider, scrollbar and spinbutton. 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. for elements with role slider and spinbutton, assistive technologies should render the actual value to users. note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opin...

Accessibility Information for Web Authors - Accessibility
t difference and sufficient color brightness difference? color contrast analyzer is an excellent tool for such task. effective color contrast and effective color brightness difference have a decisive importance for reading, furthermore for people with partial color deficiency (see the excellent examples in effective color contrast by lighthouse international). a study has established that about 8 percent of all men have some form of color deficiency. color contrast analyzer algorithm is based on the formula provided in techniques for accessibility evaluation and repair tools from w3c. the juicy studio css analyzer will also analyze and report the color contrast and color brightness differences involved in your stylesheets. the future: accessible dhtml dhtml accessibility roadmap: a peek i...

-moz-image-rect - CSS: Cascading Style Sheets
the -moz-image-rect value for css background-image lets you use a portion of a larger image as a background. syntax -moz-image-rect(<uri>, top, right, bottom, left); values <url> the uri of the image from which to take the sub-image. 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. description this property allows you to, for example, use different parts of one larger image as backgrounds...

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
is added, all of the current ones compress to allow room. example: an image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. they will then compress to a height of 225px. ...

orientation - CSS: Cascading Style Sheets
as determined by an accelerometer (if the device has such a hardware sensor), although there is often a user-controlled, os-level "lock orientation" setting that will trump the accelerometer reading. portrait the document should be locked into portrait orientation. landscape the document should be locked into landscape orientation. 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. working draft initial definition ...

user-zoom - CSS: Cascading Style Sheets
n zoom in or out. fixed the user cannot zoom in or out. accessibility concerns disabling zooming capabilities prevents people experiencing low vision conditions from being able to read and understand page content. 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. working draft initial definition ...

@viewport - CSS: Cascading Style Sheets
note: see https://github.com/w3c/csswg-drafts/issues/4766 for discussion around @viewport's removal from the standards track. the @viewport css at-rule lets you configure the viewport through which the document is viewed. it's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as microsoft edge). 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. this is typically based on the size of the window on desktop browsers that aren't in full screen mode. on mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen th...

Using CSS animations - CSS: Cascading Style Sheets
you’ve configured the animation’s timing, you need to define the appearance of the animation. this is done by establishing two or more keyframes using the @keyframes at-rule. each keyframe describes how the animated element should render at a given time during the animation sequence. 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. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. because these two times are so important, they have special aliases: from and to. both are optional. if from/0% or to/100% is not specified, the browser starts or finishes the animation using the computed v...

Using URL values for the cursor property - CSS: Cascading Style Sheets
the pixel at (4,12) from the top left (0,0). limitations all image formats supported by gecko can be used. this means that you can use png, gif, jpg, bmp, cur, etc. images. ani is not supported. an animated png or gif will not create an animated cursor. note: starting with gecko 2.0, gecko also supports the svg image format for cursors. however, the svg image must contain a length-valued (not percentage-valued) height and width on its root svg node. javascript, css animation, and declarative smil inside an svg image are ignored; you can't use svg to create an animated cursor, for example. in gecko (firefox) the limit of the cursor size is 128×128px. larger cursor images are ignored. however, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and p...

Styling Columns - CSS: Cascading Style Sheets
of column-gap in multicol is 1em. this means your columns will not run into each other. in other layout methods the initial value for column-gap is 0. if you use the keyword value “normal” the gap will be set to 1em. you can change the gap by using any length unit as the value of column-gap. in the example below, the column-gap is set to 40px. 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. column rules the specification defines column-rule-width, column-rule-style and column-rule-color, providing a shorthand column-rule. these properties work in exactly the same way as the border properties: any valid border-style can be used as a column...

Variable fonts guide - CSS: Cascading Style Sheets
ont-weight: 375; font-variation-settings: 'wght' 375; the following live example's css can be edited to allow you to play with font weight values. width width (represented by the wdth tag) defines the design axis of how narrow or wide (condensed or extended, in typographic terms) the letterforms can be. 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%. if a number value supplied is outside the range encoded in the font, the browser should render the font at the closest value allowed. note: the % symbol is not used when utilizing font-variation-settings. font...

Basic Concepts of grid layout - CSS: Cascading Style Sheets
d vertical lines defining columns and rows. elements can be placed onto the grid within these column and row lines. css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example. this sets the grid to the specified pixel which fits to the layout you desire. you can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose. item placement you can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. grid also contains an algorithm to control the placement of items not given an explicit position on the grid. creation of additional tracks to hold content you can define an explicit grid with grid layout. ...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
nto it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. it is possible to create tracks that respond to the size of the content, however, they will also change the entire track. if you are using flexbox and find yourself disabling some of the flexibility, you probably need to use css grid layout. 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. in that case, a grid is likely to be a better choice. box alignment the feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. it made it easy to center a box on the page. flex items can stretch to the height of the flex container, meaning that equal heig...

Logical properties for floating and positioning - CSS: Cascading Style Sheets
the direction and writing-mode. example: inset properties for positioned layout positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. to do this we have historically used the physical properties top, right, bottom and left. these properties take a length or a percentage as a value, and relate to the user's screen dimensions. new properties have been created in the logical properties specification for when you want the positioning to relate to the flow of text in your writing mode. these are as follows: inset-block-start, inset-block-end, inset-inline-start and inset-inline-end. in the below example i have used the inset-block-start and inset-inline-end prop...

Grid wrapper - CSS: Cascading Style Sheets
s recipe uses the css grid minmax() function to define the grid track sizes in the grid-template-columns property. for the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column tracks will grow to. 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. the outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. useful fallbacks or alternative methods when using this recipe at page level it can be useful to set a max-width along with left and right auto margins to...

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
o scaling them using the background-size property. this article describes how scaling of svg images is handled when using these properties. the algorithm, in summary the algorithm can for the most part be summarized by these four rules. there are some edge cases that aren't covered by these rules, but this covers the majority of cases. if background-size specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins. if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio. if the image specifies a size, and the size isn't modified by constrain or cover, that specified size wins. if none of the above cases are met, the image ...

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
n <length>, bold thin <length>, or thin <length> bold but not <length> bold thin as bold, if not omitted, must be placed before or after the whole thin && <length> component. single bar separating two or more entities by a single bar, |, means that all entities are exclusive options: exactly one of these options must be present. this is typically used to separate a list of possible keywords. <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. 3em 4.5em, as a component must be present at most one time. note: the double bar has precedence over the single bar, meaning that bold | thin || <length> is equivalent to bold...

<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 given as a number, the useful range is 0 (fully transparent) to 1.0 (fully opaque), with decimal values in between; that is, 0.5 indicates that half of the foreground color is used and half of the background color is used. values outside the range of 0 to 1 are permitted, but are clamped to like within the range 0 to 1. if the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque. interpolation when animated, values of the <alpha-value> css data type are interpolated as real, floating-point numb...

attr() - CSS: Cascading Style Sheets
is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as a <frequency> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. leading and trailing spaces are stripped. 0hz, or, if 0hz is not a valid value for the property, the property's minimum value. % <percentage> the attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as a <percentage>. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. if the given value is used as a length, attr() computes it to an absolute length. leading and trailing spaces are stripped. 0%, or, if 0%...

border-block-end-width - CSS: Cascading Style Sheets
tax /* <'border-width'> values */ border-block-end-width: 5px; border-block-end-width: thick; related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. ...

border-block-width - CSS: Cascading Style Sheets
text-orientation. /* <'border-width'> values */ border-block-width: 5px; border-block-width: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. ...

border-inline-start-width - CSS: Cascading Style Sheets
/* <'border-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. ...

border-inline-width - CSS: Cascading Style Sheets
-width'> values */ border-inline-width: 5px 10px; border-inline-width: 5px; border-inline-width: thick; the border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width. syntax values <'border-width'> the width of the border. see border-width. ...

column-width - CSS: Cascading Style Sheets
initial; column-width: unset; the column-width property is specified as one of the values listed below. values <length> indicates the optimal column width. the actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. the value must be strictly positive or the declaration is invalid. percentage values are also invalid. auto the width of the column is determined by other css properties, such as column-count. formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valuethe absolute length, zero or largeranimation typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> l...

conic-gradient() - CSS: Cascading Style Sheets
n specifying a list of color-stops. unlike linear and radial gradients, whose color-stops are placed by specifying a length, the color-stops of a conic gradient are specified with an angle. units include deg for degrees, grad for gradients, rad for radians, and turn for turns. there are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification. similar to radial gradients, the conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. the values for the position are similar to the syntax for 2-value background-position. the gradient arc is the circumference of the gradient. the starting point of the...

grayscale() - CSS: Cascading Style Sheets
e input image to grayscale. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax grayscale(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely grayscale, while a value of 0% leaves the input unchanged. values between 0% and 100% are linear multipliers on the effect. default value when omitted is 1. the initial value for interpolation is 0. examples grayscale(0) /* no effect */ grayscale(.7) /* 70% grayscale */ grayscale(100%) /* completely grayscale */ specifications specification...

invert() - CSS: Cascading Style Sheets
or samples in the input image. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax invert(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely inverted, while a value of 0% leaves the input unchanged. values between 0% and 100% are linear multipliers on the effect. the lacuna value for interpolation is 0. examples invert(0) /* no effect */ invert(.6) /* 60% inversion */ invert(100%) /* completely inverted */ specifications specification status filter effects module...

opacity() - CSS: Cascading Style Sheets
ractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: this function is similar to the more established opacity property. the difference is that with filters, some browsers provide hardware acceleration for better performance. syntax opacity(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 0% is completely transparent, while a value of 100% leaves the input unchanged. values between 0% and 100% are linear multipliers on the effect. the lacuna value for interpolation is 1. examples opacity(0%) /* completely transparent */ opacity(50%) /* 50% transparent */ opacity(1) /* no effect */ specifications specification status filter effect...

saturate() - CSS: Cascading Style Sheets
desaturates the input image. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax saturate(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value under 100% desaturates the image, while a value over 100% super-saturates it. a value of 0% is completely unsaturated, while a value of 100% leaves the input unchanged. the lacuna value for interpolation is 1. examples saturate(0) /* completely unsaturated */ saturate(.4) /* 40% saturated */ saturate(100%) /* no effect */ saturate(200%) /* double saturation */ specificat...

sepia() - CSS: Cascading Style Sheets
, more yellow/brown appearance. its result is a <filter-function>. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax sepia(amount) parameters amount the amount of the conversion, specified as a <number> or a <percentage>. a value of 100% is completely sepia, while a value of 0% leaves the input unchanged. values between 0% and 100% are linear multipliers on the effect. the lacuna value for interpolation is 0. examples sepia(0) /* no effect */ sepia(.65) /* 65% sepia */ sepia(100%) /* completely sepia */ specifications specification status filter effects module level 1the d...

fit-content() - CSS: Cascading Style Sheets
is calculated similar to auto (i.e., minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. the function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size. 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. in grid properties it is relative to the inline size of the grid container in column tracks and to the block size of t...

flex - CSS: Cascading Style Sheets
| <'flex-basis'> ] examples setting flex: auto html <div id="flex-container"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #...

mask-border - CSS: Cascading Style Sheets
as a luminance mask or alpha mask. see mask-border-mode. ...

repeating-conic-gradient() - CSS: Cascading Style Sheets
center of the gradient, and then specifying a list of color-stops. like non-repeating conic gradients, the color-stops of a repeating conic gradient are specified with an <angle>. units include deg for degrees, grad for gradients, rad for radians, and turn for turns. there are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. browsers supporting repeating conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification. radial and conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. the values for the position are similar to the syntax for 2-value background-position. the gradient arc is part of the circumference of the gradient. 0 degress is north, or 12:00pm. the col...

scale - CSS: Cascading Style Sheets
element grow */ scale: 2; /* values of less than 1 make the element shrink */ scale: 0.5; /* two values */ scale: 2 0.5; /* three values */ scale: 2 0.5 2; values single number value a <number> specifying a scale factor to make the affected element scale by the same factor along both the x and y axes. equivalent to a scale() (2d scaling) function with a single value specified. two length/percentage values two <number>s that specify the x and y axis scaling values (respectively) of a 2d scale. equivalent to a scale() (2d scaling) function with two values specified. three length/percentage values three <number>s that specify the x, y, and z axis scaling values (respectively) of a 3d scale. equivalent to a scale3d() (3d scaling) function. none specifies that no scaling should be applie...

shape-image-threshold - CSS: Cascading Style Sheets
xels whose alpha value is greater than the threshold. values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) are clamped to this range. 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. the gradient is established as a css shape using shape-outside, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape. html <div id="gradient-shape"></div> <p> lorem ipsum ...

translate3d() - CSS: Cascading Style Sheets
ve example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this transformation is characterized by a three-dimensional vector. its coordinates define how much the element moves in each direction. 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. tz is a <length> representing the z component of the translating vector. it can't be a <percentage> value; in that case the property containing the transform is considered invalid. cartesian coordinates on ℝ2 homogeneous coordinates on ...

Used value - CSS: Cascading Style Sheets
pdateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation. then, css 2.1 introduced the distinct definition of used value. an element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. for css properties that don't depend on layout (e.g., display, font-size, or line-height), the computed values and used values are the same. the following are the css 2.1 properties that do depend on layout, so they have a different computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values): background-position bottom, left, right, top height, wid...

Cross-browser audio basics - Developer guides
fortunately this isn't too difficult to implement. first of all, we apply a quick update to the progress bar ...

Video player styling basics - Developer guides
its position is also specifically set to relative, which is required for its responsiveness (more on that later). as mentioned earlier, a data-state attribute is now used to indicate whether the video controls are visible or not and these also need to be styled: .controls[data-st...

Creating a cross-browser video player - Developer guides
eo.currenttime; progressbar.style.width = math.floor((video.currenttime / video.duration) * 100) + '%'; }); as the timeupdate event is raised, the progress element's value attribute is set to the video's currenttime. the <span> element mentioned earlier, for browsers that do not support the <progress> element (e.g. internet explorer 9), is also updated at this time, setting its width to be a percentage of the total time played. this span has a solid css background colour, which helps it provide the same visual feedback as a <progress> element. coming back to the video.duration problem mentioned above, when the timeupdate event is raised, in most mobile browsers the video's duration attribute should now have the correct value. this can be taken advantage of to set the progress element's max ...

Block formatting context - Developer guides
note that flexbox is a more efficient way to implement muti columns layout in morden css. margin collapsing creating a new bfc to avoid the margin collapsing between two neighbor div: html <div class="blue"></div> <div class="red-outer"> <div class="red-inner">red inner</div> </div> css .blue, .red-inner { height:...

Using HTML sections and outlines - Developer guides
ements the <aside> element can be nested inside of other sectional html elements. you do not nest an <aside> inside an <aside>. meaning a call out box would not have a call-out box inside. using html5 elements in non-html5 browsers sections and headings elements can be made to work in most non-html5 browsers with a couple of extra steps, and in this section we'll show you how. 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. however, global usage of these browsers is now very small, so this is unlikely. html5 semantic elements don't need a special dom interface, but they will need a specific css styling in older browser that don't support them explicitly. unknown el...

<col> - HTML: Hypertext Markup Language
n of the column in the table. only after this selector the vertical-align property can be used. if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. width this attribute specifies a default width for each column in the current column group. 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. relative widths such as 0.5* also can be used. examples please see the <table> page for examples on <col>. specifications specification status comment html living standardthe definitio...

<embed>: The Embed External Content element - HTML: Hypertext Markup Language
rents any element that accepts embedded content. implicit aria role no corresponding role permitted aria roles application, document, img, none, presentation dom interface htmlembedelement attributes this element's attributes include the global attributes. height the displayed height of the resource, in css pixels. this must be an absolute value; percentages are not allowed. src the url of the resource being embedded. type the mime type to use to select the plug-in to instantiate. width the displayed width of the resource, in css pixels. this must be an absolute value; percentages are not allowed. usage notes you can use the object-position property to adjust the positioning of the embedded object within the element's frame, and the obje...

<hr>: The Thematic Break (Horizontal Rule) element - HTML: Hypertext Markup Language
ent's attributes include the global attributes. align sets the alignment of the rule on the page. if no value is specified, the default value is left. color sets the color of the rule through color name or hexadecimal value. noshade sets the rule to have no shading. size sets the height, in pixels, of the rule. width sets the length of the rule on the page through a pixel or percentage value. example html <p> this is the first paragraph of text. this is the first paragraph of text. this is the first paragraph of text. this is the first paragraph of text. </p> <hr> <p> this is the second paragraph of text. this is the second paragraph of text. this is the second paragraph of text. this is the second paragraph of text. </p> result specifications ...

<input type="range"> - HTML: Hypertext Markup Language
inputs are commonly used: audio controls such as volume and balance, or filter controls. color configuration controls such as color channels, transparency, brightness, etc. game configuration controls such as difficulty, visibility distance, world size, and so forth. password length for a password manager's generated passwords. 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. for example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5". specifying the minimum and maximum by default, the minimum is 0 and the maximum is 100. if that's not what you want, you can easi...

Data URLs - HTTP
if omitted, defaults to text/plain;charset=us-ascii if the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). otherwise, you can specify base64 to embed base64-encoded binary data. you can find more info on mime types here and here. a few examples: data:,hello%2c%20world! simple text/plain data. 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. data:text/plain;base64,sgvsbg8sifdvcmxkiq== base64-encoded version of the above data:text/html,%3ch1%3ehello%2c%20world!%3c%2fh1%3e an html document with <h1>hello, world!</h1> data:text/html,<scri...

POST - HTTP
erver. in this case, the content type is selected by putting the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <input> or <button> elements: application/x-www-form-urlencoded: the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value. 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. the keys are given in the content-disposition header of each part. text/plain when the post request is sent via a method other than an...

Intl.NumberFormat.prototype.formatToParts() - JavaScript
rencydisplay is specified. decimal the decimal separator string ("."). fraction the fraction number. group the group separator string (","). infinity the infinity string ("∞"). integer the integer number. literal any literal strings or whitespace in the formatted number. minussign the minus sign string ("-"). nan the nan string ("nan"). plussign the plus sign string ("+"). percentsign the percent sign string ("%"). examples comparing format and formattoparts numberformat outputs localized, opaque strings that cannot be manipulated directly: var number = 3500; var formatter = new intl.numberformat('de-de', { style: 'currency', currency: 'eur' }); formatter.format(number); // "3.500,00 €" however, in many user interfaces there is a desire to customize the for...

Values - MathML
s. units unit description em font-relative unit ex font-relative unit. (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. constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.05555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace => 0.16666666666666666em mediummathspace => 0.2222222222222222em thickmathspace => 0.2777777777777778em verythickmathspace => 0.3333333333333333em veryverythickma...

The "codecs" parameter in common media types - Web media technologies
rbis audio track. video/webm; codecs="vp8, vorbis" a webm file containing vp8 video and/or vorbis audio. video/mp4; codecs="avc1.4d002a" an mpeg-4 file containing avc (h.264) video, main profile, level 4.2. 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. you can use the javascript encodeuri() function to encode the parameter list; similarly, you can use decodeuri() to decode a previously encoded parameter list. when the codecs parameter is used, the specified list of codecs must include every codec used for the contents of the file. the list may also contain code...

Navigation and resource timings - Web Performance
ty that the file being timed is this document for the rest of this explanation, we use the following variable: let timing = performance.getentriesbytype('navigation')[0]; protocol we can check the protocol used by querying: let protocol = timing.nexthopprotocol it returns the network protocol used to fetch the resource: in this case h2 for http/2. compression to get the compression savings percentage, we divide the transfersize by the decodedbodysize, and subtract that from 100%. we see a savings of over 74%. let compressionsavings = 1 - (timing.transfersize / timing.decodedbodysize) we could have used let compressionsavings = 1 - (timing.encodedbodysize / timing.decodedbodysize) but using transfersize includes the overhead bytes. for comparison, we can look at the network tab and see...

Privacy, permissions, and information security
important terms. personally identifiable information personally identifiable information (pii) is information which can be used, in whole or in part, to track down and/or identify a specific person. as such, pii extends beyond the web to all aspects of life. 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. personally identification can include information like usernames, real names, passwords, phone numbers or addresses (or even portions of them), information about medical history, social security numbers, driver licenses, or any other form of id or id number, credit card information, and so forth. it's a very broad range of informa...

Introduction to progressive web apps - Progressive web apps (PWAs)
ng web apps, involving some specific patterns, apis, and other features. it's not that obvious if a web app is a pwa or not from first glance. an app could be considered a pwa when it meets certain requirements, or implements a set of given features: works offline, is installable, is easy to synchronize, can send push notifications, etc. in addition, there are tools to measure how complete (as a percentage) a web app is, such as lighthouse. by implementing various technological advantages, we can make an app more progressive, thus ending up with a higher lighthouse score. but this is only a rough indicator. there are some key principles a web app should try to observe to be identified as a pwa. it should be: discoverable, so the contents can be found through search engines. installable, so ...

Media - Progressive web apps (PWAs)
or printing and for paged media in general. a @page rule can set the page margins. for double-sided printing, you can specify the margins separately for @page:left and @page:right. for print media, you normally use appropriate length units like inches (in) and points (pt = 1/72 inch), or centimeters (cm) and millimeters (mm). it is equally appropriate to use ems (em) to match the font size, and percentages (%). you can control how the content of the document breaks across page boundaries, by using the page-break-before, page-break-after and page-break-inside properties. example this rule sets the page margins to one inch on all four sides: @page {margin: 1in;} this rule ensures that every h1 element starts on a new page: h1 {page-break-before: always;} more details for full details...

The building blocks of responsive design - Progressive web apps (PWAs)
e site or app, especially if it is a sprawling enterprise site. read more about responsive design advantages and disadvantages. you can also read our discussion on the basics of responsive design, if you need some more background information and basics. 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. this has a lot of advantages in that the layout will adapt to different viewport dimensions. let's look at an example. we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video s...

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
userspaceonuse x, y, width and height represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute). objectboundingbox in that case, x, y, width and height represent fractions or percentages of the bounding box on the referencing element. specifications specification status comment filter effects module level 1the definition of 'filterunits' in that specification. working draft initial definition scalable vector graphics (svg) 1.1 (second edition)the definition of 'filterunits' in that specification. recommendation initial de...

font-size - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 3the definition of 'font-size' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition...

font-stretch - SVG: Scalable Vector Graphics
tion. 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. css fonts module level 3the definition of 'font-stretch' in that specification. candidate reco...

gradientUnits - SVG: Scalable Vector Graphics
onuse this value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the current svg viewport. objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the transform specified by attribute gradienttransform. percentages represent values relative to the bounding box for the object. with this va...

maskUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse this value indicates that all coordinates for the geometry attributes refer to the user coordinate system as defined when the mask was created. 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. a bounding box could be considered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox. specifications specification status comment css masking module level 1the definition of 'maskunits' in that specification. candidate recommendation scalable vector graphic...

patternUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse this value indicates that all coordinates for the geometry properties refer to the user coordinate system as defined when the pattern was applied. 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. a bounding box could be considered the same as if the content of the <mask> were bound to a "0 0 1 1" viewbox. specifications specification status comment scalable vector graphics (svg) 2the definition of 'patternunits' in that specification. candidate recommendation scalable vector...

primitiveUnits - SVG: Scalable Vector Graphics
ates that any length values within the filter definitions represent values in the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute). objectboundingbox this value indicates that any length values within the filter definitions represent fractions or percentages of the bounding box on the referencing element. specifications specification status comment filter effects module level 1the definition of 'primitiveunits' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'primitiveunits' in that specification. recommendation initial definitio...

startOffset - SVG: Scalable Vector Graphics
d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog. </textpath> </text> <text> <textpath href="#path2" startoffset="40"> quick brown fox jumps over the lazy dog. </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. thus, 0% indicates the start point of the path and 100% indicates the ...

stop-opacity - SVG: Scalable Vector Graphics
is treated as 1. note: as a presentation attribute, stop-opacity can be used as a css property. 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. specifications specification status comment scalable vector graphics (svg) 2the definition of 'stop-opacity' in that specification. candidate recommendation refers to the definition in css colors 3, but allows percentage values. scalable vector graphics (svg) 1.1 (second edition)the definiti...

stroke-dasharray - SVG: Scalable Vector Graphics
if an odd number of values is provided, then the list of values is repeated to yield an even number of values. thus, 5,3,2 is equivalent to 5,3,2,5,3,2. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/br...

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...

<circle> - SVG: Scalable Vector Graphics
the <circle> svg element is an svg basic shape, used to draw circles based on a center point and a radius. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle. 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. a value lower or equal to zero disables rendering of the circle. value type: <length> ; default value: 0; animatable: yes pathlength the total length for the circle's circumference, in user units. value type: <number> ; default value: none; animatable: y...

<stop> - SVG: Scalable Vector Graphics
adient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector. value type: <number>|<percentage>; default value: 0; animatable: yes stop-color this attribute defines the color of the gradient stop. it can be used as a css property. value type: currentcolor|<color>|<icccolor>; default value: black; animatable: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. value type: <opacity>; default value: 1; animatable: yes global a...

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> ...