The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If popovertargetaction is omitted, "toggle" is the default action that will be performed by the control button.
+
The @functionCSSat-rule enables defining CSS custom functions. Once defined, a custom function can be called using the <dashed-function> syntax (for example, --my-function(30px, 3)) within any property value.",
+ "formalSyntax": "@function <function-token> <function-parameter>#? ) [ returns <css-type> ]? { <declaration-rule-list> }\n <function-parameter> = <custom-property-name> <css-type>? [ : <default-value> ]?\n <css-type> = <syntax-component> | <type()>\n <default-value> = <declaration-value>\n <syntax-component> = <syntax-single-component> <syntax-multiplier>? | '<' transform-list '>'\n <type()> = type( <string> )\n <syntax-single-component> = '<' <syntax-type-name> '>' | <ident>\n <syntax-multiplier> = '#' | '+'\n <syntax-type-name> = angle | color | custom-ident | image | integer | length | length-percentage | number | percentage | resolution | string | time | url | transform-function"
+ },
"import": {
"url": "$MDN_URL$/web/css/@import",
"status": [
@@ -919,7 +937,7 @@
"lowDate": "2022-03-14",
"highDate": "2024-09-14"
},
- "doc": "The layer()CSSfunction is used along with the @importat-rule to put the imported resource in a separate named cascade layer.",
+ "doc": "The layer()CSSfunction is used along with the @importat-rule to put the imported resource in a separate named cascade layer.",
"formalSyntax": "layer( <layer-name> )\n <layer-name> = <ident> [ '.' <ident> ]*"
}
},
@@ -1179,7 +1197,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The calc()CSSfunction lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>, and <color-function> values.",
+ "doc": "The calc()CSSfunction lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>, and <color-function> values.",
"formalSyntax": "calc( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"color": {
@@ -2145,7 +2163,7 @@
},
"absolute-size": {
"url": "$MDN_URL$/web/css/absolute-size",
- "doc": "The <absolute-size>CSSdata type describes the absolute size keywords. This data type is used in the font shorthand and font-size properties.\n
The font size keywords are mapped to the deprecated HTML size attribute. See the HTML size attribute section below).",
+ "doc": "The <absolute-size>CSSdata type describes the absolute size keywords. This data type is used in the font shorthand and font-size properties.\n
The font size keywords are mapped to the deprecated HTML size attribute. See the HTML size attribute section below).",
"values": {
"xx-small": "An absolute size 60% the size of medium. Mapped to the deprecated size=\"1\".",
"x-small": "An absolute size 75% the size of medium.",
@@ -2159,7 +2177,7 @@
},
"alpha-value": {
"url": "$MDN_URL$/web/css/alpha-value",
- "doc": "The <alpha-value>CSSdata type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color.",
+ "doc": "The <alpha-value>CSSdata type represents a value that can be either a <number> or a <percentage>, specifying the alpha channel or transparency of a color.",
"formalSyntax": "<number> | <percentage>"
},
"angle": {
@@ -2182,7 +2200,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <angle>CSSdata type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in <gradient>s and in some transform functions."
+ "doc": "The <angle>CSSdata type represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in <gradient>s and in some transform functions."
},
"angle-percentage": {
"url": "$MDN_URL$/web/css/angle-percentage",
@@ -2204,7 +2222,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <angle-percentage>CSSdata type represents a value that can be either a <angle> or a <percentage>.\n
Where an <angle-percentage> is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a calc() expression.",
+ "doc": "The <angle-percentage>CSSdata type represents a value that can be either a <angle> or a <percentage>.\n
Where an <angle-percentage> is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a calc() expression.",
"formalSyntax": "<angle> | <percentage>"
},
"baseline-position": {
@@ -2236,7 +2254,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The <basic-shape>CSSdata type represents a shape used in the clip-path, shape-outside, and offset-path properties."
+ "doc": "The <basic-shape>CSSdata type represents a shape used in the clip-path, shape-outside, and offset-path properties."
},
"blend-mode": {
"url": "$MDN_URL$/web/css/blend-mode",
@@ -2258,7 +2276,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The <blend-mode>CSSdata type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.",
+ "doc": "The <blend-mode>CSSdata type describes how colors should appear when elements overlap. It is used in the background-blend-mode and mix-blend-mode properties.",
"formalSyntax": "normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity",
"values": {
"normal": "The final color is the top color, regardless of what the bottom color is.\nThe effect is like two opaque pieces of paper overlapping.",
@@ -2310,7 +2328,7 @@
"lowDate": "2022-12-13",
"highDate": "2025-06-13"
},
- "doc": "The <calc-keyword>CSSdata type represents well-defined constants such as e and pi. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.",
+ "doc": "The <calc-keyword>CSSdata type represents well-defined constants such as e and pi. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience.",
"formalSyntax": "e | pi | infinity | -infinity | NaN",
"values": {
"e": "The base of the natural logarithm, approximately equal to 2.7182818284590452354.",
@@ -2321,7 +2339,7 @@
},
"calc-sum": {
"url": "$MDN_URL$/web/css/calc-sum",
- "doc": "The <calc-sum>CSSdata type represents an expression which performs a calculation in any CSS math function. The expression executes a basic arithmetic operation of addition and subtraction between two values.",
+ "doc": "The <calc-sum>CSSdata type represents an expression which performs a calculation in any CSS math function. The expression executes a basic arithmetic operation of addition and subtraction between two values.",
"formalSyntax": "<calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"color": {
@@ -2344,7 +2362,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <color>CSSdata type represents a color.\nA <color> may also include an alpha-channeltransparency value, indicating how the color should composite with its background.\n
\n
Note:\nAlthough <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' color profiles.\n
",
+ "doc": "The <color>CSSdata type represents a color.\nA <color> may also include an alpha-channeltransparency value, indicating how the color should composite with its background.\n
\n
Note:\nAlthough <color> values are precisely defined, their actual appearance may vary (sometimes significantly) from device to device. This is because most devices are not calibrated, and some browsers do not support output devices' color profiles.\n
When interpolating <color> values, the interpolation color space defaults to Oklab.",
+ "doc": "The <color-interpolation-method>CSSdata type represents the color space used for interpolation between <color> values. It can be used to override the default interpolation color space for color-related functional notations such as color-mix() and linear-gradient().\n
The <corner-shape-value>CSSdata type describes the shape of a container corner. It is used by the corner-shape shorthand property and its constituent properties to specify the shape to apply to affected container corners.",
+ "doc": "
The <corner-shape-value>CSSdata type describes the shape of a container corner. It is used by the corner-shape shorthand property and its constituent properties to specify the shape to apply to affected container corners.",
"formalSyntax": "round | scoop | bevel | notch | square | squircle | <superellipse()>\n <superellipse()> = superellipse( <number [-∞,∞]> | infinity | -infinity )",
"values": {
"superellipse()": "Defines a custom corner superellipse shape. A negative parameter creates an inward, or concave, curve while a positive parameter creates an outward, or convex, curve.",
@@ -2420,11 +2438,28 @@
},
"custom-ident": {
"url": "$MDN_URL$/web/css/custom-ident",
- "doc": "The <custom-ident>CSSdata type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity."
+ "doc": "The <custom-ident>CSSdata type denotes an arbitrary user-defined string used as an identifier. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity."
+ },
+ "dashed-function": {
+ "url": "$MDN_URL$/web/css/dashed-function",
+ "status": [
+ "Experimental",
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "139",
+ "ChromeAndroid": "139",
+ "Edge": "139",
+ "Opera": "123"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "
The <dashed-function>CSSdata type represents the syntax used to call CSS custom functions, which are defined using the @function at-rule."
},
"dashed-ident": {
"url": "$MDN_URL$/web/css/dashed-ident",
- "doc": "The <dashed-ident>CSSdata type denotes an arbitrary string used as an identifier."
+ "doc": "The <dashed-ident>CSSdata type denotes an arbitrary string used as an identifier."
},
"dimension": {
"url": "$MDN_URL$/web/css/dimension",
@@ -2446,7 +2481,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <dimension>CSSdata type represents a <number> with a unit attached to it, for example 10px.\n
CSS uses dimensions to specify distances (<length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities."
+ "doc": "The <dimension>CSSdata type represents a <number> with a unit attached to it, for example 10px.\n
CSS uses dimensions to specify distances (<length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities."
},
"display-box": {
"url": "$MDN_URL$/web/css/display-box",
@@ -2748,7 +2783,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <easing-function>CSSdata type represents a mathematical function that describes the rate at which a value changes.\n
This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation's speed over the course of its duration. You can specify an easing function for CSS transition and animation properties.",
+ "doc": "The <easing-function>CSSdata type represents a mathematical function that describes the rate at which a value changes.\n
This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation's speed over the course of its duration. You can specify an easing function for CSS transition and animation properties.",
"formalSyntax": "<linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>\n <linear-easing-function> = linear | <linear()>\n <cubic-bezier-easing-function> = ease | ease-in | ease-out | ease-in-out | <cubic-bezier()>\n <step-easing-function> = step-start | step-end | <steps()>\n <linear()> = linear( [ <number> && <percentage>{0,2} ]# )\n <cubic-bezier()> = cubic-bezier( [ <number [0,1]> , <number> ]#{2} )\n <steps()> = steps( <integer> , <step-position>? )\n <step-position> = jump-start | jump-end | jump-none | jump-both | start | end",
"values": {
"<linear-easing-function>": "Creates transitions that progress at a constant rate. This function can be specified using one of the following:\n
Specifies a constant rate of interpolation, with no change in the rate of progress throughout the duration (that is, no acceleration or deceleration).\nThis keyword value is equivalent to linear(0, 1).\nIt can also be represented as cubic-bezier(0, 0, 1, 1).\n
\n
Note:\nThe linear keyword is always interpreted as linear(0, 1), whereas the function linear(0, 1) is interpreted as linear(0 0%, 1 100%).\n
Defines multiple points of progress using <number> values, with optional <percentage> values to control their timing.\n
\n
",
@@ -2776,7 +2811,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The <filter-function>CSSdata type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.",
+ "doc": "The <filter-function>CSSdata type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.",
"formalSyntax": "<blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>\n <blur()> = blur( <length>? )\n <brightness()> = brightness( [ <number> | <percentage> ]? )\n <contrast()> = contrast( [ <number> | <percentage> ]? )\n <drop-shadow()> = drop-shadow( [ <color>? && <length>{2,3} ] )\n <grayscale()> = grayscale( [ <number> | <percentage> ]? )\n <hue-rotate()> = hue-rotate( [ <angle> | <zero> ]? )\n <invert()> = invert( [ <number> | <percentage> ]? )\n <opacity()> = opacity( [ <number> | <percentage> ]? )\n <sepia()> = sepia( [ <number> | <percentage> ]? )\n <saturate()> = saturate( [ <number> | <percentage> ]? )"
},
"flex": {
@@ -2799,20 +2834,20 @@
"lowDate": "2017-03-27",
"highDate": "2019-09-27"
},
- "doc": "The <flex>CSSdata type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties."
+ "doc": "The <flex>CSSdata type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties."
},
"frequency": {
"url": "$MDN_URL$/web/css/frequency",
- "doc": "The <frequency>CSSdata type represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties."
+ "doc": "The <frequency>CSSdata type represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties."
},
"frequency-percentage": {
"url": "$MDN_URL$/web/css/frequency-percentage",
- "doc": "The <frequency-percentage>CSSdata type represents a value that can be either a <frequency> or a <percentage>. Frequency values, e.g., the pitch of a speaking voice, are not currently used in any CSS properties.",
+ "doc": "The <frequency-percentage>CSSdata type represents a value that can be either a <frequency> or a <percentage>. Frequency values, e.g., the pitch of a speaking voice, are not currently used in any CSS properties.",
"formalSyntax": "<frequency> | <percentage>"
},
"generic-family": {
"url": "$MDN_URL$/web/css/generic-family",
- "doc": "The <generic-family>CSSdata type represents the keyword values for generic font families used in the font shorthand and font-family longhand properties. The <generic-family> represents one or more locally-installed fonts belonging to that category of fonts.",
+ "doc": "The <generic-family>CSSdata type represents the keyword values for generic font families used in the font shorthand and font-family longhand properties. The <generic-family> represents one or more locally-installed fonts belonging to that category of fonts.",
"formalSyntax": "serif | sans-serif | monospace | cursive | fantasy | system-ui | ui-serif | ui-sans-serif | ui-monospace | ui-rounded | math | fangsong",
"values": {
"serif": "A serif is a small line or stroke attached to the end of a larger stroke in a letter. In serif fonts, glyphs have finishing strokes, flared or tapering ends. Examples include Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, and URW Palladio.",
@@ -2849,7 +2884,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <gradient>CSSdata type is a special type of <image> that consists of a progressive transition between two or more colors.",
+ "doc": "The <gradient>CSSdata type is a special type of <image> that consists of a progressive transition between two or more colors.",
"formalSyntax": "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>\n <linear-gradient()> = linear-gradient( [ <linear-gradient-syntax> ] )\n <repeating-linear-gradient()> = repeating-linear-gradient( [ <linear-gradient-syntax> ] )\n <radial-gradient()> = radial-gradient( [ <radial-gradient-syntax> ] )\n <repeating-radial-gradient()> = repeating-radial-gradient( [ <radial-gradient-syntax> ] )\n <linear-gradient-syntax> = [ <angle> | <zero> | to <side-or-corner> ]? , <color-stop-list>\n <radial-gradient-syntax> = [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>\n <side-or-corner> = [ left | right ] || [ top | bottom ]\n <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?\n <radial-shape> = circle | ellipse\n <radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <linear-color-stop> = <color> <length-percentage>?\n <linear-color-hint> = <length-percentage>\n <radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side\n <length-percentage> = <length> | <percentage>"
},
"hex-color": {
@@ -2872,7 +2907,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <hex-color>CSSdata type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.\n
A <hex-color> value can be used everywhere where a <color> can be used."
+ "doc": "The <hex-color>CSSdata type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.\n
A <hex-color> value can be used everywhere where a <color> can be used."
},
"hue": {
"url": "$MDN_URL$/web/css/hue",
@@ -2921,7 +2956,7 @@
"SafariIOS": "15.4"
}
},
- "doc": "The <hue>CSSdata type represents the hue angle of a color.\nIt is used in the color functions that accept hue expressed as a single value, specifically hsl(), hwb(), lch(), and oklch() functional notations.",
+ "doc": "The <hue>CSSdata type represents the hue angle of a color.\nIt is used in the color functions that accept hue expressed as a single value, specifically hsl(), hwb(), lch(), and oklch() functional notations.",
"formalSyntax": "<number> | <angle>",
"values": {
"<angle>": "An angle expressed in degrees, gradians, radians, or turns using the deg, grad, rad, or turn, respectively.",
@@ -2947,7 +2982,7 @@
"level": "LOW",
"lowDate": "2024-06-11"
},
- "doc": "The <hue-interpolation-method>CSSdata type represents the algorithm used for interpolation between <hue> values.\nThe interpolation method specifies how to find a midpoint between two hue values based on a color wheel.\nIt is used as a component of the <color-interpolation-method> data type.\n
When interpolating <hue> values, the hue interpolation algorithm defaults to shorter.",
+ "doc": "The <hue-interpolation-method>CSSdata type represents the algorithm used for interpolation between <hue> values.\nThe interpolation method specifies how to find a midpoint between two hue values based on a color wheel.\nIt is used as a component of the <color-interpolation-method> data type.\n
When interpolating <hue> values, the hue interpolation algorithm defaults to shorter.",
"formalSyntax": "[ shorter | longer | increasing | decreasing ] hue",
"values": {
"shorter": "Use the shorter arc. When the two radii coincide, the arc degenerates to a single point. When both arcs have the same lengths:\n
\n
If θ1 < θ2, use the clockwise arc;
\n
If θ1 > θ2, use the counterclockwise arc.
\n
\n
\n\n
\n
θ1 = 45deg, θ2 = 135deg
\n
θ1 = 135deg, θ2 = 45deg
\n
\n\n
",
@@ -2958,7 +2993,7 @@
},
"ident": {
"url": "$MDN_URL$/web/css/ident",
- "doc": "The <ident>CSSdata type denotes an arbitrary string used as an identifier."
+ "doc": "The <ident>CSSdata type denotes an arbitrary string used as an identifier."
},
"image": {
"url": "$MDN_URL$/web/css/image",
@@ -2980,7 +3015,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <image>CSSdata type represents a two-dimensional image.",
+ "doc": "The <image>CSSdata type represents a two-dimensional image.",
"formalSyntax": "<url> | <gradient>\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )"
},
"inherit": {
@@ -3047,7 +3082,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <integer>CSSdata type is a special type of <number> that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the column-count, counter-increment, grid-column, grid-row, and z-index properties and the range descriptor."
+ "doc": "The <integer>CSSdata type is a special type of <number> that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the column-count, counter-increment, grid-column, grid-row, and z-index properties and the range descriptor."
},
"length": {
"url": "$MDN_URL$/web/css/length",
@@ -3069,7 +3104,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <length>CSSdata type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.\n
\n
Note:\nAlthough <percentage> values are usable in some of the same properties that accept <length> values, they are not themselves <length> values. See <length-percentage>.\n
Note:\nAlthough <percentage> values are usable in some of the same properties that accept <length> values, they are not themselves <length> values. See <length-percentage>.\n
"
},
"length-percentage": {
"url": "$MDN_URL$/web/css/length-percentage",
@@ -3091,7 +3126,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <length-percentage>CSSdata type represents a value that can be either a <length> or a <percentage>.",
+ "doc": "The <length-percentage>CSSdata type represents a value that can be either a <length> or a <percentage>.",
"formalSyntax": "<length> | <percentage>"
},
"line-style": {
@@ -3149,7 +3184,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <named-color>CSSdata type is the name of a color, such as red, blue, black, or lightseagreen. Syntactically, a <named-color> is an <ident>.\n
A <named-color> value can be used anywhere a <color> can be used."
+ "doc": "The <named-color>CSSdata type is the name of a color, such as red, blue, black, or lightseagreen. Syntactically, a <named-color> is an <ident>.\n
A <named-color> value can be used anywhere a <color> can be used."
},
"number": {
"url": "$MDN_URL$/web/css/number",
@@ -3171,7 +3206,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <number>CSSdata type represents a number, being either an integer, a number with a fractional component, or a base-ten exponent in scientific notation."
+ "doc": "The <number>CSSdata type represents a number, being either an integer, a number with a fractional component, or a base-ten exponent in scientific notation."
},
"overflow": {
"url": "$MDN_URL$/web/css/overflow_value",
@@ -3230,7 +3265,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <percentage>CSSdata type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.\n
\n
Note:\nOnly calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.\n
"
+ "doc": "The <percentage>CSSdata type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as width, height, margin, padding, and font-size.\n
\n
Note:\nOnly calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value.\n
Note:\nThe final position described by the <position> value does not need to be inside the element's box.\n
",
"formalSyntax": "[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <length-percentage> = <length> | <percentage>"
},
"ratio": {
@@ -3275,12 +3310,12 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <ratio>CSSdata type describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the <ratio> is used as a value for the aspect-ratio media feature in @media media queries, the aspect-ratio size feature in @container container queries, and as a value for the CSS aspect-ratio property.",
+ "doc": "The <ratio>CSSdata type describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the <ratio> is used as a value for the aspect-ratio media feature in @media media queries, the aspect-ratio size feature in @container container queries, and as a value for the CSS aspect-ratio property.",
"formalSyntax": "<number [0,∞]> [ / <number [0,∞]> ]?"
},
"relative-size": {
"url": "$MDN_URL$/web/css/relative-size",
- "doc": "The <relative-size>CSSdata type describes relative size keywords. The <relative-size> keywords define a size relative to the computed size of the parent element. This data type is used in the font shorthand and font-size properties.",
+ "doc": "The <relative-size>CSSdata type describes relative size keywords. The <relative-size> keywords define a size relative to the computed size of the parent element. This data type is used in the font shorthand and font-size properties.",
"values": {
"smaller": "A relative size one size smaller than the inherited size.",
"larger": "A relative size one size larger than the inherited size."
@@ -3306,7 +3341,7 @@
"lowDate": "2022-09-12",
"highDate": "2025-03-12"
},
- "doc": "The <resolution>CSSdata type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.\n
On screens, the units are related to CSS inches, centimeters, or pixels, not physical values."
+ "doc": "The <resolution>CSSdata type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.\n
On screens, the units are related to CSS inches, centimeters, or pixels, not physical values."
},
"revert": {
"url": "$MDN_URL$/web/css/revert",
@@ -3350,7 +3385,7 @@
"lowDate": "2022-03-14",
"highDate": "2024-09-14"
},
- "doc": "The revert-layerCSS-wide keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of a property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.\n
If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the computed value derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous style origin.\n
This keyword can be applied to any CSS property, including the CSS shorthand property all."
+ "doc": "The revert-layerCSS-wide keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of a property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.\n
If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the computed value derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous style origin.\n
This keyword can be applied to any CSS property, including the CSS shorthand property all."
},
"self-position": {
"url": "$MDN_URL$/web/css/self-position",
@@ -3381,7 +3416,7 @@
"Safari": "1.3",
"SafariIOS": ""
},
- "doc": "
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
\n
The <shape>CSSdata type defines the specific form (shape) of a region. The region represents the part of an element to which the clip property applies.\n
\n
Note:\n<shape> and rect() work in conjunction with clip, which has been deprecated in favor of clip-path. When possible, use clip-path and the <basic-shape> data type instead.\n
",
+ "doc": "
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
\n
The <shape>CSSdata type defines the specific form (shape) of a region. The region represents the part of an element to which the clip property applies.\n
\n
Note:\n<shape> and rect() work in conjunction with clip, which has been deprecated in favor of clip-path. When possible, use clip-path and the <basic-shape> data type instead.\n
",
"values": {
"top": "Is a <length> representing the offset for the top of the rectangle relative to the top border of the element's box.",
"right": "Is a <length> representing the offset for the right of the rectangle relative to the left border of the element's box.",
@@ -3409,7 +3444,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <string>CSSdata type represents a sequence of characters. Strings are used in numerous CSS properties, such as content, font-family, and quotes."
+ "doc": "The <string>CSSdata type represents a sequence of characters. Strings are used in numerous CSS properties, such as content, font-family, and quotes."
},
"system-color": {
"url": "$MDN_URL$/web/css/system-color",
@@ -3431,7 +3466,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <system-color>CSSdata type usually reflects the default color choices used for the different parts of a web page.\n
However, user agents can provide an accessibility feature called forced colors mode, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, <system-color> exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is high contrast mode on Windows.\n
In forced colors mode, authors should use colors from the <system-color> type for all properties that are not in the set of properties whose colors are overridden. This ensures that the page consistently uses the same color palette across all properties.\n
Authors can detect forced colors mode using the forced-colors media feature.\n
A <system-color> value can be used anywhere a <color> can be used."
+ "doc": "The <system-color>CSSdata type usually reflects the default color choices used for the different parts of a web page.\n
However, user agents can provide an accessibility feature called forced colors mode, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, <system-color> exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is high contrast mode on Windows.\n
In forced colors mode, authors should use colors from the <system-color> type for all properties that are not in the set of properties whose colors are overridden. This ensures that the page consistently uses the same color palette across all properties.\n
Authors can detect forced colors mode using the forced-colors media feature.\n
A <system-color> value can be used anywhere a <color> can be used."
},
"text-edge": {
"url": "$MDN_URL$/web/css/text-edge",
@@ -3449,7 +3484,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The <text-edge>enumerateddata type defines keywords that specify font metrics representing specific regions on a font's block-start edge and block-end edge. Each keyword specifies a position of a font's over and/or under edge.\n
The <text-edge> values are used in the text-box-edge property to specify an amount of space to trim from the block-start and block-end edge of a text element's block container.",
+ "doc": "The <text-edge>enumerateddata type defines keywords that specify font metrics representing specific regions on a font's block-start edge and block-end edge. Each keyword specifies a position of a font's over and/or under edge.\n
The <text-edge> values are used in the text-box-edge property to specify an amount of space to trim from the block-start and block-end edge of a text element's block container.",
"formalSyntax": "[ text | ideographic | ideographic-ink ] | [ text | ideographic | ideographic-ink | cap | ex ] [ text | ideographic | ideographic-ink | alphabetic ]",
"values": {
"text": "The font's over and under edges are its text-over baseline/text-under baseline: this includes the font's ascenders and descenders but excludes the half-leading set on the text.\n
\n
Note:\nThe amount of half-leading included on a text element can be controlled using the line-height property.\n
The font's over edge is its text-over baseline (includes the font's ascenders but excludes the over edge half-leading), or its under edge is its text-under baseline (includes the font's descenders but excludes the under edge half-leading), depending on which edge the value is set for.",
@@ -3478,11 +3513,11 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <time>CSSdata type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties."
+ "doc": "The <time>CSSdata type represents a time value expressed in seconds or milliseconds. It is used in animation, transition, and related properties."
},
"time-percentage": {
"url": "$MDN_URL$/web/css/time-percentage",
- "doc": "The <time-percentage>CSSdata type represents a value that can be either a <time> or a <percentage>.",
+ "doc": "The <time-percentage>CSSdata type represents a value that can be either a <time> or a <percentage>.",
"formalSyntax": "<time> | <percentage>"
},
"transform-function": {
@@ -3505,7 +3540,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <transform-function>CSSdata type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property."
+ "doc": "The <transform-function>CSSdata type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property."
},
"unset": {
"url": "$MDN_URL$/web/css/unset",
@@ -3550,7 +3585,7 @@
"level": "LOW",
"lowDate": "2025-06-26"
},
- "doc": "The abs()CSSfunction returns the absolute value of the argument, as the same type as the input.",
+ "doc": "The abs()CSSfunction returns the absolute value of the argument, as the same type as the input.",
"formalSyntax": "abs( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"acos": {
@@ -3573,7 +3608,7 @@
"lowDate": "2023-03-13",
"highDate": "2025-09-13"
},
- "doc": "The acos()CSSfunction is a trigonometric function that returns the inverse cosine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between 0deg and 180deg.",
+ "doc": "The acos()CSSfunction is a trigonometric function that returns the inverse cosine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between 0deg and 180deg.",
"formalSyntax": "acos( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"anchor": {
@@ -3592,7 +3627,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The anchor()CSSfunction can be used within an anchor-positioned element's inset property values, returning a length value relative to the position of the edges of its associated anchor element.",
+ "doc": "The anchor()CSSfunction can be used within an anchor-positioned element's inset property values, returning a length value relative to the position of the edges of its associated anchor element.",
"formalSyntax": "anchor( <anchor-name>? &&<anchor-side> , <length-percentage>? )\n <anchor-name> = <dashed-ident>\n <anchor-side> = inside | outside | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center\n <length-percentage> = <length> | <percentage>"
},
"anchor-size": {
@@ -3611,7 +3646,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The anchor-size()CSSfunction enables setting anchor-positioned element's size, position, and margins relative to the dimensions of anchor elements. It returns the <length> of a specified side of the target anchor element. anchor-size() is only valid when used within the value of anchor-positioned elements' sizing, inset, and margin properties.\n
For detailed information on anchor features and usage, see the CSS anchor positioning module landing page and the Using CSS anchor positioning guide.",
+ "doc": "The anchor-size()CSSfunction enables setting anchor-positioned element's size, position, and margins relative to the dimensions of anchor elements. It returns the <length> of a specified side of the target anchor element. anchor-size() is only valid when used within the value of anchor-positioned elements' sizing, inset, and margin properties.\n
For detailed information on anchor features and usage, see the CSS anchor positioning module landing page and the Using CSS anchor positioning guide.",
"formalSyntax": "anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )\n <anchor-name> = <dashed-ident>\n <anchor-size> = width | height | block | inline | self-block | self-inline\n <length-percentage> = <length> | <percentage>"
},
"asin": {
@@ -3634,7 +3669,7 @@
"lowDate": "2023-03-13",
"highDate": "2025-09-13"
},
- "doc": "The asin()CSSfunction is a trigonometric function that returns the inverse sine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg.",
+ "doc": "The asin()CSSfunction is a trigonometric function that returns the inverse sine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg.",
"formalSyntax": "asin( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"atan": {
@@ -3657,7 +3692,7 @@
"lowDate": "2023-03-13",
"highDate": "2025-09-13"
},
- "doc": "The atan()CSSfunction is a trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg.",
+ "doc": "The atan()CSSfunction is a trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg.",
"formalSyntax": "atan( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"atan2": {
@@ -3680,7 +3715,7 @@
"lowDate": "2023-03-13",
"highDate": "2025-09-13"
},
- "doc": "The atan2()CSSfunction is a trigonometric function that returns the inverse tangent of two values between -infinity and infinity. The function accepts two arguments and returns the number of radians representing an <angle> between -180deg and 180deg.",
+ "doc": "The atan2()CSSfunction is a trigonometric function that returns the inverse tangent of two values between -infinity and infinity. The function accepts two arguments and returns the number of radians representing an <angle> between -180deg and 180deg.",
"formalSyntax": "atan2( <calc-sum> , <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"attr": {
@@ -3703,7 +3738,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "
\n
Note:\nThe attr() function can be used with any CSS property, but support for properties other than content is experimental.\n
\n
The attr()CSSfunction is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned.",
+ "doc": "
\n
Note:\nThe attr() function can be used with any CSS property, but support for properties other than content is experimental.\n
\n
The attr()CSSfunction is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned.",
"formalSyntax": "attr( <attr-name> <attr-type>? , <declaration-value>? )\n <attr-name> = [ <ident-token>? '|' ]? <ident-token>\n <attr-type> = type( <syntax> ) | raw-string | number | <attr-unit>\n <syntax> = '*' | <syntax-component> [ <syntax-combinator> <syntax-component> ]* | <syntax-string>\n <syntax-component> = <syntax-single-component> <syntax-multiplier>? | '<' transform-list '>'\n <syntax-combinator> = '|'\n <syntax-string> = <string>\n <syntax-single-component> = '<' <syntax-type-name> '>' | <ident>\n <syntax-multiplier> = '#' | '+'\n <syntax-type-name> = angle | color | custom-ident | image | integer | length | length-percentage | number | percentage | resolution | string | time | url | transform-function"
},
"blur": {
@@ -3726,7 +3761,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The blur()CSSfunction applies a Gaussian blur to the input image. Its result is a <filter-function>.",
+ "doc": "The blur()CSSfunction applies a Gaussian blur to the input image. Its result is a <filter-function>.",
"formalSyntax": "blur( <length>? )"
},
"brightness": {
@@ -3775,7 +3810,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The calc()CSSfunction lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>, and <color-function> values.",
+ "doc": "The calc()CSSfunction lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>, and <color-function> values.",
"formalSyntax": "calc( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"calc-size": {
@@ -3793,7 +3828,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "
Note however that interpolate-size is inherited, therefore applying it to an element enables interpolation of intrinsic size keywords for every property applied to that element and its children. As a result, interpolate-size is the preferred solution for enabling intrinsic size animations. You should only use calc-size() to enable intrinsic size animations if they also require calculations.",
+ "doc": "
Note however that interpolate-size is inherited, therefore applying it to an element enables interpolation of intrinsic size keywords for every property applied to that element and its children. As a result, interpolate-size is the preferred solution for enabling intrinsic size animations. You should only use calc-size() to enable intrinsic size animations if they also require calculations.",
"formalSyntax": "calc-size( <calc-size-basis> , <calc-sum> )\n <calc-size-basis> = <size-keyword> | <calc-size()> | any | <calc-sum>\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"circle": {
@@ -3816,7 +3851,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The circle()CSSfunction defines a circle using a radius and a position. It is one of the <basic-shape> data types.",
+ "doc": "The circle()CSSfunction defines a circle using a radius and a position. It is one of the <basic-shape> data types.",
"formalSyntax": "circle( <radial-size>? [ at <position> ]? )\n <radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side\n <length-percentage> = <length> | <percentage>",
"values": {
"<shape-radius>": "This may be a <length>, or a <percentage> or values closest-side and farthest-side.\n
Uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension.\n
\n
",
@@ -3843,7 +3878,7 @@
"lowDate": "2020-07-28",
"highDate": "2023-01-28"
},
- "doc": "The clamp()CSSfunction clamps a value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.",
+ "doc": "The clamp()CSSfunction clamps a value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.",
"formalSyntax": "clamp( [ <calc-sum> | none ] , <calc-sum> , [ <calc-sum> | none ] )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"color": {
@@ -3893,13 +3928,8 @@
"level": "LOW",
"lowDate": "2023-05-09"
},
- "doc": "The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount.\n
Choosing the correct color space is important for producing desired results. Given the same colors to mix, different color spaces may be more appropriate depending on the interpolation use case.\n
\n
If the result of physically mixing two colored lights is desired, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.
\n
If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab) are appropriate, because they are designed to be perceptually uniform.
\n
If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, OkLCh (and the older LCH) work well.
\n
Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes.
\n
",
- "formalSyntax": "color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )\n <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]\n <rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space>\n <polar-color-space> = hsl | hwb | lch | oklch\n <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue\n <xyz-space> = xyz | xyz-d50 | xyz-d65",
- "values": {
- "<color-interpolation-method>": "Specifies what interpolation method should be used to mix the colors. It consists of the in keyword followed by a color space name. The following three types are available:\n
Note:\nWhen browsers support @color-profile, custom color spaces may be supported. Currently, the color space must be one of the available color spaces listed in the formal_syntax.\n
",
- "<color>": "A <color> value to mix.",
- "<percentage>": "A <percentage> value between 0% and 100%, specifying the amount of the corresponding color to mix.\n
The two color percentages (we'll refer to them as p1 and p2) are normalized as follows:\n
\n
If both p1 and p2 are omitted, then p1 = p2 = 50%.
\n
If p1 is omitted, then p1 = 100% - p2.
\n
If p2 is omitted, then p2 = 100% - p1.
\n
If p1 = p2 = 0%, the function is invalid.
\n
If p1 + p2 ≠ 100%, then p1' = p1 / (p1 + p2) and p2' = p2 / (p1 + p2), where p1' and p2' are the normalization results.\n
\n
If p1 + p2 < 100%, then an alpha multiplier of p1 + p2 is applied to the resulting color. This is similar to mixing in transparent, with percentage pt = 100% - p1 - p2.
\n
\n
\n
"
- }
+ "doc": "The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount.",
+ "formalSyntax": "color-mix( <color-interpolation-method>? , [ <color> && <percentage [0,100]>? ]# )\n <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]\n <rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space>\n <polar-color-space> = hsl | hwb | lch | oklch\n <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue\n <xyz-space> = xyz | xyz-d50 | xyz-d65"
},
"conic-gradient": {
"url": "$MDN_URL$/web/css/gradient/conic-gradient",
@@ -3921,7 +3951,7 @@
"lowDate": "2020-11-17",
"highDate": "2023-05-17"
},
- "doc": "The conic-gradient()CSSfunction creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.",
+ "doc": "The conic-gradient()CSSfunction creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>.",
"formalSyntax": "conic-gradient( [ <conic-gradient-syntax> ] )\n <conic-gradient-syntax> = [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]\n <angular-color-stop-list> = <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?\n <length-percentage> = <length> | <percentage>\n <rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space>\n <polar-color-space> = hsl | hwb | lch | oklch\n <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue\n <angular-color-stop> = <color> <color-stop-angle>?\n <angular-color-hint> = <angle-percentage> | <zero>\n <xyz-space> = xyz | xyz-d50 | xyz-d65\n <color-stop-angle> = [ <angle-percentage> | <zero> ]{1,2}\n <angle-percentage> = <angle> | <percentage>",
"values": {
"<angle>": "Preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.",
@@ -3950,7 +3980,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The contrast()CSSfunction adjusts the contrast of the input image. Its result is a <filter-function>.",
+ "doc": "The contrast()CSSfunction adjusts the contrast of the input image. Its result is a <filter-function>.",
"formalSyntax": "contrast( [ <number> | <percentage> ]? )",
"values": {
"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 or 0% will create an image that is completely gray, while a value of 1 or 100% leaves the input unchanged. Negative values are not allowed. The initial value for interpolation is 1. The default value is 1."
@@ -3969,7 +3999,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "
contrast-color() makes it easy, for example, to specify a text color and automatically generate a contrasting background color, or vice versa. It avoids the need to maintain background-text color pairs."
+ "doc": "
The contrast-color()CSSfunction takes a color value and returns a contrasting color. The function commonly ensures the WCAG AA minimum contrast. The browsers may use different and better algorithms.\n
contrast-color() makes it easy, for example, to specify a text color and automatically generate a contrasting background color, or vice versa. It avoids the need to maintain background-text color pairs."
},
"cos": {
"url": "$MDN_URL$/web/css/cos",
@@ -3991,7 +4021,7 @@
"lowDate": "2023-03-13",
"highDate": "2025-09-13"
},
- "doc": "The cos()CSSfunction is a trigonometric function that returns the cosine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. That is, cos(45deg), cos(0.125turn), and cos(3.14159 / 4) all represent the same value, approximately 0.707.",
+ "doc": "The cos()CSSfunction is a trigonometric function that returns the cosine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. That is, cos(45deg), cos(0.125turn), and cos(3.14159 / 4) all represent the same value, approximately 0.707.",
"formalSyntax": "cos( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"counter": {
@@ -4014,7 +4044,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The counter()CSSfunction returns a string representing the current value of the named counter, if there is one.\n
The counter() function is generally used within pseudo-element through the content property but, theoretically, it can be used wherever a <string> value is supported.",
+ "doc": "The counter()CSSfunction returns a string representing the current value of the named counter, if there is one.\n
The counter() function is generally used within pseudo-element through the content property but, theoretically, it can be used wherever a <string> value is supported.",
"formalSyntax": "counter( <counter-name> , <counter-style>? )\n <counter-style> = <counter-style-name> | <symbols()>\n <symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )\n <symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed\n <image> = <url> | <gradient>\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )",
"values": {
"<counter-name>": "A <custom-ident> identifying the counter, which is the same case-sensitive name used with the counter-reset and counter-increment property values. The counter name cannot start with two dashes and can't be none, unset, initial, or inherit.",
@@ -4041,7 +4071,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The counters()CSSfunction enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style.\n
The counters() function is generally used within pseudo-element through the content property, but theoretically, it can be used wherever a <string> value is supported.\n
The counters() function has two forms: counters(<name>, <string>) and counters(<name>, <string>, <style>). The generated text is the value of all counters with the given <name>, arranged from the outermost to the innermost, and separated by the specified <string>. The counters are rendered in the <style> indicated, defaulting to decimal if no <style> is specified.",
+ "doc": "The counters()CSSfunction enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style.\n
The counters() function is generally used within pseudo-element through the content property, but theoretically, it can be used wherever a <string> value is supported.\n
The counters() function has two forms: counters(<name>, <string>) and counters(<name>, <string>, <style>). The generated text is the value of all counters with the given <name>, arranged from the outermost to the innermost, and separated by the specified <string>. The counters are rendered in the <style> indicated, defaulting to decimal if no <style> is specified.",
"formalSyntax": "counters( <counter-name> , <string> , <counter-style>? )\n <counter-style> = <counter-style-name> | <symbols()>\n <symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ )\n <symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed\n <image> = <url> | <gradient>\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )",
"values": {
"<counter-name>": "A <custom-ident> identifying the counters, which is the same case-sensitive name used for the counter-reset and counter-increment properties. The name cannot start with two dashes and can't be none, unset, initial, or inherit. Alternatively, for inline, single-use counters, the symbols() function can be used instead of a named counter in browsers that support symbols().",
@@ -4061,7 +4091,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The cross-fade()CSSfunction can be used to blend two or more images at a defined transparency.\nIt can be used for many basic image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.",
+ "doc": "The cross-fade()CSSfunction can be used to blend two or more images at a defined transparency.\nIt can be used for many basic image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.",
"formalSyntax": "cross-fade( <cf-image># )\n <cf-image> = [ <image> | <color> ] &&<percentage [0,100]>?\n <image> = <url> | <gradient>\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )"
},
"cubic-bezier": {
@@ -4084,7 +4114,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The cubic-bezier()CSSfunction creates a smooth transition using a cubic Bézier curve.\nAs an <easing-function>, it can be used to smooth out the start and end of the interpolation.",
+ "doc": "The cubic-bezier()CSSfunction creates a smooth transition using a cubic Bézier curve.\nAs an <easing-function>, it can be used to smooth out the start and end of the interpolation.",
"formalSyntax": "cubic-bezier( [ <number [0,1]> , <number> ]#{2} )"
},
"device-cmyk": {
@@ -4117,7 +4147,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The drop-shadow()CSSfunction applies a drop shadow effect to the input image. Its result is a <filter-function>.",
+ "doc": "The drop-shadow()CSSfunction applies a drop shadow effect to the input image. Its result is a <filter-function>.",
"formalSyntax": "drop-shadow( [ <color>? && <length>{2,3} ] )"
},
"dynamic-range-limit-mix": {
@@ -4132,7 +4162,7 @@
"Edge": "136",
"Opera": "121"
},
- "doc": "
The dynamic-range-limit-mix()CSSfunction creates a custom maximum luminance limit by mixing different dynamic-range-limit keywords in specified amounts.",
+ "doc": "
The element()CSSfunction defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.\n
A particularly useful scenario for using this would be to render an image in an HTML <canvas> element, then use that as a background.\n
On Gecko browsers, you can use the non-standard document.mozSetImageElement() method to change the element being used as the background for a given CSS background element.",
+ "doc": "
The element()CSSfunction defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.\n
A particularly useful scenario for using this would be to render an image in an HTML <canvas> element, then use that as a background.\n
On Gecko browsers, you can use the non-standard document.mozSetImageElement() method to change the element being used as the background for a given CSS background element.",
"formalSyntax": "element( <id-selector> )\n <id-selector> = <hash-token>"
},
"ellipse": {
@@ -4168,7 +4198,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The ellipse()CSS function is one of the <basic-shape>data types.",
+ "doc": "The ellipse()CSS function is one of the <basic-shape>data types.",
"formalSyntax": "ellipse( <radial-size>? [ at <position> ]? )\n <radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side\n <length-percentage> = <length> | <percentage>",
"values": {
"<shape-radius>": "Two radii, x and y in that order. These may be a <length>, or a <percentage> or values closest-side and farthest-side.\n
Uses the length from the center of the shape to the closest side of the reference box. For ellipses, this is the closest side in the radius dimension.\n
Uses the length from the center of the shape to the farthest side of the reference box. For ellipses, this is the farthest side in the radius dimension.\n
\n
",
@@ -4195,7 +4225,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The env()CSSfunction can be used to insert the value of a user-agent defined environment variable into your CSS.",
+ "doc": "The env()CSSfunction can be used to insert the value of a user-agent defined environment variable into your CSS.",
"formalSyntax": "env( <custom-ident> <integer [0,∞]>* , <declaration-value>? )"
},
"exp": {
@@ -4217,7 +4247,7 @@
"level": "LOW",
"lowDate": "2023-12-07"
},
- "doc": "The exp()CSSfunction is an exponential function that takes a number as an argument and returns the mathematical constant e raised to the power of the given number.\n
The mathematical constant e is the base of natural logarithms, and is approximately 2.718281828459045.\n
The exp(number) function contains a calculation which returns the same value as pow(e, number).",
+ "doc": "The exp()CSSfunction is an exponential function that takes a number as an argument and returns the mathematical constant e raised to the power of the given number.\n
The mathematical constant e is the base of natural logarithms, and is approximately 2.718281828459045.\n
The exp(number) function contains a calculation which returns the same value as pow(e, number).",
"formalSyntax": "exp( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"fit-content": {
@@ -4238,7 +4268,7 @@
},
"support_of_fit-content_function": {}
},
- "doc": "The fit-content()CSSfunction clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).",
+ "doc": "The fit-content()CSSfunction clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).",
"formalSyntax": "fit-content( <length-percentage> )\n <length-percentage> = <length> | <percentage>",
"values": {
"<length>": "An absolute length.",
@@ -4265,7 +4295,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The grayscale()CSSfunction converts the input image to grayscale. Its result is a <filter-function>.",
+ "doc": "The grayscale()CSSfunction converts the input image to grayscale. Its result is a <filter-function>.",
"formalSyntax": "grayscale( [ <number> | <percentage> ]? )"
},
"hsl": {
@@ -4318,7 +4348,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The hue-rotate()CSSfunction rotates the hue of an element and its contents. Its result is a <filter-function>.\n
\n
Note:\nhue-rotate() is specified as a matrix operation on the RGB color. It does not actually convert the color to the HSL model, which is a non-linear operation. Therefore, it may not preserve the saturation or lightness of the original color, especially for saturated colors.\n
",
+ "doc": "The hue-rotate()CSSfunction rotates the hue of an element and its contents. Its result is a <filter-function>.\n
\n
Note:\nhue-rotate() is specified as a matrix operation on the RGB color. It does not actually convert the color to the HSL model, which is a non-linear operation. Therefore, it may not preserve the saturation or lightness of the original color, especially for saturated colors.\n
",
"formalSyntax": "hue-rotate( [ <angle> | <zero> ]? )",
"values": {
"angle": "The relative change in hue of the input sample, specified as an <angle>. A value of 0deg leaves the input unchanged. A positive hue rotation increases the hue value, while a negative rotation decreases the hue value. The initial value for interpolation is 0. There is no minimum or maximum value. The effect of values above 360deg are, given hue-rotate(Ndeg), evaluates to N modulo 360. The default value is 0deg."
@@ -4366,7 +4396,7 @@
"level": "LOW",
"lowDate": "2023-12-07"
},
- "doc": "The hypot()CSSfunction is an exponential function that returns the square root of the sum of squares of its parameters.\n
While pow() and sqrt() only work on unitless numbers, hypot() accepts values with units, but they all must have the same type.",
+ "doc": "The hypot()CSSfunction is an exponential function that returns the square root of the sum of squares of its parameters.\n
While pow() and sqrt() only work on unitless numbers, hypot() accepts values with units, but they all must have the same type.",
"formalSyntax": "hypot( <calc-sum># )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"if": {
@@ -4384,11 +4414,11 @@
"baseline": {
"level": "NONE"
},
- "doc": "
The if()CSSfunction allows different values to be set for a property depending on the result of a conditional test. The test can be based on a style query, a media query, or a feature query."
+ "doc": "
The if()CSSfunction allows different values to be set for a property depending on the result of a conditional test. The test can be based on a style query, a media query, or a feature query."
},
"image": {
"url": "$MDN_URL$/web/css/image/image",
- "doc": "The image()CSSfunction defines an <image> in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.\n
",
+ "doc": "The image()CSSfunction defines an <image> in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered.\n
",
"formalSyntax": "image( <image-tags>? [ <image-src>? , <color>? ]! )\n <image-tags> = ltr | rtl\n <image-src> = <url> | <string>\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )",
"values": {
"image-tags": "The directionality of the image, either ltr for left-to-right or rtl for right-to-left.",
@@ -4415,7 +4445,7 @@
"level": "LOW",
"lowDate": "2023-09-18"
},
- "doc": "The image-set()CSSfunctional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.\n
Resolution and bandwidth differ by device and network access. The image-set() function delivers the most appropriate image resolution for a user's device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. Resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.\n
image-set() allows the author to provide options rather than determining what each individual user needs.",
+ "doc": "The image-set()CSSfunctional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.\n
Resolution and bandwidth differ by device and network access. The image-set() function delivers the most appropriate image resolution for a user's device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. Resolution can be used as a proxy for filesize — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load.\n
image-set() allows the author to provide options rather than determining what each individual user needs.",
"formalSyntax": "image-set( <image-set-option># )\n <image-set-option> = [ <image> | <string> ] [ <resolution> || type( <string> ) ]?\n <image> = <url> | <gradient>\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )",
"values": {
"<image>": "The <image> can be any image type except for an image set. The image-set() function may not be nested inside another image-set() function.",
@@ -4444,7 +4474,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The inset()CSS function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the <basic-shape>data types.",
+ "doc": "The inset()CSS function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the <basic-shape>data types.",
"formalSyntax": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )\n <length-percentage> = <length> | <percentage>\n <border-radius> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?",
"values": {
"<length-percentage>{1,4}": "When all of the four arguments are supplied they represent the top, right, bottom, and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. These arguments follow the syntax of the margin shorthand, which let you set all\nfour insets with one, two, or four values.\n
If a pair of insets for a dimension adds up to more than 100% of that dimension, both values are proportionally reduced so their sum equals 100%. For example, the value inset(90% 10% 60% 10%) has a top inset of 90% and a bottom inset of 60%. These values are reduced proportionally to inset(60% 10% 40% 10%). Shapes such as this, that enclose no area and have no shape-margin, do not affect wrapping.",
@@ -4471,7 +4501,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The invert()CSSfunction inverts the color samples in the input image. Its result is a <filter-function>.",
+ "doc": "The invert()CSSfunction inverts the color samples in the input image. Its result is a <filter-function>.",
"formalSyntax": "invert( [ <number> | <percentage> ]? )"
},
"lab": {
@@ -4551,7 +4581,7 @@
"level": "LOW",
"lowDate": "2024-05-13"
},
- "doc": "The light-dark()CSS<color> function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-schememedia feature query.\nUsers are able to indicate their color-scheme preference through their operating system settings (e.g., light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any <color> value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark.\n
To enable support for the light-dark() color function, the color-scheme must have a value of light dark, usually set on the :rootpseudo-class.\n
",
+ "doc": "The light-dark()CSS<color> function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme - without needing to encase the theme colors within a prefers-color-schememedia feature query.\nUsers are able to indicate their color-scheme preference through their operating system settings (e.g., light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any <color> value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark.\n
To enable support for the light-dark() color function, the color-scheme must have a value of light dark, usually set on the :rootpseudo-class.\n
",
"formalSyntax": "light-dark( <color> , <color> )",
"values": {
"light-color": "<color> value to be set for light color-scheme.",
@@ -4577,7 +4607,7 @@
"level": "LOW",
"lowDate": "2023-12-11"
},
- "doc": "The linear()CSSfunction creates a transition curve that progresses uniformly between points.\nAs an <easing-function>, it creates transitions where the interpolation occurs at a constant rate from beginning to end.",
+ "doc": "The linear()CSSfunction creates a transition curve that progresses uniformly between points.\nAs an <easing-function>, it creates transitions where the interpolation occurs at a constant rate from beginning to end.",
"formalSyntax": "linear( [ <number> && <percentage>{0,2} ]# )"
},
"linear-gradient": {
@@ -4600,7 +4630,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The linear-gradient()CSSfunction creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.",
+ "doc": "The linear-gradient()CSSfunction creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.",
"formalSyntax": "linear-gradient( [ <linear-gradient-syntax> ] )\n <linear-gradient-syntax> = [ <angle> | <zero> | to <side-or-corner> ]? , <color-stop-list>\n <side-or-corner> = [ left | right ] || [ top | bottom ]\n <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?\n <linear-color-stop> = <color> <length-percentage>?\n <linear-color-hint> = <length-percentage>\n <length-percentage> = <length> | <percentage>",
"values": {
"<side-or-corner>": "The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to to bottom.\n
The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. The other values are translated into an angle.",
@@ -4628,7 +4658,7 @@
"level": "LOW",
"lowDate": "2023-12-07"
},
- "doc": "The log()CSSfunction is an exponential function that returns the logarithm of a number.\n
Logarithm is the inverse of exponentiation. It is the number that a fixed base has to be raised to in order to yield the number passed as the first parameter.\n
In CSS, when a single parameter is passed, the natural logarithm e, or approximately 2.7182818, is used, though the base can be set to any value with an optional second parameter.",
+ "doc": "The log()CSSfunction is an exponential function that returns the logarithm of a number.\n
Logarithm is the inverse of exponentiation. It is the number that a fixed base has to be raised to in order to yield the number passed as the first parameter.\n
In CSS, when a single parameter is passed, the natural logarithm e, or approximately 2.7182818, is used, though the base can be set to any value with an optional second parameter.",
"formalSyntax": "log( <calc-sum> , <calc-sum>? )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"matrix": {
@@ -4651,7 +4681,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The matrix()CSSfunction defines a homogeneous 2D transformation matrix. Its result is\na <transform-function> data type.\n
\n
Note:\nThe matrix(a, b, c, d, tx, ty) function is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).\n
",
+ "doc": "The matrix()CSSfunction defines a homogeneous 2D transformation matrix. Its result is\na <transform-function> data type.\n
\n
Note:\nThe matrix(a, b, c, d, tx, ty) function is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).\n
",
"formalSyntax": "matrix( <number>#{6} )",
"values": {
"a b c d": "Are <number>s describing the linear transformation.",
@@ -4678,7 +4708,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The matrix3d()CSSfunction defines a 3D transformation as a 4x4 homogeneous matrix.\nIts result is a <transform-function> data type.",
+ "doc": "The matrix3d()CSSfunction defines a 3D transformation as a 4x4 homogeneous matrix.\nIts result is a <transform-function> data type.",
"formalSyntax": "matrix3d( <number>#{16} )",
"values": {
"a1 b1 c1 d1 a2 b2 c2 d2\na3 b3 c3 d3": "Are <number>s describing the linear transformation.",
@@ -4705,7 +4735,7 @@
"lowDate": "2020-07-28",
"highDate": "2023-01-28"
},
- "doc": "The max()CSSfunction lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.",
+ "doc": "The max()CSSfunction lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.",
"formalSyntax": "max( <calc-sum># )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"min": {
@@ -4728,7 +4758,7 @@
"lowDate": "2020-07-28",
"highDate": "2023-01-28"
},
- "doc": "The min()CSSfunction lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.",
+ "doc": "The min()CSSfunction lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.",
"formalSyntax": "min( <calc-sum># )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"minmax": {
@@ -4751,7 +4781,7 @@
"lowDate": "2017-10-17",
"highDate": "2020-04-17"
},
- "doc": "The minmax()CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids.",
+ "doc": "The minmax()CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids.",
"formalSyntax": "minmax( min , max )",
"values": {
"<length>": "A non-negative length.",
@@ -4781,7 +4811,7 @@
"level": "LOW",
"lowDate": "2024-05-17"
},
- "doc": "The mod()CSSfunction returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.\n
The calculation is a - (Math.floor(a / b) * b). For example, the CSS mod(21, -4) function returns the remainder of -3. The full calculation is 21 - (Math.floor(21 / -4) * -4). When dividing 21 by -4, the result is -5.25. This is floored to -6. Multiplying -6 by -4 is 24. Subtracting this 24 from the original 21, the remainder is -3.",
+ "doc": "The mod()CSSfunction returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor.\n
The calculation is a - (Math.floor(a / b) * b). For example, the CSS mod(21, -4) function returns the remainder of -3. The full calculation is 21 - (Math.floor(21 / -4) * -4). When dividing 21 by -4, the result is -5.25. This is floored to -6. Multiplying -6 by -4 is 24. Subtracting this 24 from the original 21, the remainder is -3.",
"formalSyntax": "mod( <calc-sum> , <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"oklab": {
@@ -4862,7 +4892,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The opacity()CSSfunction applies transparency to the samples in the input image. Its result is a <filter-function>.",
+ "doc": "The opacity()CSSfunction applies transparency to the samples in the input image. Its result is a <filter-function>.",
"formalSyntax": "opacity( [ <number> | <percentage> ]? )"
},
"paint": {
@@ -4879,7 +4909,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The paint()CSSfunction defines an <image> value generated with a PaintWorklet.",
+ "doc": "The paint()CSSfunction defines an <image> value generated with a PaintWorklet.",
"formalSyntax": "paint( <ident> , <declaration-value>? )"
},
"path": {
@@ -4902,7 +4932,7 @@
"lowDate": "2020-07-28",
"highDate": "2023-01-28"
},
- "doc": "The path()CSSfunction accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path() function is a <basic-shape> data type value. It can be used in the CSS offset-path and clip-path properties and in the SVG d attribute.\n
There are some limitations to using the path() function. The path has to be defined as a single string, so a custom path can't be created using variables (var() functions). Also, all the lengths in the path are implicitly defined in pixel (px) units; other units can't be used. The shape() function offers more flexibility than the path() function.",
+ "doc": "The path()CSSfunction accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path() function is a <basic-shape> data type value. It can be used in the CSS offset-path and clip-path properties and in the SVG d attribute.\n
There are some limitations to using the path() function. The path has to be defined as a single string, so a custom path can't be created using variables (var() functions). Also, all the lengths in the path are implicitly defined in pixel (px) units; other units can't be used. The shape() function offers more flexibility than the path() function.",
"formalSyntax": "path( <'fill-rule'>? , <string> )\n <fill-rule> = nonzero | evenodd"
},
"perspective": {
@@ -4925,7 +4955,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The perspective()CSSfunction defines a transformation that sets the distance between the\nuser and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were\n3-dimensional. Its result is a <transform-function> data type.",
+ "doc": "The perspective()CSSfunction defines a transformation that sets the distance between the\nuser and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were\n3-dimensional. Its result is a <transform-function> data type.",
"formalSyntax": "perspective( [ <length [0,∞]> | none ] )",
"values": {
"d": "Is a <length> representing the distance from the user to the z=0 plane. The z=0 plane is the plane where everything appears in a 2-dimensional view, or the screen. Values smaller than 1px (including zero) are clamped to 1px. Negative values are syntax errors.\n
Values other than none cause elements with positive z positions to appear larger, and elements with negative z positions to appear smaller. Elements with z positions equal to or larger than the perspective value disappear as though they are behind the user. Large values of perspective represent a small transformation; small values of perspective() represent a large transformation; perspective(none) represents perspective from infinite distance and no transformation."
@@ -4951,7 +4981,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The polygon()CSS function is one of the <basic-shape>data types. It's used to draw a polygon by providing one or more pairs of coordinates, each of which represents a vertex of the shape.",
+ "doc": "The polygon()CSS function is one of the <basic-shape>data types. It's used to draw a polygon by providing one or more pairs of coordinates, each of which represents a vertex of the shape.",
"formalSyntax": "polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# )\n <fill-rule> = nonzero | evenodd\n <length-percentage> = <length> | <percentage>"
},
"pow": {
@@ -4973,7 +5003,7 @@
"level": "LOW",
"lowDate": "2023-12-07"
},
- "doc": "The pow()CSSfunction is an exponential function that returns the value of a base raised to the power of a number.\n
The exp() function is a special case of pow() where the value of the base is the mathematical constant e.",
+ "doc": "The pow()CSSfunction is an exponential function that returns the value of a base raised to the power of a number.\n
The exp() function is a special case of pow() where the value of the base is the mathematical constant e.",
"formalSyntax": "pow( <calc-sum> , <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"progress": {
@@ -4988,7 +5018,7 @@
"Edge": "138",
"Opera": "122"
},
- "doc": "
The progress()CSSfunction returns a <number> value representing the position of one value (the progress value) relative to two other values (the progress start and end values).",
+ "doc": "
The progress()CSSfunction returns a <number> value representing the position of one value (the progress value) relative to two other values (the progress start and end values).",
"formalSyntax": "progress( <calc-sum> , <calc-sum> , <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"radial-gradient": {
@@ -5011,7 +5041,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The radial-gradient()CSSfunction creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient> data type, which is a special kind of <image>.",
+ "doc": "The radial-gradient()CSSfunction creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient> data type, which is a special kind of <image>.",
"formalSyntax": "radial-gradient( [ <radial-gradient-syntax> ] )\n <radial-gradient-syntax> = [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>\n <radial-shape> = circle | ellipse\n <radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?\n <radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side\n <length-percentage> = <length> | <percentage>\n <linear-color-stop> = <color> <length-percentage>?\n <linear-color-hint> = <length-percentage>",
"values": {
"<position>": "The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.",
@@ -5040,7 +5070,7 @@
"level": "LOW",
"lowDate": "2024-01-23"
},
- "doc": "The ray()CSSfunction defines the offset-path line segment that an animated element can follow. The line segment is referred to as \"ray\". The ray begins from an offset-position and extends in the direction of the specified angle. The length of a ray can be constrained by specifying a size and using the contain keyword.",
+ "doc": "The ray()CSSfunction defines the offset-path line segment that an animated element can follow. The line segment is referred to as \"ray\". The ray begins from an offset-position and extends in the direction of the specified angle. The length of a ray can be constrained by specifying a size and using the contain keyword.",
"formalSyntax": "ray( <angle> &&<ray-size>? &&contain? &&[ at <position> ]? )\n <ray-size> = closest-side | closest-corner | farthest-side | farthest-corner | sides\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <length-percentage> = <length> | <percentage>"
},
"rect": {
@@ -5062,7 +5092,7 @@
"level": "LOW",
"lowDate": "2024-01-23"
},
- "doc": "The rect()CSS function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the <basic-shape>data type. You can use the rect() function in CSS properties such as offset-path to create the rectangular path along which an element moves and in clip-path to define the shape of the clipping region.",
+ "doc": "The rect()CSS function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the <basic-shape>data type. You can use the rect() function in CSS properties such as offset-path to create the rectangular path along which an element moves and in clip-path to define the shape of the clipping region.",
"formalSyntax": "rect( <top> , <right> , <bottom> , <left> )",
"values": {
"<length-percentage>": "Specifies the <length-percentage> value of the distance of the top, right, bottom, or left edge of the rectangle from the top or left edge of the containing block. The first (top) and third (bottom) values are distances from the top edge of the containing block, and the second (right) and fourth (left) values are distances from the left edge of the containing block. The second (right) and third (bottom) values are clamped by the fourth (left) and first (top) values, respectively, to prevent the bottom edge from crossing over the top edge and right edge from crossing over the left edge. For example, rect(10px 0 0 20px) is clamped to rect(10px 20px 10px 20px).",
@@ -5089,7 +5119,7 @@
"level": "LOW",
"lowDate": "2024-05-17"
},
- "doc": "The rem()CSSfunction returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend.\n
\n
Note:\nTo read about the unit rem, see the <length> page.\n
\n
For example, the CSS rem(27, 5) function returns the remainder of 2. When dividing 27 by 5, the result is 5 with a remainder of 2. The full calculation is 27 / 5 = 5 * 5 + 2.",
+ "doc": "The rem()CSSfunction returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend.\n
\n
Note:\nTo read about the unit rem, see the <length> page.\n
\n
For example, the CSS rem(27, 5) function returns the remainder of 2. When dividing 27 by 5, the result is 5 with a remainder of 2. The full calculation is 27 / 5 = 5 * 5 + 2.",
"formalSyntax": "rem( <calc-sum> , <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"repeat": {
@@ -5112,7 +5142,7 @@
"lowDate": "2020-07-28",
"highDate": "2023-01-28"
},
- "doc": "The repeat()CSSfunction represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.",
+ "doc": "The repeat()CSSfunction represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.",
"formalSyntax": "repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )\n <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )\n <fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )\n <name-repeat> = repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )\n <line-names> = '[' <custom-ident>* ']'\n <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage [0,∞]> )\n <fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )\n <track-breadth> = <length-percentage [0,∞]> | <flex [0,∞]> | min-content | max-content | auto\n <inflexible-breadth> = <length-percentage [0,∞]> | min-content | max-content | auto\n <length-percentage> = <length> | <percentage>\n <fixed-breadth> = <length-percentage [0,∞]>",
"values": {
"<fixed-size>": "One of the following forms:\n
",
@@ -5148,7 +5178,7 @@
"lowDate": "2020-11-17",
"highDate": "2023-05-17"
},
- "doc": "The repeating-conic-gradient()CSSfunction creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).",
+ "doc": "The repeating-conic-gradient()CSSfunction creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center).",
"formalSyntax": "repeating-conic-gradient( [ <conic-gradient-syntax> ] )\n <conic-gradient-syntax> = [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <color-interpolation-method> = in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]\n <angular-color-stop-list> = <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?\n <length-percentage> = <length> | <percentage>\n <rectangular-color-space> = srgb | srgb-linear | display-p3 | display-p3-linear | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | <xyz-space>\n <polar-color-space> = hsl | hwb | lch | oklch\n <hue-interpolation-method> = [ shorter | longer | increasing | decreasing ] hue\n <angular-color-stop> = <color> <color-stop-angle>?\n <angular-color-hint> = <angle-percentage> | <zero>\n <xyz-space> = xyz | xyz-d50 | xyz-d65\n <color-stop-angle> = [ <angle-percentage> | <zero> ]{1,2}\n <angle-percentage> = <angle> | <percentage>",
"values": {
"<angle>": "Preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.",
@@ -5177,7 +5207,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The repeating-linear-gradient()CSSfunction creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the <gradient> data type, which is a special kind of <image>.",
+ "doc": "The repeating-linear-gradient()CSSfunction creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the <gradient> data type, which is a special kind of <image>.",
"formalSyntax": "repeating-linear-gradient( [ <linear-gradient-syntax> ] )\n <linear-gradient-syntax> = [ <angle> | <zero> | to <side-or-corner> ]? , <color-stop-list>\n <side-or-corner> = [ left | right ] || [ top | bottom ]\n <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?\n <linear-color-stop> = <color> <length-percentage>?\n <linear-color-hint> = <length-percentage>\n <length-percentage> = <length> | <percentage>",
"values": {
"<side-or-corner>": "The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to to bottom.\n
The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. The other values are translated into an angle.",
@@ -5206,7 +5236,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The repeating-radial-gradient()CSSfunction creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient(). The function's result is an object of the <gradient> data type, which is a special kind of <image>.",
+ "doc": "The repeating-radial-gradient()CSSfunction creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient(). The function's result is an object of the <gradient> data type, which is a special kind of <image>.",
"formalSyntax": "repeating-radial-gradient( [ <radial-gradient-syntax> ] )\n <radial-gradient-syntax> = [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>\n <radial-shape> = circle | ellipse\n <radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?\n <radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side\n <length-percentage> = <length> | <percentage>\n <linear-color-stop> = <color> <length-percentage>?\n <linear-color-hint> = <length-percentage>",
"values": {
"<position>": "The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.",
@@ -5263,7 +5293,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The rotate()CSSfunction defines a transformation that rotates an element around a\nfixed point on the 2D plane, without deforming it. Its result is a <transform-function> data\ntype.",
+ "doc": "The rotate()CSSfunction defines a transformation that rotates an element around a\nfixed point on the 2D plane, without deforming it. Its result is a <transform-function> data\ntype.",
"formalSyntax": "rotate( [ <angle> | <zero> ] )",
"values": {
"a": "Is an <angle> representing the angle of the rotation. The direction of rotation depends on the writing direction.\nIn a left-to-right context, a positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. In a right-to-left context,\na positive angle denotes a counter-clockwise rotation, a negative angle a clockwise one. A rotation by 180° is called point reflection."
@@ -5289,7 +5319,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The rotate3d()CSSfunction defines a transformation that rotates an element around a\nfixed axis in 3D space, without deforming it. Its result is a <transform-function> data type.",
+ "doc": "The rotate3d()CSSfunction defines a transformation that rotates an element around a\nfixed axis in 3D space, without deforming it. Its result is a <transform-function> data type.",
"formalSyntax": "rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )",
"values": {
"x": "Is a <number> describing the x-coordinate of the vector denoting the axis of rotation which\ncan be a positive or negative number.",
@@ -5318,7 +5348,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The rotateX()CSSfunction defines a transformation that rotates an element around the\nx-axis (horizontal) without deforming it. Its result is a <transform-function> data type.",
+ "doc": "The rotateX()CSSfunction defines a transformation that rotates an element around the\nx-axis (horizontal) without deforming it. Its result is a <transform-function> data type.",
"formalSyntax": "rotateX( [ <angle> | <zero> ] )",
"values": {
"a": "Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise\nrotation, a negative angle a counter-clockwise one."
@@ -5344,7 +5374,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The rotateY()CSSfunction defines a transformation that rotates an element around the\ny-axis (vertical) without deforming it. Its result is a <transform-function> data type.",
+ "doc": "The rotateY()CSSfunction defines a transformation that rotates an element around the\ny-axis (vertical) without deforming it. Its result is a <transform-function> data type.",
"formalSyntax": "rotateY( [ <angle> | <zero> ] )",
"values": {
"a": "Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise\nrotation, a negative angle a counter-clockwise one."
@@ -5370,7 +5400,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The rotateZ()CSSfunction defines a transformation that rotates an element around the\nz-axis without deforming it. Its result is a <transform-function> data type.",
+ "doc": "The rotateZ()CSSfunction defines a transformation that rotates an element around the\nz-axis without deforming it. Its result is a <transform-function> data type.",
"formalSyntax": "rotateZ( [ <angle> | <zero> ] )",
"values": {
"a": "Is an <angle> representing the angle of the rotation. A positive angle denotes a clockwise\nrotation, a negative angle a counter-clockwise one."
@@ -5395,7 +5425,7 @@
"level": "LOW",
"lowDate": "2024-05-17"
},
- "doc": "The round()CSSfunction returns a rounded number based on a selected rounding strategy.\n
Authors should use a custom CSS property (e.g., --my-property) for the rounding value, interval, or both; using the round() function is redundant if these have known values.",
+ "doc": "The round()CSSfunction returns a rounded number based on a selected rounding strategy.\n
Authors should use a custom CSS property (e.g., --my-property) for the rounding value, interval, or both; using the round() function is redundant if these have known values.",
"formalSyntax": "round( <rounding-strategy>? , <calc-sum> , <calc-sum>? )\n <rounding-strategy> = nearest | up | down | to-zero\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"saturate": {
@@ -5418,7 +5448,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The saturate()CSSfunction super-saturates or desaturates the input image. Its result is a <filter-function>.\n
\n
Note:\nsaturate() is specified as a matrix operation on the RGB color. It does not actually convert the color to the HSL model, which is a non-linear operation. Therefore, it may not preserve the hue or lightness of the original color.\n
",
+ "doc": "The saturate()CSSfunction super-saturates or desaturates the input image. Its result is a <filter-function>.\n
\n
Note:\nsaturate() is specified as a matrix operation on the RGB color. It does not actually convert the color to the HSL model, which is a non-linear operation. Therefore, it may not preserve the hue or lightness of the original color.\n
",
"formalSyntax": "saturate( [ <number> | <percentage> ]? )"
},
"scale": {
@@ -5441,7 +5471,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The scale()CSSfunction defines a transformation that resizes an element on the 2D\nplane. Because the amount of scaling is defined by a vector [sx, sy], it can resize the horizontal and vertical dimensions at\ndifferent scales. Its result is a <transform-function> data type.",
+ "doc": "The scale()CSSfunction defines a transformation that resizes an element on the 2D\nplane. Because the amount of scaling is defined by a vector [sx, sy], it can resize the horizontal and vertical dimensions at\ndifferent scales. Its result is a <transform-function> data type.",
"formalSyntax": "scale( [ <number> | <percentage> ]#{1,2} )",
"values": {
"sx": "A <number> or <percentage> representing the abscissa (horizontal, x-component) of the scaling vector.",
@@ -5468,7 +5498,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The scale3d()CSSfunction defines a transformation that resizes an element in 3D space.\nBecause the amount of scaling is defined by a vector [sx, sy, sz], it can resize different dimensions at different scales. Its\nresult is a <transform-function> data type.",
+ "doc": "The scale3d()CSSfunction defines a transformation that resizes an element in 3D space.\nBecause the amount of scaling is defined by a vector [sx, sy, sz], it can resize different dimensions at different scales. Its\nresult is a <transform-function> data type.",
"formalSyntax": "scale3d( [ <number> | <percentage> ]#{3} )",
"values": {
"sx": "Is a <number> representing the abscissa (horizontal, x-component) of the scaling vector.",
@@ -5496,7 +5526,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The scaleX()CSSfunction defines a transformation that resizes an element along the\nx-axis (horizontally). Its result is a <transform-function> data type.",
+ "doc": "The scaleX()CSSfunction defines a transformation that resizes an element along the\nx-axis (horizontally). Its result is a <transform-function> data type.",
"formalSyntax": "scaleX( [ <number> | <percentage> ] )",
"values": {
"s": "Is a <number> representing the scaling factor to apply on the abscissa (horizontal, x-coordinate) of each point of the\nelement."
@@ -5522,7 +5552,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The scaleY()CSSfunction defines a transformation that resizes an element along the\ny-axis (vertically). Its result is a <transform-function> data type.",
+ "doc": "The scaleY()CSSfunction defines a transformation that resizes an element along the\ny-axis (vertically). Its result is a <transform-function> data type.",
"formalSyntax": "scaleY( [ <number> | <percentage> ] )",
"values": {
"s": "Is a <number> representing the scaling factor to apply on the ordinate (vertical, y-coordinate) of each point of the\nelement."
@@ -5548,7 +5578,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The scaleZ()CSSfunction defines a transformation that resizes an element along the\nz-axis. Its result is a <transform-function> data type.",
+ "doc": "The scaleZ()CSSfunction defines a transformation that resizes an element along the\nz-axis. Its result is a <transform-function> data type.",
"formalSyntax": "scaleZ( [ <number> | <percentage> ] )",
"values": {
"s": "Is a <number> representing the scaling factor to apply on the z-coordinate of each point of\nthe element."
@@ -5574,7 +5604,7 @@
"lowDate": "2016-09-07",
"highDate": "2019-03-07"
},
- "doc": "The sepia()CSSfunction converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a <filter-function>.",
+ "doc": "The sepia()CSSfunction converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a <filter-function>.",
"formalSyntax": "sepia( [ <number> | <percentage> ]? )"
},
"shape": {
@@ -5594,7 +5624,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The shape()CSS function is used to define a shape for the clip-path and offset-path properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The shape() function is a member of the <basic-shape> data type.",
+ "doc": "The shape()CSS function is used to define a shape for the clip-path and offset-path properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The shape() function is a member of the <basic-shape> data type.",
"formalSyntax": "shape( <'fill-rule'>? from <position> , <shape-command># )\n <fill-rule> = nonzero | evenodd\n <position> = [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]\n <shape-command> = <move-command> | <line-command> | close | <horizontal-line-command> | <vertical-line-command> | <curve-command> | <smooth-command> | <arc-command>\n <length-percentage> = <length> | <percentage>\n <move-command> = move <command-end-point>\n <line-command> = line <command-end-point>\n <horizontal-line-command> = hline [ to [ <length-percentage> | left | center | right | x-start | x-end ] | by <length-percentage> ]\n <vertical-line-command> = vline [ to [ <length-percentage> | top | center | bottom | y-start | y-end ] | by <length-percentage> ]\n <curve-command> = curve [ [ to <position> with <control-point> [ / <control-point> ]? ] | [ by <coordinate-pair> with <relative-control-point> [ / <relative-control-point> ]? ] ]\n <smooth-command> = smooth [ [ to <position> [ with <control-point> ]? ] | [ by <coordinate-pair> [ with <relative-control-point> ]? ] ]\n <arc-command> = arc <command-end-point> [ [ of <length-percentage>{1,2} ] && <arc-sweep>? && <arc-size>? && [ rotate <angle> ]? ]\n <command-end-point> = to <position> | by <coordinate-pair>\n <control-point> = <position> | <relative-control-point>\n <coordinate-pair> = <length-percentage>{2}\n <relative-control-point> = <coordinate-pair> [ from [ start | end | origin ] ]?\n <arc-sweep> = cw | ccw\n <arc-size> = large | small"
},
"sibling-count": {
@@ -5607,12 +5637,13 @@
"Chrome": "138",
"ChromeAndroid": "138",
"Edge": "138",
- "Opera": "122"
+ "Opera": "122",
+ "Safari": "preview"
},
"baseline": {
"level": "NONE"
},
- "doc": "
The sibling-count()CSSfunction returns an integer representing the total number of sibling DOM elements (direct children of the parent) of the element on which it is used, including itself.\n
\n
Note:\nThe counter() function provides a similar result but it returns a <string>, while sibling-count() returns an <integer> which can be used for calculations.\n
The sibling-count()CSSfunction returns an integer representing the total number of sibling DOM elements (direct children of the parent) of the element on which it is used, including itself.\n
\n
Note:\nThe counter() function provides a similar result but it returns a <string> (which is more suitable for generated content, while sibling-count() returns an <integer> (which can be used for calculations).\n
The sibling-index()CSSfunction returns an integer representing the position of the current element in the DOM tree relative to all its sibling elements. The returned value is the index number of the contextual child's position among all the sibling elements within a parent element, with the first child returning 1 and the last child, returning Element.children.length."
+ "doc": "
The sibling-index()CSSfunction returns an integer representing the position of the current element in the DOM tree relative to all its sibling elements. The returned value is the index number of the contextual child's position among all the sibling elements within a parent element, with the first child returning 1 and the last child, returning the length of Element.children.\n
\n
Note:\nLike the :nth-child() pseudo-class, sibling-index() starts from 1, not 0.\n
\n
\n
Note:\nThe counter() function provides a similar result but it returns a <string> (which is more suitable for generated content, while sibling-index() returns an <integer> (which can be used for calculations).\n
"
},
"sign": {
"url": "$MDN_URL$/web/css/sign",
@@ -5650,7 +5682,7 @@
"level": "LOW",
"lowDate": "2025-06-26"
},
- "doc": "The sign()CSSfunction contains one calculation, and returns -1 if the numeric value of the argument is negative, +1 if the numeric value of the argument is positive, 0⁺ if the numeric value of the argument is 0⁺, and 0⁻ if the numeric value of the argument is 0⁻.\n
\n
Note:\nWhile abs() returns the absolute value of the argument, sign() returns the sign of the argument.\n
",
+ "doc": "The sign()CSSfunction contains one calculation, and returns -1 if the numeric value of the argument is negative, +1 if the numeric value of the argument is positive, 0⁺ if the numeric value of the argument is 0⁺, and 0⁻ if the numeric value of the argument is 0⁻.\n
\n
Note:\nWhile abs() returns the absolute value of the argument, sign() returns the sign of the argument.\n
",
"formalSyntax": "sign( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"sin": {
@@ -5673,7 +5705,7 @@
"lowDate": "2023-03-13",
"highDate": "2025-09-13"
},
- "doc": "The sin()CSSfunction is a trigonometric function that returns the sine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. That is, sin(45deg), sin(0.125turn), and sin(3.14159 / 4) all represent the same value, approximately 0.707.",
+ "doc": "The sin()CSSfunction is a trigonometric function that returns the sine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. That is, sin(45deg), sin(0.125turn), and sin(3.14159 / 4) all represent the same value, approximately 0.707.",
"formalSyntax": "sin( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"skew": {
@@ -5696,7 +5728,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The skew()CSSfunction defines a transformation that skews an element on the 2D\nplane. Its result is a <transform-function> data type.",
+ "doc": "The skew()CSSfunction defines a transformation that skews an element on the 2D\nplane. Its result is a <transform-function> data type.",
"formalSyntax": "skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )",
"values": {
"ax": "Is an <angle> representing the angle to use to distort the element along the x-axis.",
@@ -5723,7 +5755,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The skewX()CSSfunction defines a transformation that skews an element in the\nhorizontal direction on the 2D plane. Its result is a <transform-function> data type.",
+ "doc": "The skewX()CSSfunction defines a transformation that skews an element in the\nhorizontal direction on the 2D plane. Its result is a <transform-function> data type.",
"formalSyntax": "skewX( [ <angle> | <zero> ] )",
"values": {
"a": "Is an <angle> representing the angle to use to distort the element along the abscissa (horizontal, x-coordinate)."
@@ -5749,7 +5781,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The skewY()CSSfunction defines a transformation that skews an element in the vertical\ndirection on the 2D plane. Its result is a <transform-function> data type.",
+ "doc": "The skewY()CSSfunction defines a transformation that skews an element in the vertical\ndirection on the 2D plane. Its result is a <transform-function> data type.",
"formalSyntax": "skewY( [ <angle> | <zero> ] )",
"values": {
"a": "Is an <angle> representing the angle to use to distort the element along the ordinate (vertical, y-coordinate)."
@@ -5774,7 +5806,7 @@
"level": "LOW",
"lowDate": "2023-12-07"
},
- "doc": "The sqrt()CSSfunction is an exponential function that returns the square root of a number.\n
The function pow(x, 0.5) is equivalent to sqrt(x).",
+ "doc": "The sqrt()CSSfunction is an exponential function that returns the square root of a number.\n
The function pow(x, 0.5) is equivalent to sqrt(x).",
"formalSyntax": "sqrt( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"steps": {
@@ -5797,7 +5829,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The steps()CSSfunction defines a transition that divides the input time into a specified number of intervals that are equal in length. This subclass of step functions are sometimes also called staircase functions.",
+ "doc": "The steps()CSSfunction defines a transition that divides the input time into a specified number of intervals that are equal in length. This subclass of step functions are sometimes also called staircase functions.",
"formalSyntax": "steps( <integer> , <step-position>? )\n <step-position> = jump-start | jump-end | jump-none | jump-both | start | end"
},
"superellipse": {
@@ -5815,7 +5847,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "
The superellipse()CSSfunction defines the curvature of an ellipse, and is used to specify corner shapes either directly, or via <corner-shape-value> keywords.",
"formalSyntax": "superellipse( <number [-∞,∞]> | infinity | -infinity )"
},
"symbols": {
@@ -5853,7 +5885,7 @@
"lowDate": "2023-03-13",
"highDate": "2025-09-13"
},
- "doc": "The tan()CSSfunction is a trigonometric function that returns the tangent of a number, which is a value between −infinity and infinity. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians.",
+ "doc": "The tan()CSSfunction is a trigonometric function that returns the tangent of a number, which is a value between −infinity and infinity. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians.",
"formalSyntax": "tan( <calc-sum> )\n <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*\n <calc-product> = <calc-value> [ [ '*' | / ] <calc-value> ]*\n <calc-value> = <number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )\n <calc-keyword> = e | pi | infinity | -infinity | NaN"
},
"translate": {
@@ -5876,7 +5908,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The translate()CSSfunction repositions an element in the horizontal and/or vertical\ndirections. Its result is a <transform-function> data type.",
+ "doc": "The translate()CSSfunction repositions an element in the horizontal and/or vertical\ndirections. Its result is a <transform-function> data type.",
"formalSyntax": "translate( <length-percentage> , <length-percentage>? )\n <length-percentage> = <length> | <percentage>",
"values": {
"Single <length-percentage> values": "This value is a <length> or <percentage> representing the abscissa\n(horizontal, x-component) of the translating vector [tx, 0]. The ordinate (vertical, y-component) of the translating\nvector will be set to 0. For example, translate(2px) is equivalent to\ntranslate(2px, 0). A percentage value refers to the width of the reference box defined by the\ntransform-box property.",
@@ -5903,7 +5935,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The translate3d()CSSfunction repositions an element in 3D space. Its result is a\n<transform-function> data type.",
+ "doc": "The translate3d()CSSfunction repositions an element in 3D space. Its result is a\n<transform-function> data type.",
"formalSyntax": "translate3d( <length-percentage> , <length-percentage> , <length> )\n <length-percentage> = <length> | <percentage>",
"values": {
"tx": "Is a <length> or <percentage> representing the abscissa (horizontal, x-component) of the\ntranslating vector [tx, ty, tz].",
@@ -5931,7 +5963,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The translateX()CSSfunction repositions an element horizontally on the 2D plane. Its\nresult is a <transform-function> data type.",
+ "doc": "The translateX()CSSfunction repositions an element horizontally on the 2D plane. Its\nresult is a <transform-function> data type.",
"formalSyntax": "translateX( <length-percentage> )\n <length-percentage> = <length> | <percentage>",
"values": {
"<length-percentage>": "Is a <length> or <percentage> representing the abscissa (horizontal, x-component) of the\ntranslating vector [tx, 0]. In Cartesian coordinate system it represents shift along x-axis. A percentage value refers to the width of the reference box defined by the\ntransform-box property."
@@ -5957,7 +5989,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The translateY()CSSfunction repositions an element vertically on the 2D plane. Its result\nis a <transform-function> data type.",
+ "doc": "The translateY()CSSfunction repositions an element vertically on the 2D plane. Its result\nis a <transform-function> data type.",
"formalSyntax": "translateY( <length-percentage> )\n <length-percentage> = <length> | <percentage>",
"values": {
"<length-percentage>": "The value is a <length> or <percentage> representing the ordinate (vertical, y-coordinate) of the\ntranslating vector [0, ty]. In Cartesian coordinate system it represents shift along y-axis. A percentage value refers to the height of the reference box defined by the\ntransform-box property."
@@ -5983,12 +6015,30 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The translateZ()CSSfunction repositions an element along the z-axis in 3D space, i.e.,\ncloser to or farther away from the viewer. Its result is a <transform-function> data type.",
+ "doc": "The translateZ()CSSfunction repositions an element along the z-axis in 3D space, i.e.,\ncloser to or farther away from the viewer. Its result is a <transform-function> data type.",
"formalSyntax": "translateZ( <length> )",
"values": {
"tz": "A <length> representing the z-component of the translating vector [0, 0, tz]. In Cartesian coordinate system it represents shift along z-axis. A positive value moves the\nelement towards the viewer, and a negative value farther away."
}
},
+ "type": {
+ "url": "$MDN_URL$/web/css/type",
+ "status": [
+ "Experimental",
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "139",
+ "ChromeAndroid": "139",
+ "Edge": "139",
+ "Opera": "123"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "
Note:\nThe @property at-rule syntax descriptor value uses the same <syntax> to define the permitted data types for registered custom properties, however, this always takes the form of a string.\n
",
+ "formalSyntax": "type( <string> )"
+ },
"url": {
"url": "$MDN_URL$/web/css/url_function",
"status": [
@@ -6009,7 +6059,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The url()CSSfunction is used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr() function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.\n
\n
Note:\nThere is a difference between a URI and a URL. A URI identifies a resource. A URL is a type of URI, and describes the location of a resource. A URI can be either a URL or a name (URN) of a resource.\n
In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that url() could be used to create a <uri> CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.\n
\n
Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).\n
Note:\nThere is a difference between a URI and a URL. A URI identifies a resource. A URL is a type of URI, and describes the location of a resource. A URI can be either a URL or a name (URN) of a resource.\n
In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that url() could be used to create a <uri> CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.\n
\n
Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).\n
The quotes are generally optional—they are required if the URL includes parentheses, whitespace, or quotes (unless these characters are escaped), or if the address includes control characters above 0x7e. Normal string syntax rules apply: double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped.",
@@ -6036,11 +6086,11 @@
"lowDate": "2017-04-05",
"highDate": "2019-10-05"
},
- "doc": "The var()CSSfunction can be used to insert the value of a custom property (sometimes called a \"CSS variable\") instead of any part of a value of another property.",
+ "doc": "The var()CSSfunction can be used to insert the value of a custom property (sometimes called a \"CSS variable\") instead of any part of a value of another property.",
"formalSyntax": "var( <custom-property-name> , <declaration-value>? )",
"values": {
"<custom-property-name>": "A custom property's name represented by an identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.",
- "<declaration-value>": "The custom property's fallback value, which is used in case the custom property is not defined or equals a CSS-wide keyword. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e., ), ], or }, top-level semicolons, or exclamation marks. The fallback value can itself be a custom property using the var() syntax. If the fallback value is omitted, and the custom property is not defined, the var() function resolves to an invalid value.\n
\n
Note:\nvar(--a,) is valid, specifying that if the --a custom property is not defined or equals a CSS-wide keyword, the var() should be replaced with nothing.\n
"
+ "<declaration-value>": "The custom property's fallback value, which is used in case the custom property is not defined or equals a CSS-wide keyword. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e., ), ], or }, top-level semicolons, or exclamation marks. The fallback value can itself be a custom property using the var() syntax. If the fallback value is omitted, and the custom property is not defined, the var() function resolves to an invalid value.\n
\n
Note:\nvar(--a,) is valid, specifying that if the --a custom property is not defined or equals a CSS-wide keyword, the var() should be replaced with nothing.\n
"
}
},
"xywh": {
@@ -6062,7 +6112,7 @@
"level": "LOW",
"lowDate": "2024-01-23"
},
- "doc": "The xywh()CSS function creates a rectangle using the specified distances from the left (x) and top (y) edges of the containing block and the specified width (w) and height (h) of the rectangle. It is a basic shape function of the <basic-shape>data type. You can use the xywh() function in CSS properties such as offset-path to create the rectangular path along which an element moves and in clip-path to define the shape of the clipping region.",
+ "doc": "The xywh()CSS function creates a rectangle using the specified distances from the left (x) and top (y) edges of the containing block and the specified width (w) and height (h) of the rectangle. It is a basic shape function of the <basic-shape>data type. You can use the xywh() function in CSS properties such as offset-path to create the rectangular path along which an element moves and in clip-path to define the shape of the clipping region.",
"formalSyntax": "xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )\n <length-percentage> = <length> | <percentage>\n <border-radius> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?",
"values": {
"<length-percentage>": "Specifies the <length-percentage> values for the x and y coordinates of the rectangle.",
@@ -6178,7 +6228,7 @@
"SafariIOS": "5"
},
"doc": "
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
\n
The -webkit-border-beforeCSS property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.",
- "formalSyntax": "<'border-width'> || <'border-style'> || <color>\n <border-width> = <line-width>{1,4}\n <border-style> = <line-style>{1,4}\n <line-width> = <length [0,∞]> | thin | medium | thick\n <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset",
+ "formalSyntax": "<'border-width'> || <'border-style'> || <color>\n <border-width> = <'border-top-width'>{1,4}\n <border-style> = <'border-top-style'>{1,4}\n <border-top-width> = <line-width>\n <border-top-style> = <line-style>\n <line-width> = <length [0,∞]> | thin | medium | thick\n <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset",
"values": {
"<'border-width'>": "See border-width",
"<'border-style'>": "See border-style",
@@ -9046,7 +9096,7 @@
"highDate": "2018-01-29"
},
"doc": "The border-styleshorthandCSS property sets the line style for all four sides of an element's border.",
- "formalSyntax": "<line-style>{1,4}\n <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset",
+ "formalSyntax": "<'border-top-style'>{1,4}\n <border-top-style> = <line-style>\n <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset",
"values": {
"<line-style>": "Describes the style of the border. It can have the following values:\n
Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.\n
Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed.\n
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the computed value of the same side's border-width.\n
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.\n
Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.\n
Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.\n
\n
"
}
@@ -9227,7 +9277,7 @@
"highDate": "2018-01-29"
},
"doc": "The border-widthshorthandCSS property sets the width of an element's border.",
- "formalSyntax": "<line-width>{1,4}\n <line-width> = <length [0,∞]> | thin | medium | thick",
+ "formalSyntax": "<'border-top-width'>{1,4}\n <border-top-width> = <line-width>\n <line-width> = <length [0,∞]> | thin | medium | thick",
"values": {
"<line-width>": "Defines the width of the border, either as an explicit nonnegative <length> or a keyword. If it's a keyword, it must be one of the following values:\n
The caret-shapeCSS property sets the shape of the insertion caret, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.",
"formalSyntax": "auto | bar | block | underscore",
"values": {
@@ -9779,7 +9832,7 @@
"highDate": "2022-07-15"
},
"doc": "The clip-pathCSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.",
- "formalSyntax": "<clip-source> | [ <basic-shape> || <geometry-box> ] | none\n <clip-source> = <url>\n <geometry-box> = <shape-box> | fill-box | stroke-box | view-box\n <url> = <url()> | <src()>\n <shape-box> = <visual-box> | margin-box\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )\n <visual-box> = content-box | padding-box | border-box",
+ "formalSyntax": "<clip-source> | [ <basic-shape> || <geometry-box> ] | none\n <clip-source> = <url>\n <geometry-box> = <shape-box> | fill-box | stroke-box | view-box\n <url> = <url()> | <src()>\n <shape-box> = <visual-box> | margin-box | half-border-box\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )\n <visual-box> = content-box | padding-box | border-box",
"values": {
"<clip-source>": "A <url> referencing an SVG<clipPath> element.",
"<basic-shape>": "A shape whose size and position is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box. One of:\n
Defines a rectangle using the specified distances from the top and left edges of the reference box and the specified width and height of the rectangle.\n
\n
",
@@ -10432,7 +10485,7 @@
"lowDate": "2023-02-14",
"highDate": "2025-08-14"
},
- "doc": "The container-nameCSS property specifies a list of query container names used by the @container at-rule in a container query.\nA container query will apply styles to elements based on the size or scroll-state of the nearest ancestor with a containment context.\nWhen a containment context is given a name, it can be specifically targeted using the @container at-rule instead of the nearest ancestor with containment.\n
\n
Note:\nWhen using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.\n
",
+ "doc": "The container-nameCSS property specifies a list of query container names used by the @container at-rule in a container query.\nA container query will apply styles to elements based on the size or scroll-state of the nearest ancestor with a containment context.\nWhen a containment context is given a name, it can be specifically targeted using the @container at-rule instead of the nearest ancestor with containment.",
"formalSyntax": "none | <custom-ident>+",
"values": {
"none": "Default value. The query container has no name.",
@@ -10459,13 +10512,13 @@
"lowDate": "2023-02-14",
"highDate": "2025-08-14"
},
- "doc": "An element can be established as a query container using the container-typeCSS property. container-type is used to define the type of container context used in a container query. The available container contexts are:\n
\n
Size: Enable selectively applying CSS rules to a container's children based on a general size or inline size condition such as a maximum or minimum dimension, aspect ratio, or orientation.
\n
Scroll-state: Enable selectively applying CSS rules to a container's children based on a scroll-state condition such as whether the container is a scroll container that is partially scrolled or whether the container is a snap target that is going to be snapped to its scroll snap container.
\n
\n
\n
Note:\nWhen using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.\n
",
+ "doc": "An element can be established as a query container using the container-typeCSS property. container-type is used to define the type of container context used in a container query. The available container contexts are:\n
\n
Size: Enable selectively applying CSS rules to a container's children based on a general size or inline size condition such as a maximum or minimum dimension, aspect ratio, or orientation.
\n
Scroll-state: Enable selectively applying CSS rules to a container's children based on a scroll-state condition such as whether the container is a scroll container that is partially scrolled or whether the container is a snap target that is going to be snapped to its scroll snap container.
\n
",
"formalSyntax": "normal | [ [ size | inline-size ] || scroll-state ]",
"values": {
- "inline-size": "Establishes a query container for dimensional queries on the inline axis of the container.\nApplies layout, style, and inline-size containment to the element.\n
Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements (see Using CSS containment).",
+ "inline-size": "Establishes a query container for dimensional queries on the inline axis of the container.\nApplies style and inline-size containment to the element. The inline size of the element can be computed in isolation, ignoring the child elements (see Using CSS containment).",
"normal": "Default value. The element is not a query container for any container size queries, but remains a query container for container style queries.",
"scroll-state": "Establishes a query container for scroll-state queries on the container. In this case, the size of the element is not computed in isolation; no containment is applied.",
- "size": "Establishes a query container for container size queries in both the inline and block dimensions.\nApplies layout containment, style containment, and size containment to the container.\n
Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements."
+ "size": "Establishes a query container for container size queries in both the inline and block dimensions.\nApplies style and size containment to the element. Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements."
}
},
"content": {
@@ -13304,6 +13357,27 @@
"doc": "The inset-inline-startCSS 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.\n
If only one <geometry-box> value is given, it sets both the mask-origin and mask-clip property values. If two <geometry-box> values are present, the first defines the mask-origin and the second defines the mask-clip.\n
The object-view-boxCSS property defines a rectangle as a viewable area (viewbox) within a replaced element, enabling the content of the replaced element to be zoomed or panned. It works similarly to the SVG viewBox attribute.",
+ "formalSyntax": "none | <basic-shape-rect>\n <basic-shape-rect> = <inset()> | <rect()> | <xywh()>\n <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )\n <rect()> = rect( <top> , <right> , <bottom> , <left> )\n <xywh()> = xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )\n <length-percentage> = <length> | <percentage>\n <border-radius> = <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?",
+ "values": {
+ "none": "The element does not have a view box. This is the default.",
+ "<basic-shape-rect>": "A inset(), xywh(), or rect() function specifying a view box for an element with natural dimensions (replaced elements). Resolves to none otherwise."
+ }
+ },
"offset": {
"url": "$MDN_URL$/web/css/offset",
"status": [
@@ -16835,7 +16931,7 @@
},
"reference": {
"url": "$MDN_URL$/web/css/reference",
- "doc": "Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Also included is a brief DOM-CSS / CSSOM reference."
+ "doc": "Use this CSS reference to browse an alphabetical index of all of the standard CSS properties, pseudo-classes, pseudo-elements, data types, functional notations and at-rules. You can also browse key CSS concepts and a list of selectors organized by type. Also included is a brief DOM-CSS / CSSOM reference."
},
"resize": {
"url": "$MDN_URL$/web/css/resize",
@@ -18099,7 +18195,7 @@
"highDate": "2022-07-15"
},
"doc": "The shape-outsideCSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than rectangular boxes.",
- "formalSyntax": "none | [ <basic-shape> || <shape-box> ] | <image>\n <shape-box> = <visual-box> | margin-box\n <image> = <url> | <gradient>\n <visual-box> = content-box | padding-box | border-box\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )",
+ "formalSyntax": "none | [ <basic-shape> || <shape-box> ] | <image>\n <shape-box> = <visual-box> | margin-box | half-border-box\n <image> = <url> | <gradient>\n <visual-box> = content-box | padding-box | border-box\n <url> = <url()> | <src()>\n <url()> = url( <string> <url-modifier>* ) | <url-token>\n <src()> = src( <string> <url-modifier>* )",
"values": {
"none": "The float area is unaffected. Inline content wraps around the element's margin box, like usual.",
"<shape-box>": "The float area is computed according to the shape of a float element's edges (as defined by the CSS box model). This can be margin-box, border-box, padding-box, or content-box. The shape includes any curvature created by the border-radius property (behavior which is similar to background-clip).\n
Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values. If the border-radius / margin ratio is 1 or more, then the margin box corner radius is border-radius + margin. If the ratio is less than 1, then the margin box corner radius is border-radius + (margin * (1 + (ratio - 1) ^ 3)).\n
Defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.\n
\n
",
@@ -19515,7 +19611,7 @@
"lowDate": "2015-09-30",
"highDate": "2018-03-30"
},
- "doc": "The transformCSS property lets you rotate, scale, skew, or translate an element.\nIt modifies the coordinate space of the CSS visual formatting model.",
+ "doc": "The transformCSS property lets you rotate, scale, skew, or translate an element.\nIt modifies the coordinate space of the CSS visual formatting model.\n
If the property has a value different from none, a stacking context will be created.\nIn that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.\n
You can also use the individual transform properties: translate, rotate, and scale. These properties are applied in the order: translate, rotate, scale, and finally transform.\n
",
"formalSyntax": "none | <transform-list>\n <transform-list> = <transform-function>+",
"values": {
"<transform-function>": "One or more of the CSS transform functions to be applied.\nThe transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.",
@@ -20079,7 +20175,8 @@
"SafariIOS": "18.2"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The view-transition-classCSS property provides the selected elements with an identifying class (a <custom-ident>), providing an additional method of styling the view transitions for those elements.",
"formalSyntax": "none | <custom-ident>+",
@@ -20104,12 +20201,13 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The view-transition-nameCSS property specifies the view transition snapshot that selected elements will participate in. This enables you to animate those elements separately from the rest of the page, which uses the default cross-fade animation during a view transition. You can then define custom animation styles for these elements.",
"formalSyntax": "none | <custom-ident>",
"values": {
- "<custom-ident>": "An identifying name that causes the selected element to participate in a separate snapshot from the root snapshot. The <custom-ident> cannot be auto, match-element, none, or a CSS-wide keyword value.",
+ "<custom-ident>": "An identifying name that causes the selected element to participate in a separate snapshot from the root snapshot. The <custom-ident> cannot be auto, match-element, none, or a CSS-wide keyword value.",
"match-element": "The browser automatically assigns a unique name to the selected element. This name is used to snapshot the element separately from all other elements on the page. (This name is internal and cannot be read from the DOM.)",
"none": "The selected element will not participate in a separate snapshot, unless it has a parent element with a view-transition-name set, in which case it will be snapshotted as part of that element."
}
@@ -20612,7 +20710,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The :active-view-transitionCSSpseudo-class matches the root element of a document when a view transition is in progress (active) and stops matching once the transition has completed."
},
@@ -22075,7 +22174,7 @@
},
"-moz-meter-bar": {
"url": "$MDN_URL$/web/css/_doublecolon_-moz-meter-bar",
- "doc": "
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
\n
The ::-moz-meter-barCSSpseudo-element represents the meter gauge in a <meter> element. It is used for selecting and applying styles to the gauge inside a meter element."
+ "doc": "
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
\n
The ::-moz-meter-barCSSpseudo-element represents the meter gauge in a <meter> element. It is used for selecting and applying styles to the gauge inside a meter element.\n
\n
Note:\nBy default, the <meter> element uses native styling. To apply your own styles, first set appearance: none on the <meter> element, and then style using ::-moz-meter-bar.\n
"
},
"-moz-progress-bar": {
"url": "$MDN_URL$/web/css/_doublecolon_-moz-progress-bar",
@@ -22461,10 +22560,13 @@
"Edge": "131",
"Firefox": "143",
"FirefoxAndroid": "143",
- "Opera": "116"
+ "Opera": "116",
+ "Safari": "18.4",
+ "SafariIOS": "18.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-09-16"
},
"doc": "The ::details-contentCSSpseudo-element represents the expandable/collapsible contents of a <details> element."
},
@@ -22812,7 +22914,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The ::view-transitionCSSpseudo-element represents the root of the view transitions overlay, which contains all view transition snapshot groups and sits over the top of all other page content.\n
By default, selected elements initially mirror the size and position of the ::view-transition-old() pseudo-element representing the \"old\" view state, or the ::view-transition-new() pseudo-element representing the \"new\" view state if there isn't an \"old\" view state.\n
If there's both an \"old\" and \"new\" view state, styles in the view transition style sheet animate this pseudo-element's width and height from the size of the \"old\" view state's border box to that of the \"new\" view state's border box.\n
In addition, the element's transform is animated from the \"old\" view state's screen space transform to the new view state's screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins."
},
@@ -22852,7 +22956,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The ::view-transition-image-pair()CSSpseudo-element represents a container for a view transition's \"old\" and \"new\" view states — before and after the transition.\n
During a view transition, ::view-transition-image-pair() has isolation: isolate set on it in the view transition style sheet so that its children can be blended with non-normal blend modes without affecting other visual outputs."
},
@@ -22872,7 +22977,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The ::view-transition-new()CSSpseudo-element represents the \"new\" view state of a view transition — a snapshot live representation of the state after the transition.\n
It is a replaced element and therefore can be manipulated with properties such as object-fit and object-position. It has natural dimensions equal to the content's size.\n
The following default styling is included in the UA stylesheet:\n
\n```css\n:root::view-transition-old(*),\n:root::view-transition-new(*) {\n position: absolute;\n inset-block-start: 0;\n inline-size: 100%;\n block-size: auto;\n animation-duration: inherit;\n animation-fill-mode: inherit;\n animation-delay: inherit;\n}\n/* Keyframes for blending when there are 2 images */\n@keyframes -ua-mix-blend-mode-plus-lighter {\n from {\n mix-blend-mode: plus-lighter;\n }\n to {\n mix-blend-mode: plus-lighter;\n }\n}\n@keyframes -ua-view-transition-fade-in {\n from {\n opacity: 0;\n }\n}\n```\n
\n
\n
Note:\nAdditional view transition styles are also setup to animate ::view-transition-new(). These are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.\n
"
},
@@ -22892,7 +22998,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The ::view-transition-old()CSSpseudo-element represents the \"old\" view state of a view transition — a static snapshot of the old view, before the transition.\n
During a view transition, ::view-transition-old() is included in the associated pseudo-element tree as explained in The view transition pseudo-element tree, provided there's an \"old\" view state to represent. It is only ever a child of a ::view-transition-image-pair(), and never has any children.\n
It is a replaced element and therefore can be manipulated with properties such as object-fit and object-position. It has natural dimensions equal to the content's size.\n
The following default styling is included in the UA stylesheet:\n
\n```css\n:root::view-transition-old(*),\n:root::view-transition-new(*) {\n position: absolute;\n inset-block-start: 0;\n inline-size: 100%;\n block-size: auto;\n animation-duration: inherit;\n animation-fill-mode: inherit;\n animation-delay: inherit;\n}\n/* Keyframes for blending when there are 2 images */\n@keyframes -ua-mix-blend-mode-plus-lighter {\n from {\n mix-blend-mode: plus-lighter;\n }\n to {\n mix-blend-mode: plus-lighter;\n }\n}\n@keyframes -ua-view-transition-fade-out {\n to {\n opacity: 0;\n }\n}\n```\n
\n
\n
Note:\nAdditional view transition styles are also setup to animate ::view-transition-old(). These are dynamically generated during the view transition; see the specification setup transition pseudo-elements and update pseudo-element styles sections for more details.\n
"
}
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/GlobalObjects.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/GlobalObjects.json
index 4a3b509e4be3..71dd5ab5f5a1 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/GlobalObjects.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/GlobalObjects.json
@@ -2637,6 +2637,8 @@
"Chrome": "87",
"ChromeAndroid": "89",
"Edge": "87",
+ "Firefox": "145",
+ "FirefoxAndroid": "145",
"Opera": "75",
"Safari": "16.4",
"SafariIOS": "16.4",
@@ -5131,7 +5133,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The toLocaleDateString() method of Date instances returns a string with a language-sensitive representation of the date portion of this date in the local timezone. In implementations with Intl.DateTimeFormat API support, this method delegates to Intl.DateTimeFormat.\n
Every time toLocaleString is called, it has to perform a search in a big database of localization strings, which is potentially inefficient. When the method is called many times with the same arguments, it is better to create a Intl.DateTimeFormat object and use its format() method, because a DateTimeFormat object remembers the arguments passed to it and may decide to cache a slice of the database, so future format calls can search for localization strings within a more constrained context.",
+ "doc": "The toLocaleDateString() method of Date instances returns a string with a language-sensitive representation of the date portion of this date in the local timezone. In implementations with Intl.DateTimeFormat API support, this method delegates to Intl.DateTimeFormat.\n
Every time toLocaleDateString is called, it has to perform a search in a big database of localization strings, which is potentially inefficient. When the method is called many times with the same arguments, it is better to create a Intl.DateTimeFormat object and use its format() method, because a DateTimeFormat object remembers the arguments passed to it and may decide to cache a slice of the database, so future format calls can search for localization strings within a more constrained context.",
"parameters": {
"locales": "A string with a BCP 47 language tag, or an array of such strings. Corresponds to the locales parameter of the Intl.DateTimeFormat() constructor.\n
In implementations without Intl.DateTimeFormat support, this parameter is ignored and the host's locale is usually used.",
"options": "An object adjusting the output format. Corresponds to the options parameter of the Intl.DateTimeFormat() constructor. The timeStyle option must be undefined, or a TypeError would be thrown. If weekday, year, month, and day are all undefined, then year, month, and day will be set to \"numeric\".\n
In implementations without Intl.DateTimeFormat support, this parameter is ignored."
@@ -9283,7 +9285,7 @@
"parameters": {
"key": "A key string indicating the category of values to be returned. This is one of:\n
"
},
- "returns": "A sorted array of unique string values indicating the values supported by the implementation for the given key. The values that could be returned are listed below.\n
Supported calendar types
\n
Below are all values that are commonly supported by browsers for the calendar key. These values can be used for the calendar option or the caUnicode extension key when creating objects such as Intl.DateTimeFormat, as well as for creating Temporal date objects.\n
\n\n
\n
Value
\n
Description
\n
\n\n\n
\n
buddhist
\n
Thai Buddhist calendar
\n
\n
\n
chinese
\n
Traditional Chinese calendar
\n
\n
\n
coptic
\n
Coptic calendar
\n
\n
\n
dangi
\n
Traditional Korean calendar
\n
\n
\n
ethioaa
\n
Ethiopic calendar, Amete Alem, single-era variant (epoch approx. 5493 B.C.E)
\n
\n
\n
ethiopic
\n
Ethiopic calendar, Amete Mihret, two-era variant (epoch approx, 8 C.E., Amete Alem for years before Amete Mihret)
\n
\n
\n
gregory
\n
Gregorian calendar (proleptic, not Julian hybrid)
\n
\n
\n
hebrew
\n
Traditional Hebrew calendar
\n
\n
\n
indian
\n
Indian calendar
\n
\n
\n
islamic
\n
Hijri calendar, unspecified algorithm. Note: As of April 2025, this is an astronomical simulation whose parameters are undocumented and that is not known to match a specific Hijri calendar variant from non-software contexts. For well-specified results, use one of the three specific variants: islamic-umalqura, islamic-tbla, or islamic-civil.
\n
\n
\n
islamic-umalqura
\n
Hijri calendar, Umm al-Qura (uses KACST-calculated months from the start of 1300 AH (1882-11-12 ISO) to the end of 1600 AH (2174-11-25 ISO) and falls back to islamic-civil outside that range)
\n
\n
\n
islamic-tbla
\n
Hijri calendar, tabular/rule-based with leap year rule II (leap years 2,5,7,10,13,16,18,21,24,26,29 in the 30-year cycle (1-based numbering)) and Thursday/astronomical epoch (July 15, 622 Julian / 0622-07-18 ISO)
\n
\n
\n
islamic-civil
\n
Hijri calendar, tabular/rule-based with leap year rule II (leap years 2,5,7,10,13,16,18,21,24,26,29 in the 30-year cycle (1-based numbering)) and Friday/civil epoch (July 16, 622 Julian / 0622-07-19 ISO)
\n
\n
\n
iso8601
\n
ISO calendar (variant of the Gregorian calendar with week rules and formatting parameters made region-independent)
\n
\n
\n
japanese
\n
Japanese Imperial calendar (this calendar adds an era for each new emperor, so the output year and era for a future date may not match the input year and era when your code runs on a future engine version)
\n
\n
\n
persian
\n
Persian calendar
\n
\n
\n
roc
\n
Republic of China calendar
\n
\n\n
\n
The types below are specified in CLDR but do not have implementations distinct from the above calendars in browsers.\n
\n\n
\n
Value
\n
Description
\n
Notes
\n
\n\n\n
\n
islamicc \nDeprecated\n
\n
Civil (algorithmic) Arabic calendar.
\n
This is an alias for islamic-civil and therefore is not returned by supportedValuesOf(). Use islamic-civil instead.
\n
\n
\n
islamic-rgsa
\n
Hijri calendar, Saudi Arabia sighting
\n
Browsers do not have historical sighting data and future sightings have not occurred yet. As of April 2025, this calendar results in the same behavior as islamic. Use islamic-umalqura for a Mecca-based astronomical calculation.
Below are all values that are commonly supported by browsers for the collation key. These values can be used for the collation option or the coUnicode extension key when creating objects such as Intl.Collator.\n
\n\n
\n
Value
\n
Description
\n
\n\n\n
\n
compat
\n
A previous version of the ordering, for compatibility (for Arabic)
\n
\n
\n
dict
\n
Dictionary style ordering (such as in Sinhala). Also recognized as dictionary.
\n
\n
\n
emoji
\n
Recommended ordering for emoji characters
\n
\n
\n
eor
\n
European ordering rules
\n
\n
\n
phonebk
\n
Phonebook style ordering (such as in German). Also recognized as phonebook.
\n
\n
\n
phonetic
\n
Phonetic ordering (sorting based on pronunciation; for Lingala)
\n
\n
\n
pinyin
\n
Pinyin ordering for Latin and for CJK characters (used in Chinese)
\n
\n
\n
searchjl
\n
Special collation type for Korean initial consonant search. Warning: This collation is not for sorting, even though you can only use it with Intl.Collator of usage: \"sort\".
\n
\n
\n
stroke
\n
Pinyin ordering for Latin, stroke order for CJK characters (used in Chinese)
\n
\n
\n
trad
\n
Traditional style ordering (such as in Spanish). Also recognized as traditional.
\n
\n
\n
unihan
\n
Pinyin ordering for Latin, Unihan radical-stroke ordering for CJK characters (used in Chinese)
\n
\n
\n
zhuyin
\n
Pinyin ordering for Latin, zhuyin order for Bopomofo and CJK characters (used in Chinese)
\n
\n\n
\n
The types below are specified in CLDR data, but are deprecated, are discouraged from explicit usage, and/or may not be indicated by browsers as supported for various reasons. Avoid using them:\n
\n\n
\n
Value
\n
Description
\n
Notes
\n
\n\n\n
\n
big5han \nDeprecated\n
\n
Pinyin ordering for Latin, big5 charset ordering for CJK characters (used in Chinese)
\n
Deprecated.
\n
\n
\n
direct \nDeprecated\n
\n
Binary code point order (used in Hindi)
\n
Deprecated.
\n
\n
\n
ducet
\n
The default Unicode collation element table order
\n
The ducet collation type is not available to the Web.
\n
\n
\n
gb2312 \nDeprecated\n
\n
Pinyin ordering for Latin, gb2312han charset ordering for CJK characters (for Chinese). Also recognized as gb2312han.
Do not use as a collation type, since in Intl.Collator, this collation is activated via the usage: \"search\" option. There is currently no API for substring search, so this is currently only good for filtering a list of strings by trying a full-string match of the key against each list item.
\n
\n
\n
standard
\n
Default ordering for each language, except Chinese (and, previously, Swedish)
\n
Do not use explicitly. In general, it's unnecessary to specify this explicitly and specifying this for Swedish is problematic due to the different meaning for Swedish in the past.
Currency identifiers are three-letter uppercase codes defined in ISO 4217. These values can be used for the currency option when creating objects such as Intl.NumberFormat, as well as for Intl.DisplayNames.prototype.of(). There are over 300 identifiers in common use so we won't list them. For an exhaustive list of possible identifiers, see the Wikipedia article.\n
Below are all values that are commonly supported by browsers for the numberingSystem key. These values can be used for the numberingSystem option or the nuUnicode extension key when creating objects such as Intl.NumberFormat. For the rows with \"digit characters\", the runtime translates the digits one-by-one without extra actions. The others marked as \"algorithmic\" need additional algorithms to translate the digits. The higher the Unicode code point is, the newer the numbering system is and the more likely it is unsupported by all browsers.\n
\n\n
\n
Value
\n
Description
\n
Digit characters
\n
\n\n\n
\n
adlm
\n
Adlam digits
\n
𞥐𞥑𞥒𞥓𞥔𞥕𞥖𞥗𞥘𞥙 (U+1E950 to U+1E959)
\n
\n
\n
ahom
\n
Ahom digits
\n
𑜰𑜱𑜲𑜳𑜴𑜵𑜶𑜷𑜸𑜹 (U+11730 to U+11739)
\n
\n
\n
arab
\n
Arabic-Indic digits
\n
٠١٢٣٤٥٦٧٨٩ (U+0660 to U+0669)
\n
\n
\n
arabext
\n
Extended Arabic-Indic digits
\n
۰۰۱۲۳۴۵۶۷۸۹ (U+06F0 to U+06F9)
\n
\n
\n
armn
\n
Armenian upper case numerals
\n
algorithmic
\n
\n
\n
armnlow
\n
Armenian lower case numerals
\n
algorithmic
\n
\n
\n
bali
\n
Balinese digits
\n
᭐᭑᭒᭓᭔᭕᭖᭗᭘᭙ (U+1B50 to U+1B59)
\n
\n
\n
beng
\n
Bengali digits
\n
০১২৩৪৫৬৭৮৯ (U+09E6 to U+09EF)
\n
\n
\n
bhks
\n
Bhaiksuki digits
\n
𑱐𑱑𑱒𑱓𑱔𑱕𑱖𑱗𑱘𑱙 (U+11C50 to U+11C59)
\n
\n
\n
brah
\n
Brahmi digits
\n
𑁦𑁧𑁨𑁩𑁪𑁫𑁬𑁭𑁮𑁯 (U+11066 to U+1106F)
\n
\n
\n
cakm
\n
Chakma digits
\n
𑄶𑄷𑄸𑄹𑄺𑄻𑄼𑄽𑄾𑄿 (U+11136 to U+1113F)
\n
\n
\n
cham
\n
Cham digits
\n
꩐꩑꩒꩓꩔꩕꩖꩗꩘꩙ (U+AA50 to U+AA59)
\n
\n
\n
cyrl
\n
Cyrillic numerals
\n
algorithmic
\n
\n
\n
deva
\n
Devanagari digits
\n
०१२३४५६७८९ (U+0966 to U+096F)
\n
\n
\n
diak
\n
Dives Akuru digits
\n
𑥐𑥑𑥒𑥓𑥔𑥕𑥖𑥗𑥘𑥙 (U+11950 to U+11959)
\n
\n
\n
ethi
\n
Ethiopic numerals
\n
algorithmic
\n
\n
\n
fullwide
\n
Full width digits
\n
０１２３４５６７８９ (U+FF10 to U+FF19)
\n
\n
\n
gara
\n
Garay digits
\n
(U+10D40 to U+10D49)
\n
\n
\n
geor
\n
Georgian numerals
\n
algorithmic
\n
\n
\n
gong
\n
Gunjala Gondi digits
\n
𑶠𑶡𑶢𑶣𑶤𑶥𑶦𑶧𑶨𑶩 (U+11DA0 to U+11DA9)
\n
\n
\n
gonm
\n
Masaram Gondi digits
\n
𑵐𑵑𑵒𑵓𑵔𑵕𑵖𑵗𑵘𑵙 (U+11D50 to U+11D59)
\n
\n
\n
grek
\n
Greek upper case numerals
\n
algorithmic
\n
\n
\n
greklow
\n
Greek lower case numerals
\n
algorithmic
\n
\n
\n
gujr
\n
Gujarati digits
\n
૦૧૨૩૪૫૬૭૮૯ (U+0AE6 to U+0AEF)
\n
\n
\n
gukh
\n
Gurung Khema digits
\n
(U+16130 to U+16139)
\n
\n
\n
guru
\n
Gurmukhi digits
\n
੦੧੨੩੪੫੬੭੮੯ (U+0A66 to U+0A6F)
\n
\n
\n
hanidays
\n
Han-character day-of-month numbering for lunar/other traditional calendars
\n
\n
\n
\n
hanidec
\n
Positional decimal system using Chinese number ideographs as digits
Japanese first-year Gannen numbering for Japanese calendar
\n
algorithmic
\n
\n
\n
kali
\n
Kayah Li digits
\n
꤀꤁꤂꤃꤄꤅꤆꤇꤈꤉ (U+A900 to U+A909)
\n
\n
\n
kawi
\n
Kawi digits
\n
𑽐𑽑𑽒𑽓𑽔𑽕𑽖𑽗𑽘𑽙 (U+11F50 to U+11F59)
\n
\n
\n
khmr
\n
Khmer digits
\n
០១២៣៤៥៦៧៨៩ (U+17E0 to U+17E9)
\n
\n
\n
knda
\n
Kannada digits
\n
೦೧೨೩೪೫೬೭೮೯ (U+0CE6 to U+0CEF)
\n
\n
\n
krai
\n
Kirat Rai digits
\n
(U+16D70 to U+16D79)
\n
\n
\n
lana
\n
Tai Tham Hora (secular) digits
\n
᪀᪁᪂᪃᪄᪅᪆᪇᪈᪉ (U+1A80 to U+1A89)
\n
\n
\n
lanatham
\n
Tai Tham (ecclesiastical) digits
\n
᪐᪑᪒᪓᪔᪕᪖᪗᪘᪙ (U+1A90 to U+1A99)
\n
\n
\n
laoo
\n
Lao digits
\n
໐໑໒໓໔໕໖໗໘໙ (U+0ED0 to U+0ED9)
\n
\n
\n
latn
\n
Latin digits
\n
0123456789 (U+0030 to U+0039)
\n
\n
\n
lepc
\n
Lepcha digits
\n
᱀᱁᱂᱃᱄᱅᱆᱇᱈᱉ (U+1C40 to U+1C49)
\n
\n
\n
limb
\n
Limbu digits
\n
᥆᥇᥈᥉᥊᥋᥌᥍᥎᥏ (U+1946 to U+194F)
\n
\n
\n
mathbold
\n
Mathematical bold digits
\n
𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗 (U+1D7CE to U+1D7D7)
\n
\n
\n
mathdbl
\n
Mathematical double-struck digits
\n
𝟘𝟙𝟚𝟛𝟜𝟝𝟞𝟟𝟠𝟡 (U+1D7D8 to U+1D7E1)
\n
\n
\n
mathmono
\n
Mathematical monospace digits
\n
𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿 (U+1D7F6 to U+1D7FF)
\n
\n
\n
mathsanb
\n
Mathematical sans-serif bold digits
\n
𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵 (U+1D7EC to U+1D7F5)
\n
\n
\n
mathsans
\n
Mathematical sans-serif digits
\n
𝟢𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫 (U+1D7E2 to U+1D7EB)
\n
\n
\n
mlym
\n
Malayalam digits
\n
൦൧൨൩൪൫൬൭൮൯ (U+0D66 to U+0D6F)
\n
\n
\n
modi
\n
Modi digits
\n
𑙐𑙑𑙒𑙓𑙔𑙕𑙖𑙗𑙘𑙙 (U+11650 to U+11659)
\n
\n
\n
mong
\n
Mongolian digits
\n
᠐᠑᠒᠓᠔᠕᠖᠗᠘᠙ (U+1810 to U+1819)
\n
\n
\n
mroo
\n
Mro digits
\n
𖩠𖩡𖩢𖩣𖩤𖩥𖩦𖩧𖩨𖩩 (U+16A60 to U+16A69)
\n
\n
\n
mtei
\n
Meetei Mayek digits
\n
꯰꯱꯲꯳꯴꯵꯶꯷꯸꯹ (U+ABF0 to U+ABF9)
\n
\n
\n
mymr
\n
Myanmar digits
\n
၀၁၂၃၄၅၆၇၈၉ (U+1040 to U+1049)
\n
\n
\n
mymrepka
\n
Myanmar Eastern Pwo Karen digits
\n
(U+116DA to U+116E3)
\n
\n
\n
mymrpao
\n
Myanmar Pao digits
\n
(U+116D0 to U+116D9)
\n
\n
\n
mymrshan
\n
Myanmar Shan digits
\n
႐႑႒႓႔႕႖႗႘႙ (U+1090 to U+1099)
\n
\n
\n
mymrtlng
\n
Myanmar Tai Laing digits
\n
꧰꧱꧲꧳꧴꧵꧶꧷꧸꧹ (U+A9F0 to U+A9F9)
\n
\n
\n
nagm
\n
Nag Mundari digits
\n
𞓰𞓱𞓲𞓳𞓴𞓵𞓶𞓷𞓸𞓹 (U+1E4F0 to U+1E4F9)
\n
\n
\n
newa
\n
Newa digits
\n
𑑐𑑑𑑒𑑓𑑔𑑕𑑖𑑗𑑘𑑙 (U+11450 to U+11459)
\n
\n
\n
nkoo
\n
N'Ko digits
\n
߀߁߂߃߄߅߆߇߈߉ (U+07C0 to U+07C9)
\n
\n
\n
olck
\n
Ol Chiki digits
\n
᱐᱑᱒᱓᱔᱕᱖᱗᱘᱙ (U+1C50 to U+1C59)
\n
\n
\n
onao
\n
Ol Onal digits
\n
(U+1E5F1 to U+1E5FA)
\n
\n
\n
orya
\n
Oriya digits
\n
୦୧୨୩୪୫୬୭୮୯ (U+0B66 to U+0B6F)
\n
\n
\n
osma
\n
Osmanya digits
\n
𐒠𐒡𐒢𐒣𐒤𐒥𐒦𐒧𐒨𐒩 (U+104A0 to U+104A9)
\n
\n
\n
outlined
\n
Legacy computing outlined digits
\n
(U+1CCF0 to U+1CCF9)
\n
\n
\n
rohg
\n
Hanifi Rohingya digits
\n
𐴰𐴱𐴲𐴳𐴴𐴵𐴶𐴷𐴸𐴹 (U+10D30 to U+10D39)
\n
\n
\n
roman
\n
Roman upper case numerals
\n
algorithmic
\n
\n
\n
romanlow
\n
Roman lowercase numerals
\n
algorithmic
\n
\n
\n
saur
\n
Saurashtra digits
\n
꣐꣑꣒꣓꣔꣕꣖꣗꣘꣙ (U+A8D0 to U+A8D9)
\n
\n
\n
segment
\n
Legacy computing segmented digits
\n
🯰🯱🯲🯳🯴🯵🯶🯷🯸🯹 (U+1FBF0 to U+1FBF9)
\n
\n
\n
shrd
\n
Sharada digits
\n
𑇐𑇑𑇒𑇓𑇔𑇕𑇖𑇗𑇘𑇙 (U+111D0 to U+111D9)
\n
\n
\n
sind
\n
Khudawadi digits
\n
𑋰𑋱𑋲𑋳𑋴𑋵𑋶𑋷𑋸𑋹 (U+112F0 to U+112F9)
\n
\n
\n
sinh
\n
Sinhala Lith digits
\n
෦෧෨෩෪෫෬෭෮෯ (U+0DE6 to U+0DEF)
\n
\n
\n
sora
\n
Sora_Sompeng digits
\n
𑃰𑃱𑃲𑃳𑃴𑃵𑃶𑃷𑃸𑃹 (U+110F0 to U+110F9)
\n
\n
\n
sund
\n
Sundanese digits
\n
᮰᮱᮲᮳᮴᮵᮶᮷᮸᮹ (U+1BB0 to U+1BB9)
\n
\n
\n
sunu
\n
Sunuwar digits
\n
(U+11BF0 to U+11BF9)
\n
\n
\n
takr
\n
Takri digits
\n
𑛀𑛁𑛂𑛃𑛄𑛅𑛆𑛇𑛈𑛉 (U+116C0 to U+116C9)
\n
\n
\n
talu
\n
New Tai Lue digits
\n
᧐᧑᧒᧓᧔᧕᧖᧗᧘᧙ (U+19D0 to U+19D9)
\n
\n
\n
taml
\n
Tamil numerals
\n
algorithmic
\n
\n
\n
tamldec
\n
Modern Tamil decimal digits
\n
௦௧௨௩௪௫௬௭௮௯ (U+0BE6 to U+0BEF)
\n
\n
\n
telu
\n
Telugu digits
\n
౦౧౨౩౪౫౬౭౮౯ (U+0C66 to U+0C6F)
\n
\n
\n
thai
\n
Thai digits
\n
๐๑๒๓๔๕๖๗๘๙ (U+0E50 to U+0E59)
\n
\n
\n
tibt
\n
Tibetan digits
\n
༠༡༢༣༤༥༦༧༨༩ (U+0F20 to U+0F29)
\n
\n
\n
tirh
\n
Tirhuta digits
\n
𑓐𑓑𑓒𑓓𑓔𑓕𑓖𑓗𑓘𑓙 (U+114D0 to U+114D9)
\n
\n
\n
tnsa
\n
Tangsa digits
\n
𖫀𖫁𖫂𖫃𖫄𖫅𖫆𖫇𖫈𖫉 (U+16AC0 to U+16AC9)
\n
\n
\n
vaii
\n
Vai digits
\n
꘠꘡꘢꘣꘤꘥꘦꘧꘨꘩ (U+A620 to U+A629)
\n
\n
\n
wara
\n
Warang Citi digits
\n
𑣠𑣡𑣢𑣣𑣤𑣥𑣦𑣧𑣨𑣩 (U+118E0 to U+118E9)
\n
\n
\n
wcho
\n
Wancho digits
\n
𞋰𞋱𞋲𞋳𞋴𞋵𞋶𞋷𞋸𞋹 (U+1E2F0 to U+1E2F9)
\n
\n\n
\n
There are three special values: native, traditio, and finance, whose meanings are locale-dependent, and will be resolved to the right system depending on the locale. Therefore, the resolvedOptions() methods will never return these values, but Intl.Locale.prototype.numberingSystem will (if provided as input).\n
Supported time zone identifiers can be used for the timeZone option when creating objects such as Intl.DateTimeFormat, as well as for creating Temporal date objects. There are over 400 identifiers in common use so we won't list them. For an exhaustive list of possible identifiers, see the Wikipedia article or the IANA time zone database.\n
As you browse the list, note that the standardization of Temporal requires browsers to always return the primary identifier in the IANA database, which may change over time. See time zones and offsets for more information. For example, the returned array should contain \"Asia/Kolkata\" instead of \"Asia/Calcutta\" because the latter is an alias of the former and they both correspond to India; however, it should contain both \"Africa/Abidjan\" and \"Atlantic/Reykjavik\" because they are in different countries, despite the latter also being an alias of the former.\n
Below are all values that are commonly supported by browsers for the unit key. These values can be used for the unit option when creating objects such as Intl.NumberFormat. This list is a subset of the CLDR explicitly sanctioned by the ECMA-402 specification, so all implementations should be consistent.\n
\n
acre
\n
bit
\n
byte
\n
celsius
\n
centimeter
\n
day
\n
degree
\n
fahrenheit
\n
fluid-ounce
\n
foot
\n
gallon
\n
gigabit
\n
gigabyte
\n
gram
\n
hectare
\n
hour
\n
inch
\n
kilobit
\n
kilobyte
\n
kilogram
\n
kilometer
\n
liter
\n
megabit
\n
megabyte
\n
meter
\n
microsecond
\n
mile
\n
mile-scandinavian
\n
milliliter
\n
millimeter
\n
millisecond
\n
minute
\n
month
\n
nanosecond
\n
ounce
\n
percent
\n
petabyte
\n
pound
\n
second
\n
stone
\n
terabit
\n
terabyte
\n
week
\n
yard
\n
year
\n
\n
When specifying units, you can also combine two units with the \"-per-\" separator. For example, meter-per-second or liter-per-megabyte.\n
",
+ "returns": "A sorted array of unique string values indicating the values supported by the implementation for the given key. The values that could be returned are listed below.\n
Supported calendar types
\n
Below are all values that are commonly supported by browsers for the calendar key. These values can be used for the calendar option or the caUnicode extension key when creating objects such as Intl.DateTimeFormat, as well as for creating Temporal date objects.\n
\n\n
\n
Value
\n
Description
\n
\n\n\n
\n
buddhist
\n
Thai Buddhist calendar
\n
\n
\n
chinese
\n
Traditional Chinese calendar
\n
\n
\n
coptic
\n
Coptic calendar
\n
\n
\n
dangi
\n
Traditional Korean calendar
\n
\n
\n
ethioaa
\n
Ethiopic calendar, Amete Alem, single-era variant (epoch approx. 5493 B.C.E)
\n
\n
\n
ethiopic
\n
Ethiopic calendar, Amete Mihret, two-era variant (epoch approx, 8 C.E., Amete Alem for years before Amete Mihret)
\n
\n
\n
gregory
\n
Gregorian calendar (proleptic, not Julian hybrid)
\n
\n
\n
hebrew
\n
Traditional Hebrew calendar
\n
\n
\n
indian
\n
Indian calendar
\n
\n
\n
islamic
\n
Hijri calendar, unspecified algorithm. Note: As of April 2025, this is an astronomical simulation whose parameters are undocumented and that is not known to match a specific Hijri calendar variant from non-software contexts. For well-specified results, use one of the three specific variants: islamic-umalqura, islamic-tbla, or islamic-civil.
\n
\n
\n
islamic-umalqura
\n
Hijri calendar, Umm al-Qura (uses KACST-calculated months from the start of 1300 AH (1882-11-12 ISO) to the end of 1600 AH (2174-11-25 ISO) and falls back to islamic-civil outside that range)
\n
\n
\n
islamic-tbla
\n
Hijri calendar, tabular/rule-based with leap year rule II (leap years 2,5,7,10,13,16,18,21,24,26,29 in the 30-year cycle (1-based numbering)) and Thursday/astronomical epoch (July 15, 622 Julian / 0622-07-18 ISO)
\n
\n
\n
islamic-civil
\n
Hijri calendar, tabular/rule-based with leap year rule II (leap years 2,5,7,10,13,16,18,21,24,26,29 in the 30-year cycle (1-based numbering)) and Friday/civil epoch (July 16, 622 Julian / 0622-07-19 ISO)
\n
\n
\n
iso8601
\n
ISO calendar (variant of the Gregorian calendar with week rules and formatting parameters made region-independent)
\n
\n
\n
japanese
\n
Japanese Imperial calendar (this calendar adds an era for each new emperor, so the output year and era for a future date may not match the input year and era when your code runs on a future engine version. Note: See the remarks below this table about dates prior to 1868-10-23 ISO.)
\n
\n
\n
persian
\n
Persian calendar
\n
\n
\n
roc
\n
Republic of China calendar
\n
\n\n
\n
As of October 2025, in the japanese calendar, dates prior to 1868-10-23 ISO (the start date of the year 1 Meiji) don't work as expected in browsers in two ways. First, CLDR had the wrong start date for the Meiji era, which causes calendar implementations to extend the Meiji era further to the past than it actually did. Second, the upcoming Intl era and monthCode Proposal specifies that dates prior to the Meiji era should use Gregorian eras, but browsers have traditionally used approximations of prior Japanese eras instead. The japanese calendar was taken into use on January 1, 6 Meiji / 1873-01-01 ISO, so these problems only affect proleptic dates.\n
The types below are specified in CLDR but do not have implementations distinct from the above calendars in browsers.\n
\n\n
\n
Value
\n
Description
\n
Notes
\n
\n\n\n
\n
islamicc \nDeprecated\n
\n
Civil (algorithmic) Arabic calendar.
\n
This is an alias for islamic-civil and therefore is not returned by supportedValuesOf(). Use islamic-civil instead.
\n
\n
\n
islamic-rgsa
\n
Hijri calendar, Saudi Arabia sighting
\n
Browsers do not have historical sighting data and future sightings have not occurred yet. As of April 2025, this calendar results in the same behavior as islamic. Use islamic-umalqura for a Mecca-based astronomical calculation.
Below are all values that are commonly supported by browsers for the collation key. These values can be used for the collation option or the coUnicode extension key when creating objects such as Intl.Collator.\n
\n\n
\n
Value
\n
Description
\n
\n\n\n
\n
compat
\n
A previous version of the ordering, for compatibility (for Arabic)
\n
\n
\n
dict
\n
Dictionary style ordering (such as in Sinhala). Also recognized as dictionary.
\n
\n
\n
emoji
\n
Recommended ordering for emoji characters
\n
\n
\n
eor
\n
European ordering rules
\n
\n
\n
phonebk
\n
Phonebook style ordering (such as in German). Also recognized as phonebook.
\n
\n
\n
phonetic
\n
Phonetic ordering (sorting based on pronunciation; for Lingala)
\n
\n
\n
pinyin
\n
Pinyin ordering for Latin and for CJK characters (used in Chinese)
\n
\n
\n
searchjl
\n
Special collation type for Korean initial consonant search. Warning: This collation is not for sorting, even though you can only use it with Intl.Collator of usage: \"sort\".
\n
\n
\n
stroke
\n
Pinyin ordering for Latin, stroke order for CJK characters (used in Chinese)
\n
\n
\n
trad
\n
Traditional style ordering (such as in Spanish). Also recognized as traditional.
\n
\n
\n
unihan
\n
Pinyin ordering for Latin, Unihan radical-stroke ordering for CJK characters (used in Chinese)
\n
\n
\n
zhuyin
\n
Pinyin ordering for Latin, zhuyin order for Bopomofo and CJK characters (used in Chinese)
\n
\n\n
\n
The types below are specified in CLDR data, but are deprecated, are discouraged from explicit usage, and/or may not be indicated by browsers as supported for various reasons. Avoid using them:\n
\n\n
\n
Value
\n
Description
\n
Notes
\n
\n\n\n
\n
big5han \nDeprecated\n
\n
Pinyin ordering for Latin, big5 charset ordering for CJK characters (used in Chinese)
\n
Deprecated.
\n
\n
\n
direct \nDeprecated\n
\n
Binary code point order (used in Hindi)
\n
Deprecated.
\n
\n
\n
ducet
\n
The default Unicode collation element table order
\n
The ducet collation type is not available to the Web.
\n
\n
\n
gb2312 \nDeprecated\n
\n
Pinyin ordering for Latin, gb2312han charset ordering for CJK characters (for Chinese). Also recognized as gb2312han.
Do not use as a collation type, since in Intl.Collator, this collation is activated via the usage: \"search\" option. There is currently no API for substring search, so this is currently only good for filtering a list of strings by trying a full-string match of the key against each list item.
\n
\n
\n
standard
\n
Default ordering for each language, except Chinese (and, previously, Swedish)
\n
Do not use explicitly. In general, it's unnecessary to specify this explicitly and specifying this for Swedish is problematic due to the different meaning for Swedish in the past.
Currency identifiers are three-letter uppercase codes defined in ISO 4217. These values can be used for the currency option when creating objects such as Intl.NumberFormat, as well as for Intl.DisplayNames.prototype.of(). There are over 300 identifiers in common use so we won't list them. For an exhaustive list of possible identifiers, see the Wikipedia article.\n
Below are all values that are commonly supported by browsers for the numberingSystem key. These values can be used for the numberingSystem option or the nuUnicode extension key when creating objects such as Intl.NumberFormat. For the rows with \"digit characters\", the runtime translates the digits one-by-one without extra actions. The others marked as \"algorithmic\" need additional algorithms to translate the digits. The higher the Unicode code point is, the newer the numbering system is and the more likely it is unsupported by all browsers.\n
\n\n
\n
Value
\n
Description
\n
Digit characters
\n
\n\n\n
\n
adlm
\n
Adlam digits
\n
𞥐𞥑𞥒𞥓𞥔𞥕𞥖𞥗𞥘𞥙 (U+1E950 to U+1E959)
\n
\n
\n
ahom
\n
Ahom digits
\n
𑜰𑜱𑜲𑜳𑜴𑜵𑜶𑜷𑜸𑜹 (U+11730 to U+11739)
\n
\n
\n
arab
\n
Arabic-Indic digits
\n
٠١٢٣٤٥٦٧٨٩ (U+0660 to U+0669)
\n
\n
\n
arabext
\n
Extended Arabic-Indic digits
\n
۰۰۱۲۳۴۵۶۷۸۹ (U+06F0 to U+06F9)
\n
\n
\n
armn
\n
Armenian upper case numerals
\n
algorithmic
\n
\n
\n
armnlow
\n
Armenian lower case numerals
\n
algorithmic
\n
\n
\n
bali
\n
Balinese digits
\n
᭐᭑᭒᭓᭔᭕᭖᭗᭘᭙ (U+1B50 to U+1B59)
\n
\n
\n
beng
\n
Bengali digits
\n
০১২৩৪৫৬৭৮৯ (U+09E6 to U+09EF)
\n
\n
\n
bhks
\n
Bhaiksuki digits
\n
𑱐𑱑𑱒𑱓𑱔𑱕𑱖𑱗𑱘𑱙 (U+11C50 to U+11C59)
\n
\n
\n
brah
\n
Brahmi digits
\n
𑁦𑁧𑁨𑁩𑁪𑁫𑁬𑁭𑁮𑁯 (U+11066 to U+1106F)
\n
\n
\n
cakm
\n
Chakma digits
\n
𑄶𑄷𑄸𑄹𑄺𑄻𑄼𑄽𑄾𑄿 (U+11136 to U+1113F)
\n
\n
\n
cham
\n
Cham digits
\n
꩐꩑꩒꩓꩔꩕꩖꩗꩘꩙ (U+AA50 to U+AA59)
\n
\n
\n
cyrl
\n
Cyrillic numerals
\n
algorithmic
\n
\n
\n
deva
\n
Devanagari digits
\n
०१२३४५६७८९ (U+0966 to U+096F)
\n
\n
\n
diak
\n
Dives Akuru digits
\n
𑥐𑥑𑥒𑥓𑥔𑥕𑥖𑥗𑥘𑥙 (U+11950 to U+11959)
\n
\n
\n
ethi
\n
Ethiopic numerals
\n
algorithmic
\n
\n
\n
fullwide
\n
Full width digits
\n
０１２３４５６７８９ (U+FF10 to U+FF19)
\n
\n
\n
gara
\n
Garay digits
\n
(U+10D40 to U+10D49)
\n
\n
\n
geor
\n
Georgian numerals
\n
algorithmic
\n
\n
\n
gong
\n
Gunjala Gondi digits
\n
𑶠𑶡𑶢𑶣𑶤𑶥𑶦𑶧𑶨𑶩 (U+11DA0 to U+11DA9)
\n
\n
\n
gonm
\n
Masaram Gondi digits
\n
𑵐𑵑𑵒𑵓𑵔𑵕𑵖𑵗𑵘𑵙 (U+11D50 to U+11D59)
\n
\n
\n
grek
\n
Greek upper case numerals
\n
algorithmic
\n
\n
\n
greklow
\n
Greek lower case numerals
\n
algorithmic
\n
\n
\n
gujr
\n
Gujarati digits
\n
૦૧૨૩૪૫૬૭૮૯ (U+0AE6 to U+0AEF)
\n
\n
\n
gukh
\n
Gurung Khema digits
\n
(U+16130 to U+16139)
\n
\n
\n
guru
\n
Gurmukhi digits
\n
੦੧੨੩੪੫੬੭੮੯ (U+0A66 to U+0A6F)
\n
\n
\n
hanidays
\n
Han-character day-of-month numbering for lunar/other traditional calendars
\n
\n
\n
\n
hanidec
\n
Positional decimal system using Chinese number ideographs as digits
Japanese first-year Gannen numbering for Japanese calendar
\n
algorithmic
\n
\n
\n
kali
\n
Kayah Li digits
\n
꤀꤁꤂꤃꤄꤅꤆꤇꤈꤉ (U+A900 to U+A909)
\n
\n
\n
kawi
\n
Kawi digits
\n
𑽐𑽑𑽒𑽓𑽔𑽕𑽖𑽗𑽘𑽙 (U+11F50 to U+11F59)
\n
\n
\n
khmr
\n
Khmer digits
\n
០១២៣៤៥៦៧៨៩ (U+17E0 to U+17E9)
\n
\n
\n
knda
\n
Kannada digits
\n
೦೧೨೩೪೫೬೭೮೯ (U+0CE6 to U+0CEF)
\n
\n
\n
krai
\n
Kirat Rai digits
\n
(U+16D70 to U+16D79)
\n
\n
\n
lana
\n
Tai Tham Hora (secular) digits
\n
᪀᪁᪂᪃᪄᪅᪆᪇᪈᪉ (U+1A80 to U+1A89)
\n
\n
\n
lanatham
\n
Tai Tham (ecclesiastical) digits
\n
᪐᪑᪒᪓᪔᪕᪖᪗᪘᪙ (U+1A90 to U+1A99)
\n
\n
\n
laoo
\n
Lao digits
\n
໐໑໒໓໔໕໖໗໘໙ (U+0ED0 to U+0ED9)
\n
\n
\n
latn
\n
Latin digits
\n
0123456789 (U+0030 to U+0039)
\n
\n
\n
lepc
\n
Lepcha digits
\n
᱀᱁᱂᱃᱄᱅᱆᱇᱈᱉ (U+1C40 to U+1C49)
\n
\n
\n
limb
\n
Limbu digits
\n
᥆᥇᥈᥉᥊᥋᥌᥍᥎᥏ (U+1946 to U+194F)
\n
\n
\n
mathbold
\n
Mathematical bold digits
\n
𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗 (U+1D7CE to U+1D7D7)
\n
\n
\n
mathdbl
\n
Mathematical double-struck digits
\n
𝟘𝟙𝟚𝟛𝟜𝟝𝟞𝟟𝟠𝟡 (U+1D7D8 to U+1D7E1)
\n
\n
\n
mathmono
\n
Mathematical monospace digits
\n
𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿 (U+1D7F6 to U+1D7FF)
\n
\n
\n
mathsanb
\n
Mathematical sans-serif bold digits
\n
𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵 (U+1D7EC to U+1D7F5)
\n
\n
\n
mathsans
\n
Mathematical sans-serif digits
\n
𝟢𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫 (U+1D7E2 to U+1D7EB)
\n
\n
\n
mlym
\n
Malayalam digits
\n
൦൧൨൩൪൫൬൭൮൯ (U+0D66 to U+0D6F)
\n
\n
\n
modi
\n
Modi digits
\n
𑙐𑙑𑙒𑙓𑙔𑙕𑙖𑙗𑙘𑙙 (U+11650 to U+11659)
\n
\n
\n
mong
\n
Mongolian digits
\n
᠐᠑᠒᠓᠔᠕᠖᠗᠘᠙ (U+1810 to U+1819)
\n
\n
\n
mroo
\n
Mro digits
\n
𖩠𖩡𖩢𖩣𖩤𖩥𖩦𖩧𖩨𖩩 (U+16A60 to U+16A69)
\n
\n
\n
mtei
\n
Meetei Mayek digits
\n
꯰꯱꯲꯳꯴꯵꯶꯷꯸꯹ (U+ABF0 to U+ABF9)
\n
\n
\n
mymr
\n
Myanmar digits
\n
၀၁၂၃၄၅၆၇၈၉ (U+1040 to U+1049)
\n
\n
\n
mymrepka
\n
Myanmar Eastern Pwo Karen digits
\n
(U+116DA to U+116E3)
\n
\n
\n
mymrpao
\n
Myanmar Pao digits
\n
(U+116D0 to U+116D9)
\n
\n
\n
mymrshan
\n
Myanmar Shan digits
\n
႐႑႒႓႔႕႖႗႘႙ (U+1090 to U+1099)
\n
\n
\n
mymrtlng
\n
Myanmar Tai Laing digits
\n
꧰꧱꧲꧳꧴꧵꧶꧷꧸꧹ (U+A9F0 to U+A9F9)
\n
\n
\n
nagm
\n
Nag Mundari digits
\n
𞓰𞓱𞓲𞓳𞓴𞓵𞓶𞓷𞓸𞓹 (U+1E4F0 to U+1E4F9)
\n
\n
\n
newa
\n
Newa digits
\n
𑑐𑑑𑑒𑑓𑑔𑑕𑑖𑑗𑑘𑑙 (U+11450 to U+11459)
\n
\n
\n
nkoo
\n
N'Ko digits
\n
߀߁߂߃߄߅߆߇߈߉ (U+07C0 to U+07C9)
\n
\n
\n
olck
\n
Ol Chiki digits
\n
᱐᱑᱒᱓᱔᱕᱖᱗᱘᱙ (U+1C50 to U+1C59)
\n
\n
\n
onao
\n
Ol Onal digits
\n
(U+1E5F1 to U+1E5FA)
\n
\n
\n
orya
\n
Oriya digits
\n
୦୧୨୩୪୫୬୭୮୯ (U+0B66 to U+0B6F)
\n
\n
\n
osma
\n
Osmanya digits
\n
𐒠𐒡𐒢𐒣𐒤𐒥𐒦𐒧𐒨𐒩 (U+104A0 to U+104A9)
\n
\n
\n
outlined
\n
Legacy computing outlined digits
\n
(U+1CCF0 to U+1CCF9)
\n
\n
\n
rohg
\n
Hanifi Rohingya digits
\n
𐴰𐴱𐴲𐴳𐴴𐴵𐴶𐴷𐴸𐴹 (U+10D30 to U+10D39)
\n
\n
\n
roman
\n
Roman upper case numerals
\n
algorithmic
\n
\n
\n
romanlow
\n
Roman lowercase numerals
\n
algorithmic
\n
\n
\n
saur
\n
Saurashtra digits
\n
꣐꣑꣒꣓꣔꣕꣖꣗꣘꣙ (U+A8D0 to U+A8D9)
\n
\n
\n
segment
\n
Legacy computing segmented digits
\n
🯰🯱🯲🯳🯴🯵🯶🯷🯸🯹 (U+1FBF0 to U+1FBF9)
\n
\n
\n
shrd
\n
Sharada digits
\n
𑇐𑇑𑇒𑇓𑇔𑇕𑇖𑇗𑇘𑇙 (U+111D0 to U+111D9)
\n
\n
\n
sind
\n
Khudawadi digits
\n
𑋰𑋱𑋲𑋳𑋴𑋵𑋶𑋷𑋸𑋹 (U+112F0 to U+112F9)
\n
\n
\n
sinh
\n
Sinhala Lith digits
\n
෦෧෨෩෪෫෬෭෮෯ (U+0DE6 to U+0DEF)
\n
\n
\n
sora
\n
Sora_Sompeng digits
\n
𑃰𑃱𑃲𑃳𑃴𑃵𑃶𑃷𑃸𑃹 (U+110F0 to U+110F9)
\n
\n
\n
sund
\n
Sundanese digits
\n
᮰᮱᮲᮳᮴᮵᮶᮷᮸᮹ (U+1BB0 to U+1BB9)
\n
\n
\n
sunu
\n
Sunuwar digits
\n
(U+11BF0 to U+11BF9)
\n
\n
\n
takr
\n
Takri digits
\n
𑛀𑛁𑛂𑛃𑛄𑛅𑛆𑛇𑛈𑛉 (U+116C0 to U+116C9)
\n
\n
\n
talu
\n
New Tai Lue digits
\n
᧐᧑᧒᧓᧔᧕᧖᧗᧘᧙ (U+19D0 to U+19D9)
\n
\n
\n
taml
\n
Tamil numerals
\n
algorithmic
\n
\n
\n
tamldec
\n
Modern Tamil decimal digits
\n
௦௧௨௩௪௫௬௭௮௯ (U+0BE6 to U+0BEF)
\n
\n
\n
telu
\n
Telugu digits
\n
౦౧౨౩౪౫౬౭౮౯ (U+0C66 to U+0C6F)
\n
\n
\n
thai
\n
Thai digits
\n
๐๑๒๓๔๕๖๗๘๙ (U+0E50 to U+0E59)
\n
\n
\n
tibt
\n
Tibetan digits
\n
༠༡༢༣༤༥༦༧༨༩ (U+0F20 to U+0F29)
\n
\n
\n
tirh
\n
Tirhuta digits
\n
𑓐𑓑𑓒𑓓𑓔𑓕𑓖𑓗𑓘𑓙 (U+114D0 to U+114D9)
\n
\n
\n
tnsa
\n
Tangsa digits
\n
𖫀𖫁𖫂𖫃𖫄𖫅𖫆𖫇𖫈𖫉 (U+16AC0 to U+16AC9)
\n
\n
\n
vaii
\n
Vai digits
\n
꘠꘡꘢꘣꘤꘥꘦꘧꘨꘩ (U+A620 to U+A629)
\n
\n
\n
wara
\n
Warang Citi digits
\n
𑣠𑣡𑣢𑣣𑣤𑣥𑣦𑣧𑣨𑣩 (U+118E0 to U+118E9)
\n
\n
\n
wcho
\n
Wancho digits
\n
𞋰𞋱𞋲𞋳𞋴𞋵𞋶𞋷𞋸𞋹 (U+1E2F0 to U+1E2F9)
\n
\n\n
\n
There are three special values: native, traditio, and finance, whose meanings are locale-dependent, and will be resolved to the right system depending on the locale. Therefore, the resolvedOptions() methods will never return these values, but Intl.Locale.prototype.numberingSystem will (if provided as input).\n
Supported time zone identifiers can be used for the timeZone option when creating objects such as Intl.DateTimeFormat, as well as for creating Temporal date objects. There are over 400 identifiers in common use so we won't list them. For an exhaustive list of possible identifiers, see the Wikipedia article or the IANA time zone database.\n
As you browse the list, note that the standardization of Temporal requires browsers to always return the primary identifier in the IANA database, which may change over time. See time zones and offsets for more information. For example, the returned array should contain \"Asia/Kolkata\" instead of \"Asia/Calcutta\" because the latter is an alias of the former and they both correspond to India; however, it should contain both \"Africa/Abidjan\" and \"Atlantic/Reykjavik\" because they are in different countries, despite the latter also being an alias of the former.\n
Below are all values that are commonly supported by browsers for the unit key. These values can be used for the unit option when creating objects such as Intl.NumberFormat. This list is a subset of the CLDR explicitly sanctioned by the ECMA-402 specification, so all implementations should be consistent.\n
\n
acre
\n
bit
\n
byte
\n
celsius
\n
centimeter
\n
day
\n
degree
\n
fahrenheit
\n
fluid-ounce
\n
foot
\n
gallon
\n
gigabit
\n
gigabyte
\n
gram
\n
hectare
\n
hour
\n
inch
\n
kilobit
\n
kilobyte
\n
kilogram
\n
kilometer
\n
liter
\n
megabit
\n
megabyte
\n
meter
\n
microsecond
\n
mile
\n
mile-scandinavian
\n
milliliter
\n
millimeter
\n
millisecond
\n
minute
\n
month
\n
nanosecond
\n
ounce
\n
percent
\n
petabyte
\n
pound
\n
second
\n
stone
\n
terabit
\n
terabyte
\n
week
\n
yard
\n
year
\n
\n
When specifying units, you can also combine two units with the \"-per-\" separator. For example, meter-per-second or liter-per-megabyte.\n
",
"throws": {
"RangeError": "Thrown if an unsupported key was passed as a parameter."
}
@@ -11458,7 +11460,8 @@
],
"compatibility": {
"Firefox": "137",
- "FirefoxAndroid": "137"
+ "FirefoxAndroid": "137",
+ "Safari": "preview"
},
"baseline": {
"level": "NONE"
@@ -12889,7 +12892,7 @@
"SafariIOS": "",
"Nodejs": ""
},
- "doc": "
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
\n
\n
Warning:\nChanging the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, currently a very slow operation in every browser and JavaScript engine. In addition, the effects of altering inheritance are subtle and far-flung, and are not limited to the time spent in the obj.__proto__ = ... statement, but may extend to any code that has access to any object whose [[Prototype]] has been altered. You can read more in JavaScript engine fundamentals: optimizing prototypes.\n
The __proto__ accessor property of Object instances exposes the [[Prototype]] (either an object or null) of this object.\n
The __proto__ property can also be used in an object literal definition to set the object [[Prototype]] on creation, as an alternative to Object.create(). See: object initializer / literal syntax. That syntax is standard and optimized for in implementations, and quite different from Object.prototype.__proto__.",
+ "doc": "
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
\n
\n
Warning:\nChanging the [[Prototype]] of an object is, by the nature of how modern JavaScript engines optimize property accesses, currently a very slow operation in every browser and JavaScript engine. In addition, the effects of altering inheritance are subtle and far-flung, and are not limited to the time spent in the obj.__proto__ = ... statement, but may extend to any code that has access to any object whose [[Prototype]] has been altered. You can read more in JavaScript engine fundamentals: optimizing prototypes.\n
The __proto__ accessor property of Object instances exposes the [[Prototype]] (either an object or null) of this object.\n
The __proto__ property can also be used in an object literal definition to set the object [[Prototype]] on creation, as an alternative to Object.create(). See: object initializer / literal syntax. That syntax is standard and optimized for in implementations, and quite different from Object.prototype.__proto__.",
"returns": "If used as a getter, returns the object's [[Prototype]].",
"throws": {
"TypeError": "Thrown if attempting to set the prototype of a non-extensible object or an immutable prototype exotic object, such as Object.prototype or window."
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Html.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Html.json
index 674fcbab8740..e31c13adbd7a 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Html.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Html.json
@@ -289,10 +289,11 @@
"SafariIOS": "15.5"
},
"baseline": {
- "level": "LOW",
- "lowDate": "2023-04-11"
+ "level": "HIGH",
+ "lowDate": "2023-04-11",
+ "highDate": "2025-10-11"
},
- "doc": "The inertglobal attribute is a Boolean attribute indicating that the element and all of its flat tree descendants become inert. Modal <dialog>s generated with showModal() escape inertness, meaning that they don't inherit inertness from their ancestors, but can only be made inert by having the inert attribute explicitly set on themselves.\n
Specifically, inert does the following:\n
\n
Prevents the click event from being fired when the user clicks on the element.
\n
Prevents the focus event from being raised by preventing the element from gaining focus.
\n
Prevents any contents of the element from being found/matched during any use of the browser's find-in-page feature.
\n
Prevents users from selecting text within the element — akin to using the CSS property user-select to disable text selection.
\n
Prevents users from editing any contents of the element that are otherwise editable.
\n
Hides the element and its content from assistive technologies by excluding them from the accessibility tree.
\n
\n
\n```html\n\n \n
\n
The inert attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.\n
The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.\n
\n
Note:\nWhile inert is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls \"inert\", consider using the disabled attribute, along with CSS :disabled styles, instead.\n
"
+ "doc": "The inertglobal attribute is a Boolean attribute indicating that the element and all of its flat tree descendants become inert. The inert attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked. The inert attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.\n
Modal <dialog>s generated with showModal() escape inertness, meaning that they don't inherit inertness from their ancestors, but can be made inert by having the inert attribute explicitly set on themselves. No other element can escape inertness.\n
\n
Note:\nWhile inert is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls \"inert\", consider using the disabled attribute, along with CSS :disabled styles, instead.\n
\n
Inert HTML elements and their flat tree descendants:\n
Cannot be focused and focus events cannot be fired on them.
\n
Are not searchable via browser find-in-page features (none of their content is found/matched).
\n
Disallow users from selecting text contained within their content — akin to using the CSS property user-select to disable text selection.
\n
Cannot have otherwise-editable content edited. This includes, for example, the contents of textual <input> fields, and text elements with contenteditable set on them.
\n
Are hidden from assistive technologies as they are excluded from the accessibility tree.
\n
\n
The following other features can be used to set an element and its descendants to an inert state:\n
"
},
"inputmode": {
"url": "$MDN_URL$/web/html/reference/global_attributes/inputmode",
@@ -1399,13 +1400,6 @@
"attrs": {
"autoplay": {
"url": "$MDN_URL$/web/html/reference/elements/audio#autoplay",
- "status": [
- "StandardTrack"
- ],
- "compatibility": {},
- "baseline": {
- "level": "NONE"
- },
"doc": "A Boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.\n
\n
Note:\nSites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible.\nIf you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it).\nHowever, this can be useful when creating media elements whose source will be set at a later time, under user control.\nSee our autoplay guide for additional information about how to properly use autoplay.\n
"
},
"controls": {
@@ -2166,6 +2160,8 @@
"Chrome": "135",
"ChromeAndroid": "135",
"Edge": "135",
+ "Firefox": "144",
+ "FirefoxAndroid": "144",
"Opera": "120",
"Safari": "preview"
},
@@ -2183,6 +2179,8 @@
"Chrome": "135",
"ChromeAndroid": "135",
"Edge": "135",
+ "Firefox": "144",
+ "FirefoxAndroid": "144",
"Opera": "120",
"Safari": "preview"
},
@@ -5670,7 +5668,7 @@
"lowDate": "2016-03-21",
"highDate": "2018-09-21"
},
- "doc": "One or more values separated by commas, which can be source sizes or the auto keyword.\n
Media conditions describe properties of the viewport, not the image. For example, (height <= 500px) 1000px proposes using an image source of 1000px width if the viewport height is 500px or less. Because a source size descriptor specifies the width to use for the image during layout, the media condition is typically (but not necessarily) based on the width.\n
Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. The selected source size affects the intrinsic size of the image (the image's display size if no CSS styling is applied). If the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect.\n
A source size value can be any non-negative length. It must not use CSS functions other than the math functions. Units are interpreted in the same way as media queries, meaning that all relative length units are relative to the document root rather than the <img> element. For example, an em value is relative to the root font size, not the font size of the image. Percentage values are not allowed.\n
The auto keyword can replace the whole list of sizes or the first entry in the list. It is only valid when combined with loading=\"lazy\", and resolves to the concrete size of the image. Since the intrinsic size of the image is not yet known, width and height attributes (or CSS equivalents) should also be specified to prevent the browser from assuming the default image width of 300px.\nFor better backward compatibility with browsers that do not support auto, you can include fallback sizes after auto in the sizes attribute:\n
\n```html\n```\n
"
+ "doc": "One or more values separated by commas, which can be source sizes or the auto keyword.\n
Media conditions describe properties of the viewport, not the image. For example, (height <= 500px) 1000px proposes using an image source of 1000px width if the viewport height is 500px or less. Because a source size descriptor specifies the width to use for the image during layout, the media condition is typically (but not necessarily) based on the width.\n
Source size values specify the intended display size of the image. User agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. The selected source size affects the intrinsic size of the image (the image's display size if no CSS styling is applied). If the srcset attribute is absent, or contains no values with a width descriptor, then the sizes attribute has no effect.\n
A source size value can be any non-negative length. It must not use CSS functions other than the math functions. Units are interpreted in the same way as media queries, meaning that all relative length units are relative to the document root rather than the <img> element. For example, an em value is relative to the root font size, not the font size of the image. Percentage values are not allowed.\n
The auto keyword can replace the whole list of sizes or the first entry in the list. It is only valid when combined with loading=\"lazy\", and resolves to the concrete size of the image. Since the intrinsic size of the image is not yet known, width and height attributes (or CSS equivalents) should also be specified to prevent the browser from assuming the default image width of 300px.\nFor better backward compatibility with browsers that do not support auto, you can include fallback sizes after auto in the sizes attribute:\n
\n```html\n```\n
"
},
"src": {
"url": "$MDN_URL$/web/html/reference/elements/img#src",
@@ -5834,7 +5832,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow."
+ "doc": "Valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. See the file input type."
},
"align": {
"url": "$MDN_URL$/web/html/reference/elements/input#align",
@@ -5868,7 +5866,8 @@
},
"baseline": {
"level": "NONE"
- }
+ },
+ "doc": "Valid for the color input type only, the alpha attribute provides the end user with the ability to set the opacity of the color being selected."
},
"alt": {
"url": "$MDN_URL$/web/html/reference/elements/input#alt",
@@ -5889,7 +5888,12 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. See the image input type."
+ },
+ "autocapitalize": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#autocapitalize",
+ "doc": "Controls whether inputted text is automatically capitalized and, if so, in what manner. See the autocapitalize global attribute page for more information."
},
"autocomplete": {
"url": "$MDN_URL$/web/html/reference/elements/input#autocomplete",
@@ -5911,7 +5915,11 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.\n
It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <form> elements.\n
The autocomplete attribute provides a hint to the user agent specifying how to, or indeed whether to, prefill a form control. The attribute value is either the keyword off or on, or an ordered list of space-separated tokens.\n
If the same list of tokens is used in more than one form control, the user-agent will autocomplete all occurrences of the same autocomplete value with the same data value.\n
Some tokens may be used more than once with potentially different expected values, such as the zip-code token in a form that contains both shipping and billing addresses. Including multiple different tokens in a space-separated list causes the associated form controls to be given unique autocomplete values: in this case, autocomplete=\"shipping zip-code\" and autocomplete=\"billing zip-code\".\n
Some autocomplete values may need to be re-used multiple times. For example, a form may contain multiple shipping addresses and therefore multiple occurrences of \"shipping zip-code\" while still expecting different values. To make the autocomplete value unique in these cases, the first token in the space-separated list of tokens can be a section-* token, where the token's first eight characters are always the string \"section-\", followed by an alphanumeric string. All form fields given the section-* token with the same alphanumeric string belong to the same named group.\n
If including the autocomplete attribute on hidden input elements (<input type=\"hidden\">), its value must be an ordered list of space-separated tokens; the on and off keywords are not allowed.\n
The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. The browser may also offer the ability to save encrypted credit card information, for autocompletion following an authentication procedure.\n
\n
Note:\nThe autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply by virtue of its type. See Firefox bug 654072.\n
"
+ "doc": "(Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See autocomplete for permitted values.\n
The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, and password. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types.\n
See the autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types."
+ },
+ "autofocus": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#autofocus",
+ "doc": "A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> containing the element has been displayed).\n
\n
Note:\nAn element with the autofocus attribute may gain focus before the DOMContentLoaded event is fired.\n
\n
No more than one element in the document may have the autofocus attribute. If put on more than one element, the first one with the attribute receives focus.\n
The autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused.\n
\n
Warning:\nAutomatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers \"teleport\" their user to the form control without warning them beforehand.\n
\n
Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content."
},
"capture": {
"url": "$MDN_URL$/web/html/reference/elements/input#capture",
@@ -5926,7 +5934,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.\n
Values include user and environment. The capture attribute is supported on the file input type.\n
The capture attribute takes as its value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.\n
\n\n
\n
Value
\n
Description
\n
\n\n\n
\n
user
\n
The user-facing camera and/or microphone should be used.
\n
\n
\n
environment
\n
The outward-facing camera and/or microphone should be used
\n
\n\n
\n
\n
Note:\nCapture was previously a Boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file input.\n
"
+ "doc": "Introduced in the HTML Media Capture specification and valid for the file input type only, the capture attribute defines which media—microphone, video, or camera—should be used to capture a new file for upload with file upload control in supporting scenarios. See the file input type."
},
"checked": {
"url": "$MDN_URL$/web/html/reference/elements/input#checked",
@@ -5947,7 +5955,8 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates that the radio button is the currently selected one in the group of same-named radio buttons. If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)\n
\n
Note:\nUnlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.\n
For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The default value for checkboxes and radio buttons is on.\n
"
},
"colorspace": {
"url": "$MDN_URL$/web/html/reference/elements/input#colorspace",
@@ -5961,7 +5970,8 @@
},
"baseline": {
"level": "NONE"
- }
+ },
+ "doc": "Valid for the color input type only, the colorspace attribute specifies the color space that is used by the type=\"color\" input. Possible enumerated values are:\n
\n
\"limited-srgb\": The color is in the sRGB color space. This includes rgb(), hsl(), hwb(), and <hex-color> values. The color value is limited to 8-bits per r, g, and b component. This is the default.
\n
\"display-p3\": The Display P3 color space, e.g., color(display-p3 1.84 -0.19 0.72 / 0.6)
\n
"
},
"dirname": {
"url": "$MDN_URL$/web/html/reference/elements/input#dirname",
@@ -5982,7 +5992,7 @@
"level": "LOW",
"lowDate": "2023-08-01"
},
- "doc": "The dirname attribute can be used on the <textarea> element and several <input> types and describes the directionality of the element's text content during form submission.\nThe browser uses this attribute's value to determine whether text the user has entered is left-to-right or right-to-left oriented.\nWhen used, the element's text directionality value is included in form submission data along with the dirname attribute's value as the name of the field."
+ "doc": "Valid for hidden, text, search, url, tel, and email input types, the dirname attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the name and value, and the second being the value of the dirname attribute as the name, with a value of ltr or rtl as set by the browser.\n
\n```html\n\n \n \n\n\n```\n
\n
When the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit-dir=ltr to be sent.\nFor more information, see the dirname attribute."
},
"disabled": {
"url": "$MDN_URL$/web/html/reference/elements/input#disabled",
@@ -6004,7 +6014,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
+ "doc": "A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.\n
Specifically, disabled inputs do not receive the click event, and disabled inputs are not submitted with the form.\n
\n
Note:\nAlthough not required by the specification, Firefox will by default persist the dynamic disabled state of an <input> across page loads. Use the autocomplete attribute to control this feature.\n
"
},
"form": {
"url": "$MDN_URL$/web/html/reference/elements/input#form",
@@ -6026,7 +6036,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The form HTML attribute associates a form-associated element with a <form> element within the same document. This attribute applies to the <button>, <fieldset>, <input>, <object>, <output>, <select>, and <textarea> elements."
+ "doc": "A string specifying the <form> element with which the input is associated (that is, its form owner). This string's value, if present, must match the id of a <form> element in the same document. If this attribute isn't specified, the <input> element is associated with the nearest containing form, if any.\n
The form attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.\n
\n
Note:\nAn input can only be associated with one form.\n
"
},
"formaction": {
"url": "$MDN_URL$/web/html/reference/elements/input#formaction",
@@ -6047,7 +6057,8 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for the image and submit input types only. See the submit input type for more information."
},
"formenctype": {
"url": "$MDN_URL$/web/html/reference/elements/input#formenctype",
@@ -6068,7 +6079,8 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for the image and submit input types only. See the submit input type for more information."
},
"formmethod": {
"url": "$MDN_URL$/web/html/reference/elements/input#formmethod",
@@ -6089,7 +6101,8 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for the image and submit input types only. See the submit input type for more information."
},
"formnovalidate": {
"url": "$MDN_URL$/web/html/reference/elements/input#formnovalidate",
@@ -6110,7 +6123,8 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for the image and submit input types only. See the submit input type for more information."
},
"formtarget": {
"url": "$MDN_URL$/web/html/reference/elements/input#formtarget",
@@ -6131,12 +6145,25 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for the image and submit input types only. See the submit input type for more information."
+ },
+ "height": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#height",
+ "doc": "Valid for the image input button only, the height is the height of the image file to display to represent the graphical submit button. See the image input type."
+ },
+ "id": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#id",
+ "doc": "Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the <label>'s for attribute to link the label with the form control. See <label>."
},
"incremental": {
"url": "$MDN_URL$/web/html/reference/elements/input#incremental",
"doc": "Whether or not to send repeated\nsearch\nevents to allow updating live search results while the user is still editing the value of the field.\nWebKit and Blink only (Safari, Chrome, Opera, etc.).
The Boolean attribute incremental is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the user agent to process the input as a live search. As the user edits the value of the field, the user agent sends search events to the HTMLInputElement object representing the search box. This allows your code to update the search results in real time as the user edits the search.\n
If incremental is not specified, the search event is only sent when the user explicitly initiates a search (such as by pressing the Enter or Return key while editing the field).\n
The search event is rate-limited so that it is not sent more frequently than an implementation-defined interval."
},
+ "inputmode": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#inputmode",
+ "doc": "Global value valid for all elements, it provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Values include none, text, tel, url, email, numeric, decimal, and search."
+ },
"list": {
"url": "$MDN_URL$/web/html/reference/elements/input#list",
"status": [
@@ -6156,7 +6183,8 @@
"level": "HIGH",
"lowDate": "2019-03-25",
"highDate": "2021-09-25"
- }
+ },
+ "doc": "The value given to the list attribute should be the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.\n
It is valid on text, search, url, tel, email, date, month, week, time, datetime-local, number, range, and color.\n
Per the specifications, the list attribute is not supported by the hidden, password, checkbox, radio, file, or any of the button types.\n
Depending on the browser, the user may see a custom color palette suggested, tic marks along a range, or even an input that opens like a <select> but allows for non-listed values. Check out the browser compatibility table for the other input types.\n
See the <datalist> element."
},
"max": {
"url": "$MDN_URL$/web/html/reference/elements/input#max",
@@ -6178,7 +6206,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.\n
The max attribute is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and both the <progress> and <meter> elements. It is a number that specifies the most positive value a form control to be considered valid.\n
If the value exceeds the max value allowed, the validityState.rangeOverflow will be true, and the control will be matched by the :out-of-range and :invalid pseudo-classes."
+ "doc": "Valid for date, month, week, time, datetime-local, number, and range, it defines the greatest value in the range of permitted values. If the value entered into the element exceeds this, the element fails constraint validation. If the value of the max attribute isn't a number, then the element has no maximum value.\n
There is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM."
},
"maxlength": {
"url": "$MDN_URL$/web/html/reference/elements/input#maxlength",
@@ -6200,7 +6228,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The maxlength attribute defines the maximum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.\n
The length is measured in UTF-16 code units, which is often but not always equal to the number of characters. If no maxlength is specified, or an invalid value is specified, the input has no maximum length.\n
Any maxlength value must be greater than or equal to the value of minlength, if present and valid. The input will fail constraint validation if the length of the text value of the field is greater than maxlength UTF-16 code units long. Constraint validation is only applied when the value is changed by the user."
+ "doc": "Valid for text, search, url, tel, email, and password, it defines the maximum string length (measured in UTF-16 code units) that the user can enter into the field. This must be an integer value of 0 or higher. If no maxlength is specified, or an invalid value is specified, the field has no maximum length. This value must also be greater than or equal to the value of minlength.\n
The input will fail constraint validation if the length of the text entered into the field is greater than maxlengthUTF-16 code units long. By default, browsers prevent users from entering more characters than allowed by the maxlength attribute. Constraint validation is only applied when the value is changed by the user. See Client-side validation for more information."
},
"min": {
"url": "$MDN_URL$/web/html/reference/elements/input#min",
@@ -6222,7 +6250,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.\n
Some input types have a default minimum. If the input has no default minimum and a value is specified for min that can't be converted to a valid number (or no minimum value is set), the input has no minimum value.\n
It is valid for the input types including: date, month, week, time, datetime-local, number and range types, and the <meter> element."
+ "doc": "Valid for date, month, week, time, datetime-local, number, and range, it defines the most negative value in the range of permitted values. If the value entered into the element is less than this, the element fails constraint validation. If the value of the min attribute isn't a number, then the element has no minimum value.\n
This value must be less than or equal to the value of the max attribute. If the min attribute is present but is not specified or is invalid, no min value is applied. If the min attribute is valid and a non-empty value is less than the minimum allowed by the min attribute, constraint validation will prevent form submission. See Client-side validation for more information.\n
There is a special case: if the data type is periodic (such as for dates or times), the value of max may be lower than the value of min, which indicates that the range may wrap around; for example, this allows you to specify a time range from 10 PM to 4 AM."
},
"minlength": {
"url": "$MDN_URL$/web/html/reference/elements/input#minlength",
@@ -6244,7 +6272,7 @@
"lowDate": "2018-04-30",
"highDate": "2020-10-30"
},
- "doc": "The minlength attribute defines the minimum string length that the user can enter into an <input> or <textarea>. The attribute must have an integer value of 0 or higher.\n
The length is measured in UTF-16 code units, which is often but not always equal to the number of characters. If no minlength is specified, or an invalid value is specified, the input has no minimum length. This value must be less than or equal to the value of maxlength, otherwise the value will never be valid, as it is impossible to meet both criteria.\n
The input will fail constraint validation if the length of the text value of the field is less than minlength UTF-16 code units long, with validityState.tooShort returning true. Constraint validation is only applied when the value is changed by the user. Once submission fails, some browsers will display an error message indicating the minimum length required and the current length.\n
minlength does not imply required; an input only violates a minlength constraint if the user has input a value. If an input is not required, an empty string can be submitted even if minlength is set."
+ "doc": "Valid for text, search, url, tel, email, and password, it defines the minimum string length (measured in UTF-16 code units) that the user can enter into the entry field. This must be a non-negative integer value smaller than or equal to the value specified by maxlength. If no minlength is specified, or an invalid value is specified, the input has no minimum length.\n
The input will fail constraint validation if the length of the text entered into the field is fewer than minlengthUTF-16 code units long, preventing form submission. Constraint validation is only applied when the value is changed by the user. See Client-side validation for more information."
},
"mozactionhint": {
"url": "$MDN_URL$/web/html/reference/elements/input#mozactionhint",
@@ -6277,7 +6305,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The Boolean multiple attribute, if set, means the form control accepts one or more values. The attribute is valid for the email and file input types and the <select>. The manner by which the user opts for multiple values depends on the form control."
+ "doc": "The Boolean multiple attribute, if set, means the user can enter comma separated email addresses in the email widget or can choose more than one file with the file input. See the email and file input type."
},
"name": {
"url": "$MDN_URL$/web/html/reference/elements/input#name",
@@ -6298,7 +6326,8 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted.\n
Consider the name a required attribute (even though it's not). If an input has no name specified, or name is empty, the input's value is not submitted with the form! (Disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.)\n
There are two special cases:\n
\n
_charset_ : If used as the name of an <input> element of type hidden, the input's value is automatically set by the user agent to the character encoding being used to submit the form.
\n
isindex: For historical reasons, the name isindex is not allowed.
\n\n
The name attribute creates a unique behavior for radio buttons.\n
Only one radio button in a same-named group of radio buttons can be checked at a time. Selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. The value of that one checked radio button is sent along with the name if the form is submitted,\n
When tabbing into a series of same-named group of radio buttons, if one is checked, that one will receive focus. If they aren't grouped together in source order, if one of the group is checked, tabbing into the group starts when the first one in the group is encountered, skipping all those that aren't checked. In other words, if one is checked, tabbing skips the unchecked radio buttons in the group. If none are checked, the radio button group receives focus when the first button in the same name group is reached.\n
Once one of the radio buttons in a group has focus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order.\n
When an input element is given a name, that name becomes a property of the owning form element's HTMLFormElement.elements property. If you have an input whose name is set to guest and another whose name is hat-size, the following code can be used:\n
\n```js\nlet form = document.querySelector(\"form\");\nlet guestName = form.elements.guest;\nlet hatSize = form.elements[\"hat-size\"];\n```\n
\n
When this code has run, guestName will be the HTMLInputElement for the guest field, and hatSize the object for the hat-size field.\n
\n
Warning:\nAvoid giving form elements a name that corresponds to a built-in property of the form, since you would then override the predefined property or method with this reference to the corresponding input.\n
"
},
"orient": {
"url": "$MDN_URL$/web/html/reference/elements/input#orient",
@@ -6324,7 +6353,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The pattern attribute specifies a regular expression the form control's value should match. If a non-null value doesn't conform to the constraints set by the pattern value, the ValidityState object's read-only patternMismatch property will be true."
+ "doc": "Valid for text, search, url, tel, email, and password, the pattern attribute is used to compile a regular expression that the input's value must match in order for the value to pass constraint validation. It must be a valid JavaScript regular expression, as used by the RegExp type, and as documented in our guide on regular expressions. No forward slashes should be specified around the pattern text. When compiling the regular expression:\n\n
the pattern will be implicitly wrapped with ^(?: and )$, such that the match is required against the entire input value, i.e., ^(?:<pattern>)$.
\n
the 'v' flag is specified so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII.
\n\n
If the pattern attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission. If the multiple is present, the compiled regular expression is matched against each comma separated value.\n
\n
Note:\nIf using the pattern attribute, inform the user about the expected format by including explanatory text nearby. You can also include a title attribute to explain what the requirements are to match the pattern; most browsers will display this title as a tooltip. The visible explanation is required for accessibility. The tooltip is an enhancement.\n
\n
See Client-side validation for more information."
},
"placeholder": {
"url": "$MDN_URL$/web/html/reference/elements/input#placeholder",
@@ -6346,7 +6375,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The placeholder attribute defines the text displayed in a form control when the control has no value. The placeholder text should provide a brief hint to the user as to the expected type of data that should be entered into the control.\n
Effective placeholder text includes a word or short phrase that hints at the expected data type, not an explanation or prompt. The placeholder must not be used instead of a <label>. As the placeholder is not visible if the value of the form control is not null, using placeholder instead of a <label> for a prompt harms usability and accessibility.\n
The placeholder attribute is supported by the following input types: text, search, url, tel, email, and password. It is also supported by the <textarea> element. The example below shows the placeholder attribute in use to explain the expected format of an input field.\n
\n
Note:\nExcept in <textarea> elements, the placeholder attribute can't include any line feeds (LF) or carriage returns (CR). If either is included in the value, the placeholder text will be clipped.\n
"
+ "doc": "Valid for text, search, url, tel, email, password, and number, the placeholder attribute provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that provides a hint as to the expected type of data, rather than an explanation or prompt. The text must not include carriage returns or line feeds. So for example if a field is expected to capture a user's first name, and its label is \"First Name\", a suitable placeholder might be \"e.g., Mustafa\".\n
\n
Note:\nThe placeholder attribute is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See Labels for more information.\n
"
},
"popovertarget": {
"url": "$MDN_URL$/web/html/reference/elements/input#popovertarget",
@@ -6366,7 +6395,8 @@
"baseline": {
"level": "LOW",
"lowDate": "2024-04-16"
- }
+ },
+ "doc": "Turns an <input type=\"button\"> element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details. Establishing a relationship between a popover and its invoker button using the popovertarget attribute has two additional useful effects:\n
\n
The browser creates an implicit aria-details and aria-expanded relationship between popover and invoker, and places the popover in a logical position in the keyboard focus navigation order when shown. This makes the popover more accessible to keyboard and assistive technology (AT) users (see also Popover accessibility features).
\n
The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls using CSS anchor positioning. See Popover anchor positioning for more details.
\n
"
},
"popovertargetaction": {
"url": "$MDN_URL$/web/html/reference/elements/input#popovertargetaction",
@@ -6386,7 +6416,8 @@
"baseline": {
"level": "LOW",
"lowDate": "2024-04-16"
- }
+ },
+ "doc": "Specifies the action to be performed on a popover element being controlled by a control <input type=\"button\">. Possible values are:\n
The button will toggle a popover between showing and hidden. If the popover is hidden, it will be shown; if the popover is showing, it will be hidden. If popovertargetaction is omitted, \"toggle\" is the default action that will be performed by the control button.\n
\n
"
},
"readonly": {
"url": "$MDN_URL$/web/html/reference/elements/input#readonly",
@@ -6408,7 +6439,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The Boolean readonly attribute, when present, makes the element not mutable, meaning the user can not edit the control."
+ "doc": "A Boolean attribute which, if present, indicates that the user should not be able to edit the value of the input. The readonly attribute is supported by the text, search, url, tel, email, date, month, week, time, datetime-local, number, and password input types.\n
See the HTML attribute: readonly for more information."
},
"required": {
"url": "$MDN_URL$/web/html/reference/elements/input#required",
@@ -6430,7 +6461,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The Booleanrequired attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.\n
The attribute is not supported on, or relevant to, range and color input types, as both have default values. Type color defaults to #000000. Type range defaults to the midpoint between min and max — with min and max defaulting to 0 and 100 respectively in most browsers if not declared. required is also not supported on the hidden input type — users cannot be expected to fill out a hidden form field. Finally, required is not supported on any button input types, including image.\n
In the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one on which the attribute is applied. To improve code maintenance, it is recommended to either include the required attribute in every same-named radio button in the group, or else in none.\n
In the case of a same named group of checkbox input types, only the checkboxes with the required attribute are required.\n
\n
Note:\nSetting aria-required=\"true\" tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.\n
"
+ "doc": "required is a Boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. The required attribute is supported by text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, and file inputs.\n
See Client-side validation and the HTML attribute: required for more information."
},
"results": {
"url": "$MDN_URL$/web/html/reference/elements/input#results",
@@ -6456,7 +6487,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The size attribute defines the width of the <input> and the height of the <select> element. For an input element, it defines the number of characters that the user agent allows the user to see when editing the value. For a select element, it defines the number of options that should be shown to the user. This must be a valid non-negative integer greater than zero.\n
If no size is specified, or an invalid value is specified, the input has no size declared, and the form control will be the default width based on the user agent. If CSS targets the element with properties impacting the width, CSS takes precedence.\n
The size attribute has no impact on constraint validation."
+ "doc": "Valid for email, password, tel, url, and text, the size attribute specifies how much of the input is shown. Basically creates same result as setting CSS width property with a few specialties. The actual unit of the value depends on the input type. For password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels (or px units). CSS width takes precedence over the size attribute."
},
"src": {
"url": "$MDN_URL$/web/html/reference/elements/input#src",
@@ -6477,7 +6508,8 @@
"level": "HIGH",
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
- }
+ },
+ "doc": "Valid for the image input button only, the src is string specifying the URL of the image file to display to represent the graphical submit button. See the image input type."
},
"step": {
"url": "$MDN_URL$/web/html/reference/elements/input#step",
@@ -6499,7 +6531,19 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The step attribute is a number that specifies the granularity that the value must adhere to or the keyword any. It is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types.\n
The step sets the stepping interval when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time input types. The value must be a positive number - integer or float — or the special value any, which means no stepping is implied and any value is allowed (barring other constraints, such as min and max).\n
Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided (except for week, which has a default step base of −259,200,000, representing the start of week 1970-W01)."
+ "doc": "Valid for date, month, week, time, datetime-local, number, and range, the step attribute is a number that specifies the granularity that the value must adhere to. Only values which are a whole number of steps from the step base are valid. The step base is min if specified, value otherwise, or 0 if neither is provided (except for week, which has a default step base of −259,200,000, representing the start of week 1970-W01).\n
If not explicitly included:\n
\n
step defaults to 1 for number and range.
\n
Each date/time input type has a default step value appropriate for the type; see the individual input pages: date, datetime-local, month, time, and week.
\n
\n
The value must be a positive number—integer or float—or the special value any, which means no stepping is implied, and any value is allowed (barring other constraints, such as min and max).\n
For example, if you have <input type=\"number\" min=\"10\" step=\"2\">, then any even integer, 10 or greater, is valid. If omitted, <input type=\"number\">, any integer is valid, but floats (like 4.2) are not valid, because step defaults to 1. For 4.2 to be valid, step would have had to be set to any, 0.1, 0.2, or the min value would have had to be a number ending in .2, such as <input type=\"number\" min=\"-5.2\">.\n
\n
Note:\nWhen the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the :invalid pseudoclass.\n
\n
See Client-side validation for more information."
+ },
+ "tabindex": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#tabindex",
+ "doc": "Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly."
+ },
+ "title": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#title",
+ "doc": "Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the <label> element with a for attribute set to the form control's id attribute. See Labels below."
+ },
+ "type": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#type",
+ "doc": "A string specifying the type of control to render. For example, to create a checkbox, a value of checkbox is used. If omitted (or an unknown value is specified), the input type text is used, creating a plaintext input field.\n
Permitted values are listed in Input types above."
},
"usemap": {
"url": "$MDN_URL$/web/html/reference/elements/input#usemap",
@@ -6521,6 +6565,10 @@
"level": "NONE"
}
},
+ "value": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#value",
+ "doc": "The input control's value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective HTMLInputElement object's value property. The value attribute is always optional, though should be considered mandatory for checkbox, radio, and hidden."
+ },
"webkitdirectory": {
"url": "$MDN_URL$/web/html/reference/elements/input#webkitdirectory",
"compatibility": {
@@ -6537,6 +6585,10 @@
"level": "NONE"
},
"doc": "A Boolean indicating whether to only allow the user to choose a directory (or directories, if\nmultiple\nis also present)
The Boolean webkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See HTMLInputElement.webkitdirectory for additional details and examples.\n
Though originally implemented only for WebKit-based browsers, webkitdirectory is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative."
+ },
+ "width": {
+ "url": "$MDN_URL$/web/html/reference/elements/input#width",
+ "doc": "Valid for the image input button only, the width is the width of the image file to display to represent the graphical submit button. See the image input type."
}
}
},
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/MathML.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/MathML.json
index f2cd10ec13d0..bfd118757971 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/MathML.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/MathML.json
@@ -9,6 +9,10 @@
},
"lang": "en-us",
"attrs": {
+ "data-_star_": {
+ "url": "$MDN_URL$/web/mathml/reference/global_attributes/data-_star_",
+ "doc": "The data-* MathML attributes are called custom data attributes. They let MathML markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the MathMLElement interface of the element the attributes belong to, with the MathMLElement.dataset property.\n
The * can be replaced by any characters allowed in XML's rules for names, with the following restrictions:\n
\n
Can't start with xml.
\n
No semicolons (;, U+003A).
\n
No capital A to Z letters.
\n
\n
\n
Note:\nThe MathMLElement.dataset property is a DOMStringMap that provides the attribute data-test-value via MathMLElement.dataset.testValue. Hyphen characters (-, U+002D) are removed and the next letter is capitalized, resulting in the camel case format.\n
\n
You can use this attribute with any MathML element."
+ },
"dir": {
"url": "$MDN_URL$/web/mathml/reference/global_attributes/dir",
"status": [
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json
index fc3191e1b726..13487eef2143 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/Svg.json
@@ -27,6 +27,28 @@
},
"doc": "The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property.\n
\n
Note:\nAs a presentation attribute, alignment-baseline also has a CSS property counterpart: alignment-baseline. When both are specified, the CSS property takes priority.\n
\n
You can use this attribute with the following SVG elements:\n
"
},
+ "autofocus": {
+ "url": "$MDN_URL$/web/svg/reference/attribute/autofocus",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "79",
+ "ChromeAndroid": "79",
+ "Edge": "79",
+ "Firefox": "110",
+ "FirefoxAndroid": "110",
+ "Opera": "66",
+ "Safari": "15.4",
+ "SafariIOS": "15.4"
+ },
+ "baseline": {
+ "level": "HIGH",
+ "lowDate": "2023-02-14",
+ "highDate": "2025-08-14"
+ },
+ "doc": "The autofocus global SVG attribute defines a focusable element to be focused after it's connected to a document. The attribute has no effect if the element is not already focusable.\n
The autofocus attribute has an HTML counterpart: autofocus. No more than one element in the document may have the autofocus attribute. If applied to multiple elements, the first one will receive focus."
+ },
"baseline-shift": {
"url": "$MDN_URL$/web/svg/reference/attribute/baseline-shift",
"status": [
@@ -852,6 +874,28 @@
},
"doc": "The pointer-events attribute is a presentation attribute that allows defining whether or when an element may be the target of a mouse event.\n
\n
Note:\nAs a presentation attribute, pointer-events also has a CSS property counterpart: pointer-events. When both are specified, the CSS property takes priority.\n
\n
You can use this attribute with the following SVG elements:\n
"
},
+ "requiredextensions": {
+ "url": "$MDN_URL$/web/svg/reference/attribute/requiredextensions",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "81",
+ "ChromeAndroid": "81",
+ "Edge": "81",
+ "Firefox": "2",
+ "FirefoxAndroid": "4",
+ "Opera": "68",
+ "Safari": "8",
+ "SafariIOS": "8"
+ },
+ "baseline": {
+ "level": "HIGH",
+ "lowDate": "2020-04-13",
+ "highDate": "2022-10-13"
+ },
+ "doc": "The requiredExtensions SVG conditional processing attribute is a list of space-separated URL values each referencing a language extension. Language extensions are extended capabilities that go beyond those defined by standard browser specifications.\n
The value is a space-separated list of URL references identifying the required extensions. If all of the named extensions in the list are supported by the user agent, the element is rendered as usual. If attribute is present but the value is an empty string, or if any of the extensions are not supported by the browser, the browser will skip the element, along with all its descendants, not rendering it.\n
You can use this attribute with the following SVG elements:\n
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
\n
The requiredFeatures attribute takes a list of feature strings, with the individual strings separated by white space. It determines whether or not all of the named features are supported by the browser; if all of them are supported, the attribute evaluates to true end the element is rendered; otherwise, the attribute evaluates to false and the current element and its children are skipped and thus will not be rendered. This provides a way to design SVG that gracefully falls back when features aren't available.\n
If the attribute is not present, then its implicit evaluated value is true. If a null string or empty string value is given to attribute requiredFeatures, the attribute is evaluate to false.\n
requiredFeatures is often used in conjunction with the <switch> element. If requiredFeatures is used in other situations, it represents a simple switch on the given element whether to render the element or not.\n
You can use this attribute with the following SVG elements:\n
"
@@ -1190,6 +1234,28 @@
},
"doc": "The text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the text-decoration-line and text-decoration-style properties.\n
The fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared.\n
The paint order of the text decoration, i.e., the fill and stroke, is determined by the value of the paint-order attribute at the point where the text decoration is declared.\n
\n
Note:\nAs a presentation attribute, text-decoration also has a CSS property counterpart: text-decoration. When both are specified, the CSS property takes priority.\n
\n
You can use this attribute with the following SVG elements:\n
"
},
+ "text-overflow": {
+ "url": "$MDN_URL$/web/svg/reference/attribute/text-overflow",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "1",
+ "ChromeAndroid": "18",
+ "Edge": "12",
+ "Firefox": "7",
+ "FirefoxAndroid": "7",
+ "Opera": "11",
+ "Safari": "1.3",
+ "SafariIOS": "1"
+ },
+ "baseline": {
+ "level": "HIGH",
+ "lowDate": "2015-07-29",
+ "highDate": "2018-01-29"
+ },
+ "doc": "The SVG text-overflow attribute specifies how text content block elements render when text overflows line boxes. This can happen, for example, when the white-space attribute or CSS property has the value nowrap. The property does not apply to pre-formatted text or text situated on a path.\n
In SVG, text-overflow has an effect if there is a validly specified wrapping area, regardless of the computed value of the overflow property on the text content block element. The effect is purely visual: clipped text is not removed from the DOM, and any ellipsis, if presented, does not itself become part of the DOM. For all the DOM methods, it is as if text-overflow was not applied, and as if the wrapping area did not constrain the text.\n
\n
Note:\nAs a presentation attribute, text-overflow also has a CSS property counterpart: text-overflow. When both are specified, the CSS property takes priority.\n
"
+ },
"text-rendering": {
"url": "$MDN_URL$/web/svg/reference/attribute/text-rendering",
"status": [
@@ -1318,6 +1384,28 @@
},
"doc": "The visibility attribute lets you control the visibility of graphical elements. With a value of hidden or collapse the current graphics element is invisible.\n
\n
Note:\nIf the visibility attribute is set to hidden on a text element, then the text is invisible but still takes up space in text layout calculations.\n
\n
Depending on the value of attribute pointer-events, graphics elements which have their visibility attribute set to hidden still might receive events.\n
\n
Note:\nAs a presentation attribute, visibility also has a CSS property counterpart: visibility. When both are specified, the CSS property takes priority.\n
"
},
+ "white-space": {
+ "url": "$MDN_URL$/web/svg/reference/attribute/white-space",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "1",
+ "ChromeAndroid": "18",
+ "Edge": "12",
+ "Firefox": "1",
+ "FirefoxAndroid": "4",
+ "Opera": "4",
+ "Safari": "1",
+ "SafariIOS": "1"
+ },
+ "baseline": {
+ "level": "HIGH",
+ "lowDate": "2015-07-29",
+ "highDate": "2018-01-29"
+ },
+ "doc": "The white-space SVG attribute specifies how white space within text should be handled. This includes whether and how white space inside the element is collapsed and whether lines may wrap at unforced soft wrap opportunities.\n
\n
Note:\nAs a presentation attribute, white-space also has a CSS property counterpart: white-space. When both are specified, the CSS property takes priority.\n
"
+ },
"word-spacing": {
"url": "$MDN_URL$/web/svg/reference/attribute/word-spacing",
"status": [
@@ -8161,8 +8249,11 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The <switch>SVG element evaluates any requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true.\n
Other direct children will be bypassed and therefore not rendered. If a child element is a container element, like <g>, then its subtree is also processed/rendered or bypassed/not rendered.\n
\n
Note:\nThe display and visibility properties have no effect on <switch> element processing. In particular, setting display:none on a child has no effect on the true/false testing for <switch> processing.\n
",
+ "doc": "The <switch>SVG element evaluates any requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true.\n
Other direct children will be bypassed and therefore not rendered. If a child element is a container element, like <g>, then its subtree is also processed/rendered or bypassed/not rendered.\n
\n
Note:\nThe display and visibility properties have no effect on <switch> element processing. In particular, setting display:none on a child has no effect on the true/false testing for <switch> processing.\n
",
"attrs": {
+ "requiredextensions": {
+ "url": "$MDN_URL$/web/svg/reference/element/switch#requiredextensions"
+ },
"systemlanguage": {
"url": "$MDN_URL$/web/svg/reference/element/switch#systemlanguage",
"status": [
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-a.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-a.json
index 4cc7dd171b22..c8040bab227e 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-a.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-a.json
@@ -1095,7 +1095,8 @@
"Edge": "133",
"Firefox": "142",
"FirefoxAndroid": "142",
- "Opera": "118"
+ "Opera": "118",
+ "Safari": "preview"
},
"doc": "The overallProgress read-only property of the Animation interface returns a number between 0 and 1 indicating the animation's overall progress towards its finished state. This is the overall progress across all of the animation's iterations, not each individual iteration.\n
overallProgress works consistently across all animations, regardless of the type of timeline."
},
@@ -9299,8 +9300,9 @@
"SafariIOS": "16.1"
},
"baseline": {
- "level": "LOW",
- "lowDate": "2023-04-11"
+ "level": "HIGH",
+ "lowDate": "2023-04-11",
+ "highDate": "2025-10-11"
},
"doc": "The CanvasRenderingContext2D.createConicGradient() method of the Canvas 2D API creates a gradient around a point with given coordinates.\n
This method returns a conic CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties.\n
\n
Note:\nGradient coordinates are global, i.e., relative to the current coordinate space. When applied to a shape, the coordinates are NOT relative to the shape's coordinates.\n
",
"parameters": {
@@ -10450,8 +10452,9 @@
"SafariIOS": "16"
},
"baseline": {
- "level": "LOW",
- "lowDate": "2023-04-11"
+ "level": "HIGH",
+ "lowDate": "2023-04-11",
+ "highDate": "2025-10-11"
},
"doc": "The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.\n
The radii of the corners can be specified in much the same way as the CSS border-radius property.\n
Like other methods that modify the current path, this method does not directly render anything.\nTo draw the rounded rectangle onto a canvas, you can use the fill() or stroke() methods.",
"parameters": {
@@ -16104,6 +16107,143 @@
},
"doc": "The read-only overrideColors property of the CSSFontPaletteValuesRule interface is a string containing a list of color index and color pair that are to be used instead. It is specified in the same format as the corresponding override-colors descriptor."
},
+ "cssfunctiondeclarations": {
+ "url": "$MDN_URL$/web/api/cssfunctiondeclarations",
+ "status": [
+ "Experimental",
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "139",
+ "ChromeAndroid": "139",
+ "Edge": "139",
+ "Opera": "123"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "
The CSSFunctionDeclarations interface of the CSS Object Model represents a consecutive run of CSS declarations included within a @function body.\n
This can include CSS custom properties, and the value of the results descriptor inside the @function body, but it doesn't include blocks such as @media at-rules that may be included. Such a block, included in the middle of a set of declarations, would cause the body contents to be broken up into separate CSSFunctionDeclarations objects, as seen in our Multiple CSSFunctionDeclarations demo."
+ },
+ "cssfunctiondeclarations.style": {
+ "url": "$MDN_URL$/web/api/cssfunctiondeclarations/style",
+ "status": [
+ "Experimental",
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "139",
+ "ChromeAndroid": "139",
+ "Edge": "139",
+ "Opera": "123"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "
The CSSFunctionDescriptors interface of the CSS Object Model represents the descriptors contained within a set of CSS declarations represented by a CSSFunctionDeclarations object.\n
The getParameters() method of the CSSFunctionRule interface returns an array of objects representing the custom function's parameters.",
+ "returns": "An array of objects containing the following properties:\n
The returnType property of the CSSFunctionRule interface returns a string representing the custom function's return type."
+ },
"cssgroupingrule": {
"url": "$MDN_URL$/web/api/cssgroupingrule",
"status": [
@@ -18352,7 +18492,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The CSSRule interface represents a single CSS rule. There are several types of rules which inherit properties from CSSRule.\n
"
},
"cssrule.csstext": {
"url": "$MDN_URL$/web/api/cssrule/csstext",
@@ -18888,7 +19028,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The CSSStyleDeclaration interface represents an object that is a CSS declaration block, and exposes style information and various style-related methods and properties.\n
A CSSStyleDeclaration object can be exposed using three different APIs:\n
\n
Via HTMLElement.style, which deals with the inline styles of a single element (e.g., <div style=\"…\">).
\n
Via the CSSStyleSheet API. For example, document.styleSheets[0].cssRules[0].style returns a CSSStyleDeclaration object on the first CSS rule in the document's first stylesheet.
\n
Via Window.getComputedStyle(), which exposes the CSSStyleDeclaration object as a read-only interface.
\n
"
+ "doc": "The CSSStyleDeclaration interface is the base class for objects that represent CSS declaration blocks with different supported sets of CSS style information:\n
The interface exposes style information and various style-related methods and properties.\nFor example, it provides getPropertyValue() for getting the value of a dash-named CSS property, such as border-top, which can't be directly accessed using dot notation because of the hyphens in its name.\n
\n
Note:\nEarlier versions of the specification used CSSStyleDeclaration to represent all CSS declaration blocks, and some browsers and browser versions may still do so (check the browser compatibility tables for the above APIs).\nGenerally the same website code will be functional in both old and new versions, but some properties returned in a CSSStyleDeclaration may not be relevant in a particular context.\n
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
When setting, it invokes CSSStyleDeclaration.setProperty() with float as the first argument, and the given value as the second argument. The given value must be a valid value for the float property."
},
@@ -19132,6 +19267,32 @@
"NoModificationAllowedError DOMException": "Thrown if the property or declaration block is read only."
}
},
+ "cssstyleproperties": {
+ "url": "$MDN_URL$/web/api/cssstyleproperties",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Firefox": "144",
+ "FirefoxAndroid": "144",
+ "Safari": "26",
+ "SafariIOS": "26"
+ },
+ "doc": "The CSSStyleProperties interface of the CSS Object Model (CSSOM) represents inline or computed styles available on an element, or the styles associated with a CSS style rule."
+ },
+ "cssstyleproperties.cssfloat": {
+ "url": "$MDN_URL$/web/api/cssstyleproperties/cssfloat",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Firefox": "144",
+ "FirefoxAndroid": "144",
+ "Safari": "26",
+ "SafariIOS": "26"
+ },
+ "doc": "The cssFloat property of the CSSStyleProperties interface returns the CSS float property.\n
This is the result of invoking getPropertyValue() on the object with float as an argument.\n
When setting, it invokes setProperty() with float as the first argument, and the given value as the second argument.\nThe given value must be a valid value for the float property."
+ },
"cssstylerule": {
"url": "$MDN_URL$/web/api/cssstylerule",
"status": [
@@ -19279,7 +19440,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The read-only style property is the CSSStyleDeclaration interface for the declaration block of the CSSStyleRule."
+ "doc": "The read-only style property is a CSSStyleProperties object that represents the inline styles of a style rule (CSSStyleRule).\n
Note that properties that are present on the object for all CSS properties supported by the browser.\nThe properties that are not defined inline in the corresponding CSS declaration are set to the empty string (\"\")."
},
"cssstylerule.stylemap": {
"url": "$MDN_URL$/web/api/cssstylerule/stylemap",
@@ -22481,7 +22642,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.\n
The DOM tree includes elements such as <body> and <table>, among many others. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.\n
The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g., HTML, XML, SVG, …), a larger API is available: HTML documents, served with the \"text/html\" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface."
+ "doc": "The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.\n
The DOM tree includes elements such as <body> and <table>, among many others. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document.\n
The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g., HTML, XML, SVG, …), a larger API is available: HTML documents, served with the \"text/html\" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface."
},
"document.activeelement": {
"url": "$MDN_URL$/web/api/document/activeelement",
@@ -22503,7 +22664,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The activeElement read-only property of the Document interface returns the Element within the DOM that is receiving keyboard events such as keydown and keyup. This is usually analogous to the focused element.\n
Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on Safari, following the behavior of macOS, elements that aren't text input elements are not focusable by default, unless the \"Full Keyboard Access\" setting is enabled in System Preferences.\n
Typically a user can press the Tab key to move the focus around the page among focusable elements, and use keyboard gestures such as Space or Enter to simulate clicks on the focused element.\n
\n
Note:\nFocus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document). You can get the current selection using window.getSelection().\n
"
+ "doc": "The activeElement read-only property of the Document interface returns the Element within the DOM that is receiving keyboard events such as keydown and keyup. This is usually analogous to the focused element.\n
Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on Safari, following the behavior of macOS, elements that aren't text input elements are not focusable by default, unless the \"Full Keyboard Access\" setting is enabled in System Settings.\n
Typically a user can press the Tab key to move the focus around the page among focusable elements, and use keyboard gestures such as Space or Enter to simulate clicks on the focused element.\n
\n
Note:\nFocus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document). You can get the current selection using window.getSelection().\n
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
\n
The ariaNotify() method of the Document interface specifies that a given string of text should be announced by a screen reader if available and activated.",
"parameters": {
"announcement": "A string specifying the text to be announced.",
@@ -23209,7 +23373,7 @@
"doc": "The Document.createNodeIterator() method returns a new NodeIterator object.",
"parameters": {
"root": "The root node at which to begin the NodeIterator's traversal.",
- "whatToShow": "An optional unsigned long representing a bitmask created by\ncombining the constant properties of NodeFilter.\nIt is a convenient way of filtering for certain types of node. It defaults to\n0xFFFFFFFF representing the SHOW_ALL constant.\n
\n\n
\n
Constant
\n
Numerical value
\n
Description
\n
\n\n\n
\n
NodeFilter.SHOW_ALL
\n
4294967295 (that is the max value of unsigned long)
\n
Shows all nodes.
\n
\n
\n
NodeFilter.SHOW_ATTRIBUTE
\n
2
\n
Shows attribute Attr nodes. This is meaningful only when creating a TreeWalker with an Attr node as its root. In this case, it means that the attribute node will appear in the first position of the iteration or traversal. Since attributes are never children of other nodes, they do not appear when traversing over the document tree.
",
+ "whatToShow": "An optional unsigned long representing a bitmask created by\ncombining the constant properties of NodeFilter.\nIt is a convenient way of filtering for certain types of node. It defaults to\n0xFFFFFFFF representing the SHOW_ALL constant.\n
Note:\nThe NodeFilter.SHOW_ATTRIBUTE constant is only effective when the root is an attribute node. Since the parent of any Attr node is always null, TreeWalker.nextNode() and TreeWalker.previousNode() will never return an Attr node. To traverse Attr nodes, use Element.attributes instead.\n
",
"filter": "A callback function or an object with an acceptNode() method. The function or method will be called for each node in the subtree based at root which is accepted as included by the whatToShow flag to determine whether or not to include it in the list of iterable nodes. The method should return one of NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT, or NodeFilter.FILTER_SKIP. See the Example.\n
For createNodeIterator, the values NodeFilter.FILTER_REJECT and NodeFilter.FILTER_SKIP are equivalent. This node will not be included in the list of iterable nodes, but its children will continue to be iterated over."
},
"returns": "A new NodeIterator object."
@@ -23381,7 +23545,7 @@
"doc": "The Document.createTreeWalker() creator method returns a newly created TreeWalker object.",
"parameters": {
"root": "A Node representing the root of the TreeWalker object, which is the initial value of TreeWalker.currentNode.",
- "whatToShow": "An unsigned long representing a bitmask created by combining the constant properties of NodeFilter. It is a convenient way of filtering for certain types of node. It defaults to 0xFFFFFFFF, representing the NodeFilter.SHOW_ALL constant.\n
",
+ "whatToShow": "An unsigned long representing a bitmask created by combining the constant properties of NodeFilter. It is a convenient way of filtering for certain types of node. It defaults to 0xFFFFFFFF, representing the NodeFilter.SHOW_ALL constant.\n
Note:\nThe NodeFilter.SHOW_ATTRIBUTE constant is only effective when the root is an attribute node. Since the parent of any Attr node is always null, TreeWalker.nextNode() and TreeWalker.previousNode() will never return an Attr node. To traverse Attr nodes, use Element.attributes instead.\n
",
"filter": "A callback function or an object with an acceptNode() method, which returns NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT, or NodeFilter.FILTER_SKIP. The function or method will be called for each node in the subtree based at root which is accepted as included by the whatToShow flag to determine whether or not to include it in the list of iterable nodes:\n
\n
If the return value is NodeFilter.FILTER_ACCEPT, this node is included.
\n
If the return value is NodeFilter.FILTER_REJECT, any node in the subtree based at this node is not included.
\n
If the return value is NodeFilter.FILTER_SKIP, this node is not included.
\n
"
},
"returns": "A new TreeWalker object."
@@ -25022,7 +25186,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.\n
When startViewTransition() is invoked, a sequence of steps is followed as explained in The view transition process.",
"parameters": {
@@ -27120,7 +27285,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The DOMParser interface provides\nthe ability to parse XML or HTML source code from a\nstring into a DOM Document.\n
You can perform the opposite operation—converting a DOM tree into XML or HTML\nsource—using the XMLSerializer interface.\n
In the case of an HTML document, you can also replace portions of the DOM with new DOM\ntrees built from HTML by setting the value of the Element.innerHTML and\nouterHTML properties. These properties can also be\nread to fetch HTML fragments corresponding to the corresponding DOM subtree.\n
Note that XMLHttpRequest can parse XML and HTML directly\nfrom a URL-addressable resource, returning a Document in its\nresponse property.\n
\n
Note:\nBe aware that block-level elements\nlike <p> will be automatically closed if another\nblock-level element is nested inside and therefore parsed before the closing </p> tag.\n
"
+ "doc": "The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document.\n
You can perform the opposite operation—converting a DOM tree into XML or HTML source—using the XMLSerializer interface.\n
In the case of an HTML document, you can also replace portions of the DOM with new DOM trees built from HTML by setting the value of the Element.innerHTML and outerHTML properties. These properties can also be read to fetch HTML fragments corresponding to the corresponding DOM subtree.\n
Note that XMLHttpRequest can parse XML and HTML directly from a URL-addressable resource, returning a Document in its response property.\n
\n
Note:\nBe aware that block-level elements like <p> will be automatically closed if another block-level element is nested inside and therefore parsed before the closing </p> tag.\n
"
},
"domparser.domparser": {
"url": "$MDN_URL$/web/api/domparser/domparser",
@@ -27165,12 +27330,15 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The parseFromString() method of the DOMParser interface parses a string containing either HTML or XML, returning an HTMLDocument or an XMLDocument.\n
Warning:\nThis method parses its input as HTML, writing the result into the DOM.\nAPIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.\n
The parseFromString() method of the DOMParser interface parses an input containing either HTML or XML, returning a Document with the type given in the contentType property.\n
",
"parameters": {
- "string": "The string to be parsed. It must contain either an\nHTML, xml, XHTML, or\nsvg document.",
- "mimeType": "A string. This string determines whether the XML parser or the HTML parser is used to parse the string. Valid values are:\n
\n
text/html
\n
text/xml
\n
application/xml
\n
application/xhtml+xml
\n
image/svg+xml
\n
\n
A value of text/html will invoke the HTML parser, and the method will return an HTMLDocument. Any <script> element gets marked non-executable, and the contents of <noscript> are parsed as markup.\n
The other valid values (text/xml, application/xml, application/xhtml+xml, and image/svg+xml) are functionally equivalent. They all invoke the XML parser, and the method will return a XMLDocument.\n
Any other value is invalid and will cause a TypeError to be thrown."
+ "input": "A TrustedHTML or string instance defining HTML to be parsed.\nThe markup must contain either an HTML, XML, XHTML, or SVG document.",
+ "mimeType": "A string that specifies whether the XML parser or the HTML parser is used to parse the string.\n
Note:\nThe browser may actually return an HTMLDocument or XMLDocument object.\nThese derive from Document and add no attributes: they are essentially equivalent.\n
",
+ "throws": {
+ "TypeError": "This is thrown when:\n
\n
mimeType is passed a value that is not one of the allowed values.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
\n
The ariaNotify() method of the Element interface specifies that a given string of text should be announced by a screen reader if available and activated.",
"parameters": {
"announcement": "A string specifying the text to be announced.",
@@ -3379,7 +3382,7 @@
"doc": "
The setHTML() method of the Element interface provides an XSS-safe method to parse and sanitize a string of HTML into a DocumentFragment, and then insert it into the DOM as a subtree of the element.",
"parameters": {
"input": "A string defining HTML to be sanitized and injected into the element.",
- "options": "An options object with the following optional parameters:\n
A Sanitizer or SanitizerConfig object which defines what elements of the input will be allowed or removed, or the string \"default\" for the default configuration.\nNote that generally a \"Sanitizer is expected to be more efficient than a SanitizerConfig if the configuration is to reused.\nIf not specified, the default sanitizer configuration is used.\n
\n
"
+ "options": "An options object with the following optional parameters:\n
A Sanitizer or SanitizerConfig object which defines what elements of the input will be allowed or removed, or the string \"default\" for the default configuration.\nNote that generally a Sanitizer is expected to be more efficient than a SanitizerConfig if the configuration is to be reused.\nIf not specified, the default sanitizer configuration is used.\n
The ExtendableCookieChangeEvent interface of the Cookie Store API is the event type passed to cookiechange event fired at the ServiceWorkerGlobalScope when any cookie changes occur which match the service worker's cookie change subscription list. A cookie change event consists of a cookie and a type (either \"changed\" or \"deleted\").\n
Cookie changes that cause the ExtendableCookieChangeEvent to be dispatched are:\n
\n
A cookie is newly created and not immediately removed, or if a cookies is replaced.\nIn this case type is \"changed\".
\n
A cookie is newly created and immediately removed.\nIn this case type is \"deleted\"
\n
A cookie is removed. In this case type is \"deleted\".
The ExtendableCookieChangeEvent() constructor creates a new ExtendableCookieChangeEvent object\nwhich is the event type passed to cookiechange event fired at the ServiceWorkerGlobalScope when any cookie changes occur which match the service worker's cookie change subscription list.\nThis constructor is called by the browser when a change event occurs.\n
\n
Note:\nThis event constructor is generally not needed for production websites. It's primary use is for tests that require an instance of this event.\n
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
\n
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
\n
The isFallbackAdapter read-only property of the\nGPUAdapter interface returns true if the adapter is a fallback adapter, and false if not."
+ "doc": "
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
\n
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
\n
The isFallbackAdapter read-only property of the\nGPUAdapter interface returns true if the adapter is a fallback adapter, and false if not.\n
The createBindGroup() method of the\nGPUDevice interface creates a GPUBindGroup based on a GPUBindGroupLayout that defines a set of resources to be bound together in a group and how those resources are used in shader stages.",
"parameters": {
- "descriptor": "An object containing the following properties:\n
An array of entry objects describing the resources to expose to the shader. There will be one for each corresponding entry described by the GPUBindGroupLayout referenced in layout. Each entry object has the following properties:\n
A number representing a unique identifier for this resource binding, which matches the binding value of a corresponding GPUBindGroupLayout entry. In addition, it matches the n index value of the corresponding @binding(n) attribute in the shader (GPUShaderModule) used in the related pipeline.\n
GPUTextureView; can be used in place of a GPUExternalTexture provided it is compatible (a 2D format with a single subresource, that is, dimension: \"2d\").
An array of entry objects describing the resources to expose to the shader. There will be one for each corresponding entry described by the GPUBindGroupLayout referenced in layout. Each entry object has the following properties:\n
A number representing a unique identifier for this resource binding, which matches the binding value of a corresponding GPUBindGroupLayout entry. In addition, it matches the n index value of the corresponding @binding(n) attribute in the shader (GPUShaderModule) used in the related pipeline.\n
GPUTextureView: Can be used in place of a GPUExternalTexture provided it is compatible (a 2D format with a single subresource, that is, dimension: \"2d\").
\n
GPUTexture: Can be used in place of a GPUTextureView, provided a default view is desired. When used in this context, GPUTexture is equivalent to a GPUTextureView object created using a GPUTexture.createView() call with no argument specified.
The createBuffer() method of the\nGPUDevice interface creates a GPUBuffer in which to store raw data to use in GPU operations.",
"parameters": {
- "descriptor": "An object containing the following properties:\n
A boolean. If set to true, the buffer will be mapped upon creation, meaning that you can set the values inside the buffer immediately by calling GPUBuffer.getMappedRange(). The default value is false.\n
Note that it is valid to set mappedAtCreation: true so you can set the buffer's initial data, even if the GPUBufferUsage.MAP_READ or GPUBufferUsage.MAP_WRITE usage flags are not set.\n
Note that multiple possible usages can be specified by separating values with bitwise OR, for example: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE.\n
\n
"
+ "descriptor": "An object containing the following properties:\n
A boolean. If set to true, the buffer will be mapped upon creation, meaning that you can set the values inside the buffer immediately by calling GPUBuffer.getMappedRange(). The default value is false.\n
Note that it is valid to set mappedAtCreation: true so you can set the buffer's initial data, even if the GPUBufferUsage.MAP_READ or GPUBufferUsage.MAP_WRITE usage flags are not set.\n
Note that multiple possible usages can be specified by separating values with bitwise OR, for example: GPUBufferUsage.COPY_SRC | GPUBufferUsage.MAP_WRITE.\n
The createPipelineLayout() method of the\nGPUDevice interface creates a GPUPipelineLayout that defines the GPUBindGroupLayouts used by a pipeline. GPUBindGroups used with the pipeline during command encoding must have compatible GPUBindGroupLayouts.",
"parameters": {
- "descriptor": "An object containing the following properties:\n
The createTexture() method of the\nGPUDevice interface creates a GPUTexture in which to store 1D, 2D, or 3D arrays of data, such as images, to use in GPU rendering operations.",
"parameters": {
- "descriptor": "An object containing the following properties:\n
An enumerated value specifying the format of the texture. See the Texture formats section of the specification for all the possible values.\n
\n
Note:\n
\n
The depth32float-stencil8feature needs to be enabled to create depth32float-stencil8-format GPUTextures.
\n
The texture-compression-bc feature needs to be enabled to create two-dimensional BC compressed GPUTextures: bc1-rgba-unorm, bc1-rgba-unorm-srgb, bc2-rgba-unorm, bc2-rgba-unorm-srgb, bc3-rgba-unorm, bc3-rgba-unorm-srgb, bc4-r-unorm, bc4-r-snorm, bc5-rg-unorm, bc5-rg-snorm, bc6h-rgb-ufloat, bc6h-rgb-float, bc7-rgba-unorm, and bc7-rgba-unorm-srgb formats.
\n
The texture-compression-astc feature needs to be enabled to create two-dimensional ASTC compressed GPUTextures: astc-4x4-unorm, astc-4x4-unorm-srgb, astc-5x4-unorm, astc-5x4-unorm-srgb, astc-5x5-unorm, astc-5x5-unorm-srgb, astc-6x5-unorm, astc-6x5-unorm-srgb, astc-6x6-unorm, astc-6x6-unorm-srgb, astc-8x5-unorm, astc-8x5-unorm-srgb, astc-8x6-unorm, astc-8x6-unorm-srgb, astc-8x8-unorm, astc-8x8-unorm-srgb, astc-10x5-unorm, astc-10x5-unorm-srgb, astc-10x6-unorm, astc-10x6-unorm-srgb, astc-10x8-unorm, astc-10x8-unorm-srgb, astc-10x10-unorm, astc-10x10-unorm-srgb, astc-12x10-unorm, astc-12x10-unorm-srgb, and astc-12x12-unorm``astc-12x12-unorm-srgb formats.
\n
The texture-compression-etc2 feature needs to be enabled to create two-dimensional ETC2 compressed GPUTextures: etc2-rgb8unorm, etc2-rgb8unorm-srgb, etc2-rgb8a1unorm, etc2-rgb8a1unorm-srgb, etc2-rgba8unorm, etc2-rgba8unorm-srgb, eac-r11unorm, eac-r11snorm, eac-rg11unorm, and eac-rg11snorm formats.
A number specifying the texture's sample count. To be valid, the value must be 1 or 4. If omitted, this defaults to 1. A value higher than 1 indicates a multi-sampled texture.\n
An object or array specifying the width, height, and depth/array layer count of the texture. The width value must always be specified, while the height and depth/array layer count values are optional and will default to 1 if omitted.\n
For example, you can pass an array like [16, 16, 2], or its equivalent object { width: 16, height: 16, depthOrArrayLayers: 2 }.\n
Note that multiple possible usages can be specified by separating values with bitwise OR, for example: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT.\n
\n
Note:\n
\n
The bgra8unorm-storagefeature needs to be enabled to specify STORAGE_BINDING usage for a bgra8unorm-formatGPUTexture.
\n
The rg11b10ufloat-renderablefeature needs to be enabled to specify RENDER_ATTACHMENT usage for a rg11b10ufloat-formatGPUTexture, as well as its blending and multisampling.
An array of enumerated values specifying other texture formats permitted when calling GPUTexture.createView() on this texture, in addition to the texture format specified in its format value.\n
\n
"
+ "descriptor": "An object containing the following properties:\n
An enumerated value specifying the format of the texture. See the Texture formats section of the specification for all the possible values.\n
\n
Note:\n
\n
The depth32float-stencil8feature needs to be enabled to create depth32float-stencil8-format GPUTextures.
\n
The texture-compression-bc feature needs to be enabled to create two-dimensional (dimension: \"2d\") BC compressed GPUTextures: bc1-rgba-unorm, bc1-rgba-unorm-srgb, bc2-rgba-unorm, bc2-rgba-unorm-srgb, bc3-rgba-unorm, bc3-rgba-unorm-srgb, bc4-r-unorm, bc4-r-snorm, bc5-rg-unorm, bc5-rg-snorm, bc6h-rgb-ufloat, bc6h-rgb-float, bc7-rgba-unorm, and bc7-rgba-unorm-srgb formats.
\n
The texture-compression-bc and texture-compression-bc-sliced-3d features need to be enabled to create three-dimensional BC compressed GPUTextures (the same format values specified in the previous bullet, but with dimension set to 3d).
\n
The texture-compression-astc feature needs to be enabled to create two-dimensional (dimension: \"2d\") ASTC compressed GPUTextures: astc-4x4-unorm, astc-4x4-unorm-srgb, astc-5x4-unorm, astc-5x4-unorm-srgb, astc-5x5-unorm, astc-5x5-unorm-srgb, astc-6x5-unorm, astc-6x5-unorm-srgb, astc-6x6-unorm, astc-6x6-unorm-srgb, astc-8x5-unorm, astc-8x5-unorm-srgb, astc-8x6-unorm, astc-8x6-unorm-srgb, astc-8x8-unorm, astc-8x8-unorm-srgb, astc-10x5-unorm, astc-10x5-unorm-srgb, astc-10x6-unorm, astc-10x6-unorm-srgb, astc-10x8-unorm, astc-10x8-unorm-srgb, astc-10x10-unorm, astc-10x10-unorm-srgb, astc-12x10-unorm, astc-12x10-unorm-srgb, astc-12x12-unorm, and astc-12x12-unorm-srgb formats.
\n
The texture-compression-astc and texture-compression-astc-sliced-3d features need to be enabled to create three-dimensional BC compressed GPUTextures (the same format values specified in the previous bullet, but with dimension set to 3d).
\n
The texture-compression-etc2 feature needs to be enabled to create two-dimensional ETC2 compressed GPUTextures: etc2-rgb8unorm, etc2-rgb8unorm-srgb, etc2-rgb8a1unorm, etc2-rgb8a1unorm-srgb, etc2-rgba8unorm, etc2-rgba8unorm-srgb, eac-r11unorm, eac-r11snorm, eac-rg11unorm, and eac-rg11snorm formats.
\n
See the Tier 1 and Tier 2 texture formats section for more information about those texture format sets and the requirements to create them.
A number specifying the texture's sample count. To be valid, the value must be 1 or 4. If omitted, this defaults to 1. A value higher than 1 indicates a multi-sampled texture.\n
An object or array specifying the width, height, and depth/array layer count of the texture. The width value must always be specified, while the height and depth/array layer count values are optional and will default to 1 if omitted.\n
For example, you can pass an array like [16, 16, 2], or its equivalent object { width: 16, height: 16, depthOrArrayLayers: 2 }.\n
Note that multiple possible usages can be specified by separating values with bitwise OR, for example: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT.\n
\n
Note:\n
\n
The bgra8unorm-storagefeature needs to be enabled to specify STORAGE_BINDING usage for a bgra8unorm-formatGPUTexture.
\n
The rg11b10ufloat-renderablefeature needs to be enabled to specify RENDER_ATTACHMENT usage for a rg11b10ufloat-formatGPUTexture, as well as its blending and multisampling.
An array of enumerated values specifying other texture formats permitted when calling GPUTexture.createView() on this texture, in addition to the texture format specified in its format value.\n
Note that if the inert attribute is unspecified, the element itself may still inherit inertness from its parent. However, that inherited inertness is not reflected by this property's value."
+ "doc": "The HTMLElement property inert reflects the value of the element's inert attribute. It is a boolean value that, when present, makes the browser \"ignore\" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to \"trap\" the focus inside the modal when it's visible.\n
Note that if the inert attribute is unspecified, the element itself may still inherit inertness from its parent. However, that inherited inertness is not reflected by this property's value. Explicitly setting the property to false cannot revert inertness inherited from the parent."
},
"htmlelement.innertext": {
"url": "$MDN_URL$/web/api/htmlelement/innertext",
@@ -20489,7 +19913,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The read-only style property of the HTMLElement returns the inline style of an element in the form of a live CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned only for the attributes that are defined in the element's inline style attribute.\n
This property is read-only, meaning it is not possible to assign a CSSStyleDeclaration object to it. Nevertheless, it is possible to set an inline style by assigning a string directly to the style property. In this case the string is forwarded to CSSStyleDeclaration.cssText. Using style in this manner will completely overwrite all inline styles on the element.\n
Therefore, to add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleDeclaration object. For example, you can write element.style.backgroundColor = \"red\".\n
A style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null.\n
\n
Note:\nCSS property names are converted to JavaScript identifier with these rules:\n
\n
If the property is made of one word, it remains as it is: height stays as is (in lowercase). As float is a reserved keyword in JavaScript, this property name was historically converted to cssFloat. All modern browsers now support the direct use of float in JavaScript to access the float CSS property, but cssFloat is used in older browsers and is still supported as an alias in modern browsers.
\n
If the property is made of several words, separated by dashes, the dashes are removed and it is converted to camel case: background-attachment becomes backgroundAttachment.
\n
\n
The style property has the same priority in the CSS cascade as an inline style declaration set via the style attribute.\n
"
+ "doc": "The read-only style property of the HTMLElement returns the inlinestyle of an element in the form of a live CSSStyleProperties object.\nThis object can be used to get and set the inline styles of an element."
},
"htmlelement.tabindex": {
"url": "$MDN_URL$/web/api/htmlelement/tabindex",
@@ -22138,7 +21562,10 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The srcdoc property of the HTMLIFrameElement specifies the content of the page."
+ "doc": "
\n
Warning:\nThis property parses its input as HTML, writing the result into the frame's DOM.\nAPIs like this are known as injection sinks, and are potentially a vector for cross-site-scripting (XSS) attacks, if the input originally came from an attacker.\n
The srcdoc property of the HTMLIFrameElement interface gets or sets the inline HTML markup of the frame's document.\n
This reflects the srcdoc attribute of the <iframe>.",
+ "throws": {
+ "TypeError": "Thrown if the property is set to a string when Trusted Types are enforced by a CSP and no default policy is defined."
+ }
},
"htmliframeelement.width": {
"url": "$MDN_URL$/web/api/htmliframeelement/width",
@@ -32371,13 +31798,15 @@
},
"doc": "The getAll() method of the IDBIndex\ninterface retrieves all objects that are inside the index.\n
There is a performance cost associated with looking at the value property\nof a cursor, because the object is created lazily. To use a feature\nlike getAll(), the browser has to create all the objects at once. If you\nare just interested in looking at each of the keys, for instance, it is more efficient\nto use a cursor. If you are trying to get an\narray of all the objects in an object store, though, you should\nuse getAll().",
"parameters": {
- "query": "A key or an IDBKeyRange identifying the records to retrieve. If this\nvalue is null or missing, the browser will use an unbound key range.",
- "count": "The number of records to return. If this value exceeds the number of records in the\nquery, the browser will only retrieve the queried records. If it is lower than\n0 or greater than 2^32 - 1 a TypeError\nexception will be thrown."
+ "query": "A key or an IDBKeyRange identifying the records to retrieve. If this value is null or not specified, the browser will use an unbound key range.
See the earlier query definition.",
+ "count": "The number of records to return. If this value exceeds the number of records in the\nquery, the browser will only retrieve the queried records. If it is lower than\n0 or greater than 2^32 - 1 a TypeError\nexception will be thrown.
See the earlier count definition.",
+ "direction": "An enumerated value specifying the direction in which the objects are traversed. Possible values are:\n
The objects are traversed from the beginning, in increasing key order. For every key with duplicate objects, only the object closest to the start is yielded.\n
The objects are traversed from the end, in decreasing key order. For every key with duplicate objects, only the object closest to the start is yielded.\n
\n
"
},
"returns": "An IDBRequest object on which subsequent events related to this operation are fired.\n
If the operation is successful, the value of the request's result property is an Array of the values of all records matching the given query, up to the value of count, if count was supplied.",
"throws": {
"TransactionInactiveError DOMException": "Thrown if this IDBIndex's transaction is inactive.",
- "InvalidStateError DOMException": "Thrown if the IDBIndex has been deleted or removed."
+ "InvalidStateError DOMException": "Thrown if the IDBIndex has been deleted or removed.",
+ "TypeError DOMException": "Thrown if the count parameter is not between 0 and 2^32 - 1, inclusive."
}
},
"idbindex.getallkeys": {
@@ -32402,13 +31831,42 @@
},
"doc": "The getAllKeys() method of the IDBIndex\ninterface asynchronously retrieves the primary keys of all objects inside the index,\nsetting them as the result of the request object.",
"parameters": {
- "query": "A key or an IDBKeyRange identifying the keys to retrieve. If this\nvalue is null or missing, the browser will use an unbound key range.",
- "count": "The number records to return. If this value exceeds the number of records in the\nquery, the browser will only retrieve the first item. If it is lower than\n0 or greater than 2^32 - 1 a TypeError\nexception will be thrown."
+ "query": "A key or an IDBKeyRange identifying the keys to retrieve. If this value is null or not specified, the browser will use an unbound key range.
See the earlier query definition.",
+ "count": "The number records to return. If this value exceeds the number of records in the\nquery, the browser will only retrieve the first item. If it is lower than\n0 or greater than 2^32 - 1 a TypeError\nexception will be thrown.
See the earlier count definition.",
+ "direction": "An enumerated value specifying the direction in which the objects are traversed. Possible values are:\n
The objects are traversed from the end, in decreasing key order. Keys duplicated across multiple objects are only yielded once.\n
\n
"
},
"returns": "An IDBRequest object on which subsequent events related to this operation are fired.\n
If the operation is successful, the value of the request's result property is an Array of the keys for all records matching the given query, up to the value of count, if count was supplied.",
"throws": {
"TransactionInactiveError DOMException": "Thrown if this IDBIndex's transaction is inactive.",
- "InvalidStateError DOMException": "Thrown if the IDBIndex has been deleted or removed."
+ "InvalidStateError DOMException": "Thrown if the IDBIndex has been deleted or removed.",
+ "TypeError DOMException": "Thrown if the count parameter is not between 0 and 2^32 - 1, inclusive."
+ }
+ },
+ "idbindex.getallrecords": {
+ "url": "$MDN_URL$/web/api/idbindex/getallrecords",
+ "status": [
+ "Experimental",
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "141",
+ "ChromeAndroid": "141",
+ "Edge": "141"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "The getAllRecords() method of the IDBIndex\ninterface retrieves all records (including index keys, primary keys, and values) from the index.\n
getAllRecords() effectively combines the functionality of getAllKeys() and getAll() by enumerating both primary keys and values at the same time. This combined operation enables certain data retrieval patterns to be significantly faster than alternatives such as iteration with cursors.",
+ "parameters": {
+ "query": "A key or an IDBKeyRange identifying the records to retrieve. If this value is null or not specified, the browser will use an unbound key range.",
+ "count": "The number of records to return. If this value exceeds the number of records in the query, the browser will retrieve only the queried records. If the value is less than 0 or greater than 2^32 - 1, a TypeError exception will be thrown.",
+ "direction": "An enumerated value specifying the direction in which the records are traversed. Possible values are:\n
The records are traversed from the beginning, in increasing key order. For every key with duplicate records, only the record closest to the start is yielded.\n
The records are traversed from the end, in decreasing key order. For every key with duplicate records, only the record closest to the start is yielded.\n
\n
"
+ },
+ "returns": "An IDBRequest object on which subsequent events related to this operation are fired.\n
If the operation is successful, the value of the request's result property is an array of objects representing all the records that match the given query, up to the number specified by count (if provided).\n
",
+ "throws": {
+ "InvalidStateError DOMException": "Thrown if the IDBIndex or its associated IDBObjectStore has been deleted or removed.",
+ "TransactionInactiveError DOMException": "Thrown if this IDBIndex's transaction is inactive.",
+ "TypeError DOMException": "Thrown if the count parameter is not between 0 and 2^32 - 1, inclusive."
}
},
"idbindex.getkey": {
@@ -33188,15 +32646,16 @@
},
"doc": "The getAll() method of the\nIDBObjectStore interface returns an IDBRequest object\ncontaining all objects in the object store matching the specified parameter or all\nobjects in the store if no parameters are given.\n
If a value is successfully found, then a structured clone of it is created and set as\nthe result of the request object.\n
This method produces the same result for:\n
\n
a record that doesn't exist in the database
\n
a record that has an undefined value
\n
\n
To tell these situations apart, you either call\n
\n
the openCursor() method with the same\nkey. That method provides a cursor if the record exists, and no cursor if it does not.
\n
the count() method with the same key, which\nwill return 1 if the row exists and 0 if it doesn't.
\n",
"parameters": {
- "query": "A key or IDBKeyRange to be queried. If nothing is passed, this will\ndefault to a key range that selects all the records in this object store.",
- "count": "Specifies the number of values to return if more than one is found. If it is lower\nthan 0 or greater than 2^32 - 1 a\nTypeError exception will be thrown."
+ "query": "A key or IDBKeyRange to be queried. If this value is not specified, this will\ndefault to a key range that selects all the records in this object store.
See the earlier query definition.",
+ "count": "Specifies the number of values to return if more than one is found. If it is lower\nthan 0 or greater than 2^32 - 1 a\nTypeError exception will be thrown.
See the earlier count definition.",
+ "direction": "An enumerated value specifying the direction in which the objects are traversed. Possible values are:\n
The objects are traversed from the beginning, in increasing key order. This will yield the same objects as next, because duplicate keys are not allowed in IDBObjectStores.\n
The objects are traversed from the end, in decreasing key order. This will yield the same objects as prev, because duplicate keys are not allowed in IDBObjectStores.\n
\n
"
},
"returns": "An IDBRequest object on which subsequent events related to this operation are fired.\n
If the operation is successful, the value of the request's result property is an Array of the values of all records matching the given query, up to the value of count, if count was supplied.",
"throws": {
"TransactionInactiveError DOMException": "Thrown if this IDBObjectStore's transaction is inactive.",
"DataError DOMException": "Thrown if key or key range provided contains an invalid key or is null.",
"InvalidStateError DOMException": "Thrown if the IDBObjectStore has been deleted or removed.",
- "TypeError": "Thrown if the count parameter is not between 0 and 2^32 - 1 included."
+ "TypeError DOMException": "Thrown if the count parameter is not between 0 and 2^32 - 1, inclusive."
}
},
"idbobjectstore.getallkeys": {
@@ -33221,14 +32680,43 @@
},
"doc": "The getAllKeys() method of the IDBObjectStore\ninterface returns an IDBRequest object retrieves record keys for all\nobjects in the object store matching the specified parameter or all objects in the\nstore if no parameters are given.\n
If a value is successfully found, then a structured clone of it is created and set as\nthe result of the request object.\n
This method produces the same result for:\n
\n
a record that doesn't exist in the database
\n
a record that has an undefined value
\n
\n
To tell these situations apart, you need to call the\nopenCursor() method with the same key. That\nmethod provides a cursor if the record exists, and no cursor if it does not.",
"parameters": {
- "query": "A value that is or resolves to an IDBKeyRange.",
- "count": "Specifies the number of values to return if more than one is found. If it is lower\nthan 0 or greater than 2^32 - 1 a\nTypeError exception will be thrown."
+ "query": "A value that is or resolves to an IDBKeyRange. If this value is not specified, this will\ndefault to a key range that selects all the records in this object store.
See the earlier query definition.",
+ "count": "Specifies the number of values to return if more than one is found. If it is lower\nthan 0 or greater than 2^32 - 1 a\nTypeError exception will be thrown.
See the earlier count definition.",
+ "direction": "An enumerated value specifying the direction in which the objects are traversed. Possible values are:\n
The objects are traversed from the beginning, in increasing key order. This will yield the same keys as next, because duplicate keys are not allowed in IDBObjectStores.\n
The objects are traversed from the end, in decreasing key order. This will yield the same keys as prev, because duplicate keys are not allowed in IDBObjectStores.\n
\n
"
},
"returns": "An IDBRequest object on which subsequent events related to this operation are fired.\n
If the operation is successful, the value of the request's result property is an Array of the keys for all records matching the given query, up to the value of count, if count was supplied.",
"throws": {
"TransactionInactiveError DOMException": "Thrown if this IDBObjectStore's transaction is inactive.",
"DataError DOMException": "Thrown if the key or key range provided contains an invalid key or is null.",
- "InvalidStateError DOMException": "Thrown if the IDBObjectStore has been deleted or removed."
+ "InvalidStateError DOMException": "Thrown if the IDBObjectStore has been deleted or removed.",
+ "TypeError DOMException": "Thrown if the count parameter is not between 0 and 2^32 - 1, inclusive."
+ }
+ },
+ "idbobjectstore.getallrecords": {
+ "url": "$MDN_URL$/web/api/idbobjectstore/getallrecords",
+ "status": [
+ "Experimental",
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "141",
+ "ChromeAndroid": "141",
+ "Edge": "141"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "The getAllRecords() method of the IDBObjectStore\ninterface retrieves all records (including primary keys and values) from the object store.\n
getAllRecords() effectively combines the functionality of getAllKeys() and getAll() by enumerating both primary keys and values at the same time. This combined operation enables certain data retrieval patterns to be significantly faster than alternatives such as iteration with cursors.",
+ "parameters": {
+ "query": "A key or an IDBKeyRange identifying the records to retrieve. If this value is null or not specified, the browser will use an unbound key range.",
+ "count": "The number of records to return. If this value exceeds the number of records in the query, the browser will retrieve only the queried records. If the value is less than 0 or greater than 2^32 - 1, a TypeError exception will be thrown.",
+ "direction": "An enumerated value specifying the direction in which the records are traversed, which in turn defines the order in which they are returned. Possible values are:\n
The records are traversed from the beginning, in increasing key order. This will yield the same records as next, because duplicate keys are not allowed in IDBObjectStores.\n
The records are traversed from the end, in decreasing key order. This will yield the same records as prev, because duplicate keys are not allowed in IDBObjectStores.\n
\n
"
+ },
+ "returns": "An IDBRequest object on which subsequent events related to this operation are fired.\n
If the operation is successful, the value of the request's result property is an array of objects representing all records that match the given query, up to the number specified by count (if provided).\n
",
+ "throws": {
+ "InvalidStateError DOMException": "Thrown if the IDBObjectStore has been deleted or removed.",
+ "TransactionInactiveError DOMException": "Thrown if this IDBObjectStore's transaction is inactive.",
+ "TypeError DOMException": "Thrown if the count parameter is not between 0 and 2^32 - 1, inclusive."
}
},
"idbobjectstore.getkey": {
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-index.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-index.json
index dfa0b53201c5..833ed0922ecd 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-index.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-index.json
@@ -4,8 +4,6 @@
"abstractrange.endoffset": "staticrange.endoffset",
"abstractrange.startcontainer": "staticrange.startcontainer",
"abstractrange.startoffset": "staticrange.startoffset",
- "animatable.animate": "element.animate",
- "animatable.getanimations": "element.getanimations",
"animationframeprovider.cancelanimationframe": "window.cancelanimationframe",
"animationframeprovider.requestanimationframe": "window.requestanimationframe",
"ariamixin.ariaatomic": "elementinternals.ariaatomic",
@@ -121,10 +119,10 @@
"canvastransform.transform": "offscreencanvasrenderingcontext2d.transform",
"canvastransform.translate": "offscreencanvasrenderingcontext2d.translate",
"canvasuserinterface.drawfocusifneeded": "canvasrenderingcontext2d.drawfocusifneeded",
- "childnode.after": "element.after",
- "childnode.before": "element.before",
- "childnode.remove": "element.remove",
- "childnode.replacewith": "element.replacewith",
+ "childnode.after": "documenttype.after",
+ "childnode.before": "documenttype.before",
+ "childnode.remove": "documenttype.remove",
+ "childnode.replacewith": "documenttype.replacewith",
"credential.id": "publickeycredential.id",
"cssgroupingrule.cssrules": "cssstylerule.cssrules",
"cssgroupingrule.deleterule": "cssstylerule.deleterule",
@@ -208,17 +206,15 @@
"navigatorplugins.pdfviewerenabled": "navigator.pdfviewerenabled",
"navigatorplugins.plugins": "navigator.plugins",
"navigatorstorage.storage": "navigator.storage",
- "nondocumenttypechildnode.nextelementsibling": "element.nextelementsibling",
- "nondocumenttypechildnode.previouselementsibling": "element.previouselementsibling",
- "parentnode.append": "element.append",
- "parentnode.childelementcount": "element.childelementcount",
- "parentnode.children": "element.children",
- "parentnode.firstelementchild": "element.firstelementchild",
- "parentnode.lastelementchild": "element.lastelementchild",
- "parentnode.prepend": "element.prepend",
- "parentnode.queryselector": "element.queryselector",
- "parentnode.queryselectorall": "element.queryselectorall",
- "parentnode.replacechildren": "element.replacechildren",
+ "parentnode.append": "documentfragment.append",
+ "parentnode.childelementcount": "documentfragment.childelementcount",
+ "parentnode.children": "documentfragment.children",
+ "parentnode.firstelementchild": "documentfragment.firstelementchild",
+ "parentnode.lastelementchild": "documentfragment.lastelementchild",
+ "parentnode.prepend": "documentfragment.prepend",
+ "parentnode.queryselector": "documentfragment.queryselector",
+ "parentnode.queryselectorall": "documentfragment.queryselectorall",
+ "parentnode.replacechildren": "documentfragment.replacechildren",
"popoverinvokerelement.popovertargetaction": "htmlinputelement.popovertargetaction",
"popoverinvokerelement.popovertargetelement": "htmlinputelement.popovertargetelement",
"readablestreamgenericreader.cancel": "readablestreamdefaultreader.cancel",
@@ -249,7 +245,6 @@
"set.keys": "highlight.keys",
"set.size": "highlight.size",
"set.values": "highlight.values",
- "slottable.assignedslot": "text.assignedslot",
"subtlecrypto.derivebits": "subtlecrypto.derivebits.derivebits",
"subtlecrypto.derivekey": "subtlecrypto.derivekey.derivekey",
"subtlecrypto.exportkey": "subtlecrypto.exportkey.exportkey",
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-l.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-l.json
index 8188fd2f3b4c..10432999373d 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-l.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-l.json
@@ -1270,7 +1270,7 @@
"lowDate": "2023-01-12",
"highDate": "2025-07-12"
},
- "doc": "The dataset read-only property of the MathMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.\n
The dataset property itself can be read, but not directly written. Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes."
+ "doc": "The dataset read-only property of the MathMLElement interface provides read/write access to custom data attributes (data-*) on elements. It exposes a map of strings (DOMStringMap) with an entry for each data-* attribute.\n
The dataset property itself can be read, but not directly written. Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes."
},
"mathmlelement.focus": {
"url": "$MDN_URL$/web/api/mathmlelement/focus",
@@ -1318,7 +1318,7 @@
"lowDate": "2023-01-12",
"highDate": "2025-07-12"
},
- "doc": "The read-only style property of the MathMLElement returns the inline style of an element in the form of a live CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned only for the attributes that are defined in the element's inline style attribute.\n
This property is read-only, meaning it is not possible to assign a CSSStyleDeclaration object to it. Nevertheless, it is possible to set an inline style by assigning a string directly to the style property. In this case the string is forwarded to CSSStyleDeclaration.cssText. Using style in this manner will completely overwrite all inline styles on the element.\n
Therefore, to add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleDeclaration object. For example, you can write element.style.backgroundColor = \"red\".\n
A style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null.\n
\n
Note:\nCSS property names are converted to JavaScript identifier with these rules:\n
\n
If the property is made of one word, it remains as it is: height stays as is (in lowercase).
\n
If the property is made of several words, separated by dashes, the dashes are removed and it is converted to camel case: background-attachment becomes backgroundAttachment.
\n
The property float, being a reserved JavaScript keyword, is converted to cssFloat.
\n
\n
The style property has the same priority in the CSS cascade as an inline style declaration set via the style attribute.\n
"
+ "doc": "The read-only style property of the MathMLElement returns the inlinestyle of an element in the form of a live CSSStyleProperties object.\nThis object can be used to get and set the inline styles of an element."
},
"mathmlelement.tabindex": {
"url": "$MDN_URL$/web/api/mathmlelement/tabindex",
@@ -1618,7 +1618,7 @@
},
"doc": "
The getDisplayMedia() method of the MediaDevices interface prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window) as a MediaStream.\n
See Using the Screen Capture API for more details and an example.",
"parameters": {
- "options": "An optional object specifying requirements for the returned MediaStream.\nThe options for getDisplayMedia() work in the same as the constraints for the MediaDevices.getUserMedia() method, although in that case only audio and video can be specified.\nThe list of possible option properties for getDisplayMedia() is as follows:\n
A boolean or a MediaTrackConstraints instance; the default value is true.\nIf this option is omitted or set to true, the returned MediaStream will contain a video track.\nSince getDisplayMedia() requires a video track, if this option is set to false the promise will reject with a TypeError.\n
A boolean or a MediaTrackConstraints instance; the default value is false.\nA value of true indicates that the returned MediaStream will contain an audio track, if audio is supported and available for the display surface chosen by the user.\n
An enumerated value specifying whether the browser should offer entire screens in the screen capture options presented to the user alongside tab and window options.\nThis option is intended to protect companies from leakage of private information through employee error when using video conferencing apps.\nPossible values are include, which hints that the browser should include screen options, and exclude, which hints that they should be excluded.\nA default value is not mandated by the spec; see the Browser compatibility section for browser-specific defaults.\n
\n
Note:\nYou cannot set monitorTypeSurfaces: \"exclude\" at the same time as displaySurface: \"monitor\" as the two settings are contradictory.\nTrying to do so will result in the getDisplayMedia() call failing with a TypeError.\n
A boolean; a value of true instructs the browser to offer the current tab as the most prominent capture source, i.e., as a separate \"This Tab\" option in the \"Choose what to share\" options presented to the user.\nThis is useful as many app types generally just want to share the current tab.\nFor example, a slide deck app might want to let the user stream the current tab containing the presentation to a virtual conference.\nA default value is not mandated by the spec; see the Browser compatibility section for browser-specific defaults.\n
An enumerated value specifying whether the browser should allow the user to select the current tab for capture.\nThis helps to avoid the \"infinite hall of mirrors\" effect experienced when a video conferencing app inadvertently shares its own display.\nPossible values are include, which hints that the browser should include the current tab in the choices offered for capture, and exclude, which hints that it should be excluded.\nA default value is not mandated by the spec; see the Browser compatibility section for browser-specific defaults.\n
An enumerated value specifying whether the browser should display a control to allow the user to dynamically switch the shared tab during screen-sharing.\nThis is much more convenient than having to go through the whole sharing process again each time a user wants to switch the shared tab.\nPossible values are include, which hints that the browser should include the control, and exclude, which hints that it should not be shown.\nA default value is not mandated by the spec; see the Browser compatibility section for browser-specific defaults.\n
An enumerated value specifying whether the browser should include the system audio among the possible audio sources offered to the user.\nPossible values are include, which hints that the browser should include the system audio in the list of choices, and exclude, which hints that it should be excluded.\nA default value is not mandated by the spec; see the Browser compatibility section for browser-specific defaults.\n
\n
"
+ "options": "An object specifying requirements for the returned MediaStream.\nThe options for getDisplayMedia() work in the same as the constraints for the MediaDevices.getUserMedia() method, although in that case only audio and video can be specified.\nThe list of possible option properties for getDisplayMedia() is as follows:\n
A boolean or a MediaTrackConstraints instance; the default value is true.\nIf this option is omitted or set to true, the returned MediaStream will contain a video track.\nSince getDisplayMedia() requires a video track, if this option is set to false the promise will reject with a TypeError.\n
A boolean or a MediaTrackConstraints instance; the default value is false.\nA value of true indicates that the returned MediaStream will contain an audio track, if audio is supported and available for the display surface chosen by the user.\n
An enumerated value specifying whether the browser should offer entire screens in the screen capture options presented to the user alongside tab and window options.\nThis option is intended to protect companies from leakage of private information through employee error when using video conferencing apps.\nPossible values are:\n
\n
include: Hints that the browser should include screen options.
\n
exclude: Hints that screen options should be excluded.
\n
\n
\n
Note:\nYou cannot set monitorTypeSurfaces: \"exclude\" at the same time as displaySurface: \"monitor\" as the two settings are contradictory.\nTrying to do so will result in the getDisplayMedia() call failing with a TypeError.\n
A boolean; a value of true instructs the browser to offer the current tab as the most prominent capture source, that is, as a separate \"This Tab\" option in the \"Choose what to share\" options presented to the user.\nThis is useful as many app types generally just want to share the current tab.\nFor example, a slide deck app might want to let the user stream the current tab containing the presentation to a virtual conference.\n
An enumerated value specifying whether the browser should allow the user to select the current tab for capture.\nThis helps to avoid the \"infinite hall of mirrors\" effect experienced when a video conferencing app inadvertently shares its own display.\nPossible values are:\n
\n
include: Hints that the browser should include the current tab in the choices offered for capture.
\n
exclude: Hints that the current tab should be excluded from the choices.
An enumerated value specifying whether the browser should display a control to allow the user to dynamically switch the shared tab during screen-sharing.\nThis is more convenient than having to go through the whole sharing process again each time a user wants to switch the shared tab.\nPossible values are:\n
\n
include: Hints that the browser should include the control.
\n
exclude: Hints that the control should not be shown.
An enumerated value specifying whether the browser should include the system audio among the possible audio sources offered to the user.\nPossible values are:\n
\n
include: Hints that the browser should include the system audio in the list of choices.
\n
exclude: Hints that system audio should be excluded from the choices shown.
An enumerated value that hints to the browser what audio sharing option the user should be presented with alongside window sharing options. Possible values are:\n
\n
exclude: Hints that audio should not be shareable when a window sharing option is chosen.
\n
window: Hints that when a window sharing option is chosen, only audio originating from that window should be shared.
\n
system: Hints that when a window sharing option is chosen, all system audio should be shared.
\n
\n
\n
"
},
"returns": "A Promise that resolves to a MediaStream containing a video track whose contents come from a user-selected screen area, as well as an optional audio track.\n
\n
Note:\nBrowser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the audio sources supported.\nCheck the compatibility table for details for each browser.\n
",
"throws": {
@@ -5047,7 +5047,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The MediaTrackConstraints dictionary's\nechoCancellation property is a\nConstrainBooleanOrDOMString describing the requested or mandatory constraints placed\nupon the value of the echoCancellation constrainable property.\n
If needed, you can determine whether or not this constraint is supported by checking\nthe value of MediaTrackSupportedConstraints.echoCancellation as returned\nby a call to MediaDevices.getSupportedConstraints(). However, typically\nthis is unnecessary since browsers will ignore any constraints they're unfamiliar with."
},
"mediatrackconstraints.facingmode": {
"url": "$MDN_URL$/web/api/mediatrackconstraints/facingmode",
@@ -5106,6 +5106,10 @@
},
"doc": "The MediaTrackConstraints dictionary's noiseSuppression property is a ConstrainBoolean describing the requested or mandatory constraints placed upon the value of the noiseSuppression constrainable property.\n
Noise suppression is typically provided by microphones, although it can be provided by\nother input sources as well."
},
+ "mediatrackconstraints.restrictownaudio": {
+ "url": "$MDN_URL$/web/api/mediatrackconstraints/restrictownaudio",
+ "doc": "
This property controls whether system audio originating from the capturing tab is filtered out of screen capture, allowing for cleaner screen recordings in some cases. For example, if the capturing web page itself is playing embedded audio or video, that audio would be included in the capture. Since this could lead to an undesirable echo or interfere with the intended audio sources from other tabs or applications, removing it from the capture is desirable.\n
If needed, you can determine whether or not this constraint is supported by checking\nthe value of MediaTrackSupportedConstraints.restrictOwnAudio, as returned\nby MediaDevices.getSupportedConstraints(). However,\nthis is rarely necessary since browsers typically ignore any constraints they don't recognize."
+ },
"mediatrackconstraints.samplerate": {
"url": "$MDN_URL$/web/api/mediatrackconstraints/samplerate",
"baseline": {
@@ -5251,6 +5255,10 @@
},
"doc": "The MediaTrackSettings dictionary's\nnoiseSuppression property is a Boolean value whose value\nindicates whether or not noise suppression technology is enabled on an audio track. This\nlets you determine what value was selected to comply with your specified constraints for\nthis property's value as described in the\nMediaTrackConstraints.noiseSuppression property you provided when calling\neither getUserMedia() or\nMediaStreamTrack.applyConstraints().\n
Noise suppression automatically filters the audio to remove background noise, hum\ncaused by equipment, and the like from the sound before delivering it to your code. This\nfeature is typically used on microphones, although it is technically possible it could\nbe provided by other input sources as well.\n
If needed, you can determine whether or not this constraint is supported by checking\nthe value of MediaTrackSupportedConstraints.noiseSuppression as returned\nby a call to MediaDevices.getSupportedConstraints(). However, typically\nthis is unnecessary since browsers will ignore any constraints they're unfamiliar with."
},
+ "mediatracksettings.restrictownaudio": {
+ "url": "$MDN_URL$/web/api/mediatracksettings/restrictownaudio",
+ "doc": "
The MediaTrackSettings dictionary's restrictOwnAudio property controls whether system audio originating from the capturing tab is filtered out of screen capture, allowing for cleaner screen recordings in some cases.\n
For example, if the capturing web page itself is playing embedded audio or video, that audio would be included in the capture. Since this could lead to an undesirable echo or interfere with the intended audio sources from other tabs or applications, removing it from the capture is desirable."
+ },
"mediatracksettings.samplerate": {
"url": "$MDN_URL$/web/api/mediatracksettings/samplerate",
"baseline": {
@@ -5396,6 +5404,10 @@
},
"doc": "The MediaTrackSupportedConstraints dictionary's\nnoiseSuppression property is a read-only Boolean value\nwhich is present (and set to true) in the object returned by\nMediaDevices.getSupportedConstraints() if and only if the\nuser agent supports the noiseSuppression\nconstraint. If the constraint isn't supported, it's not included in the list, so this\nvalue will never be false.\n
You can access the supported constraints dictionary by calling\nnavigator.mediaDevices.getSupportedConstraints().\n
The noiseSuppression constraint indicates whether or not the browser\noffers the ability to automatically control the gain (volume) on media tracks; this\nobviously is contingent on whether or not the individual device supports automatic gain\ncontrol as well."
},
+ "mediatracksupportedconstraints.restrictownaudio": {
+ "url": "$MDN_URL$/web/api/mediatracksupportedconstraints/restrictownaudio",
+ "doc": "
The MediaTrackSupportedConstraints dictionary's restrictOwnAudio property is a read-only boolean value which is present (and set to true) in the object returned by MediaDevices.getSupportedConstraints() if and only if the user agent supports the restrictOwnAudio constraint. If the constraint isn't supported, it's not included in the list, so this value will never be false.\n
You can access the supported constraints dictionary by calling navigator.mediaDevices.getSupportedConstraints()."
+ },
"mediatracksupportedconstraints.samplerate": {
"url": "$MDN_URL$/web/api/mediatracksupportedconstraints/samplerate",
"baseline": {
@@ -7812,12 +7824,12 @@
},
"doc": "
The intercept() method of the\nNavigateEvent interface intercepts this navigation, turning it into a same-document navigation to the destination URL.",
"parameters": {
- "options": "An options object containing the following properties:\n
Once the promise returned by your handler function resolves, the browser will focus the first element with the autofocus attribute, or the <body> element if no element has autofocus set. This is the default value.\n
Allow the browser to handle scrolling, for example by scrolling to the relevant fragment identifier if the URL contains a fragment, or restoring the scroll position to the same place as last time if the page is reloaded or a page in the history is revisited. This is the default value.\n
A callback function that defines what the navigation handling behavior should be; it returns a promise. This function will run after the currentEntry property has been updated.\n
A callback function that defines any behavior that should occur just before the navigation has committed; it accepts a controller object as an argument and returns a promise. This function will run before the currentEntry property has been updated.\n
Once the promise returned by your handler function resolves, the browser will focus the first element with the autofocus attribute, or the <body> element if no element has autofocus set. This is the default value.\n
Allow the browser to handle scrolling, for example by scrolling to the relevant fragment identifier if the URL contains a fragment, or restoring the scroll position to the same place as last time if the page is reloaded or a page in the history is revisited. This is the default value.\n
"
},
"returns": "None (undefined).",
"throws": {
"InvalidStateError DOMException": "Thrown if the current Document is not yet active, or if the navigation has been cancelled.",
- "SecurityError DOMException": "Thrown if the event was dispatched by a dispatchEvent() call, rather than the user agent, or if the navigation cannot be intercepted (i.e., NavigateEvent.canIntercept is false)."
+ "SecurityError DOMException": "Thrown if:\n
\n
The event was dispatched by a dispatchEvent() call, rather than the user agent.
A precommitHandler() callback is provided on a non-cancelable event (Event.cancelable is false).
\n
"
}
},
"navigateevent.navigateevent": {
@@ -9204,7 +9216,8 @@
"StandardTrack"
],
"compatibility": {
- "Firefox": "120"
+ "Firefox": "120",
+ "FirefoxAndroid": "122"
},
"baseline": {
"level": "NONE"
@@ -9217,10 +9230,7 @@
"StandardTrack"
],
"compatibility": {
- "Chrome": "113",
"ChromeAndroid": "121",
- "Edge": "113",
- "Opera": "99",
"Safari": "26",
"SafariIOS": "26"
},
@@ -11062,11 +11072,11 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The isDefaultNamespace() method of the Node interface accepts a namespace URI as an argument.\nIt returns a boolean value that is true if the namespace is the default namespace on the given node and false if not.\n
\n
Note:\nThe default namespace of an HTML element is always \"\". For a SVG element, it is set by the xmlns attribute.\n
",
+ "doc": "The isDefaultNamespace() method of the Node interface accepts a namespace URI as an argument.\nIt returns a boolean value that is true if the namespace is the default namespace on the given node and false if not. The default namespace can be retrieved with Node.lookupNamespaceURI() by passing null as the argument.",
"parameters": {
- "namespaceURI": "A string representing the namespace against which the element will be checked.\n
\n
Note:\nnamespaceURI is not an optional parameter, but can be null.\n
"
+ "namespaceURI": "A string representing the namespace against which the element will be checked. The empty string is equivalent to null.\n
\n
Note:\nnamespaceURI is not an optional parameter, but can be null.\n
"
},
- "returns": "A boolean value that holds the return value true or false, indicating if the parameter is the default namespace, or not."
+ "returns": "A boolean value that holds the return value true or false, indicating if the parameter is the default namespace, or not. It is equivalent to node.lookupNamespaceURI(null) === namespaceURI."
},
"node.isequalnode": {
"url": "$MDN_URL$/web/api/node/isequalnode",
@@ -11164,7 +11174,7 @@
},
"doc": "The lookupNamespaceURI() method of the Node interface\ntakes a prefix as parameter and returns the namespace URI associated with it on the given node if found (and\nnull if not). This method's existence allows Node objects to be passed as a namespace resolver to XPathEvaluator.createExpression() and XPathEvaluator.evaluate().",
"parameters": {
- "prefix": "The prefix to look for.\n
\n
Note:\nThis parameter is not optional, but can be set to null.\n
"
+ "prefix": "The prefix to look for. The empty string is equivalent to null, meaning the default namespace.\n
\n
Note:\nThis parameter is not optional, but can be set to null.\n
"
},
"returns": "A string containing the namespace URI corresponding to the prefix.\n
If prefix is \"xml\", the return value is always \"http://www.w3.org/XML/1998/namespace\".
\n
If prefix is \"xmlns\", the return value is always \"http://www.w3.org/2000/xmlns/\".
\n
If the prefix is null, the return value is the default namespace URI.
\n
If the prefix is not found, the return value is null.
\n
"
},
@@ -11190,7 +11200,7 @@
},
"doc": "The lookupPrefix() method of the Node interface\nreturns a string containing the prefix for a given namespace URI, if present,\nand null if not.\nWhen multiple prefixes are possible, the first prefix is returned.",
"parameters": {
- "namespace": "A string containing the namespace to look the prefix up.\n
\n
Note:\nThis parameter is not optional but can be set to null.\n
"
+ "namespace": "A string containing the namespace to look the prefix up. The empty string is equivalent to null, both causing null to be returned.\n
\n
Note:\nThis parameter is not optional but can be set to null.\n
"
},
"returns": "A string containing the corresponding prefix, or null if none has been found.\nIf namespace is null, or the empty string, lookupPrefix() returns null.\n
If the node is a DocumentType or a DocumentFragment,\nlookupPrefix() always returns null."
},
@@ -12824,10 +12834,7 @@
"SafariIOS": "17"
},
"webgpu_context": {
- "Chrome": "113",
"ChromeAndroid": "121",
- "Edge": "113",
- "Opera": "99",
"Safari": "26",
"SafariIOS": "26"
}
@@ -13212,8 +13219,9 @@
"SafariIOS": "16.1"
},
"baseline": {
- "level": "LOW",
- "lowDate": "2023-04-11"
+ "level": "HIGH",
+ "lowDate": "2023-04-11",
+ "highDate": "2025-10-11"
},
"doc": "The CanvasRenderingContext2D.createConicGradient() method of the Canvas 2D API creates a gradient around a point with given coordinates.\n
This method returns a conic CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties.\n
\n
Note:\nGradient coordinates are global, i.e., relative to the current coordinate space. When applied to a shape, the coordinates are NOT relative to the shape's coordinates.\n
",
"parameters": {
@@ -14336,8 +14344,9 @@
"SafariIOS": "16"
},
"baseline": {
- "level": "LOW",
- "lowDate": "2023-04-11"
+ "level": "HIGH",
+ "lowDate": "2023-04-11",
+ "highDate": "2025-10-11"
},
"doc": "The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.\n
The radii of the corners can be specified in much the same way as the CSS border-radius property.\n
Like other methods that modify the current path, this method does not directly render anything.\nTo draw the rounded rectangle onto a canvas, you can use the fill() or stroke() methods.",
"parameters": {
@@ -17304,8 +17313,9 @@
"SafariIOS": "16"
},
"baseline": {
- "level": "LOW",
- "lowDate": "2023-04-11"
+ "level": "HIGH",
+ "lowDate": "2023-04-11",
+ "highDate": "2025-10-11"
},
"doc": "The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.\n
The radii of the corners can be specified in much the same way as the CSS border-radius property.\n
Like other methods that modify the current path, this method does not directly render anything.\nTo draw the rounded rectangle onto a canvas, you can use the fill() or stroke() methods.",
"parameters": {
@@ -19148,7 +19158,7 @@
"baseline": {
"level": "NONE"
},
- "doc": "The read-only interactionId property or the PerformanceEventTiming interface returns an ID that uniquely identifies a user interaction which triggered a series of associated events."
+ "doc": "The read-only interactionId property of the PerformanceEventTiming interface returns an ID that uniquely identifies a user interaction which triggered a series of associated events."
},
"performanceeventtiming.processingend": {
"url": "$MDN_URL$/web/api/performanceeventtiming/processingend",
@@ -23460,7 +23470,7 @@
"lowDate": "2025-02-06"
},
"doc": "
The getClientCapabilities() static method of the PublicKeyCredential interface returns a Promise that resolves with an object that can be used to check whether or not particular WebAuthn client capabilities and extensions are supported.\n
A relying party (RP) can use this information to appropriately customize its sign-in and sign-up user interfaces and workflows.",
- "returns": "A Promise that resolves to an object where the property names are the client capability strings, and the values are boolean values that indicate whether or not the corresponding capability or extension is supported.\n
The client allows usage of a passkey authenticator that supports multi-factor authentication mechanisms such as a PIN or biometric check.\nThe authenticator can be part of the same platform (device) as the client, or connected via a hybrid transport such as Bluetooth or USB.\nThe credentials are stored on the authenticator.\nSee Passkeys developer guide for relying parties.\n
The client has a platform authenticator (part of the same device) that supports multi-factor authentication mechanisms, such as a PIN or biometric check.\nThe credentials may be stored on either the RP or the authenticator.\n
The client supports the PublicKeyCredential.signalAllAcceptedCredentials() static method.\nIf not supported, RP workflows will need to prompt the user to manually delete credentials on the authenticator.\n
The client supports the PublicKeyCredential.signalCurrentUserDetails() static method.\nIf not supported, RP workflows will need to prompt the user to manually update user details on the authenticator.\n
The client supports the PublicKeyCredential.signalUnknownCredential() static method.\nIf not supported, RP workflows will need to prompt the user to manually delete credentials from the authenticator.\n
\n
\n
The web extension strings are formatted by prefixing the extension identifier with the prefix extension:.\nFor example, the key extension:appid can be used to check if the appid extension is supported.",
+ "returns": "A Promise that resolves to an object where the property names are the client capability strings, and the values are boolean values that indicate whether or not the corresponding capability or extension is supported.\n
The client allows usage of a passkey authenticator that supports multi-factor authentication mechanisms such as a PIN or biometric check.\nThe authenticator can be part of the same platform (device) as the client, or connected via a hybrid transport such as Bluetooth or USB.\nThe credentials are stored on the authenticator.\nSee Passkeys developer guide for relying parties.\n
The client has a platform authenticator (part of the same device) that supports multi-factor authentication mechanisms, such as a PIN or biometric check.\nThe credentials may be stored on either the RP or the authenticator.\n
The client supports the PublicKeyCredential.signalAllAcceptedCredentials() static method.\nIf not supported, RP workflows will need to prompt the user to manually delete credentials on the authenticator.\n
The client supports the PublicKeyCredential.signalCurrentUserDetails() static method.\nIf not supported, RP workflows will need to prompt the user to manually update user details on the authenticator.\n
The client supports the PublicKeyCredential.signalUnknownCredential() static method.\nIf not supported, RP workflows will need to prompt the user to manually delete credentials from the authenticator.\n
\n
\n
The web extension strings are formatted by prefixing the extension identifier with the prefix extension:.\nFor example, the key extension:appid can be used to check if the appid extension is supported.",
"throws": {
"SecurityError DOMException": "The RP domain is not valid."
}
@@ -23540,7 +23550,7 @@
"lowDate": "2021-09-07",
"highDate": "2024-03-07"
},
- "doc": "
The isUserVerifyingPlatformAuthenticatorAvailable() static method of the PublicKeyCredential interface returns a Promise which resolves to true if a user-verifying platform authenticator is present.\n
A user-verifying platform authenticator is a kind of multi-factor authenticator that is part of the client device (it is generally not removable) and that involves an action from the user in order to identify them. Common user-verifying platform authenticators include:\n
\n
Touch ID or Face ID (macOS and iOS)
\n
Windows Hello (Windows)
\n
Device unlock (fingerprint, face, PIN, etc.) on Android
\n
\n
\n
Note:\nThis method may only be used in top-level contexts and will not be available in an <iframe> for example.\n
The isUserVerifyingPlatformAuthenticatorAvailable() static method of the PublicKeyCredential interface returns a Promise which resolves to true if a user-verifying platform authenticator is present.\n
A user-verifying platform authenticator is a kind of multi-factor authenticator that is part of the client device (it is generally not removable) and that involves an action from the user in order to identify them. Common user-verifying platform authenticators include:\n
\n
Touch ID or Face ID (macOS and iOS)
\n
Windows Hello (Windows)
\n
Device unlock (fingerprint, face, PIN, etc.) on Android
\n
\n
\n
Note:\nThis method may only be used in top-level contexts and will not be available in an <iframe> for example.\n
",
"returns": "A Promise which resolves to a boolean value indicating whether or a not a user-verifying platform authenticator is available.\n
\n
Note:\nIn earlier versions of the specification, the boolean also conveyed the consent of the user to disclose such an authenticator existed.\n
",
"throws": {
"SecurityError DOMException": "The RP domain is not valid."
@@ -24416,6 +24426,11 @@
"Nodejs": "11.0.0",
"Deno": ""
},
+ "baseline": {
+ "level": "HIGH",
+ "lowDate": "2020-07-28",
+ "highDate": "2023-01-28"
+ },
"doc": "The queueMicrotask() method of the Window interface\nqueues a microtask to be executed at a safe time prior to control returning to the\nbrowser's event loop.\n
The microtask is a short function which will run after\nthe current task has completed its work and when there is no other code waiting to be\nrun before control of the execution context is returned to the browser's event loop.\n
This lets your code run without interfering with any other, potentially higher\npriority, code that is pending, but before the browser regains control over the\nexecution context, potentially depending on work you need to complete. You can learn\nmore about how to use microtasks and why you might choose to do so in our microtask guide.\n
Microtasks are especially useful for libraries and frameworks that need to perform\nfinal cleanup or other just-before-rendering tasks.",
"parameters": {
"callback": "A function to be executed when the browser engine determines it is\nsafe to call your code. Enqueued microtasks are executed after all pending tasks have\ncompleted but before yielding control to the browser's event loop."
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-r.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-r.json
index 3d9b10497815..85fa99569a44 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-r.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-r.json
@@ -1228,7 +1228,7 @@
"doc": "
The ReadableStream() constructor creates and returns a readable stream object from the given handlers.\n
Note that while all parameters are technically optional, omitting the underlyingSource will result in a stream that has no source, and that can't be read from (readers return a promise that will never be resolved).",
"parameters": {
"underlyingSource": "An object containing methods and properties that define how the constructed stream instance will behave.\nunderlyingSource can contain the following:\n
This is a method, called immediately when the object is constructed. The\ncontents of this method are defined by the developer, and should aim to get access\nto the stream source, and do anything else required to set up the stream\nfunctionality. If this process is to be done asynchronously, it can return a\npromise to signal success or failure. The controller parameter passed\nto this method is a ReadableStreamDefaultController or a\nReadableByteStreamController, depending on the value of the\ntype property. This can be used by the developer to control the\nstream during set up.\n
This method, also defined by the developer, will be called repeatedly when the\nstream's internal queue of chunks is not full, up until it reaches its high water\nmark. If pull() returns a promise, then it won't be called again\nuntil that promise fulfills; if the promise rejects, the stream will become\nerrored. The controller parameter passed to this method is a\nReadableStreamDefaultController or a\nReadableByteStreamController, depending on the value of the\ntype property. This can be used by the developer to control the\nstream as more chunks are fetched. This function will not be called until start()\nsuccessfully completes. Additionally, it will only be called repeatedly if it\nenqueues at least one chunk or fulfills a BYOB request; a no-op pull()\nimplementation will not be continually called.\n
This method, also defined by the developer, will be called if the app signals\nthat the stream is to be cancelled (e.g., if ReadableStream.cancel()\nis called). The contents should do whatever is necessary to release access to the\nstream source. If this process is asynchronous, it can return a promise to signal\nsuccess or failure. The reason parameter contains a\nstring describing why the stream was cancelled.\n
This property controls what type of readable stream is being dealt with. If it\nis included with a value set to \"bytes\", the passed controller object\nwill be a ReadableByteStreamController capable of handling a BYOB\n(bring your own buffer)/byte stream. If it is not included, the passed controller\nwill be a ReadableStreamDefaultController.\n
For byte streams, the developer can set the autoAllocateChunkSize with a positive integer value to turn on the stream's auto-allocation feature.\nWith this is set, the stream implementation will automatically allocate a view buffer of the specified size in ReadableByteStreamController.byobRequest when required.\n
This must be set to enable zero-copy transfers to be used with a default ReadableStreamDefaultReader.\nIf not set, a default reader will still stream data, but ReadableByteStreamController.byobRequest will always be null and transfers to the consumer must be via the stream's internal queues.\n
\n
",
- "queuingStrategy": "An object that optionally defines a queuing strategy for the stream. This takes two\nparameters:\n
A method containing a parameter chunk — this indicates the size to\nuse for each chunk, in bytes.\n
\n
\n
\n
Note:\nYou could define your own custom\nqueuingStrategy, or use an instance of\nByteLengthQueuingStrategy or CountQueuingStrategy\nfor this object value. If no queuingStrategy is supplied, the default\nused is the same as a CountQueuingStrategy with a high water mark of\n1.\n
"
+ "queuingStrategy": "An object that optionally defines a queuing strategy for the stream. This takes two\nparameters:\n
A method containing a parameter chunk — this indicates the size to\nuse for each chunk, in bytes.\n
\n
\n
\n
Note:\nYou could define your own custom\nqueuingStrategy, or use an instance of\nByteLengthQueuingStrategy or CountQueuingStrategy\nfor this object value. If no queuingStrategy is supplied, the default\nused is the same as a CountQueuingStrategy with a high water mark of\n1.\n
"
},
"returns": "An instance of the ReadableStream object.",
"throws": {
@@ -8118,7 +8118,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The transform property of the RTCRtpReceiver object is used to insert a transform stream (TransformStream) running in a worker thread into the receiver pipeline.\nThis allows stream transforms to be applied to encoded video and audio frames as they arrive from the packetizer (before they are played/rendered).\n
The transform that is to be added is defined using an RTCRtpScriptTransform and its associated Worker.\nIf the transform is set in the peer connection track event handler, the transform stream will receive the first full incoming frame for the track."
},
@@ -8159,7 +8160,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The RTCRtpScriptTransform interface of the WebRTC API is used to insert a WebRTC Encoded Transform (a TransformStream running in a worker thread) into the WebRTC sender and receiver pipelines."
},
@@ -8178,7 +8180,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The RTCRtpScriptTransform() constructor creates a new RTCRtpScriptTransform object.\n
Constructing the RTCRtpScriptTransform creates a counterpart RTCRtpScriptTransformer in the specified worker, along with passed options (if any). Objects in the third parameter to the constructor are transferred.\n
The rtctransform event is then fired at the worker global object.\nWorker code can use the event.transformer property to get the counterpart RTCRtpScriptTransformer, and event.transformer.options is used to get the options.\n
Note that the options are primarily used to inform the worker whether the transformer is processing incoming or outgoing frames, so that it can apply an appropriate transform.",
"parameters": {
@@ -8205,7 +8208,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The RTCRtpScriptTransformer interface of the WebRTC API provides a worker-side Stream API interface that a WebRTC Encoded Transform can use to modify encoded media frames in the incoming and outgoing WebRTC pipelines.\n
"
},
@@ -8249,7 +8253,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The options read-only property of the RTCRtpScriptTransformer interface returns the object that was (optionally) passed as the second argument during construction of the corresponding RTCRtpScriptTransform."
},
@@ -8268,7 +8273,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The readable read-only property of the RTCRtpScriptTransformer interface returns a ReadableStream instance is a source for encoded media frames.\n
When the corresponding RTCRtpScriptTransform is inserted into the WebRTC sender and receiver pipelines, this stream may be enqueued with outgoing or incoming encoded media frames (RTCEncodedVideoFrame or RTCEncodedAudioFrame).\nA WebRTC encoded transform can read the frames, modify them as needed, and then send them back into the WebRTC pipeline by writing them to RTCRtpScriptTransformer.writable.\nA common way to perform this operation is to pipe the frames through a TransformStream."
},
@@ -8287,7 +8293,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The sendKeyFrameRequest() method of the RTCRtpScriptTransformer interface may be called by a WebRTC Encoded Transform that is processing incoming encoded video frames, in order to request a key frame from the sender.\n
The method may only be called when receiving video (not audio) frames and if, for whatever reason, a recipient will not be able to decode the video without a new key frame.\nNote that the user agent can decide that the request for a key frame is not necessary, in which case the returned promise will fulfill even though the request was not actually sent.\n
\n
Note:\nIt might be called, for example, if a new user joins a WebRTC conference, in order to reduce the time before they receive a key frame and can hence start displaying video.\nFor more information see Triggering a key frame in Using WebRTC Encoded Transforms.\n
",
"returns": "A Promise that fulfills with undefined once the request is sent, or the user agent decides that it does not need to.",
@@ -8310,7 +8317,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The writable read-only property of the RTCRtpScriptTransformer interface returns a WritableStream instance that can be used as a sink for encoded media frames enqueued on the corresponding RTCRtpScriptTransformer.readable.\n
When the corresponding RTCRtpScriptTransform is inserted into the WebRTC sender and receiver pipelines, encoded media frames (RTCEncodedVideoFrame or RTCEncodedAudioFrame) may be enqueued on the RTCRtpScriptTransformer.readable.\nA WebRTC encoded transform can read the frames from readable, modify them as needed, and then send them back into the WebRTC pipeline by sending them to this writable.\nA common way to perform this operation is to pipe the frames through a TransformStream."
},
@@ -8557,7 +8565,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The transform property of the RTCRtpSender object is used to insert a transform stream (TransformStream) running in a worker thread into the sender pipeline.\nThis allows stream transforms to be applied to encoded video and audio frames after they are output by a codec, and before they are sent.\n
The transform that is to be added is defined using an RTCRtpScriptTransform and its associated Worker.\nIf the transform is set synchronously immediately after creating the RTCRtpSender it will receive the first full frame generated by the sender's encoder."
},
@@ -9371,7 +9380,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The RTCTransformEvent of the WebRTC API represent an event that is fired in a dedicated worker when an encoded frame has been queued for processing by a WebRTC Encoded Transform.\n
The interface has a transformer property that exposes a readable stream and a writable stream.\nA worker should read encoded frames from transformer.readable, modify them as needed, and write them to transformer.writable in the same order and without any duplication.\n
At time of writing there is just one event based on RTCTransformEvent: rtctransform."
},
@@ -9390,7 +9400,8 @@
"SafariIOS": "15.4"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-03"
},
"doc": "The read-only transformer property of the RTCTransformEvent interface returns the RTCRtpScriptTransformer associated with the event.\n
The property exposes the WebRTC sender or receiver pipeline as a readable and writable stream of encoded media frames, which a WebRTC Encoded Transform can insert itself into in order to modify frames."
},
@@ -13629,7 +13640,11 @@
"parameters": {
"source": "Either an ArrayBuffer, a TypedArray or a DataView object\nthat contains the media segment data you want to add to the SourceBuffer."
},
- "returns": "None (undefined)."
+ "returns": "None (undefined).",
+ "throws": {
+ "InvalidStateError DOMException": "Thrown in one of the following cases:\n
\n
The SourceBuffer object's updating attribute is true. You must wait for any previous append, update, or remove operations to complete (indicated by the updateend event) before calling appendBuffer() again.
\n
The SourceBuffer has been removed from the sourceBuffers attribute of the parent media source.
\n
The HTMLMediaElement's error attribute is not null.
\n
",
+ "QuotaExceededError": "The buffer is full, and no more data can be appended. This might occur if the SourceBuffer has reached a browser-defined limit on the amount of buffered data."
+ }
},
"sourcebuffer.appendbufferasync": {
"url": "$MDN_URL$/web/api/sourcebuffer/appendbufferasync",
@@ -14098,8 +14113,9 @@
"StandardTrack"
],
"compatibility": {
- "Chrome": "142",
- "Edge": "142"
+ "Chrome": "139",
+ "Edge": "139",
+ "Opera": "123"
},
"doc": "
Access to the available() method is controlled by the on-device-speech-recognitionPermissions-Policy. Specifically, where a defined policy blocks usage, any attempts to call the method will fail.",
"parameters": {
@@ -14148,8 +14164,9 @@
"StandardTrack"
],
"compatibility": {
- "Chrome": "142",
- "Edge": "142"
+ "Chrome": "139",
+ "Edge": "139",
+ "Opera": "123"
},
"doc": "
Access to the install() method is controlled by the on-device-speech-recognitionPermissions-Policy directive. Specifically, where a defined policy blocks usage, any attempts to call the method will fail.",
"parameters": {
@@ -14234,8 +14251,9 @@
"StandardTrack"
],
"compatibility": {
- "Chrome": "142",
- "Edge": "142"
+ "Chrome": "139",
+ "Edge": "139",
+ "Opera": "123"
},
"doc": "
The processLocally property of the\nSpeechRecognition interface specifies whether speech recognition must be performed locally on the user's device.\n
See On-device speech recognition for more information."
},
@@ -17988,6 +18006,35 @@
},
"doc": "The SVGAElement interface provides access to the properties of an <a> element, as well as methods to manipulate them."
},
+ "svgaelement.download": {
+ "url": "$MDN_URL$/web/api/svgaelement/download",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Chrome": "142",
+ "ChromeAndroid": "142",
+ "Edge": "142",
+ "Firefox": "20",
+ "FirefoxAndroid": "20"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "The download property of the SVGAElement interface returns a string indicating that the browser should treat the linked URL as a download.\n
This property can be set, to change the URL's download value. It reflects the value of the download attribute.\n
\n
Note:\nThis value might not be used for download. This value cannot be used to determine whether the download will occur.\n
"
+ },
+ "svgaelement.hash": {
+ "url": "$MDN_URL$/web/api/svgaelement/hash",
+ "doc": "The hash property of the SVGAElement interface returns a string representing the fragment identifier, including the leading hash mark (#), if any, in the referenced URL.\n
This property can be set, to change the URL's fragment (ignores leading #)."
+ },
+ "svgaelement.host": {
+ "url": "$MDN_URL$/web/api/svgaelement/host",
+ "doc": "The host property of the SVGAElement interface returns a string representing the hostname and port (if it's not the default port) in the referenced URL.\n
This property can be set, to change the URL's host and port."
+ },
+ "svgaelement.hostname": {
+ "url": "$MDN_URL$/web/api/svgaelement/hostname",
+ "doc": "The hostname property of the SVGAElement interface returns a string representing the hostname in the referenced URL.\n
This property can be set, to change the URL's hostname."
+ },
"svgaelement.href": {
"url": "$MDN_URL$/web/api/svgaelement/href",
"status": [
@@ -18010,6 +18057,62 @@
},
"doc": "The href read-only property of the SVGAElement returns an SVGAnimatedString object reflecting the value of the href attribute, and, in certain cases, the xlink:href attribute. It specifies the target URI associated with the link.\n
This property enables access to the URI set for a link within an SVG document."
},
+ "svgaelement.hreflang": {
+ "url": "$MDN_URL$/web/api/svgaelement/hreflang",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Firefox": "61",
+ "FirefoxAndroid": "61"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "The hreflang property of the SVGAElement interface returns a string indicating the language of the linked resource.\n
This property can be set, to change the URL's hreflang value. It reflects the value of the hreflang attribute."
+ },
+ "svgaelement.origin": {
+ "url": "$MDN_URL$/web/api/svgaelement/origin",
+ "doc": "The origin readonly property of the SVGAElement interface returns a string containing the origin of the URL — that is, its scheme, its domain and its port."
+ },
+ "svgaelement.password": {
+ "url": "$MDN_URL$/web/api/svgaelement/password",
+ "doc": "The password property of the SVGAElement interface returns a string containing the password specified before the domain name.\n
This property can be set, to change the URL's password."
+ },
+ "svgaelement.pathname": {
+ "url": "$MDN_URL$/web/api/svgaelement/pathname",
+ "doc": "The pathname property of the SVGAElement interface returns a string containing an initial / followed by the path of the URL, not including the query string or fragment.\n
This property can be set, to change the URL's pathname."
+ },
+ "svgaelement.ping": {
+ "url": "$MDN_URL$/web/api/svgaelement/ping",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {},
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "The ping property of the SVGAElement interface returns a string that reflects the ping attribute, containing a space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING will be sent by the browser (in the background). Typically used for tracking.\n
This property can be set, to change the URL's ping value. It reflects the value of the ping attribute."
+ },
+ "svgaelement.port": {
+ "url": "$MDN_URL$/web/api/svgaelement/port",
+ "doc": "The port property of the SVGAElement interface returns a string representing the port component, if any, of the referenced URL.\n
This property can be set, to change the URL's port."
+ },
+ "svgaelement.protocol": {
+ "url": "$MDN_URL$/web/api/svgaelement/protocol",
+ "doc": "The protocol property of the SVGAElement interface returns a string representing the protocol component, including trailing colon (:), of the referenced URL.\n
This property can be set, to change the URL's protocol."
+ },
+ "svgaelement.referrerpolicy": {
+ "url": "$MDN_URL$/web/api/svgaelement/referrerPolicy",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Firefox": "61",
+ "FirefoxAndroid": "61"
+ },
+ "doc": "The referrerpolicy property of the SVGAElement interface returns a string specifying which referrer to send when fetching the URL..\n
This property can be set, to change the URL's referrerpolicy value. It reflects the value of the referrerpolicy attribute."
+ },
"svgaelement.rel": {
"url": "$MDN_URL$/web/api/svgaelement/rel",
"status": [
@@ -18052,6 +18155,10 @@
},
"doc": "The relList read-only property of the SVGAElement returns a live DOMTokenList reflecting the space-separated string <list-of-Link-Types> values of the rel attribute of the SVG <a> element.\n
The property itself is read-only, meaning you can't substitute the\nDOMTokenList by another one, but the content of the returned list can be\nchanged."
},
+ "svgaelement.search": {
+ "url": "$MDN_URL$/web/api/svgaelement/search",
+ "doc": "The search property of the SVGAElement interface returns a string representing the URL's query string, if any, including the leading question mark (?).\n
This property can be set, to change the URL's query component."
+ },
"svgaelement.target": {
"url": "$MDN_URL$/web/api/svgaelement/target",
"status": [
@@ -18074,6 +18181,33 @@
},
"doc": "The SVGAElement.target read-only property of SVGAElement returns an SVGAnimatedString object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.\n
This property is used when there are multiple possible targets for the ending resource, like when the parent document is a multi-frame HTML or XHTML document."
},
+ "svgaelement.text": {
+ "url": "$MDN_URL$/web/api/svgaelement/text",
+ "status": [
+ "StandardTrack",
+ "Deprecated"
+ ],
+ "compatibility": {},
+ "doc": "The text property of the SVGAElement interface returns a string that is a synonym for the Node.textContent property."
+ },
+ "svgaelement.type": {
+ "url": "$MDN_URL$/web/api/svgaelement/type",
+ "status": [
+ "StandardTrack"
+ ],
+ "compatibility": {
+ "Firefox": "61",
+ "FirefoxAndroid": "61"
+ },
+ "baseline": {
+ "level": "NONE"
+ },
+ "doc": "The type property of the SVGAElement interface returns a string indicating the MIME type of the linked resource.\n
This property can be set, to change the URL's type value. It reflects the value of the type attribute."
+ },
+ "svgaelement.username": {
+ "url": "$MDN_URL$/web/api/svgaelement/username",
+ "doc": "The username property of the SVGAElement interface returns a string containing the username specified before the domain name.\n
This property can be set, to change the URL's username."
+ },
"svgangle": {
"url": "$MDN_URL$/web/api/svgangle",
"status": [
@@ -19325,7 +19459,7 @@
"lowDate": "2020-01-15",
"highDate": "2022-07-15"
},
- "doc": "The requiredExtensions read-only property of the SVGAnimationElement interface reflects the requiredExtensions attribute of the given element."
+ "doc": "The requiredExtensions read-only property of the SVGAnimationElement interface reflects the requiredExtensions attribute of the given element."
},
"svganimationelement.systemlanguage": {
"url": "$MDN_URL$/web/api/svganimationelement/systemlanguage",
@@ -19951,7 +20085,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The read-only style property of the SVGElement returns the inline style of an element in the form of a live CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned only for the attributes that are defined in the element's inline style attribute.\n
This property is read-only, meaning it is not possible to assign a CSSStyleDeclaration object to it. Nevertheless, it is possible to set an inline style by assigning a string directly to the style property. In this case the string is forwarded to CSSStyleDeclaration.cssText. Using style in this manner will completely overwrite all inline styles on the element.\n
Therefore, to add specific styles to an element without altering other style values, it is generally preferable to set individual properties on the CSSStyleDeclaration object. For example, you can write element.style.backgroundColor = \"red\".\n
A style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null.\n
\n
Note:\nCSS property names are converted to JavaScript identifier with these rules:\n
\n
If the property is made of one word, it remains as it is: height stays as is (in lowercase).
\n
If the property is made of several words, separated by dashes, the dashes are removed and it is converted to camel case: background-attachment becomes backgroundAttachment.
\n
The property float, being a reserved JavaScript keyword, is converted to cssFloat.
\n
\n
The style property has the same priority in the CSS cascade as an inline style declaration set via the style attribute.\n
"
+ "doc": "The read-only style property of the SVGElement returns the inlinestyle of an element in the form of a live CSSStyleProperties object.\nThis object can be used to get and set the inline styles of an element."
},
"svgelement.tabindex": {
"url": "$MDN_URL$/web/api/svgelement/tabindex",
@@ -23960,7 +24094,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The x read-only property of the SVGFESpotLightElement interface describes the horizontal coordinate of the position of an SVG filter primitive as a SVGAnimatedNumber.\n
It reflects the x attribute of the <feSpotLight> element., which can be used to define the light source in a spotlight effect. The attribute is a <number>. The default value is 0."
+ "doc": "The x read-only property of the SVGFESpotLightElement interface describes the horizontal coordinate of the position of an SVG filter primitive as a SVGAnimatedNumber.\n
It reflects the x attribute of the <feSpotLight> element, which can be used to define the light source in a spotlight effect. The attribute is a <number>. The default value is 0."
},
"svgfespotlightelement.y": {
"url": "$MDN_URL$/web/api/svgfespotlightelement/y",
@@ -23982,7 +24116,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The y read-only property of the SVGFESpotLightElement interface describes the vertical coordinate of the position of an SVG filter primitive as a SVGAnimatedNumber.\n
It reflects the y attribute of the <feSpotLight> element., which can be used to define the light source in a spotlight effect. The attribute is a <number>. The default value is 0."
+ "doc": "The y read-only property of the SVGFESpotLightElement interface describes the vertical coordinate of the position of an SVG filter primitive as a SVGAnimatedNumber.\n
It reflects the y attribute of the <feSpotLight> element, which can be used to define the light source in a spotlight effect. The attribute is a <number>. The default value is 0."
},
"svgfespotlightelement.z": {
"url": "$MDN_URL$/web/api/svgfespotlightelement/z",
@@ -25101,7 +25235,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The requiredExtensions read-only property of the SVGGraphicsElement interface reflects the requiredExtensions attribute of the given element."
+ "doc": "The requiredExtensions read-only property of the SVGGraphicsElement interface reflects the requiredExtensions attribute of the given element."
},
"svggraphicselement.systemlanguage": {
"url": "$MDN_URL$/web/api/svggraphicselement/systemlanguage",
@@ -32811,7 +32945,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The TextTrackList interface is used to represent a list of the text tracks defined for the associated video or audio element, with each track represented by a separate textTrack object in the list.\n
Text tracks can be added to a media element declaratively using the <track> element or programmatically using the HTMLMediaElement.addTextTrack() method.\n
An instance of this object can be retrieved using the textTracks property of an HTMLMediaElement object.\n
For a given HTMLMediaElement object media, the individual tracks can be accessed using:\n
\n
media.TextTracks[n], to get the n-th text track from the object's list of text tracks
"
+ "doc": "The TextTrackList interface is used to represent a list of the text tracks defined for the associated video or audio element, with each track represented by a separate TextTrack object in the list.\n
Text tracks can be added to a media element declaratively using the <track> element or programmatically using the HTMLMediaElement.addTextTrack() method.\n
An instance of this object can be retrieved using the textTracks property of an HTMLMediaElement object.\n
For a given HTMLMediaElement object media, the individual tracks can be accessed using:\n
\n
media.TextTracks[n], to get the n-th text track from the object's list of text tracks
The source read-only property of the ToggleEvent interface is an Element object instance representing the HTML popover control element that initiated the toggle."
+ "doc": "The source read-only property of the ToggleEvent interface is an Element object instance representing the HTML popover control element that initiated the toggle."
},
"toggleevent.toggleevent": {
"url": "$MDN_URL$/web/api/toggleevent/toggleevent",
@@ -34548,7 +34683,7 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The TreeWalker.whatToShow read-only property returns a\nbitmask that indicates the types of\nnodes to show. Non-matching nodes are skipped, but their\nchildren may be included, if relevant. The possible values are:\n
\n\n
\n
Constant
\n
Numerical value
\n
Description
\n
\n\n\n
\n
NodeFilter.SHOW_ALL
\n
\n4294967295 (that is the max value of unsigned long)\n
\n
Shows all nodes.
\n
\n
\n
\nNodeFilter.SHOW_ATTRIBUTE\n
\n
2
\n
\nShows attribute Attr nodes. This is meaningful\nonly when creating a TreeWalker with an\nAttr node as its root; in this case, it means\nthat the attribute node will appear in the first position of the\niteration or traversal. Since attributes are never children of other\nnodes, they do not appear when traversing over the document tree.\n
"
+ "doc": "The TreeWalker.whatToShow read-only property returns a\nbitmask that indicates the types of\nnodes to show. Non-matching nodes are skipped, but their\nchildren may be included, if relevant."
},
"trustedhtml": {
"url": "$MDN_URL$/web/api/trustedhtml",
diff --git a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-u.json b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-u.json
index f6f8296ef0e4..390979d84343 100644
--- a/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-u.json
+++ b/xml/xml-psi-impl/resources-gen/com/intellij/documentation/mdn/WebApi-u.json
@@ -4138,7 +4138,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The ViewTransition interface of the View Transition API represents an active view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether.\n
This object type is made available in the following ways:\n
When a view transition is triggered by a startViewTransition() call (or a page navigation in the case of MPA transitions), a sequence of steps is followed as explained in The view transition process. This also explains when the different promises fulfill."
},
@@ -4158,7 +4159,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The finished read-only property of the\nViewTransition interface is a Promise that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.\n
finished will only reject in the case of a same-document (SPA) transition, if the callback passed to document.startViewTransition() throws or returns a promise that rejects. This would indicate that the new state of the page wasn't created.\n
If a transition animation fails to start or is skipped during the transition using ViewTransition.skipTransition(), the end state is still reached therefore finished will still fulfill."
},
@@ -4178,7 +4180,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The ready read-only property of the\nViewTransition interface is a Promise that fulfills once the pseudo-element tree is created and the transition animation is about to start.\n
ready will reject if the transition cannot begin. This can be due to misconfiguration, for example, duplicate view-transition-names, or if the callback passed to Document.startViewTransition() throws or returns a promise that rejects."
},
@@ -4198,7 +4201,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The skipTransition() method of the\nViewTransition interface skips the animation part of the view transition, but doesn't skip running the associated view update.",
"returns": "undefined."
@@ -4219,7 +4223,8 @@
"SafariIOS": "18"
},
"baseline": {
- "level": "NONE"
+ "level": "LOW",
+ "lowDate": "2025-10-14"
},
"doc": "The updateCallbackDone read-only property of the\nViewTransition interface is a Promise that fulfills when the promise returned by the document.startViewTransition() method's callback fulfills, or rejects when it rejects.\n
updateCallbackDone is useful when you don't care about the success/failure of a same-document (SPA) view transition animation, and just want to know if and when the DOM is updated.\n
\n
Note:\nIn the case of a cross-document (MPA) view transition, the updateCallbackDone promise of the associated ViewTransition is automatically fulfilled.\n
"
},
@@ -15242,10 +15247,7 @@
"StandardTrack"
],
"compatibility": {
- "Chrome": "115",
"ChromeAndroid": "121",
- "Edge": "115",
- "Opera": "101",
"Safari": "26",
"SafariIOS": "26"
},
@@ -16051,14 +16053,14 @@
"lowDate": "2015-07-29",
"highDate": "2018-01-29"
},
- "doc": "The\nWindow.getComputedStyle() method returns an object\ncontaining the values of all CSS properties of an element, after applying active\nstylesheets and resolving any basic computation those values may contain.\n
Individual CSS property values are accessed through APIs provided by the returned CSSStyleDeclaration object, or by indexing with CSS property names. The values returned by getComputedStyle are resolved values.",
+ "doc": "The Window.getComputedStyle() method returns a live read-only CSSStyleProperties object containing the resolved values of all CSS properties of an element, after applying active stylesheets and resolving any computation those values may contain.",
"parameters": {
"element": "The Element for which to get the computed style.",
- "pseudoElt": "A string specifying the pseudo-element to match. Omitted (or null) for\nreal elements."
+ "pseudoElt": "A string specifying the pseudo-element to match.\nOmitted (or null) for real elements."
},
- "returns": "A liveCSSStyleDeclaration object, which updates automatically when the element's styles are changed.\n
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 coming to CSS :visited for examples of how this is implemented.
\n
During CSS transitions, getComputedStyle returns the original property value in Firefox, but the final property value in WebKit.
\n
In Firefox, properties with the value auto return the used value, not the value auto. So if you apply top:auto and bottom:0 on an element with height:30px and a containing block of height:100px, Firefox's computed style for top returns 70px, as 100 − 30 = 70.
\n
For compatibility reasons, serialized color values are expressed as rgb() colors if the alpha channel value is exactly 1, and rgba() colors otherwise. In both cases, legacy syntax is used, with commas as separators (for example rgb(255, 0, 0)).
\n
\n
The returned object is the same CSSStyleDeclaration type as the object returned from the element's style property. However, the two objects have different purposes:\n
\n
The object from getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a <style> element or an external stylesheet.
\n
The element.style object should be used to set styles on that element, or inspect styles directly added to it from JavaScript manipulation or the global style attribute.
\n
",
+ "returns": "A liveCSSStyleProperties object, which updates automatically when the element's styles are changed.\n
Warning:\nReturned values are sometimes deliberately inaccurate.\nTo 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.\nSee Plugging the CSS history leak and Privacy-related changes coming to CSS :visited for examples of how this is implemented.\n
",
"throws": {
- "TypeError": "If the passed object is not an Element or the\npseudoElt is not a valid pseudo-element selector or is\n::part() or ::slotted().\n
\n
Note:\nValid pseudo-element selector refers to syntactic\nvalidity, e.g., ::unsupported is considered valid, even though the\npseudo-element itself is not supported.\n
"
+ "TypeError": "If the passed object is not an Element or the pseudoElt is not a valid pseudo-element selector or is ::part() or ::slotted().\n
\n
Note:\nValid pseudo-element selector refers to syntactic validity, e.g., ::unsupported is considered valid, even though the pseudo-element itself is not supported.\n
"
}
},
"window.getdefaultcomputedstyle": {
@@ -16773,6 +16775,11 @@
},
"window.queuemicrotask": {
"url": "$MDN_URL$/web/api/window/queuemicrotask",
+ "baseline": {
+ "level": "HIGH",
+ "lowDate": "2020-07-28",
+ "highDate": "2023-01-28"
+ },
"doc": "The queueMicrotask() method of the Window interface\nqueues a microtask to be executed at a safe time prior to control returning to the\nbrowser's event loop.\n
The microtask is a short function which will run after\nthe current task has completed its work and when there is no other code waiting to be\nrun before control of the execution context is returned to the browser's event loop.\n
This lets your code run without interfering with any other, potentially higher\npriority, code that is pending, but before the browser regains control over the\nexecution context, potentially depending on work you need to complete. You can learn\nmore about how to use microtasks and why you might choose to do so in our microtask guide.\n
Microtasks are especially useful for libraries and frameworks that need to perform\nfinal cleanup or other just-before-rendering tasks.",
"parameters": {
"callback": "A function to be executed when the browser engine determines it is\nsafe to call your code. Enqueued microtasks are executed after all pending tasks have\ncompleted but before yielding control to the browser's event loop."
@@ -18363,6 +18370,11 @@
},
"workerglobalscope.queuemicrotask": {
"url": "$MDN_URL$/web/api/workerglobalscope/queuemicrotask",
+ "baseline": {
+ "level": "HIGH",
+ "lowDate": "2020-07-28",
+ "highDate": "2023-01-28"
+ },
"doc": "
Note: This feature is only available in Web Workers.
\n
The queueMicrotask() method of the WorkerGlobalScope interface\nqueues a microtask to be executed at a safe time prior to control returning to the\nbrowser's event loop.\n
The microtask is a short function which will run after\nthe current task has completed its work and when there is no other code waiting to be\nrun before control of the execution context is returned to the browser's event loop.\n
This lets your code run without interfering with any other, potentially higher\npriority, code that is pending, but before the browser regains control over the\nexecution context, potentially depending on work you need to complete. You can learn\nmore about how to use microtasks and why you might choose to do so in our microtask guide.\n
Microtasks are especially useful for libraries and frameworks that need to perform\nfinal cleanup or other just-before-rendering tasks.",
"parameters": {
"callback": "A function to be executed when the browser engine determines it is\nsafe to call your code. Enqueued microtasks are executed after all pending tasks have\ncompleted but before yielding control to the browser's event loop."
@@ -18846,7 +18858,8 @@
"StandardTrack"
],
"compatibility": {
- "Firefox": "120"
+ "Firefox": "120",
+ "FirefoxAndroid": "122"
},
"baseline": {
"level": "NONE"
@@ -18859,10 +18872,7 @@
"StandardTrack"
],
"compatibility": {
- "Chrome": "113",
"ChromeAndroid": "121",
- "Edge": "113",
- "Opera": "99",
"Safari": "26",
"SafariIOS": "26"
},