css-values-5.json

{
  "spec": {
    "title": "CSS Values and Units Module Level 5",
    "url": "https://drafts.csswg.org/css-values-5/"
  },
  "properties": [
    {
      "name": "interpolate-size",
      "href": "https://drafts.csswg.org/css-values-5/#propdef-interpolate-size",
      "value": "numeric-only | allow-keywords",
      "initial": "numeric-only",
      "appliesTo": "all elements",
      "inherited": "yes",
      "percentages": "n/a",
      "computedValue": "as specified",
      "canonicalOrder": "per grammar",
      "animationType": "not animatable",
      "values": [
        {
          "name": "numeric-only",
          "prose": "An <intrinsic-size-keyword> cannot be interpolated.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-interpolate-size-numeric-only",
          "type": "value",
          "value": "numeric-only"
        },
        {
          "name": "allow-keywords",
          "prose": "Two values can also be interpolated if one of them is an <intrinsic-size-keyword> and the other is a <length-percentage>. This is done by treating the <intrinsic-size-keyword> keyword as though it is calc-size(keyword, size) and applying the rules in § 10.3 Interpolating calc-size(). In other cases, an <intrinsic-size-keyword> still cannot be interpolated.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-interpolate-size-allow-keywords",
          "type": "value",
          "value": "allow-keywords"
        }
      ],
      "styleDeclaration": [
        "interpolate-size",
        "interpolateSize"
      ]
    }
  ],
  "atrules": [],
  "selectors": [],
  "values": [
    {
      "name": "<boolean-expr[]>",
      "prose": "Several contexts (such as @media, @supports, if(), ...) specify conditions, and allow combining those conditions with boolean logic (and/or/not/grouping). Because they use the same non-trivial recursive syntax structure, the special <boolean-expr[]> production represents this pattern generically.",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-boolean-expr",
      "type": "type"
    },
    {
      "name": "<syntax>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-syntax",
      "type": "type",
      "value": "'*' | <syntax-component> [ <syntax-combinator> <syntax-component> ]* | <syntax-string>"
    },
    {
      "name": "<syntax-component>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-syntax-component",
      "type": "type",
      "value": "<syntax-single-component> <syntax-multiplier>? | '<' transform-list '>'"
    },
    {
      "name": "<syntax-single-component>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-syntax-single-component",
      "type": "type",
      "value": "'<' <syntax-type-name> '>' | <ident>"
    },
    {
      "name": "<syntax-type-name>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-syntax-type-name",
      "type": "type",
      "value": "angle | color | custom-ident | image | integer | length | length-percentage | number | percentage | resolution | string | time | url | transform-function"
    },
    {
      "name": "<syntax-combinator>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-syntax-combinator",
      "type": "type",
      "value": "'|'"
    },
    {
      "name": "<syntax-multiplier>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-syntax-multiplier",
      "type": "type",
      "value": "[ '#' | '+' ]"
    },
    {
      "name": "<syntax-string>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-syntax-string",
      "type": "type",
      "value": "<string>"
    },
    {
      "name": "<request-url-modifier>",
      "prose": "<request-url-modifier>s are <url-modifier>s that affect the <url>’s resource request by applying associated URL request modifier steps. See CSS Values 4 § 4.5.4 URL Processing Model.",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-request-url-modifier",
      "type": "type",
      "value": "<crossorigin-modifier> | <integrity-modifier> | <referrerpolicy-modifier>",
      "values": [
        {
          "name": "<crossorigin-modifier>",
          "value": "crossorigin(anonymous | use-credentials)",
          "href": "https://drafts.csswg.org/css-values-5/#typedef-request-url-modifier-crossorigin-modifier",
          "type": "type"
        },
        {
          "name": "crossorigin()",
          "prose": "<crossorigin-modifier> = crossorigin(anonymous | use-credentials)",
          "href": "https://drafts.csswg.org/css-values-5/#funcdef-request-url-modifier-crossorigin",
          "type": "function"
        },
        {
          "name": "anonymous",
          "prose": "<crossorigin-modifier> = crossorigin(anonymous | use-credentials)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-anonymous",
          "type": "value",
          "value": "anonymous"
        },
        {
          "name": "use-credentials",
          "prose": "<crossorigin-modifier> = crossorigin(anonymous | use-credentials)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-use-credentials",
          "type": "value",
          "value": "use-credentials"
        },
        {
          "name": "<integrity-modifier>",
          "value": "integrity(<string>)",
          "href": "https://drafts.csswg.org/css-values-5/#typedef-request-url-modifier-integrity-modifier",
          "type": "type"
        },
        {
          "name": "integrity()",
          "prose": "<integrity-modifier> = integrity(<string>)",
          "href": "https://drafts.csswg.org/css-values-5/#funcdef-request-url-modifier-integrity",
          "type": "function"
        },
        {
          "name": "<referrerpolicy-modifier>",
          "value": "referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#typedef-request-url-modifier-referrerpolicy-modifier",
          "type": "type"
        },
        {
          "name": "referrerpolicy()",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#funcdef-request-url-modifier-referrerpolicy",
          "type": "function"
        },
        {
          "name": "no-referrer",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-no-referrer",
          "type": "value",
          "value": "no-referrer"
        },
        {
          "name": "no-referrer-when-downgrade",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-no-referrer-when-downgrade",
          "type": "value",
          "value": "no-referrer-when-downgrade"
        },
        {
          "name": "same-origin",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-same-origin",
          "type": "value",
          "value": "same-origin"
        },
        {
          "name": "origin",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-origin",
          "type": "value",
          "value": "origin"
        },
        {
          "name": "strict-origin",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-strict-origin",
          "type": "value",
          "value": "strict-origin"
        },
        {
          "name": "origin-when-cross-origin",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-origin-when-cross-origin",
          "type": "value",
          "value": "origin-when-cross-origin"
        },
        {
          "name": "strict-origin-when-cross-origin",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-strict-origin-when-cross-origin",
          "type": "value",
          "value": "strict-origin-when-cross-origin"
        },
        {
          "name": "unsafe-url",
          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-request-url-modifier-unsafe-url",
          "type": "value",
          "value": "unsafe-url"
        }
      ]
    },
    {
      "name": "<position>",
      "prose": "The <position> value specifies the position of an alignment subject (e.g. a background image) inside an alignment container (e.g. its background positioning area) as a pair of offsets between the specified edges (defaulting to the left and top). Its syntax is:",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-position",
      "type": "type",
      "value": "<position-one> | <position-two> | <position-four>",
      "values": [
        {
          "name": "<length-percentage>",
          "prose": "A <length-percentage> value specifies the size of the offset between the specified edges of the alignment subject and alignment container. For example, for background-position: 2cm 1cm, the top left corner of the background image is placed 2cm to the right and 1cm below the top left corner of the background positioning area. A <percentage> for the horizontal offset is relative to (width of alignment container - width of alignment subject). A <percentage> for the vertical offset is relative to (height of alignment container - height of alignment subject). For example, with a value pair of 0% 0%, the upper left corner of the alignment subject is aligned with the upper left corner of the alignment container A value pair of 100% 100% places the lower right corner of the alignment subject in the lower right corner of the alignment container. With a value pair of 75% 50%, the point 75% across and 50% down the alignment subject is to be placed at the point 75% across and 50% down the alignment container. Diagram of the meaning of background-position: 75% 50%.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-length-percentage",
          "type": "value",
          "value": "<length-percentage>"
        },
        {
          "name": "top",
          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-top",
          "type": "value",
          "value": "top"
        },
        {
          "name": "right",
          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-right",
          "type": "value",
          "value": "right"
        },
        {
          "name": "bottom",
          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-bottom",
          "type": "value",
          "value": "bottom"
        },
        {
          "name": "left",
          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-left",
          "type": "value",
          "value": "left"
        },
        {
          "name": "y-start",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the y-axisy/x axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-y-start",
          "type": "value",
          "value": "y-start"
        },
        {
          "name": "y-end",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the y-axisy/x axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-y-end",
          "type": "value",
          "value": "y-end"
        },
        {
          "name": "x-start",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the y-axisy/x axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-x-start",
          "type": "value",
          "value": "x-start"
        },
        {
          "name": "x-end",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the y-axisy/x axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-x-end",
          "type": "value",
          "value": "x-end"
        },
        {
          "name": "block-start",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-block-start",
          "type": "value",
          "value": "block-start"
        },
        {
          "name": "block-end",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-block-end",
          "type": "value",
          "value": "block-end"
        },
        {
          "name": "inline-start",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-inline-start",
          "type": "value",
          "value": "inline-start"
        },
        {
          "name": "inline-end",
          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-inline-end",
          "type": "value",
          "value": "inline-end"
        },
        {
          "name": "center",
          "prose": "Computes to a 50% offset in the corresponding axis.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-center",
          "type": "value",
          "value": "center"
        }
      ]
    },
    {
      "name": "<position-one>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-position-one",
      "type": "type",
      "value": "[ left | center | right | top | bottom | x-start | x-end | y-start | y-end | block-start | block-end | inline-start | inline-end | <length-percentage> ]"
    },
    {
      "name": "<position-two>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-position-two",
      "type": "type",
      "value": "[ [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] | [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] | [ block-start | center | block-end ] && [ inline-start | center | inline-end ] | [ start | center | end ]{2} ]"
    },
    {
      "name": "<position-four>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-position-four",
      "type": "type",
      "value": "[ [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] | [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] | [ [ start | end ] <length-percentage> ]{2} ]"
    },
    {
      "name": "progress()",
      "prose": "The progress() functional notation returns a <number> value representing the position of one calculation (the progress value) between two other calculations (the progress start value and progress end value). progress() is a math function.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-progress",
      "type": "function"
    },
    {
      "name": "<progress()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-progress-fn",
      "type": "type",
      "value": "progress(<calc-sum>, <calc-sum>, <calc-sum>)"
    },
    {
      "name": "media-progress()",
      "prose": "Similar to the progress() notation, the media-progress() functional notation returns a <number> value representing current value of the specified media query [MEDIAQUERIES-4] as a progress value between two explicit values of the media query (as the progress start value and progress end value).",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-media-progress",
      "type": "function"
    },
    {
      "name": "<media-progress()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-media-progress",
      "type": "type",
      "value": "media-progress(<mf-name>, <calc-sum>, <calc-sum>)"
    },
    {
      "name": "container-progress()",
      "prose": "The container-progress() functional notation is identical to the media-progress() functional notation, except that it accepts container features [CSS-CONTAIN-3] in place of media features.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-container-progress",
      "type": "function"
    },
    {
      "name": "<container-progress()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-container-progress",
      "type": "type",
      "value": "container-progress(<mf-name> [ of <container-name> ]?, <calc-sum>, <calc-sum>)"
    },
    {
      "name": "<progress>",
      "prose": "The <progress> value type represents the mix progress value in a mix notation, and ultimately resolves to a percentage. It can, however, draw that percentage value from sources such as media queries and animation timelines, and can also convert it through an easing function before using it for interpolation.",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-progress",
      "type": "type",
      "value": "[ <percentage-token> | <number> | <'animation-timeline'> ] && [ by <easing-function> ]?",
      "values": [
        {
          "name": "<percentage-token>",
          "prose": "Computes to the equivalent <number>: 0% becomes 0, 100% becomes 1, etc.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-progress-percentage-token",
          "type": "value",
          "value": "<percentage-token>"
        },
        {
          "name": "<number>",
          "prose": "Represents the mix progress value.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-progress-number",
          "type": "value",
          "value": "<number>"
        },
        {
          "name": "<'animation-timeline'>",
          "prose": "Represents the mix progress value as the progress of the specified animation timeline. The values none and auto, however, are invalid. [CSS-ANIMATIONS-2] [WEB-ANIMATIONS-2]",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-progress-animation-timeline",
          "type": "value",
          "value": "<'animation-timeline'>"
        },
        {
          "name": "<easing-function>",
          "prose": "Converts the specified input mix progress value into an output mix progress value using the specified easing function. [CSS-EASING-1]",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-progress-easing-function",
          "type": "value",
          "value": "<easing-function>"
        }
      ]
    },
    {
      "name": "calc-mix()",
      "prose": "The calc-mix() mix notation represents an interpolated numeric or dimensional value. Like calc(), it is a math function, with the following syntactic form:",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-calc-mix",
      "type": "function"
    },
    {
      "name": "<calc-mix()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-calc-mix",
      "type": "type",
      "value": "calc-mix( <progress>, <calc-sum>, <calc-sum> )"
    },
    {
      "name": "transform-mix()",
      "prose": "The transform-mix() mix notation represents an interpolated <transform-list>, with the following syntactic form:",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-transform-mix",
      "type": "function"
    },
    {
      "name": "<transform-mix()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-transform-mix",
      "type": "type",
      "value": "transform-mix( <progress>, <transform-list>, <transform-list> )"
    },
    {
      "name": "mix()",
      "prose": "Interpolation of any two property values can be represented by the mix() mix notation, which supports two alternative syntax patterns:",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-mix",
      "type": "function"
    },
    {
      "name": "<mix()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-mix",
      "type": "type",
      "value": "mix( <progress> , <whole-value> , <whole-value> ) | mix( <progress> && of <keyframes-name> )"
    },
    {
      "name": "first-valid()",
      "prose": "The first-valid() functional notation inlines the fallback behavior intrinsic to parsing declarations. Unlike most notations, it can accept any valid or invalid syntax in its arguments, and represents the first value among its arguments that is supported (parsed as valid) by the UA as the whole value of the property it’s used in.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-first-valid",
      "type": "function"
    },
    {
      "name": "<first-valid()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-first-valid",
      "type": "type",
      "value": "first-valid( <declaration-value># )"
    },
    {
      "name": "if()",
      "prose": "The if() notation is an arbitrary substitution function that represents conditional values. Its argument consists of an ordered semi-colon–separated list of statements, each consisting of a condition followed by a colon followed by a value. An if() notation represents the value corresponding to the first condition in its argument list to be true; if no condition matches, then the if() notation represents an empty token stream.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-if",
      "type": "function",
      "values": [
        {
          "name": "else",
          "prose": "The else keyword represents a condition that is always true.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-if-else",
          "type": "value",
          "value": "else"
        }
      ]
    },
    {
      "name": "<if()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-if",
      "type": "type",
      "value": "if( [ <if-condition> : <declaration-value>? ; ]* <if-condition> : <declaration-value>? ;? )"
    },
    {
      "name": "<if-condition>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-if-condition",
      "type": "type",
      "value": "<boolean-expr[ <if-test> ]> | else"
    },
    {
      "name": "<if-test>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-if-test",
      "type": "type",
      "value": "supports( [ <supports-condition> | <ident> : <declaration-value> ] ) | media( <media-query> ) | style( <style-query> )"
    },
    {
      "name": "toggle()",
      "prose": "The toggle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-toggle",
      "type": "function"
    },
    {
      "name": "<toggle()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-toggle",
      "type": "type",
      "value": "toggle( <whole-value># )"
    },
    {
      "name": "inherit()",
      "prose": "Like the inherit keyword, the inherit() functional notation resolves to the computed value of a property on the parent. Rather than resolving to the value of the same property, however, it resolves to the tokenized computed value of the property specified as its first argument. Its second argument, if present, is used as a fallback in case the first argument resolves to the guaranteed-invalid value.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-inherit",
      "type": "function"
    },
    {
      "name": "<inherit()>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-inherit",
      "type": "type",
      "value": "inherit( <custom-property-name>, <declaration-value>? )"
    },
    {
      "name": "attr()",
      "prose": "The attr() function substitutes the value of an attribute on an element into a property, similar to how the var() function substitutes a custom property value into a function.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-attr",
      "type": "function",
      "value": "attr( <attr-name> <attr-type>? , <declaration-value>?)",
      "values": [
        {
          "name": "type()",
          "value": "type( <syntax> )",
          "href": "https://drafts.csswg.org/css-values-5/#funcdef-attr-type",
          "type": "function"
        }
      ]
    },
    {
      "name": "<attr-name>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-attr-name",
      "type": "type",
      "value": "[ <ident-token>? '|' ]? <ident-token>"
    },
    {
      "name": "<attr-type>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-attr-type",
      "type": "type",
      "value": "type( <syntax> ) | string | <attr-unit>"
    },
    {
      "name": "<attr-unit>",
      "prose": "The <attr-unit> production matches any identifier that is an ASCII case-insensitive match for the name of a CSS dimension unit, such as px, or the <delim-token> %. It is not expanded literally here, as the set of units expands over time.",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-attr-unit",
      "type": "type"
    },
    {
      "name": "ident()",
      "prose": "The ident() function is an arbitrary substitution function that can be used to manually construct <custom-ident> values from several parts.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-ident",
      "type": "function",
      "value": "ident( <ident-arg>+ )"
    },
    {
      "name": "<ident-arg>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-ident-arg",
      "type": "type",
      "value": "<string> | <integer> | <ident>"
    },
    {
      "name": "random()",
      "prose": "The random() function is a math function that represents a random value between a minimum and maximum value, drawn from a uniform distribution, optionally limiting the possible values to a step between those limits:",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-random",
      "type": "function",
      "value": "random( <random-caching-options>? , <calc-sum>, <calc-sum>, [by <calc-sum>]? )"
    },
    {
      "name": "<random-caching-options>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-random-caching-options",
      "type": "type",
      "value": "<dashed-ident> || per-element"
    },
    {
      "name": "random-item()",
      "prose": "The random-item() function resolves to a random item from among its list of items.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-random-item",
      "type": "function",
      "value": "random-item( <random-caching-options> , [ <declaration-value>? ]# )"
    },
    {
      "name": "sibling-count()",
      "prose": "The sibling-count() functional notation represents, as an <integer>, the total number of child elements in the parent of the element on which the notation is used.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-sibling-count",
      "type": "function"
    },
    {
      "name": "sibling-index()",
      "prose": "The sibling-index() functional notation represents, as an <integer>, the index of the element on which the notation is used among the children of its parent. Like :nth-child(), sibling-index() is 1-indexed.",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-sibling-index",
      "type": "function"
    },
    {
      "name": "calc-size()",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-calc-size",
      "type": "function",
      "value": "calc-size( <calc-size-basis>, <calc-sum> )",
      "values": [
        {
          "name": "size",
          "prose": "Within the calc-size calculation, if the calc-size basis is not any, the keyword size is allowed. This keyword is a <length>, and resolves at used value time.",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-calc-size-size",
          "type": "value",
          "value": "size"
        },
        {
          "name": "any",
          "prose": "(If the calc-size basis is any, the calc-size() is a definite length, equal to its calc-size calculation.)",
          "href": "https://drafts.csswg.org/css-values-5/#valdef-calc-size-any",
          "type": "value",
          "value": "any"
        }
      ]
    },
    {
      "name": "<calc-size-basis>",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-calc-size-basis",
      "type": "type",
      "value": "[ <intrinsic-size-keyword> | <calc-size()> | any | <calc-sum> ]"
    },
    {
      "name": "<intrinsic-size-keyword>",
      "prose": "The <intrinsic-size-keyword> production matches any intrinsic size keywords allowed in the context. For example, in width, it matches auto, min-content, stretch, etc.",
      "href": "https://drafts.csswg.org/css-values-5/#typedef-intrinsic-size-keyword",
      "type": "type"
    }
  ],
  "warnings": [
    {
      "msg": "Duplicate definition",
      "name": "ident()",
      "href": "https://drafts.csswg.org/css-values-5/#funcdef-ident%E2%91%A0",
      "type": "function"
    },
    {
      "msg": "Missing definition",
      "name": "]>",
      "value": "not <boolean-expr-group> | <boolean-expr-group> [ [ and <boolean-expr-group> ]* | [ or <boolean-expr-group> ]* ]"
    },
    {
      "msg": "Missing definition",
      "name": "<boolean-expr-group>",
      "value": "<test> | ( <boolean-expr[ <test> ]> ) | <general-enclosed>"
    },
    {
      "msg": "Missing definition",
      "name": "progress-function()",
      "value": "progress-function( progress value from start value to end value )"
    },
    {
      "msg": "Missing definition",
      "name": "mix-function()",
      "value": "mix-function( <progress>,"
    },
    {
      "msg": "Missing definition",
      "name": "<color-mix()>",
      "value": "color-mix( [ <progress> && <color-interpolation-method>? ] , <color>, <color> ) | color-mix( <color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2} )"
    },
    {
      "msg": "Missing definition",
      "name": "<cross-fade()>",
      "value": "cross-fade( <progress>, [ <image> | <color> ], [ <image> | <color> ] ) | cross-fade( <cf-image># )"
    }
  ]
}