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 4</title> <meta content="WD" name="w3c-status"> <meta content="Bikeshed version 4951e4d19, updated Mon Feb 5 17:13:30 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-values-4/" rel="canonical"> <meta content="abc5bdd1d65640e9d7d1449fefa3aa78e40bcf43" name="revision"> <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> /* Put nice boxes around each algorithm. */ [data-algorithm]:not(.heading) { padding: .5em; border: thin solid #ddd; border-radius: .5em; margin: .5em calc(-0.5em - 1px); } [data-algorithm]:not(.heading) > :first-child { margin-top: 0; } [data-algorithm]:not(.heading) > :last-child { margin-bottom: 0; } [data-algorithm] [data-algorithm] { margin: 1em 0; } </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-caniuse-panel */ @media (max-width: 767px) { .caniuse-status { opacity: .1; transition: opacity .1s; } } :root { --caniuse-bg: #EEE; --caniuse-shadow: #999; --caniuse-nosupport-text: #ccc; --caniuse-partialsupport-text: #666; } @media (prefers-color-scheme: dark) { :root { --caniuse-bg: #222; --caniuse-shadow: #444; --caniuse-nosupport-text: #666; --caniuse-partialsupport-text: #bbb; } } .caniuse-status { background: var(--caniuse-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--caniuse-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: .2em; position: absolute; right: 0.3em; top: auto; width: fit-content; word-wrap: normal; z-index: 8; } .caniuse-status.unpositioned { display: none; } .caniuse-status.overlapping-main { opacity: .2; transition: opacity .1s; } .caniuse-status[open] { opacity: 1; z-index: 9; min-width: 9em; width: fit-content; } .caniuse-status:hover { outline: var(--text, black) 1px solid; opacity: 1; } .caniuse-status > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .caniuse-status > p { font-size: 0.6em; margin: 0; padding: 0; clear: both; } .caniuse-status > p + p { padding-top: 0.5em; } .caniuse-status > .support { display: block; } .caniuse-status > .support > span { padding: 0.2em 0; display: block; display: table; } .caniuse-status > .support > span.partial { color: var(--caniuse-partialsupport-text, #666666); filter: grayscale(50%); } .caniuse-status > .support > span.no { color: var(--caniuse-nosupport-text, #CCCCCC); filter: grayscale(100%); } .caniuse-status > .support > span.no::before { opacity: 0.5; } .caniuse-status > .support > span:first-of-type { padding-top: 0.5em; } .caniuse-status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; } .caniuse-status > .support > span > span:first-child { width: 100%; } .caniuse-status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .caniuse-status > .support > span::before { content: ' '; display: table-cell; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .caniuse-status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */ .caniuse-status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); } .caniuse-status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */ .caniuse-status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .caniuse-status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .caniuse-status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); } .caniuse-status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .caniuse-status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); } .caniuse-status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .caniuse-status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .caniuse-status > .caniuse { text-align: right; font-style: italic; } @media (max-width: 767px) { .caniuse-status.wrapped { width: 9em; height: auto; } .caniuse-status:not(.wrapped) { height: 1em; max-width: min-content; } .caniuse-status.wrapped > :not(input) { display: block; } .caniuse-status:not(.wrapped) > :not(input) { display: none; } } </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) */ [data-algorithm] var { cursor: pointer; } var[data-var-color="0"] { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } var[data-var-color="1"] { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } var[data-var-color="2"] { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } var[data-var-color="3"] { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } var[data-var-color="4"] { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } var[data-var-color="5"] { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } var[data-var-color="6"] { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } </style> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-WD" rel="stylesheet"> <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 4</h1> <a href="https://www.w3.org/standards/types#WD">W3C Working Draft</a>, <time class="dt-updated" datetime="2024-03-12">12 March 2024</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/2024/WD-css-values-4-20240312/">https://www.w3.org/TR/2024/WD-css-values-4-20240312/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-values-4/">https://www.w3.org/standards/history/css-values-4/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-values-4">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) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-values-4/Overview.bs">GitHub Editor</a> <dt>Test Suite: <dd class="wpt-overview"><a href="https://wpt.fyi/results/css/css-values/">https://wpt.fyi/results/css/css-values/</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <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. </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/2023/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/2023/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/Consortium/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/Consortium/Patent-Policy-20200915/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20200915/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </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="#value-defs">2 Value Definition Syntax</a> <ol class="toc"> <li><a href="#component-types">2.1 Component Value Types</a> <li><a href="#component-combinators">2.2 Component Value Combinators</a> <li><a href="#component-multipliers">2.3 Component Value Multipliers</a> <li><a href="#combinator-multiplier-patterns">2.4 Combinator and Multiplier Patterns</a> <li><a href="#component-whitespace">2.5 Component Values and White Space</a> <li><a href="#component-functions">2.6 Functional Notation Definitions</a> <li><a href="#value-examples">2.7 Property Value Examples</a> <li><a href="#production-blocks">2.8 Non-Terminal Definitions and Grammar Production Blocks</a> </ol> <li> <a href="#combining-values">3 Combining Values: Interpolation, Addition, and Accumulation</a> <ol class="toc"> <li><a href="#combining-range">3.1 Range Checking</a> </ol> <li> <a href="#textual-values">4 Textual Data Types</a> <ol class="toc"> <li> <a href="#keywords">4.1 Pre-defined Keywords</a> <ol class="toc"> <li><a href="#common-keywords">4.1.1 CSS-wide keywords: initial, inherit and unset</a> </ol> <li><a href="#custom-idents">4.2 Unprefixed Author-defined Identifiers: the <custom-ident> type</a> <li><a href="#dashed-idents">4.3 Prefixed Author-defined Identifiers: the <dashed-ident> type</a> <li><a href="#strings">4.4 Quoted Strings: the <string> type</a> <li> <a href="#urls">4.5 Resource Locators: the <url> type</a> <ol class="toc"> <li> <a href="#relative-urls">4.5.1 Relative URLs</a> <ol class="toc"> <li><a href="#local-urls">4.5.1.1 Fragment URLs</a> </ol> <li><a href="#url-empty">4.5.2 Empty URLs</a> <li><a href="#url-modifiers">4.5.3 URL Modifiers</a> <li><a href="#url-processing">4.5.4 URL Processing Model</a> </ol> </ol> <li> <a href="#numeric-types">5 Numeric Data Types</a> <ol class="toc"> <li><a href="#numeric-ranges">5.1 Range Restrictions and Range Definition Notation</a> <li> <a href="#integers">5.2 Integers: the <integer> type</a> <ol class="toc"> <li><a href="#combine-integers">5.2.1 Computation and Combination of <integer></a> </ol> <li> <a href="#numbers">5.3 Real Numbers: the <number> type</a> <ol class="toc"> <li><a href="#combine-numbers">5.3.1 Computation and Combination of <number></a> </ol> <li> <a href="#dimensions">5.4 Numbers with Units: dimension values</a> <ol class="toc"> <li><a href="#compat">5.4.1 Compatible Units</a> <li><a href="#combine-dimensions">5.4.2 Combination of Dimensions</a> </ol> <li> <a href="#percentages">5.5 Percentages: the <percentage> type</a> <ol class="toc"> <li><a href="#combine-percentages">5.5.1 Computation and Combination of <percentage></a> </ol> <li> <a href="#mixed-percentages">5.6 Mixing Percentages and Dimensions</a> <ol class="toc"> <li><a href="#combine-mixed">5.6.1 Computation and Combination of Percentage and Dimension Mixes</a> </ol> <li> <a href="#ratios">5.7 Ratios: the <ratio> type</a> <ol class="toc"> <li><a href="#combine-ratio">5.7.1 Combination of <ratio></a> </ol> </ol> <li> <a href="#lengths">6 Distance Units: the <length> type</a> <ol class="toc"> <li> <a href="#relative-lengths">6.1 Relative Lengths</a> <ol class="toc"> <li><a href="#font-relative-lengths">6.1.1 Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units</a> <li><a href="#viewport-relative-lengths">6.1.2 Viewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units</a> </ol> <li><a href="#absolute-lengths">6.2 Absolute Lengths: the cm, mm, Q, in, pt, pc, px units</a> </ol> <li> <a href="#other-units">7 Other Quantities</a> <ol class="toc"> <li><a href="#angles">7.1 Angle Units: the <angle> type and deg, grad, rad, turn units</a> <li><a href="#time">7.2 Duration Units: the <time> type and s, ms units</a> <li><a href="#frequency">7.3 Frequency Units: the <frequency> type and Hz, kHz units</a> <li><a href="#resolution">7.4 Resolution Units: the <resolution> type and dpi, dpcm, dppx units</a> </ol> <li> <a href="#defined-elsewhere">8 Data Types Defined Elsewhere</a> <ol class="toc"> <li> <a href="#colors">8.1 Colors: the <color> type</a> <ol class="toc"> <li><a href="#combine-colors">8.1.1 Combination of <color></a> </ol> <li> <a href="#images">8.2 Images: the <image> type</a> <ol class="toc"> <li><a href="#combine-images">8.2.1 Combination of <image></a> </ol> <li> <a href="#position">8.3 2D Positioning: the <position> type</a> <ol class="toc"> <li><a href="#position-parsing">8.3.1 Parsing <position></a> <li><a href="#position-serialization">8.3.2 Serializing <position></a> <li><a href="#combine-positions">8.3.3 Combination of <position></a> </ol> </ol> <li><a href="#functional-notations">9 Functional Notations</a> <li> <a href="#math">10 Mathematical Expressions</a> <ol class="toc"> <li><a href="#calc-func">10.1 Basic Arithmetic: calc()</a> <li><a href="#comp-func">10.2 Comparison Functions: min(), max(), and clamp()</a> <li> <a href="#round-func">10.3 Stepped Value Functions: round(), mod(), and rem()</a> <ol class="toc"> <li><a href="#round-infinities">10.3.1 Argument Ranges</a> </ol> <li> <a href="#trig-funcs">10.4 Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()</a> <ol class="toc"> <li><a href="#trig-infinities">10.4.1 Argument Ranges</a> </ol> <li> <a href="#exponent-funcs">10.5 Exponential Functions: pow(), sqrt(), hypot(), log(), exp()</a> <ol class="toc"> <li><a href="#exponent-infinities">10.5.1 Argument Ranges</a> </ol> <li><a href="#sign-funcs">10.6 Sign-Related Functions: abs(), sign()</a> <li> <a href="#calc-keywords">10.7 Numeric Keywords</a> <ol class="toc"> <li><a href="#calc-constants">10.7.1 Numeric Constants: e, pi</a> <li><a href="#calc-error-constants">10.7.2 Degenerate Numeric Constants: infinity, -infinity, NaN</a> <li><a href="#calc-variables">10.7.3 Numeric Variables</a> </ol> <li><a href="#calc-syntax">10.8 Syntax</a> <li> <a href="#calc-type-checking">10.9 Type Checking</a> <ol class="toc"> <li><a href="#calc-ieee">10.9.1 Infinities, NaN, and Signed Zero</a> </ol> <li> <a href="#calc-internal">10.10 Internal Representation</a> <ol class="toc"> <li><a href="#calc-simplification">10.10.1 Simplification</a> </ol> <li><a href="#calc-computed-value">10.11 Computed Value</a> <li><a href="#calc-range">10.12 Range Checking</a> <li><a href="#calc-serialize">10.13 Serialization</a> <li><a href="#combine-math">10.14 Combination of Math Functions</a> </ol> <li><a href="#linked-properties"> Appendix A: Coordinating List-Valued Properties</a> <li> <a href="#iana"> Appendix B: IANA Considerations</a> <ol class="toc"> <li><a href="#about-invalid"> Registration for the <code class="highlight"><c- k>about</c-><c- p>:</c->invalid</code> URL scheme</a> </ol> <li><a href="#deprecated-quirky-length"> Appendix C: Quirky Lengths</a> <li><a href="#acknowledgments"> Acknowledgments</a> <li> <a href="#changes"> Changes</a> <ol class="toc"> <li><a href="#changes-recent"> Recent Changes</a> <li><a href="#additions-L3"> Additions Since Level 3</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="#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> The value definition field of each CSS property can contain keywords, data types (which appear between < and >), and information on how they can be combined. Generic data types (<a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value"><length></a> being the most widely used) that can be used by many properties are described in this specification, while more specific data types (e.g., <a class="production css" data-link-type="type"><spacing-limit></a>) are described in the corresponding modules. <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module Interactions<a class="self-link" href="#placement"></a></h3> This module replaces and extends the data type definitions in <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> sections <a href="https://www.w3.org/TR/CSS2/about.html#value-defs">1.4.2.1</a>, <a href="https://www.w3.org/TR/CSS2/syndata.html#values">4.3</a>, and <a href="https://www.w3.org/TR/CSS2/aural.html#aural-intro">A.2</a>. <h2 class="heading settled" data-level="2" id="value-defs">2. Value Definition Syntax<a class="self-link" href="#value-defs"></a></h2> The <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-value-definition-syntax">value definition syntax</dfn> described here is used to define the set of valid values for CSS properties (and the valid syntax of many other parts of CSS). A value so described can have one or more components. <h3 class="heading settled" data-level="2.1" id="component-types">2.1. Component Value Types<a class="self-link" href="#component-types"></a></h3> Component value types are designated in several ways: <ol> <li data-md> <a href="#keywords">Keyword</a> values (such as auto, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-counter-styles-3/#disc" id="ref-for-disc">disc</a>, etc.), which appear literally, without quotes (e.g. <code class="highlight">auto</code>). <li data-md> Basic data types, which appear between < and > (e.g., <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①"><length></a>, <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value"><percentage></a>, etc.). For <a data-link-type="dfn" href="#numeric-data-types" id="ref-for-numeric-data-types">numeric data types</a>, this type notation can annotate any range restrictions using the <a href="#numeric-ranges">bracketed range notation</a> described below. <li data-md> Property value ranges, which represent the same pattern of values as a property bearing the same name. These are written as the property name, surrounded by single quotes, between < and >, e.g., <a class="production css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width"><'border-width'></a>, <a class="production css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-attachment" id="ref-for-propdef-background-attachment"><'background-attachment'></a>, etc. These types do not include <a href="#common-keywords">CSS-wide keywords</a> such as <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>. Additionally, if the property’s value grammar is a <a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma">comma-separated repetition</a>, the corresponding type does not include the top-level comma-separated list multiplier. (E.g. if a property named pairing is defined as [ <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value"><custom-ident></a> <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value"><integer></a>? ]#, then <'pairing'> is equivalent to [ <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①"><custom-ident></a> <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①"><integer></a>? ], not [ <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value②"><custom-ident></a> <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value②"><integer></a>? ]#.)\ <details class="note"> <summary>Why remove the multiplier?</summary> The top-level multiplier is ripped out of these value types because top-level comma-separated repetitions are mostly used for <a data-link-type="dfn" href="#coordinating-list-property" id="ref-for-coordinating-list-property">coordinating list properties</a>, and when a shorthand combines several such properties, it needs the unmultiplied grammar so it can construct its own comma-separated repetition. Without this special treatment, every such longhand would have to be defined with an ad-hoc production just for the inner value, which makes the grammars harder to understand overall. </details> <li data-md> Functional notations and their arguments. These are written as the function’s name, followed by an empty parentheses pair, between < and >, e.g. <a class="production css" data-link-type="function" href="#funcdef-calc" id="ref-for-funcdef-calc"><calc()></a>, and references the correspondingly-named <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation">functional notation</a>. <li data-md> Other non-terminals. These are written as the name of the non-terminal between < and >, as in <a class="production css" data-link-type="type"><spacing-limit></a>. Notice the distinction between <a class="production css" data-link-type="type" href="https://www.w3.org/TR/CSS21/box.html#value-def-border-width" id="ref-for-value-def-border-width"><border-width></a> and <a class="production css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width①"><'border-width'></a>: the latter represents the grammar of the border-width property, the former requires an explicit expansion elsewhere. The definition of a non-terminal is typically located near its first appearance in the specification. </ol> Some property value definitions also include the slash (/), the comma (,), and/or parentheses as literals. These represent their corresponding tokens. Other non-keyword literal characters that may appear in a component value, such as “+”, must be written enclosed in single quotes. <dfn class="dfn-paneled" data-dfn-type="grammar" data-export data-lt="," id="comb-comma">Commas</dfn> specified in the grammar are implicitly omissible in some circumstances, when used to separate optional terms in the grammar. Within a top-level list in a property or other CSS value, or a function’s argument list, a comma specified in the grammar must be omitted if: <ul> <li> all items preceding the comma have been omitted <li> all items following the comma have been omitted <li> multiple commas would be adjacent (ignoring <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a>/comments), due to the items between the commas being omitted. </ul> <div class="example" id="example-c02dd41d"> <a class="self-link" href="#example-c02dd41d"></a> For example, if a function can accept three arguments in order, but all of them are optional, the grammar can be written like: <pre class="prod highlight"><c- nf>example</c-><c- p>(</c-> first<a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma"><c- p>,</c-></a> second<a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt①">?</a> <a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma①"><c- p>,</c-></a> third<a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt②">?</a> <c- p>)</c-> </pre> Given this grammar, writing example(first, second, third) is valid, as is example(first, second) or example(first, third) or example(second). However, example(first, , third) is invalid, as one of those commas are no longer separating two options; similarly, example(,second) and example(first,) are invalid. example(first second) is also invalid, as commas are still required to actually separate the options. If commas were not implicitly omittable, the grammar would have to be much more complicated to properly express the ways that the arguments can be omitted, greatly obscuring the simplicity of the feature. </div> All CSS properties also accept the <a href="#common-keywords">CSS-wide keyword values</a> as the sole component of their property value. For readability these are not listed explicitly in the property value syntax definitions. For example, the full value definition of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a> under <a data-link-type="biblio" href="#biblio-css-cascade-3" title="CSS Cascading and Inheritance Level 3">CSS Cascading and Inheritance Level 3</a> is <code class="highlight"><color><c- p>{</c-><c- m>1</c-><c- p>,</c-><c- m>4</c-><c- p>}</c-> | inherit | initial | unset</code> (even though it is listed as <code class="highlight"><color><c- p>{</c-><c- m>1</c-><c- p>,</c-><c- m>4</c-><c- p>}</c-></code>). Note: This implies that, in general, combining these keywords with other component values in the same declaration results in an invalid declaration. For example, <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background: url(corner.png) no-repeat, inherit;</a> is invalid. <h3 class="heading settled" data-level="2.2" id="component-combinators">2.2. Component Value Combinators<a class="self-link" href="#component-combinators"></a></h3> Component values can be arranged into property values as follows: <ul> <li>Juxtaposing components means that all of them must occur, in the given order. <li>A double ampersand (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="comb-all">&&</dfn>) separates two or more components, all of which must occur, in any order. <li>A double bar (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="comb-any">||</dfn>) separates two or more options: one or more of them must occur, in any order. <li>A bar (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="comb-one">|</dfn>) separates two or more alternatives: exactly one of them must occur. <li>Brackets ([ ]) are for grouping. </ul> Juxtaposition is stronger than the double ampersand, the double ampersand is stronger than the double bar, and the double bar is stronger than the bar. Thus, the following lines are equivalent: <pre class="highlight"> a b | c || d && e f <c- p>[</c-> a b <c- p>]</c-> | <c- p>[</c-> c || <c- p>[</c-> d && <c- p>[</c-> e f <c- p>]]]</c-> </pre> For reorderable combinators (||, &&), ordering of the grammar does not matter: components in the same grouping may be interleaved in any order. Thus, the following lines are equivalent: <pre class="highlight">a || b || c b || a || c </pre> Note: Combinators are not associative, so grouping is significant. For example, a || b || c and a || [ b || c ] are distinct grammars: the first allows a value like b a c, but the second does not. <h3 class="heading settled" data-level="2.3" id="component-multipliers">2.3. Component Value Multipliers<a class="self-link" href="#component-multipliers"></a></h3> Every type, keyword, or bracketed group may be followed by one of the following modifiers: <ul> <li>An asterisk (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-zero-plus">*</dfn>) indicates that the preceding type, word, or group occurs zero or more times. <li>A plus (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-one-plus">+</dfn>) indicates that the preceding type, word, or group occurs one or more times. <li>A question mark (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-opt">?</dfn>) indicates that the preceding type, word, or group is optional (occurs zero or one times). <li>A single number in curly braces (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-num">{<var>A</var>}</dfn>) indicates that the preceding type, word, or group occurs <var>A</var> times. <li>A comma-separated pair of numbers in curly braces (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-num-range">{<var>A</var>,<var>B</var>}</dfn>) indicates that the preceding type, word, or group occurs at least <var>A</var> and at most <var>B</var> times. The <var>B</var> may be omitted ({<var>A</var>,}) to indicate that there must be at least <var>A</var> repetitions, with no upper bound on the number of repetitions. <li>A hash mark (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-comma">#</dfn>) indicates that the preceding type, word, or group occurs one or more times, separated by comma tokens (which may optionally be surrounded by <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a> and/or comments). It may optionally be followed by the curly brace forms, above, to indicate precisely how many times the repetition occurs, like <length>#{1,4}. <li>An exclamation point (<dfn class="dfn-paneled" data-dfn-type="grammar" data-export id="mult-req">!</dfn>) after a group indicates that the group is required and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted. </ul> The + and # multipliers may be stacked as +#; similarly, the # and ? multipliers may be stacked as #?. These stacks each represent the later multiplier applied to the result of the earlier multiplier. (These same stacks can be represented using grouping, but in complex grammars this can push the number of brackets beyond readability.) For repeated component values (indicated by *, +, or #), <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent">UAs</a> must support at least 20 repetitions of the component. If a property value contains more than the supported number of repetitions, the declaration must be ignored as if it were invalid. <h3 class="heading settled" data-level="2.4" id="combinator-multiplier-patterns">2.4. Combinator and Multiplier Patterns<a class="self-link" href="#combinator-multiplier-patterns"></a></h3> There are a small set of common ways to combine multiple independent <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#component-value" id="ref-for-component-value">component values</a> in particular numbers and orders. In particular, it’s common to want to express that, from a set of component value, the author must select zero or more, one or more, or all of them, and in either the order specified in the grammar or in any order. All of these can be easily expressed using simple patterns of <a href="#component-combinators">combinators</a> and <a href="#component-multipliers">multipliers</a>: <table class="data"> <thead> <tr> <th> <th>in order <th>any order <tbody> <tr> <th>zero or more <td><code class="highlight">A? B? C?</code> <td><code class="highlight">A? || B? || C?</code> <tr> <th>one or more <td><code class="highlight"><c- p>[</c-> A? B? C? <c- p>]</c->!</code> <td><code class="highlight">A || B || C</code> <tr> <th>all <td><code class="highlight">A B C </code> <td><code class="highlight">A && B && C</code> </table> Note that all of the "any order" possibilities are expressed using combinators, while the "in order" possibilities are all variants on juxtaposition. <h3 class="heading settled" data-level="2.5" id="component-whitespace">2.5. Component Values and White Space<a class="self-link" href="#component-whitespace"></a></h3> Unless otherwise specified, <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a> and/or comments may appear before, after, and/or between components combined using the above <a href="#component-combinators">combinators</a> and <a href="#component-multipliers">multipliers</a>. Note: In many cases, spaces will in fact be required between components in order to distinguish them from each other. For example, the value 1em2em would be parsed as a single <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token"><dimension-token></a> with the number 1 and the identifier em2em, which is an invalid unit. In this case, a space would be required before the 2 to get this parsed as the two lengths 1em and 2em. <h3 class="heading settled" data-level="2.6" id="component-functions">2.6. Functional Notation Definitions<a class="self-link" href="#component-functions"></a></h3> The syntax of a <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation①">functional notation</a> is defined as a sequence of: <ol> <li data-md> The function’s name written as an identifier followed by an open parenthesis (such as example(), or the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-function-token" id="ref-for-typedef-function-token"><function-token></a> production to indicate a function with an arbitrary name. <li data-md> The function’s arguments, if any, expressed using the <a data-link-type="dfn" href="#css-value-definition-syntax" id="ref-for-css-value-definition-syntax">value definition syntax</a>. <li data-md> A literal closing parenthesis. </ol> The function’s arguments are considered implicitly grouped, as if surrounded by brackets ([ ... ]). <div class="example" id="example-0cdbfbca"> <a class="self-link" href="#example-0cdbfbca"></a> For example, a grammar like: <pre class="prod highlight"><c- nf>example</c-><c- p>(</c-> <length> <a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma②"><c- p>,</c-></a> <length> <c- p>)</c-> </pre> will match a function whose name is "example" and whose arguments match "<a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②"><length></a> , <length>". </div> <div class="example" id="example-99e5c2a2"> <a class="self-link" href="#example-99e5c2a2"></a> For example, the Selectors grammar defines pseudo-classes generically, allowing any possibly function name after the initial colon: <pre class="prod highlight"><pseudo-class-selector> = <c- s>':'</c-> <ident-token> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one">|</a> <c- s>':'</c-> <function-token> <any-value> <c- s>')'</c-> </pre> This represents any function name, with <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> as the function arguments. </div> <div class="example" id="example-885ed9bc"><a class="self-link" href="#example-885ed9bc"></a> Since the <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation②">functional notation</a> implicitly groups its contents, the effect of any combinator inside it is scoped to the function’s argument. For example, the functional notation syntax definition example( foo | bar ) is equivalent to example( [ foo | bar ] ). </div> <h3 class="heading settled" data-level="2.7" id="value-examples">2.7. Property Value Examples<a class="self-link" href="#value-examples"></a></h3> Below are some examples of properties with their corresponding value definition fields <div class="example" id="example-78954521"> <a class="self-link" href="#example-78954521"></a> <table class="data" id="propvalues"> <thead> <tr> <th>Property <th>Value definition field <th>Example value <tbody> <tr> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans">orphans</a> <td><integer> <td>3 <tr> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> <td>left | right | center | justify <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-4/#valdef-text-align-center" id="ref-for-valdef-text-align-center">center</a> <tr> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top">padding-top</a> <td><length> | <percentage> <td>5% <tr> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-ui-4/#propdef-outline-color" id="ref-for-propdef-outline-color">outline-color</a> <td><color> | invert <td>#fefefe <tr> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a> <td>none | underline || overline || line-through || blink <td>overline underline <tr> <td><a class="css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family">font-family</a> <td>[ <family-name> | <generic-family> ]# <td>"Gill Sans", Futura, sans-serif <tr> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width③">border-width</a> <td>[ <length> | thick | medium | thin ]{1,4} <td>2px medium 4px <tr> <td><a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow" id="ref-for-propdef-box-shadow">box-shadow</a> <td>[ inset? && <length>{2,4} && <color>? ]# | none <td>3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset </table> </div> <h3 class="heading settled" data-level="2.8" id="production-blocks">2.8. Non-Terminal Definitions and Grammar Production Blocks<a class="self-link" href="#production-blocks"></a></h3> The precise grammar of non-terminals, like <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position"><position></a> or <a class="production css" data-link-type="function" href="#funcdef-calc" id="ref-for-funcdef-calc①"><calc()></a>, is often specified in a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="css-grammar-production-block">CSS grammar production block</dfn>. These are conventionally represented in a preformatted block of definitions like this: <div class="example" id="example-b4765280"> <a class="self-link" href="#example-b4765280"></a> The <foo> syntax is defined as follows: <pre class="prod highlight"><foo> = keyword <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①">|</a> <bar> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②">|</a> some-really-long-pattern-of-stuff <bar> = <length> </pre> </div> Each definition starts on its own line, and consists of the non-terminal to be defined, followed by an <code class="highlight">=</code>, followed by the fragment of <a data-link-type="dfn" href="#css-value-definition-syntax" id="ref-for-css-value-definition-syntax①">value definition syntax</a> to which it expands. A definition can stretch across multiple lines, and terminates before the next line that starts a new grammar production or at the end of the grammar production block (whichever comes first). <div class="example" id="example-3cb12b0e"><a class="self-link" href="#example-3cb12b0e"></a> In the above example, the <foo> definition covers two lines. The third line starts a new definition for <bar>. (A naked <code class="highlight">=</code> is never valid in <a data-link-type="dfn" href="#css-value-definition-syntax" id="ref-for-css-value-definition-syntax②">value definition syntax</a>, so it’s unambiguous when a new line starts a fresh definition.) </div> <h2 class="heading settled" data-level="3" id="combining-values">3. Combining Values: Interpolation, Addition, and Accumulation<a class="self-link" href="#combining-values"></a></h2> Some procedures, for example <a href="https://www.w3.org/TR/css-transitions/">transitions</a> and <a href="https://www.w3.org/TR/css-animations/">animations</a>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="combine">combine</dfn> two CSS property values. The following combining operations—on the two <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value">computed values</a> <var>VA</var> and <var>VB</var> yielding the computed value <var>Vresult</var>—are defined. For operations that are not commutative (for example, matrix multiplication, or accumulation of mismatched transform lists) <var>VA</var> represents the first term of the operation and <var>VB</var> represents the second. <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="interpolation | interpolate | value interpolation | interpolation procedure" id="interpolation">interpolation</dfn> <dd> Given two property values <var>VA</var> and <var>VB</var>, produces an intermediate value <var>Vresult</var> at a distance of <var>p</var> along the interval between <var>VA</var> and <var>VB</var> such that <var>p</var> = 0 produces <var>VA</var> and <var>p</var> = 1 produces <var>V</var>B. The range of <var>p</var> is (−∞, ∞) due to the effect of <a data-link-type="dfn" href="https://www.w3.org/TR/css-easing-1/#easing-function" id="ref-for-easing-function">timing functions</a>. As a result, this procedure must also define extrapolation behavior for <var>p</var> outside [0, 1]. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="add | addition" data-lt="value addition | addition procedure" id="addition">addition</dfn> <dd> Given two property values <var>VA</var> and <var>VB</var>, returns the sum of the two properties, <var>V</var>result. Note: While <a data-link-type="dfn" href="#addition" id="ref-for-addition">addition</a> can often be expressed in terms of the same weighted sum function used to define <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation">interpolation</a>, this is not always the case. For example, interpolation of transform matrices involves decomposing and interpolating the matrix components whilst addition relies on matrix multiplication. If a value type does not define a specific procedure for <a data-link-type="dfn" href="#addition" id="ref-for-addition①">addition</a> or is defined as <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="not-additive">not additive</dfn>, its addition operation is simply <var>Vresult</var> = <var>VB</var>. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="accumulate | accumulation" data-lt="value accumulation | accumulation procedure" id="accumulation">accumulation</dfn> <dd> Given two property values <var>VA</var> and <var>VB</var>, returns the result, <var>Vresult</var>, of combining the two operands such that <var>VB</var> is treated as a delta from <var>VA</var>. <div class="note" role="note"> Note: For many types of animation such as numbers or lengths, <a data-link-type="dfn" href="#accumulation" id="ref-for-accumulation">accumulation</a> is defined to be identical to <a data-link-type="dfn" href="#addition" id="ref-for-addition③">addition</a>. A common case where the definitions differ is for list-based types where <a data-link-type="dfn" href="#addition" id="ref-for-addition④">addition</a> may be defined as appending to a list whilst <a data-link-type="dfn" href="#accumulation" id="ref-for-accumulation①">accumulation</a> may be defined as component-based addition. For example, the filter list values blur(2) and blur(3), when added together would produce blur(2) blur(3), but when accumulated would produce blur(5). </div> If a value type does not define a specific procedure for <a data-link-type="dfn" href="#accumulation" id="ref-for-accumulation③">accumulation</a>, its accumulation operation is identical to <a data-link-type="dfn" href="#addition" id="ref-for-addition⑥">addition</a>. </dl> These operations are only defined on <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed values</a>. (As a result, it is not necessary to define, for example, how to add a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value④"><length></a> value of 15pt with 5em since such values will be resolved to their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit">canonical unit</a> before being passed to any of the above procedures.) <h3 class="heading settled" data-level="3.1" id="combining-range">3.1. Range Checking<a class="self-link" href="#combining-range"></a></h3> Interpolation can result in a value outside the valid range for a property, even if all of the inputs to interpolation are valid; this especially happens when <var>p</var> is outside the [0, 1] range, but some <a data-link-type="dfn" href="https://www.w3.org/TR/css-easing-1/#easing-function" id="ref-for-easing-function①">easing functions</a> can cause this to occur even within that range. If the final result after interpolation, addition, and accumulation is out-of-range for the target context the value is being used in, it does not cause the declaration to be invalid. Instead, the value must be clamped to the range allowed in the target context, exactly the same as <a data-link-type="dfn" href="#math-function" id="ref-for-math-function">math functions</a> (see <a href="#calc-range">§ 10.12 Range Checking</a>). Note: Even if interpolation results in an out-of-range value, addition/accumulation might "correct" the result and bring it back into range. Thus, clamping is only applied to the final result of applying all interpolation-related operations. <h2 class="heading settled" data-level="4" id="textual-values">4. Textual Data Types<a class="self-link" href="#textual-values"></a></h2> The <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-textual-data-types">textual data types</dfn> include various keywords and identifiers as well as strings (<a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value"><string></a>) and URLs (<a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value"><url></a>). Aside from the casing of <a href="#keywords">pre-defined keywords</a> or as explicitly defined for a given property, no normalization is performed, not even Unicode normalization: the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value">specified</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value③">computed value</a> of a property are exactly the provided Unicode values after parsing (which includes character set conversion and <a href="https://www.w3.org/TR/css-syntax-3/#escaping">escaping</a>). <a data-link-type="biblio" href="#biblio-unicode" title="The Unicode Standard">[UNICODE]</a> <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a> CSS <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="CSS identifier | CSS ident | identifier | ident" id="css-css-identifier">identifiers</dfn>, generically denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-ident"><ident></dfn>, consist of a sequence of characters conforming to the <a class="production css" 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> grammar. <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a> Identifiers cannot be quoted; otherwise they would be interpreted as strings. CSS properties accept two classes of <a data-link-type="dfn" href="#css-css-identifier" id="ref-for-css-css-identifier">identifiers</a>: <a href="#keywords">pre-defined keywords</a> and <a href="#custom-idents">author-defined identifiers</a>. Note: The <a class="production css" data-link-type="type" href="#typedef-ident" id="ref-for-typedef-ident"><ident></a> production is not meant for property value definitions—<a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value③"><custom-ident></a> should be used instead. It is provided as a convenience for defining other syntactic constructs. All textual data types <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①">interpolate</a> as <a data-link-type="dfn" href="https://www.w3.org/TR/web-animations-1/#discrete" id="ref-for-discrete">discrete</a> and are <a data-link-type="dfn" href="#not-additive" id="ref-for-not-additive">not additive</a>. <h3 class="heading settled" data-level="4.1" id="keywords">4.1. Pre-defined Keywords<a class="self-link" href="#keywords"></a></h3> In the value definition fields, <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="keyword" id="css-keyword">keywords</dfn> with a pre-defined meaning appear literally. Keywords are <a data-link-type="dfn" href="#css-css-identifier" id="ref-for-css-css-identifier①">identifiers</a> and are interpreted <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive">ASCII case-insensitively</a> (i.e., [a-z] and [A-Z] are equivalent). <div class="example" id="example-9d0ae504"> <a class="self-link" href="#example-9d0ae504"></a> For example, here is the value definition for the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse" id="ref-for-propdef-border-collapse">border-collapse</a> property: <pre class="highlight"><c- k>Value</c-><c- p>:</c-> collapse | separate</pre> And here is an example of its use: <pre class="highlight">table <c- p>{</c-> <c- k>border-collapse</c-><c- p>:</c-> separate <c- p>}</c-></pre> </div> <h4 class="heading settled" data-level="4.1.1" id="common-keywords">4.1.1. CSS-wide keywords: <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>, <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> and <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><a class="self-link" href="#common-keywords"></a></h4> As defined <a href="#component-types">above</a>, all properties accept the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="css-wide-keywords">CSS-wide keywords</dfn>, which represent value computations common to all CSS properties. These keywords are normatively defined in the <a href="https://www.w3.org/TR/css-cascade/#defaulting-keywords">CSS Cascading and Inheritance Module</a>. Other CSS specifications can define additional CSS-wide keywords. <h3 class="heading settled" data-level="4.2" id="custom-idents">4.2. Unprefixed Author-defined Identifiers: the <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value④"><custom-ident></a> type<a class="self-link" href="#custom-idents"></a></h3> Some properties accept arbitrary author-defined identifiers as a component value. This generic data type is denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="identifier-value"><custom-ident></dfn>, and represents any valid CSS <a data-link-type="dfn" href="#css-css-identifier" id="ref-for-css-css-identifier②">identifier</a> that would not be misinterpreted as a pre-defined keyword in that property’s value definition. Such identifiers are fully case-sensitive (meaning they’re compared using the "<a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string-is" id="ref-for-string-is">identical to</a>" operation), even in the ASCII range (e.g. example and EXAMPLE are two different, unrelated user-defined identifiers). The <a data-link-type="dfn" href="#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> are not valid <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value⑤"><custom-ident></a>s. The default keyword is reserved and is also not a valid <custom-ident>. Specifications using <custom-ident> must specify clearly what other keywords are excluded from <custom-ident>, if any—for example by saying that any pre-defined keywords in that property’s value definition are excluded. Excluded keywords are excluded in all <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive①">ASCII case permutations</a>. When parsing positionally-ambiguous keywords in a property value, a <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value⑨"><custom-ident></a> production can only claim the keyword if no other unfulfilled production can claim it. <div class="example" id="example-950e3618"><a class="self-link" href="#example-950e3618"></a> For example, the shorthand declaration <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-animations-1/#propdef-animation" id="ref-for-propdef-animation">animation: ease-in ease-out</a> is equivalent to the longhand declarations <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-animations-1/#propdef-animation-timing-function" id="ref-for-propdef-animation-timing-function">animation-timing-function: ease-in; animation-name: ease-out;</a>. <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-in" id="ref-for-valdef-cubic-bezier-easing-function-ease-in">ease-in</a> is claimed by the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-easing-1/#typedef-easing-function" id="ref-for-typedef-easing-function"><easing-function></a> production belonging to animation-timing-function, leaving <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-out" id="ref-for-valdef-cubic-bezier-easing-function-ease-out">ease-out</a> to be claimed by the <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①⓪"><custom-ident></a> production belonging to <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-animations-1/#propdef-animation-name" id="ref-for-propdef-animation-name">animation-name</a>. </div> Note: When designing grammars with <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①①"><custom-ident></a>, the <custom-ident> should always be “positionally unambiguous”, so that it’s impossible to conflict with any keyword values in the property. Such conflicts can alternatively be avoided by using <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident"><dashed-ident></a>. <h3 class="heading settled" data-level="4.3" id="dashed-idents">4.3. Prefixed Author-defined Identifiers: the <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident①"><dashed-ident></a> type<a class="self-link" href="#dashed-idents"></a></h3> Some contexts accept both author-defined identifiers and CSS-defined identifiers. If not handled carefully, this can result in difficulties adding new CSS-defined values; <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent①">UAs</a> have to study existing usage and gamble that there are sufficiently few author-defined identifiers in use matching the new CSS-defined one, so giving the new value a special CSS-defined meaning won’t break existing pages. While there are many legacy cases in CSS that mix these two values spaces in exactly this fraught way, the <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident②"><dashed-ident></a> type is meant to be an easy way to distinguish author-defined identifiers from CSS-defined identifiers. The <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-dashed-ident"><a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident③"><dashed-ident></a></dfn> production is a <a class="production css" data-link-type="type" href="#identifier-value" id="ref-for-identifier-value①③"><custom-ident></a>, with all the case-sensitivity that implies, with the additional restriction that it must start with two dashes (U+002D HYPHEN-MINUS). <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident④"><dashed-ident></a>s are reserved solely for use as author-defined names. CSS will never define a <dashed-ident> for its own use. <div class="example" id="example-a91b3e3f"> <a class="self-link" href="#example-a91b3e3f"></a> For example, <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property">custom properties</a> need to be distinguishable from CSS-defined properties, as new properties are added to CSS regularly. To allow this, custom property names are required to be <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑥"><dashed-ident></a>s, as in this example: <pre class="highlight">.foo <c- p>{</c-> <c- k>--fg-color</c-><c- p>:</c-> blue<c- p>;</c-> <c- p>}</c-> </pre> </div> <div class="example" id="example-340c7d34"> <a class="self-link" href="#example-340c7d34"></a> <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑦"><dashed-ident></a>s are also used in the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-5/#at-ruledef-profile" id="ref-for-at-ruledef-profile">@color-profile</a> rule, to separate author-defined color profiles from pre-defined ones like device-cmyk, and allow CSS to define more pre-defined (but overridable) profiles in the future without fear of clashing with author-defined profiles: <pre class="highlight"><c- n>@color-profile</c-> --foo <c- p>{</c-> <c- k>src</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>https://example.com/foo.icc</c-><c- p>);</c-> <c- p>}</c-> .foo <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- nf>color</c-><c- p>(</c->--foo <c- m>1</c-> <c- m>0</c-> <c- m>.5</c-> / <c- m>.2</c-><c- p>);</c-> <c- p>}</c-> </pre> </div> <div class="example" id="example-32974307"> <a class="self-link" href="#example-32974307"></a> CSS will use <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident⑧"><dashed-ident></a> more in the future, as more author-controlled syntax is added. CSS authoring tools, such as preprocessors that turn custom syntax into standard CSS, should use <dashed-ident> as well, to avoid clashing with future CSS design. For example, if a CSS preprocessor added a new "custom" at-rule, it shouldn’t spell it @custom, as this would clash with a future official @custom rule added by CSS. Instead, it should use @--custom, which is guaranteed to never clash with anything defined by CSS. Even better, it should use @--library1-custom, so that if Library2 adds their own "custom" at-rule (spelled @--library2-custom), there’s no possibility of clash. Ideally this prefix should be customizable, if allowed by the tooling, so authors can manually avoid clashes on their own. </div> <h3 class="heading settled" data-level="4.4" id="strings">4.4. Quoted Strings: the <a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value①"><string></a> type<a class="self-link" href="#strings"></a></h3> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string">Strings</a> are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="string-value"><string></dfn>. When written literally, they consist of a sequence of characters delimited by double quotes or single quotes, corresponding to the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-string-token" id="ref-for-typedef-string-token"><string-token></a> production in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. <div class="example" id="example-9204e1e4"> <a class="self-link" href="#example-9204e1e4"></a> Double quotes cannot occur inside double quotes, unless <a href="https://www.w3.org/TR/CSS2/syndata.html#escaped-characters">escaped</a> (as <code class="highlight"><c- s>"\"</c->"</code> or as <code class="highlight"><c- s>"\22"</c-></code>). Analogously for single quotes (<code class="highlight"><c- s>'\'</c->'</code> or <code class="highlight"><c- s>'\27'</c-></code>). <pre class="highlight"><c- k>content</c-><c- p>:</c-> <c- s>"this is a 'string'."</c-><c- p>;</c-> <c- k>content</c-><c- p>:</c-> <c- s>"this is a \"</c->string\<c- s>"."</c-><c- p>;</c-> <c- k>content</c-><c- p>:</c-> <c- s>'this is a "string".'</c-><c- p>;</c-> <c- k>content</c-><c- p>:</c-> <c- s>'this is a \'</c->string\<c- s>'.'</c-> </pre> </div> It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash (\). The newline is subsequently removed from the string. For instance, the following two selectors are exactly the same: <div class="example" id="example-4f7429ed"> <a class="self-link" href="#example-4f7429ed"></a> Example(s): <pre class="highlight">a<c- p>[</c->title=<c- s>"a not s\</c-> <c- s>o very long title"</c-><c- p>]</c-> <c- p>{</c-><c- c>/*...*/</c-><c- p>}</c-> a<c- p>[</c->title=<c- s>"a not so very long title"</c-><c- p>]</c-> <c- p>{</c-><c- c>/*...*/</c-><c- p>}</c-> </pre> </div> Since a string cannot directly represent a newline, to include a newline in a string, use the escape "\A". (Hexadecimal A is the line feed character in Unicode (U+000A), but represents the generic notion of "newline" in CSS.) <h3 class="heading settled" data-level="4.5" id="urls">4.5. Resource Locators: the <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①"><url></a> type<a class="self-link" href="#urls"></a></h3> The <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value②"><url></a> type, written with the <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-url">url()</dfn> and <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-src">src()</dfn> functions, represents a <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url" id="ref-for-concept-url">URL</a>, which is a pointer to a resource. The syntax of <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value③"><url></a> is: <pre class="prod highlight"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="url-value"><url></dfn> = <a class="production" data-link-type="function" href="#funcdef-url" id="ref-for-funcdef-url"><<c- nf>url</c-><c- p>()</c->></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③">|</a> <a class="production" data-link-type="function" href="#funcdef-src" id="ref-for-funcdef-src"><<c- nf>src</c-><c- p>()</c->></a> <<c- nf>url</c-><c- p>()</c->> = <c- nf>url</c-><c- p>(</c-><c- s> </c-><a class="production" data-link-type="type" href="#string-value" id="ref-for-string-value②"><c- s><string></c-></a><c- s> </c-><a class="production" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier"><c- s><url-modifier></c-></a><a data-link-type="grammar" href="#mult-zero-plus" id="ref-for-mult-zero-plus"><c- s>*</c-></a><c- s> </c-><c- p>)</c-> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one④">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-url-token" id="ref-for-typedef-url-token"><url-token></a> <<c- nf>src</c-><c- p>()</c->> = <c- nf>src</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#string-value" id="ref-for-string-value③"><string></a> <a class="production" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier①"><url-modifier></a><a data-link-type="grammar" href="#mult-zero-plus" id="ref-for-mult-zero-plus①">*</a> <c- p>)</c-> </pre> <div class="example" id="example-1dcaf1ec"> <a class="self-link" href="#example-1dcaf1ec"></a> This example shows a URL being used as a background image: <pre class="highlight">body <c- p>{</c-> <c- k>background</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"http://www.example.com/pinkish.gif"</c-><c- p>)</c-> <c- p>}</c-> </pre> </div> For legacy reasons, a <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①">url()</a> can be written without quotation marks around the URL itself, in which case it is <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#consume-a-url-token" id="ref-for-consume-a-url-token">specially-parsed</a> as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-url-token" id="ref-for-typedef-url-token①"><url-token></a> <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. Because of this special parsing, url() is only able to specify its URL literally; <a class="css" data-link-type="maybe" href="#funcdef-src" id="ref-for-funcdef-src①">src()</a> lacks this special parsing rule, and so its URL can be provided by functions, 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>. <div class="example" id="example-a2ee15a6"> <a class="self-link" href="#example-a2ee15a6"></a> For example, the following declarations are identical: <pre class="highlight"><c- k>background</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"http://www.example.com/pinkish.gif"</c-><c- p>);</c-> <c- k>background</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>http://www.example.com/pinkish.gif</c-><c- p>);</c-> </pre> And these have the same meaning as well: <pre class="highlight"><c- k>background</c-><c- p>:</c-> <c- nf>src</c-><c- p>(</c-><c- s>"http://www.example.com/pinkish.gif"</c-><c- p>);</c-> <c- k>--foo</c-><c- p>:</c-> <c- s>"http://www.example.com/pinkish.gif"</c-><c- p>;</c-> <c- k>background</c-><c- p>:</c-> <c- nf>src</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--foo<c- p>));</c-> </pre> But this does not work: <pre class="highlight"><c- k>--foo</c-><c- p>:</c-> <c- s>"http://www.example.com/pinkish.gif"</c-><c- p>;</c-> <c- k>background</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>var(--foo</c-><c- p>));</c-> </pre> ...because the unescaped "(" in the value causes a parse error, so the entire declaration is thrown out as invalid. </div> <div class="note" role="note"> The unquoted <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url③">url()</a> syntax cannot accept a <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier②"><url-modifier></a> argument and has extra escaping requirements: parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash, e.g. url(open$parens), url(close$parens). (In quoted <a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value④"><string></a> url()s, only newlines and the character used to quote the string need to be escaped.) Depending on the type of URL, it might also be possible to write these characters as URL-escapes (e.g. url(open%28parens) or url(close%29parens)) as described in <a data-link-type="biblio" href="#biblio-url" title="URL Standard">[URL]</a>. The precise requirements for parsing the unquoted <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑤">url()</a> syntax are normatively defined in <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. </div> Some CSS contexts (such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-cascade-5/#at-ruledef-import" id="ref-for-at-ruledef-import">@import</a>) also allow a <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value④"><url></a> to be represented by a bare <a class="production css" data-link-type="type" href="#string-value" id="ref-for-string-value⑤"><string></a>, without the function wrapper. In such cases the string behaves identically to a <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑥">url()</a> function containing that string. <div class="example" id="example-ae720903"> <a class="self-link" href="#example-ae720903"></a> For example, the following statements act identically: <pre class="highlight"><c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"base-theme.css"</c-><c- p>);</c-> <c- n>@import</c-> <c- s>"base-theme.css"</c-><c- p>;</c-> </pre> </div> <h4 class="heading settled" data-level="4.5.1" id="relative-urls">4.5.1. Relative URLs<a class="self-link" href="#relative-urls"></a></h4> In order to create modular style sheets that are not dependent on the absolute location of a resource, authors should use relative URLs. Relative URLs (as defined in <a data-link-type="biblio" href="#biblio-url" title="URL Standard">[URL]</a>) are resolved to full URLs using a base URL. RFC 3986, section 3, defines the normative algorithm for this process. For CSS style sheets, the base URL is that of the style sheet itself, not that of the styled source document. Style sheets embedded within a document have the base URL associated with their container. Note: For HTML documents, the <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#dynamic-changes-to-base-urls">base URL is mutable</a>. When a <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑤"><url></a> appears in the computed value of a property, it is resolved to an absolute URL, as described in the preceding paragraph. The computed value of a URL that the <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent②">UA</a> cannot resolve to an absolute URL is the specified value. <div class="example" id="example-b514611a"> <a class="self-link" href="#example-b514611a"></a> For example, suppose the following rule: <pre class="highlight">body <c- p>{</c-> <c- k>background</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"tile.png"</c-><c- p>)</c-> <c- p>}</c-></pre> is located in a style sheet designated by the URL: <pre class="highlight"><c- k>http</c-><c- p>:</c->//www.example.org/style/basic.css</pre> The background of the source document’s <code class="highlight"><body></code> will be tiled with whatever image is described by the resource designated by the URL: <pre class="highlight"><c- k>http</c-><c- p>:</c->//www.example.org/style/tile.png</pre> The same image will be used regardless of the URL of the source document containing the <code class="highlight"><body></code>. </div> <h5 class="heading settled" data-level="4.5.1.1" id="local-urls">4.5.1.1. Fragment URLs<a class="self-link" href="#local-urls"></a></h5> To enable element ID references to work in CSS regardless of base URL changes or shadow DOM, <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑥"><url></a>s have special behavior when they contain only a fragment. If a <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑦"><url></a>’s value starts with a U+0023 NUMBER SIGN (<code class="highlight">#</code>) character, then the URL additionally has its <dfn class="dfn-paneled" data-dfn-for="<url>" data-dfn-type="dfn" data-export id="url-local-url-flag">local url flag</dfn> set, and is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference" id="ref-for-css-tree-scoped-reference">tree-scoped reference</a> for the URL’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-fragment" id="ref-for-concept-url-fragment">fragment</a>. When matching a <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑧"><url></a> with the <a data-link-type="dfn" href="#url-local-url-flag" id="ref-for-url-local-url-flag">local url flag</a> set: <ul> <li data-md> if the URL’s fragment is an element ID reference (rather than, say, a media fragment), resolve it as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference" id="ref-for-css-tree-scoped-reference①">tree-scoped reference</a> with the tree’s IDs as the associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name" id="ref-for-css-tree-scoped-name">tree-scoped names</a>: specifically, resolve to the first element in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-order" id="ref-for-concept-tree-order">tree order</a> among the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-tree" id="ref-for-concept-node-tree">node tree</a>'s descendants with the URL’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-fragment" id="ref-for-concept-url-fragment①">fragment</a> as its ID. (And, as usual for tree-scoped references, continuing up to the host’s tree if needed.) If no such element is found, the URL fails to resolve. <li data-md> otherwise, resolve the fragment against the current document. </ul> <a class="self-link" href="#issue-f83e4845"></a> Possibly reference <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#find-a-potential-indicated-element" id="ref-for-find-a-potential-indicated-element">find a potential indicated element</a>, but that is defined specifically for <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code>s, not <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#shadowroot" id="ref-for-shadowroot">ShadowRoot</a></code>s. Note: This means that such fragments will resolve against the contents of the current document (or whichever <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-tree" id="ref-for-concept-node-tree①">node tree</a> the stylesheet lives in, if shadow DOM is involved) regardless of how such relative URLs would resolve elsewhere (ignoring, for example, <code class="highlight"><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/semantics.html#the-base-element" id="ref-for-the-base-element">base</a></code> elements changing the base URL, or relative URLs in linked stylesheets resolving against the stylesheet’s URL). <div class="example" id="example-08e9b99a"> <a class="self-link" href="#example-08e9b99a"></a> In the following example, <code class="highlight">#anchor</code> will resolve against <code class="highlight"><c- k>http</c-><c- p>:</c->//example.com/</code> whereas <code class="highlight">#image</code> will resolve against the elements in the HTML document itself: <pre class="highlight"><c- cp><!DOCTYPE html></c-> <c- p><</c-><c- f>base</c-> <c- e>href</c-><c- o>=</c-><c- s>"http://example.com/"</c-><c- p>></c-> ... <c- p><</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>"#anchor"</c-> <c- e>style</c-><c- o>=</c-><c- s>"background-image: url(#image)"</c-><c- p>></c->link<c- p></</c-><c- f>a</c-><c- p>></c-> </pre> </div> When <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values">serializing</a> a <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑦">url()</a> with the <a data-link-type="dfn" href="#url-local-url-flag" id="ref-for-url-local-url-flag①">local url flag</a> set, it must serialize as just the fragment. <h4 class="heading settled" data-level="4.5.2" id="url-empty">4.5.2. Empty URLs<a class="self-link" href="#url-empty"></a></h4> If the value of the <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value⑨"><url></a> is the empty string (like url("") or <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑧">url()</a>), the url must resolve to an invalid resource (similar to what the url about:invalid does). Its computed value is url("") or src(""), whichever was specified, and it must serialize as such. Note: This matches the behavior of empty urls for embedded resources elsewhere in the web platform, and avoids excess traffic re-requesting the stylesheet or host document due to editing mistakes leaving the <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url⑨">url()</a> value empty, which are almost certain to be invalid resources for whatever the url() shows up in. Linking on the web platform does allow empty urls, so if/when CSS gains some functionality to control hyperlinks, this restriction can be relaxed in those contexts. <h4 class="heading settled" data-level="4.5.3" id="url-modifiers">4.5.3. URL Modifiers<a class="self-link" href="#url-modifiers"></a></h4> <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①⓪"><url></a>s support specifying additional <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-url-modifier"><url-modifier></dfn>s, which change the meaning or the interpretation of the URL somehow. A <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier③"><url-modifier></a> is either an <a class="production css" data-link-type="type" href="#typedef-ident" id="ref-for-typedef-ident①"><ident></a> or a <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation④">functional notation</a>. This specification does not define any <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier④"><url-modifier></a>s, but other specs may do so. Note: A <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①①"><url></a> that is either unquoted or not wrapped in <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①①">url()</a> notation cannot accept any <a class="production css" data-link-type="type" href="#typedef-url-modifier" id="ref-for-typedef-url-modifier⑤"><url-modifier></a>s. <h4 class="heading settled" data-level="4.5.4" id="url-processing">4.5.4. URL Processing Model<a class="self-link" href="#url-processing"></a></h4> <div class="algorithm" data-algorithm="fetch a style resource"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="fetch-a-style-resource">fetch a style resource</dfn> from a <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url" id="ref-for-concept-url①">url</a> or <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①②"><url></a> <var>urlValue</var>, given a <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#cssstylesheet" id="ref-for-cssstylesheet">CSSStyleSheet</a></code> <var>sheet</var>, a string <var>destination</var> matching a <code class="idl"><a data-link-type="idl" href="https://fetch.spec.whatwg.org/#requestdestination" id="ref-for-requestdestination">RequestDestination</a></code>, a "no-cors" or "cors" <var>corsMode</var>, and an algorithm <var>processResponse</var> accepting a <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response">response</a> and a null, failure or byte stream: <ol> <li data-md> Let <var>environmentSettings</var> be <var>sheet</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object">relevant settings object</a>. <li data-md> Let <var>base</var> be <var>sheet</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-stylesheet-base-url" id="ref-for-concept-css-style-sheet-stylesheet-base-url">stylesheet base URL</a> if it is not null, otherwise <var>environmentSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url" id="ref-for-api-base-url">API base URL</a>. <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> <li data-md> Let <var>parsedUrl</var> be the result of the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser">URL parser</a> steps with <var>urlValue</var>’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url" id="ref-for-concept-url②">url</a> and <var>base</var>. If the algorithm returns an error, return. <li data-md> Let <var>req</var> be a new <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request">request</a> whose <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-url" id="ref-for-concept-request-url">url</a> is <var>parsedUrl</var>, whose <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-destination" id="ref-for-concept-request-destination">destination</a> is <var>destination</var>, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-mode" id="ref-for-concept-request-mode">mode</a> is <var>corsMode</var>, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-origin" id="ref-for-concept-request-origin">origin</a> is <var>environmentSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin">origin</a>, <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> is "same-origin", <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag" id="ref-for-concept-request-use-url-credentials-flag">use-url-credentials flag</a> is set, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-client" id="ref-for-concept-request-client">client</a> is <var>environmentSettings</var>, and whose <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-referrer" id="ref-for-concept-request-referrer">referrer</a> is <var>environmentSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url" id="ref-for-api-base-url①">API base URL</a>. <li data-md> Apply any <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="url-request-modifier-steps">URL request modifier steps</dfn> that apply to this request. Note: This specification does not define any URL request modification steps, but other specs may do so. <li data-md> If <var>req</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-mode" id="ref-for-concept-request-mode①">mode</a> is "cors", set <var>req</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-referrer" id="ref-for-concept-request-referrer①">referrer</a> to <var>sheet</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-location" id="ref-for-concept-css-style-sheet-location">location</a>. <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> <li data-md> If <var>sheet</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-origin-clean-flag" id="ref-for-concept-css-style-sheet-origin-clean-flag">origin-clean flag</a> is set, set <var>req</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#request-initiator-type" id="ref-for-request-initiator-type">initiator type</a> to "css". <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> <li data-md> <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch">Fetch</a> <var>req</var>, with <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#process-response-end-of-body" id="ref-for-process-response-end-of-body">processresponseconsumebody</a> set to <var>processResponse</var>. </ol> </div> When interpreting <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url" id="ref-for-concept-url③">URLs</a> expressed in CSS, the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser①">URL parser’s</a> <var>encoding</var> argument must be omitted (i.e. use the default, UTF-8), regardless of the stylesheet encoding. Note: In other words, a URL written in CSS will always <a data-link-type="dfn" href="https://url.spec.whatwg.org/#string-percent-encode-after-encoding" id="ref-for-string-percent-encode-after-encoding">percent-encode</a> non-ASCII codepoints using UTF-8 in the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url" id="ref-for-concept-url④">URL</a> object (and thus whenever using the URL value for e.g. network requests), regardless of the stylesheet’s own encoding. Note that this occurs <a href="https://www.w3.org/TR/css-syntax-3/#input-byte-stream">after decoding the stylesheet</a> into Unicode <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#code-point" id="ref-for-code-point">code points</a>. <h2 class="heading settled" data-level="5" id="numeric-types">5. Numeric Data Types<a class="self-link" href="#numeric-types"></a></h2> Numeric data types are used to represent quantities, indexes, positions, and other such values. Although many syntactic variations can exist in expressing the quantity (numeric aspect) in a given numeric value, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value①">specified</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value④">computed value</a> do not distinguish these variations: they represent the value’s abstract quantity, not its syntactic representation. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="numeric-data-types">numeric data types</dfn> include <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value③"><integer></a>, <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value"><number></a>, <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①"><percentage></a>, and various <a data-link-type="dfn" href="#dimension" id="ref-for-dimension">dimensions</a> including <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑤"><length></a>, <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value"><angle></a>, <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value"><time></a>, <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value"><frequency></a>, and <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value"><resolution></a>. Note: While general-purpose <a data-link-type="dfn" href="#dimension" id="ref-for-dimension①">dimensions</a> are defined here, some other modules define additional data types (e.g. <a data-link-type="biblio" href="#biblio-css-grid-1" title="CSS Grid Layout Module Level 1">[css-grid-1]</a> introduces <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-grid-2/#valdef-flex-fr" id="ref-for-valdef-flex-fr">fr</a> units) whose usage is more localized. The precision and supported range of numeric values in CSS is <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#implementation-defined" id="ref-for-implementation-defined">implementation-defined</a>, and can vary based on the property or other context a value is used in. However, within the CSS specifications, infinite precision and range is assumed. When a value cannot be explicitly supported due to range/precision limitations, it must be converted to the closest value supported by the implementation, but how the implementation defines "closest" is implementation-defined as well. If an <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①"><angle></a> must be converted due to exceeding the implementation-defined range of supported values, it must be clamped to the nearest supported multiple of 360deg. <h3 class="heading settled" data-level="5.1" id="numeric-ranges">5.1. Range Restrictions and Range Definition Notation<a class="self-link" href="#numeric-ranges"></a></h3> Properties can restrict numeric values to some range. If the value is outside the allowed range, then unless otherwise specified, the declaration is invalid and must be <a href="https://www.w3.org/TR/CSS2/conform.html#ignore">ignored</a>. Range restrictions can be annotated in the numeric type notation using <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="bracketed range notation" id="css-bracketed-range-notation">CSS bracketed range notation</dfn>—<code class="highlight"><c- p>[</c-><var>min</var><c- p>,</c-><var>max</var><c- p>]</c-></code>—within the angle brackets, after the identifying keyword, indicating a closed range between (and including) <var>min</var> and <var>max</var>. For example, <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value④"><integer [0,10]></a> indicates an integer between 0 and 10, inclusive, while <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value②"><angle [0,180deg]></a> indicates an angle between 0deg and 180deg (expressed in any unit). Note: CSS values generally do not allow open ranges; thus only square-bracket notation is used. CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent③">UAs</a> should support reasonably useful ranges and precisions. Range extremes that are ideally unlimited are indicated using ∞ or −∞ as appropriate. For example, <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑥"><length [0,∞]></a> indicates a non-negative length. If no range is indicated, either by using the <a data-link-type="dfn" href="#css-bracketed-range-notation" id="ref-for-css-bracketed-range-notation">bracketed range notation</a> or in the property description, then <code class="highlight"><c- p>[</c->−∞<c- p>,</c->∞<c- p>]</c-></code> is assumed. Values of −∞ or ∞ must be written without units, even if the value type uses units. Values of 0 can be written without units, even if the value type doesn’t allow “unitless zeroes” (such as <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value①"><time></a>). Note: At the time of writing, the <a data-link-type="dfn" href="#css-bracketed-range-notation" id="ref-for-css-bracketed-range-notation①">bracketed range notation</a> is new; thus in most CSS specifications any range limitations are described only in prose. (For example, “Negative values are not allowed” or “Negative values are invalid” indicate a <code class="highlight"><c- p>[</c-><c- m>0</c-><c- p>,</c->∞<c- p>]</c-></code> range.) This does not make them any less binding. <h3 class="heading settled" data-level="5.2" id="integers">5.2. Integers: the <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑤"><integer></a> type<a class="self-link" href="#integers"></a></h3> Integer values are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="integer-value"><integer></dfn>. When written literally, an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="integer">integer</dfn> is one or more decimal digits 0 through 9 and corresponds to a subset of the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token"><number-token></a> production in the CSS Syntax Module <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. The first digit of an integer may be immediately preceded by - or + to indicate the integer’s sign. Unless otherwise specified, in the CSS specifications <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="round to the nearest integer" id="css-round-to-the-nearest-integer">rounding to the nearest integer</dfn> requires rounding in the direction of +∞ when the fractional portion is exactly 0.5. (For example, 1.5 rounds to 2, while -1.5 rounds to -1.) <h4 class="heading settled" data-level="5.2.1" id="combine-integers">5.2.1. Computation and Combination of <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑥"><integer></a><a class="self-link" href="#combine-integers"></a></h4> Unless otherwise specified, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value⑤">computed value</a> of a specified <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑦"><integer></a> is the specified abstract integer. <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation②">Interpolation</a> of <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value⑧"><integer></a> is defined as <var>V</var>result = round((1 - <var>p</var>) × <var>VA</var> + <var>p</var> × <var>VB</var>); that is, interpolation happens in the real number space as for <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①"><number></a>s, and the result is converted to an <integer> by <a data-link-type="dfn" href="#css-round-to-the-nearest-integer" id="ref-for-css-round-to-the-nearest-integer">rounding to the nearest integer</a>. <a data-link-type="dfn" href="#addition" id="ref-for-addition⑦">Addition</a> of <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①⓪"><integer></a> is defined as <var>Vresult</var> = <var>VA</var> + <var>VB</var> <h3 class="heading settled" data-level="5.3" id="numbers">5.3. Real Numbers: the <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②"><number></a> type<a class="self-link" href="#numbers"></a></h3> Number values are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="number-value"><number></dfn>, and represent real numbers, possibly with a fractional component. When written literally, a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="number">number</dfn> is either an <a data-link-type="dfn" href="#integer" id="ref-for-integer">integer</a>, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits; optionally, it can be concluded by the letter “e” or “E” followed by an integer indicating the base-ten exponent in <a href="https://en.wikipedia.org/wiki/Scientific_notation">scientific notation</a>. It corresponds to the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token①"><number-token></a> production in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign. The value <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="zero-value"><zero></dfn> represents a literal <a data-link-type="dfn" href="#number" id="ref-for-number">number</a> with the value 0. Expressions that merely evaluate to a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③"><number></a> with the value 0 (for example, calc(0)) do not match <a class="production css" data-link-type="type" href="#zero-value" id="ref-for-zero-value"><zero></a>; only literal <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token②"><number-token></a>s do. <h4 class="heading settled" data-level="5.3.1" id="combine-numbers">5.3.1. Computation and Combination of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④"><number></a><a class="self-link" href="#combine-numbers"></a></h4> Unless otherwise specified, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value⑥">computed value</a> of a specified <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑤"><number></a> is the specified abstract number. <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation③">Interpolation</a> of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑥"><number></a> is defined as <var>V</var>result = (1 - <var>p</var>) × <var>VA</var> + <var>p</var> × <var>VB</var> <a data-link-type="dfn" href="#addition" id="ref-for-addition⑧">Addition</a> of <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑦"><number></a> is defined as <var>Vresult</var> = <var>VA</var> + <var>VB</var> <h3 class="heading settled" data-level="5.4" id="dimensions">5.4. Numbers with Units: <a data-link-type="dfn" href="#dimension" id="ref-for-dimension②">dimension</a> values<a class="self-link" href="#dimensions"></a></h3> The general term <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="dimension">dimension</dfn> refers to a number with a unit attached to it; and is denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-dimension"><dimension></dfn>. When written literally, a <a data-link-type="dfn" href="#dimension" id="ref-for-dimension③">dimension</a> is a <a data-link-type="dfn" href="#number" id="ref-for-number①">number</a> immediately followed by a unit identifier, which is an <a data-link-type="dfn" href="#css-css-identifier" id="ref-for-css-css-identifier③">identifier</a>. It corresponds to the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-dimension-token" id="ref-for-typedef-dimension-token①"><dimension-token></a> production in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. Like keywords, unit identifiers are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive②">ASCII case-insensitive</a>. CSS uses <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension"><dimension></a>s to specify distances (<a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑦"><length></a>), durations (<a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value②"><time></a>), frequencies (<a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value①"><frequency></a>), resolutions (<a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value①"><resolution></a>), and other quantities. <h4 class="heading settled" data-level="5.4.1" id="compat">5.4.1. Compatible Units<a class="self-link" href="#compat"></a></h4> When <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values">serializing</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value⑦">computed values</a> <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="compatible" id="compatible-units">compatible units</dfn> (those related by a static multiplicative factor, like the 96:1 factor between <a class="css" data-link-type="maybe" href="#px" id="ref-for-px">px</a> and <a class="css" data-link-type="maybe" href="#in" id="ref-for-in">in</a>, or the computed <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a> factor between <a class="css" data-link-type="maybe" href="#em" id="ref-for-em">em</a> and px) are converted into a single <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="canonical" id="canonical-unit">canonical unit</dfn>. Each group of compatible units defines which among them is the <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①">canonical unit</a> that will be used for serialization. When serializing <a href="https://www.w3.org/TR/cssom-1/#resolved-values">resolved values</a> that are <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value">used values</a>, all value types (percentages, numbers, keywords, etc.) that represent lengths are considered <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units">compatible</a> with lengths. Likewise any future API that returns used values must consider any values that represent distances/durations/frequencies/etc. as compatible with the relevant class of <a data-link-type="dfn" href="#dimension" id="ref-for-dimension④">dimensions</a>, and canonicalize accordingly. <h4 class="heading settled" data-level="5.4.2" id="combine-dimensions">5.4.2. Combination of Dimensions<a class="self-link" href="#combine-dimensions"></a></h4> <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation④">Interpolation</a> of <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units②">compatible</a> <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑤">dimensions</a> (for example, two <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑧"><length></a> values) is defined as <var>V</var>result = (1 - <var>p</var>) × <var>VA</var> + <var>p</var> × <var>VB</var> <a data-link-type="dfn" href="#addition" id="ref-for-addition⑨">Addition</a> of <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units③">compatible</a> <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑥">dimensions</a> is defined as <var>Vresult</var> = <var>VA</var> + <var>VB</var> <h3 class="heading settled" data-level="5.5" id="percentages">5.5. Percentages: the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②"><percentage></a> type<a class="self-link" href="#percentages"></a></h3> Percentage values are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="percentage-value"><percentage></dfn>, and indicates a value that is some fraction of another reference value. When written literally, a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="percentage">percentage</dfn> consists of a <a data-link-type="dfn" href="#number" id="ref-for-number②">number</a> immediately followed by a percent sign %. It corresponds to the <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> production in the <a href="https://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, a measurement of the formatting context (e.g., the width of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a>), or something else. <h4 class="heading settled" data-level="5.5.1" id="combine-percentages">5.5.1. Computation and Combination of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③"><percentage></a><a class="self-link" href="#combine-percentages"></a></h4> Unless otherwise specified (such as in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a>, which computes its <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value④"><percentage></a> values to <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value⑨"><length></a>), the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value⑧">computed value</a> of a percentage is the specified percentage. <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑤">Interpolation</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑤"><percentage></a> is defined as <var>V</var>result = (1 - <var>p</var>) × <var>VA</var> + <var>p</var> × <var>VB</var> <a data-link-type="dfn" href="#addition" id="ref-for-addition①⓪">Addition</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑥"><percentage></a> is defined as <var>Vresult</var> = <var>VA</var> + <var>VB</var> <h3 class="heading settled" data-level="5.6" id="mixed-percentages">5.6. Mixing Percentages and Dimensions<a class="self-link" href="#mixed-percentages"></a></h3> In cases where a <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑦"><percentage></a> can represent the same quantity as a <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑦">dimension</a> in the same <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#component-value" id="ref-for-component-value①">component value</a> position, and can therefore be combined with them in a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②">calc()</a> expression, the following convenience notations may be used in the property grammar: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-length-percentage"><length-percentage></dfn> <dd data-md> Equivalent to <code class="prod highlight"><c- p>[</c-> <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⓪"><length></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑤">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑧"><percentage></a> <c- p>]</c-></code>, where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value⑨"><percentage></a> will resolve to a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①①"><length></a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-frequency-percentage"><frequency-percentage></dfn> <dd data-md> Equivalent to <code class="prod highlight"><c- p>[</c-> <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value②"><frequency></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⓪"><percentage></a> <c- p>]</c-></code>, where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①①"><percentage></a> will resolve to a <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value③"><frequency></a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-angle-percentage"><angle-percentage></dfn> <dd data-md> Equivalent to <code class="prod highlight"><c- p>[</c-> <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value③"><angle></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①②"><percentage></a> <c- p>]</c-></code>, where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①③"><percentage></a> will resolve to an <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value④"><angle></a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-time-percentage"><time-percentage></dfn> <dd data-md> Equivalent to <code class="prod highlight"><c- p>[</c-> <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value③"><time></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑧">|</a> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①④"><percentage></a> <c- p>]</c-></code>, where the <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑤"><percentage></a> will resolve to a <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value④"><time></a>. </dl> <div class="example" id="example-10c2940e"> <a class="self-link" href="#example-10c2940e"></a> For example, the <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> property can accept a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①②"><length></a> or a <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑥"><percentage></a>, both representing a measure of distance. This means that width: calc(500px + 50%); is allowed—both values are converted to absolute lengths and added. If the containing block is 1000px wide, then width: 50%; is equivalent to width: 500px, and width: calc(50% + 500px) thus ends up equivalent to width: calc(500px + 500px) or width: 1000px. On the other hand, the second and third arguments of the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#funcdef-hsl" id="ref-for-funcdef-hsl">hsl()</a> function can only be expressed as <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑦"><percentage></a>s. Although <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc③">calc()</a> productions are allowed in their place, they can only combine percentages with themselves, as in calc(10% + 20%). </div> Note: Specifications should never alternate <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑧"><percentage></a> in place of a dimension in a grammar unless they are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units④">compatible</a>. Note: More <<var>type</var>-percentage> productions can be added in the future as needed. A <number-percentage> will never be added, as <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑧"><number></a> and <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value①⑨"><percentage></a> can’t be combined in <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc④">calc()</a>. <h4 class="heading settled" data-level="5.6.1" id="combine-mixed">5.6.1. Computation and Combination of Percentage and Dimension Mixes<a class="self-link" href="#combine-mixed"></a></h4> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value⑨">computed value</a> of a percentage-dimension mix is defined as <ul> <li data-md> a computed dimension if the percentage component is zero or is defined specifically to compute to a dimension value <li data-md> a computed percentage if the dimension component is zero <li data-md> a <a href="#calc-computed-value">computed calc() expression</a> otherwise </ul> <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑥">Interpolation</a> of percentage-dimension value combinations (e.g. <a class="production css" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a>, <a class="production css" data-link-type="type" href="#typedef-frequency-percentage" id="ref-for-typedef-frequency-percentage"><frequency-percentage></a>, <a class="production css" data-link-type="type" href="#typedef-angle-percentage" id="ref-for-typedef-angle-percentage"><angle-percentage></a>, <a class="production css" data-link-type="type" href="#typedef-time-percentage" id="ref-for-typedef-time-percentage"><time-percentage></a> or equivalent notations) is defined as <ul> <li> equivalent to <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑦">interpolation</a> of <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①③"><length></a> if both <var>VA</var> and <var>VB</var> are pure <length> values <li> equivalent to <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑧">interpolation</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⓪"><percentage></a> if both <var>VA</var> and <var>VB</var> are pure <percentage> values <li> equivalent to converting both values into a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑤">calc()</a> expression representing the sum of the dimension type and a percentage (each possibly zero) and <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation⑨">interpolating</a> each component individually (as a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑤"><length></a>/<a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value④"><frequency></a>/<a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑤"><angle></a>/<a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑤"><time></a> and as a <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②②"><percentage></a>, respectively) </ul> <a data-link-type="dfn" href="#addition" id="ref-for-addition①①">Addition</a> of <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②③"><percentage></a> is defined the same as <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①⓪">interpolation</a> except by adding each component rather than interpolating it. <h3 class="heading settled" data-level="5.7" id="ratios">5.7. Ratios: the <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value"><ratio></a> type<a class="self-link" href="#ratios"></a></h3> Ratio values are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="ratio-value"><ratio></dfn>, and represent the ratio of two numeric values. It most often represents an aspect ratio, relating a width (first) to a height (second). When written literally, a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="ratio">ratio</dfn> has the syntax: <pre class="prod highlight"><a class="production" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value①"><ratio></a> = <a class="production" data-link-type="type" href="#number-value" id="ref-for-number-value⑨"><number <c- p>[</c-><c- m>0</c-><c- p>,</c->∞<c- p>]</c->></a> <c- p>[</c-> / <a class="production" data-link-type="type" href="#number-value" id="ref-for-number-value①⓪"><number <c- p>[</c-><c- m>0</c-><c- p>,</c->∞<c- p>]</c->></a> <c- p>]</c-><a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt③">?</a> </pre> The second <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①①"><number></a> is optional, defaulting to 1. However, <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value②"><ratio></a> is always serialized with both components. The computed value of a <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value③"><ratio></a> is the pair of numbers provided. If either number in the <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value④"><ratio></a> is 0 or infinite, it represents a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="degenerate-ratio">degenerate ratio</dfn> (and, generally, won’t do anything). If two <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value⑤"><ratio></a>s need to be compared, divide the first number by the second, and compare the results. For example, 3/2 is less than 2/1, because it resolves to 1.5 while the second resolves to 2. (In other words, “tall” aspect ratios are less than “wide” aspect ratios.) <h4 class="heading settled" data-level="5.7.1" id="combine-ratio">5.7.1. Combination of <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value⑥"><ratio></a><a class="self-link" href="#combine-ratio"></a></h4> The interpolation of a <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value⑦"><ratio></a> is defined by converting each <ratio> to a number by dividing the first value by the second (so a ratio of 3 / 2 would become 1.5), taking the logarithm of that result (so the 1.5 would become approximately 0.176), then interpolating those values. The result during the interpolation is converted back to a <ratio> by inverting the logarithm, then interpreting the result as a <ratio> with the result as the first value and 1 as the second value. If either <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value①①"><ratio></a> is <a data-link-type="dfn" href="#degenerate-ratio" id="ref-for-degenerate-ratio">degenerate</a>, the values cannot be interpolated. <div class="example" id="example-c4a376f3"> <a class="self-link" href="#example-c4a376f3"></a> For example, halfway through a linear interpolation from 5 / 1 to 3 / 2, the result is approximately the ratio 2.73 / 1 (roughly 11 / 4, slightly taller than a 3 / 1 ratio): <pre class="highlight">start = <c- nf>log</c-><c- p>(</c-><c- m>5</c-><c- p>);</c-> // ≈ <c- m>0.69897</c-> end = <c- nf>log</c-><c- p>(</c-><c- m>1.5</c-><c- p>);</c-> // ≈ <c- m>0.17609</c-> interp = <c- m>0.69897</c->*<c- m>.5</c-> + <c- m>0.17609</c->*<c- m>.5</c-><c- p>;</c-> // ≈ <c- m>0.43753</c-> final = <c- m>10</c->^interp<c- p>;</c-> // ≈ <c- m>2.73</c-> </pre> </div> Note: Interpolating over the logarithm of the ratio means the results are scale-independent (5 / 1 to 300 / 200 would give the same results as above), that they’re symmetrical over "wide" and "tall" variants (interpolating from 1 / 5 to 2 / 3 would give a ratio approximately equal to 1 / 2.73 at the halfway point), and that they’re symmetrical over whether the width is fixed and the height is based on the ratio or vice versa. These properties are not shared by many other possible interpolation strategies. Note: Due to the properties of logarithms, any log can be used; the example here uses base-10 log, but if, say, the natural log and e was used, the intermediate results would be different but the final result would be the same. Addition of <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value①②"><ratio></a>s is not possible. <h2 class="heading settled" data-level="6" id="lengths">6. Distance Units: the <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑥"><length></a> type<a class="self-link" href="#lengths"></a></h2> Lengths refer to distance measurements and are denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="length-value"><length></dfn> in the property definitions. A length is a <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑧">dimension</a>. For zero lengths the unit identifier is optional (i.e. can be syntactically represented as the <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①②"><number></a> 0). However, if a 0 could be parsed as either a <number> or a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑦"><length></a> in a property (such as <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height">line-height</a>), it must parse as a <number>. Properties may restrict the length value to some range. If the value is outside the allowed range, the declaration is invalid and must be <a href="https://www.w3.org/TR/CSS2/conform.html#ignore">ignored</a>. While some properties allow negative length values, this may complicate the formatting and there may be implementation-specific limits. If a negative length value is allowed but cannot be supported, it must be converted to the nearest value that can be supported. In cases where the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value②">used</a> length cannot be supported, user agents must approximate it in the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#actual-value" id="ref-for-actual-value">actual</a> value. There are two types of length units: <a data-link-type="dfn" href="#relative-length" id="ref-for-relative-length">relative</a> and <a data-link-type="dfn" href="#absolute-length" id="ref-for-absolute-length">absolute</a>. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value②">specified value</a> of a length (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="specified-length">specified length</dfn>) is represented by its quantity and its unit. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①⓪">computed value</a> of a length (<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="computed-length">computed length</dfn>) is the specified length resolved to an absolute length, and its unit is not distinguished: it can be represented by any absolute length unit (but will be serialized using its <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit②">canonical unit</a>, <a class="css" data-link-type="maybe" href="#px" id="ref-for-px②">px</a>). While the exact supported precision of numeric values, and how they are rounded to match that precision, is generally <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#implementation-defined" id="ref-for-implementation-defined②">implementation-defined</a>, <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑧"><length></a>s in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width④">border-width</a> and a few other properties are rounded in a specific fashion to ensure reasonable visual display. (This algorithm is called by individual properties explicitly.) <div class="algorithm" data-algorithm="snap a length as a border width"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="snap a length as a border width | snap as a border width" id="snap-a-length-as-a-border-width">snap a length as a border width</dfn> given a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value①⑨"><length></a> <var>len</var>: <ol> <li data-md> Assert: <var>len</var> is non-negative. <li data-md> If <var>len</var> is an integer number of <a data-link-type="dfn" href="#device-pixel" id="ref-for-device-pixel">device pixels</a>, do nothing. <li data-md> If <var>len</var> is greater than zero, but less than 1 <a data-link-type="dfn" href="#device-pixel" id="ref-for-device-pixel①">device pixel</a>, round <var>len</var> up to 1 device pixel. <li data-md> If <var>len</var> is greater than 1 <a data-link-type="dfn" href="#device-pixel" id="ref-for-device-pixel③">device pixel</a>, round it down to the nearest integer number of device pixels. </ol> </div> <h3 class="heading settled" data-level="6.1" id="relative-lengths">6.1. Relative Lengths<a class="self-link" href="#relative-lengths"></a></h3> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="relative length | relative length unit" data-noexport id="relative-length">Relative length units</dfn> specify a length relative to another length. Style sheets that use relative units can more easily scale from one output environment to another. The relative units are: <table class="data"> <caption>Informative Summary of Relative Units</caption> <thead> <tr> <th>unit <th>relative to <tbody> <tr> <td><a class="css" data-link-type="maybe" href="#em" id="ref-for-em①">em</a> <td>font size of the element <tr> <td><a class="css" data-link-type="maybe" href="#ex" id="ref-for-ex">ex</a> <td>x-height of the element’s font <tr> <td><a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap">cap</a> <td>cap height (the nominal height of capital letters) of the element’s font <tr> <td><a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch">ch</a> <td>typical <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure">character advance</a> of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph <tr> <td><a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic">ic</a> <td>typical <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure①">character advance</a> of a fullwidth glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph <tr> <td><a class="css" data-link-type="maybe" href="#rem" id="ref-for-rem">rem</a> <td>font size of the root element <tr> <td><a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh">lh</a> <td>line height of the element <tr> <td><a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh">rlh</a> <td>line height of the root element <tr> <td><a class="css" data-link-type="maybe" href="#vw" id="ref-for-vw">vw</a> <td>1% of viewport’s width <tr> <td><a class="css" data-link-type="maybe" href="#vh" id="ref-for-vh">vh</a> <td>1% of viewport’s height <tr> <td><a class="css" data-link-type="maybe" href="#vi" id="ref-for-vi">vi</a> <td>1% of viewport’s size in the root element’s <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> <tr> <td><a class="css" data-link-type="maybe" href="#vb" id="ref-for-vb">vb</a> <td>1% of viewport’s size in the root element’s <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> <tr> <td><a class="css" data-link-type="maybe" href="#vmin" id="ref-for-vmin">vmin</a> <td>1% of viewport’s smaller dimension <tr> <td><a class="css" data-link-type="maybe" href="#vmax" id="ref-for-vmax">vmax</a> <td>1% of viewport’s larger dimension </table> Child elements do not inherit the relative values as specified for their parent; they inherit the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①①">computed values</a>. <h4 class="heading settled" data-level="6.1.1" id="font-relative-lengths">6.1.1. Font-relative Lengths: the <a class="css" data-link-type="maybe" href="#em" id="ref-for-em②">em</a>, <a class="css" data-link-type="maybe" href="#rem" id="ref-for-rem①">rem</a>, <a class="css" data-link-type="maybe" href="#ex" id="ref-for-ex①">ex</a>, <a class="css" data-link-type="maybe" href="#rex" id="ref-for-rex">rex</a>, <a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap①">cap</a>, <a class="css" data-link-type="maybe" href="#rcap" id="ref-for-rcap">rcap</a>, <a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch①">ch</a>, <a class="css" data-link-type="maybe" href="#rch" id="ref-for-rch">rch</a>, <a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic①">ic</a>, <a class="css" data-link-type="maybe" href="#ric" id="ref-for-ric">ric</a>, <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh①">lh</a>, <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh①">rlh</a> units<a class="self-link" href="#font-relative-lengths"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="font-relative-length">font-relative lengths</dfn> refer to the font metrics either of the element on which they are used (for the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="local-font-relative-lengths">local font-relative lengths</dfn>) or of the root element (for the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="root-font-relative-lengths">root font-relative lengths</dfn>). <figure> <img alt="The word 'Sphinx' annotated with various font metrics: ascender height, to the top of the h's serif; cap height, to the visually approximate top of the S; the x height, to the visually approximate top of the x; the baseline, along the bottom of S, h, i, n, and x; and the descender height, to the bottom fo the p." height="97" src="images/Typography_Line_Terms.svg" width="361"> <figcaption> Common typographic metrics </figcaption> </figure> <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="em">em</dfn> <dd> Equal to the computed value of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size②">font-size</a> property of the element on which it is used. <div class="example" id="example-83bc8a19"> <a class="self-link" href="#example-83bc8a19"></a> The rule: <pre class="highlight">h1 <c- p>{</c-> <c- k>line-height</c-><c- p>:</c-> <c- m>1.2</c-><c- k>em</c-> <c- p>}</c-></pre> means that the line height of <code class="highlight">h1</code> elements will be 20% greater than the font size of <code class="highlight">h1</code> element. On the other hand: <pre class="highlight">h1 <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>1.2</c-><c- k>em</c-> <c- p>}</c-></pre> means that the font size of <code class="highlight">h1</code> elements will be 20% greater than the computed font size inherited by <code class="highlight">h1</code> elements. </div> <dt><dfn class="dfn-paneled caniuse-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="rem">rem</dfn> <dd> Equal to the computed value of the <a class="css" data-link-type="maybe" href="#em" id="ref-for-em③">em</a> unit on the root element. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="ex">ex</dfn> <dd> Equal to the used x-height of the <a href="https://www.w3.org/TR/css3-fonts/#first-available-font">first available font</a> <a data-link-type="biblio" href="#biblio-css3-fonts" title="CSS Fonts Module Level 3">[CSS3-FONTS]</a>. The x-height is so called because it is often equal to the height of the lowercase "x". However, an <a class="css" data-link-type="maybe" href="#ex" id="ref-for-ex②">ex</a> is defined even for fonts that do not contain an "x". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent④">UAs</a> may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="rex">rex</dfn> <dd> Equal to the value of the <a class="css" data-link-type="maybe" href="#ex" id="ref-for-ex③">ex</a> unit on the root element. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="cap">cap</dfn> <dd> Equal to the used cap-height of the <a href="https://www.w3.org/TR/css3-fonts/#first-available-font">first available font</a> <a data-link-type="biblio" href="#biblio-css3-fonts" title="CSS Fonts Module Level 3">[CSS3-FONTS]</a>. The cap-height is so called because it is approximately equal to the height of a capital Latin letter. However, a <a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap②">cap</a> is defined even for fonts that do not contain Latin letters. The cap-height of a font can be found in different ways. Some fonts contain reliable metrics for the cap-height. If reliable font metrics are not available, <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent⑤">UAs</a> may determine the cap-height from the height of an uppercase glyph. One possible heuristic is to look at how far the glyph for the uppercase “O” extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the cap-height, the font’s ascent must be used. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="rcap">rcap</dfn> <dd> Equal to the value of the <a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap③">cap</a> unit on the root element. <dt><dfn class="dfn-paneled caniuse-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="ch">ch</dfn> <dd> Represents the typical <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure②">advance measure</a> of European alphanumeric characters, and measured as the used advance measure of the “0” (ZERO, U+0030) glyph in the font used to render it. (The <dfn class="dfn-paneled" data-dfn-for="<length>" data-dfn-type="dfn" data-export id="length-advance-measure">advance measure</dfn> of a glyph is its advance width or height, whichever is in the inline axis of the element.) Note: This measurement is an approximation (and in monospace fonts, an exact measure) of a single narrow glyph’s <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure④">advance measure</a>, thus allowing measurements based on an expected glyph count. Note: The advance measure of a glyph depends on writing-mode and text-orientation as well as font settings, text-transform, and any other properties that affect glyph selection or orientation. In the cases where it is impossible or impractical to determine the measure of the “0” glyph, it must be assumed to be 0.5em wide by 1em tall. Thus, the <a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch②">ch</a> unit falls back to 0.5em in the general case, and to 1em when it would be typeset upright (i.e. <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-rl" id="ref-for-valdef-writing-mode-vertical-rl">vertical-rl</a> or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr" id="ref-for-valdef-writing-mode-vertical-lr">vertical-lr</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright" id="ref-for-valdef-text-orientation-upright">upright</a>). <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="rch">rch</dfn> <dd> Equal to the value of the <a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch③">ch</a> unit on the root element. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="ic">ic</dfn> <dd> Represents the typical <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure⑤">advance measure</a> of CJK letters, and measured as the used advance measure of the “水” (CJK water ideograph, U+6C34) glyph found in the font used to render it. Note: This measurement is a typically an exact measure (in the few fonts with proportional fullwidth glyphs, an approximation) of a single <a href="http://unicode.org/reports/tr11/#Definitions">fullwidth</a> glyph’s <a data-link-type="dfn" href="#length-advance-measure" id="ref-for-length-advance-measure⑦">advance measure</a>, thus allowing measurements based on an expected glyph count. In the cases where it is impossible or impractical to determine the ideographic advance measure, it must be assumed to be 1em. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="ric">ric</dfn> <dd> Equal to the value of the <a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic②">ic</a> unit on the root element. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="lh">lh</dfn> <dd> Equal to the computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height①">line-height</a> property of the element on which it is used, converting <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-inline-3/#valdef-line-height-normal" id="ref-for-valdef-line-height-normal">normal</a> to an absolute length by using only the metrics of the <a href="https://www.w3.org/TR/css3-fonts/#first-available-font">first available font</a>. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="rlh">rlh</dfn> <dd> Equal to the value of the <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh②">lh</a> unit on the root element. Note: Setting the <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> of an element using either the <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh③">lh</a> or the <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh②">rlh</a> units does not enable authors to control the actual number of lines in that element. These units only enable length calculations based on the theoretical size of an ideal empty line; the size of actual lines boxes may differ based on their content. In cases where an author wants to limit the number of actual lines in an element, the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-4/#propdef-max-lines" id="ref-for-propdef-max-lines">max-lines</a> property can be used instead. </dl> When used in the value of any <a class="property css" data-link-type="property">font-*</a> property on the element they refer to, the <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length">font-relative lengths</a> resolve against the computed metrics of the parent element—or against the computed metrics corresponding to the initial values of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font" id="ref-for-propdef-font">font</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height②">line-height</a> properties, if the element has no parent. Similarly, when <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh④">lh</a> or <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh③">rlh</a> units are used in the value of the line-height property or font-* properties on the element they refer to, they resolve against the computed line-height and font metrics of the parent element—or the computed metrics corresponding to the initial values of the font and line-height properties, if the element has no parent. (The other font-relative lengths continue to resolve against the element’s own metrics when used in line-height.) When used outside the context of an element (such as in <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 data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length①">font-relative lengths</a> units refer to the metrics corresponding to the initial values of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font" id="ref-for-propdef-font②">font</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height⑦">line-height</a> properties. Similarly, when specified in a document with no root element, the <a data-link-type="dfn" href="#root-font-relative-lengths" id="ref-for-root-font-relative-lengths">root font-relative lengths</a> are resolved assuming the initial values of the font and line-height properties. Note: Font-relative units such as <a class="css" data-link-type="maybe" href="#ch" id="ref-for-ch④">ch</a> and <a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic③">ic</a> can trigger font downloads, if a required font is not yet loaded. The <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length②">font-relative lengths</a> are calculated in the absence of shaping. Some user-agents allow users to apply additional restrictions to font sizes in a document, such as setting minimum font sizes to ensure readability. Such restrictions must be applied to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value③">used value</a> of the affected properties only; they must not affect the resolution of <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length③">font-relative lengths</a> used in properties. However, in other contexts (such as in <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query①">media queries</a>), to the extent that they would impact the used font metrics, such restrictions do affect the resolution of font-relative lengths. Note: In general, respecting a user’s preferences, like minimum font sizes, is desirable; it’s useful for a media query like (min-width: 40em) to use the actual font size the document will be displayed in. However, having these preferences affect font-relative lengths in properties on an element was found to not be Web-compatible; too many pages expect these units to be exact multiples of the specified <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size③">font-size</a>, rather than the actual font-size after applying user preferences. Some user-agents apply restrictions to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height⑨">line-height</a> values on form controls. These must have no effect on the <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh⑤">lh</a> and <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh④">rlh</a> units. The effect on their descendants, however, is <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#implementation-defined" id="ref-for-implementation-defined③">implementation-defined</a>. <h4 class="heading settled caniuse-paneled" data-level="6.1.2" id="viewport-relative-lengths">6.1.2. Viewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units<a class="self-link" href="#viewport-relative-lengths"></a></h4> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="viewport-percentage-lengths">viewport-percentage lengths</dfn> are relative to the size of the <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">initial containing block</a>—which is itself based on the size of either the viewport (for <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#continuous-media" id="ref-for-continuous-media">continuous media</a>) or the <a data-link-type="dfn" href="https://www.w3.org/TR/css-page-3/#page-area" id="ref-for-page-area">page area</a> (for <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#paged-media" id="ref-for-paged-media">paged media</a>). When the height or width of the initial containing block is changed, they are scaled accordingly. <h5 class="no-toc heading settled" data-level="6.1.2.1" id="viewport-variants">6.1.2.1. The Large, Small, and Dynamic Viewport Sizes<a class="self-link" href="#viewport-variants"></a></h5> There are four variants of the <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths">viewport-percentage length</a> units, corresponding to three (possibly identical) notions of the viewport size. <dl> <dt>large viewport <dd> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="large-viewport-percentage-units">large viewport-percentage units</dfn> (lv*) and <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="default-viewport-percentage-units">default viewport-percentage units</dfn> (v*) are defined with respect to the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="large-viewport-size">large viewport size</dfn>: the viewport sized assuming any <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent⑥">UA</a> interfaces that are dynamically expanded and retracted to be retracted. This allows authors to size content such that it is guaranteed to fill the viewport, noting that such content might be hidden behind such interfaces when they are expanded. The sizes of the <a data-link-type="dfn" href="#large-viewport-percentage-units" id="ref-for-large-viewport-percentage-units">large viewport-percentage units</a> are fixed (and therefore stable) unless the viewport itself is resized. <div class="example" id="example-18205b29"><a class="self-link" href="#example-18205b29"></a> For example, on phones, where screen real-estate is at a premium, browsers will often hide part or all of the title and address bar once the user starts scrolling the page. The <a data-link-type="dfn" href="#large-viewport-percentage-units" id="ref-for-large-viewport-percentage-units①">large viewport-percentage units</a> are sized relative to this larger everything-retracted space, so content using these units will fill the entire visible page when these UI elements are hidden. However, when these retractable elements are shown, they can obscure content that is sized or positioned using these units. </div> <dt>small viewport <dd> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="small-viewport-percentage-units">small viewport-percentage units</dfn> (sv*) are defined with respect to the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="small-viewport-size">small viewport size</dfn>: the viewport sized assuming any <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent⑦">UA</a> interfaces that are dynamically expanded and retracted to be expanded. This allows authors to size content such that it can fit within the viewport even when such interfaces are present, noting that such content might not fill the viewport when such interfaces are retracted. The sizes of the <a data-link-type="dfn" href="#small-viewport-percentage-units" id="ref-for-small-viewport-percentage-units">small viewport-percentage units</a> are fixed (and therefore stable) unless the viewport itself is resized. <div class="example" id="example-c1ac496e"> <a class="self-link" href="#example-c1ac496e"></a> An element that is sized as <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height①">height: 100svh</a>, for example, will fill the screen perfectly, without any of its content being obscured, when all the dynamic UI elements of the UA are shown. Once those UI elements start being hidden, however, there will be extra space around the element. The <a data-link-type="dfn" href="#small-viewport-percentage-units" id="ref-for-small-viewport-percentage-units①">small viewport-percentage units</a> units are thus “safer” in general, but might not produce the most attractive layout once the user starts interacting with the page. </div> <dt>dynamic viewport <dd> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="dynamic-viewport-percentage-units">dynamic viewport-percentage units</dfn> (dv*) are defined with respect to the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="dynamic-viewport-size">dynamic viewport size</dfn>: the viewport sized with dynamic consideration of any <a data-link-type="dfn" href="https://www.w3.org/TR/css-2023/#user-agent" id="ref-for-user-agent⑧">UA</a> interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present. The sizes of the <a data-link-type="dfn" href="#dynamic-viewport-percentage-units" id="ref-for-dynamic-viewport-percentage-units">dynamic viewport-percentage units</a> are not stable even while the viewport itself is unchanged. Using these units can cause content to resize e.g. while the user scrolls the page. Depending on usage, this can be disturbing to the user and/or costly in terms of performance. The UA is not required to animate the <a data-link-type="dfn" href="#dynamic-viewport-percentage-units" id="ref-for-dynamic-viewport-percentage-units①">dynamic viewport-percentage units</a> while expanding and retracting any relevant interfaces, and may instead calculate the units as if the relevant interface was fully expanded or retracted during the UI animation. (It is recommended that UAs assume the fully-retracted size for this duration.) </dl> Whether the expansion/retraction of a particular interface (A) changes the sizes of all of the <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths①">viewport-percentage lengths</a> (and the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>) simultaneously or (B) contributes to the differences between the <a data-link-type="dfn" href="#large-viewport-size" id="ref-for-large-viewport-size">large viewport size</a> and <a data-link-type="dfn" href="#small-viewport-size" id="ref-for-small-viewport-size">small viewport size</a> is largely UA-dependent. However: <ul> <li data-md> Changes in interface that happen as a result of scrolling or other frequent page interactions that would disturb the user if they resulted in substantial layout changes must be categorized as the latter (B). <li data-md> Changes in interface that have a sufficiently steady state that re-laying out the document into the adjusted space would be beneficial to the user must be categorized as the former (A). <li data-md> Additionally, UAs may have some dynamically-shown interfaces that intentionally overlay content and do not cause any shifts in layout—and therefore have no effect on any of the <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths②">viewport-percentage lengths</a>. (Typically on-screen keyboards will fit into this category.) </ul> In all cases, if the value of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> or <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter">scrollbar-gutter</a> on the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#root-element" id="ref-for-root-element">root element</a> in either axis would cause scrollbars to appear (or space to be reserved for them) unconditionally (for example, overflow: scroll, but not overflow: auto), the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①②">computed values</a> of the <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths③">viewport-percentage lengths</a> in that axis are reduced in accordance with the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block①">initial containing block</a>. Otherwise, and always in the case of <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query②">media queries</a>, the viewport-percentage lengths are sized assuming that scrollbars do not exist (even if this diverges from the initial containing block). Note: The value of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow③">overflow</a> on <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2">the body element</a> can sometimes affect the presence of scrollbars on the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#root-element" id="ref-for-root-element①">root element</a>. This does not affect the size of viewport units, however. <h5 class="no-toc heading settled" data-level="6.1.2.2" id="viewport-relative-units">6.1.2.2. The Various Viewport-relative Units<a class="self-link" href="#viewport-relative-units"></a></h5> The <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths⑤">viewport-percentage length</a> units are: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="vw">vw</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="svw">svw</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="lvw">lvw</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="dvw">dvw</dfn> <dd> Equal to 1% of the width of the <a data-link-type="dfn" href="#large-viewport-size" id="ref-for-large-viewport-size①">large viewport size</a>, <a data-link-type="dfn" href="#small-viewport-size" id="ref-for-small-viewport-size①">small viewport size</a>, large viewport size, and <a data-link-type="dfn" href="#dynamic-viewport-size" id="ref-for-dynamic-viewport-size">dynamic viewport size</a>, respectively. <div class="example" id="example-6068ee5d"> <a class="self-link" href="#example-6068ee5d"></a> In the example below, if the width of the viewport is 200mm, the font size of <code class="highlight">h1</code> elements will be 16mm (i.e. (8×200mm)/100). <pre class="highlight">h1 <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>8</c-><c- k>vw</c-> <c- p>}</c-></pre> </div> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="vh">vh</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="svh">svh</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="lvh">lvh</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="dvh">dvh</dfn> <dd> Equal to 1% of the height of the <a data-link-type="dfn" href="#large-viewport-size" id="ref-for-large-viewport-size③">large viewport size</a>, <a data-link-type="dfn" href="#small-viewport-size" id="ref-for-small-viewport-size②">small viewport size</a>, large viewport size, and <a data-link-type="dfn" href="#dynamic-viewport-size" id="ref-for-dynamic-viewport-size①">dynamic viewport size</a>, respectively. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="vi">vi</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="svi">svi</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="lvi">lvi</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="dvi">dvi</dfn> <dd> Equal to 1% of the size of the <a data-link-type="dfn" href="#large-viewport-size" id="ref-for-large-viewport-size⑤">large viewport size</a>, <a data-link-type="dfn" href="#small-viewport-size" id="ref-for-small-viewport-size③">small viewport size</a>, large viewport size, and <a data-link-type="dfn" href="#dynamic-viewport-size" id="ref-for-dynamic-viewport-size②">dynamic viewport size</a> (respectively) in the box’s <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>. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="vb">vb</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="svb">svb</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="lvb">lvb</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="dvb">dvb</dfn> <dd> Equal to 1% of the size of the initial containing block <a data-link-type="dfn" href="#large-viewport-size" id="ref-for-large-viewport-size⑦">large viewport size</a>, <a data-link-type="dfn" href="#small-viewport-size" id="ref-for-small-viewport-size④">small viewport size</a>, large viewport size, and <a data-link-type="dfn" href="#dynamic-viewport-size" id="ref-for-dynamic-viewport-size③">dynamic viewport size</a> (respectively) in the box’s <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>. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="vmin">vmin</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="svmin">svmin</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="lvmin">lvmin</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="dvmin">dvmin</dfn> <dd> Equal to the smaller of *vw or *vh. <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="vmax">vmax</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="svmax">svmax</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="lvmax">lvmax</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="dvmax">dvmax</dfn> <dd> Equal to the larger of *vw or *vh. </dl> Note: The original (unprefixed) viewport units <a href="https://www.w3.org/TR/css-values-3/#viewport-relative-lengths">were defined</a> relative to the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block③">initial containing block</a>, which in <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#continuous-media" id="ref-for-continuous-media①">continuous media</a> always matched the (singular) viewport size. The dynamism of browser chrome shifting in and out during scrolling was invented later, and following Safari’s lead, most UAs mapped these units to the larger size. Defining it this way is prettier in many cases, but can also block critical content (such as toolbars, headers, and footers) in others. It’s therefore not entirely clear whether this was the best mapping, and thus earlier editions of this specifications allowed UAs to choose the mapping of these default units. However at this point the mapping to the <a data-link-type="dfn" href="#large-viewport-percentage-units" id="ref-for-large-viewport-percentage-units②">large viewport-percentage units</a> is presumed to be required for Web compatibility. In situations where there is no element or it hasn’t yet been styled (such as when evaluating <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-5/#media-query" id="ref-for-media-query③">media queries</a>), the *vi and *vb units use the initial value of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> property to determine which axis they correspond to. <h3 class="heading settled" data-level="6.2" id="absolute-lengths">6.2. Absolute Lengths: the <a class="css" data-link-type="maybe" href="#cm" id="ref-for-cm">cm</a>, <a class="css" data-link-type="maybe" href="#mm" id="ref-for-mm">mm</a>, <a class="css" data-link-type="maybe" href="#Q" id="ref-for-Q">Q</a>, <a class="css" data-link-type="maybe" href="#in" id="ref-for-in①">in</a>, <a class="css" data-link-type="maybe" href="#pt" id="ref-for-pt">pt</a>, <a class="css" data-link-type="maybe" href="#pc" id="ref-for-pc">pc</a>, <a class="css" data-link-type="maybe" href="#px" id="ref-for-px③">px</a> units<a class="self-link" href="#absolute-lengths"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="absolute length | absolute length unit" data-noexport id="absolute-length">absolute length units</dfn> are fixed in relation to each other and <a data-link-type="dfn" href="#anchor-unit" id="ref-for-anchor-unit">anchored</a> to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="physical unit" id="physical-unit">physical units</dfn> (<a class="css" data-link-type="maybe" href="#in" id="ref-for-in②">in</a>, <a class="css" data-link-type="maybe" href="#cm" id="ref-for-cm①">cm</a>, <a class="css" data-link-type="maybe" href="#mm" id="ref-for-mm①">mm</a>, <a class="css" data-link-type="maybe" href="#pt" id="ref-for-pt①">pt</a>, <a class="css" data-link-type="maybe" href="#pc" id="ref-for-pc①">pc</a>, <a class="css" data-link-type="maybe" href="#Q" id="ref-for-Q①">Q</a>) and the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="visual angle unit | pixel unit" id="visual-angle-unit">visual angle unit (pixel unit)</dfn> (<a class="css" data-link-type="maybe" href="#px" id="ref-for-px④">px</a>): <table class="data"> <thead> <tr> <th>unit <th>name <th>equivalence <tbody> <tr> <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="cm">cm</dfn> <td>centimeters <td>1cm = 96px/2.54 <tr> <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="mm">mm</dfn> <td>millimeters <td>1mm = 1/10th of 1cm <tr> <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="Q">Q</dfn> <td>quarter-millimeters <td>1Q = 1/40th of 1cm <tr> <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="in">in</dfn> <td>inches <td>1in = 2.54cm = 96px <tr> <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="pc">pc</dfn> <td>picas <td>1pc = 1/6th of 1in <tr> <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="pt">pt</dfn> <td>points <td>1pt = 1/72nd of 1in <tr> <th><dfn class="dfn-paneled css" data-dfn-for="<length>" data-dfn-type="value" data-export id="px">px</dfn> <td>pixels <td>1px = 1/96th of 1in </table> <div class="example" id="example-afc1f57e"> <a class="self-link" href="#example-afc1f57e"></a> <pre class="highlight">h1 <c- p>{</c-> <c- k>margin</c-><c- p>:</c-> <c- m>0.5</c-><c- k>in</c-> <c- p>}</c-> <c- c>/* inches */</c-> h2 <c- p>{</c-> <c- k>line-height</c-><c- p>:</c-> <c- m>3</c-><c- k>cm</c-> <c- p>}</c-> <c- c>/* centimeters */</c-> h3 <c- p>{</c-> <c- k>word-spacing</c-><c- p>:</c-> <c- m>4</c-><c- k>mm</c-> <c- p>}</c-> <c- c>/* millimeters */</c-> h3 <c- p>{</c-> <c- k>letter-spacing</c-><c- p>:</c-> <c- m>1</c-><c- k>Q</c-> <c- p>}</c-> <c- c>/* quarter-millimeters */</c-> h4 <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>12</c-><c- k>pt</c-> <c- p>}</c-> <c- c>/* points */</c-> h4 <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>1</c-><c- k>pc</c-> <c- p>}</c-> <c- c>/* picas */</c-> p <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>12</c-><c- k>px</c-> <c- p>}</c-> <c- c>/* px */</c-> </pre> </div> Note: Lengths in publishing contexts are sometimes written like <code class="highlight"><c- m>2</c-><c- k>p</c-><c- m>3</c-></code>, indicating a length of 2 picas and 3 points. These can be written in CSS as calc(2pc + 3pt) (see <a href="#calc-func">§ 10.1 Basic Arithmetic: calc()</a>). All of the absolute length units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑤">compatible</a>, and <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑤">px</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit③">canonical unit</a>. For a CSS device, these dimensions are <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="anchor unit | anchor" data-noexport id="anchor-unit">anchored</dfn> either <ol type="i"> <li>by relating the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit">physical units</a> to their physical measurements, or <li>by relating the <a data-link-type="dfn" href="#visual-angle-unit" id="ref-for-visual-angle-unit">pixel unit</a> to the <a data-link-type="dfn" href="#reference-pixel" id="ref-for-reference-pixel">reference pixel</a>. </ol> For print media at typical viewing distances, the <a data-link-type="dfn" href="#anchor-unit" id="ref-for-anchor-unit①">anchor unit</a> should be one of the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit①">physical units</a> (inches, centimeters, etc). For screen media (including high-resolution devices), low-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the <a data-link-type="dfn" href="#visual-angle-unit" id="ref-for-visual-angle-unit①">pixel unit</a>. For such devices it is recommended that the pixel unit refer to the whole number of <a data-link-type="dfn" href="#device-pixel" id="ref-for-device-pixel⑤">device pixels</a> that best approximates the reference pixel. Note: If the <a data-link-type="dfn" href="#anchor-unit" id="ref-for-anchor-unit③">anchor unit</a> is the <a data-link-type="dfn" href="#visual-angle-unit" id="ref-for-visual-angle-unit③">pixel unit</a>, the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit②">physical units</a> might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of <a data-link-type="dfn" href="#device-pixel" id="ref-for-device-pixel⑥">device pixels</a>. Note: This definition of the <a data-link-type="dfn" href="#visual-angle-unit" id="ref-for-visual-angle-unit⑤">pixel unit</a> and the <a data-link-type="dfn" href="#physical-unit" id="ref-for-physical-unit④">physical units</a> differs from the earlier editions of CSS1 and CSS2. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This unfortunate change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption broke the content.) Note: Units are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive③">ASCII case-insensitive</a> and serialize as lowercase, for example 1Q serializes as 1q. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="reference-pixel">reference pixel</dfn> is the visual angle of one pixel on a device with a <a data-link-type="dfn" href="#device-pixel" id="ref-for-device-pixel⑦">device pixel</a> density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch). The image below illustrates the effect of viewing distance on the size of a reference pixel: a reading distance of 71 cm (28 inches) results in a reference pixel of 0.26 mm, while a reading distance of 3.5 m (12 feet) results in a reference pixel of 1.3 mm. <figure> <img alt="This diagram illustrates how the definition of a pixel depends on the users distance from the viewing surface (paper or screen). The image depicts the user looking at two planes, one 28 inches (71 cm) from the user, the second 140 inches (3.5 m) from the user. An expanding cone is projected from the user's eye onto each plane. Where the cone strikes the first plane, the projected pixel is 0.26 mm high. Where the cone strikes the second plane, the projected pixel is 1.4 mm high." height="360" src="images/pixel1.png" width="500"> <figcaption>Showing that pixels must become larger if the viewing distance increases</figcaption> </figure> This second image illustrates the effect of a device’s resolution on the pixel unit: an area of 1px by 1px is covered by a single dot in a low-resolution device (e.g. a typical computer display), while the same area is covered by 16 dots in a higher resolution device (such as a printer). <figure> <img alt="This diagram illustrates the relationship between the reference pixel and device pixels (called "dots" below). The image depicts a high resolution (large dot density) laser printer output on the left and a low resolution monitor screen on the right. For the laser printer, one square reference pixel is implemented by 16 dots. For the monitor screen, one square reference pixel is implemented by a single dot." height="321" src="images/pixel2.png" width="412"> <figcaption>Showing that more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a lower-resolution one (of the same approximate viewing distance)</figcaption> </figure> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="device-pixel">device pixel</dfn> is the smallest unit of area on the device output capable of displaying its full range of colors. For typical color screens, it’s a square or somewhat rectangular region containing a red, green, and blue subpixel. Many non-traditional outputs exist that can blur this definition, such as by displaying some colors at higher resolutions. Such devices still expose some equivalent notion of "device pixel", however. <h2 class="heading settled" data-level="7" id="other-units">7. Other Quantities<a class="self-link" href="#other-units"></a></h2> <h3 class="heading settled" data-level="7.1" id="angles">7.1. Angle Units: the <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑥"><angle></a> type and <a class="css" data-link-type="maybe" href="#deg" id="ref-for-deg">deg</a>, <a class="css" data-link-type="maybe" href="#grad" id="ref-for-grad">grad</a>, <a class="css" data-link-type="maybe" href="#rad" id="ref-for-rad">rad</a>, <a class="css" data-link-type="maybe" href="#turn" id="ref-for-turn">turn</a> units<a class="self-link" href="#angles"></a></h3> Angle values are <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension①"><dimension></a>s denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="angle-value"><angle></dfn>. The angle unit identifiers are: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="deg">deg</dfn> <dd> Degrees. There are 360 degrees in a full circle. <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="grad">grad</dfn> <dd> Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle. <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="rad">rad</dfn> <dd> Radians. There are 2π radians in a full circle. <dt><dfn class="dfn-paneled css" data-dfn-for="<angle>" data-dfn-type="value" data-export id="turn">turn</dfn> <dd> Turns. There is 1 turn in a full circle. </dl> For example, a right angle is 90deg or 100grad or 0.25turn or approximately 1.57rad. All <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑦"><angle></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑥">compatible</a>, and <a class="css" data-link-type="maybe" href="#deg" id="ref-for-deg①">deg</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit④">canonical unit</a>. <div class="note" role="note"> By convention, when an angle denotes a direction in CSS, it is typically interpreted as a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="bearing-angle">bearing angle</dfn>, where 0deg is "up" or "north" on the screen, and larger angles are more clockwise (so 90deg is "right" or "east"). For example, in the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-images-4/#funcdef-linear-gradient" id="ref-for-funcdef-linear-gradient">linear-gradient()</a> function, the <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑧"><angle></a> that determines the direction of the gradient is interpreted as a bearing angle. </div> Note: For legacy reasons, some uses of <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value⑨"><angle></a> allow a bare 0 to mean 0deg. This is not true in general, however, and will not occur in future uses of the <angle> type. <h3 class="heading settled" data-level="7.2" id="time">7.2. Duration Units: the <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑥"><time></a> type and <a class="css" data-link-type="maybe" href="#s" id="ref-for-s">s</a>, <a class="css" data-link-type="maybe" href="#ms" id="ref-for-ms">ms</a> units<a class="self-link" href="#time"></a></h3> Time values are <a data-link-type="dfn" href="#dimension" id="ref-for-dimension⑨">dimensions</a> denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="time-value"><time></dfn>. The time unit identifiers are: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<time>" data-dfn-type="value" data-export id="s">s</dfn> <dd>Seconds. <dt><dfn class="dfn-paneled css" data-dfn-for="<time>" data-dfn-type="value" data-export id="ms">ms</dfn> <dd>Milliseconds. There are 1000 milliseconds in a second. </dl> All <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑦"><time></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑦">compatible</a>, and <a class="css" data-link-type="maybe" href="#s" id="ref-for-s①">s</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑤">canonical unit</a>. Properties may restrict the time value to some range. If the value is outside the allowed range, the declaration is invalid and must be <a href="https://www.w3.org/TR/CSS2/conform.html#ignore">ignored</a>. <h3 class="heading settled" data-level="7.3" id="frequency">7.3. Frequency Units: the <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑤"><frequency></a> type and <a class="css" data-link-type="maybe" href="#Hz" id="ref-for-Hz">Hz</a>, <a class="css" data-link-type="maybe" href="#kHz" id="ref-for-kHz">kHz</a> units<a class="self-link" href="#frequency"></a></h3> Frequency values are <a data-link-type="dfn" href="#dimension" id="ref-for-dimension①⓪">dimensions</a> denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="frequency-value"><frequency></dfn>. The frequency unit identifiers are: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<frequency>" data-dfn-type="value" data-export id="Hz">Hz</dfn> <dd>Hertz. It represents the number of occurrences per second. <dt><dfn class="dfn-paneled css" data-dfn-for="<frequency>" data-dfn-type="value" data-export id="kHz">kHz</dfn> <dd>KiloHertz. A kiloHertz is 1000 Hertz. </dl> For example, when representing sound pitches, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a treble sound. All <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑥"><frequency></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑧">compatible</a>, and <a class="css" data-link-type="maybe" href="#Hz" id="ref-for-Hz①">hz</a> is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑥">canonical unit</a>. Note: Units are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive④">ASCII case-insensitive</a> and serialize as lowercase, for example 1Hz serializes as 1hz. <h3 class="heading settled" data-level="7.4" id="resolution">7.4. Resolution Units: the <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value②"><resolution></a> type and <a class="css" data-link-type="maybe" href="#dpi" id="ref-for-dpi">dpi</a>, <a class="css" data-link-type="maybe" href="#dpcm" id="ref-for-dpcm">dpcm</a>, <a class="css" data-link-type="maybe" href="#dppx" id="ref-for-dppx">dppx</a> units<a class="self-link" href="#resolution"></a></h3> Resolution units are <a data-link-type="dfn" href="#dimension" id="ref-for-dimension①①">dimensions</a> denoted by <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="resolution-value"><resolution></dfn>. The resolution unit identifiers are: <dl> <dt><dfn class="dfn-paneled css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="dpi">dpi</dfn> <dd>Dots per inch. <dt><dfn class="dfn-paneled css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="dpcm">dpcm</dfn> <dd>Dots per centimeter. <dt><dfn class="dfn-paneled css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="dppx">dppx</dfn> <dt><dfn class="dfn-paneled css" data-dfn-for="<resolution>" data-dfn-type="value" data-export id="x">x</dfn> <dd>Dots per <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑥">px</a> unit. </dl> The <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value③"><resolution></a> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS <a class="css" data-link-type="maybe" href="#in" id="ref-for-in③">in</a>, <a class="css" data-link-type="maybe" href="#cm" id="ref-for-cm②">cm</a>, or <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑦">px</a>. For uses, see e.g. the resolution media query in <a data-link-type="biblio" href="#biblio-mediaq" title="Media Queries Level 4">[MEDIAQ]</a> or the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-images-4/#propdef-image-resolution" id="ref-for-propdef-image-resolution">image-resolution</a> property defined in <a data-link-type="biblio" href="#biblio-css3-images" title="CSS Images Module Level 3">[CSS3-IMAGES]</a>. All <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value④"><resolution></a> units are <a data-link-type="dfn" href="#compatible-units" id="ref-for-compatible-units⑨">compatible</a>, and dppx is their <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑦">canonical unit</a>. The allowed range of <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑤"><resolution></a> values always excludes negative values, in addition to any explicit ranges that might be specified. Note that due to the 1:96 fixed ratio of CSS <a class="css" data-link-type="maybe" href="#in" id="ref-for-in④">in</a> to CSS <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑧">px</a>, 1dppx is equivalent to 96dpi. This corresponds to the default resolution of images displayed in CSS: see <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-images-4/#propdef-image-resolution" id="ref-for-propdef-image-resolution①">image-resolution</a>. <div class="example" id="example-33e77fee"> <a class="self-link" href="#example-33e77fee"></a> The following @media rule uses Media Queries <a data-link-type="biblio" href="#biblio-mediaq" title="Media Queries Level 4">[MEDIAQ]</a> to assign some special style rules to devices that use two or more device pixels per CSS <a class="css" data-link-type="maybe" href="#px" id="ref-for-px⑨">px</a> unit: <pre class="highlight"><c- n>@media</c-> <c- p>(</c->min-resolution: <c- m>2</c-><c- k>dppx</c-><c- p>)</c-> <c- p>{</c-> ... <c- p>}</c-></pre> </div> <h2 class="heading settled" data-level="8" id="defined-elsewhere">8. Data Types Defined Elsewhere<a class="self-link" href="#defined-elsewhere"></a></h2> Some data types are defined in their own modules. This example talks about some of the most common ones used across several specifications. <h3 class="heading settled" data-level="8.1" id="colors">8.1. Colors: the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color"><color></a> type<a class="self-link" href="#colors"></a></h3> The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color①"><color></a> data type is defined in <a data-link-type="biblio" href="#biblio-css-color-4" title="CSS Color Module Level 4">[CSS-COLOR-4]</a>. UAs must interpret <color> as defined therein. <h4 class="heading settled" data-level="8.1.1" id="combine-colors">8.1.1. Combination of <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color③"><color></a><a class="self-link" href="#combine-colors"></a></h4> <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①②">Interpolation</a> of <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color④"><color></a> is defined in <a href="https://www.w3.org/TR/css-color-4/#interpolation"><cite>CSS Color 4</cite> §  12. Color Interpolation</a>. Interpolation is done between premultiplied colors, as defined in <a href="https://www.w3.org/TR/css-color-4/#interpolation-alpha"><cite>CSS Color 4</cite> § 12.3 Interpolating with Alpha</a>. The <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑤"><color></a> type is <a data-link-type="dfn" href="#not-additive" id="ref-for-not-additive①">not additive</a>. Note: the CSS WG is interested to <a href="https://github.com/w3c/csswg-drafts/issues/new">hear</a> use-cases for addition of <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑥"><color></a>, and may consider making <color> additive in the future. <h3 class="heading settled" data-level="8.2" id="images">8.2. Images: the <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> type<a class="self-link" href="#images"></a></h3> The <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> data type is defined in <a data-link-type="biblio" href="#biblio-css3-images" title="CSS Images Module Level 3">[CSS3-IMAGES]</a>. UAs that support CSS Images Level 3 or its successor must interpret <image> as defined therein. UAs that do not yet support CSS Images Level 3 must interpret <image> as <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①③"><url></a>. <h4 class="heading settled" data-level="8.2.1" id="combine-images">8.2.1. Combination of <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><a class="self-link" href="#combine-images"></a></h4> Note: Interpolation of <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> is defined in <a href="https://www.w3.org/TR/css-images-3/#interpolation"><cite>CSS Images 3</cite> § 6 Interpolation</a>. Images are <a data-link-type="dfn" href="#not-additive" id="ref-for-not-additive②">not additive</a>. <h3 class="heading settled" data-level="8.3" id="position">8.3. 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 a object area (e.g. background image) inside a positioning area (e.g. background positioning area). It is computed and interpreted as specified for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a>. <a data-link-type="biblio" href="#biblio-css3-background" title="CSS Backgrounds and Borders Module Level 3">[CSS3-BACKGROUND]</a> <pre class="prod highlight"><a class="production" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position③"><position></a> = <c- p>[</c-> <c- p>[</c-> left <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one⑨">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⓪">|</a> right <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①①">|</a> top <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①②">|</a> bottom <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①③">|</a> <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①④">|</a> <c- p>[</c-> left <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑤">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑥">|</a> right <c- p>]</c-> <a data-link-type="grammar" href="#comb-all" id="ref-for-comb-all">&&</a> <c- p>[</c-> top <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑦">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑧">|</a> bottom <c- p>]</c-> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one①⑨">|</a> <c- p>[</c-> left <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⓪">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②①">|</a> right <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②②">|</a> <a class="production" data-link-type="type" href="#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="#comb-one" id="ref-for-comb-one②③">|</a> center <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②④">|</a> bottom <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑤">|</a> <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑥">|</a> <c- p>[</c-> <c- p>[</c-> left <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑦">|</a> right <c- p>]</c-> <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage④"><length-percentage></a> <c- p>]</c-> <a data-link-type="grammar" href="#comb-all" id="ref-for-comb-all①">&&</a> <c- p>[</c-> <c- p>[</c-> top <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑧">|</a> bottom <c- p>]</c-> <a class="production" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤"><length-percentage></a> <c- p>]</c-> <c- p>]</c-> </pre> Note: The <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#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. <h4 class="heading settled" data-level="8.3.1" id="position-parsing">8.3.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="#length-value" id="ref-for-length-value②⓪"><length></a>s, or <a class="production css" data-link-type="type" href="#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) <position> <length>?. 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="#length-value" id="ref-for-length-value②①"><length></a>. </div> <h4 class="heading settled" data-level="8.3.2" id="position-serialization">8.3.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/css-cascade-5/#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="#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. </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="#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>. Note: <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①③">Computed values</a> are always serialized as two offsets (without keywords) because the computed value does not preserve syntactic distinctions. <h4 class="heading settled" data-level="8.3.3" id="combine-positions">8.3.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="#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="#typedef-length-percentage" id="ref-for-typedef-length-percentage⑧"><length-percentage></a>. <a data-link-type="dfn" href="#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="#typedef-length-percentage" id="ref-for-typedef-length-percentage⑨"><length-percentage></a>. <h2 class="heading settled" data-level="9" id="functional-notations">9. Functional Notations<a class="self-link" href="#functional-notations"></a></h2> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="functional-notation">functional notation</dfn> is a type of component value that can represent more complex types or invoke special processing. The syntax starts with the name of the function immediately followed by a left parenthesis (i.e. a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-function-token" id="ref-for-typedef-function-token①"><function-token></a>) followed by the argument(s) to the notation followed by a right parenthesis. Like keywords, function names are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive⑤">ASCII case-insensitive</a>. <a href="https://www.w3.org/TR/css-syntax/#whitespace">White space</a> is allowed, but optional, immediately inside the parentheses. Functions can take multiple arguments, which are formatted similarly to a CSS property value. See <a href="#component-functions">§ 2.6 Functional Notation Definitions</a>. Note: Some legacy <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation⑤">functional notations</a>, such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#funcdef-rgba" id="ref-for-funcdef-rgba">rgba()</a>, use commas unnecessarily, but generally commas are only used to separate items in a list, or pieces of a grammar that would be ambiguous otherwise. If a comma is used to separate arguments, <a href="https://www.w3.org/TR/css-syntax/#whitespace">white space</a> is optional before and after the comma. <div class="example" id="example-3fbb1c9d"> <a class="self-link" href="#example-3fbb1c9d"></a> <pre class="highlight"><c- k>background</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>http://www.example.org/image</c-><c- p>);</c-> <c- k>color</c-><c- p>:</c-> <c- nf>rgb</c-><c- p>(</c-><c- m>100</c-><c- p>,</c-> <c- m>200</c-><c- p>,</c-> <c- m>50</c-> <c- p>);</c-> <c- k>content</c-><c- p>:</c-> <c- nf>counter</c-><c- p>(</c->list-item<c- p>)</c-> <c- s>". "</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>50</c-><c- k>%</c-> - <c- m>2</c-><c- k>em</c-><c- p>);</c-> </pre> </div> The <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①">math functions</a> are defined below. Other <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation⑥">functional notations</a> are defined in their own modules; for example the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-5/#typedef-color" id="ref-for-typedef-color⑧"><color></a> functions are defined in <a data-link-type="biblio" href="#biblio-css-color-4" title="CSS Color Module Level 4">[CSS-COLOR-4]</a> and <a data-link-type="biblio" href="#biblio-css-color-5" title="CSS Color Module Level 5">[CSS-COLOR-5]</a>. <h2 class="heading settled caniuse-paneled" data-level="10" id="math">10. Mathematical Expressions<a class="self-link" href="#math"></a></h2> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="math function" id="math-function">math functions</dfn> (<a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑥">calc()</a>, <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp">clamp()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin">sin()</a>, and others defined in this chapter) allow numeric CSS values to be written as mathematical expressions. A <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②">math function</a> represents a numeric value, one of: <ul> <li data-md> <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②③"><length></a>, <li data-md> <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑦"><frequency></a>, <li data-md> <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①①"><angle></a>, <li data-md> <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑧"><time></a>, <li data-md> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-grid-2/#typedef-flex" id="ref-for-typedef-flex"><flex></a>, <li data-md> <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑥"><resolution></a>, <li data-md> <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑤"><percentage></a>, <li data-md> <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑤"><number></a>, <li data-md> <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①①"><integer></a> </ul> ...or the <a class="production css" data-link-type="type" href="#typedef-length-percentage" id="ref-for-typedef-length-percentage①⓪"><length-percentage></a>/etc mixed types, and can be used wherever such a value would be valid. <h3 class="heading settled" data-level="10.1" id="calc-func">10.1. Basic Arithmetic: <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑦">calc()</a><a class="self-link" href="#calc-func"></a></h3> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-calc">calc()</dfn> function is a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③">math function</a> that allows basic arithmetic to be performed on numerical values, using addition (+), subtraction (-), multiplication (*), division (/), and parentheses. A <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc⑧">calc()</a> function contains a single <dfn class="dfn-paneled" data-dfn-for="calc()" data-dfn-type="dfn" data-export id="calc-calculation">calculation</dfn>, which is a sequence of values interspersed with operators, and possibly grouped by parentheses (matching the <a class="production css" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum"><calc-sum></a> grammar), which represents the result of evaluating the expression using standard operator precedence rules (* and / bind tighter than + and -, and operators are otherwise evaluated left-to-right). The calc() function represents the result of its contained <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation">calculation</a>. Components of a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①">calculation</a> can be literal values (such as 5px), other <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④">math functions</a>, or other expressions, 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>, that evaluate to a valid argument type (like <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②④"><length></a>). <div class="example" id="example-1daf921b"> <a class="self-link" href="#example-1daf921b"></a> <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑤">Math functions</a> can be used to combine value that use different units. In this example the author wants the margin box of each section to take up 1/3 of the space, so they start with 100%/3, then subtract the element’s borders and margins. (<a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing" id="ref-for-propdef-box-sizing">box-sizing</a> can automatically achieve this effect for borders and padding, but a math function is needed if you want to include margins.) <pre class="lang-css highlight">section <c- p>{</c-> <c- k>float</c-><c- p>:</c-> left<c- p>;</c-> <c- k>margin</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-><c- p>;</c-> <c- k>border</c-><c- p>:</c-> solid <c- m>1</c-><c- k>px</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- k>%</c-> / <c- m>3</c-> - <c- m>2</c-> * <c- m>1</c-><c- k>em</c-> - <c- m>2</c-> * <c- m>1</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> Similarly, in this example the gradient will show a color transition only in the first and last 20px of the element: <pre class="lang-css highlight">.fade <c- p>{</c-> <c- k>background-image</c-><c- p>:</c-> <c- nf>linear-gradient</c-><c- p>(</c->silver <c- m>0</c-><c- k>%</c-><c- p>,</c-> white <c- m>20</c-><c- k>px</c-><c- p>,</c-> white <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- k>%</c-> - <c- m>20</c-><c- k>px</c-><c- p>),</c-> silver <c- m>100</c-><c- k>%</c-><c- p>);</c-> <c- p>}</c-> </pre> </div> <div class="example" id="example-a73c5015"> <a class="self-link" href="#example-a73c5015"></a> <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑦">Math functions</a> can also be useful just to express values in a more natural, readable fashion, rather than as an obscure decimal. For example, the following sets the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size④">font-size</a> so that exactly 35em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size. <pre class="lang-css highlight">:root <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- k>vw</c-> / <c- m>35</c-><c- p>);</c-> <c- p>}</c-> </pre> Functionality-wise, this is identical to just writing <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-5/#descdef-font-face-font-size" id="ref-for-descdef-font-face-font-size">font-size: 2.857vw</a>, but then the intent (that 35em fills the viewport) is much less clear to someone reading the code; the later reader will have to reverse the math themselves to figure out that 2.857 is meant to approximate 100/35. </div> <div class="example" id="example-baa620d3"> <a class="self-link" href="#example-baa620d3"></a> Standard mathematical precedence rules for the operators apply: calc(2 + 3 * 4) is equal to 14, not 20. Parentheses can be used to manipulate precedence: calc((2 + 3) * 4) is instead equal to 20. Parentheses and nesting additional <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⓪">calc()</a> functions are equivalent; the preceding expression could equivalently have been written as calc(calc(2 + 3) * 4). This can be useful when building up values piecemeal via <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>, such as in the following example: <pre class="lang-css highlight">.aspect-ratio-box <c- p>{</c-> <c- k>--ar</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>16</c-> / <c- m>9</c-><c- p>);</c-> <c- k>--w</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>100</c-><c- k>%</c-> / <c- m>3</c-><c- p>);</c-> <c- k>--h</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- nf>var</c-><c- p>(</c->--w<c- p>)</c-> / <c- nf>var</c-><c- p>(</c->--ar<c- p>));</c-> <c- k>width</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--w<c- p>);</c-> <c- k>height</c-><c- p>:</c-> <c- nf>var</c-><c- p>(</c->--h<c- p>);</c-> <c- p>}</c-> </pre> Although <a class="property css" data-link-type="property">--ar</a> could have been written as simply --ar: (16 / 9);, --w is used both on its own (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>) and as a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①①">calc()</a> component (in --h), so it has to be written as a full calc() function itself. </div> <h3 class="heading settled" data-level="10.2" id="comp-func">10.2. Comparison Functions: <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp①">clamp()</a><a class="self-link" href="#comp-func"></a></h3> The comparison functions of <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min①">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max①">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp②">clamp()</a> compare multiple <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②">calculations</a> and represent the value of one of them. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-min">min()</dfn> or <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-max">max()</dfn> functions contain one or more comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③">calculations</a>, and represent the smallest (most negative) or largest (most positive) of them, respectively. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export id="funcdef-clamp">clamp()</dfn> function takes three <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④">calculations</a>—a minimum value, a central value, and a maximum value—and represents its central calculation, clamped according to its min and max calculations, favoring the min calculation if it conflicts with the max. (That is, given clamp(MIN, VAL, MAX), it represents exactly the same value as max(MIN, min(VAL, MAX))). Either the min or max calculations (or even both) can instead be the keyword <dfn class="dfn-paneled css" data-dfn-for="clamp()" data-dfn-type="value" data-export id="valdef-clamp-none">none</dfn>, which indicates the value is not clamped from that side. (That is, clamp(MIN, VAL, none) is equivalent to max(MIN, VAL), clamp(none, VAL, MAX) is equivalent to min(VAL, MAX), and clamp(none, VAL, none) is equivalent to just calc(VAL).) For all three functions, the argument <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑤">calculations</a> can resolve to any <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑥"><number></a>, <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension②"><dimension></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑥"><percentage></a>, but must have a <a data-link-type="dfn" href="#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. <div class="example" id="example-67532822"> <a class="self-link" href="#example-67532822"></a> <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min②">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max②">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp③">clamp()</a> can be used to make sure a value doesn’t exceed a "safe" limit: For example, "responsive type" that sets <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size⑤">font-size</a> with viewport units might still want a minimum size to ensure readability: <pre class="lang-css highlight">.type <c- p>{</c-> <c- c>/* Set font-size to 10x the average of vw and vh,</c-> <c- c> but don’t let it go below 12px. */</c-> font-size: <c- nf>max</c-><c- p>(</c-><c- m>10</c-> * <c- p>(</c-><c- m>1</c-><c- k>vw</c-> + <c- m>1</c-><c- k>vh</c-><c- p>)</c-> / <c- m>2</c-><c- p>,</c-> <c- m>12</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> Note: Full math expressions are allowed in each of the arguments; there’s no need to nest a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①③">calc()</a> inside! You can also provide more than two arguments, if you have multiple constraints to apply. </div> <div class="example" id="example-50cf5aee"> <a class="self-link" href="#example-50cf5aee"></a> An occasional point of confusion when using <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min③">min()</a>/<a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max③">max()</a> is that you use max() to impose a minimum value on something (that is, properties like <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-min-width" id="ref-for-propdef-min-width">min-width</a> effectively use max()), and min() to impose a maximum value on something; it’s easy to accidentally reach for the opposite function and try to use min() to add a minimum size. Using <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp④">clamp()</a> can make the code read more naturally, as the value is nestled between its minimum and maximum: <pre class="lang-css highlight">.type <c- p>{</c-> <c- c>/* Force the font-size to stay between 12px and 100px */</c-> font-size: <c- nf>clamp</c-><c- p>(</c-><c- m>12</c-><c- k>px</c-><c- p>,</c-> <c- m>10</c-> * <c- p>(</c-><c- m>1</c-><c- k>vw</c-> + <c- m>1</c-><c- k>vh</c-><c- p>)</c-> / <c- m>2</c-><c- p>,</c-> <c- m>100</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </pre> Or, if you only wanted to impose a minimum size, but allow the font-size to grow as large as it wants: <pre class="lang-css highlight">.type <c- p>{</c-> <c- c>/* Force the font-size to be at least 12px */</c-> font-size: <c- nf>clamp</c-><c- p>(</c-><c- m>12</c-><c- k>px</c-><c- p>,</c-> <c- m>10</c-> * <c- p>(</c-><c- m>1</c-><c- k>vw</c-> + <c- m>1</c-><c- k>vh</c-><c- p>)</c-> / <c- m>2</c-><c- p>,</c-> none<c- p>);</c-> <c- p>}</c-> </pre> </div> <div class="note" role="note"> Note that <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑤">clamp()</a>, matching CSS conventions elsewhere, has its minimum value "win" over its maximum value if the two are in the "wrong order". That is, clamp(100px, ..., 50px) will resolve to 100px, exceeding its stated "max" value. If alternate resolution mechanics are desired they can be achieved by combining <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑥">clamp()</a> with <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min⑥">min()</a> or <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max⑥">max()</a>: <dl> <dt data-md>To have MAX win over MIN: <dd data-md> clamp(min(MIN, MAX), VAL, MAX). If you want to avoid repeating the MAX calculation, you can just reverse the nesting of functions that <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑦">clamp()</a> is defined against—min(MAX, max(MIN, VAL)). <dt data-md>To have MAX and MIN "swap" when they’re in the wrong order: <dd data-md> clamp(min(MIN, MAX), VAL, max(MIN, MAX)). Unfortunately, there’s no easy way to do this without repeating the MIN and MAX terms. </dl> </div> <h3 class="heading settled" data-level="10.3" id="round-func">10.3. Stepped Value Functions: <a class="css" data-link-type="maybe" href="#funcdef-round" id="ref-for-funcdef-round">round()</a>, <a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod">mod()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem">rem()</a><a class="self-link" href="#round-func"></a></h3> The stepped-value functions, <a class="css" data-link-type="maybe" href="#funcdef-round" id="ref-for-funcdef-round①">round()</a>, <a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod①">mod()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem①">rem()</a>, all transform a given value according to another "step value", in different ways. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="round()" id="funcdef-round">round(<a class="production css" data-link-type="type" href="#typedef-rounding-strategy" id="ref-for-typedef-rounding-strategy"><rounding-strategy></a>?, A, B?)</dfn> function contains an optional rounding strategy, and two <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑥">calculations</a> A and B, and returns the value of A, rounded according to the rounding strategy, to the nearest integer multiple of B either above or below A. The argument calculations can resolve to any <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑦"><number></a>, <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension③"><dimension></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑦"><percentage></a>, but must have a <a data-link-type="dfn" href="#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. If A is exactly equal to an integer multiple of B, <a class="css" data-link-type="maybe" href="#funcdef-round" id="ref-for-funcdef-round②">round()</a> resolves to A exactly (preserving whether A is 0⁻ or 0⁺, if relevant). Otherwise, there are two integer multiples of B that are potentially "closest" to A, <var>lower B</var> which is closer to −∞ and <var>upper B</var> which is closer to +∞. The following <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-rounding-strategy"><a class="production css" data-link-type="type" href="#typedef-rounding-strategy" id="ref-for-typedef-rounding-strategy①"><rounding-strategy></a></dfn>s dictate how to choose between them: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<rounding-strategy>" data-dfn-type="value" data-export id="valdef-rounding-strategy-nearest">nearest</dfn> <dd data-md> Choose whichever of <var>lower B</var> and <var>upper B</var> that has the smallest absolute difference from A. If both have an equal difference (A is exactly between the two values), choose <var>upper B</var>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<rounding-strategy>" data-dfn-type="value" data-export id="valdef-rounding-strategy-up">up</dfn> <dd data-md> Choose <var>upper B</var>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<rounding-strategy>" data-dfn-type="value" data-export id="valdef-rounding-strategy-down">down</dfn> <dd data-md> Choose <var>lower B</var>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="<rounding-strategy>" data-dfn-type="value" data-export id="valdef-rounding-strategy-to-zero">to-zero</dfn> <dd data-md> Choose whichever of <var>lower B</var> and <var>upper B</var> that has the smallest absolute difference from 0. </dl> If <var>lower B</var> would be zero, it is specifically equal to 0⁺; if <var>upper B</var> would be zero, it is specifically equal to 0⁻. If <a class="production css" data-link-type="type" href="#typedef-rounding-strategy" id="ref-for-typedef-rounding-strategy②"><rounding-strategy></a> is omitted, it defaults to <a class="css" data-link-type="maybe" href="#valdef-rounding-strategy-nearest" id="ref-for-valdef-rounding-strategy-nearest">nearest</a>. (Aka <a data-link-type="dfn" href="#css-round-to-the-nearest-integer" id="ref-for-css-round-to-the-nearest-integer①">rounding to the nearest integer</a>.) If the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type">type</a> of A matches <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑧"><number></a>, then B may be omitted, and defaults to 1; omitting B is otherwise invalid. <a class="self-link" href="#issue-1a929fd0"></a> CSSOM needs to specify how it rounds, and it’s probably good for CSS functions to round the same way by default. What behavior should be used? <a href="https://github.com/w3c/csswg-drafts/issues/5689">[Issue #5689]</a> <div class="example" id="example-1c1bb50d"><a class="self-link" href="#example-1c1bb50d"></a> Unlike languages like JavaScript which have a natural "precision" to round to (integers), CSS values have no such precision because values can be written in many different compatible units. As such, the precision has to be given explicitly; to round a width to the nearest 50px, one can write round(var(--width), 50px). </div> Note: JavaScript and other programming languages sometimes separate out the rounding strategies into separate rounding functions. JS’s <code class="highlight">Math<c- p>.</c->floor<c- p>()</c-></code> is equivalent to CSS’s round(down, ...); JS’s <code class="highlight">Math<c- p>.</c->ceil<c- p>()</c-></code> is equivalent to CSS’s round(up, ...); JS’s <code class="highlight">Math<c- p>.</c->trunc<c- p>()</c-></code> is equivalent to CSS’s round(to-zero, ...); and JS’s <code class="highlight">Math<c- p>.</c->round<c- p>()</c-></code> is equivalent to CSS’s round(nearest, ...), or just round(...). Note: The <a class="production css" data-link-type="type" href="#typedef-rounding-strategy" id="ref-for-typedef-rounding-strategy③"><rounding-strategy></a> keywords are the same as the keywords in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-rhythm-1/#propdef-block-step-size" id="ref-for-propdef-block-step-size">block-step-size</a> and have the same behavior. (block-step-size just lacks <a class="css" data-link-type="maybe" href="#valdef-rounding-strategy-to-zero" id="ref-for-valdef-rounding-strategy-to-zero">to-zero</a>; since block sizes are always non-negative, to-zero and <a class="css" data-link-type="maybe" href="#valdef-rounding-strategy-down" id="ref-for-valdef-rounding-strategy-down">down</a> would be identical.) The modulus functions <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="mod()" id="funcdef-mod">mod(A, B)</dfn> and <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="rem()" id="funcdef-rem">rem(A, B)</dfn> similarly contain two <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation⑧">calculations</a> A and B, and return the difference between A and the nearest integer multiple of B either above or below A. The argument calculations can resolve to any <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value①⑨"><number></a>, <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension④"><dimension></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑧"><percentage></a>, but must have the same <a data-link-type="dfn" href="#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 <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①">type</a> as the arguments. The two functions are very similar, and in fact return identical results if both arguments are positive or both are negative: the value of the function is equal to the value of A shifted by the integer multiple of B that brings the value <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="between-zero-and-b">between zero and B</dfn>. (Specifically, the range includes zero and excludes B. More specifically, if B is positive the range starts at 0⁺, and if B is negative it starts at 0⁻.) <div class="example" id="example-1588859b"> <a class="self-link" href="#example-1588859b"></a> For example, mod(18px, 5px) resolves to the value 3px, because subtracting 5px * 3 from 18px yields 3px, which is the only such value between 0px and 3px. Similarly, mod(-140deg, -90deg) resolves to the value -50deg, because adding -90deg * 1 to -140deg yields -50deg, which is the only such value between 0deg and -90deg. Evaluating either of these examples with <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem②">rem()</a> yields the exact same results. </div> Their behavior diverges if the A value and the B step are on opposite sides of zero: <a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod②">mod()</a> (short for “modulus”) continues to choose the integer multiple of B that puts the value <a data-link-type="dfn" href="#between-zero-and-b" id="ref-for-between-zero-and-b">between zero and B</a>, as above (guaranteeing that the result will either be zero or share the sign of B, not A), while <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem③">rem()</a> (short for "remainder") chooses the integer multiple of B that puts the value between zero and -B, avoiding changing the sign of the value. <div class="example" id="example-3a2ef59d"> <a class="self-link" href="#example-3a2ef59d"></a> For example, mod(-18px, 5px) resolves to the value 2px: adding 5px * 4 to -18px yields 2px, which is between 0px and 5px. On the other hand, rem(-18px, 5px) resolves to the value -3px: adding 5px * 3 to -18px yields -3px, which has the same sign as -18px but is between 0px and -5px. Similarly, mod(140deg, -90deg) resolves to the value -40deg (adding -90deg * 2 to 140deg, bringing it to between 0deg and -90deg), but rem(140deg, -90deg) resolves to the value 50deg. </div> <details> <summary>When should I choose <a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod③">mod()</a> vs <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem④">rem()</a>?</summary> Typically, users of this operation are in control of the step value (B), and are modifying an unknown value A. As a result, it’s usually more expected that the result is between 0 and B, regardless of A’s sign, meaning <a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod④">mod()</a> should be chosen. For example, if an author wants to know whether a length is an even or odd number of pixels, mod(A, 2px) will return either 0px or 1px (assuming the value is a whole number of pixels to begin with), regardless of the value of a. rem(A, 2px), on the other hand, will return 0px if A is an even number of pixels, but will return either 1px or -1px if it’s odd, depending on whether A is positive or negative. The opposite situation does sometimes occur, however, and so <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem⑤">rem()</a> is provided to cater to that. As well, rem() is the behavior of JavaScript’s <code class="highlight"><c- o>%</c-></code> operator, so if an exact match between CSS and JS code is desired, rem() can be useful. </details> Note: <a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod⑤">mod()</a> and <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem⑧">rem()</a> can also be defined directly in terms of other functions: mod(A, B) is equivalent to calc(A - sign(B)*round(down, A*sign(B), B)) (a hacky way to say "round(down) when B is positive, round(up) when B is negative), while rem(A, B) is equivalent to calc(A - round(to-zero, A, B)). (These expressions don’t always handle 0⁺ and 0⁻ correctly, though, because 0⁻ semantics aren’t commutative for addition.) <h4 class="heading settled" data-level="10.3.1" id="round-infinities">10.3.1. Argument Ranges<a class="self-link" href="#round-infinities"></a></h4> In round(A, B), if B is 0, the result is NaN. If A and B are both infinite, the result is NaN. If A is infinite but B is finite, the result is the same infinity. If A is finite but B is infinite, the result depends on the <a class="production css" data-link-type="type" href="#typedef-rounding-strategy" id="ref-for-typedef-rounding-strategy④"><rounding-strategy></a> and the sign of A: <dl> <dt data-md><a class="css" data-link-type="maybe" href="#valdef-rounding-strategy-nearest" id="ref-for-valdef-rounding-strategy-nearest①">nearest</a> <dt data-md><a class="css" data-link-type="maybe" href="#valdef-rounding-strategy-to-zero" id="ref-for-valdef-rounding-strategy-to-zero②">to-zero</a> <dd data-md> If A is positive or 0⁺, return 0⁺. Otherwise, return 0⁻. <dt data-md><a class="css" data-link-type="maybe" href="#valdef-rounding-strategy-up" id="ref-for-valdef-rounding-strategy-up">up</a> <dd data-md> If A is positive (not zero), return +∞. If A is 0⁺, return 0⁺. Otherwise, return 0⁻. <dt data-md><a class="css" data-link-type="maybe" href="#valdef-rounding-strategy-down" id="ref-for-valdef-rounding-strategy-down①">down</a> <dd data-md> If A is negative (not zero), return −∞. If A is 0⁻, return 0⁻. Otherwise, return 0⁺. </dl> In mod(A, B) or rem(A, B), if B is 0, the result is NaN. If A is infinite, the result is NaN. In mod(A, B) only, if B is infinite and A has opposite sign to B (including an oppositely-signed zero), the result is NaN. Note: All other "infinite B" cases are valid, and just return A immediately. <h3 class="heading settled" data-level="10.4" id="trig-funcs">10.4. Trigonometric Functions: <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin①">sin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos">cos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan">tan()</a>, <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin">asin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos">acos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan">atan()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-atan2" id="ref-for-funcdef-atan2">atan2()</a><a class="self-link" href="#trig-funcs"></a></h3> The trigonometric functions—<a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin②">sin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos①">cos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan①">tan()</a>, <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin①">asin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos①">acos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan①">atan()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-atan2" id="ref-for-funcdef-atan2①">atan2()</a>—compute the various basic trigonometric relationships. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="sin()" id="funcdef-sin">sin(A)</dfn>, <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="cos()" id="funcdef-cos">cos(A)</dfn>, and <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="tan()" id="funcdef-tan">tan(A)</dfn> functions all contain a single <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⓪">calculation</a> which must resolve to either a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⓪"><number></a> or an <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①②"><angle></a>, and compute their corresponding function by interpreting the result of their argument as radians. (That is, sin(45deg), sin(.125turn), and sin(3.14159 / 4) all represent the same value, approximately .707.) They all represent a <number>, with the return type <a data-link-type="dfn" href="#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent">made consistent</a> with the input calculation’s type. <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin③">sin()</a> and <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos②">cos()</a> will always return a number between −1 and 1, while <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan②">tan()</a> can return any number between −∞ and +∞. (See <a href="#calc-type-checking">§ 10.9 Type Checking</a> for details on how <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑧">math functions</a> handle ∞.) The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="asin()" id="funcdef-asin">asin(A)</dfn>, <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="acos()" id="funcdef-acos">acos(A)</dfn>, and <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="atan()" id="funcdef-atan">atan(A)</dfn> functions are the "arc" or "inverse" trigonometric functions, representing the inverse function to their corresponding "normal" trig functions. All of them contain a single <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①②">calculation</a> which must resolve to a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②②"><number></a>, and compute their corresponding function, interpreting their result as a number of radians, representing an <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①③"><angle></a> with the return type <a data-link-type="dfn" href="#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent①">made consistent</a> with the input calculation’s type. The angle returned by <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin②">asin()</a> must be normalized to the range [-90deg, 90deg]; the angle returned by <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos②">acos()</a> to the range [0deg, 180deg]; and the angle returned by <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan②">atan()</a> to the range [-90deg, 90deg]. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="atan2()" id="funcdef-atan2">atan2(A, B)</dfn> function contains two comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①④">calculations</a>, A and B. A and B can resolve to any <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②③"><number></a>, <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension⑤"><dimension></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value②⑨"><percentage></a>, but must have a <a data-link-type="dfn" href="#css-consistent-type" id="ref-for-css-consistent-type④">consistent type</a> or else the function is invalid. The function returns the <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①④"><angle></a> between the positive X-axis and the point (B,A), with the return type <a data-link-type="dfn" href="#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent②">made consistent</a> with the input calculation’s type. The returned angle must be normalized to the interval (-180deg, 180deg] (that is, greater than -180deg, and less than or equal to 180deg). Note: atan2(Y, X) is generally equivalent to atan(Y / X), but it gives a better answer when the point in question may include negative components. atan2(1, -1), corresponding to the point (-1, 1), returns 135deg, distinct from atan2(-1, 1), corresponding to the point (1, -1), which returns -45deg. In contrast, atan(1 / -1) and atan(-1 / 1) both return-45deg, because the internal calculation resolves to -1 for both. <h4 class="heading settled" data-level="10.4.1" id="trig-infinities">10.4.1. Argument Ranges<a class="self-link" href="#trig-infinities"></a></h4> In sin(A), cos(A), or tan(A), if A is infinite, the result is NaN. (See <a href="#calc-type-checking">§ 10.9 Type Checking</a> for details on how <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑨">math functions</a> handle NaN.) In sin(A) or tan(A), if A is 0⁻, the result is 0⁻. In tan(A), if A is one of the asymptote values (such as 90deg, 270deg, etc), the numeric result is <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#implementation-defined" id="ref-for-implementation-defined④">implementation-defined</a>. If an implementation is capable of exactly representing these inputs, it should return +∞ for the asymptotes at <code class="highlight"><c- m>90</c-><c- k>deg</c-> + N*<c- m>360</c-><c- k>deg</c-></code>, and −∞ for the asymptotes at <code class="highlight"><c- m>-90</c-><c- k>deg</c-> + N*<c- m>360</c-><c- k>deg</c-></code>, but implementations are not required to be able to exactly represent these inputs (and if they can’t, will return whatever the correct numeric answer is for the closest approximation to the input they are capable of representing). Authors must not rely on <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan③">tan()</a> returning any particular value for these inputs. <details class="note"> <summary>Why are these <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#implementation-defined" id="ref-for-implementation-defined⑤">implementation-defined</a>?</summary> The tangent function is discontinuous at its asymptotes: it approaches infinity from one side and negative infinity from the other side, and isn’t defined at the exact values of the asymptote. Further, whether or not the asymptotic values are exactly representable in implementations depends on how they internally store and manipulate angles; when written in degrees the values are simple (90deg, etc), but in radians the values are transcendental (pi / 2, etc) and cannot be exactly represented. So, even defining a specific behavior for these values is difficult; if an implementation uses radians internally, it would have to do some fuzzy matching to return the defined value when the input is sufficiently close to the asymptote. The other major language for the Web, JavaScript, exposes these functions as taking radians only, so it can’t hit the exact asymptotes either (and this true for most other computer languages, too). Authors writing code in JS, then, can’t rely on any specific behavior for these values either, and it’s unlikely that their needs in CSS are significantly different. The suggested behavior for implementations that can exactly represent the asymptote values preserves round-tripping with the <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan③">atan()</a> function: tan(atan(X)) and atan(tan(X)) will both return (approximately) X for all possible X values, given this definition. It also means that within the supported output range of atan(), the function is continuous. </details> In asin(A) or acos(A), if A is less than -1 or greater than 1, the result is NaN. In acos(A), if A is exactly 1, the result is 0. In asin(A) or atan(A), if A is 0⁻, the result is 0⁻. In atan(A), if A is +∞, the result is 90deg; if A is −∞, the result is -90deg. In atan2(Y, X), the following table gives the results for all unusual argument combinations: <table class="data"> <thead> <tr> <td colspan="2" style="border:none"> <th colspan="6">X <tr> <td colspan="2" style="border:none"> <th>−∞ <th>-finite <th>0⁻ <th>0⁺ <th>+finite <th>+∞ <tbody> <tr> <th rowspan="6" style="border-right:1px solid silver">Y <th style="border-right: black 2px solid">−∞ <td>-135deg <td>-90deg <td>-90deg <td>-90deg <td>-90deg <td>-45deg <tr> <th>-finite <td>-180deg <td>(normal) <td>-90deg <td>-90deg <td>(normal) <td>0⁻deg <tr> <th>0⁻ <td>-180deg <td>-180deg <td>-180deg <td>0⁻deg <td>0⁻deg <td>0⁻deg <tr> <th>0⁺ <td>180deg <td>180deg <td>180deg <td>0⁺deg <td>0⁺deg <td>0⁺deg <tr> <th>+finite <td>180deg <td>(normal) <td>90deg <td>90deg <td>(normal) <td>0⁺deg <tr> <th>+∞ <td>135deg <td>90deg <td>90deg <td>90deg <td>90deg <td>45deg </table> Note: All of these behaviors are intended to match the "standard" definitions of these functions as implemented by most programming languages, in particular as implemented in JS. <h3 class="heading settled" data-level="10.5" id="exponent-funcs">10.5. Exponential Functions: <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow">pow()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt">sqrt()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot">hypot()</a>, <a class="css" data-link-type="maybe" href="#funcdef-log" id="ref-for-funcdef-log">log()</a>, <a class="css" data-link-type="maybe" href="#funcdef-exp" id="ref-for-funcdef-exp">exp()</a><a class="self-link" href="#exponent-funcs"></a></h3> The exponential functions—<a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow①">pow()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt①">sqrt()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot①">hypot()</a>, <a class="css" data-link-type="maybe" href="#funcdef-log" id="ref-for-funcdef-log①">log()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-exp" id="ref-for-funcdef-exp①">exp()</a>—compute various exponential functions with their arguments. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="pow()" id="funcdef-pow">pow(A, B)</dfn> function contains two comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⑥">calculations</a> A and B, both of which must resolve to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②④"><number></a>s, and returns the result of raising A to the power of B, returning the value as a <number>. The input calculations must have a <a data-link-type="dfn" href="#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. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="sqrt()" id="funcdef-sqrt">sqrt(A)</dfn> function contains a single <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation①⑧">calculation</a> which must resolve to a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⑥"><number></a>, and returns the square root of the value as a <number>, with the return type <a data-link-type="dfn" href="#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent③">made consistent</a> with the input calculation’s type. (sqrt(X) and pow(X, .5) are basically equivalent, differing only in some error-handling; <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt②">sqrt()</a> is a common enough function that it is provided as a convenience.) The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="hypot()" id="funcdef-hypot">hypot(A, …)</dfn> function contains one or more comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⓪">calculations</a>, and returns the length of an N-dimensional vector with components equal to each of the calculations. (That is, the square root of the sum of the squares of its arguments.) The argument calculations can resolve to any <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⑧"><number></a>, <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension⑥"><dimension></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③⓪"><percentage></a>, but must have a <a data-link-type="dfn" href="#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. <details class="note"> <summary>Why does <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot②">hypot()</a> allow dimensions (values with units), but <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow②">pow()</a> and <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt③">sqrt()</a> only work on numbers?</summary> You are allowed to write expressions like hypot(30px, 40px), which resolves to 50px, but you aren’t allowed to write the expression sqrt(pow(30px, 2) + pow(40px, 2)), despite the two being equivalent in most mathematical systems. There are two reasons for this: numeric precision in the exponents, and clashing expectations from authors. First, numerical precision. For a <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②">type</a> to <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match">match</a> a CSS production like <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⑤"><length></a>, it needs to have a single unit with its exponent set to exactly 1. Theoretically, expressions like pow(pow(30px, 3), 1/3) should result in exactly that: the inner pow(30px, 3) would resolve to a value of 27000 with a type of «[ "length" → 3 ]» (aka <length>³), and then the pow(X, 1/3) would cube-root the value back down to 30 and multiply the exponent by 1/3, giving «[ "length" → 1 ]», which matches <length>. In the realm of pure mathematics, that’s guaranteed to work out; in the real-world of computers using binary floating-point arithmetic, in some cases the powers might not exactly cancel out, leaving you with an invalid <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⓪">math function</a> for confusing, hard-to-track-down reasons. (For a JS example, evaluate <code class="highlight">Math.<c- nf>pow</c-><c- p>(</c->Math.<c- nf>pow</c-><c- p>(</c-><c- m>30</c-><c- p>,</c-> <c- m>10</c->/<c- m>3</c-><c- p>),</c-> <c- m>.1+.1+.1</c-><c- p>)</c-></code>; the result is not exactly 30, because <code class="highlight"><c- m>.1+.1+.1</c-></code> is not exactly 3/10. Instead, <code class="highlight"><c- p>(</c-><c- m>10</c->/<c- m>3</c-><c- p>)</c-> * <c- p>(</c-><c- m>.1</c-> + <c- m>.1</c-> + <c- m>.1</c-><c- p>)</c-></code> is slightly greater than 1.) Requiring authors to cast their value down into a number, do all the math on the raw number, then finally send it back to the desired unit, while inconvenient, ensures that numerical precision won’t bite anyone: calc(pow(pow(30px / 1px, 3), 1/3) * 1px) is guaranteed to resolve to a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⑧"><length></a>, with a value that, if not exactly 30, is at least very close to 30, even if numerical precision actually prevents the powers from exactly canceling. Second, clashing expectations. It’s not uncommon for authors to expect pow(30px, 2) to result in 900px (such as in <a href="https://github.com/sass/sass/issues/684">this Sass issue</a>); that is, just squaring the numerical value and leaving the unit alone. This, however, means the result is dependent on what unit you’re expressing the argument in; if 1em is 16px, then pow(1em, 2) would give 1em, while pow(16px, 2) would give 256px, or 16em, which are very different values for what should otherwise be identical input arguments! This sort of input dependency is troublesome for CSS, which generally allows values to be <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑧">canonicalized</a> freely; it also makes more complex expressions like pow(2em + 10px, 2) difficult to interpret. Again, requiring authors to cast their value down into a number and then back up again into the desired unit sidesteps these issues; pow(30, 2) is indeed 900, and the author can interpret that however they wish. <hr> On the other hand, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot③">hypot()</a> doesn’t suffer from these problems. Numerical precision in units isn’t a concern, as the inputs and output all have the same type. The result isn’t unit-dependent, either, due to the nature of the operation; hypot(3em, 4em) and hypot(48px, 64px) both result in the same length when 1em equals 16px: 5em or 80px. Thus it’s fine to let author use dimensions directly in hypot(). </details> The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="log()" id="funcdef-log">log(A, B?)</dfn> function contains one or two <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②③">calculations</a> (representing the value to be logarithmed, and the base of the logarithm, defaulting to e), which must resolve to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value②⑨"><number></a>s, and returns the logarithm base B of the value A, as a <number> with the return type <a data-link-type="dfn" href="#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent④">made consistent</a> with the input calculation’s type. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="exp()" id="funcdef-exp">exp(A)</dfn> function contains one <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⑤">calculation</a> which must resolve to a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③①"><number></a>, and returns the same value as pow(e, A) as a <number> with the return type <a data-link-type="dfn" href="#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent⑤">made consistent</a> with the input calculation’s type. <div class="example" id="example-bebe620e"> <a class="self-link" href="#example-bebe620e"></a> The <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow③">pow()</a> function can be useful for strategies like <a href="https://www.modularscale.com/">CSS Modular Scale</a>, which relates all the font-sizes on a page to each other by a fixed ratio. These sizes can be easily written into custom properties like: <pre class="lang-css highlight">:root <c- p>{</c-> <c- k>--h6</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- k>rem</c-> * <c- nf>pow</c-><c- p>(</c-><c- m>1.5</c-><c- p>,</c-> <c- m>-1</c-><c- p>));</c-> <c- k>--h5</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- k>rem</c-> * <c- nf>pow</c-><c- p>(</c-><c- m>1.5</c-><c- p>,</c-> <c- m>0</c-><c- p>));</c-> <c- k>--h4</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- k>rem</c-> * <c- nf>pow</c-><c- p>(</c-><c- m>1.5</c-><c- p>,</c-> <c- m>1</c-><c- p>));</c-> <c- k>--h3</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- k>rem</c-> * <c- nf>pow</c-><c- p>(</c-><c- m>1.5</c-><c- p>,</c-> <c- m>2</c-><c- p>));</c-> <c- k>--h2</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- k>rem</c-> * <c- nf>pow</c-><c- p>(</c-><c- m>1.5</c-><c- p>,</c-> <c- m>3</c-><c- p>));</c-> <c- k>--h1</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>1</c-><c- k>rem</c-> * <c- nf>pow</c-><c- p>(</c-><c- m>1.5</c-><c- p>,</c-> <c- m>4</c-><c- p>));</c-> <c- p>}</c-> </pre> ...rather than writing out the values in pre-calculated numbers like 5.0625rem (what calc(1rem * pow(1.5, 4)) resolves to) which have less clear provenance when encountered in a stylesheet. </div> <div class="example" id="example-d7f26d9d"> <a class="self-link" href="#example-d7f26d9d"></a> With a single argument, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot⑤">hypot()</a> gives the absolute value of its input; hypot(2em) and hypot(-2em) both resolve to 2em. With more arguments, it gives the size of the main diagonal of a box whose side lengths are given by the arguments. This can be useful for transform-related things, giving the distance that an element will actually travel when it’s translated by a particular X, Y, and Z amount. For example, hypot(30px, 40px) resolves to 50px, which is indeed the distance between an element’s starting and ending positions when it’s translated by a translate(30px, 40px) transform. If an author wanted elements to get smaller as they moved further away from their starting point (drawing some sort of word cloud, for example), they could then use this distance in their scaling factor calculations. </div> <div class="example" id="example-d939ff73"> <a class="self-link" href="#example-d939ff73"></a> With a single argument, <a class="css" data-link-type="maybe" href="#funcdef-log" id="ref-for-funcdef-log②">log()</a> provides the “natural log” of its argument, or the log base e, same as JavaScript. If one instead wants log base 10 (to, for example, count the number of digits in a value) or log base 2 (counting the number of bits in a value), log(X, 10) or log(X, 2) provide those values. </div> <h4 class="heading settled" data-level="10.5.1" id="exponent-infinities">10.5.1. Argument Ranges<a class="self-link" href="#exponent-infinities"></a></h4> In pow(A, B), if A is negative and finite, and B is finite, B must be an integer, or else the result is NaN. If A or B are infinite or 0, the following tables give the results: <table class="data" style="table-layout:fixed"> <thead> <tr> <td> <th>A is −∞ <th>A is 0⁻ <th>A is 0⁺ <th>A is +∞ <tbody> <tr> <th>B is −finite <td>0⁻ if B is an odd integer, 0⁺ otherwise <td>−∞ if B is an odd integer, +∞ otherwise <td>+∞ <td>0⁺ <tr> <th>B is 0 <td colspan="4">always 1 <tr> <th>B is +finite <td>−∞ if B is an odd integer, +∞ otherwise <td>0⁻ if B is an odd integer, 0⁺ otherwise <td>0⁺ <td>+∞ </table> <table class="data"> <thead> <tr> <td> <th>A is < -1 <th>A is -1 <th>-1 < A < 1 <th>A is 1 <th>A is > 1 <tbody> <tr> <th>B is +∞ <td>result is +∞ <td>result is NaN <td>result is 0⁺ <td>result is NaN <td>result is +∞ <tr> <th>B is −∞ <td>result is 0⁺ <td>result is NaN <td>result is +∞ <td>result is NaN <td>result is 0⁺ </table> In sqrt(A), if A is +∞, the result is +∞. If A is 0⁻, the result is 0⁻. If A is less than 0, the result is NaN. In hypot(A, …), if any of the inputs are infinite, the result is +∞. In log(A, B), if B is 1 or negative, B values between 0 and 1, or greater than 1, are valid. the result is NaN. If A is negative, the result is NaN. If A is 0⁺ or 0⁻, the result is −∞. If A is 1, the result is 0⁺. If A is +∞, the result is +∞. In exp(A), if A is +∞, the result is +∞. If A is −∞, the result is 0⁺. (See <a href="#calc-type-checking">§ 10.9 Type Checking</a> for details on how <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①①">math functions</a> handle NaN and infinities.) <div class="note" role="note"> All of these behaviors are intended to match the "standard" definitions of these functions as implemented by most programming languages, in particular as implemented in JS. The only divergences from the behavior of the equivalent JS functions are that NaN is "infectious" in every function, forcing the function to return NaN if any argument calculation is NaN. <details> <summary>Details of the JS Behavior</summary> There are two cases in JS where a NaN is not "infectious" to the math function it finds itself in: <ul> <li data-md> <code class="highlight">Math<c- p>.</c->hypot<c- p>(</c-><c- kc>Infinity</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>)</c-></code> will return <code class="highlight"><c- kc>Infinity</c-></code>. <li data-md> <code class="highlight">Math<c- p>.</c->pow<c- p>(</c-><c- kc>NaN</c-><c- p>,</c-> <c- mf>0</c-><c- p>)</c-></code> will return <code class="highlight"><c- mf>1</c-></code>. </ul> The logic appears to be that, if you replace the NaN with any Number, the return value will be the same. However, this logic is not applied consistently to the <code class="highlight">Math</code> functions: <code class="highlight">Math<c- p>.</c->max<c- p>(</c-><c- kc>Infinity</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>)</c-></code> returns <code class="highlight"><c- kc>NaN</c-></code>, not <code class="highlight"><c- kc>Infinity</c-></code>; the same is true of <code class="highlight">Math<c- p>.</c->min<c- p>(</c-><c- o>-</c-><c- kc>Infinity</c-><c- p>,</c-> <c- kc>NaN</c-><c- p>)</c-></code>. Because this is an error corner case, JS isn’t consistent on the matter, and NaN recognition/handling of <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⑦">calculations</a> is likely done at a higher CSS level rather than in the internal math functions anyway, consistency in CSS was chosen to be more important, so all functions were defined to have "infectious" NaN. </details> </div> <h3 class="heading settled" data-level="10.6" id="sign-funcs">10.6. Sign-Related Functions: <a class="css" data-link-type="maybe" href="#funcdef-abs" id="ref-for-funcdef-abs">abs()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sign" id="ref-for-funcdef-sign">sign()</a><a class="self-link" href="#sign-funcs"></a></h3> The sign-related functions—<a class="css" data-link-type="maybe" href="#funcdef-abs" id="ref-for-funcdef-abs①">abs()</a> and <a class="css" data-link-type="maybe" href="#funcdef-sign" id="ref-for-funcdef-sign①">sign()</a>—compute various functions related to the sign of their argument. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="abs()" id="funcdef-abs">abs(A)</dfn> function contains one <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⑧">calculation</a> A, and returns the absolute value of A, as the same <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type④">type</a> as the input: if A’s numeric value is positive or 0⁺, just A again; otherwise -1 * A. The <dfn class="dfn-paneled css" data-dfn-type="function" data-export data-lt="sign()" id="funcdef-sign">sign(A)</dfn> function contains one <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation②⑨">calculation</a> A, and returns -1 if A’s numeric value is negative, +1 if A’s numeric value is positive, 0⁺ if A’s numeric value is 0⁺, and 0⁻ if A’s numeric value is 0⁻. The return type is a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③③"><number></a>, <a data-link-type="dfn" href="#css-make-a-type-consistent" id="ref-for-css-make-a-type-consistent⑥">made consistent</a> with the input calculation’s type. Note: Both of these functions operate on the fully simplified/resolved form of their arguments, which may give unintuitive results at first glance. In particular, an expression like 10% might be positive or negative once it’s resolved, depending on what value it’s resolved against. For example, in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position②">background-position</a> positive percentages resolve to a negative length, and vice versa, if the background image is larger than the background area. Thus sign(10%) might return 1 or -1, depending on how the percentage is resolved! (Or even 0, if it’s resolved against a zero length.) <h3 class="heading settled" data-level="10.7" id="calc-keywords">10.7. Numeric Keywords<a class="self-link" href="#calc-keywords"></a></h3> Keywords in <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③①">calculations</a> provide access to values that are difficult or impossible to represent as literals. Each keyword defines its value, its <a data-link-type="dfn" href="#determine-the-type-of-a-calculation" id="ref-for-determine-the-type-of-a-calculation①">type</a>, and when it can be resolved. <h4 class="heading settled" data-level="10.7.1" id="calc-constants">10.7.1. Numeric Constants: <a class="css" data-link-type="maybe" href="#valdef-calc-e" id="ref-for-valdef-calc-e">e</a>, <a class="css" data-link-type="maybe" href="#valdef-calc-pi" id="ref-for-valdef-calc-pi">pi</a><a class="self-link" href="#calc-constants"></a></h4> While the trigonometric and exponential functions handle many complex numeric operations, some reasonable calculations must be put together more manually, and many times these include well-known constants, such as e and π. Rather than require authors to manually type out several digits of these constants, a few of them are provided directly: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="calc()" data-dfn-type="value" data-export id="valdef-calc-e">e</dfn> <dd data-md> the base of the natural logarithm, approximately equal to 2.7182818284590452354. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="calc()" data-dfn-type="value" data-export id="valdef-calc-pi">pi</dfn> <dd data-md> the ratio of a circle’s circumference to its diameter, approximately equal to 3.1415926535897932. </dl> Both of these keywords are <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③④"><number></a>s, and resolve at parse time. Note: These keywords are only usable within a calculation, such as calc(pow(e, pi) - pi), or min(pi, 5, e). If used outside of a calculation, they’re treated like any other keyword: <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-animations-1/#propdef-animation-name" id="ref-for-propdef-animation-name①">animation-name: pi;</a> refers to an animation named "pi"; <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height①⓪">line-height: e;</a> is invalid (not similar to line-height: 2.7, but line-height: calc(e); is). <h4 class="heading settled" data-level="10.7.2" id="calc-error-constants">10.7.2. Degenerate Numeric Constants: <a class="css" data-link-type="maybe" href="#valdef-calc-infinity" id="ref-for-valdef-calc-infinity">infinity</a>, <a class="css" data-link-type="maybe" href="#valdef-calc--infinity" id="ref-for-valdef-calc--infinity">-infinity</a>, <a class="css" data-link-type="maybe" href="#valdef-calc-nan" id="ref-for-valdef-calc-nan">NaN</a><a class="self-link" href="#calc-error-constants"></a></h4> When a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③②">calculation</a> or a subtree of a calculation becomes <a data-link-type="dfn" href="#css-infinity" id="ref-for-css-infinity">infinite</a> or <a data-link-type="dfn" href="#css-nan" id="ref-for-css-nan">NaN</a>, representing it with a numeric value is no longer possible. To aid in serialization of these degenerate values, the following additional math constants are defined: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="calc()" data-dfn-type="value" data-export id="valdef-calc-infinity">infinity</dfn> <dd data-md> the value positive infinity (+∞) <dt data-md><dfn class="dfn-paneled css" data-dfn-for="calc()" data-dfn-type="value" data-export id="valdef-calc--infinity">-infinity</dfn> <dd data-md> the value negative infinity (−∞) <dt data-md><dfn class="dfn-paneled css" data-dfn-for="calc()" data-dfn-type="value" data-export id="valdef-calc-nan">NaN</dfn> <dd data-md> the value NaN </dl> All of these keywords are <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③⑤"><number></a>s, and resolve at parse time. As usual for CSS keywords, these are <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive⑥">ASCII case-insensitive</a>. Thus, calc(InFiNiTy) is perfectly valid. However, <a class="css" data-link-type="maybe" href="#valdef-calc-nan" id="ref-for-valdef-calc-nan①">NaN</a> must be serialized with this canonical casing. Note: As these keywords are <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③⑥"><number></a>s, to get an infinite length, for example, requires an expression like calc(infinity * 1px). Note: These constants are defined mostly to make serialization of infinite/NaN values simpler and more obvious, but can be used to indicate a "largest possible value", since an infinite value gets clamped to the allowed range. It’s rare for this to be reasonable, but when it is, using <a class="css" data-link-type="maybe" href="#valdef-calc-infinity" id="ref-for-valdef-calc-infinity①">infinity</a> is clearer in its intent than just putting an enormous number in one’s stylesheet. <h4 class="heading settled" data-level="10.7.3" id="calc-variables">10.7.3. Numeric Variables<a class="self-link" href="#calc-variables"></a></h4> Other specifications can define additional keywords which are usable in <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③④">calculations</a> in certain contexts. For example, <a data-link-type="dfn" href="https://www.w3.org/TR/css-color-5/#relative-color" id="ref-for-relative-color">relative color</a> syntax defines a number of color-channel keywords representing the value of each color channel as a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③⑦"><number></a>. Each specifications defining such keywords must define for each keyword: <ul> <li data-md> its value <li data-md> its <a data-link-type="dfn" href="#determine-the-type-of-a-calculation" id="ref-for-determine-the-type-of-a-calculation②">type</a> (<a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value③⑧"><number></a>, <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value②⑨"><length></a>, etc) <li data-md> when it resolves (parse time, computed-value time, or used-value time) </ul> <h3 class="heading settled" data-level="10.8" id="calc-syntax">10.8. Syntax<a class="self-link" href="#calc-syntax"></a></h3> The syntax of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①②">math function</a> is: <pre class="prod highlight"><a class="production" data-link-type="function" href="#funcdef-calc" id="ref-for-funcdef-calc①④"><<c- nf>calc</c-><c- p>()</c->></a> = <c- nf>calc</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-min" id="ref-for-funcdef-min⑦"><<c- nf>min</c-><c- p>()</c->></a> = <c- nf>min</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②"><calc-sum></a><a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma②">#</a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-max" id="ref-for-funcdef-max⑦"><<c- nf>max</c-><c- p>()</c->></a> = <c- nf>max</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum③"><calc-sum></a><a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma③">#</a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑧"><<c- nf>clamp</c-><c- p>()</c->></a> = <c- nf>clamp</c-><c- p>(</c-> <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum④"><calc-sum></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one②⑨">|</a> none <c- p>]</c-><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma③"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑤"><calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma④"><c- p>,</c-></a> <c- p>[</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑥"><calc-sum></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③⓪">|</a> none <c- p>]</c-> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-round" id="ref-for-funcdef-round③"><<c- nf>round</c-><c- p>()</c->></a> = <c- nf>round</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-rounding-strategy" id="ref-for-typedef-rounding-strategy⑤"><rounding-strategy></a><a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt④">?</a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma⑤"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑦"><calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma⑥"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑧"><calc-sum></a><a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt⑤">?</a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-mod" id="ref-for-funcdef-mod⑥"><<c- nf>mod</c-><c- p>()</c->></a> = <c- nf>mod</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum⑨"><calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma⑦"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⓪"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-rem" id="ref-for-funcdef-rem⑨"><<c- nf>rem</c-><c- p>()</c->></a> = <c- nf>rem</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①①"><calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma⑧"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①②"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-sin" id="ref-for-funcdef-sin④"><<c- nf>sin</c-><c- p>()</c->></a> = <c- nf>sin</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①③"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-cos" id="ref-for-funcdef-cos③"><<c- nf>cos</c-><c- p>()</c->></a> = <c- nf>cos</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①④"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-tan" id="ref-for-funcdef-tan④"><<c- nf>tan</c-><c- p>()</c->></a> = <c- nf>tan</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑤"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-asin" id="ref-for-funcdef-asin③"><<c- nf>asin</c-><c- p>()</c->></a> = <c- nf>asin</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑥"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-acos" id="ref-for-funcdef-acos③"><<c- nf>acos</c-><c- p>()</c->></a> = <c- nf>acos</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑦"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-atan" id="ref-for-funcdef-atan⑤"><<c- nf>atan</c-><c- p>()</c->></a> = <c- nf>atan</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑧"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-atan2" id="ref-for-funcdef-atan2②"><<c- nf>atan2</c-><c- p>()</c->></a> = <c- nf>atan2</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum①⑨"><calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma⑨"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②⓪"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-pow" id="ref-for-funcdef-pow④"><<c- nf>pow</c-><c- p>()</c->></a> = <c- nf>pow</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②①"><calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma①⓪"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②②"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt④"><<c- nf>sqrt</c-><c- p>()</c->></a> = <c- nf>sqrt</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②③"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-hypot" id="ref-for-funcdef-hypot⑥"><<c- nf>hypot</c-><c- p>()</c->></a> = <c- nf>hypot</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②④"><calc-sum></a><a data-link-type="grammar" href="#mult-comma" id="ref-for-mult-comma④">#</a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-log" id="ref-for-funcdef-log③"><<c- nf>log</c-><c- p>()</c->></a> = <c- nf>log</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②⑤"><calc-sum></a><a data-link-type="grammar" href="#comb-comma" id="ref-for-comb-comma①①"><c- p>,</c-></a> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②⑥"><calc-sum></a><a data-link-type="grammar" href="#mult-opt" id="ref-for-mult-opt⑥">?</a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-exp" id="ref-for-funcdef-exp②"><<c- nf>exp</c-><c- p>()</c->></a> = <c- nf>exp</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②⑦"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-abs" id="ref-for-funcdef-abs②"><<c- nf>abs</c-><c- p>()</c->></a> = <c- nf>abs</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum②⑧"><calc-sum></a> <c- p>)</c-> <a class="production" data-link-type="function" href="#funcdef-sign" id="ref-for-funcdef-sign②"><<c- nf>sign</c-><c- p>()</c->></a> = <c- nf>sign</c-><c- p>(</c-> <a class="production" data-link-type="type" href="#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-sum"><calc-sum></dfn> = <a class="production" data-link-type="type" href="#typedef-calc-product" id="ref-for-typedef-calc-product"><calc-product></a> <c- p>[</c-> <c- p>[</c-> <c- s>'+'</c-> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③①">|</a> <c- s>'-'</c-> <c- p>]</c-> <a class="production" data-link-type="type" href="#typedef-calc-product" id="ref-for-typedef-calc-product①"><calc-product></a> <c- p>]</c-><a data-link-type="grammar" href="#mult-zero-plus" id="ref-for-mult-zero-plus②">*</a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-calc-product"><calc-product></dfn> = <a class="production" data-link-type="type" href="#typedef-calc-value" id="ref-for-typedef-calc-value"><calc-value></a> <c- p>[</c-> <c- p>[</c-> <c- s>'*'</c-> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③②">|</a> <c- s>'/'</c-> <c- p>]</c-> <a class="production" data-link-type="type" href="#typedef-calc-value" id="ref-for-typedef-calc-value①"><calc-value></a> <c- p>]</c-><a data-link-type="grammar" href="#mult-zero-plus" id="ref-for-mult-zero-plus③">*</a> <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-calc-value"><calc-value></dfn> = <a class="production" data-link-type="type" href="#number-value" id="ref-for-number-value③⑨"><number></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③③">|</a> <a class="production" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension⑦"><dimension></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③④">|</a> <a class="production" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③①"><percentage></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③⑤">|</a> <a class="production" data-link-type="type" href="#typedef-calc-keyword" id="ref-for-typedef-calc-keyword"><calc-keyword></a> <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③⑥">|</a> <c- p>(</c-> <a class="production" data-link-type="type" href="#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-keyword"><calc-keyword></dfn> = e <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③⑦">|</a> pi <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③⑧">|</a> infinity <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one③⑨">|</a> -infinity <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one④⓪">|</a> NaN <a class="production" data-link-type="type" href="#typedef-rounding-strategy" id="ref-for-typedef-rounding-strategy⑥"><rounding-strategy></a> = nearest <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one④①">|</a> up <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one④②">|</a> down <a data-link-type="grammar" href="#comb-one" id="ref-for-comb-one④③">|</a> to-zero </pre> In some contexts, additional <a class="production css" data-link-type="type" href="#typedef-calc-keyword" id="ref-for-typedef-calc-keyword①"><calc-keyword></a> values can be defined to be valid. (For example, in <a data-link-type="dfn" href="https://www.w3.org/TR/css-color-5/#relative-color" id="ref-for-relative-color①">relative color</a> syntax, appropriate channel keywords are allowed.) In addition, <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#whitespace" id="ref-for-whitespace">whitespace</a> is required on both sides of the + and - operators. (The * and / operators can be used without white space around them.) Several of the math functions above have additional constraints on what their <a class="production css" data-link-type="type" href="#typedef-calc-sum" id="ref-for-typedef-calc-sum③①"><calc-sum></a> arguments can contain. Check the definitions of the individual functions for details. UAs must support <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③⑤">calculations</a> of at least 32 <a class="production css" data-link-type="type" href="#typedef-calc-value" id="ref-for-typedef-calc-value②"><calc-value></a> terms and at least 32 levels of nesting (parentheses and/or functions). For functions that support an arbitrary number of arguments (such as <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min⑧">min()</a>), it must also support at least 32 arguments. If a calculation contains more than the supported number of terms, arguments, or nesting it must be treated as if it were invalid. <h3 class="heading settled" data-level="10.9" id="calc-type-checking">10.9. Type Checking<a class="self-link" href="#calc-type-checking"></a></h3> A <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①③">math function</a> can be many possible types, such as <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③⓪"><length></a>, <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④⓪"><number></a>, etc., depending on the <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③⑦">calculations</a> it contains, as defined below. It can be used anywhere a value of that type is allowed. <div class="example" id="example-40312766"><a class="self-link" href="#example-40312766"></a> For example, the <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> property accepts <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③①"><length></a> values, so a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①④">math function</a> that resolves to a <length>, such as calc(5px + 1em), can be used in width. </div> Additionally, <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑤">math functions</a> that resolve to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④①"><number></a> can be used in any place that only accepts <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①②"><integer></a>; the value is <a data-link-type="dfn" href="#css-round-to-the-nearest-integer" id="ref-for-css-round-to-the-nearest-integer②">rounded to the nearest integer</a> as it resolves. Operators form sub-expressions, which gain types based on their arguments. Note: In previous versions of this specification, multiplication and division were limited in what arguments they could take, to avoid producing more complex intermediate results (such as 1px * 1em, which is <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③③"><length></a>²) and to make division-by-zero detectable at parse time. This version now relaxes those restrictions. <div class="algorithm" data-algorithm="determine the type of a calculation"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="determine-the-type-of-a-calculation">determine the type of a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③⑧">calculation</a></dfn>: <ul> <li data-md> At a + or - sub-expression, attempt to <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types" id="ref-for-cssnumericvalue-add-two-types">add the types</a> of the left and right arguments. If this returns failure, the entire <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation③⑨">calculation’s</a> type is failure. Otherwise, the sub-expression’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑤">type</a> is the returned type. <li data-md> At a * sub-expression, <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types" id="ref-for-cssnumericvalue-multiply-two-types">multiply the types</a> of the left and right arguments. The sub-expression’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑥">type</a> is the returned result. <li data-md> At a / sub-expression, let <var>left type</var> be the result of finding the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑦">types</a> of its left argument, and <var>right type</var> be the result of finding the types of its right argument and then <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type" id="ref-for-cssnumericvalue-invert-a-type">inverting</a> it. The sub-expression’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type⑨">type</a> is the result of <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types" id="ref-for-cssnumericvalue-multiply-two-types①">multiplying</a> the <var>left type</var> and <var>right type</var>. <li data-md> Anything else is a terminal value, whose <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⓪">type</a> is determined based on its CSS type. (Unless otherwise specified, the type’s associated <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint" id="ref-for-cssnumericvalue-percent-hint">percent hint</a> is null.) <dl class="switch"> <dt data-md><a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④②"><number></a> <dt data-md><a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①③"><integer></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①①">type</a> is «[ ]» (empty map) <dt data-md><a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③④"><length></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①②">type</a> is «[ "length" → 1 ]» <dt data-md><a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①⑤"><angle></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①③">type</a> is «[ "angle" → 1 ]» <dt data-md><a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value⑨"><time></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①④">type</a> is «[ "time" → 1 ]» <dt data-md><a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑧"><frequency></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑤">type</a> is «[ "frequency" → 1 ]» <dt data-md><a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑦"><resolution></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑥">type</a> is «[ "resolution" → 1 ]» <dt data-md><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-grid-2/#typedef-flex" id="ref-for-typedef-flex①"><flex></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑦">type</a> is «[ "flex" → 1 ]» <dt data-md><a class="production css" data-link-type="type" href="#typedef-calc-keyword" id="ref-for-typedef-calc-keyword②"><calc-keyword></a> <dd data-md> the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑧">type</a> is as defined by the keyword <dt data-md><a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③②"><percentage></a> <dd data-md> If, in the context in which the <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑥">math function</a> containing this <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④⓪">calculation</a> is placed, <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③③"><percentage></a>s are resolved relative to another type of value (such as 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>, where <percentage> is resolved against a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③⑤"><length></a>), and that other type is not <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④③"><number></a>, the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type①⑨">type</a> is determined as the other type, but with a <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint" id="ref-for-cssnumericvalue-percent-hint①">percent hint</a> set to that other type. Otherwise, the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⓪">type</a> is «[ "percent" → 1 ]». <dt data-md>anything else <dd data-md> The <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④①">calculation’s</a> type is failure. </dl> </ul> </div> <div class="algorithm" data-algorithm="contain a percentage" data-algorithm-for="CSS"> A value <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="contain a percentage|percentage-containing" id="css-contain-a-percentage">contains a percentage</dfn> if its <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②①">type</a> is «[ "percent" → 1 ]», or its type’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint" id="ref-for-cssnumericvalue-percent-hint②">percent hint</a> is non-null. </div> <div class="algorithm" data-algorithm="consistent type" data-algorithm-for="CSS"> Two or more calculations have a <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-local-lt="consistent" id="css-consistent-type">consistent type</dfn> if <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types" id="ref-for-cssnumericvalue-add-two-types①">adding the types</a> doesn’t result in failure. The <a data-link-type="dfn" href="#css-consistent-type" id="ref-for-css-consistent-type⑨">consistent type</a> is the result of the type addition. </div> <div class="algorithm" data-algorithm="make a type consistent" data-algorithm-for="CSS"> To <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="make a type consistent|make consistent|made consistent" id="css-make-a-type-consistent">make a type <var>base</var> consistent</dfn> with another type <var>input</var>: <ol> <li data-md> If both <var>base</var> and <var>input</var> have different non-null <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint" id="ref-for-cssnumericvalue-percent-hint③">percent hints</a>, they can’t be made consistent. Return failure. <li data-md> If <var>base</var> has a null <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint" id="ref-for-cssnumericvalue-percent-hint④">percent hint</a> set <var>base</var>’s percent hint to <var>input</var>’s percent hint. <li data-md> Return <var>base</var>. </ol> </div> <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑦">Math functions</a> themselves have <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②②">types</a>, according to their contained <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④②">calculations</a>: <dl> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑤">calc()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-abs" id="ref-for-funcdef-abs③">abs()</a> <dd data-md> The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②③">type</a> of its contained <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④③">calculation</a>. <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min⑨">min()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max⑧">max()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp⑨">clamp()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot⑦">hypot()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-round" id="ref-for-funcdef-round④">round()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod⑦">mod()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem①⓪">rem()</a> <dd data-md> The result of <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types" id="ref-for-cssnumericvalue-add-two-types②">adding the types</a> of its comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④④">calculations</a>. <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin④">asin()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos④">acos()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan⑥">atan()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-atan2" id="ref-for-funcdef-atan2③">atan2()</a> <dd data-md> «[ "angle" → 1 ]». <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-sign" id="ref-for-funcdef-sign③">sign()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin⑤">sin()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos④">cos()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan⑤">tan()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow⑤">pow()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt⑤">sqrt()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-log" id="ref-for-funcdef-log④">log()</a> <dt data-md><a class="css" data-link-type="maybe" href="#funcdef-exp" id="ref-for-funcdef-exp③">exp()</a> <dd data-md> «[ ]» (empty map). </dl> For each of the above, if the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②④">type</a> is failure, the <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑧">math function</a> is invalid. A <a data-link-type="dfn" href="#math-function" id="ref-for-math-function①⑨">math function</a> resolves to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④④"><number></a>, <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③⑥"><length></a>, <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①⑥"><angle></a>, <a class="production css" data-link-type="type" href="#time-value" id="ref-for-time-value①⓪"><time></a>, <a class="production css" data-link-type="type" href="#frequency-value" id="ref-for-frequency-value⑨"><frequency></a>, <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑧"><resolution></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-grid-2/#typedef-flex" id="ref-for-typedef-flex②"><flex></a>, or <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③⑤"><percentage></a> according to which of those productions its <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⑤">type</a> <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match②">matches</a>. (These categories are mutually exclusive.) If it can’t match any of these, the math function is invalid. Note: Algebraic simplifications do not affect the validity of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②①">math function</a> or its resolved type. For example, calc(5px - 5px + 10s) and calc(0 * 5px + 10s) are both invalid due to the attempt to add a length and a time. Note: Note that <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③⑥"><percentage></a>s relative to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④⑤"><number></a>s, such as in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity</a>, are not combinable with those numbers—opacity: calc(.25 + 25%) is invalid. Allowing this causes significant problems with "unit algebra" (allowing multiplication/division of <a class="production css" data-link-type="type" href="#typedef-dimension" id="ref-for-typedef-dimension⑧"><dimension></a>s), and in every case so far, doesn’t provide any new functionality. (For example, opacity: 25% is identical to opacity: .25; it’s just a trivial syntax transform.) You can still perform other operations with them, such as opacity: calc(100% / 3);, which is valid. Note: Because <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token③"><number-token></a>s are always interpreted as <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④⑥"><number></a>s or <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①④"><integer></a>s, "unitless 0" <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③⑦"><length></a>s aren’t supported in <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②②">math functions</a>. That is, <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width①①">width: calc(0 + 5px);</a> is invalid, because it’s trying to add a <number> to a <length>, even though both width: 0; and width: 5px; are valid. Note: Although there are a few properties in which a bare <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value④⑧"><number></a> becomes a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value③⑨"><length></a> at used-value time (specifically, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height①③">line-height</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-tab-size" id="ref-for-propdef-tab-size">tab-size</a>), <number>s never become "length-like" in <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑥">calc()</a>. They always stay as <number>s. Note: In Quirks Mode <a data-link-type="biblio" href="#biblio-quirks" title="Quirks Mode Standard">[QUIRKS]</a>, some properties that would normally only accept <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value④⓪"><length></a>s are defined to also accept <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑤①"><number></a>s, interpreting them as <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①⓪">px</a> lengths. Like unitless zeroes, this has no effect on the parsing or behavior of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②③">math functions</a>, though a math function that resolves to a <number> value might become valid in Quirks Mode (and have its result interpreted as a px length). <h4 class="heading settled" data-level="10.9.1" id="calc-ieee">10.9.1. Infinities, NaN, and Signed Zero<a class="self-link" href="#calc-ieee"></a></h4> <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②⑤">Math functions</a> follow IEEE-754 semantics, which means they recognize the concepts of positive and negative zero, positive and negative infinity, and NaN (not a number). However, these concepts are only retained within a <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree">calculation tree</a>; if a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="top-level-calculation">top-level calculation</dfn> (a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②⑥">math function</a> not nested directly inside of another math function) would result in one of these special values, they’re instead "censored" into a standard representable value, as defined below. <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="signed zero|positive zero|negative zero" id="css-signed-zero">Signed zeros</dfn> (indicated here as 0⁺ or 0⁻) can not be written directly in CSS; 0, +0 and -0 all produce the standard "unsigned" zero, which is considered positive (0⁺) for the purposes of these rules. <a data-link-type="dfn" href="#css-signed-zero" id="ref-for-css-signed-zero">Signed zeroes</a> are produced in the following ways: <ul> <li data-md> Negative zero (0⁻) can be produced by a multiplication or division that produces zero with exactly one negative argument (such as -5 * 0 or 1 / -infinity). <li data-md> 0⁻ + 0⁻ or 0⁻ - 0⁺ produces 0⁻. All other additions or subtractions that would produce a zero produce 0⁺. <li data-md> Multiplying or dividing 0⁻ with a positive number (including 0⁺) produces a negative result (either 0⁻ or −∞), while multiplying or dividing 0⁻ with a negative number produces a positive result. (In other words, multiplying or dividing with 0⁻ follows standard sign rules.) <li data-md> When comparing 0⁺ and 0⁻, 0⁻ is less than 0⁺. For example, min(0⁺, 0⁻) must produce 0⁻, max(0⁺, 0⁻) must produce 0⁺, and clamp(0⁺, 0⁻, 1) must produce 0⁺. <li data-md> Certain argument combinations in <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②⑧">math functions</a> are defined to produce 0⁻ (for example, round(-1, infinity)). All other operations that produce a zero produce positive zero (0⁺). </ul> <a data-link-type="dfn" href="#css-signed-zero" id="ref-for-css-signed-zero①">Signed zeroes</a> do not escape a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation">top-level calculation</a>; they’re censored into the "unsigned" zero. <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="infinity|infinite|positive infinity|negative infinity" id="css-infinity">Infinities</dfn> (indicated here as +∞ or −∞) can be written directly using the <a href="#calc-error-constants">math constants</a> <a class="css" data-link-type="maybe" href="#valdef-calc-infinity" id="ref-for-valdef-calc-infinity②">infinity</a> and <a class="css" data-link-type="maybe" href="#valdef-calc--infinity" id="ref-for-valdef-calc--infinity①">-infinity</a>, or produced as a result of some calculations: <ul> <li data-md> Dividing a value by zero produces either +∞ or −∞, according to the standard sign rules. <li data-md> Adding or subtracting ±∞ to anything produces the appropriate infinity. <li data-md> Multiplying any value by ±∞ produces the appropriate infinity. <li data-md> Dividing any value by ±∞ produces zero. <li data-md> Certain argument combinations in <a data-link-type="dfn" href="#math-function" id="ref-for-math-function②⑨">math functions</a> are defined to produce <a data-link-type="dfn" href="#css-infinity" id="ref-for-css-infinity①">infinities</a> (for example, pow(0, -1) produces +∞). </ul> Note: The rules for producing <a data-link-type="dfn" href="#css-nan" id="ref-for-css-nan①">NaN</a>, below, supersede the above rules for producing <a data-link-type="dfn" href="#css-infinity" id="ref-for-css-infinity②">infinities</a>. <a data-link-type="dfn" href="#css-infinity" id="ref-for-css-infinity③">Infinities</a> do not escape a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation①">top-level calculation</a>; they’re clamped to the minimum or maximum value allowed in the context, as defined in <a href="#calc-range">§ 10.12 Range Checking</a>. <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-nan">NaN</dfn> (short for "not a number") is the result of certain operations that don’t have a well-defined value. It can be written directly using the <a href="#calc-error-constants">math constants</a> <a class="css" data-link-type="maybe" href="#valdef-calc-nan" id="ref-for-valdef-calc-nan②">NaN</a>, or produced as a result of some calculations: <ul> <li data-md> Dividing zero by zero, dividing ±∞ by ±∞, multiplying 0 by ±∞, adding +∞ to −∞, or subtracting two infinities of the same sign produces NaN. These rules override any other result, if there’s a conflict. For example, 0 / 0 is NaN, not +∞. <li data-md> Certain argument combinations in <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⓪">math functions</a> are defined to produce <a data-link-type="dfn" href="#css-nan" id="ref-for-css-nan②">NaN</a> (for example, asin(2) produces NaN). <li data-md> Any operation with at least one NaN argument produces NaN. </ul> <a data-link-type="dfn" href="#css-nan" id="ref-for-css-nan③">NaN</a> does not escape a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation②">top-level calculation</a>; it’s censored into a zero value <div class="example" id="example-07a5380d"> <a class="self-link" href="#example-07a5380d"></a> For example, calc(-5 * 0) produces an unsigned zero—the calculation resolves to 0⁻, but as it’s a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation③">top-level calculation</a>, it’s then censored to an unsigned zero. On the other hand, calc(1 / calc(-5 * 0)) produces −∞, same as calc(1 / (-5 * 0))—the inner calc resolves to 0⁻, and as it’s not a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation④">top-level calculation</a>, it passes it up unchanged to the outer calc to produce −∞. If it was censored into an unsigned zero, it would instead produce +∞. </div> <h3 class="heading settled" data-level="10.10" id="calc-internal">10.10. Internal Representation<a class="self-link" href="#calc-internal"></a></h3> The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation" id="ref-for-css-internal-representation">internal representation</a> of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③①">math function</a> is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="calculation-tree">calculation tree</dfn>: a tree where the branch nodes are <dfn class="dfn-paneled" data-dfn-for="calculation tree" data-dfn-type="dfn" data-export id="calculation-tree-operator-nodes">operator nodes</dfn> corresponding either to math functions (such as Min, Cos, Sqrt, etc) or to operators in a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④⑤">calculation</a> (Sum, Product, Negate, and Invert, the <dfn class="dfn-paneled" data-dfn-for="calculation tree" data-dfn-type="dfn" data-noexport id="calculation-tree-calc-operator-nodes">calc-operator nodes</dfn>), and the leaf nodes are either numeric values (such as numbers, dimensions, and percentages) or non-math functions that resolve to a numeric type. <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③④">Math functions</a> are turned into <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree①">calculation trees</a> depending on the function: <dl class="switch"> <dt data-md>calc() <dd data-md> The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation" id="ref-for-css-internal-representation①">internal representation</a> of a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑦">calc()</a> function is the result of <a data-link-type="dfn" href="#parse-a-calculation" id="ref-for-parse-a-calculation">parsing a calculation</a> from its argument. <dt data-md>any other <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑤">math function</a> <dd data-md> The <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation" id="ref-for-css-internal-representation②">internal representation</a> is an <a data-link-type="dfn" href="#calculation-tree-operator-nodes" id="ref-for-calculation-tree-operator-nodes">operator node</a> with the same name as the function, whose children are the result of <a data-link-type="dfn" href="#parse-a-calculation" id="ref-for-parse-a-calculation①">parsing a calculation</a> from each of the function’s arguments, in the order they appear. </dl> <div class="algorithm" data-algorithm="parse a calculation"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="parse a calculation|parsing a calculation" id="parse-a-calculation">parse a calculation</dfn>, given a <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④⑥">calculation</a> <var>values</var> represented as a list of <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#component-value" id="ref-for-component-value②">component values</a>, and returning a <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree②">calculation tree</a>: <ol> <li data-md> Discard any <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-whitespace-token" id="ref-for-typedef-whitespace-token"><whitespace-token></a>s from <var>values</var>. <li data-md> An item in <var>values</var> is an “operator” if it’s a <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> with the value "+", "-", "*", or "/". Otherwise, it’s a “value”. <li data-md> Collect children into Product and Invert nodes. For every consecutive run of value items in <var>values</var> separated by "*" or "/" operators: <ol> <li data-md> For each "/" operator in the run, replace its right-hand value item <var>rhs</var> with an Invert node containing <var>rhs</var> as its child. <li data-md> Replace the entire run with a Product node containing the value items of the run as its children. </ol> <li data-md> Collect children into Sum and Negate nodes. <ol> <li data-md> For each "-" operator item in <var>values</var>, replace its right-hand value item <var>rhs</var> with a Negate node containing <var>rhs</var> as its child. <li data-md> If <var>values</var> has only one item, and it is a Product node or a parenthesized <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#simple-block" id="ref-for-simple-block">simple block</a>, replace <var>values</var> with that item. Otherwise, replace <var>values</var> with a Sum node containing the value items of <var>values</var> as its children. </ol> <li data-md> At this point <var>values</var> is a tree of Sum, Product, Negate, and Invert nodes, with other types of values at the leaf nodes. Process the leaf nodes. For every leaf node <var>leaf</var> in <var>values</var>: <ol> <li data-md> If <var>leaf</var> is a parenthesized <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#simple-block" id="ref-for-simple-block①">simple block</a>, replace <var>leaf</var> with the result of <a data-link-type="dfn" href="#parse-a-calculation" id="ref-for-parse-a-calculation②">parsing a calculation</a> from <var>leaf</var>’s contents. <li data-md> If <var>leaf</var> is a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑥">math function</a>, replace <var>leaf</var> with the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation" id="ref-for-css-internal-representation③">internal representation</a> of that math function. </ol> <li data-md> Return the result of <a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree">simplifying a calculation tree</a> from <var>values</var>. </ol> </div> <h4 class="heading settled" data-level="10.10.1" id="calc-simplification">10.10.1. Simplification<a class="self-link" href="#calc-simplification"></a></h4> <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation" id="ref-for-css-internal-representation④">Internal representations</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑦">math functions</a> are eagerly simplified to the extent possible, using standard algebraic simplifications (distributing multiplication over sums, combining similar units, etc.). When used in non-property contexts (such as in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-5/#at-font-face-rule" id="ref-for-at-font-face-rule">@font-face</a> descriptors, for example), <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑧">math functions</a> are simplified as if they were <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value④">specified values</a>. <div class="algorithm" data-algorithm="simplify a calculation tree"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="simplify" data-lt="simplify a calculation tree|simplifying a calculation tree" id="simplify-a-calculation-tree">simplify a calculation tree</dfn> <var>root</var>: <ol> <li data-md> If <var>root</var> is a numeric value: <ol> <li data-md> If <var>root</var> is a percentage that will be resolved against another value, and there is enough information available to resolve it, do so, and express the resulting numeric value in the appropriate <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit⑨">canonical unit</a>. Return the value. <li data-md> If <var>root</var> is a dimension that is not expressed in its <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①⓪">canonical unit</a>, and there is enough information available to convert it to the canonical unit, do so, and return the value. <li data-md> If <var>root</var> is a <a class="production css" data-link-type="type" href="#typedef-calc-keyword" id="ref-for-typedef-calc-keyword③"><calc-keyword></a> that can be resolved, return what it resolves to, <a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree①">simplified</a>. <li data-md> Otherwise, return <var>root</var>. </ol> <li data-md> If <var>root</var> is any other leaf node (not an operator node): <ol> <li data-md> If there is enough information available to determine its numeric value, return its value, expressed in the value’s <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①②">canonical unit</a>. <li data-md> Otherwise, return <var>root</var>. </ol> <li data-md> At this point, <var>root</var> is an <a data-link-type="dfn" href="#calculation-tree-operator-nodes" id="ref-for-calculation-tree-operator-nodes①">operator node</a>. <a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree②">Simplify</a> all the <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④⑦">calculation</a> children of <var>root</var>. <li data-md> If <var>root</var> is an <a data-link-type="dfn" href="#calculation-tree-operator-nodes" id="ref-for-calculation-tree-operator-nodes②">operator node</a> that’s not one of the <a data-link-type="dfn" href="#calculation-tree-calc-operator-nodes" id="ref-for-calculation-tree-calc-operator-nodes">calc-operator nodes</a>, and all of its <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④⑧">calculation</a> children are numeric values with enough information to compute the operation <var>root</var> represents, return the result of running <var>root</var>’s operation using its children, expressed in the result’s <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①③">canonical unit</a>. <div class="note" role="note"> If a percentage is left at this point, it will usually block simplification of the node, since it needs to be resolved against another value using information not currently available. (Otherwise, it would have been converted to a different value in an earlier step.) This includes operations such as "min", since percentages might resolve against a negative basis, and thus end up with an opposite comparative relationship than the raw percentage value would seem to indicate. However, "raw" percentages—ones which do not resolve against another value, such as in <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity⑤">opacity</a>—might not block simplification. </div> <li data-md> If <var>root</var> is a Min or Max node, attempt to partially simplify it: <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> node <var>child</var> of <var>root</var>’s children: If <var>child</var> is a numeric value with enough information to compare magnitudes with another child of the same unit (see note in previous step), and there are other children of <var>root</var> that are numeric values with the same unit, combine all such children with the appropriate operator per <var>root</var>, and replace <var>child</var> with the result, removing all other child nodes involved. <li data-md> If <var>root</var> has only one child, return the child. Otherwise, return <var>root</var>. </ol> <li data-md> If <var>root</var> is a Negate node: <ol> <li data-md> If <var>root</var>’s child is a numeric value, return an equivalent numeric value, but with the value negated (0 - value). <li data-md> If <var>root</var>’s child is a Negate node, return the child’s child. <li data-md> Return <var>root</var>. </ol> <li data-md> If <var>root</var> is an Invert node: <ol> <li data-md> If <var>root</var>’s child is a number (not a percentage or dimension) return the reciprocal of the child’s value. <li data-md> If <var>root</var>’s child is an Invert node, return the child’s child. <li data-md> Return <var>root</var>. </ol> <li data-md> If <var>root</var> is a Sum node: <ol> <li data-md> For each of <var>root</var>’s children that are Sum nodes, replace them with their children. <li data-md> For each set of <var>root</var>’s children that are numeric values with identical units, remove those children and replace them with a single numeric value containing the sum of the removed nodes, and with the same unit. (E.g. combine numbers, combine percentages, combine px values, etc.) <li data-md> If <var>root</var> has only a single child at this point, return the child. Otherwise, return <var>root</var>. </ol> Note: Zero-valued terms cannot be simply removed from a Sum; they can only be combined with other values that have identical units. (This is because the mere presence of a unit, even with a zero value, can sometimes imply a change in behavior.) <li data-md> If <var>root</var> is a Product node: <ol> <li data-md> For each of <var>root</var>’s children that are Product nodes, replace them with their children. <li data-md> If <var>root</var> has multiple children that are numbers (not percentages or dimensions), remove them and replace them with a single number containing the product of the removed nodes. <li data-md> If <var>root</var> contains only two children, one of which is a number (not a percentage or dimension) and the other of which is a Sum whose children are all numeric values, multiply all of the Sum’s children by the number, then return the Sum. <li data-md> If <var>root</var> contains only numeric values and/or Invert nodes containing numeric values, and <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types" id="ref-for-cssnumericvalue-multiply-two-types②">multiplying the types</a> of all the children (noting that the type of an Invert node is the <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type" id="ref-for-cssnumericvalue-invert-a-type①">inverse</a> of its child’s type) results in a type that <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match" id="ref-for-cssnumericvalue-match④">matches</a> any of the types that a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function③⑨">math function</a> can resolve to, return the result of multiplying all the values of the children (noting that the value of an Invert node is the reciprocal of its child’s value), expressed in the result’s <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①④">canonical unit</a>. <li data-md> Return <var>root</var>. </ol> </ol> </div> <h3 class="heading settled" data-level="10.11" id="calc-computed-value">10.11. Computed Value<a class="self-link" href="#calc-computed-value"></a></h3> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①⑤">computed value</a> of a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⓪">math function</a> is its <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree③">calculation tree</a> <a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree③">simplified</a>, using all the information available at computed value time. (Such as the <a class="css" data-link-type="maybe" href="#em" id="ref-for-em④">em</a> to <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①②">px</a> ratio, how to resolve percentages in some properties, etc.) Where percentages are not resolved at computed-value time, they are not resolved in <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④①">math functions</a>, e.g. calc(100% - 100% + 1px) resolves to calc(0% + 1px), not to 1px. If there are special rules for computing percentages in a value (e.g. <a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property">the height property</a>), they apply whenever a math function contains percentages. The <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree④">calculation tree</a> is again simplified at <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value④">used value</a> time; with used value time information, a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④③">math function</a> always simplifies down to a single numeric value. <div class="example" id="example-023dad93"> <a class="self-link" href="#example-023dad93"></a> For example, whereas <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size⑥">font-size</a> computes percentage values at <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①⑦">computed value</a> time so that <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length⑤">font-relative length</a> units can be computed, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position③">background-position</a> has layout-dependent behavior for percentage values, and thus does not resolve percentages until used-value time. Due to this, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position④">background-position</a> computation preserves the percentage in a <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑧">calc()</a> whereas <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size⑦">font-size</a> will compute such expressions directly into a length. </div> Given the complexities of width and height calculations on table cells and table elements, math expressions mixing both percentages and non-zero lengths for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables MUST be treated as if <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> had been specified. <h3 class="heading settled" data-level="10.12" id="calc-range">10.12. Range Checking<a class="self-link" href="#calc-range"></a></h3> Parse-time range-checking of values is not performed within <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④④">math functions</a>, and therefore out-of-range values do not cause the declaration to become invalid. However, the value resulting from a <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation⑤">top-level calculation</a> must be clamped to the range allowed in the target context. Clamping is performed on <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①⑧">computed values</a> to the extent possible, and also on <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value⑥">used values</a> if computation was unable to sufficiently simplify the expression to allow range-checking. (Clamping is not performed on <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value⑤">specified values</a>.) Note: This requires all contexts accepting <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc①⑨">calc()</a> to define their allowable values as a closed (not open) interval. Note: By definition, ±∞ are outside the allowed range for any property, and will clamp to the minimum/maximum value allowed. Even properties that can explicitly represent infinity as a keyword value, such as <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-animations-1/#propdef-animation-iteration-count" id="ref-for-propdef-animation-iteration-count">animation-iteration-count</a>, will end up clamping ±∞, as <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⑤">math functions</a> can’t resolve to keyword values; the numeric part of the property’s syntax still has a minimum/maximum value. Additionally, if a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⑥">math function</a> that resolves to <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑤③"><number></a> is used somewhere that only accepts <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①⑤"><integer></a>, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value①⑨">computed value</a> and <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value⑦">used value</a> are <a data-link-type="dfn" href="#css-round-to-the-nearest-integer" id="ref-for-css-round-to-the-nearest-integer③">rounded to the nearest integer</a>, in the same manner as clamping, above. <div class="example" id="example-ec14dee2"> <a class="self-link" href="#example-ec14dee2"></a> Since widths smaller than 0px are not allowed, these three declarations are equivalent: <pre class="highlight"><c- k>width</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>5</c-><c- k>px</c-> - <c- m>10</c-><c- k>px</c-><c- p>);</c-> <c- k>width</c-><c- p>:</c-> <c- nf>calc</c-><c- p>(</c-><c- m>-5</c-><c- k>px</c-><c- p>);</c-> <c- k>width</c-><c- p>:</c-> <c- m>0</c-><c- k>px</c-><c- p>;</c-> </pre> Note however that <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width①④">width: -5px</a> is not equivalent to width: calc(-5px)! Out-of-range values outside <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②⓪">calc()</a> are syntactically invalid, and cause the entire declaration to be dropped. </div> <h3 class="heading settled" data-level="10.13" id="calc-serialize">10.13. Serialization<a class="self-link" href="#calc-serialize"></a></h3> <a class="self-link" href="#issue-f5bc4b00"></a> This section is still <a href="https://lists.w3.org/Archives/Member/w3c-css-wg/2016AprJun/0239.html">under discussion</a>. <div class="algorithm" data-algorithm="serialize a math function"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="serialize-a-math-function">serialize a math function</dfn> <var>fn</var>: <ol> <li data-md> If the root of the <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree⑤">calculation tree</a> <var>fn</var> represents is a numeric value (number, percentage, or dimension), and the serialization being produced is of a <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value②⓪">computed value</a> or later, then clamp the value to the range allowed for its context (if necessary), then serialize the value as normal and return the result. <li data-md> If <var>fn</var> represents an infinite or NaN value: <ol> <li data-md> Let <var>s</var> be the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string①">string</a> "calc(". <li data-md> Serialize the keyword <a class="css" data-link-type="maybe" href="#valdef-calc-infinity" id="ref-for-valdef-calc-infinity③">infinity</a>, <a class="css" data-link-type="maybe" href="#valdef-calc--infinity" id="ref-for-valdef-calc--infinity②">-infinity</a>, or <a class="css" data-link-type="maybe" href="#valdef-calc-nan" id="ref-for-valdef-calc-nan③">NaN</a>, as appropriate to represent the value, and append it to <var>s</var>. <li data-md> If <var>fn</var>’s <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⑥">type</a> is anything other than «[ ]» (empty, representing a <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑤④"><number></a>), append " * " to <var>s</var>. Create a numeric value in the <a data-link-type="dfn" href="#canonical-unit" id="ref-for-canonical-unit①⑤">canonical unit</a> for <var>fn</var>’s type (such as <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①③">px</a> for <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value④①"><length></a>), with a value of 1. Serialize this numeric value and append it to <var>s</var>. <li data-md> Return <var>s</var>. </ol> <li data-md> If the <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree⑥">calculation tree’s</a> root node is a numeric value, or a <a data-link-type="dfn" href="#calculation-tree-calc-operator-nodes" id="ref-for-calculation-tree-calc-operator-nodes①">calc-operator node</a>, let <var>s</var> be a string initially containing "calc(". Otherwise, let <var>s</var> be a string initially containing the name of the root node, lowercased (such as "sin" or "max"), followed by a "(" (open parenthesis). <li data-md> For each child of the root node, <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree">serialize the calculation tree</a>. If a result of this serialization starts with a "(" (open parenthesis) and ends with a ")" (close parenthesis), remove those characters from the result. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string-concatenate" id="ref-for-string-concatenate">Concatenate</a> all of the results using ", " (comma followed by space), then append the result to <var>s</var>. <li data-md> Append ")" (close parenthesis) to <var>s</var>. <li data-md> Return <var>s</var>. </ol> </div> <div class="algorithm" data-algorithm="serialize a calculation tree"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="serialize a calculation tree|serialize the calculation tree|serializing a calculation tree|serializing the calculation tree" id="serialize-a-calculation-tree">serialize a calculation tree</dfn>: <ol> <li data-md> Let <var>root</var> be the root node of the <a data-link-type="dfn" href="#calculation-tree" id="ref-for-calculation-tree⑦">calculation tree</a>. <li data-md> If <var>root</var> is a numeric value, or a non-<a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⑦">math function</a>, serialize <var>root</var> per the normal rules for it and return the result. <li data-md> If <var>root</var> is anything but a Sum, Negate, Product, or Invert node, <a data-link-type="dfn" href="#serialize-a-math-function" id="ref-for-serialize-a-math-function">serialize a math function</a> for the function corresponding to the node type, treating the node’s children as the function’s comma-separated <a data-link-type="dfn" href="#calc-calculation" id="ref-for-calc-calculation④⑨">calculation</a> arguments, and return the result. <li data-md> If <var>root</var> is a Negate node, let <var>s</var> be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string②">string</a> initially containing "(-1 * ". <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree①">Serialize</a> <var>root</var>’s child, and append it to <var>s</var>. Append ")" to <var>s</var>, then return it. <li data-md> If <var>root</var> is an Invert node, let <var>s</var> be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string③">string</a> initially containing "(1 / ". <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree②">Serialize</a> <var>root</var>’s child, and append it to <var>s</var>. Append ")" to <var>s</var>, then return it. <li data-md> If <var>root</var> is a Sum node, let <var>s</var> be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string④">string</a> initially containing "(". <a data-link-type="dfn" href="#sort-a-calculations-children" id="ref-for-sort-a-calculations-children">Sort root’s children</a>. <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree③">Serialize</a> <var>root</var>’s first child, and append it to <var>s</var>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate①">For each</a> <var>child</var> of <var>root</var> beyond the first: <ol> <li data-md> If <var>child</var> is a Negate node, append " - " to <var>s</var>, then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree④">serialize</a> the Negate’s child and append the result to <var>s</var>. <li data-md> If <var>child</var> is a negative numeric value, append " - " to <var>s</var>, then serialize the negation of <var>child</var> as normal and append the result to <var>s</var>. <li data-md> Otherwise, append " + " to <var>s</var>, then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑤">serialize</a> <var>child</var> and append the result to <var>s</var>. </ol> Finally, append ")" to <var>s</var> and return it. <li data-md> If <var>root</var> is a Product node, let <var>s</var> be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string" id="ref-for-string⑤">string</a> initially containing "(". <a data-link-type="dfn" href="#sort-a-calculations-children" id="ref-for-sort-a-calculations-children①">Sort root’s children</a>. <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑥">Serialize</a> <var>root</var>’s first child, and append it to <var>s</var>. <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate②">For each</a> <var>child</var> of <var>root</var> beyond the first: <ol> <li data-md> If <var>child</var> is an Invert node, append " / " to <var>s</var>, then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑦">serialize</a> the Invert’s child and append the result to <var>s</var>. <li data-md> Otherwise, append " * " to <var>s</var>, then <a data-link-type="dfn" href="#serialize-a-calculation-tree" id="ref-for-serialize-a-calculation-tree⑧">serialize</a> <var>child</var> and append the result to <var>s</var>. </ol> Finally, append ")" to <var>s</var> and return it. </ol> </div> <div class="algorithm" data-algorithm="sort a calculation’s children"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sort-a-calculations-children">sort a calculation’s children</dfn> <var>nodes</var>: <ol> <li data-md> Let <var>ret</var> be an empty list. <li data-md> If <var>nodes</var> contains a number, remove it from <var>nodes</var> and append it to <var>ret</var>. <li data-md> If <var>nodes</var> contains a percentage, remove it from <var>nodes</var> and append it to <var>ret</var>. <li data-md> If <var>nodes</var> contains any dimensions, remove them from <var>nodes</var>, sort them by their units, ordered <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="ref-for-ascii-case-insensitive⑦">ASCII case-insensitively</a>, and append them to <var>ret</var>. <li data-md> If <var>nodes</var> still contains any items, append them to <var>ret</var> in the same order. <li data-md> Return <var>ret</var>. </ol> </div> <div class="example" id="example-c3db2475"> <a class="self-link" href="#example-c3db2475"></a> For example, calc(20px + 30px) would serialize as calc(50px) as a specified value, or as 50px as a computed value. A value like calc(20px + 0%) would serialize as calc(0% + 20px), maintaining both terms in the serialized value. (It’s important to maintain zero-valued terms, so the <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②①">calc()</a> doesn’t suddenly "change shape" in the middle of a transition when one of the values happens to have a zero value temporarily. This also removes the need to "pick a unit" when all the terms are zero.) A value like calc(20px + 2em) would serialize as calc(2em + 20px) as a specified value (maintaining both units as they’re incompatible at specified-value time, but sorting them alphabetically), or as something like 52px as a computed value (<a class="css" data-link-type="maybe" href="#em" id="ref-for-em⑤">em</a> values are converted to absolute lengths at computed-value time, so assuming 1em = 16px, they combine into 52px, which then drops the <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②②">calc()</a> wrapper.) </div> When used in non-property contexts (such as in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-5/#at-font-face-rule" id="ref-for-at-font-face-rule①">@font-face</a> descriptors, for example), <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⑧">math functions</a> are simplified as if they were <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value⑥">specified values</a>. See <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> for further information on serialization. <h3 class="heading settled" data-level="10.14" id="combine-math">10.14. Combination of Math Functions<a class="self-link" href="#combine-math"></a></h3> <a data-link-type="dfn" href="#interpolation" id="ref-for-interpolation①④">Interpolation</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function④⑨">math functions</a>, with each other or with numeric values and other numeric-valued functions, is defined as Vresult = calc((1 - p) * VA + p * VB). (<a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree④">Simplification</a> of the value might then reduce the expression to a smaller, simpler form.) <a data-link-type="dfn" href="#addition" id="ref-for-addition①⑤">Addition</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑤⓪">math functions</a>, with each other or with numeric values and other numeric-valued functions, is defined as Vresult = calc(VA + VB). (<a data-link-type="dfn" href="#simplify-a-calculation-tree" id="ref-for-simplify-a-calculation-tree⑤">Simplification</a> of the value might then reduce the expression to a smaller, simpler form.) <h2 class="heading settled" id="linked-properties"> Appendix A: Coordinating List-Valued Properties<a class="self-link" href="#linked-properties"></a></h2> Some list-valued properties have coordinated effects: each item in their value list applies to a distinct effect, and corresponding entries in each property’s list all refer to the same effect. Often the coordinating values can also be specified together as a single entry in a list-valued <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#shorthand-property" id="ref-for-shorthand-property">shorthand property</a>. A typical example is the list-valued <a class="property css" data-link-type="property">background-*</a> properties, which can specify <a href="https://www.w3.org/TR/css-backgrounds-3/#layering">multiple background image layers</a>. For each property controlling how the image is sized, tiled, placed, etc., the <var>N</var>th item in its list describes some effect that applies to the <var>N</var>th background image. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="coordinating list property | coordinating list property group" id="coordinating-list-property">coordinating list property group</dfn> creates a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="coordinated-value-list">coordinated value list</dfn>, which has, for each entry, a value from each property in the group; these are used together to define a single effect, such as a background image layer or an animation. The <a data-link-type="dfn" href="#coordinated-value-list" id="ref-for-coordinated-value-list">coordinated value list</a> is assembled as follows: <ul> <li data-md> The length of the <a data-link-type="dfn" href="#coordinated-value-list" id="ref-for-coordinated-value-list①">coordinated value list</a> is determined by the number of items specified in one particular <a data-link-type="dfn" href="#coordinating-list-property" id="ref-for-coordinating-list-property①">coordinating list property</a>, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="coordinating-list-base-property">coordinating list base property</dfn>. (In the case of backgrounds, this is the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a> property.) <li data-md> The <var>N</var>th value of the <a data-link-type="dfn" href="#coordinated-value-list" id="ref-for-coordinated-value-list②">coordinated value list</a> is constructed by collecting the <var>N</var>th <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value⑧">use value</a> of each <a data-link-type="dfn" href="#coordinating-list-property" id="ref-for-coordinating-list-property②">coordinating list property</a> <li data-md> If a <a data-link-type="dfn" href="#coordinating-list-property" id="ref-for-coordinating-list-property③">coordinating list property</a> has too many values specified, excess values at the end of its list are not <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value⑨">used</a>. <li data-md> If a <a data-link-type="dfn" href="#coordinating-list-property" id="ref-for-coordinating-list-property④">coordinating list property</a> has too few values specified, its value list is repeated to add more <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value①⓪">used values</a>. <li data-md> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value②①">computed values</a> of the <a data-link-type="dfn" href="#coordinating-list-property" id="ref-for-coordinating-list-property⑤">coordinating list properties</a> are not affected by such truncation or repetition. </ul> <h2 class="heading settled" id="iana"> Appendix B: IANA Considerations<a class="self-link" href="#iana"></a></h2> <h3 class="heading settled" id="about-invalid"> Registration for the <code class="highlight"><c- k>about</c-><c- p>:</c->invalid</code> URL scheme<a class="self-link" href="#about-invalid"></a></h3> This sections defines and registers the <code class="highlight"><c- k>about</c-><c- p>:</c->invalid</code> URL, in accordance with the registration procedure defined in <a data-link-type="biblio" href="#biblio-rfc6694" title="The "about" URI Scheme">[RFC6694]</a>. The official record of this registration can be found at <a href="http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml">http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml</a>. <table class="data longlastcol"> <tbody> <tr> <th>Registered Token <td><code class="highlight">invalid</code> <tr> <th>Intended Usage <td> The <code class="highlight"><c- k>about</c-><c- p>:</c->invalid</code> URL references a non-existent document with a generic error condition. It can be used when a URL is necessary, but the default value shouldn’t be resolvable as any type of document. <tr> <th>Contact/Change controller <td>CSS WG <<a href="mailto:www-style@w3.org">www-style@w3.org</a>> (on behalf of W3C) <tr> <th>Specification <td><a href="https://www.w3.org/TR/css3-values/">CSS Values and Units Module Level 3</a> </table> <h2 class="heading settled" id="deprecated-quirky-length"> Appendix C: Quirky Lengths<a class="self-link" href="#deprecated-quirky-length"></a></h2> When CSS is being parsed in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks">quirks mode</a>, <dfn class="dfn-paneled css" data-dfn-type="type" data-export id="typedef-quirky-length"><a class="production css" data-link-type="type" href="#typedef-quirky-length" id="ref-for-typedef-quirky-length"><quirky-length></a></dfn> is a type of <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value④②"><length></a> that is only valid in certain properties: <ul> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position⑤">background-position</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing" id="ref-for-propdef-border-spacing">border-spacing</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width⑤">border-width</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-masking-1/#propdef-clip" id="ref-for-propdef-clip">clip</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size⑧">font-size</a> <li data-md> <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> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-max-height" id="ref-for-propdef-max-height">max-height</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-max-width" id="ref-for-propdef-max-width">max-width</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-min-height" id="ref-for-propdef-min-height">min-height</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-sizing-3/#propdef-min-width" id="ref-for-propdef-min-width①">min-width</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-padding-top" id="ref-for-propdef-padding-top①">padding-top</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-box-4/#propdef-padding" id="ref-for-propdef-padding">padding</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-inline-3/#propdef-vertical-align" id="ref-for-propdef-vertical-align">vertical-align</a> <li data-md> <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> <li data-md> <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-word-spacing" id="ref-for-propdef-word-spacing">word-spacing</a> </ul> It is not valid in properties that include or reference these properties, such as the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background①">background</a> shorthand, or inside <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation⑦">functional notations</a> such as <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②③">calc()</a>, except that they must be allowed in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-rect" id="ref-for-funcdef-basic-shape-rect">rect()</a> in the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-masking-1/#propdef-clip" id="ref-for-propdef-clip①">clip</a> property. Additionally, while <a class="production css" data-link-type="type" href="#typedef-quirky-length" id="ref-for-typedef-quirky-length①"><quirky-length></a> must be valid as a <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value④③"><length></a> when parsing the affected properties in 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, it is not valid for those properties when used in the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/css-conditional-3/#dom-css-supports-conditiontext" id="ref-for-dom-css-supports-conditiontext">CSS.supports()</a></code> method. A <a class="production css" data-link-type="type" href="#typedef-quirky-length" id="ref-for-typedef-quirky-length②"><quirky-length></a> is syntactically identical to a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-number-token" id="ref-for-typedef-number-token④"><number-token></a>, and is interpreted as a <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①④">px</a> length with the same value. (In other words, Quirks Mode allows all <a class="css" data-link-type="maybe" href="#px" id="ref-for-px①⑤">px</a> lengths in the affected properties to be written without a unit, similar to unitless zero lengths.) <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-3/#acknowledgments">previous level</a> of this module. Secondly, we would like to acknowledge Anthony Frehner, Emilio Cobos Álvarez, Koji Ishii, Noam Rosenthal, and Xidorn Quan for their comments and suggestions, which have improved Level 4. <h2 class="no-num heading settled" id="changes"> Changes<a class="self-link" href="#changes"></a></h2> <h3 class="no-num heading settled" id="changes-recent"> Recent Changes<a class="self-link" href="#changes-recent"></a></h3> (This is a subset of <a href="#additions-L3">Additions Since Level 3</a>.) Substantial changes since <a href="https://www.w3.org/TR/2023/WD-css-values-4-20231218/">18 December 2023 WD</a>: <ul> <li data-md> Added the <a class="css" data-link-type="maybe" href="#valdef-clamp-none" id="ref-for-valdef-clamp-none">none</a> values to <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp①⓪">clamp()</a>, (<a href="https://github.com/w3c/csswg-drafts/issues/9713">Issue 9713</a>) <li data-md> Generally fixed how type inference handles percentages. (<a href="https://github.com/w3c/csswg-drafts/issues/10017">Issue 10017</a>) <li data-md> Restored dependency of <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths⑥">viewport-percentage lengths</a> on <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow④">overflow: scroll</a> and added one on <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-3/#propdef-scrollbar-gutter" id="ref-for-propdef-scrollbar-gutter①">scrollbar-gutter</a> to make it possible for 100 of these units to actually match the <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block④">initial containing block</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/6026">Issue 6026</a>) <li data-md> Allow B to be omitted in <a class="css" data-link-type="maybe" href="#funcdef-round" id="ref-for-funcdef-round⑤">round()</a> if the A’s type is <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑤⑤"><number></a>. (<a href="https://github.com/w3c/csswg-drafts/issues/9668">Issue 9668</a>) </ul> Substantial changes since <a href="https://www.w3.org/TR/2023/WD-css-values-4-20231027/">27 October 2023 WD</a>: <ul> <li data-md> Pinned the <a data-link-type="dfn" href="#default-viewport-percentage-units" id="ref-for-default-viewport-percentage-units">default viewport-percentage units</a> to the <a data-link-type="dfn" href="#large-viewport-percentage-units" id="ref-for-large-viewport-percentage-units③">large viewport-percentage units</a>—despite violation of the “avoid dataloss by default principle”—given existing interoperability and presumed Web-compat restriction. (<a href="https://github.com/w3c/csswg-drafts/issues/6454">Issue 6452</a>) <li data-md> Added an explicit definition for the <a data-link-type="dfn" href="#css-grammar-production-block" id="ref-for-css-grammar-production-block">CSS grammar production block</a> convention. (<a href="https://github.com/w3c/csswg-drafts/issues/2921">Issue 2921</a>) <li data-md> Clarified character encoding of percent-encoded URLs. (<a href="https://github.com/w3c/csswg-drafts/issues/9301">Issue 9301</a>) </ul> Substantial changes since <a href="https://www.w3.org/TR/2023/WD-css-values-4-20230406/">6 April 2023 WD</a>: <ul> <li data-md> Punted <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-mix" id="ref-for-funcdef-mix">mix()</a> to <a data-link-type="biblio" href="#biblio-css-values-5" title="CSS Values and Units Module Level 5">[css-values-5]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/9343">Issue 9343</a>) <li data-md> Color type defined to be non-additive. (<a href="https://github.com/w3c/csswg-drafts/issues/8576">Issue 8576</a>) <li data-md> Non-property contexts treat <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑤①">math functions</a> as specified values. (<a href="https://github.com/w3c/csswg-drafts/issues/7964">Issue 7964</a>) <li data-md> Specified that URLs from CSS are always transmitted as UTF-8. (<a href="https://github.com/w3c/csswg-drafts/issues/9301">Issue 9301</a>) <li data-md> Fixed <a data-link-type="dfn" href="#addition" id="ref-for-addition①⑥">addition</a>/<a data-link-type="dfn" href="#accumulation" id="ref-for-accumulation⑤">accumulation</a> to use the *second* value, when the two values aren’t additive/accumulative. (<a href="https://github.com/w3c/csswg-drafts/issues/9070">Issue 9070</a>) <li data-md> Specified that <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length⑥">font-relative lengths</a> are always resolved against the parent element when used in a <a class="property css" data-link-type="property">font-*</a> property. (<a href="https://github.com/w3c/csswg-drafts/issues/8169">Issue 8169</a>) <li data-md> Simplify away single-argument <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min①⓪">min()</a> and <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max⑨">max()</a> functions. (<a href="https://github.com/w3c/csswg-drafts/issues/9559">Issue 9559</a>) </ul> Substantial changes since <a href="https://www.w3.org/TR/2022/WD-css-values-4-20221019/">19 October 2022 WD</a>: <ul> <li>Added <a href="#component-functions">§ 2.6 Functional Notation Definitions</a> to formally define the way that <a data-link-type="dfn" href="#functional-notation" id="ref-for-functional-notation⑧">functional notation</a> syntaxes are defined. (<a href="https://github.com/w3c/csswg-drafts/issues/2921">Issue 2921</a>) <li>Added algorithm for <a data-link-type="dfn" href="#snap-a-length-as-a-border-width" id="ref-for-snap-a-length-as-a-border-width">snap as a border width</a>, to reflect the interoperable rules for rendering consistent stroke widths. (<a href="https://github.com/w3c/csswg-drafts/issues/5210">Issue 5210</a>) <li>Clarified grammar and <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#computed-value" id="ref-for-computed-value②②">computed value</a> of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-mix" id="ref-for-funcdef-mix①">mix()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/8096">Issue 8096</a>) <li>Undefined the behavior of <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan⑥">tan()</a> at the asymptote values. (<a href="https://github.com/w3c/csswg-drafts/issues/8527">Issue 8527</a>) <li>Specified that negative <a class="production css" data-link-type="type" href="#resolution-value" id="ref-for-resolution-value⑨"><resolution></a> values are out-of-range by definition. (<a href="https://github.com/w3c/csswg-drafts/issues/8532">Issue 8532</a>) <li>Clarified that fully omitted <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-mix" id="ref-for-funcdef-mix②">mix()</a> arguments are valid. (<a href="https://github.com/w3c/csswg-drafts/issues/8556">Issue 8556</a>) <li>Clarified that range clamping happens specifically to <a data-link-type="dfn" href="#top-level-calculation" id="ref-for-top-level-calculation⑥">top-level calculations</a> (rather than the unclear term "expressions"). (<a href="https://github.com/w3c/csswg-drafts/issues/8158">Issue 8158</a>) <li>Added formal definitions for <a class="production css" data-link-type="function" href="#funcdef-url" id="ref-for-funcdef-url①②"><url()></a> and <a class="production css" data-link-type="function" href="#funcdef-src" id="ref-for-funcdef-src②"><src()></a> (in addition to <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①④"><url></a>). <li>Rephrased fragment-only URLs in terms of tree-scoped references. (<a href="https://github.com/w3c/csswg-drafts/issues/3320">Issue 3320</a>) </ul> Substantial changes since <a href="https://www.w3.org/TR/2021/WD-css-values-4-20211216/">16 December 2021 WD</a>: <ul> <li>Changed resolution of a <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①③">url()</a> with the <a data-link-type="dfn" href="#url-local-url-flag" id="ref-for-url-local-url-flag②">local url flag</a> to reference the current <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-tree" id="ref-for-concept-node-tree②">node tree</a> (regardless of document base URL modifications). (<a href="https://github.com/w3c/csswg-drafts/issues/3320">Issue 3320</a>) <li>Switched censoring of <a class="css" data-link-type="maybe" href="#valdef-calc-nan" id="ref-for-valdef-calc-nan④">NaN</a> that escapes a <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑤②">math function</a> from infinity to zero. (<a href="https://github.com/w3c/csswg-drafts/issues/7067">Issue 7067</a>) <li>Added <a href="#linked-properties">Appendix A: Coordinating List-Valued Properties</a> to allow this property pattern to be easily referenced. (<a href="https://github.com/w3c/csswg-drafts/issues/7164">Issue 7164</a>) <li>Restricted <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-mix" id="ref-for-funcdef-mix③">mix()</a> to be the sole value of a declaration. (<a href="https://github.com/w3c/csswg-drafts/issues/6700">Issue 6700</a>) <li>Updated to match latest Fetch terminology. (<a href="https://github.com/whatwg/fetch/pull/1413">Fetch PR 1413</a>, <a href="https://github.com/w3c/csswg-drafts/pull/7160">CSS PR 7160</a>) <li>Clarified that the <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length⑦">font-relative lengths</a> are calculated without text shaping. <li>Defined serialization of empty urls to be <code class="highlight"><c- nf>url</c-><c- p>(</c-><c- s>""</c-><c- p>)</c-></code>. (<a href="https://github.com/w3c/csswg-drafts/issues/6447">Issue 6447</a>) <li>Defined serialization of <a class="production css" data-link-type="type" href="#typedef-position" id="ref-for-typedef-position①⑤"><position></a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#specified-value" id="ref-for-specified-value⑦">specified values</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/2274">Issue 2274</a>) <li>Fixed definition of <a data-link-type="dfn" href="#number" id="ref-for-number③">numbers</a> to allow decimals in combination with scientific notation, as originally intended and as defined in <a data-link-type="biblio" href="#biblio-css-syntax-3" title="CSS Syntax Module Level 3">[CSS-SYNTAX-3]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/7248">Issue 7248</a>) <li>Corrected various functions to return an empty map for their <a data-link-type="dfn" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type" id="ref-for-cssnumericvalue-type②⑧">type</a> instead of «[ "number" → 1 ]». (<a href="https://github.com/w3c/csswg-drafts/issues/7486">Issue 7486</a>) <li>Clarified effect of special UA restrictions on <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height①④">line-height</a> on <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh⑥">lh</a> and <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh⑤">rlh</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/3257">Issue 3257</a>) <li>Defined <code class="highlight"><<c- nf>function</c-><c- p>()</c->></code> notation to refer to functional notations. (<a href="https://github.com/w3c/csswg-drafts/issues/5728">Issue 5728</a>) </ul> Substantial changes since <a href="https://www.w3.org/TR/2021/WD-css-values-4-20211016/">16 October 2021 WD</a>: <ul> <li>Switched *vi and *vb units to resolve against the computed <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 itself. (<a href="https://github.com/w3c/csswg-drafts/issues/6873">Issue 6873</a>) <li>Added <a href="#url-processing">§ 4.5.4 URL Processing Model</a> to define integration with CORS, etc. (<a href="https://github.com/w3c/csswg-drafts/issues/562">Issue 562</a>) <li> Fixed the inverted assignment of <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths⑦">viewport-percentage length</a> behaviors to types of interface changes (A vs. B). <blockquote> <ul> <li> Changes in interface that happen as a result of scrolling or other frequent page interactions that would disturb the user if they resulted in substantial layout changes must be categorized as the <del>former (A)</del> <ins>latter (B)</ins> . <li> Changes in interface that have a sufficiently steady state that re-laying out the document into the adjusted space would be beneficial to the user must be categorized as the <del>latter (B)</del> <ins>former (A)</ins> . </ul> </blockquote> <li>Defined minimum number of <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②④">calc()</a> terms, arguments, and nesting as 32. (<a href="https://github.com/w3c/csswg-drafts/issues/3462">Issue 3462</a>) <li>Defined that mod(-0, infinity) returns <a class="css" data-link-type="maybe" href="#valdef-calc-nan" id="ref-for-valdef-calc-nan⑤">NaN</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4723">Issue 4723</a>) <li>Deferred <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-toggle" id="ref-for-funcdef-toggle">toggle()</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-attr" id="ref-for-funcdef-attr">attr()</a> to Level 5. </ul> Changes since <a href="https://www.w3.org/TR/2021/WD-css-values-4-20210930/">30 September 2021 WD</a>: <ul> <li>Added <a class="css" data-link-type="maybe" href="#rex" id="ref-for-rex①">rex</a>, <a class="css" data-link-type="maybe" href="#rcap" id="ref-for-rcap①">rcap</a>, <a class="css" data-link-type="maybe" href="#rch" id="ref-for-rch①">rch</a>, and <a class="css" data-link-type="maybe" href="#ric" id="ref-for-ric①">ric</a> units. <li>Switched <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-toggle" id="ref-for-funcdef-toggle①">toggle()</a> to use semicolons, matching with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-mix" id="ref-for-funcdef-mix④">mix()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/6701">Issue 6701</a>) <li>Fixed some wording errors in the definition of <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②⑤">calc()</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/6506">Issue 6506</a>) <li>Imported definition of <a class="production css" data-link-type="type" href="#typedef-quirky-length" id="ref-for-typedef-quirky-length③"><quirky-length></a> from <a data-link-type="biblio" href="#biblio-quirks" title="Quirks Mode Standard">[QUIRKS]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/6100">Issue 6100</a>) </ul> Changes since <a href="https://www.w3.org/TR/2021/WD-css-values-4-20210715/">7 July 2021 WD</a>: <ul> <li>Added <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-5/#funcdef-mix" id="ref-for-funcdef-mix⑤">mix()</a> notation for representing interpolated values. <li>Defined generically the computation of <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①⑥"><integer></a>, <a class="production css" data-link-type="type" href="#number-value" id="ref-for-number-value⑤⑥"><number></a>, <a class="production css" data-link-type="type" href="#percentage-value" id="ref-for-percentage-value③⑦"><percentage></a>, and <a class="production css" data-link-type="type" href="#length-value" id="ref-for-length-value④④"><length></a>. <li>Clarified that only non-zero lengths create a percentage+length mix that switches table cells to <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> sizing. </ul> Changes since <a href="https://www.w3.org/TR/2020/WD-css-values-4-20201111/">11 November 2020 WD</a>: <ul> <li>Updated interpolation of colors to reference <a data-link-type="biblio" href="#biblio-css-color-4" title="CSS Color Module Level 4">[CSS-COLOR-4]</a> instead of <a data-link-type="biblio" href="#biblio-css-color-3" title="CSS Color Module Level 3">[CSS-COLOR-3]</a>. <li>Added the <a class="css" data-link-type="maybe" href="#svh" id="ref-for-svh">svh</a>, <a class="css" data-link-type="maybe" href="#svw" id="ref-for-svw">svw</a>, <a class="css" data-link-type="maybe" href="#svi" id="ref-for-svi">svi</a>, <a class="css" data-link-type="maybe" href="#svb" id="ref-for-svb">svb</a>, <a class="css" data-link-type="maybe" href="#svmin" id="ref-for-svmin">svmin</a>, and <a class="css" data-link-type="maybe" href="#svmax" id="ref-for-svmax">svmax</a> <a data-link-type="dfn" href="#small-viewport-percentage-units" id="ref-for-small-viewport-percentage-units②">small viewport-percentage units</a>; <a class="css" data-link-type="maybe" href="#lvh" id="ref-for-lvh">lvh</a>, <a class="css" data-link-type="maybe" href="#lvw" id="ref-for-lvw">lvw</a>, <a class="css" data-link-type="maybe" href="#lvi" id="ref-for-lvi">lvi</a>, <a class="css" data-link-type="maybe" href="#lvb" id="ref-for-lvb">lvb</a>, <a class="css" data-link-type="maybe" href="#lvmin" id="ref-for-lvmin">lvmin</a>, and <a class="css" data-link-type="maybe" href="#lvmax" id="ref-for-lvmax">lvmax</a> <a data-link-type="dfn" href="#large-viewport-percentage-units" id="ref-for-large-viewport-percentage-units④">large viewport-percentage units</a>; and <a class="css" data-link-type="maybe" href="#dvh" id="ref-for-dvh">dvh</a>, <a class="css" data-link-type="maybe" href="#dvw" id="ref-for-dvw">dvw</a>, <a class="css" data-link-type="maybe" href="#dvi" id="ref-for-dvi">dvi</a>, <a class="css" data-link-type="maybe" href="#dvb" id="ref-for-dvb">dvb</a>, <a class="css" data-link-type="maybe" href="#dvmin" id="ref-for-dvmin">dvmin</a>, and <a class="css" data-link-type="maybe" href="#dvmax" id="ref-for-dvmax">dvmax</a> <a data-link-type="dfn" href="#dynamic-viewport-percentage-units" id="ref-for-dynamic-viewport-percentage-units②">dynamic viewport-percentage units</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4329">Issue 4329</a> and <a href="https://github.com/w3c/csswg-drafts/issues/6113">Issue 6113</a>) <li>Clamped excessively large <a class="production css" data-link-type="type" href="#angle-value" id="ref-for-angle-value①⑦"><angle></a> values to multiples of 360deg. (<a href="https://github.com/w3c/csswg-drafts/issues/6105">Issue 6105</a>) <li>Added back <a href="#combining-range">rules on range-checking combined values</a> lost during move from the <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a> specification. (<a href="https://github.com/w3c/csswg-drafts/issues/6097">Issue 6097</a>) <li>Specified that UA-imposed minimum font sizes apply to the used <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size⑨">font-size</a> and not to resolution of <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length⑧">font-relative lengths</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5858">Issue 5858</a>) <li>Clarified how <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min①①">min()</a> and <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max①⓪">max()</a> percentages can partially simplify. (<a href="https://github.com/w3c/csswg-drafts/issues/6298">Issue 6293</a>) </ul> <h3 class="no-num heading settled" id="additions-L3"> Additions Since Level 3<a class="self-link" href="#additions-L3"></a></h3> Changes since <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Level 3</a>: <ul> <li>Explicitly undefined numeric precision/range. <li>Added rules for interpolation per value type, and their clarified computed values. <li>Updated interpolation of colors to reference <a data-link-type="biblio" href="#biblio-css-color-4" title="CSS Color Module Level 4">[CSS-COLOR-4]</a>. </ul> Additions since <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Level 3</a>: <ul> <li>Defined the <a class="production css" data-link-type="type" href="#typedef-dashed-ident" id="ref-for-typedef-dashed-ident①⓪"><dashed-ident></a> type. <li>Defined the <a class="production css" data-link-type="type" href="#ratio-value" id="ref-for-ratio-value①③"><ratio></a> type. <li>Added <a class="css" data-link-type="maybe" href="#funcdef-src" id="ref-for-funcdef-src③">src()</a> to the <a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①⑤"><url></a> type. <li>Added the <a class="css" data-link-type="maybe" href="#vi" id="ref-for-vi①">vi</a>, <a class="css" data-link-type="maybe" href="#vb" id="ref-for-vb①">vb</a>, <a class="css" data-link-type="maybe" href="#ic" id="ref-for-ic④">ic</a>, <a class="css" data-link-type="maybe" href="#cap" id="ref-for-cap④">cap</a>, <a class="css" data-link-type="maybe" href="#lh" id="ref-for-lh⑦">lh</a> and <a class="css" data-link-type="maybe" href="#rlh" id="ref-for-rlh⑥">rlh</a> length units. <li>Added the <a class="css" data-link-type="maybe" href="#svh" id="ref-for-svh①">svh</a>, <a class="css" data-link-type="maybe" href="#svw" id="ref-for-svw①">svw</a>, <a class="css" data-link-type="maybe" href="#svi" id="ref-for-svi①">svi</a>, <a class="css" data-link-type="maybe" href="#svb" id="ref-for-svb①">svb</a>, <a class="css" data-link-type="maybe" href="#svmin" id="ref-for-svmin①">svmin</a>, and <a class="css" data-link-type="maybe" href="#svmax" id="ref-for-svmax①">svmax</a> <a data-link-type="dfn" href="#small-viewport-percentage-units" id="ref-for-small-viewport-percentage-units③">small viewport-percentage units</a> and <a class="css" data-link-type="maybe" href="#dvh" id="ref-for-dvh①">dvh</a>, <a class="css" data-link-type="maybe" href="#dvw" id="ref-for-dvw①">dvw</a>, <a class="css" data-link-type="maybe" href="#dvi" id="ref-for-dvi①">dvi</a>, <a class="css" data-link-type="maybe" href="#dvb" id="ref-for-dvb①">dvb</a>, <a class="css" data-link-type="maybe" href="#dvmin" id="ref-for-dvmin①">dvmin</a>, and <a class="css" data-link-type="maybe" href="#dvmax" id="ref-for-dvmax①">dvmax</a> <a data-link-type="dfn" href="#dynamic-viewport-percentage-units" id="ref-for-dynamic-viewport-percentage-units③">dynamic viewport-percentage units</a>. <li>Added the <a class="css" data-link-type="maybe" href="#x" id="ref-for-x">x</a> alias to <a class="css" data-link-type="maybe" href="#dppx" id="ref-for-dppx①">dppx</a>. <li>Added <a class="css" data-link-type="maybe" href="#funcdef-min" id="ref-for-funcdef-min①②">min()</a>, <a class="css" data-link-type="maybe" href="#funcdef-max" id="ref-for-funcdef-max①①">max()</a>, and <a class="css" data-link-type="maybe" href="#funcdef-clamp" id="ref-for-funcdef-clamp①①">clamp()</a> <a href="#comp-func">comparison functions</a>. <li>Added <a class="css" data-link-type="maybe" href="#funcdef-round" id="ref-for-funcdef-round⑥">round()</a>, <a class="css" data-link-type="maybe" href="#funcdef-mod" id="ref-for-funcdef-mod⑧">mod()</a>, <a class="css" data-link-type="maybe" href="#funcdef-rem" id="ref-for-funcdef-rem①①">rem()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sin" id="ref-for-funcdef-sin⑥">sin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-cos" id="ref-for-funcdef-cos⑤">cos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-tan" id="ref-for-funcdef-tan⑦">tan()</a>, <a class="css" data-link-type="maybe" href="#funcdef-asin" id="ref-for-funcdef-asin⑤">asin()</a>, <a class="css" data-link-type="maybe" href="#funcdef-acos" id="ref-for-funcdef-acos⑤">acos()</a>, <a class="css" data-link-type="maybe" href="#funcdef-atan" id="ref-for-funcdef-atan⑦">atan()</a>, <a class="css" data-link-type="maybe" href="#funcdef-atan2" id="ref-for-funcdef-atan2④">atan2()</a>, <a class="css" data-link-type="maybe" href="#funcdef-pow" id="ref-for-funcdef-pow⑥">pow()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sqrt" id="ref-for-funcdef-sqrt⑥">sqrt()</a>, <a class="css" data-link-type="maybe" href="#funcdef-hypot" id="ref-for-funcdef-hypot⑧">hypot()</a>, <a class="css" data-link-type="maybe" href="#funcdef-log" id="ref-for-funcdef-log⑤">log()</a>, <a class="css" data-link-type="maybe" href="#funcdef-exp" id="ref-for-funcdef-exp④">exp()</a>, <a class="css" data-link-type="maybe" href="#funcdef-abs" id="ref-for-funcdef-abs④">abs()</a>, <a class="css" data-link-type="maybe" href="#funcdef-sign" id="ref-for-funcdef-sign④">sign()</a> math functions. <li>Added <a class="css" data-link-type="maybe" href="#valdef-calc-e" id="ref-for-valdef-calc-e①">e</a>, <a class="css" data-link-type="maybe" href="#valdef-calc-pi" id="ref-for-valdef-calc-pi①">pi</a>, <a class="css" data-link-type="maybe" href="#valdef-calc-infinity" id="ref-for-valdef-calc-infinity④">infinity</a>, <a class="css" data-link-type="maybe" href="#valdef-calc--infinity" id="ref-for-valdef-calc--infinity③">-infinity</a>, <a class="css" data-link-type="maybe" href="#valdef-calc-nan" id="ref-for-valdef-calc-nan⑥">NaN</a> constants for use in <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②⑥">calc()</a>. <li>Added <a href="#calc-type-checking">unit algebra</a> to <a class="css" data-link-type="maybe" href="#funcdef-calc" id="ref-for-funcdef-calc②⑦">calc()</a>, allowing multiplication and division of <a data-link-type="dfn" href="#dimension" id="ref-for-dimension①②">dimensions</a>. <li>A non-integer in a calc() automatically rounds to the nearest integer when used where an <a class="production css" data-link-type="type" href="#integer-value" id="ref-for-integer-value①⑦"><integer></a> is required. <li>Defined <a href="#calc-serialize">serialization</a> of <a data-link-type="dfn" href="#math-function" id="ref-for-math-function⑤③">math functions</a>. <li>Added a genericized definition of <a data-link-type="dfn" href="#coordinating-list-property" id="ref-for-coordinating-list-property⑥">coordinating list property groups</a>, to make it easier to reference the coordinating behavior of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background②">background</a> properties. </ul> <h2 class="no-num heading settled" id="security"> Security Considerations<a class="self-link" href="#security"></a></h2> This specification presents no new security considerations. This specification defines the <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①④">url()</a> and <a class="css" data-link-type="maybe" href="#funcdef-src" id="ref-for-funcdef-src④">src()</a> functions (<a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①⑥"><url></a>), which allow CSS to make network requests. Depending on what features they are used in, these can potentially expose whether or not the user has access to resources on a network, and expose information about their contents (such as the rules within a style sheet, the size of an image, the metrics of a font). They can also allow exfiltrating data via URL. <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 (the <a data-link-type="dfn" href="#viewport-percentage-lengths" id="ref-for-viewport-percentage-lengths⑧">viewport-percentage lengths</a>), default font size, and potentially some information about which fonts are available on the user’s system (the <a data-link-type="dfn" href="#font-relative-length" id="ref-for-font-relative-length⑨">font-relative lengths</a>). This specification defines the <a class="css" data-link-type="maybe" href="#funcdef-url" id="ref-for-funcdef-url①⑤">url()</a> and <a class="css" data-link-type="maybe" href="#funcdef-src" id="ref-for-funcdef-src⑤">src()</a> functions (<a class="production css" data-link-type="type" href="#url-value" id="ref-for-url-value①⑦"><url></a>), which allow CSS to make network requests. Depending on what features they are used in, these can potentially expose whether or not the user has access to resources on a network, and expose information about their contents (such as the rules within a style sheet, the size of an image, the metrics of a font). They can also allow exfiltrating data via URL. </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="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://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="https://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="https://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="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://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="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://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="#mult-req">!</a>, in § 2.3 <li><a href="#mult-comma">#</a>, in § 2.3 <li><a href="#comb-all">&&</a>, in § 2.2 <li><a href="#mult-zero-plus">*</a>, in § 2.3 <li><a href="#mult-one-plus">+</a>, in § 2.3 <li><a href="#comb-comma">,</a>, in § 2.1 <li><a href="#mult-opt">?</a>, in § 2.3 <li><a href="#comb-one">|</a>, in § 2.2 <li><a href="#comb-any">||</a>, in § 2.2 <li><a href="#mult-num">{A}</a>, in § 2.3 <li><a href="#mult-num-range">{A,B}</a>, in § 2.3 <li><a href="#funcdef-abs">abs()</a>, in § 10.6 <li><a href="#absolute-length">absolute length</a>, in § 6.2 <li><a href="#absolute-length">absolute length unit</a>, in § 6.2 <li><a href="#accumulation">accumulate</a>, in § 3 <li><a href="#accumulation">accumulation</a>, in § 3 <li><a href="#accumulation">accumulation procedure</a>, in § 3 <li><a href="#funcdef-acos">acos()</a>, in § 10.4 <li><a href="#addition">add</a>, in § 3 <li><a href="#addition">addition</a>, in § 3 <li><a href="#addition">addition procedure</a>, in § 3 <li><a href="#length-advance-measure">advance measure</a>, in § 6.1.1 <li><a href="#anchor-unit">anchor</a>, in § 6.2 <li><a href="#anchor-unit">anchor unit</a>, in § 6.2 <li><a href="#angle-value"><angle></a>, in § 7.1 <li><a href="#typedef-angle-percentage"><angle-percentage></a>, in § 5.6 <li><a href="#funcdef-asin">asin()</a>, in § 10.4 <li><a href="#funcdef-atan">atan()</a>, in § 10.4 <li><a href="#funcdef-atan2">atan2()</a>, in § 10.4 <li><a href="#bearing-angle">bearing angle</a>, in § 7.1 <li><a href="#between-zero-and-b">between zero and B</a>, in § 10.3 <li><a href="#css-bracketed-range-notation">bracketed range notation</a>, in § 5.1 <li><a href="#funcdef-calc">calc()</a>, in § 10.1 <li><a href="#typedef-calc-keyword"><calc-keyword></a>, in § 10.8 <li><a href="#calculation-tree-calc-operator-nodes">calc-operator nodes</a>, in § 10.10 <li><a href="#typedef-calc-product"><calc-product></a>, in § 10.8 <li><a href="#typedef-calc-sum"><calc-sum></a>, in § 10.8 <li><a href="#calc-calculation">calculation</a>, in § 10.1 <li><a href="#calculation-tree">calculation tree</a>, in § 10.10 <li><a href="#typedef-calc-value"><calc-value></a>, in § 10.8 <li><a href="#canonical-unit">canonical</a>, in § 5.4.1 <li><a href="#canonical-unit">canonical unit</a>, in § 5.4.1 <li><a href="#cap">cap</a>, in § 6.1.1 <li><a href="#ch">ch</a>, in § 6.1.1 <li><a href="#funcdef-clamp">clamp()</a>, in § 10.2 <li><a href="#cm">cm</a>, in § 6.2 <li><a href="#combine">combine</a>, in § 3 <li><a href="#compatible-units">compatible</a>, in § 5.4.1 <li><a href="#compatible-units">compatible units</a>, in § 5.4.1 <li><a href="#computed-length">computed length</a>, in § 6 <li><a href="#css-consistent-type">consistent</a>, in § 10.9 <li><a href="#css-consistent-type">consistent type</a>, in § 10.9 <li><a href="#css-contain-a-percentage">contain a percentage</a>, in § 10.9 <li><a href="#coordinated-value-list">coordinated value list</a>, in § Unnumbered section <li><a href="#coordinating-list-base-property">coordinating list base property</a>, in § Unnumbered section <li><a href="#coordinating-list-property">coordinating list property</a>, in § Unnumbered section <li><a href="#coordinating-list-property">coordinating list property group</a>, in § Unnumbered section <li><a href="#funcdef-cos">cos()</a>, in § 10.4 <li><a href="#css-bracketed-range-notation">CSS bracketed range notation</a>, in § 5.1 <li><a href="#css-grammar-production-block">CSS grammar production block</a>, in § 2.8 <li><a href="#css-css-identifier">CSS ident</a>, in § 4 <li><a href="#css-css-identifier">CSS identifier</a>, in § 4 <li><a href="#css-wide-keywords">CSS-wide keywords</a>, in § 4.1.1 <li><a href="#identifier-value"><custom-ident></a>, in § 4.2 <li><a href="#typedef-dashed-ident"><dashed-ident></a>, in § 4.3 <li><a href="#default-viewport-percentage-units">default viewport-percentage units</a>, in § 6.1.2.1 <li><a href="#deg">deg</a>, in § 7.1 <li><a href="#degenerate-ratio">degenerate ratio</a>, in § 5.7 <li><a href="#determine-the-type-of-a-calculation">determine the type of a calculation</a>, in § 10.9 <li><a href="#device-pixel">device pixel</a>, in § 6.2 <li><a href="#typedef-dimension"><dimension></a>, in § 5.4 <li><a href="#dimension">dimension</a>, in § 5.4 <li><a href="#valdef-rounding-strategy-down">down</a>, in § 10.3 <li><a href="#dpcm">dpcm</a>, in § 7.4 <li><a href="#dpi">dpi</a>, in § 7.4 <li><a href="#dppx">dppx</a>, in § 7.4 <li><a href="#dvb">dvb</a>, in § 6.1.2.2 <li><a href="#dvh">dvh</a>, in § 6.1.2.2 <li><a href="#dvi">dvi</a>, in § 6.1.2.2 <li><a href="#dvmax">dvmax</a>, in § 6.1.2.2 <li><a href="#dvmin">dvmin</a>, in § 6.1.2.2 <li><a href="#dvw">dvw</a>, in § 6.1.2.2 <li><a href="#dynamic-viewport-percentage-units">dynamic viewport-percentage units</a>, in § 6.1.2.1 <li><a href="#dynamic-viewport-size">dynamic viewport size</a>, in § 6.1.2.1 <li><a href="#valdef-calc-e">e</a>, in § 10.7.1 <li><a href="#em">em</a>, in § 6.1.1 <li><a href="#ex">ex</a>, in § 6.1.1 <li><a href="#funcdef-exp">exp()</a>, in § 10.5 <li><a href="#fetch-a-style-resource">fetch a style resource</a>, in § 4.5.4 <li><a href="#font-relative-length">font-relative lengths</a>, in § 6.1.1 <li><a href="#frequency-value"><frequency></a>, in § 7.3 <li><a href="#typedef-frequency-percentage"><frequency-percentage></a>, in § 5.6 <li><a href="#functional-notation">functional notation</a>, in § 9 <li><a href="#grad">grad</a>, in § 7.1 <li><a href="#funcdef-hypot">hypot()</a>, in § 10.5 <li><a href="#Hz">Hz</a>, in § 7.3 <li><a href="#ic">ic</a>, in § 6.1.1 <li><a href="#typedef-ident"><ident></a>, in § 4 <li><a href="#css-css-identifier">ident</a>, in § 4 <li><a href="#css-css-identifier">identifier</a>, in § 4 <li><a href="#in">in</a>, in § 6.2 <li><a href="#css-infinity">infinite</a>, in § 10.9.1 <li><a href="#valdef-calc--infinity">-infinity</a>, in § 10.7.2 <li> infinity <ul> <li><a href="#css-infinity">dfn for CSS</a>, in § 10.9.1 <li><a href="#valdef-calc-infinity">value for calc()</a>, in § 10.7.2 </ul> <li><a href="#integer-value"><integer></a>, in § 5.2 <li><a href="#integer">integer</a>, in § 5.2 <li><a href="#interpolation">interpolate</a>, in § 3 <li><a href="#interpolation">interpolation</a>, in § 3 <li><a href="#interpolation">interpolation procedure</a>, in § 3 <li><a href="#css-keyword">keyword</a>, in § 4.1 <li><a href="#kHz">kHz</a>, in § 7.3 <li><a href="#large-viewport-percentage-units">large viewport-percentage units</a>, in § 6.1.2.1 <li><a href="#large-viewport-size">large viewport size</a>, in § 6.1.2.1 <li><a href="#length-value"><length></a>, in § 6 <li><a href="#typedef-length-percentage"><length-percentage></a>, in § 5.6 <li><a href="#lh">lh</a>, in § 6.1.1 <li><a href="#local-font-relative-lengths">local font-relative lengths</a>, in § 6.1.1 <li><a href="#url-local-url-flag">local url flag</a>, in § 4.5.1.1 <li><a href="#funcdef-log">log()</a>, in § 10.5 <li><a href="#lvb">lvb</a>, in § 6.1.2.2 <li><a href="#lvh">lvh</a>, in § 6.1.2.2 <li><a href="#lvi">lvi</a>, in § 6.1.2.2 <li><a href="#lvmax">lvmax</a>, in § 6.1.2.2 <li><a href="#lvmin">lvmin</a>, in § 6.1.2.2 <li><a href="#lvw">lvw</a>, in § 6.1.2.2 <li><a href="#css-make-a-type-consistent">made consistent</a>, in § 10.9 <li><a href="#css-make-a-type-consistent">make a type consistent</a>, in § 10.9 <li><a href="#css-make-a-type-consistent">make consistent</a>, in § 10.9 <li><a href="#math-function">math function</a>, in § 10 <li><a href="#funcdef-max">max()</a>, in § 10.2 <li><a href="#funcdef-min">min()</a>, in § 10.2 <li><a href="#mm">mm</a>, in § 6.2 <li><a href="#funcdef-mod">mod()</a>, in § 10.3 <li><a href="#ms">ms</a>, in § 7.2 <li> NaN <ul> <li><a href="#css-nan">dfn for CSS</a>, in § 10.9.1 <li><a href="#valdef-calc-nan">value for calc()</a>, in § 10.7.2 </ul> <li><a href="#valdef-rounding-strategy-nearest">nearest</a>, in § 10.3 <li><a href="#css-infinity">negative infinity</a>, in § 10.9.1 <li><a href="#css-signed-zero">negative zero</a>, in § 10.9.1 <li><a href="#valdef-clamp-none">none</a>, in § 10.2 <li><a href="#not-additive">not additive</a>, in § 3 <li><a href="#number-value"><number></a>, in § 5.3 <li><a href="#number">number</a>, in § 5.3 <li><a href="#numeric-data-types">numeric data types</a>, in § 5 <li><a href="#calculation-tree-operator-nodes">operator nodes</a>, in § 10.10 <li><a href="#parse-a-calculation">parse a calculation</a>, in § 10.10 <li><a href="#parse-a-calculation">parsing a calculation</a>, in § 10.10 <li><a href="#pc">pc</a>, in § 6.2 <li><a href="#percentage-value"><percentage></a>, in § 5.5 <li><a href="#percentage">percentage</a>, in § 5.5 <li><a href="#css-contain-a-percentage">percentage-containing</a>, in § 10.9 <li><a href="#physical-unit">physical unit</a>, in § 6.2 <li><a href="#valdef-calc-pi">pi</a>, in § 10.7.1 <li><a href="#visual-angle-unit">pixel unit</a>, in § 6.2 <li><a href="#typedef-position"><position></a>, in § 8.3 <li><a href="#css-infinity">positive infinity</a>, in § 10.9.1 <li><a href="#css-signed-zero">positive zero</a>, in § 10.9.1 <li><a href="#funcdef-pow">pow()</a>, in § 10.5 <li><a href="#pt">pt</a>, in § 6.2 <li><a href="#px">px</a>, in § 6.2 <li><a href="#Q">Q</a>, in § 6.2 <li><a href="#typedef-quirky-length"><quirky-length></a>, in § Unnumbered section <li><a href="#rad">rad</a>, in § 7.1 <li><a href="#ratio-value"><ratio></a>, in § 5.7 <li><a href="#ratio">ratio</a>, in § 5.7 <li><a href="#rcap">rcap</a>, in § 6.1.1 <li><a href="#rch">rch</a>, in § 6.1.1 <li><a href="#reference-pixel">reference pixel</a>, in § 6.2 <li><a href="#relative-length">relative length</a>, in § 6.1 <li><a href="#relative-length">relative length unit</a>, in § 6.1 <li><a href="#rem">rem</a>, in § 6.1.1 <li><a href="#funcdef-rem">rem()</a>, in § 10.3 <li><a href="#resolution-value"><resolution></a>, in § 7.4 <li><a href="#rex">rex</a>, in § 6.1.1 <li><a href="#ric">ric</a>, in § 6.1.1 <li><a href="#rlh">rlh</a>, in § 6.1.1 <li><a href="#root-font-relative-lengths">root font-relative lengths</a>, in § 6.1.1 <li><a href="#funcdef-round">round()</a>, in § 10.3 <li><a href="#typedef-rounding-strategy"><rounding-strategy></a>, in § 10.3 <li><a href="#css-round-to-the-nearest-integer">round to the nearest integer</a>, in § 5.2 <li><a href="#s">s</a>, in § 7.2 <li><a href="#serialize-a-calculation-tree">serialize a calculation tree</a>, in § 10.13 <li><a href="#serialize-a-math-function">serialize a math function</a>, in § 10.13 <li><a href="#serialize-a-calculation-tree">serialize the calculation tree</a>, in § 10.13 <li><a href="#serialize-a-calculation-tree">serializing a calculation tree</a>, in § 10.13 <li><a href="#serialize-a-calculation-tree">serializing the calculation tree</a>, in § 10.13 <li><a href="#funcdef-sign">sign()</a>, in § 10.6 <li><a href="#css-signed-zero">signed zero</a>, in § 10.9.1 <li><a href="#simplify-a-calculation-tree">simplify</a>, in § 10.10.1 <li><a href="#simplify-a-calculation-tree">simplify a calculation tree</a>, in § 10.10.1 <li><a href="#simplify-a-calculation-tree">simplifying a calculation tree</a>, in § 10.10.1 <li><a href="#funcdef-sin">sin()</a>, in § 10.4 <li><a href="#small-viewport-percentage-units">small viewport-percentage units</a>, in § 6.1.2.1 <li><a href="#small-viewport-size">small viewport size</a>, in § 6.1.2.1 <li><a href="#snap-a-length-as-a-border-width">snap a length as a border width</a>, in § 6 <li><a href="#snap-a-length-as-a-border-width">snap as a border width</a>, in § 6 <li><a href="#sort-a-calculations-children">sort a calculation’s children</a>, in § 10.13 <li><a href="#specified-length">specified length</a>, in § 6 <li><a href="#funcdef-sqrt">sqrt()</a>, in § 10.5 <li><a href="#funcdef-src">src()</a>, in § 4.5 <li><a href="#string-value"><string></a>, in § 4.4 <li><a href="#svb">svb</a>, in § 6.1.2.2 <li><a href="#svh">svh</a>, in § 6.1.2.2 <li><a href="#svi">svi</a>, in § 6.1.2.2 <li><a href="#svmax">svmax</a>, in § 6.1.2.2 <li><a href="#svmin">svmin</a>, in § 6.1.2.2 <li><a href="#svw">svw</a>, in § 6.1.2.2 <li><a href="#funcdef-tan">tan()</a>, in § 10.4 <li><a href="#css-textual-data-types">textual data types</a>, in § 4 <li><a href="#time-value"><time></a>, in § 7.2 <li><a href="#typedef-time-percentage"><time-percentage></a>, in § 5.6 <li><a href="#top-level-calculation">top-level calculation</a>, in § 10.9.1 <li><a href="#valdef-rounding-strategy-to-zero">to-zero</a>, in § 10.3 <li><a href="#turn">turn</a>, in § 7.1 <li><a href="#valdef-rounding-strategy-up">up</a>, in § 10.3 <li><a href="#url-value"><url></a>, in § 4.5 <li><a href="#funcdef-url">url()</a>, in § 4.5 <li><a href="#typedef-url-modifier"><url-modifier></a>, in § 4.5.3 <li><a href="#url-request-modifier-steps">URL request modifier steps</a>, in § 4.5.4 <li><a href="#accumulation">value accumulation</a>, in § 3 <li><a href="#addition">value addition</a>, in § 3 <li><a href="#css-value-definition-syntax">value definition syntax</a>, in § 2 <li><a href="#interpolation">value interpolation</a>, in § 3 <li><a href="#vb">vb</a>, in § 6.1.2.2 <li><a href="#vh">vh</a>, in § 6.1.2.2 <li><a href="#vi">vi</a>, in § 6.1.2.2 <li><a href="#viewport-percentage-lengths">viewport-percentage lengths</a>, in § 6.1.2 <li><a href="#visual-angle-unit">visual angle unit</a>, in § 6.2 <li><a href="#vmax">vmax</a>, in § 6.1.2.2 <li><a href="#vmin">vmin</a>, in § 6.1.2.2 <li><a href="#vw">vw</a>, in § 6.1.2.2 <li><a href="#x">x</a>, in § 7.4 <li><a href="#zero-value"><zero></a>, in § 5.3 </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-2023]</a> defines the following terms: <ul> <li>ua </ul> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-1]</a> defines the following terms: <ul> <li>animation <li>animation-iteration-count <li>animation-name <li>animation-timing-function </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>margin <li>margin-bottom <li>margin-left <li>margin-right <li>margin-top <li>padding <li>padding-bottom <li>padding-left <li>padding-right <li>padding-top </ul> <li> <a data-link-type="biblio">[CSS-BREAK-3]</a> defines the following terms: <ul> <li>orphans </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>@import <li>actual value <li>computed value <li>inherit <li>initial <li>shorthand property <li>specified value <li>unset <li>used value </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>hsl() <li>opacity <li>rgba() </ul> <li> <a data-link-type="biblio">[CSS-COLOR-5]</a> defines the following terms: <ul> <li><color> <li>@color-profile <li>relative color </ul> <li> <a data-link-type="biblio">[CSS-CONDITIONAL-3]</a> defines the following terms: <ul> <li>@supports <li>supports(conditionText) </ul> <li> <a data-link-type="biblio">[CSS-COUNTER-STYLES-3]</a> defines the following terms: <ul> <li>disc </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>containing block <li>initial containing block <li>root element </ul> <li> <a data-link-type="biblio">[CSS-EASING-1]</a> defines the following terms: <ul> <li><easing-function> <li>ease-in <li>ease-out <li>easing function <li>timing function </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font <li>font-family <li>font-size </ul> <li> <a data-link-type="biblio">[CSS-FONTS-5]</a> defines the following terms: <ul> <li>@font-face <li>font-size </ul> <li> <a data-link-type="biblio">[CSS-GRID-2]</a> defines the following terms: <ul> <li><flex> <li>fr </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-4]</a> defines the following terms: <ul> <li>image-resolution <li>linear-gradient() </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>normal <li>vertical-align </ul> <li> <a data-link-type="biblio">[CSS-MASKING-1]</a> defines the following terms: <ul> <li>clip </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>overflow <li>scrollbar-gutter </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-4]</a> defines the following terms: <ul> <li>max-lines </ul> <li> <a data-link-type="biblio">[CSS-PAGE-3]</a> defines the following terms: <ul> <li>page area </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>bottom <li>left <li>right <li>top </ul> <li> <a data-link-type="biblio">[CSS-RHYTHM-1]</a> defines the following terms: <ul> <li>block-step-size </ul> <li> <a data-link-type="biblio">[CSS-SCOPING-1]</a> defines the following terms: <ul> <li>tree-scoped name <li>tree-scoped reference </ul> <li> <a data-link-type="biblio">[CSS-SHAPES-1]</a> defines the following terms: <ul> <li>rect() </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>auto <li>box-sizing <li>height <li>max-height <li>max-width <li>min-height <li>min-width <li>width </ul> <li> <a data-link-type="biblio">[CSS-SYNTAX-3]</a> defines the following terms: <ul> <li><any-value> <li><delim-token> <li><dimension-token> <li><function-token> <li><ident-token> <li><number-token> <li><percentage-token> <li><string-token> <li><url-token> <li><whitespace-token> <li>component value <li>consume a url token <li>simple block <li>whitespace </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>text-align </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>center <li>letter-spacing <li>tab-size <li>text-indent <li>word-spacing </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-decoration </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms: <ul> <li>transform-origin </ul> <li> <a data-link-type="biblio">[CSS-TYPED-OM-1]</a> defines the following terms: <ul> <li>add two types <li>internal representation <li>invert a type <li>match <li>multiply two types <li>percent hint <li>type </ul> <li> <a data-link-type="biblio">[CSS-UI-4]</a> defines the following terms: <ul> <li>outline-color </ul> <li> <a data-link-type="biblio">[CSS-VALUES-5]</a> defines the following terms: <ul> <li>attr() <li>mix() <li>toggle() </ul> <li> <a data-link-type="biblio">[CSS-VARIABLES-1]</a> defines the following terms: <ul> <li>custom property <li>var() </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block axis <li>inline axis <li>text-orientation <li>upright <li>vertical-lr <li>vertical-rl <li>writing mode <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li><border-width> <li>border-collapse <li>border-spacing </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>line-height </ul> <li> <a data-link-type="biblio">[CSS3-BACKGROUND]</a> defines the following terms: <ul> <li>background <li>background-attachment <li>background-image <li>background-position <li>border-bottom-width <li>border-color <li>border-left-width <li>border-right-width <li>border-top-width <li>border-width <li>box-shadow <li>center </ul> <li> <a data-link-type="biblio">[CSS3-IMAGES]</a> defines the following terms: <ul> <li><image> </ul> <li> <a data-link-type="biblio">[CSSOM]</a> defines the following terms: <ul> <li>CSSStyleSheet <li>location <li>origin-clean flag <li>stylesheet base url </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>Document <li>ShadowRoot <li>node tree <li>quirks mode <li>tree order </ul> <li> <a data-link-type="biblio">[FETCH]</a> defines the following terms: <ul> <li>RequestDestination <li>client <li>credentials mode <li>destination <li>fetch <li>initiator type <li>mode <li>origin <li>processresponseconsumebody <li>referrer <li>request <li>response <li>url <li>use-url-credentials flag </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>api base url <li>base <li>find a potential indicated element <li>origin <li>relevant settings object <li>the body element </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>ascii case-insensitive <li>code point <li>concatenate <li>for each <li>identical to <li>implementation-defined <li>string </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>continuous media <li>media query <li>paged media </ul> <li> <a data-link-type="biblio">[URL]</a> defines the following terms: <ul> <li>fragment <li>percent-encode after encoding <li>url <li>url parser </ul> <li> <a data-link-type="biblio">[WEB-ANIMATIONS-1]</a> defines the following terms: <ul> <li>discrete </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-2023">[CSS-2023] <dd>Chris Lilley; et al. <a href="https://www.w3.org/TR/css-2023/"><cite>CSS Snapshot 2023</cite></a>. 7 December 2023. NOTE. URL: <a href="https://www.w3.org/TR/css-2023/">https://www.w3.org/TR/css-2023/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. 3 November 2022. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</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-4">[CSS-COLOR-4] <dd>Tab Atkins Jr.; Chris Lilley; Lea Verou. <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. 1 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</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>. 28 June 2022. 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>David Baron; Elika Etemad; Chris Lilley. <a href="https://www.w3.org/TR/css-conditional-3/"><cite>CSS Conditional Rules Module Level 3</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-conditional-3/">https://www.w3.org/TR/css-conditional-3/</a> <dt id="biblio-css-counter-styles-3">[CSS-COUNTER-STYLES-3] <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-counter-styles-3/"><cite>CSS Counter Styles Level 3</cite></a>. 27 July 2021. CR. URL: <a href="https://www.w3.org/TR/css-counter-styles-3/">https://www.w3.org/TR/css-counter-styles-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. CR. URL: <a href="https://www.w3.org/TR/css-easing-1/">https://www.w3.org/TR/css-easing-1/</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-fonts-5">[CSS-FONTS-5] <dd>Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-5/"><cite>CSS Fonts Module Level 5</cite></a>. 6 February 2024. WD. URL: <a href="https://www.w3.org/TR/css-fonts-5/">https://www.w3.org/TR/css-fonts-5/</a> <dt id="biblio-css-grid-2">[CSS-GRID-2] <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-2/"><cite>CSS Grid Layout Module Level 2</cite></a>. 18 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</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-inline-3">[CSS-INLINE-3] <dd>Dave Cramer; Elika Etemad. <a href="https://www.w3.org/TR/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. 1 April 2023. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a> <dt id="biblio-css-masking-1">[CSS-MASKING-1] <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-masking-1/"><cite>CSS Masking Module Level 1</cite></a>. 5 August 2021. CR. URL: <a href="https://www.w3.org/TR/css-masking-1/">https://www.w3.org/TR/css-masking-1/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. 29 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> <dt id="biblio-css-page-3">[CSS-PAGE-3] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. 14 September 2023. WD. URL: <a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. 3 April 2023. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-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. WD. URL: <a href="https://www.w3.org/TR/css-scoping-1/">https://www.w3.org/TR/css-scoping-1/</a> <dt id="biblio-css-shapes-1">[CSS-SHAPES-1] <dd>Rossen Atanassov; Alan Stearns. <a href="https://www.w3.org/TR/css-shapes-1/"><cite>CSS Shapes Module Level 1</cite></a>. 15 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-shapes-1/">https://www.w3.org/TR/css-shapes-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-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. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. 20 October 2023. WD. URL: <a href="https://www.w3.org/TR/css-text-4/">https://www.w3.org/TR/css-text-4/</a> <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1] <dd>Shane Stephens; Tab Atkins Jr.; Naina Raisinghani. <a href="https://www.w3.org/TR/css-typed-om-1/"><cite>CSS Typed OM Level 1</cite></a>. 10 April 2018. 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-5">[CSS-VALUES-5] <dd><a href="https://drafts.csswg.org/css-values-5/"><cite>CSS Values and Units Module Level 5</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-values-5/">https://drafts.csswg.org/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-css2">[CSS2] <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-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. WD. URL: <a href="https://www.w3.org/TR/CSS22/">https://www.w3.org/TR/CSS22/</a> <dt id="biblio-css3-background">[CSS3-BACKGROUND] <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>. 19 December 2023. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> <dt id="biblio-css3-fonts">[CSS3-FONTS] <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/"><cite>CSS Fonts Module Level 3</cite></a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a> <dt id="biblio-css3-images">[CSS3-IMAGES] <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. CR. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a> <dt id="biblio-cssom">[CSSOM] <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-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-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-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-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-unicode">[UNICODE] <dd><a href="https://www.unicode.org/versions/latest/"><cite>The Unicode Standard</cite></a>. URL: <a href="https://www.unicode.org/versions/latest/">https://www.unicode.org/versions/latest/</a> <dt id="biblio-url">[URL] <dd>Anne van Kesteren. <a href="https://url.spec.whatwg.org/"><cite>URL Standard</cite></a>. Living Standard. URL: <a href="https://url.spec.whatwg.org/">https://url.spec.whatwg.org/</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> </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-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-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/"><cite>CSS Fragmentation Module Level 3</cite></a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a> <dt id="biblio-css-cascade-3">[CSS-CASCADE-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/"><cite>CSS Cascading and Inheritance Level 3</cite></a>. 11 February 2021. REC. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a> <dt id="biblio-css-color-3">[CSS-COLOR-3] <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/"><cite>CSS Color Module Level 3</cite></a>. 18 January 2022. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a> <dt id="biblio-css-grid-1">[CSS-GRID-1] <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-grid-1/"><cite>CSS Grid Layout Module Level 1</cite></a>. 18 December 2020. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a> <dt id="biblio-css-overflow-4">[CSS-OVERFLOW-4] <dd>David Baron; Florian Rivoal; Elika Etemad. <a href="https://www.w3.org/TR/css-overflow-4/"><cite>CSS Overflow Module Level 4</cite></a>. 21 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-overflow-4/">https://www.w3.org/TR/css-overflow-4/</a> <dt id="biblio-css-rhythm-1">[CSS-RHYTHM-1] <dd>Koji Ishii; Elika Etemad. <a href="https://www.w3.org/TR/css-rhythm-1/"><cite>CSS Rhythmic Sizing</cite></a>. 2 March 2017. WD. URL: <a href="https://www.w3.org/TR/css-rhythm-1/">https://www.w3.org/TR/css-rhythm-1/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. 3 September 2023. CR. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. 4 May 2022. WD. URL: <a href="https://www.w3.org/TR/css-text-decor-4/">https://www.w3.org/TR/css-text-decor-4/</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-ui-4">[CSS-UI-4] <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/"><cite>CSS Basic User Interface Module Level 4</cite></a>. 16 March 2021. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a> <dt id="biblio-mediaq">[MEDIAQ] <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. CR. URL: <a href="https://www.w3.org/TR/mediaqueries-4/">https://www.w3.org/TR/mediaqueries-4/</a> <dt id="biblio-quirks">[QUIRKS] <dd>Simon Pieters. <a href="https://quirks.spec.whatwg.org/"><cite>Quirks Mode Standard</cite></a>. Living Standard. URL: <a href="https://quirks.spec.whatwg.org/">https://quirks.spec.whatwg.org/</a> <dt id="biblio-rfc6694">[RFC6694] <dd>S. Moonesamy, Ed.. <a href="https://www.rfc-editor.org/rfc/rfc6694"><cite>The "about" URI Scheme</cite></a>. August 2012. Informational. URL: <a href="https://www.rfc-editor.org/rfc/rfc6694">https://www.rfc-editor.org/rfc/rfc6694</a> </dl> <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"> Possibly reference <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#find-a-potential-indicated-element">find a potential indicated element</a>, but that is defined specifically for <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document">Document</a></code>s, not <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#shadowroot">ShadowRoot</a></code>s. <a class="issue-return" href="#issue-f83e4845" title="Jump to section">↵</a></div> <div class="issue"> CSSOM needs to specify how it rounds, and it’s probably good for CSS functions to round the same way by default. What behavior should be used? <a href="https://github.com/w3c/csswg-drafts/issues/5689">[Issue #5689]</a> <a class="issue-return" href="#issue-1a929fd0" title="Jump to section">↵</a></div> <div class="issue"> This section is still <a href="https://lists.w3.org/Archives/Member/w3c-css-wg/2016AprJun/0239.html">under discussion</a>. <a class="issue-return" href="#issue-f5bc4b00" title="Jump to section">↵</a></div> </div> <details class="caniuse-status unpositioned" data-anno-for="rem" data-deco> <summary>CanIUse</summary> Support:Android Browser2.1+Baidu Browser13.18+Blackberry Browser7+Chrome4+Chrome for Android122+Edge12+Firefox3.6+Firefox for Android123+IE11+IE Mobile10+KaiOS Browser2.5+Opera11.6+Opera MiniAllOpera Mobile12+QQ Browser13.1+Safari5+Safari on iOS6.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=rem">caniuse.com</a> as of 2024-03-07 </details> <details class="caniuse-status unpositioned" data-anno-for="ch" data-deco> <summary>CanIUse</summary> Support:Android Browser4.4+Baidu Browser13.18+Blackberry Browser10+Chrome27+Chrome for Android122+Edge12+Firefox2+Firefox for Android123+IE (limited)9+IE Mobile10+KaiOS Browser2.5+Opera15+Opera MiniNoneOpera Mobile73+QQ Browser13.1+Safari7+Safari on iOS7.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=ch-unit">caniuse.com</a> as of 2024-03-07 </details> <details class="caniuse-status unpositioned" data-anno-for="viewport-relative-lengths" data-deco> <summary>CanIUse</summary> Support:Android Browser4.4+Baidu Browser13.18+Blackberry Browser10+Chrome26+Chrome for Android122+Edge16+Firefox19+Firefox for Android123+IE (limited)9+IE Mobile (limited)10+KaiOS Browser2.5+Opera15+Opera MiniNoneOpera Mobile73+QQ Browser13.1+Safari6.1+Safari on iOS8+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=viewport-units">caniuse.com</a> as of 2024-03-07 </details> <details class="caniuse-status unpositioned" data-anno-for="math" data-deco> <summary>CanIUse</summary> Support:Android Browser122+Baidu Browser13.18+Blackberry Browser10+Chrome26+Chrome for Android122+Edge12+Firefox16+Firefox for Android123+IE (limited)9+IE Mobile10+KaiOS Browser2.5+Opera15+Opera MiniNoneOpera Mobile73+QQ Browser13.1+Safari6.1+Safari on iOS7.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=calc">caniuse.com</a> as of 2024-03-07 </details> <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 = { "02bd7a8b": {"dfnID":"02bd7a8b","dfnText":"letter-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-letter-spacing"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-text-4/#propdef-letter-spacing"}, "03e2765f": {"dfnID":"03e2765f","dfnText":"block-step-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-block-step-size"},{"id":"ref-for-propdef-block-step-size\u2460"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"}],"url":"https://www.w3.org/TR/css-rhythm-1/#propdef-block-step-size"}, "04beed9b": {"dfnID":"04beed9b","dfnText":"animation-name","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-name"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"},{"refs":[{"id":"ref-for-propdef-animation-name\u2460"}],"title":"10.7.1. \nNumeric Constants: e, pi"}],"url":"https://www.w3.org/TR/css-animations-1/#propdef-animation-name"}, "051410c7": {"dfnID":"051410c7","dfnText":"border-top-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-width"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-width"}, "056b67db": {"dfnID":"056b67db","dfnText":"ease-out","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-cubic-bezier-easing-function-ease-out"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"}],"url":"https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-out"}, "064303ba": {"dfnID":"064303ba","dfnText":"border-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-width"},{"id":"ref-for-propdef-border-width\u2460"},{"id":"ref-for-propdef-border-width\u2461"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-propdef-border-width\u2462"}],"title":"2.7. \nProperty Value Examples"},{"refs":[{"id":"ref-for-propdef-border-width\u2463"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-propdef-border-width\u2464"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width"}, "0698d556": {"dfnID":"0698d556","dfnText":"string","external":true,"refSections":[{"refs":[{"id":"ref-for-string"}],"title":"4.4. \nQuoted Strings: the <string> type"},{"refs":[{"id":"ref-for-string\u2460"},{"id":"ref-for-string\u2461"},{"id":"ref-for-string\u2462"},{"id":"ref-for-string\u2463"},{"id":"ref-for-string\u2464"}],"title":"10.13. \nSerialization"}],"url":"https://infra.spec.whatwg.org/#string"}, "072f08da": {"dfnID":"072f08da","dfnText":"max-lines","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-lines"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"https://www.w3.org/TR/css-overflow-4/#propdef-max-lines"}, "087858ba": {"dfnID":"087858ba","dfnText":"supports(conditionText)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-css-supports-conditiontext"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-conditional-3/#dom-css-supports-conditiontext"}, "08b51e40": {"dfnID":"08b51e40","dfnText":"processresponseconsumebody","external":true,"refSections":[{"refs":[{"id":"ref-for-process-response-end-of-body"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#process-response-end-of-body"}, "0948355d": {"dfnID":"0948355d","dfnText":"actual value","external":true,"refSections":[{"refs":[{"id":"ref-for-actual-value"}],"title":"6. \nDistance Units: the <length> type"}],"url":"https://www.w3.org/TR/css-cascade-5/#actual-value"}, "0a9e7084": {"dfnID":"0a9e7084","dfnText":"padding-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-right"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-padding-right"}, "0c5a4350": {"dfnID":"0c5a4350","dfnText":"origin-clean flag","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-css-style-sheet-origin-clean-flag"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-origin-clean-flag"}, "0cac57ed": {"dfnID":"0cac57ed","dfnText":"percent hint","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-percent-hint"},{"id":"ref-for-cssnumericvalue-percent-hint\u2460"},{"id":"ref-for-cssnumericvalue-percent-hint\u2461"},{"id":"ref-for-cssnumericvalue-percent-hint\u2462"},{"id":"ref-for-cssnumericvalue-percent-hint\u2463"},{"id":"ref-for-cssnumericvalue-percent-hint\u2464"},{"id":"ref-for-cssnumericvalue-percent-hint\u2465"}],"title":"10.9. \nType Checking"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint"}, "102f21b5": {"dfnID":"102f21b5","dfnText":"CSSStyleSheet","external":true,"refSections":[{"refs":[{"id":"ref-for-cssstylesheet"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://www.w3.org/TR/cssom-1/#cssstylesheet"}, "11a985a9": {"dfnID":"11a985a9","dfnText":"font","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font"},{"id":"ref-for-propdef-font\u2460"},{"id":"ref-for-propdef-font\u2461"},{"id":"ref-for-propdef-font\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font"}, "16d07e10": {"dfnID":"16d07e10","dfnText":"for each","external":true,"refSections":[{"refs":[{"id":"ref-for-list-iterate"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-list-iterate\u2460"},{"id":"ref-for-list-iterate\u2461"}],"title":"10.13. \nSerialization"}],"url":"https://infra.spec.whatwg.org/#list-iterate"}, "17f0c439": {"dfnID":"17f0c439","dfnText":"<border-width>","external":true,"refSections":[{"refs":[{"id":"ref-for-value-def-border-width"}],"title":"2.1. \nComponent Value Types"}],"url":"https://www.w3.org/TR/CSS21/box.html#value-def-border-width"}, "17fe01a1": {"dfnID":"17fe01a1","dfnText":"<string-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-string-token"}],"title":"4.4. \nQuoted Strings: the <string> type"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-string-token"}, "1a2b1083": {"dfnID":"1a2b1083","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"},{"id":"ref-for-used-value\u2460"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-used-value\u2461"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-used-value\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-used-value\u2463"},{"id":"ref-for-used-value\u2464"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-used-value\u2465"},{"id":"ref-for-used-value\u2466"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-used-value\u2467"},{"id":"ref-for-used-value\u2468"},{"id":"ref-for-used-value\u2460\u24ea"}],"title":"\nAppendix A: Coordinating List-Valued Properties"}],"url":"https://www.w3.org/TR/css-cascade-5/#used-value"}, "1b5b1c0c": {"dfnID":"1b5b1c0c","dfnText":"api base url","external":true,"refSections":[{"refs":[{"id":"ref-for-api-base-url"},{"id":"ref-for-api-base-url\u2460"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url"}, "1cd7ff31": {"dfnID":"1cd7ff31","dfnText":"ShadowRoot","external":true,"refSections":[{"refs":[{"id":"ref-for-shadowroot"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://dom.spec.whatwg.org/#shadowroot"}, "1e12dba3": {"dfnID":"1e12dba3","dfnText":"animation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"}],"url":"https://www.w3.org/TR/css-animations-1/#propdef-animation"}, "1e5ca230": {"dfnID":"1e5ca230","dfnText":"text-indent","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-indent"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-text-4/#propdef-text-indent"}, "1fe10a71": {"dfnID":"1fe10a71","dfnText":"page area","external":true,"refSections":[{"refs":[{"id":"ref-for-page-area"}],"title":"6.1.2. \nViewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units"}],"url":"https://www.w3.org/TR/css-page-3/#page-area"}, "23af89d0": {"dfnID":"23af89d0","dfnText":"paged media","external":true,"refSections":[{"refs":[{"id":"ref-for-paged-media"}],"title":"6.1.2. \nViewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units"}],"url":"https://www.w3.org/TR/mediaqueries-5/#paged-media"}, "24905be8": {"dfnID":"24905be8","dfnText":"find a potential indicated element","external":true,"refSections":[{"refs":[{"id":"ref-for-find-a-potential-indicated-element"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://html.spec.whatwg.org/multipage/browsing-the-web.html#find-a-potential-indicated-element"}, "253362bb": {"dfnID":"253362bb","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-margin"}, "25538777": {"dfnID":"25538777","dfnText":"tree order","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-order"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://dom.spec.whatwg.org/#concept-tree-order"}, "267b6766": {"dfnID":"267b6766","dfnText":"component value","external":true,"refSections":[{"refs":[{"id":"ref-for-component-value"}],"title":"2.4. \nCombinator and Multiplier Patterns"},{"refs":[{"id":"ref-for-component-value\u2460"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-component-value\u2461"}],"title":"10.10. \nInternal Representation"}],"url":"https://www.w3.org/TR/css-syntax-3/#component-value"}, "291965b2": {"dfnID":"291965b2","dfnText":"center","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-text-align-center"}],"title":"2.7. \nProperty Value Examples"}],"url":"https://www.w3.org/TR/css-text-4/#valdef-text-align-center"}, "297dfe3a": {"dfnID":"297dfe3a","dfnText":"font-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-propdef-font-size\u2460"}],"title":"5.5.1. \nComputation and Combination of <percentage>"},{"refs":[{"id":"ref-for-propdef-font-size\u2461"},{"id":"ref-for-propdef-font-size\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-propdef-font-size\u2463"}],"title":"10.1. \nBasic Arithmetic: calc()"},{"refs":[{"id":"ref-for-propdef-font-size\u2464"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-propdef-font-size\u2465"},{"id":"ref-for-propdef-font-size\u2466"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-propdef-font-size\u2467"}],"title":"\nAppendix C: Quirky Lengths"},{"refs":[{"id":"ref-for-propdef-font-size\u2468"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-size"}, "29ca9f85": {"dfnID":"29ca9f85","dfnText":"border-collapse","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-collapse"}],"title":"4.1. \nPre-defined Keywords"}],"url":"https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse"}, "2b36ebcb": {"dfnID":"2b36ebcb","dfnText":"@color-profile","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-profile"}],"title":"4.3. \nPrefixed Author-defined Identifiers: the <dashed-ident> type"}],"url":"https://www.w3.org/TR/css-color-5/#at-ruledef-profile"}, "2cec4673": {"dfnID":"2cec4673","dfnText":"discrete","external":true,"refSections":[{"refs":[{"id":"ref-for-discrete"}],"title":"4. \nTextual Data Types"}],"url":"https://www.w3.org/TR/web-animations-1/#discrete"}, "2d68423f": {"dfnID":"2d68423f","dfnText":"max-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-height"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-max-height"}, "2d8be2d9": {"dfnID":"2d8be2d9","dfnText":"vertical-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-vertical-align"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-inline-3/#propdef-vertical-align"}, "2ef1aa7d": {"dfnID":"2ef1aa7d","dfnText":"toggle()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-toggle"},{"id":"ref-for-funcdef-toggle\u2460"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-values-5/#funcdef-toggle"}, "2f7ff51f": {"dfnID":"2f7ff51f","dfnText":"ease-in","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-cubic-bezier-easing-function-ease-in"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"}],"url":"https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-in"}, "2fafca4a": {"dfnID":"2fafca4a","dfnText":"match","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-match"},{"id":"ref-for-cssnumericvalue-match\u2460"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-cssnumericvalue-match\u2461"},{"id":"ref-for-cssnumericvalue-match\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-cssnumericvalue-match\u2463"}],"title":"10.10.1. \nSimplification"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match"}, "30679d85": {"dfnID":"30679d85","dfnText":"<url-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-url-token"},{"id":"ref-for-typedef-url-token\u2460"}],"title":"4.5. \nResource Locators: the <url> type"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-url-token"}, "31452ed5": {"dfnID":"31452ed5","dfnText":"transform-origin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transform-origin"}],"title":"8.3.1. \nParsing <position>"},{"refs":[{"id":"ref-for-propdef-transform-origin\u2460"}],"title":"8.3.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-transforms-1/#propdef-transform-origin"}, "358f1dbd": {"dfnID":"358f1dbd","dfnText":"referrer","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-referrer"},{"id":"ref-for-concept-request-referrer\u2460"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-referrer"}, "35bf32f2": {"dfnID":"35bf32f2","dfnText":"<image>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-image"},{"id":"ref-for-typedef-image\u2460"},{"id":"ref-for-typedef-image\u2461"},{"id":"ref-for-typedef-image\u2462"}],"title":"8.2. \nImages: the <image> type"},{"refs":[{"id":"ref-for-typedef-image\u2463"},{"id":"ref-for-typedef-image\u2464"}],"title":"8.2.1. \nCombination of <image>"}],"url":"https://www.w3.org/TR/css-images-3/#typedef-image"}, "35f596e9": {"dfnID":"35f596e9","dfnText":"vertical-lr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-lr"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr"}, "36e5f32e": {"dfnID":"36e5f32e","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"}],"title":"2.7. \nProperty Value Examples"}],"url":"https://www.w3.org/TR/css-text-3/#propdef-text-align"}, "37bb38a0": {"dfnID":"37bb38a0","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode"}, "3ae34c95": {"dfnID":"3ae34c95","dfnText":"destination","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-destination"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-destination"}, "3b7558dc": {"dfnID":"3b7558dc","dfnText":"opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-opacity"},{"id":"ref-for-propdef-opacity\u2460"},{"id":"ref-for-propdef-opacity\u2461"},{"id":"ref-for-propdef-opacity\u2462"},{"id":"ref-for-propdef-opacity\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-propdef-opacity\u2464"}],"title":"10.10.1. \nSimplification"}],"url":"https://www.w3.org/TR/css-color-4/#propdef-opacity"}, "3beec8c9": {"dfnID":"3beec8c9","dfnText":"var()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-var"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-funcdef-var\u2460"},{"id":"ref-for-funcdef-var\u2461"}],"title":"10.1. \nBasic Arithmetic: calc()"}],"url":"https://www.w3.org/TR/css-variables-1/#funcdef-var"}, "3ea2fcbb": {"dfnID":"3ea2fcbb","dfnText":"media query","external":true,"refSections":[{"refs":[{"id":"ref-for-media-query"},{"id":"ref-for-media-query\u2460"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-media-query\u2461"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-media-query\u2462"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"https://www.w3.org/TR/mediaqueries-5/#media-query"}, "3eef835e": {"dfnID":"3eef835e","dfnText":"@import","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-import"}],"title":"4.5. \nResource Locators: the <url> type"}],"url":"https://www.w3.org/TR/css-cascade-5/#at-ruledef-import"}, "43ac8374": {"dfnID":"43ac8374","dfnText":"origin","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-settings-object-origin"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin"}, "446c663e": {"dfnID":"446c663e","dfnText":"<ident-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-ident-token"}],"title":"4. \nTextual Data Types"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-ident-token"}, "44d0e8a7": {"dfnID":"44d0e8a7","dfnText":"use-url-credentials flag","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-use-url-credentials-flag"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag"}, "44e4312c": {"dfnID":"44e4312c","dfnText":"center","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-background-position-center"}],"title":"8.3.2. \nSerializing <position>"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#valdef-background-position-center"}, "47e9abf9": {"dfnID":"47e9abf9","dfnText":"border-right-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-width"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-right-width"}, "4920620f": {"dfnID":"4920620f","dfnText":"<any-value>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-any-value"}],"title":"2.6. \n\tFunctional Notation Definitions"}],"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"},{"id":"ref-for-propdef-width\u2461"},{"id":"ref-for-propdef-width\u2462"},{"id":"ref-for-propdef-width\u2463"},{"id":"ref-for-propdef-width\u2464"},{"id":"ref-for-propdef-width\u2465"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-propdef-width\u2466"}],"title":"10.1. \nBasic Arithmetic: calc()"},{"refs":[{"id":"ref-for-propdef-width\u2467"},{"id":"ref-for-propdef-width\u2468"},{"id":"ref-for-propdef-width\u2460\u24ea"},{"id":"ref-for-propdef-width\u2460\u2460"},{"id":"ref-for-propdef-width\u2460\u2461"},{"id":"ref-for-propdef-width\u2460\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-propdef-width\u2460\u2463"},{"id":"ref-for-propdef-width\u2460\u2464"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-propdef-width\u2460\u2465"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-width"}, "4a3bf5fb": {"dfnID":"4a3bf5fb","dfnText":"concatenate","external":true,"refSections":[{"refs":[{"id":"ref-for-string-concatenate"}],"title":"10.13. \nSerialization"}],"url":"https://infra.spec.whatwg.org/#string-concatenate"}, "4d38e4c5": {"dfnID":"4d38e4c5","dfnText":"text-decoration","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration"}],"title":"2.7. \nProperty Value Examples"}],"url":"https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration"}, "4ed06a81": {"dfnID":"4ed06a81","dfnText":"min-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-width"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-propdef-min-width\u2460"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-min-width"}, "4f29b6e5": {"dfnID":"4f29b6e5","dfnText":"rect()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-basic-shape-rect"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-rect"}, "4f75e4ec": {"dfnID":"4f75e4ec","dfnText":"orphans","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-orphans"}],"title":"2.7. \nProperty Value Examples"}],"url":"https://www.w3.org/TR/css-break-3/#propdef-orphans"}, "54a1fea8": {"dfnID":"54a1fea8","dfnText":"box-sizing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-sizing"}],"title":"10.1. \nBasic Arithmetic: calc()"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing"}, "55213b5b": {"dfnID":"55213b5b","dfnText":"request","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request"}, "5550667d": {"dfnID":"5550667d","dfnText":"custom property","external":true,"refSections":[{"refs":[{"id":"ref-for-custom-property"},{"id":"ref-for-custom-property\u2460"}],"title":"4.3. \nPrefixed Author-defined Identifiers: the <dashed-ident> type"}],"url":"https://www.w3.org/TR/css-variables-1/#custom-property"}, "5663abb5": {"dfnID":"5663abb5","dfnText":"image-resolution","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-image-resolution"},{"id":"ref-for-propdef-image-resolution\u2460"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"}],"url":"https://www.w3.org/TR/css-images-4/#propdef-image-resolution"}, "57699934": {"dfnID":"57699934","dfnText":"attr()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-attr"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-values-5/#funcdef-attr"}, "58404105": {"dfnID":"58404105","dfnText":"margin-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-top"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-margin-top"}, "5ad01cca": {"dfnID":"5ad01cca","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-propdef-height\u2460"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-propdef-height\u2461"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-height"}, "5bd3632a": {"dfnID":"5bd3632a","dfnText":"hsl()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-hsl"}],"title":"5.6. \nMixing Percentages and Dimensions"}],"url":"https://www.w3.org/TR/css-color-4/#funcdef-hsl"}, "5c2618b5": {"dfnID":"5c2618b5","dfnText":"<whitespace-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-whitespace-token"}],"title":"10.10. \nInternal Representation"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-whitespace-token"}, "5ced56d0": {"dfnID":"5ced56d0","dfnText":"background-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-image"}],"title":"\nAppendix A: Coordinating List-Valued Properties"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image"}, "5e7cfa4f": {"dfnID":"5e7cfa4f","dfnText":"animation-iteration-count","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-iteration-count"}],"title":"10.12. \nRange Checking"}],"url":"https://www.w3.org/TR/css-animations-1/#propdef-animation-iteration-count"}, "5fcfec98": {"dfnID":"5fcfec98","dfnText":"invert a type","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-invert-a-type"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-cssnumericvalue-invert-a-type\u2460"}],"title":"10.10.1. \nSimplification"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type"}, "65b3a7bc": {"dfnID":"65b3a7bc","dfnText":"border-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-color"}],"title":"2.1. \nComponent Value Types"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-color"}, "6b4fc208": {"dfnID":"6b4fc208","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"}],"title":"5.5. \nPercentages: the <percentage> type"}],"url":"https://www.w3.org/TR/css-display-3/#containing-block"}, "6c3d0564": {"dfnID":"6c3d0564","dfnText":"add two types","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-add-two-types"},{"id":"ref-for-cssnumericvalue-add-two-types\u2460"},{"id":"ref-for-cssnumericvalue-add-two-types\u2461"}],"title":"10.9. \nType Checking"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types"}, "6ed19243": {"dfnID":"6ed19243","dfnText":"outline-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-outline-color"}],"title":"2.7. \nProperty Value Examples"}],"url":"https://www.w3.org/TR/css-ui-4/#propdef-outline-color"}, "7066562d": {"dfnID":"7066562d","dfnText":"font-family","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-family"}],"title":"2.7. \nProperty Value Examples"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-family"}, "762bad34": {"dfnID":"762bad34","dfnText":"initial","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-initial"}],"title":"4.1.1. \nCSS-wide keywords: initial, inherit and unset"}],"url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-initial"}, "76c02e00": {"dfnID":"76c02e00","dfnText":"margin-right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-right"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-margin-right"}, "76d3715b": {"dfnID":"76d3715b","dfnText":"multiply two types","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-multiply-two-types"},{"id":"ref-for-cssnumericvalue-multiply-two-types\u2460"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-cssnumericvalue-multiply-two-types\u2461"}],"title":"10.10.1. \nSimplification"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types"}, "778f8dbd": {"dfnID":"778f8dbd","dfnText":"tree-scoped name","external":true,"refSections":[{"refs":[{"id":"ref-for-css-tree-scoped-name"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name"}, "79dcf364": {"dfnID":"79dcf364","dfnText":"animation-timing-function","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-animation-timing-function"},{"id":"ref-for-propdef-animation-timing-function\u2460"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"}],"url":"https://www.w3.org/TR/css-animations-1/#propdef-animation-timing-function"}, "7b0b4fa0": {"dfnID":"7b0b4fa0","dfnText":"initiator type","external":true,"refSections":[{"refs":[{"id":"ref-for-request-initiator-type"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#request-initiator-type"}, "7c39b465": {"dfnID":"7c39b465","dfnText":"unset","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-unset"}],"title":"4.1.1. \nCSS-wide keywords: initial, inherit and unset"}],"url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-unset"}, "7f9469b5": {"dfnID":"7f9469b5","dfnText":"ascii case-insensitive","external":true,"refSections":[{"refs":[{"id":"ref-for-ascii-case-insensitive"}],"title":"4.1. \nPre-defined Keywords"},{"refs":[{"id":"ref-for-ascii-case-insensitive\u2460"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"},{"refs":[{"id":"ref-for-ascii-case-insensitive\u2461"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-ascii-case-insensitive\u2462"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"},{"refs":[{"id":"ref-for-ascii-case-insensitive\u2463"}],"title":"7.3. \nFrequency Units: the <frequency> type and Hz, kHz units"},{"refs":[{"id":"ref-for-ascii-case-insensitive\u2464"}],"title":"9. \nFunctional Notations"},{"refs":[{"id":"ref-for-ascii-case-insensitive\u2465"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-ascii-case-insensitive\u2466"}],"title":"10.13. \nSerialization"}],"url":"https://infra.spec.whatwg.org/#ascii-case-insensitive"}, "80a12c2a": {"dfnID":"80a12c2a","dfnText":"normal","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-line-height-normal"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"https://www.w3.org/TR/css-inline-3/#valdef-line-height-normal"}, "8218676f": {"dfnID":"8218676f","dfnText":"background-attachment","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-attachment"}],"title":"2.1. \nComponent Value Types"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-attachment"}, "836161df": {"dfnID":"836161df","dfnText":"margin-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-left"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-margin-left"}, "85394472": {"dfnID":"85394472","dfnText":"Document","external":true,"refSections":[{"refs":[{"id":"ref-for-document"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://dom.spec.whatwg.org/#document"}, "857d5516": {"dfnID":"857d5516","dfnText":"client","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-client"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-client"}, "860300d4": {"dfnID":"860300d4","dfnText":"implementation-defined","external":true,"refSections":[{"refs":[{"id":"ref-for-implementation-defined"},{"id":"ref-for-implementation-defined\u2460"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-implementation-defined\u2461"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-implementation-defined\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-implementation-defined\u2463"},{"id":"ref-for-implementation-defined\u2464"}],"title":"10.4.1. \nArgument Ranges"}],"url":"https://infra.spec.whatwg.org/#implementation-defined"}, "861626b1": {"dfnID":"861626b1","dfnText":"ua","external":true,"refSections":[{"refs":[{"id":"ref-for-user-agent"}],"title":"2.3. \nComponent Value Multipliers"},{"refs":[{"id":"ref-for-user-agent\u2460"}],"title":"4.3. \nPrefixed Author-defined Identifiers: the <dashed-ident> type"},{"refs":[{"id":"ref-for-user-agent\u2461"}],"title":"4.5.1. \nRelative URLs"},{"refs":[{"id":"ref-for-user-agent\u2462"}],"title":"5.1. \nRange Restrictions and Range Definition Notation"},{"refs":[{"id":"ref-for-user-agent\u2463"},{"id":"ref-for-user-agent\u2464"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-user-agent\u2465"},{"id":"ref-for-user-agent\u2466"},{"id":"ref-for-user-agent\u2467"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"}],"url":"https://www.w3.org/TR/css-2023/#user-agent"}, "8664e85f": {"dfnID":"8664e85f","dfnText":"text-orientation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-orientation"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation"}, "87de393a": {"dfnID":"87de393a","dfnText":"<dimension-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-dimension-token"}],"title":"2.5. \nComponent Values and White Space"},{"refs":[{"id":"ref-for-typedef-dimension-token\u2460"}],"title":"5.4. \nNumbers with Units: dimension values"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-dimension-token"}, "887acc42": {"dfnID":"887acc42","dfnText":"easing function","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-easing-function\u2460"}],"title":"3.1. \nRange Checking"}],"url":"https://www.w3.org/TR/css-easing-1/#easing-function"}, "8a73a2e3": {"dfnID":"8a73a2e3","dfnText":"<percentage-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-percentage-token"}],"title":"5.5. \nPercentages: the <percentage> type"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token"}, "8b4f8a45": {"dfnID":"8b4f8a45","dfnText":"root element","external":true,"refSections":[{"refs":[{"id":"ref-for-root-element"},{"id":"ref-for-root-element\u2460"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"}],"url":"https://www.w3.org/TR/css-display-3/#root-element"}, "8c8e51b4": {"dfnID":"8c8e51b4","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"},{"id":"ref-for-computed-value\u2460"},{"id":"ref-for-computed-value\u2461"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-computed-value\u2462"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-computed-value\u2463"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-computed-value\u2464"}],"title":"5.2.1. \nComputation and Combination of <integer>"},{"refs":[{"id":"ref-for-computed-value\u2465"}],"title":"5.3.1. \nComputation and Combination of <number>"},{"refs":[{"id":"ref-for-computed-value\u2466"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-computed-value\u2467"}],"title":"5.5.1. \nComputation and Combination of <percentage>"},{"refs":[{"id":"ref-for-computed-value\u2468"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-computed-value\u2460\u24ea"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-computed-value\u2460\u2460"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-computed-value\u2460\u2461"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-computed-value\u2460\u2462"},{"id":"ref-for-computed-value\u2460\u2463"}],"title":"8.3.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-computed-value\u2460\u2464"},{"id":"ref-for-computed-value\u2460\u2465"},{"id":"ref-for-computed-value\u2460\u2466"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-computed-value\u2460\u2467"},{"id":"ref-for-computed-value\u2460\u2468"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-computed-value\u2461\u24ea"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-computed-value\u2461\u2460"}],"title":"\nAppendix A: Coordinating List-Valued Properties"},{"refs":[{"id":"ref-for-computed-value\u2461\u2461"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-cascade-5/#computed-value"}, "902380f7": {"dfnID":"902380f7","dfnText":"credentials mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-credentials-mode"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-credentials-mode"}, "915aff5e": {"dfnID":"915aff5e","dfnText":"code point","external":true,"refSections":[{"refs":[{"id":"ref-for-code-point"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://infra.spec.whatwg.org/#code-point"}, "91c016b5": {"dfnID":"91c016b5","dfnText":"identical to","external":true,"refSections":[{"refs":[{"id":"ref-for-string-is"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"}],"url":"https://infra.spec.whatwg.org/#string-is"}, "91e8e72e": {"dfnID":"91e8e72e","dfnText":"scrollbar-gutter","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scrollbar-gutter"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-propdef-scrollbar-gutter\u2460"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-overflow-3/#propdef-scrollbar-gutter"}, "96bd090d": {"dfnID":"96bd090d","dfnText":"percent-encode after encoding","external":true,"refSections":[{"refs":[{"id":"ref-for-string-percent-encode-after-encoding"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://url.spec.whatwg.org/#string-percent-encode-after-encoding"}, "980ac56a": {"dfnID":"980ac56a","dfnText":"shorthand property","external":true,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"}],"title":"\nAppendix A: Coordinating List-Valued Properties"}],"url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "9a34f8c4": {"dfnID":"9a34f8c4","dfnText":"internal representation","external":true,"refSections":[{"refs":[{"id":"ref-for-css-internal-representation"},{"id":"ref-for-css-internal-representation\u2460"},{"id":"ref-for-css-internal-representation\u2461"},{"id":"ref-for-css-internal-representation\u2462"}],"title":"10.10. \nInternal Representation"},{"refs":[{"id":"ref-for-css-internal-representation\u2463"}],"title":"10.10.1. \nSimplification"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation"}, "9c4c1e66": {"dfnID":"9c4c1e66","dfnText":"relevant settings object","external":true,"refSections":[{"refs":[{"id":"ref-for-relevant-settings-object"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object"}, "9e462db5": {"dfnID":"9e462db5","dfnText":"continuous media","external":true,"refSections":[{"refs":[{"id":"ref-for-continuous-media"}],"title":"6.1.2. \nViewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units"},{"refs":[{"id":"ref-for-continuous-media\u2460"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"https://www.w3.org/TR/mediaqueries-5/#continuous-media"}, "Hz": {"dfnID":"Hz","dfnText":"Hz","external":false,"refSections":[{"refs":[{"id":"ref-for-Hz"},{"id":"ref-for-Hz\u2460"}],"title":"7.3. \nFrequency Units: the <frequency> type and Hz, kHz units"}],"url":"#Hz"}, "Q": {"dfnID":"Q","dfnText":"Q","external":false,"refSections":[{"refs":[{"id":"ref-for-Q"},{"id":"ref-for-Q\u2460"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#Q"}, "a22cd86a": {"dfnID":"a22cd86a","dfnText":"word-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-word-spacing"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-text-4/#propdef-word-spacing"}, "a33db89a": {"dfnID":"a33db89a","dfnText":"fetch","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-fetch"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-fetch"}, "a3a070bd": {"dfnID":"a3a070bd","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-padding"}, "a5bae6ee": {"dfnID":"a5bae6ee","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-right"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-position-3/#propdef-right"}, "a5d6c9d2": {"dfnID":"a5d6c9d2","dfnText":"@supports","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-supports"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-conditional-3/#at-ruledef-supports"}, "a6331414": {"dfnID":"a6331414","dfnText":"<function-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-function-token"}],"title":"2.6. \n\tFunctional Notation Definitions"},{"refs":[{"id":"ref-for-typedef-function-token\u2460"}],"title":"9. \nFunctional Notations"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-function-token"}, "a6eb24bb": {"dfnID":"a6eb24bb","dfnText":"inline axis","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-axis"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-inline-axis\u2460"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#inline-axis"}, "a9efccbc": {"dfnID":"a9efccbc","dfnText":"disc","external":true,"refSections":[{"refs":[{"id":"ref-for-disc"}],"title":"2.1. \nComponent Value Types"}],"url":"https://www.w3.org/TR/css-counter-styles-3/#disc"}, "aaf0980c": {"dfnID":"aaf0980c","dfnText":"border-left-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-width"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-left-width"}, "absolute-length": {"dfnID":"absolute-length","dfnText":"absolute length units","external":false,"refSections":[{"refs":[{"id":"ref-for-absolute-length"},{"id":"ref-for-absolute-length\u2460"},{"id":"ref-for-absolute-length\u2461"}],"title":"6. \nDistance Units: the <length> type"}],"url":"#absolute-length"}, "ac54fbff": {"dfnID":"ac54fbff","dfnText":"line-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-line-height"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-propdef-line-height\u2460"},{"id":"ref-for-propdef-line-height\u2461"},{"id":"ref-for-propdef-line-height\u2462"},{"id":"ref-for-propdef-line-height\u2463"},{"id":"ref-for-propdef-line-height\u2464"},{"id":"ref-for-propdef-line-height\u2465"},{"id":"ref-for-propdef-line-height\u2466"},{"id":"ref-for-propdef-line-height\u2467"},{"id":"ref-for-propdef-line-height\u2468"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-propdef-line-height\u2460\u24ea"},{"id":"ref-for-propdef-line-height\u2460\u2460"},{"id":"ref-for-propdef-line-height\u2460\u2461"}],"title":"10.7.1. \nNumeric Constants: e, pi"},{"refs":[{"id":"ref-for-propdef-line-height\u2460\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-propdef-line-height\u2460\u2463"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "accumulation": {"dfnID":"accumulation","dfnText":"accumulation","external":false,"refSections":[{"refs":[{"id":"ref-for-accumulation"},{"id":"ref-for-accumulation\u2460"},{"id":"ref-for-accumulation\u2461"},{"id":"ref-for-accumulation\u2462"},{"id":"ref-for-accumulation\u2463"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-accumulation\u2464"}],"title":"\nRecent Changes"}],"url":"#accumulation"}, "add377f4": {"dfnID":"add377f4","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"},{"id":"ref-for-propdef-overflow\u2460"},{"id":"ref-for-propdef-overflow\u2461"},{"id":"ref-for-propdef-overflow\u2462"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-propdef-overflow\u2463"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-overflow-3/#propdef-overflow"}, "addition": {"dfnID":"addition","dfnText":"addition","external":false,"refSections":[{"refs":[{"id":"ref-for-addition"},{"id":"ref-for-addition\u2460"},{"id":"ref-for-addition\u2461"},{"id":"ref-for-addition\u2462"},{"id":"ref-for-addition\u2463"},{"id":"ref-for-addition\u2464"},{"id":"ref-for-addition\u2465"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-addition\u2466"}],"title":"5.2.1. \nComputation and Combination of <integer>"},{"refs":[{"id":"ref-for-addition\u2467"}],"title":"5.3.1. \nComputation and Combination of <number>"},{"refs":[{"id":"ref-for-addition\u2468"}],"title":"5.4.2. \nCombination of Dimensions"},{"refs":[{"id":"ref-for-addition\u2460\u24ea"}],"title":"5.5.1. \nComputation and Combination of <percentage>"},{"refs":[{"id":"ref-for-addition\u2460\u2460"},{"id":"ref-for-addition\u2460\u2461"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-addition\u2460\u2462"},{"id":"ref-for-addition\u2460\u2463"}],"title":"8.3.3. \nCombination of <position>"},{"refs":[{"id":"ref-for-addition\u2460\u2464"}],"title":"10.14. \nCombination of Math Functions"},{"refs":[{"id":"ref-for-addition\u2460\u2465"}],"title":"\nRecent Changes"}],"url":"#addition"}, "anchor-unit": {"dfnID":"anchor-unit","dfnText":"anchored","external":false,"refSections":[{"refs":[{"id":"ref-for-anchor-unit"},{"id":"ref-for-anchor-unit\u2460"},{"id":"ref-for-anchor-unit\u2461"},{"id":"ref-for-anchor-unit\u2462"},{"id":"ref-for-anchor-unit\u2463"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#anchor-unit"}, "angle-value": {"dfnID":"angle-value","dfnText":"<angle>","external":false,"refSections":[{"refs":[{"id":"ref-for-angle-value"},{"id":"ref-for-angle-value\u2460"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-angle-value\u2461"}],"title":"5.1. \nRange Restrictions and Range Definition Notation"},{"refs":[{"id":"ref-for-angle-value\u2462"},{"id":"ref-for-angle-value\u2463"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-angle-value\u2464"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-angle-value\u2465"},{"id":"ref-for-angle-value\u2466"},{"id":"ref-for-angle-value\u2467"},{"id":"ref-for-angle-value\u2468"},{"id":"ref-for-angle-value\u2460\u24ea"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"},{"refs":[{"id":"ref-for-angle-value\u2460\u2460"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-angle-value\u2460\u2461"},{"id":"ref-for-angle-value\u2460\u2462"},{"id":"ref-for-angle-value\u2460\u2463"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-angle-value\u2460\u2464"},{"id":"ref-for-angle-value\u2460\u2465"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-angle-value\u2460\u2466"}],"title":"\nRecent Changes"}],"url":"#angle-value"}, "b1382fd7": {"dfnID":"b1382fd7","dfnText":"<flex>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-flex"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-typedef-flex\u2460"},{"id":"ref-for-typedef-flex\u2461"}],"title":"10.9. \nType Checking"}],"url":"https://www.w3.org/TR/css-grid-2/#typedef-flex"}, "b24ce65e": {"dfnID":"b24ce65e","dfnText":"@font-face","external":true,"refSections":[{"refs":[{"id":"ref-for-at-font-face-rule"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-at-font-face-rule\u2460"}],"title":"10.13. \nSerialization"}],"url":"https://www.w3.org/TR/css-fonts-5/#at-font-face-rule"}, "b3fe0edf": {"dfnID":"b3fe0edf","dfnText":"simple block","external":true,"refSections":[{"refs":[{"id":"ref-for-simple-block"},{"id":"ref-for-simple-block\u2460"}],"title":"10.10. \nInternal Representation"}],"url":"https://www.w3.org/TR/css-syntax-3/#simple-block"}, "b4c5b3f7": {"dfnID":"b4c5b3f7","dfnText":"RequestDestination","external":true,"refSections":[{"refs":[{"id":"ref-for-requestdestination"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#requestdestination"}, "b786b3c1": {"dfnID":"b786b3c1","dfnText":"relative color","external":true,"refSections":[{"refs":[{"id":"ref-for-relative-color"}],"title":"10.7.3. \nNumeric Variables"},{"refs":[{"id":"ref-for-relative-color\u2460"}],"title":"10.8. \nSyntax"}],"url":"https://www.w3.org/TR/css-color-5/#relative-color"}, "b8dade0f": {"dfnID":"b8dade0f","dfnText":"block axis","external":true,"refSections":[{"refs":[{"id":"ref-for-block-axis"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-block-axis\u2460"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#block-axis"}, "ba64c9f5": {"dfnID":"ba64c9f5","dfnText":"margin-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin-bottom"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-margin-bottom"}, "bb899432": {"dfnID":"bb899432","dfnText":"border-bottom-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-width"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-bottom-width"}, "bearing-angle": {"dfnID":"bearing-angle","dfnText":"bearing angle","external":false,"refSections":[],"url":"#bearing-angle"}, "beb6807a": {"dfnID":"beb6807a","dfnText":"tab-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-tab-size"}],"title":"10.9. \nType Checking"}],"url":"https://www.w3.org/TR/css-text-4/#propdef-tab-size"}, "between-zero-and-b": {"dfnID":"between-zero-and-b","dfnText":"between zero and B","external":false,"refSections":[{"refs":[{"id":"ref-for-between-zero-and-b"},{"id":"ref-for-between-zero-and-b\u2460"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"}],"url":"#between-zero-and-b"}, "c20b5ff5": {"dfnID":"c20b5ff5","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-width-auto"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-valdef-width-auto\u2460"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-sizing-3/#valdef-width-auto"}, "c22cb630": {"dfnID":"c22cb630","dfnText":"padding-left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-left"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-padding-left"}, "c304f669": {"dfnID":"c304f669","dfnText":"tree-scoped reference","external":true,"refSections":[{"refs":[{"id":"ref-for-css-tree-scoped-reference"},{"id":"ref-for-css-tree-scoped-reference\u2460"},{"id":"ref-for-css-tree-scoped-reference\u2461"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference"}, "c48eaa20": {"dfnID":"c48eaa20","dfnText":"box-shadow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-shadow"}],"title":"2.7. \nProperty Value Examples"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow"}, "c51ad875": {"dfnID":"c51ad875","dfnText":"the body element","external":true,"refSections":[{"refs":[{"id":"ref-for-the-body-element-2"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"}],"url":"https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2"}, "c7d3b8b7": {"dfnID":"c7d3b8b7","dfnText":"<easing-function>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-easing-function"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"}],"url":"https://www.w3.org/TR/css-easing-1/#typedef-easing-function"}, "c7d8d91b": {"dfnID":"c7d8d91b","dfnText":"node tree","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-node-tree"},{"id":"ref-for-concept-node-tree\u2460"}],"title":"4.5.1.1. \nFragment URLs"},{"refs":[{"id":"ref-for-concept-node-tree\u2461"}],"title":"\nRecent Changes"}],"url":"https://dom.spec.whatwg.org/#concept-node-tree"}, "c847111b": {"dfnID":"c847111b","dfnText":"base","external":true,"refSections":[{"refs":[{"id":"ref-for-the-base-element"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://html.spec.whatwg.org/multipage/semantics.html#the-base-element"}, "c8473aa4": {"dfnID":"c8473aa4","dfnText":"padding-bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-bottom"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-padding-bottom"}, "c9f23acd": {"dfnID":"c9f23acd","dfnText":"stylesheet base url","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-css-style-sheet-stylesheet-base-url"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-stylesheet-base-url"}, "ca3ca4ae": {"dfnID":"ca3ca4ae","dfnText":"url parser","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-url-parser"},{"id":"ref-for-concept-url-parser\u2460"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://url.spec.whatwg.org/#concept-url-parser"}, "ca502323": {"dfnID":"ca502323","dfnText":"fr","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-flex-fr"}],"title":"5. \nNumeric Data Types"}],"url":"https://www.w3.org/TR/css-grid-2/#valdef-flex-fr"}, "calc-calculation": {"dfnID":"calc-calculation","dfnText":"calculation","external":false,"refSections":[{"refs":[{"id":"ref-for-calc-calculation"},{"id":"ref-for-calc-calculation\u2460"}],"title":"10.1. \nBasic Arithmetic: calc()"},{"refs":[{"id":"ref-for-calc-calculation\u2461"},{"id":"ref-for-calc-calculation\u2462"},{"id":"ref-for-calc-calculation\u2463"},{"id":"ref-for-calc-calculation\u2464"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-calc-calculation\u2465"},{"id":"ref-for-calc-calculation\u2466"},{"id":"ref-for-calc-calculation\u2467"},{"id":"ref-for-calc-calculation\u2468"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-calc-calculation\u2460\u24ea"},{"id":"ref-for-calc-calculation\u2460\u2460"},{"id":"ref-for-calc-calculation\u2460\u2461"},{"id":"ref-for-calc-calculation\u2460\u2462"},{"id":"ref-for-calc-calculation\u2460\u2463"},{"id":"ref-for-calc-calculation\u2460\u2464"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-calc-calculation\u2460\u2465"},{"id":"ref-for-calc-calculation\u2460\u2466"},{"id":"ref-for-calc-calculation\u2460\u2467"},{"id":"ref-for-calc-calculation\u2460\u2468"},{"id":"ref-for-calc-calculation\u2461\u24ea"},{"id":"ref-for-calc-calculation\u2461\u2460"},{"id":"ref-for-calc-calculation\u2461\u2461"},{"id":"ref-for-calc-calculation\u2461\u2462"},{"id":"ref-for-calc-calculation\u2461\u2463"},{"id":"ref-for-calc-calculation\u2461\u2464"},{"id":"ref-for-calc-calculation\u2461\u2465"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-calc-calculation\u2461\u2466"}],"title":"10.5.1. \nArgument Ranges"},{"refs":[{"id":"ref-for-calc-calculation\u2461\u2467"},{"id":"ref-for-calc-calculation\u2461\u2468"},{"id":"ref-for-calc-calculation\u2462\u24ea"}],"title":"10.6. \nSign-Related Functions: abs(), sign()"},{"refs":[{"id":"ref-for-calc-calculation\u2462\u2460"}],"title":"10.7. \nNumeric Keywords"},{"refs":[{"id":"ref-for-calc-calculation\u2462\u2461"},{"id":"ref-for-calc-calculation\u2462\u2462"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-calc-calculation\u2462\u2463"}],"title":"10.7.3. \nNumeric Variables"},{"refs":[{"id":"ref-for-calc-calculation\u2462\u2464"},{"id":"ref-for-calc-calculation\u2462\u2465"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-calc-calculation\u2462\u2466"},{"id":"ref-for-calc-calculation\u2462\u2467"},{"id":"ref-for-calc-calculation\u2462\u2468"},{"id":"ref-for-calc-calculation\u2463\u24ea"},{"id":"ref-for-calc-calculation\u2463\u2460"},{"id":"ref-for-calc-calculation\u2463\u2461"},{"id":"ref-for-calc-calculation\u2463\u2462"},{"id":"ref-for-calc-calculation\u2463\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-calc-calculation\u2463\u2464"},{"id":"ref-for-calc-calculation\u2463\u2465"}],"title":"10.10. \nInternal Representation"},{"refs":[{"id":"ref-for-calc-calculation\u2463\u2466"},{"id":"ref-for-calc-calculation\u2463\u2467"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-calc-calculation\u2463\u2468"}],"title":"10.13. \nSerialization"}],"url":"#calc-calculation"}, "calculation-tree": {"dfnID":"calculation-tree","dfnText":"calculation tree","external":false,"refSections":[{"refs":[{"id":"ref-for-calculation-tree"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"},{"refs":[{"id":"ref-for-calculation-tree\u2460"},{"id":"ref-for-calculation-tree\u2461"}],"title":"10.10. \nInternal Representation"},{"refs":[{"id":"ref-for-calculation-tree\u2462"},{"id":"ref-for-calculation-tree\u2463"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-calculation-tree\u2464"},{"id":"ref-for-calculation-tree\u2465"},{"id":"ref-for-calculation-tree\u2466"}],"title":"10.13. \nSerialization"}],"url":"#calculation-tree"}, "calculation-tree-calc-operator-nodes": {"dfnID":"calculation-tree-calc-operator-nodes","dfnText":"calc-operator nodes","external":false,"refSections":[{"refs":[{"id":"ref-for-calculation-tree-calc-operator-nodes"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-calculation-tree-calc-operator-nodes\u2460"}],"title":"10.13. \nSerialization"}],"url":"#calculation-tree-calc-operator-nodes"}, "calculation-tree-operator-nodes": {"dfnID":"calculation-tree-operator-nodes","dfnText":"operator nodes","external":false,"refSections":[{"refs":[{"id":"ref-for-calculation-tree-operator-nodes"}],"title":"10.10. \nInternal Representation"},{"refs":[{"id":"ref-for-calculation-tree-operator-nodes\u2460"},{"id":"ref-for-calculation-tree-operator-nodes\u2461"}],"title":"10.10.1. \nSimplification"}],"url":"#calculation-tree-operator-nodes"}, "canonical-unit": {"dfnID":"canonical-unit","dfnText":"canonical unit","external":false,"refSections":[{"refs":[{"id":"ref-for-canonical-unit"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-canonical-unit\u2460"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-canonical-unit\u2461"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-canonical-unit\u2462"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"},{"refs":[{"id":"ref-for-canonical-unit\u2463"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"},{"refs":[{"id":"ref-for-canonical-unit\u2464"}],"title":"7.2. \nDuration Units: the <time> type and s, ms units"},{"refs":[{"id":"ref-for-canonical-unit\u2465"}],"title":"7.3. \nFrequency Units: the <frequency> type and Hz, kHz units"},{"refs":[{"id":"ref-for-canonical-unit\u2466"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"},{"refs":[{"id":"ref-for-canonical-unit\u2467"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-canonical-unit\u2468"},{"id":"ref-for-canonical-unit\u2460\u24ea"},{"id":"ref-for-canonical-unit\u2460\u2460"},{"id":"ref-for-canonical-unit\u2460\u2461"},{"id":"ref-for-canonical-unit\u2460\u2462"},{"id":"ref-for-canonical-unit\u2460\u2463"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-canonical-unit\u2460\u2464"}],"title":"10.13. \nSerialization"}],"url":"#canonical-unit"}, "cap": {"dfnID":"cap","dfnText":"cap","external":false,"refSections":[{"refs":[{"id":"ref-for-cap"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-cap\u2460"},{"id":"ref-for-cap\u2461"},{"id":"ref-for-cap\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-cap\u2463"}],"title":"\nAdditions Since Level 3"}],"url":"#cap"}, "cb98f71f": {"dfnID":"cb98f71f","dfnText":"mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-mode"},{"id":"ref-for-concept-request-mode\u2460"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-mode"}, "cdce34f5": {"dfnID":"cdce34f5","dfnText":"consume a url token","external":true,"refSections":[{"refs":[{"id":"ref-for-consume-a-url-token"}],"title":"4.5. \nResource Locators: the <url> type"}],"url":"https://www.w3.org/TR/css-syntax-3/#consume-a-url-token"}, "ceb4e9b9": {"dfnID":"ceb4e9b9","dfnText":"mix()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-mix"},{"id":"ref-for-funcdef-mix\u2460"},{"id":"ref-for-funcdef-mix\u2461"},{"id":"ref-for-funcdef-mix\u2462"},{"id":"ref-for-funcdef-mix\u2463"},{"id":"ref-for-funcdef-mix\u2464"}],"title":"\nRecent Changes"}],"url":"https://drafts.csswg.org/css-values-5/#funcdef-mix"}, "cec0d4db": {"dfnID":"cec0d4db","dfnText":"upright","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-text-orientation-upright"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright"}, "ch": {"dfnID":"ch","dfnText":"ch","external":false,"refSections":[{"refs":[{"id":"ref-for-ch"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-ch\u2460"},{"id":"ref-for-ch\u2461"},{"id":"ref-for-ch\u2462"},{"id":"ref-for-ch\u2463"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"#ch"}, "cm": {"dfnID":"cm","dfnText":"cm","external":false,"refSections":[{"refs":[{"id":"ref-for-cm"},{"id":"ref-for-cm\u2460"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"},{"refs":[{"id":"ref-for-cm\u2461"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"}],"url":"#cm"}, "comb-all": {"dfnID":"comb-all","dfnText":"&&","external":false,"refSections":[{"refs":[{"id":"ref-for-comb-all"},{"id":"ref-for-comb-all\u2460"}],"title":"8.3. \n2D Positioning: the <position> type"}],"url":"#comb-all"}, "comb-any": {"dfnID":"comb-any","dfnText":"||","external":false,"refSections":[],"url":"#comb-any"}, "comb-comma": {"dfnID":"comb-comma","dfnText":"Commas","external":false,"refSections":[{"refs":[{"id":"ref-for-comb-comma"},{"id":"ref-for-comb-comma\u2460"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-comb-comma\u2461"}],"title":"2.6. \n\tFunctional Notation Definitions"},{"refs":[{"id":"ref-for-comb-comma\u2462"},{"id":"ref-for-comb-comma\u2463"},{"id":"ref-for-comb-comma\u2464"},{"id":"ref-for-comb-comma\u2465"},{"id":"ref-for-comb-comma\u2466"},{"id":"ref-for-comb-comma\u2467"},{"id":"ref-for-comb-comma\u2468"},{"id":"ref-for-comb-comma\u2460\u24ea"},{"id":"ref-for-comb-comma\u2460\u2460"}],"title":"10.8. \nSyntax"}],"url":"#comb-comma"}, "comb-one": {"dfnID":"comb-one","dfnText":"|","external":false,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"2.6. \n\tFunctional Notation Definitions"},{"refs":[{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"}],"title":"2.8. \nNon-Terminal Definitions and Grammar Production Blocks"},{"refs":[{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"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":"5.6. \nMixing Percentages and Dimensions"},{"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"},{"id":"ref-for-comb-one\u2461\u2466"},{"id":"ref-for-comb-one\u2461\u2467"}],"title":"8.3. \n2D Positioning: the <position> type"},{"refs":[{"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"},{"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"}],"title":"10.8. \nSyntax"}],"url":"#comb-one"}, "combine": {"dfnID":"combine","dfnText":"combine","external":false,"refSections":[],"url":"#combine"}, "compatible-units": {"dfnID":"compatible-units","dfnText":"compatible units","external":false,"refSections":[{"refs":[{"id":"ref-for-compatible-units"},{"id":"ref-for-compatible-units\u2460"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-compatible-units\u2461"},{"id":"ref-for-compatible-units\u2462"}],"title":"5.4.2. \nCombination of Dimensions"},{"refs":[{"id":"ref-for-compatible-units\u2463"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-compatible-units\u2464"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"},{"refs":[{"id":"ref-for-compatible-units\u2465"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"},{"refs":[{"id":"ref-for-compatible-units\u2466"}],"title":"7.2. \nDuration Units: the <time> type and s, ms units"},{"refs":[{"id":"ref-for-compatible-units\u2467"}],"title":"7.3. \nFrequency Units: the <frequency> type and Hz, kHz units"},{"refs":[{"id":"ref-for-compatible-units\u2468"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"}],"url":"#compatible-units"}, "computed-length": {"dfnID":"computed-length","dfnText":"computed length","external":false,"refSections":[],"url":"#computed-length"}, "coordinated-value-list": {"dfnID":"coordinated-value-list","dfnText":"coordinated value list","external":false,"refSections":[{"refs":[{"id":"ref-for-coordinated-value-list"},{"id":"ref-for-coordinated-value-list\u2460"},{"id":"ref-for-coordinated-value-list\u2461"}],"title":"\nAppendix A: Coordinating List-Valued Properties"}],"url":"#coordinated-value-list"}, "coordinating-list-base-property": {"dfnID":"coordinating-list-base-property","dfnText":"coordinating list base property","external":false,"refSections":[],"url":"#coordinating-list-base-property"}, "coordinating-list-property": {"dfnID":"coordinating-list-property","dfnText":"coordinating list property group","external":false,"refSections":[{"refs":[{"id":"ref-for-coordinating-list-property"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-coordinating-list-property\u2460"},{"id":"ref-for-coordinating-list-property\u2461"},{"id":"ref-for-coordinating-list-property\u2462"},{"id":"ref-for-coordinating-list-property\u2463"},{"id":"ref-for-coordinating-list-property\u2464"}],"title":"\nAppendix A: Coordinating List-Valued Properties"},{"refs":[{"id":"ref-for-coordinating-list-property\u2465"}],"title":"\nAdditions Since Level 3"}],"url":"#coordinating-list-property"}, "css-bracketed-range-notation": {"dfnID":"css-bracketed-range-notation","dfnText":"CSS bracketed range notation","external":false,"refSections":[{"refs":[{"id":"ref-for-css-bracketed-range-notation"},{"id":"ref-for-css-bracketed-range-notation\u2460"}],"title":"5.1. \nRange Restrictions and Range Definition Notation"}],"url":"#css-bracketed-range-notation"}, "css-consistent-type": {"dfnID":"css-consistent-type","dfnText":"consistent type","external":false,"refSections":[{"refs":[{"id":"ref-for-css-consistent-type"},{"id":"ref-for-css-consistent-type\u2460"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-css-consistent-type\u2461"},{"id":"ref-for-css-consistent-type\u2462"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-css-consistent-type\u2463"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-css-consistent-type\u2464"},{"id":"ref-for-css-consistent-type\u2465"},{"id":"ref-for-css-consistent-type\u2466"},{"id":"ref-for-css-consistent-type\u2467"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-css-consistent-type\u2468"}],"title":"10.9. \nType Checking"}],"url":"#css-consistent-type"}, "css-contain-a-percentage": {"dfnID":"css-contain-a-percentage","dfnText":"contains a percentage","external":false,"refSections":[],"url":"#css-contain-a-percentage"}, "css-css-identifier": {"dfnID":"css-css-identifier","dfnText":"identifiers","external":false,"refSections":[{"refs":[{"id":"ref-for-css-css-identifier"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-css-css-identifier\u2460"}],"title":"4.1. \nPre-defined Keywords"},{"refs":[{"id":"ref-for-css-css-identifier\u2461"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"},{"refs":[{"id":"ref-for-css-css-identifier\u2462"}],"title":"5.4. \nNumbers with Units: dimension values"}],"url":"#css-css-identifier"}, "css-grammar-production-block": {"dfnID":"css-grammar-production-block","dfnText":"CSS grammar production block","external":false,"refSections":[{"refs":[{"id":"ref-for-css-grammar-production-block"}],"title":"\nRecent Changes"}],"url":"#css-grammar-production-block"}, "css-infinity": {"dfnID":"css-infinity","dfnText":"Infinities","external":false,"refSections":[{"refs":[{"id":"ref-for-css-infinity"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-css-infinity\u2460"},{"id":"ref-for-css-infinity\u2461"},{"id":"ref-for-css-infinity\u2462"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"}],"url":"#css-infinity"}, "css-keyword": {"dfnID":"css-keyword","dfnText":"keywords","external":false,"refSections":[],"url":"#css-keyword"}, "css-make-a-type-consistent": {"dfnID":"css-make-a-type-consistent","dfnText":"make a type base consistent","external":false,"refSections":[{"refs":[{"id":"ref-for-css-make-a-type-consistent"},{"id":"ref-for-css-make-a-type-consistent\u2460"},{"id":"ref-for-css-make-a-type-consistent\u2461"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-css-make-a-type-consistent\u2462"},{"id":"ref-for-css-make-a-type-consistent\u2463"},{"id":"ref-for-css-make-a-type-consistent\u2464"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-css-make-a-type-consistent\u2465"}],"title":"10.6. \nSign-Related Functions: abs(), sign()"}],"url":"#css-make-a-type-consistent"}, "css-nan": {"dfnID":"css-nan","dfnText":"NaN","external":false,"refSections":[{"refs":[{"id":"ref-for-css-nan"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-css-nan\u2460"},{"id":"ref-for-css-nan\u2461"},{"id":"ref-for-css-nan\u2462"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"}],"url":"#css-nan"}, "css-round-to-the-nearest-integer": {"dfnID":"css-round-to-the-nearest-integer","dfnText":"rounding to the nearest integer","external":false,"refSections":[{"refs":[{"id":"ref-for-css-round-to-the-nearest-integer"}],"title":"5.2.1. \nComputation and Combination of <integer>"},{"refs":[{"id":"ref-for-css-round-to-the-nearest-integer\u2460"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-css-round-to-the-nearest-integer\u2461"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-css-round-to-the-nearest-integer\u2462"}],"title":"10.12. \nRange Checking"}],"url":"#css-round-to-the-nearest-integer"}, "css-signed-zero": {"dfnID":"css-signed-zero","dfnText":"Signed zeros","external":false,"refSections":[{"refs":[{"id":"ref-for-css-signed-zero"},{"id":"ref-for-css-signed-zero\u2460"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"}],"url":"#css-signed-zero"}, "css-textual-data-types": {"dfnID":"css-textual-data-types","dfnText":"textual data types","external":false,"refSections":[],"url":"#css-textual-data-types"}, "css-value-definition-syntax": {"dfnID":"css-value-definition-syntax","dfnText":"value definition syntax","external":false,"refSections":[{"refs":[{"id":"ref-for-css-value-definition-syntax"}],"title":"2.6. \n\tFunctional Notation Definitions"},{"refs":[{"id":"ref-for-css-value-definition-syntax\u2460"},{"id":"ref-for-css-value-definition-syntax\u2461"}],"title":"2.8. \nNon-Terminal Definitions and Grammar Production Blocks"}],"url":"#css-value-definition-syntax"}, "css-wide-keywords": {"dfnID":"css-wide-keywords","dfnText":"CSS-wide keywords","external":false,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"}],"url":"#css-wide-keywords"}, "d04b6986": {"dfnID":"d04b6986","dfnText":"<color>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-color"},{"id":"ref-for-typedef-color\u2460"},{"id":"ref-for-typedef-color\u2461"}],"title":"8.1. \nColors: the <color> type"},{"refs":[{"id":"ref-for-typedef-color\u2462"},{"id":"ref-for-typedef-color\u2463"},{"id":"ref-for-typedef-color\u2464"},{"id":"ref-for-typedef-color\u2465"},{"id":"ref-for-typedef-color\u2466"}],"title":"8.1.1. \nCombination of <color>"},{"refs":[{"id":"ref-for-typedef-color\u2467"}],"title":"9. \nFunctional Notations"}],"url":"https://www.w3.org/TR/css-color-5/#typedef-color"}, "d0dc95c3": {"dfnID":"d0dc95c3","dfnText":"inherit","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-all-inherit"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-valdef-all-inherit\u2460"}],"title":"4.1.1. \nCSS-wide keywords: initial, inherit and unset"}],"url":"https://www.w3.org/TR/css-cascade-5/#valdef-all-inherit"}, "d321b0e7": {"dfnID":"d321b0e7","dfnText":"location","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-css-style-sheet-location"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-location"}, "d5e08d9c": {"dfnID":"d5e08d9c","dfnText":"specified value","external":true,"refSections":[{"refs":[{"id":"ref-for-specified-value"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-specified-value\u2460"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-specified-value\u2461"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-specified-value\u2462"}],"title":"8.3.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-specified-value\u2463"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-specified-value\u2464"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-specified-value\u2465"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-specified-value\u2466"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-cascade-5/#specified-value"}, "d7d4206f": {"dfnID":"d7d4206f","dfnText":"type","external":true,"refSections":[{"refs":[{"id":"ref-for-cssnumericvalue-type"},{"id":"ref-for-cssnumericvalue-type\u2460"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-cssnumericvalue-type\u2461"},{"id":"ref-for-cssnumericvalue-type\u2462"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-cssnumericvalue-type\u2463"}],"title":"10.6. \nSign-Related Functions: abs(), sign()"},{"refs":[{"id":"ref-for-cssnumericvalue-type\u2464"},{"id":"ref-for-cssnumericvalue-type\u2465"},{"id":"ref-for-cssnumericvalue-type\u2466"},{"id":"ref-for-cssnumericvalue-type\u2467"},{"id":"ref-for-cssnumericvalue-type\u2468"},{"id":"ref-for-cssnumericvalue-type\u2460\u24ea"},{"id":"ref-for-cssnumericvalue-type\u2460\u2460"},{"id":"ref-for-cssnumericvalue-type\u2460\u2461"},{"id":"ref-for-cssnumericvalue-type\u2460\u2462"},{"id":"ref-for-cssnumericvalue-type\u2460\u2463"},{"id":"ref-for-cssnumericvalue-type\u2460\u2464"},{"id":"ref-for-cssnumericvalue-type\u2460\u2465"},{"id":"ref-for-cssnumericvalue-type\u2460\u2466"},{"id":"ref-for-cssnumericvalue-type\u2460\u2467"},{"id":"ref-for-cssnumericvalue-type\u2460\u2468"},{"id":"ref-for-cssnumericvalue-type\u2461\u24ea"},{"id":"ref-for-cssnumericvalue-type\u2461\u2460"},{"id":"ref-for-cssnumericvalue-type\u2461\u2461"},{"id":"ref-for-cssnumericvalue-type\u2461\u2462"},{"id":"ref-for-cssnumericvalue-type\u2461\u2463"},{"id":"ref-for-cssnumericvalue-type\u2461\u2464"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-cssnumericvalue-type\u2461\u2465"},{"id":"ref-for-cssnumericvalue-type\u2461\u2466"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-cssnumericvalue-type\u2461\u2467"}],"title":"\nRecent Changes"}],"url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type"}, "db6870d5": {"dfnID":"db6870d5","dfnText":"background","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-propdef-background\u2460"}],"title":"\nAppendix C: Quirky Lengths"},{"refs":[{"id":"ref-for-propdef-background\u2461"}],"title":"\nAdditions Since Level 3"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background"}, "dc1cd39b": {"dfnID":"dc1cd39b","dfnText":"url","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-url"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-url"}, "dcb1125e": {"dfnID":"dcb1125e","dfnText":"linear-gradient()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-linear-gradient"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"}],"url":"https://www.w3.org/TR/css-images-4/#funcdef-linear-gradient"}, "dcffbccd": {"dfnID":"dcffbccd","dfnText":"url","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-url"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-concept-url\u2460"},{"id":"ref-for-concept-url\u2461"},{"id":"ref-for-concept-url\u2462"},{"id":"ref-for-concept-url\u2463"},{"id":"ref-for-concept-url\u2464"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://url.spec.whatwg.org/#concept-url"}, "default-viewport-percentage-units": {"dfnID":"default-viewport-percentage-units","dfnText":"default viewport-percentage units","external":false,"refSections":[{"refs":[{"id":"ref-for-default-viewport-percentage-units"}],"title":"\nRecent Changes"}],"url":"#default-viewport-percentage-units"}, "deg": {"dfnID":"deg","dfnText":"deg","external":false,"refSections":[{"refs":[{"id":"ref-for-deg"},{"id":"ref-for-deg\u2460"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"}],"url":"#deg"}, "degenerate-ratio": {"dfnID":"degenerate-ratio","dfnText":"degenerate ratio","external":false,"refSections":[{"refs":[{"id":"ref-for-degenerate-ratio"}],"title":"5.7.1. \nCombination of <ratio>"}],"url":"#degenerate-ratio"}, "determine-the-type-of-a-calculation": {"dfnID":"determine-the-type-of-a-calculation","dfnText":"determine the type of a calculation","external":false,"refSections":[{"refs":[{"id":"ref-for-determine-the-type-of-a-calculation"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-determine-the-type-of-a-calculation\u2460"}],"title":"10.7. \nNumeric Keywords"},{"refs":[{"id":"ref-for-determine-the-type-of-a-calculation\u2461"}],"title":"10.7.3. \nNumeric Variables"}],"url":"#determine-the-type-of-a-calculation"}, "device-pixel": {"dfnID":"device-pixel","dfnText":"device pixel","external":false,"refSections":[{"refs":[{"id":"ref-for-device-pixel"},{"id":"ref-for-device-pixel\u2460"},{"id":"ref-for-device-pixel\u2461"},{"id":"ref-for-device-pixel\u2462"},{"id":"ref-for-device-pixel\u2463"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-device-pixel\u2464"},{"id":"ref-for-device-pixel\u2465"},{"id":"ref-for-device-pixel\u2466"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#device-pixel"}, "dimension": {"dfnID":"dimension","dfnText":"dimension","external":false,"refSections":[{"refs":[{"id":"ref-for-dimension"},{"id":"ref-for-dimension\u2460"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-dimension\u2461"},{"id":"ref-for-dimension\u2462"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-dimension\u2463"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-dimension\u2464"},{"id":"ref-for-dimension\u2465"}],"title":"5.4.2. \nCombination of Dimensions"},{"refs":[{"id":"ref-for-dimension\u2466"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-dimension\u2467"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-dimension\u2468"}],"title":"7.2. \nDuration Units: the <time> type and s, ms units"},{"refs":[{"id":"ref-for-dimension\u2460\u24ea"}],"title":"7.3. \nFrequency Units: the <frequency> type and Hz, kHz units"},{"refs":[{"id":"ref-for-dimension\u2460\u2460"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"},{"refs":[{"id":"ref-for-dimension\u2460\u2461"}],"title":"\nAdditions Since Level 3"}],"url":"#dimension"}, "dpcm": {"dfnID":"dpcm","dfnText":"dpcm","external":false,"refSections":[{"refs":[{"id":"ref-for-dpcm"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"}],"url":"#dpcm"}, "dpi": {"dfnID":"dpi","dfnText":"dpi","external":false,"refSections":[{"refs":[{"id":"ref-for-dpi"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"}],"url":"#dpi"}, "dppx": {"dfnID":"dppx","dfnText":"dppx","external":false,"refSections":[{"refs":[{"id":"ref-for-dppx"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"},{"refs":[{"id":"ref-for-dppx\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#dppx"}, "dvb": {"dfnID":"dvb","dfnText":"dvb","external":false,"refSections":[{"refs":[{"id":"ref-for-dvb"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-dvb\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#dvb"}, "dvh": {"dfnID":"dvh","dfnText":"dvh","external":false,"refSections":[{"refs":[{"id":"ref-for-dvh"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-dvh\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#dvh"}, "dvi": {"dfnID":"dvi","dfnText":"dvi","external":false,"refSections":[{"refs":[{"id":"ref-for-dvi"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-dvi\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#dvi"}, "dvmax": {"dfnID":"dvmax","dfnText":"dvmax","external":false,"refSections":[{"refs":[{"id":"ref-for-dvmax"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-dvmax\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#dvmax"}, "dvmin": {"dfnID":"dvmin","dfnText":"dvmin","external":false,"refSections":[{"refs":[{"id":"ref-for-dvmin"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-dvmin\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#dvmin"}, "dvw": {"dfnID":"dvw","dfnText":"dvw","external":false,"refSections":[{"refs":[{"id":"ref-for-dvw"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-dvw\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#dvw"}, "dynamic-viewport-percentage-units": {"dfnID":"dynamic-viewport-percentage-units","dfnText":"dynamic viewport-percentage units","external":false,"refSections":[{"refs":[{"id":"ref-for-dynamic-viewport-percentage-units"},{"id":"ref-for-dynamic-viewport-percentage-units\u2460"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-dynamic-viewport-percentage-units\u2461"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-dynamic-viewport-percentage-units\u2462"}],"title":"\nAdditions Since Level 3"}],"url":"#dynamic-viewport-percentage-units"}, "dynamic-viewport-size": {"dfnID":"dynamic-viewport-size","dfnText":"dynamic viewport size","external":false,"refSections":[{"refs":[{"id":"ref-for-dynamic-viewport-size"},{"id":"ref-for-dynamic-viewport-size\u2460"},{"id":"ref-for-dynamic-viewport-size\u2461"},{"id":"ref-for-dynamic-viewport-size\u2462"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"#dynamic-viewport-size"}, "e26aa9bf": {"dfnID":"e26aa9bf","dfnText":"initial containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-containing-block"},{"id":"ref-for-initial-containing-block\u2460"},{"id":"ref-for-initial-containing-block\u2461"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-initial-containing-block\u2462"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"},{"refs":[{"id":"ref-for-initial-containing-block\u2463"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-display-3/#initial-containing-block"}, "e444e13f": {"dfnID":"e444e13f","dfnText":"timing function","external":true,"refSections":[{"refs":[{"id":"ref-for-easing-function"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-easing-function\u2460"}],"title":"3.1. \nRange Checking"}],"url":"https://www.w3.org/TR/css-easing-1/#easing-function"}, "e97d95b6": {"dfnID":"e97d95b6","dfnText":"clip","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-clip"},{"id":"ref-for-propdef-clip\u2460"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-masking-1/#propdef-clip"}, "eb6008ce": {"dfnID":"eb6008ce","dfnText":"writing mode","external":true,"refSections":[{"refs":[{"id":"ref-for-writing-mode"}],"title":"\nRecent Changes"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#writing-mode"}, "ebcbc56d": {"dfnID":"ebcbc56d","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-left"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-position-3/#propdef-left"}, "ed948033": {"dfnID":"ed948033","dfnText":"fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-url-fragment"},{"id":"ref-for-concept-url-fragment\u2460"}],"title":"4.5.1.1. \nFragment URLs"}],"url":"https://url.spec.whatwg.org/#concept-url-fragment"}, "ee74cde8": {"dfnID":"ee74cde8","dfnText":"font-size","external":true,"refSections":[{"refs":[{"id":"ref-for-descdef-font-face-font-size"}],"title":"10.1. \nBasic Arithmetic: calc()"}],"url":"https://www.w3.org/TR/css-fonts-5/#descdef-font-face-font-size"}, "ee7bba09": {"dfnID":"ee7bba09","dfnText":"response","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-response"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-response"}, "ee88ce59": {"dfnID":"ee88ce59","dfnText":"vertical-rl","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-writing-mode-vertical-rl"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-rl"}, "eebbfe3d": {"dfnID":"eebbfe3d","dfnText":"<number-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-number-token"}],"title":"5.2. \nIntegers: the <integer> type"},{"refs":[{"id":"ref-for-typedef-number-token\u2460"},{"id":"ref-for-typedef-number-token\u2461"}],"title":"5.3. \nReal Numbers: the <number> type"},{"refs":[{"id":"ref-for-typedef-number-token\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-typedef-number-token\u2463"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-number-token"}, "em": {"dfnID":"em","dfnText":"em","external":false,"refSections":[{"refs":[{"id":"ref-for-em"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-em\u2460"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-em\u2461"},{"id":"ref-for-em\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-em\u2463"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-em\u2464"}],"title":"10.13. \nSerialization"}],"url":"#em"}, "ex": {"dfnID":"ex","dfnText":"ex","external":false,"refSections":[{"refs":[{"id":"ref-for-ex"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-ex\u2460"},{"id":"ref-for-ex\u2461"},{"id":"ref-for-ex\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"#ex"}, "f12a84ab": {"dfnID":"f12a84ab","dfnText":"min-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-height"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-min-height"}, "f2249e38": {"dfnID":"f2249e38","dfnText":"background-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-position"},{"id":"ref-for-propdef-background-position\u2460"}],"title":"8.3. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-propdef-background-position\u2461"}],"title":"10.6. \nSign-Related Functions: abs(), sign()"},{"refs":[{"id":"ref-for-propdef-background-position\u2462"},{"id":"ref-for-propdef-background-position\u2463"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-propdef-background-position\u2464"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position"}, "f3226176": {"dfnID":"f3226176","dfnText":"rgba()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-rgba"}],"title":"9. \nFunctional Notations"}],"url":"https://www.w3.org/TR/css-color-4/#funcdef-rgba"}, "f4066072": {"dfnID":"f4066072","dfnText":"max-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-width"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-sizing-3/#propdef-max-width"}, "f411d42d": {"dfnID":"f411d42d","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-bottom"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-position-3/#propdef-bottom"}, "f72f0a02": {"dfnID":"f72f0a02","dfnText":"padding-top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding-top"}],"title":"2.7. \nProperty Value Examples"},{"refs":[{"id":"ref-for-propdef-padding-top\u2460"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-box-4/#propdef-padding-top"}, "f78d5b5c": {"dfnID":"f78d5b5c","dfnText":"origin","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-request-origin"}],"title":"4.5.4. \nURL Processing Model"}],"url":"https://fetch.spec.whatwg.org/#concept-request-origin"}, "f9309bf7": {"dfnID":"f9309bf7","dfnText":"<delim-token>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-delim-token"}],"title":"10.10. \nInternal Representation"}],"url":"https://www.w3.org/TR/css-syntax-3/#typedef-delim-token"}, "f99d4ae2": {"dfnID":"f99d4ae2","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-top"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/css-position-3/#propdef-top"}, "fa522ba4": {"dfnID":"fa522ba4","dfnText":"whitespace","external":true,"refSections":[{"refs":[{"id":"ref-for-whitespace"}],"title":"10.8. \nSyntax"}],"url":"https://www.w3.org/TR/css-syntax-3/#whitespace"}, "fd11cdcd": {"dfnID":"fd11cdcd","dfnText":"quirks mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document-quirks"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "fe0abd77": {"dfnID":"fe0abd77","dfnText":"border-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-spacing"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"https://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing"}, "fetch-a-style-resource": {"dfnID":"fetch-a-style-resource","dfnText":"fetch a style resource","external":false,"refSections":[],"url":"#fetch-a-style-resource"}, "font-relative-length": {"dfnID":"font-relative-length","dfnText":"font-relative lengths","external":false,"refSections":[{"refs":[{"id":"ref-for-font-relative-length"},{"id":"ref-for-font-relative-length\u2460"},{"id":"ref-for-font-relative-length\u2461"},{"id":"ref-for-font-relative-length\u2462"},{"id":"ref-for-font-relative-length\u2463"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-font-relative-length\u2464"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-font-relative-length\u2465"},{"id":"ref-for-font-relative-length\u2466"},{"id":"ref-for-font-relative-length\u2467"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-font-relative-length\u2468"}],"title":"\nPrivacy Considerations"}],"url":"#font-relative-length"}, "frequency-value": {"dfnID":"frequency-value","dfnText":"<frequency>","external":false,"refSections":[{"refs":[{"id":"ref-for-frequency-value"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-frequency-value\u2460"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-frequency-value\u2461"},{"id":"ref-for-frequency-value\u2462"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-frequency-value\u2463"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-frequency-value\u2464"},{"id":"ref-for-frequency-value\u2465"}],"title":"7.3. \nFrequency Units: the <frequency> type and Hz, kHz units"},{"refs":[{"id":"ref-for-frequency-value\u2466"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-frequency-value\u2467"},{"id":"ref-for-frequency-value\u2468"}],"title":"10.9. \nType Checking"}],"url":"#frequency-value"}, "funcdef-abs": {"dfnID":"funcdef-abs","dfnText":"abs(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-abs"},{"id":"ref-for-funcdef-abs\u2460"}],"title":"10.6. \nSign-Related Functions: abs(), sign()"},{"refs":[{"id":"ref-for-funcdef-abs\u2461"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-abs\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-abs\u2463"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-abs"}, "funcdef-acos": {"dfnID":"funcdef-acos","dfnText":"acos(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-acos"},{"id":"ref-for-funcdef-acos\u2460"},{"id":"ref-for-funcdef-acos\u2461"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-funcdef-acos\u2462"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-acos\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-acos\u2464"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-acos"}, "funcdef-asin": {"dfnID":"funcdef-asin","dfnText":"asin(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-asin"},{"id":"ref-for-funcdef-asin\u2460"},{"id":"ref-for-funcdef-asin\u2461"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-funcdef-asin\u2462"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-asin\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-asin\u2464"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-asin"}, "funcdef-atan": {"dfnID":"funcdef-atan","dfnText":"atan(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-atan"},{"id":"ref-for-funcdef-atan\u2460"},{"id":"ref-for-funcdef-atan\u2461"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-funcdef-atan\u2462"},{"id":"ref-for-funcdef-atan\u2463"}],"title":"10.4.1. \nArgument Ranges"},{"refs":[{"id":"ref-for-funcdef-atan\u2464"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-atan\u2465"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-atan\u2466"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-atan"}, "funcdef-atan2": {"dfnID":"funcdef-atan2","dfnText":"atan2(A, B)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-atan2"},{"id":"ref-for-funcdef-atan2\u2460"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-funcdef-atan2\u2461"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-atan2\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-atan2\u2463"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-atan2"}, "funcdef-calc": {"dfnID":"funcdef-calc","dfnText":"calc()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-calc"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-funcdef-calc\u2460"}],"title":"2.8. \nNon-Terminal Definitions and Grammar Production Blocks"},{"refs":[{"id":"ref-for-funcdef-calc\u2461"},{"id":"ref-for-funcdef-calc\u2462"},{"id":"ref-for-funcdef-calc\u2463"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-funcdef-calc\u2464"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-funcdef-calc\u2465"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-funcdef-calc\u2466"},{"id":"ref-for-funcdef-calc\u2467"},{"id":"ref-for-funcdef-calc\u2468"},{"id":"ref-for-funcdef-calc\u2460\u24ea"},{"id":"ref-for-funcdef-calc\u2460\u2460"},{"id":"ref-for-funcdef-calc\u2460\u2461"}],"title":"10.1. \nBasic Arithmetic: calc()"},{"refs":[{"id":"ref-for-funcdef-calc\u2460\u2462"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-funcdef-calc\u2460\u2463"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-calc\u2460\u2464"},{"id":"ref-for-funcdef-calc\u2460\u2465"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-calc\u2460\u2466"}],"title":"10.10. \nInternal Representation"},{"refs":[{"id":"ref-for-funcdef-calc\u2460\u2467"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-funcdef-calc\u2460\u2468"},{"id":"ref-for-funcdef-calc\u2461\u24ea"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-funcdef-calc\u2461\u2460"},{"id":"ref-for-funcdef-calc\u2461\u2461"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-funcdef-calc\u2461\u2462"}],"title":"\nAppendix C: Quirky Lengths"},{"refs":[{"id":"ref-for-funcdef-calc\u2461\u2463"},{"id":"ref-for-funcdef-calc\u2461\u2464"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-calc\u2461\u2465"},{"id":"ref-for-funcdef-calc\u2461\u2466"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-calc"}, "funcdef-clamp": {"dfnID":"funcdef-clamp","dfnText":"clamp()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-clamp"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-funcdef-clamp\u2460"},{"id":"ref-for-funcdef-clamp\u2461"},{"id":"ref-for-funcdef-clamp\u2462"},{"id":"ref-for-funcdef-clamp\u2463"},{"id":"ref-for-funcdef-clamp\u2464"},{"id":"ref-for-funcdef-clamp\u2465"},{"id":"ref-for-funcdef-clamp\u2466"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-funcdef-clamp\u2467"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-clamp\u2468"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-clamp\u2460\u24ea"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-clamp\u2460\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-clamp"}, "funcdef-cos": {"dfnID":"funcdef-cos","dfnText":"cos(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-cos"},{"id":"ref-for-funcdef-cos\u2460"},{"id":"ref-for-funcdef-cos\u2461"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-funcdef-cos\u2462"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-cos\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-cos\u2464"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-cos"}, "funcdef-exp": {"dfnID":"funcdef-exp","dfnText":"exp(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-exp"},{"id":"ref-for-funcdef-exp\u2460"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-funcdef-exp\u2461"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-exp\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-exp\u2463"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-exp"}, "funcdef-hypot": {"dfnID":"funcdef-hypot","dfnText":"hypot(A, \u2026)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-hypot"},{"id":"ref-for-funcdef-hypot\u2460"},{"id":"ref-for-funcdef-hypot\u2461"},{"id":"ref-for-funcdef-hypot\u2462"},{"id":"ref-for-funcdef-hypot\u2463"},{"id":"ref-for-funcdef-hypot\u2464"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-funcdef-hypot\u2465"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-hypot\u2466"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-hypot\u2467"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-hypot"}, "funcdef-log": {"dfnID":"funcdef-log","dfnText":"log(A, B?)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-log"},{"id":"ref-for-funcdef-log\u2460"},{"id":"ref-for-funcdef-log\u2461"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-funcdef-log\u2462"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-log\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-log\u2464"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-log"}, "funcdef-max": {"dfnID":"funcdef-max","dfnText":"max()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-max"},{"id":"ref-for-funcdef-max\u2460"},{"id":"ref-for-funcdef-max\u2461"},{"id":"ref-for-funcdef-max\u2462"},{"id":"ref-for-funcdef-max\u2463"},{"id":"ref-for-funcdef-max\u2464"},{"id":"ref-for-funcdef-max\u2465"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-funcdef-max\u2466"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-max\u2467"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-max\u2468"},{"id":"ref-for-funcdef-max\u2460\u24ea"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-max\u2460\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-max"}, "funcdef-min": {"dfnID":"funcdef-min","dfnText":"min()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-min"},{"id":"ref-for-funcdef-min\u2460"},{"id":"ref-for-funcdef-min\u2461"},{"id":"ref-for-funcdef-min\u2462"},{"id":"ref-for-funcdef-min\u2463"},{"id":"ref-for-funcdef-min\u2464"},{"id":"ref-for-funcdef-min\u2465"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-funcdef-min\u2466"},{"id":"ref-for-funcdef-min\u2467"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-min\u2468"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-min\u2460\u24ea"},{"id":"ref-for-funcdef-min\u2460\u2460"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-min\u2460\u2461"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-min"}, "funcdef-mod": {"dfnID":"funcdef-mod","dfnText":"mod(A, B)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-mod"},{"id":"ref-for-funcdef-mod\u2460"},{"id":"ref-for-funcdef-mod\u2461"},{"id":"ref-for-funcdef-mod\u2462"},{"id":"ref-for-funcdef-mod\u2463"},{"id":"ref-for-funcdef-mod\u2464"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-funcdef-mod\u2465"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-mod\u2466"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-mod\u2467"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-mod"}, "funcdef-pow": {"dfnID":"funcdef-pow","dfnText":"pow(A, B)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-pow"},{"id":"ref-for-funcdef-pow\u2460"},{"id":"ref-for-funcdef-pow\u2461"},{"id":"ref-for-funcdef-pow\u2462"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-funcdef-pow\u2463"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-pow\u2464"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-pow\u2465"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-pow"}, "funcdef-rem": {"dfnID":"funcdef-rem","dfnText":"rem(A, B)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-rem"},{"id":"ref-for-funcdef-rem\u2460"},{"id":"ref-for-funcdef-rem\u2461"},{"id":"ref-for-funcdef-rem\u2462"},{"id":"ref-for-funcdef-rem\u2463"},{"id":"ref-for-funcdef-rem\u2464"},{"id":"ref-for-funcdef-rem\u2465"},{"id":"ref-for-funcdef-rem\u2466"},{"id":"ref-for-funcdef-rem\u2467"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-funcdef-rem\u2468"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-rem\u2460\u24ea"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-rem\u2460\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-rem"}, "funcdef-round": {"dfnID":"funcdef-round","dfnText":"round(<rounding-strategy>?, A, B?)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-round"},{"id":"ref-for-funcdef-round\u2460"},{"id":"ref-for-funcdef-round\u2461"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-funcdef-round\u2462"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-round\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-round\u2464"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-round\u2465"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-round"}, "funcdef-sign": {"dfnID":"funcdef-sign","dfnText":"sign(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-sign"},{"id":"ref-for-funcdef-sign\u2460"}],"title":"10.6. \nSign-Related Functions: abs(), sign()"},{"refs":[{"id":"ref-for-funcdef-sign\u2461"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-sign\u2462"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-sign\u2463"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-sign"}, "funcdef-sin": {"dfnID":"funcdef-sin","dfnText":"sin(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-sin"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-funcdef-sin\u2460"},{"id":"ref-for-funcdef-sin\u2461"},{"id":"ref-for-funcdef-sin\u2462"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-funcdef-sin\u2463"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-sin\u2464"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-sin\u2465"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-sin"}, "funcdef-sqrt": {"dfnID":"funcdef-sqrt","dfnText":"sqrt(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-sqrt"},{"id":"ref-for-funcdef-sqrt\u2460"},{"id":"ref-for-funcdef-sqrt\u2461"},{"id":"ref-for-funcdef-sqrt\u2462"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-funcdef-sqrt\u2463"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-sqrt\u2464"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-sqrt\u2465"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-sqrt"}, "funcdef-src": {"dfnID":"funcdef-src","dfnText":"src()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-src"},{"id":"ref-for-funcdef-src\u2460"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-funcdef-src\u2461"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-src\u2462"}],"title":"\nAdditions Since Level 3"},{"refs":[{"id":"ref-for-funcdef-src\u2463"}],"title":"\nSecurity Considerations"},{"refs":[{"id":"ref-for-funcdef-src\u2464"}],"title":"\nPrivacy Considerations"}],"url":"#funcdef-src"}, "funcdef-tan": {"dfnID":"funcdef-tan","dfnText":"tan(A)","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-tan"},{"id":"ref-for-funcdef-tan\u2460"},{"id":"ref-for-funcdef-tan\u2461"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-funcdef-tan\u2462"}],"title":"10.4.1. \nArgument Ranges"},{"refs":[{"id":"ref-for-funcdef-tan\u2463"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-funcdef-tan\u2464"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-funcdef-tan\u2465"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-tan\u2466"}],"title":"\nAdditions Since Level 3"}],"url":"#funcdef-tan"}, "funcdef-url": {"dfnID":"funcdef-url","dfnText":"url()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-url"},{"id":"ref-for-funcdef-url\u2460"},{"id":"ref-for-funcdef-url\u2461"},{"id":"ref-for-funcdef-url\u2462"},{"id":"ref-for-funcdef-url\u2463"},{"id":"ref-for-funcdef-url\u2464"},{"id":"ref-for-funcdef-url\u2465"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-funcdef-url\u2466"}],"title":"4.5.1.1. \nFragment URLs"},{"refs":[{"id":"ref-for-funcdef-url\u2467"},{"id":"ref-for-funcdef-url\u2468"},{"id":"ref-for-funcdef-url\u2460\u24ea"}],"title":"4.5.2. \nEmpty URLs"},{"refs":[{"id":"ref-for-funcdef-url\u2460\u2460"}],"title":"4.5.3. \nURL Modifiers"},{"refs":[{"id":"ref-for-funcdef-url\u2460\u2461"},{"id":"ref-for-funcdef-url\u2460\u2462"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-funcdef-url\u2460\u2463"}],"title":"\nSecurity Considerations"},{"refs":[{"id":"ref-for-funcdef-url\u2460\u2464"}],"title":"\nPrivacy Considerations"}],"url":"#funcdef-url"}, "functional-notation": {"dfnID":"functional-notation","dfnText":"functional notation","external":false,"refSections":[{"refs":[{"id":"ref-for-functional-notation"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-functional-notation\u2460"},{"id":"ref-for-functional-notation\u2461"},{"id":"ref-for-functional-notation\u2462"}],"title":"2.6. \n\tFunctional Notation Definitions"},{"refs":[{"id":"ref-for-functional-notation\u2463"}],"title":"4.5.3. \nURL Modifiers"},{"refs":[{"id":"ref-for-functional-notation\u2464"},{"id":"ref-for-functional-notation\u2465"}],"title":"9. \nFunctional Notations"},{"refs":[{"id":"ref-for-functional-notation\u2466"}],"title":"\nAppendix C: Quirky Lengths"},{"refs":[{"id":"ref-for-functional-notation\u2467"}],"title":"\nRecent Changes"}],"url":"#functional-notation"}, "grad": {"dfnID":"grad","dfnText":"grad","external":false,"refSections":[{"refs":[{"id":"ref-for-grad"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"}],"url":"#grad"}, "ic": {"dfnID":"ic","dfnText":"ic","external":false,"refSections":[{"refs":[{"id":"ref-for-ic"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-ic\u2460"},{"id":"ref-for-ic\u2461"},{"id":"ref-for-ic\u2462"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-ic\u2463"}],"title":"\nAdditions Since Level 3"}],"url":"#ic"}, "identifier-value": {"dfnID":"identifier-value","dfnText":"<custom-ident>","external":false,"refSections":[{"refs":[{"id":"ref-for-identifier-value"},{"id":"ref-for-identifier-value\u2460"},{"id":"ref-for-identifier-value\u2461"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-identifier-value\u2462"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-identifier-value\u2463"},{"id":"ref-for-identifier-value\u2464"},{"id":"ref-for-identifier-value\u2465"},{"id":"ref-for-identifier-value\u2466"},{"id":"ref-for-identifier-value\u2467"},{"id":"ref-for-identifier-value\u2468"},{"id":"ref-for-identifier-value\u2460\u24ea"},{"id":"ref-for-identifier-value\u2460\u2460"},{"id":"ref-for-identifier-value\u2460\u2461"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"},{"refs":[{"id":"ref-for-identifier-value\u2460\u2462"}],"title":"4.3. \nPrefixed Author-defined Identifiers: the <dashed-ident> type"}],"url":"#identifier-value"}, "in": {"dfnID":"in","dfnText":"in","external":false,"refSections":[{"refs":[{"id":"ref-for-in"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-in\u2460"},{"id":"ref-for-in\u2461"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"},{"refs":[{"id":"ref-for-in\u2462"},{"id":"ref-for-in\u2463"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"}],"url":"#in"}, "integer": {"dfnID":"integer","dfnText":"integer","external":false,"refSections":[{"refs":[{"id":"ref-for-integer"}],"title":"5.3. \nReal Numbers: the <number> type"}],"url":"#integer"}, "integer-value": {"dfnID":"integer-value","dfnText":"<integer>","external":false,"refSections":[{"refs":[{"id":"ref-for-integer-value"},{"id":"ref-for-integer-value\u2460"},{"id":"ref-for-integer-value\u2461"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-integer-value\u2462"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-integer-value\u2463"}],"title":"5.1. \nRange Restrictions and Range Definition Notation"},{"refs":[{"id":"ref-for-integer-value\u2464"}],"title":"5.2. \nIntegers: the <integer> type"},{"refs":[{"id":"ref-for-integer-value\u2465"},{"id":"ref-for-integer-value\u2466"},{"id":"ref-for-integer-value\u2467"},{"id":"ref-for-integer-value\u2468"},{"id":"ref-for-integer-value\u2460\u24ea"}],"title":"5.2.1. \nComputation and Combination of <integer>"},{"refs":[{"id":"ref-for-integer-value\u2460\u2460"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-integer-value\u2460\u2461"},{"id":"ref-for-integer-value\u2460\u2462"},{"id":"ref-for-integer-value\u2460\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-integer-value\u2460\u2464"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-integer-value\u2460\u2465"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-integer-value\u2460\u2466"}],"title":"\nAdditions Since Level 3"}],"url":"#integer-value"}, "interpolation": {"dfnID":"interpolation","dfnText":"interpolation","external":false,"refSections":[{"refs":[{"id":"ref-for-interpolation"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-interpolation\u2460"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-interpolation\u2461"}],"title":"5.2.1. \nComputation and Combination of <integer>"},{"refs":[{"id":"ref-for-interpolation\u2462"}],"title":"5.3.1. \nComputation and Combination of <number>"},{"refs":[{"id":"ref-for-interpolation\u2463"}],"title":"5.4.2. \nCombination of Dimensions"},{"refs":[{"id":"ref-for-interpolation\u2464"}],"title":"5.5.1. \nComputation and Combination of <percentage>"},{"refs":[{"id":"ref-for-interpolation\u2465"},{"id":"ref-for-interpolation\u2466"},{"id":"ref-for-interpolation\u2467"},{"id":"ref-for-interpolation\u2468"},{"id":"ref-for-interpolation\u2460\u24ea"},{"id":"ref-for-interpolation\u2460\u2460"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-interpolation\u2460\u2461"}],"title":"8.1.1. \nCombination of <color>"},{"refs":[{"id":"ref-for-interpolation\u2460\u2462"}],"title":"8.3.3. \nCombination of <position>"},{"refs":[{"id":"ref-for-interpolation\u2460\u2463"}],"title":"10.14. \nCombination of Math Functions"}],"url":"#interpolation"}, "kHz": {"dfnID":"kHz","dfnText":"kHz","external":false,"refSections":[{"refs":[{"id":"ref-for-kHz"}],"title":"7.3. \nFrequency Units: the <frequency> type and Hz, kHz units"}],"url":"#kHz"}, "large-viewport-percentage-units": {"dfnID":"large-viewport-percentage-units","dfnText":"large viewport-percentage units","external":false,"refSections":[{"refs":[{"id":"ref-for-large-viewport-percentage-units"},{"id":"ref-for-large-viewport-percentage-units\u2460"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-large-viewport-percentage-units\u2461"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"},{"refs":[{"id":"ref-for-large-viewport-percentage-units\u2462"},{"id":"ref-for-large-viewport-percentage-units\u2463"}],"title":"\nRecent Changes"}],"url":"#large-viewport-percentage-units"}, "large-viewport-size": {"dfnID":"large-viewport-size","dfnText":"large viewport size","external":false,"refSections":[{"refs":[{"id":"ref-for-large-viewport-size"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-large-viewport-size\u2460"},{"id":"ref-for-large-viewport-size\u2461"},{"id":"ref-for-large-viewport-size\u2462"},{"id":"ref-for-large-viewport-size\u2463"},{"id":"ref-for-large-viewport-size\u2464"},{"id":"ref-for-large-viewport-size\u2465"},{"id":"ref-for-large-viewport-size\u2466"},{"id":"ref-for-large-viewport-size\u2467"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"#large-viewport-size"}, "length-advance-measure": {"dfnID":"length-advance-measure","dfnText":"advance measure","external":false,"refSections":[{"refs":[{"id":"ref-for-length-advance-measure"},{"id":"ref-for-length-advance-measure\u2460"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-length-advance-measure\u2461"},{"id":"ref-for-length-advance-measure\u2462"},{"id":"ref-for-length-advance-measure\u2463"},{"id":"ref-for-length-advance-measure\u2464"},{"id":"ref-for-length-advance-measure\u2465"},{"id":"ref-for-length-advance-measure\u2466"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"#length-advance-measure"}, "length-value": {"dfnID":"length-value","dfnText":"<length>","external":false,"refSections":[{"refs":[{"id":"ref-for-length-value"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-length-value\u2460"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-length-value\u2461"},{"id":"ref-for-length-value\u2462"}],"title":"2.6. \n\tFunctional Notation Definitions"},{"refs":[{"id":"ref-for-length-value\u2463"}],"title":"3. \nCombining Values: Interpolation, Addition, and Accumulation"},{"refs":[{"id":"ref-for-length-value\u2464"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-length-value\u2465"}],"title":"5.1. \nRange Restrictions and Range Definition Notation"},{"refs":[{"id":"ref-for-length-value\u2466"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-length-value\u2467"}],"title":"5.4.2. \nCombination of Dimensions"},{"refs":[{"id":"ref-for-length-value\u2468"}],"title":"5.5.1. \nComputation and Combination of <percentage>"},{"refs":[{"id":"ref-for-length-value\u2460\u24ea"},{"id":"ref-for-length-value\u2460\u2460"},{"id":"ref-for-length-value\u2460\u2461"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-length-value\u2460\u2462"},{"id":"ref-for-length-value\u2460\u2463"},{"id":"ref-for-length-value\u2460\u2464"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-length-value\u2460\u2465"},{"id":"ref-for-length-value\u2460\u2466"},{"id":"ref-for-length-value\u2460\u2467"},{"id":"ref-for-length-value\u2460\u2468"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-length-value\u2461\u24ea"},{"id":"ref-for-length-value\u2461\u2460"}],"title":"8.3.1. \nParsing <position>"},{"refs":[{"id":"ref-for-length-value\u2461\u2461"}],"title":"8.3.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-length-value\u2461\u2462"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-length-value\u2461\u2463"}],"title":"10.1. \nBasic Arithmetic: calc()"},{"refs":[{"id":"ref-for-length-value\u2461\u2464"},{"id":"ref-for-length-value\u2461\u2465"},{"id":"ref-for-length-value\u2461\u2466"},{"id":"ref-for-length-value\u2461\u2467"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-length-value\u2461\u2468"}],"title":"10.7.3. \nNumeric Variables"},{"refs":[{"id":"ref-for-length-value\u2462\u24ea"},{"id":"ref-for-length-value\u2462\u2460"},{"id":"ref-for-length-value\u2462\u2461"},{"id":"ref-for-length-value\u2462\u2462"},{"id":"ref-for-length-value\u2462\u2463"},{"id":"ref-for-length-value\u2462\u2464"},{"id":"ref-for-length-value\u2462\u2465"},{"id":"ref-for-length-value\u2462\u2466"},{"id":"ref-for-length-value\u2462\u2467"},{"id":"ref-for-length-value\u2462\u2468"},{"id":"ref-for-length-value\u2463\u24ea"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-length-value\u2463\u2460"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-length-value\u2463\u2461"},{"id":"ref-for-length-value\u2463\u2462"}],"title":"\nAppendix C: Quirky Lengths"},{"refs":[{"id":"ref-for-length-value\u2463\u2463"}],"title":"\nRecent Changes"}],"url":"#length-value"}, "lh": {"dfnID":"lh","dfnText":"lh","external":false,"refSections":[{"refs":[{"id":"ref-for-lh"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-lh\u2460"},{"id":"ref-for-lh\u2461"},{"id":"ref-for-lh\u2462"},{"id":"ref-for-lh\u2463"},{"id":"ref-for-lh\u2464"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-lh\u2465"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-lh\u2466"}],"title":"\nAdditions Since Level 3"}],"url":"#lh"}, "local-font-relative-lengths": {"dfnID":"local-font-relative-lengths","dfnText":"local font-relative lengths","external":false,"refSections":[],"url":"#local-font-relative-lengths"}, "lvb": {"dfnID":"lvb","dfnText":"lvb","external":false,"refSections":[{"refs":[{"id":"ref-for-lvb"}],"title":"\nRecent Changes"}],"url":"#lvb"}, "lvh": {"dfnID":"lvh","dfnText":"lvh","external":false,"refSections":[{"refs":[{"id":"ref-for-lvh"}],"title":"\nRecent Changes"}],"url":"#lvh"}, "lvi": {"dfnID":"lvi","dfnText":"lvi","external":false,"refSections":[{"refs":[{"id":"ref-for-lvi"}],"title":"\nRecent Changes"}],"url":"#lvi"}, "lvmax": {"dfnID":"lvmax","dfnText":"lvmax","external":false,"refSections":[{"refs":[{"id":"ref-for-lvmax"}],"title":"\nRecent Changes"}],"url":"#lvmax"}, "lvmin": {"dfnID":"lvmin","dfnText":"lvmin","external":false,"refSections":[{"refs":[{"id":"ref-for-lvmin"}],"title":"\nRecent Changes"}],"url":"#lvmin"}, "lvw": {"dfnID":"lvw","dfnText":"lvw","external":false,"refSections":[{"refs":[{"id":"ref-for-lvw"}],"title":"\nRecent Changes"}],"url":"#lvw"}, "math-function": {"dfnID":"math-function","dfnText":"math functions","external":false,"refSections":[{"refs":[{"id":"ref-for-math-function"}],"title":"3.1. \nRange Checking"},{"refs":[{"id":"ref-for-math-function\u2460"}],"title":"9. \nFunctional Notations"},{"refs":[{"id":"ref-for-math-function\u2461"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-math-function\u2462"},{"id":"ref-for-math-function\u2463"},{"id":"ref-for-math-function\u2464"},{"id":"ref-for-math-function\u2465"},{"id":"ref-for-math-function\u2466"}],"title":"10.1. \nBasic Arithmetic: calc()"},{"refs":[{"id":"ref-for-math-function\u2467"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-math-function\u2468"}],"title":"10.4.1. \nArgument Ranges"},{"refs":[{"id":"ref-for-math-function\u2460\u24ea"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-math-function\u2460\u2460"}],"title":"10.5.1. \nArgument Ranges"},{"refs":[{"id":"ref-for-math-function\u2460\u2461"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-math-function\u2460\u2462"},{"id":"ref-for-math-function\u2460\u2463"},{"id":"ref-for-math-function\u2460\u2464"},{"id":"ref-for-math-function\u2460\u2465"},{"id":"ref-for-math-function\u2460\u2466"},{"id":"ref-for-math-function\u2460\u2467"},{"id":"ref-for-math-function\u2460\u2468"},{"id":"ref-for-math-function\u2461\u24ea"},{"id":"ref-for-math-function\u2461\u2460"},{"id":"ref-for-math-function\u2461\u2461"},{"id":"ref-for-math-function\u2461\u2462"},{"id":"ref-for-math-function\u2461\u2463"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-math-function\u2461\u2464"},{"id":"ref-for-math-function\u2461\u2465"},{"id":"ref-for-math-function\u2461\u2466"},{"id":"ref-for-math-function\u2461\u2467"},{"id":"ref-for-math-function\u2461\u2468"},{"id":"ref-for-math-function\u2462\u24ea"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"},{"refs":[{"id":"ref-for-math-function\u2462\u2460"},{"id":"ref-for-math-function\u2462\u2461"},{"id":"ref-for-math-function\u2462\u2462"},{"id":"ref-for-math-function\u2462\u2463"},{"id":"ref-for-math-function\u2462\u2464"},{"id":"ref-for-math-function\u2462\u2465"}],"title":"10.10. \nInternal Representation"},{"refs":[{"id":"ref-for-math-function\u2462\u2466"},{"id":"ref-for-math-function\u2462\u2467"},{"id":"ref-for-math-function\u2462\u2468"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-math-function\u2463\u24ea"},{"id":"ref-for-math-function\u2463\u2460"},{"id":"ref-for-math-function\u2463\u2461"},{"id":"ref-for-math-function\u2463\u2462"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-math-function\u2463\u2463"},{"id":"ref-for-math-function\u2463\u2464"},{"id":"ref-for-math-function\u2463\u2465"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-math-function\u2463\u2466"},{"id":"ref-for-math-function\u2463\u2467"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-math-function\u2463\u2468"},{"id":"ref-for-math-function\u2464\u24ea"}],"title":"10.14. \nCombination of Math Functions"},{"refs":[{"id":"ref-for-math-function\u2464\u2460"},{"id":"ref-for-math-function\u2464\u2461"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-math-function\u2464\u2462"}],"title":"\nAdditions Since Level 3"}],"url":"#math-function"}, "mm": {"dfnID":"mm","dfnText":"mm","external":false,"refSections":[{"refs":[{"id":"ref-for-mm"},{"id":"ref-for-mm\u2460"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#mm"}, "ms": {"dfnID":"ms","dfnText":"ms","external":false,"refSections":[{"refs":[{"id":"ref-for-ms"}],"title":"7.2. \nDuration Units: the <time> type and s, ms units"}],"url":"#ms"}, "mult-comma": {"dfnID":"mult-comma","dfnText":"#","external":false,"refSections":[{"refs":[{"id":"ref-for-mult-comma"},{"id":"ref-for-mult-comma\u2460"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-mult-comma\u2461"},{"id":"ref-for-mult-comma\u2462"},{"id":"ref-for-mult-comma\u2463"}],"title":"10.8. \nSyntax"}],"url":"#mult-comma"}, "mult-num": {"dfnID":"mult-num","dfnText":"{A}","external":false,"refSections":[],"url":"#mult-num"}, "mult-num-range": {"dfnID":"mult-num-range","dfnText":"{A,B}","external":false,"refSections":[],"url":"#mult-num-range"}, "mult-one-plus": {"dfnID":"mult-one-plus","dfnText":"+","external":false,"refSections":[],"url":"#mult-one-plus"}, "mult-opt": {"dfnID":"mult-opt","dfnText":"?","external":false,"refSections":[{"refs":[{"id":"ref-for-mult-opt"},{"id":"ref-for-mult-opt\u2460"},{"id":"ref-for-mult-opt\u2461"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-mult-opt\u2462"}],"title":"5.7. \nRatios: the <ratio> type"},{"refs":[{"id":"ref-for-mult-opt\u2463"},{"id":"ref-for-mult-opt\u2464"},{"id":"ref-for-mult-opt\u2465"}],"title":"10.8. \nSyntax"}],"url":"#mult-opt"}, "mult-req": {"dfnID":"mult-req","dfnText":"!","external":false,"refSections":[],"url":"#mult-req"}, "mult-zero-plus": {"dfnID":"mult-zero-plus","dfnText":"*","external":false,"refSections":[{"refs":[{"id":"ref-for-mult-zero-plus"},{"id":"ref-for-mult-zero-plus\u2460"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-mult-zero-plus\u2461"},{"id":"ref-for-mult-zero-plus\u2462"}],"title":"10.8. \nSyntax"}],"url":"#mult-zero-plus"}, "not-additive": {"dfnID":"not-additive","dfnText":"not additive","external":false,"refSections":[{"refs":[{"id":"ref-for-not-additive"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-not-additive\u2460"}],"title":"8.1.1. \nCombination of <color>"},{"refs":[{"id":"ref-for-not-additive\u2461"}],"title":"8.2.1. \nCombination of <image>"}],"url":"#not-additive"}, "number": {"dfnID":"number","dfnText":"number","external":false,"refSections":[{"refs":[{"id":"ref-for-number"}],"title":"5.3. \nReal Numbers: the <number> type"},{"refs":[{"id":"ref-for-number\u2460"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-number\u2461"}],"title":"5.5. \nPercentages: the <percentage> type"},{"refs":[{"id":"ref-for-number\u2462"}],"title":"\nRecent Changes"}],"url":"#number"}, "number-value": {"dfnID":"number-value","dfnText":"<number>","external":false,"refSections":[{"refs":[{"id":"ref-for-number-value"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-number-value\u2460"}],"title":"5.2.1. \nComputation and Combination of <integer>"},{"refs":[{"id":"ref-for-number-value\u2461"},{"id":"ref-for-number-value\u2462"}],"title":"5.3. \nReal Numbers: the <number> type"},{"refs":[{"id":"ref-for-number-value\u2463"},{"id":"ref-for-number-value\u2464"},{"id":"ref-for-number-value\u2465"},{"id":"ref-for-number-value\u2466"}],"title":"5.3.1. \nComputation and Combination of <number>"},{"refs":[{"id":"ref-for-number-value\u2467"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-number-value\u2468"},{"id":"ref-for-number-value\u2460\u24ea"},{"id":"ref-for-number-value\u2460\u2460"}],"title":"5.7. \nRatios: the <ratio> type"},{"refs":[{"id":"ref-for-number-value\u2460\u2461"},{"id":"ref-for-number-value\u2460\u2462"},{"id":"ref-for-number-value\u2460\u2463"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-number-value\u2460\u2464"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-number-value\u2460\u2465"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-number-value\u2460\u2466"},{"id":"ref-for-number-value\u2460\u2467"},{"id":"ref-for-number-value\u2460\u2468"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-number-value\u2461\u24ea"},{"id":"ref-for-number-value\u2461\u2460"},{"id":"ref-for-number-value\u2461\u2461"},{"id":"ref-for-number-value\u2461\u2462"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-number-value\u2461\u2463"},{"id":"ref-for-number-value\u2461\u2464"},{"id":"ref-for-number-value\u2461\u2465"},{"id":"ref-for-number-value\u2461\u2466"},{"id":"ref-for-number-value\u2461\u2467"},{"id":"ref-for-number-value\u2461\u2468"},{"id":"ref-for-number-value\u2462\u24ea"},{"id":"ref-for-number-value\u2462\u2460"},{"id":"ref-for-number-value\u2462\u2461"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-number-value\u2462\u2462"}],"title":"10.6. \nSign-Related Functions: abs(), sign()"},{"refs":[{"id":"ref-for-number-value\u2462\u2463"}],"title":"10.7.1. \nNumeric Constants: e, pi"},{"refs":[{"id":"ref-for-number-value\u2462\u2464"},{"id":"ref-for-number-value\u2462\u2465"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-number-value\u2462\u2466"},{"id":"ref-for-number-value\u2462\u2467"}],"title":"10.7.3. \nNumeric Variables"},{"refs":[{"id":"ref-for-number-value\u2462\u2468"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-number-value\u2463\u24ea"},{"id":"ref-for-number-value\u2463\u2460"},{"id":"ref-for-number-value\u2463\u2461"},{"id":"ref-for-number-value\u2463\u2462"},{"id":"ref-for-number-value\u2463\u2463"},{"id":"ref-for-number-value\u2463\u2464"},{"id":"ref-for-number-value\u2463\u2465"},{"id":"ref-for-number-value\u2463\u2466"},{"id":"ref-for-number-value\u2463\u2467"},{"id":"ref-for-number-value\u2463\u2468"},{"id":"ref-for-number-value\u2464\u24ea"},{"id":"ref-for-number-value\u2464\u2460"},{"id":"ref-for-number-value\u2464\u2461"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-number-value\u2464\u2462"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-number-value\u2464\u2463"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-number-value\u2464\u2464"},{"id":"ref-for-number-value\u2464\u2465"}],"title":"\nRecent Changes"}],"url":"#number-value"}, "numeric-data-types": {"dfnID":"numeric-data-types","dfnText":"numeric data types","external":false,"refSections":[{"refs":[{"id":"ref-for-numeric-data-types"}],"title":"2.1. \nComponent Value Types"}],"url":"#numeric-data-types"}, "parse-a-calculation": {"dfnID":"parse-a-calculation","dfnText":"parse a calculation","external":false,"refSections":[{"refs":[{"id":"ref-for-parse-a-calculation"},{"id":"ref-for-parse-a-calculation\u2460"},{"id":"ref-for-parse-a-calculation\u2461"}],"title":"10.10. \nInternal Representation"}],"url":"#parse-a-calculation"}, "pc": {"dfnID":"pc","dfnText":"pc","external":false,"refSections":[{"refs":[{"id":"ref-for-pc"},{"id":"ref-for-pc\u2460"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#pc"}, "percentage": {"dfnID":"percentage","dfnText":"percentage","external":false,"refSections":[],"url":"#percentage"}, "percentage-value": {"dfnID":"percentage-value","dfnText":"<percentage>","external":false,"refSections":[{"refs":[{"id":"ref-for-percentage-value"}],"title":"2.1. \nComponent Value Types"},{"refs":[{"id":"ref-for-percentage-value\u2460"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-percentage-value\u2461"}],"title":"5.5. \nPercentages: the <percentage> type"},{"refs":[{"id":"ref-for-percentage-value\u2462"},{"id":"ref-for-percentage-value\u2463"},{"id":"ref-for-percentage-value\u2464"},{"id":"ref-for-percentage-value\u2465"}],"title":"5.5.1. \nComputation and Combination of <percentage>"},{"refs":[{"id":"ref-for-percentage-value\u2466"},{"id":"ref-for-percentage-value\u2467"},{"id":"ref-for-percentage-value\u2468"},{"id":"ref-for-percentage-value\u2460\u24ea"},{"id":"ref-for-percentage-value\u2460\u2460"},{"id":"ref-for-percentage-value\u2460\u2461"},{"id":"ref-for-percentage-value\u2460\u2462"},{"id":"ref-for-percentage-value\u2460\u2463"},{"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"},{"id":"ref-for-percentage-value\u2460\u2468"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-percentage-value\u2461\u24ea"},{"id":"ref-for-percentage-value\u2461\u2460"},{"id":"ref-for-percentage-value\u2461\u2461"},{"id":"ref-for-percentage-value\u2461\u2462"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-percentage-value\u2461\u2463"}],"title":"8.3.1. \nParsing <position>"},{"refs":[{"id":"ref-for-percentage-value\u2461\u2464"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-percentage-value\u2461\u2465"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-percentage-value\u2461\u2466"},{"id":"ref-for-percentage-value\u2461\u2467"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-percentage-value\u2461\u2468"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-percentage-value\u2462\u24ea"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2460"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2461"},{"id":"ref-for-percentage-value\u2462\u2462"},{"id":"ref-for-percentage-value\u2462\u2463"},{"id":"ref-for-percentage-value\u2462\u2464"},{"id":"ref-for-percentage-value\u2462\u2465"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-percentage-value\u2462\u2466"}],"title":"\nRecent Changes"}],"url":"#percentage-value"}, "physical-unit": {"dfnID":"physical-unit","dfnText":"physical units","external":false,"refSections":[{"refs":[{"id":"ref-for-physical-unit"},{"id":"ref-for-physical-unit\u2460"},{"id":"ref-for-physical-unit\u2461"},{"id":"ref-for-physical-unit\u2462"},{"id":"ref-for-physical-unit\u2463"},{"id":"ref-for-physical-unit\u2464"},{"id":"ref-for-physical-unit\u2465"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#physical-unit"}, "pt": {"dfnID":"pt","dfnText":"pt","external":false,"refSections":[{"refs":[{"id":"ref-for-pt"},{"id":"ref-for-pt\u2460"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#pt"}, "px": {"dfnID":"px","dfnText":"px","external":false,"refSections":[{"refs":[{"id":"ref-for-px"},{"id":"ref-for-px\u2460"}],"title":"5.4.1. \nCompatible Units"},{"refs":[{"id":"ref-for-px\u2461"}],"title":"6. \nDistance Units: the <length> type"},{"refs":[{"id":"ref-for-px\u2462"},{"id":"ref-for-px\u2463"},{"id":"ref-for-px\u2464"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"},{"refs":[{"id":"ref-for-px\u2465"},{"id":"ref-for-px\u2466"},{"id":"ref-for-px\u2467"},{"id":"ref-for-px\u2468"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"},{"refs":[{"id":"ref-for-px\u2460\u24ea"},{"id":"ref-for-px\u2460\u2460"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-px\u2460\u2461"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-px\u2460\u2462"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-px\u2460\u2463"},{"id":"ref-for-px\u2460\u2464"}],"title":"\nAppendix C: Quirky Lengths"}],"url":"#px"}, "rad": {"dfnID":"rad","dfnText":"rad","external":false,"refSections":[{"refs":[{"id":"ref-for-rad"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"}],"url":"#rad"}, "ratio": {"dfnID":"ratio","dfnText":"ratio","external":false,"refSections":[],"url":"#ratio"}, "ratio-value": {"dfnID":"ratio-value","dfnText":"<ratio>","external":false,"refSections":[{"refs":[{"id":"ref-for-ratio-value"},{"id":"ref-for-ratio-value\u2460"},{"id":"ref-for-ratio-value\u2461"},{"id":"ref-for-ratio-value\u2462"},{"id":"ref-for-ratio-value\u2463"},{"id":"ref-for-ratio-value\u2464"}],"title":"5.7. \nRatios: the <ratio> type"},{"refs":[{"id":"ref-for-ratio-value\u2465"},{"id":"ref-for-ratio-value\u2466"},{"id":"ref-for-ratio-value\u2467"},{"id":"ref-for-ratio-value\u2468"},{"id":"ref-for-ratio-value\u2460\u24ea"},{"id":"ref-for-ratio-value\u2460\u2460"},{"id":"ref-for-ratio-value\u2460\u2461"}],"title":"5.7.1. \nCombination of <ratio>"},{"refs":[{"id":"ref-for-ratio-value\u2460\u2462"}],"title":"\nAdditions Since Level 3"}],"url":"#ratio-value"}, "rcap": {"dfnID":"rcap","dfnText":"rcap","external":false,"refSections":[{"refs":[{"id":"ref-for-rcap"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-rcap\u2460"}],"title":"\nRecent Changes"}],"url":"#rcap"}, "rch": {"dfnID":"rch","dfnText":"rch","external":false,"refSections":[{"refs":[{"id":"ref-for-rch"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-rch\u2460"}],"title":"\nRecent Changes"}],"url":"#rch"}, "reference-pixel": {"dfnID":"reference-pixel","dfnText":"reference pixel","external":false,"refSections":[{"refs":[{"id":"ref-for-reference-pixel"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#reference-pixel"}, "relative-length": {"dfnID":"relative-length","dfnText":"Relative length units","external":false,"refSections":[{"refs":[{"id":"ref-for-relative-length"}],"title":"6. \nDistance Units: the <length> type"}],"url":"#relative-length"}, "rem": {"dfnID":"rem","dfnText":"rem","external":false,"refSections":[{"refs":[{"id":"ref-for-rem"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-rem\u2460"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"#rem"}, "resolution-value": {"dfnID":"resolution-value","dfnText":"<resolution>","external":false,"refSections":[{"refs":[{"id":"ref-for-resolution-value"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-resolution-value\u2460"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-resolution-value\u2461"},{"id":"ref-for-resolution-value\u2462"},{"id":"ref-for-resolution-value\u2463"},{"id":"ref-for-resolution-value\u2464"}],"title":"7.4. \nResolution Units: the <resolution> type and dpi, dpcm, dppx units"},{"refs":[{"id":"ref-for-resolution-value\u2465"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-resolution-value\u2466"},{"id":"ref-for-resolution-value\u2467"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-resolution-value\u2468"}],"title":"\nRecent Changes"}],"url":"#resolution-value"}, "rex": {"dfnID":"rex","dfnText":"rex","external":false,"refSections":[{"refs":[{"id":"ref-for-rex"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-rex\u2460"}],"title":"\nRecent Changes"}],"url":"#rex"}, "ric": {"dfnID":"ric","dfnText":"ric","external":false,"refSections":[{"refs":[{"id":"ref-for-ric"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-ric\u2460"}],"title":"\nRecent Changes"}],"url":"#ric"}, "rlh": {"dfnID":"rlh","dfnText":"rlh","external":false,"refSections":[{"refs":[{"id":"ref-for-rlh"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-rlh\u2460"},{"id":"ref-for-rlh\u2461"},{"id":"ref-for-rlh\u2462"},{"id":"ref-for-rlh\u2463"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"},{"refs":[{"id":"ref-for-rlh\u2464"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-rlh\u2465"}],"title":"\nAdditions Since Level 3"}],"url":"#rlh"}, "root-font-relative-lengths": {"dfnID":"root-font-relative-lengths","dfnText":"root font-relative lengths","external":false,"refSections":[{"refs":[{"id":"ref-for-root-font-relative-lengths"}],"title":"6.1.1. \nFont-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units"}],"url":"#root-font-relative-lengths"}, "s": {"dfnID":"s","dfnText":"s","external":false,"refSections":[{"refs":[{"id":"ref-for-s"},{"id":"ref-for-s\u2460"}],"title":"7.2. \nDuration Units: the <time> type and s, ms units"}],"url":"#s"}, "serialize-a-calculation-tree": {"dfnID":"serialize-a-calculation-tree","dfnText":"serialize a calculation tree","external":false,"refSections":[{"refs":[{"id":"ref-for-serialize-a-calculation-tree"},{"id":"ref-for-serialize-a-calculation-tree\u2460"},{"id":"ref-for-serialize-a-calculation-tree\u2461"},{"id":"ref-for-serialize-a-calculation-tree\u2462"},{"id":"ref-for-serialize-a-calculation-tree\u2463"},{"id":"ref-for-serialize-a-calculation-tree\u2464"},{"id":"ref-for-serialize-a-calculation-tree\u2465"},{"id":"ref-for-serialize-a-calculation-tree\u2466"},{"id":"ref-for-serialize-a-calculation-tree\u2467"}],"title":"10.13. \nSerialization"}],"url":"#serialize-a-calculation-tree"}, "serialize-a-math-function": {"dfnID":"serialize-a-math-function","dfnText":"serialize a math function","external":false,"refSections":[{"refs":[{"id":"ref-for-serialize-a-math-function"}],"title":"10.13. \nSerialization"}],"url":"#serialize-a-math-function"}, "simplify-a-calculation-tree": {"dfnID":"simplify-a-calculation-tree","dfnText":"simplify a calculation tree","external":false,"refSections":[{"refs":[{"id":"ref-for-simplify-a-calculation-tree"}],"title":"10.10. \nInternal Representation"},{"refs":[{"id":"ref-for-simplify-a-calculation-tree\u2460"},{"id":"ref-for-simplify-a-calculation-tree\u2461"}],"title":"10.10.1. \nSimplification"},{"refs":[{"id":"ref-for-simplify-a-calculation-tree\u2462"}],"title":"10.11. \nComputed Value"},{"refs":[{"id":"ref-for-simplify-a-calculation-tree\u2463"},{"id":"ref-for-simplify-a-calculation-tree\u2464"}],"title":"10.14. \nCombination of Math Functions"}],"url":"#simplify-a-calculation-tree"}, "small-viewport-percentage-units": {"dfnID":"small-viewport-percentage-units","dfnText":"small viewport-percentage units","external":false,"refSections":[{"refs":[{"id":"ref-for-small-viewport-percentage-units"},{"id":"ref-for-small-viewport-percentage-units\u2460"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-small-viewport-percentage-units\u2461"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-small-viewport-percentage-units\u2462"}],"title":"\nAdditions Since Level 3"}],"url":"#small-viewport-percentage-units"}, "small-viewport-size": {"dfnID":"small-viewport-size","dfnText":"small viewport size","external":false,"refSections":[{"refs":[{"id":"ref-for-small-viewport-size"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-small-viewport-size\u2460"},{"id":"ref-for-small-viewport-size\u2461"},{"id":"ref-for-small-viewport-size\u2462"},{"id":"ref-for-small-viewport-size\u2463"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"}],"url":"#small-viewport-size"}, "snap-a-length-as-a-border-width": {"dfnID":"snap-a-length-as-a-border-width","dfnText":"snap a length as a border width","external":false,"refSections":[{"refs":[{"id":"ref-for-snap-a-length-as-a-border-width"}],"title":"\nRecent Changes"}],"url":"#snap-a-length-as-a-border-width"}, "sort-a-calculations-children": {"dfnID":"sort-a-calculations-children","dfnText":"sort a calculation\u2019s children","external":false,"refSections":[{"refs":[{"id":"ref-for-sort-a-calculations-children"},{"id":"ref-for-sort-a-calculations-children\u2460"}],"title":"10.13. \nSerialization"}],"url":"#sort-a-calculations-children"}, "specified-length": {"dfnID":"specified-length","dfnText":"specified length","external":false,"refSections":[],"url":"#specified-length"}, "string-value": {"dfnID":"string-value","dfnText":"<string>","external":false,"refSections":[{"refs":[{"id":"ref-for-string-value"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-string-value\u2460"}],"title":"4.4. \nQuoted Strings: the <string> type"},{"refs":[{"id":"ref-for-string-value\u2461"},{"id":"ref-for-string-value\u2462"},{"id":"ref-for-string-value\u2463"},{"id":"ref-for-string-value\u2464"}],"title":"4.5. \nResource Locators: the <url> type"}],"url":"#string-value"}, "svb": {"dfnID":"svb","dfnText":"svb","external":false,"refSections":[{"refs":[{"id":"ref-for-svb"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-svb\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#svb"}, "svh": {"dfnID":"svh","dfnText":"svh","external":false,"refSections":[{"refs":[{"id":"ref-for-svh"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-svh\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#svh"}, "svi": {"dfnID":"svi","dfnText":"svi","external":false,"refSections":[{"refs":[{"id":"ref-for-svi"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-svi\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#svi"}, "svmax": {"dfnID":"svmax","dfnText":"svmax","external":false,"refSections":[{"refs":[{"id":"ref-for-svmax"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-svmax\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#svmax"}, "svmin": {"dfnID":"svmin","dfnText":"svmin","external":false,"refSections":[{"refs":[{"id":"ref-for-svmin"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-svmin\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#svmin"}, "svw": {"dfnID":"svw","dfnText":"svw","external":false,"refSections":[{"refs":[{"id":"ref-for-svw"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-svw\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#svw"}, "time-value": {"dfnID":"time-value","dfnText":"<time>","external":false,"refSections":[{"refs":[{"id":"ref-for-time-value"}],"title":"5. \nNumeric Data Types"},{"refs":[{"id":"ref-for-time-value\u2460"}],"title":"5.1. \nRange Restrictions and Range Definition Notation"},{"refs":[{"id":"ref-for-time-value\u2461"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-time-value\u2462"},{"id":"ref-for-time-value\u2463"}],"title":"5.6. \nMixing Percentages and Dimensions"},{"refs":[{"id":"ref-for-time-value\u2464"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"id":"ref-for-time-value\u2465"},{"id":"ref-for-time-value\u2466"}],"title":"7.2. \nDuration Units: the <time> type and s, ms units"},{"refs":[{"id":"ref-for-time-value\u2467"}],"title":"10. \nMathematical Expressions"},{"refs":[{"id":"ref-for-time-value\u2468"},{"id":"ref-for-time-value\u2460\u24ea"}],"title":"10.9. \nType Checking"}],"url":"#time-value"}, "top-level-calculation": {"dfnID":"top-level-calculation","dfnText":"top-level calculation","external":false,"refSections":[{"refs":[{"id":"ref-for-top-level-calculation"},{"id":"ref-for-top-level-calculation\u2460"},{"id":"ref-for-top-level-calculation\u2461"},{"id":"ref-for-top-level-calculation\u2462"},{"id":"ref-for-top-level-calculation\u2463"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"},{"refs":[{"id":"ref-for-top-level-calculation\u2464"}],"title":"10.12. \nRange Checking"},{"refs":[{"id":"ref-for-top-level-calculation\u2465"}],"title":"\nRecent Changes"}],"url":"#top-level-calculation"}, "turn": {"dfnID":"turn","dfnText":"turn","external":false,"refSections":[{"refs":[{"id":"ref-for-turn"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"}],"url":"#turn"}, "typedef-angle-percentage": {"dfnID":"typedef-angle-percentage","dfnText":"<angle-percentage>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-angle-percentage"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"}],"url":"#typedef-angle-percentage"}, "typedef-calc-keyword": {"dfnID":"typedef-calc-keyword","dfnText":"<calc-keyword>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-calc-keyword"},{"id":"ref-for-typedef-calc-keyword\u2460"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-typedef-calc-keyword\u2461"}],"title":"10.9. \nType Checking"},{"refs":[{"id":"ref-for-typedef-calc-keyword\u2462"}],"title":"10.10.1. \nSimplification"}],"url":"#typedef-calc-keyword"}, "typedef-calc-product": {"dfnID":"typedef-calc-product","dfnText":"<calc-product>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-calc-product"},{"id":"ref-for-typedef-calc-product\u2460"}],"title":"10.8. \nSyntax"}],"url":"#typedef-calc-product"}, "typedef-calc-sum": {"dfnID":"typedef-calc-sum","dfnText":"<calc-sum>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-calc-sum"}],"title":"10.1. \nBasic Arithmetic: calc()"},{"refs":[{"id":"ref-for-typedef-calc-sum\u2460"},{"id":"ref-for-typedef-calc-sum\u2461"},{"id":"ref-for-typedef-calc-sum\u2462"},{"id":"ref-for-typedef-calc-sum\u2463"},{"id":"ref-for-typedef-calc-sum\u2464"},{"id":"ref-for-typedef-calc-sum\u2465"},{"id":"ref-for-typedef-calc-sum\u2466"},{"id":"ref-for-typedef-calc-sum\u2467"},{"id":"ref-for-typedef-calc-sum\u2468"},{"id":"ref-for-typedef-calc-sum\u2460\u24ea"},{"id":"ref-for-typedef-calc-sum\u2460\u2460"},{"id":"ref-for-typedef-calc-sum\u2460\u2461"},{"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"},{"id":"ref-for-typedef-calc-sum\u2460\u2468"},{"id":"ref-for-typedef-calc-sum\u2461\u24ea"},{"id":"ref-for-typedef-calc-sum\u2461\u2460"},{"id":"ref-for-typedef-calc-sum\u2461\u2461"},{"id":"ref-for-typedef-calc-sum\u2461\u2462"},{"id":"ref-for-typedef-calc-sum\u2461\u2463"},{"id":"ref-for-typedef-calc-sum\u2461\u2464"},{"id":"ref-for-typedef-calc-sum\u2461\u2465"},{"id":"ref-for-typedef-calc-sum\u2461\u2466"},{"id":"ref-for-typedef-calc-sum\u2461\u2467"},{"id":"ref-for-typedef-calc-sum\u2461\u2468"},{"id":"ref-for-typedef-calc-sum\u2462\u24ea"},{"id":"ref-for-typedef-calc-sum\u2462\u2460"}],"title":"10.8. \nSyntax"}],"url":"#typedef-calc-sum"}, "typedef-calc-value": {"dfnID":"typedef-calc-value","dfnText":"<calc-value>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-calc-value"},{"id":"ref-for-typedef-calc-value\u2460"},{"id":"ref-for-typedef-calc-value\u2461"}],"title":"10.8. \nSyntax"}],"url":"#typedef-calc-value"}, "typedef-dashed-ident": {"dfnID":"typedef-dashed-ident","dfnText":"<dashed-ident>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-dashed-ident"}],"title":"4.2. \nUnprefixed Author-defined Identifiers: the <custom-ident> type"},{"refs":[{"id":"ref-for-typedef-dashed-ident\u2460"},{"id":"ref-for-typedef-dashed-ident\u2461"},{"id":"ref-for-typedef-dashed-ident\u2462"},{"id":"ref-for-typedef-dashed-ident\u2463"},{"id":"ref-for-typedef-dashed-ident\u2464"},{"id":"ref-for-typedef-dashed-ident\u2465"},{"id":"ref-for-typedef-dashed-ident\u2466"},{"id":"ref-for-typedef-dashed-ident\u2467"},{"id":"ref-for-typedef-dashed-ident\u2468"}],"title":"4.3. \nPrefixed Author-defined Identifiers: the <dashed-ident> type"},{"refs":[{"id":"ref-for-typedef-dashed-ident\u2460\u24ea"}],"title":"\nAdditions Since Level 3"}],"url":"#typedef-dashed-ident"}, "typedef-dimension": {"dfnID":"typedef-dimension","dfnText":"<dimension>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-dimension"}],"title":"5.4. \nNumbers with Units: dimension values"},{"refs":[{"id":"ref-for-typedef-dimension\u2460"}],"title":"7.1. \nAngle Units: the <angle> type and deg, grad, rad, turn units"},{"refs":[{"id":"ref-for-typedef-dimension\u2461"}],"title":"10.2. \nComparison Functions: min(), max(), and clamp()"},{"refs":[{"id":"ref-for-typedef-dimension\u2462"},{"id":"ref-for-typedef-dimension\u2463"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-typedef-dimension\u2464"}],"title":"10.4. \nTrigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2()"},{"refs":[{"id":"ref-for-typedef-dimension\u2465"}],"title":"10.5. \nExponential Functions: pow(), sqrt(), hypot(), log(), exp()"},{"refs":[{"id":"ref-for-typedef-dimension\u2466"}],"title":"10.8. \nSyntax"},{"refs":[{"id":"ref-for-typedef-dimension\u2467"}],"title":"10.9. \nType Checking"}],"url":"#typedef-dimension"}, "typedef-frequency-percentage": {"dfnID":"typedef-frequency-percentage","dfnText":"<frequency-percentage>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-frequency-percentage"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"}],"url":"#typedef-frequency-percentage"}, "typedef-ident": {"dfnID":"typedef-ident","dfnText":"<ident>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-ident"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-typedef-ident\u2460"}],"title":"4.5.3. \nURL Modifiers"}],"url":"#typedef-ident"}, "typedef-length-percentage": {"dfnID":"typedef-length-percentage","dfnText":"<length-percentage>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"},{"refs":[{"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"}],"title":"8.3. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2465"},{"id":"ref-for-typedef-length-percentage\u2466"}],"title":"8.3.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2467"},{"id":"ref-for-typedef-length-percentage\u2468"}],"title":"8.3.3. \nCombination of <position>"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460\u24ea"}],"title":"10. \nMathematical Expressions"}],"url":"#typedef-length-percentage"}, "typedef-position": {"dfnID":"typedef-position","dfnText":"<position>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-position"}],"title":"2.8. \nNon-Terminal Definitions and Grammar Production Blocks"},{"refs":[{"id":"ref-for-typedef-position\u2460"},{"id":"ref-for-typedef-position\u2461"},{"id":"ref-for-typedef-position\u2462"}],"title":"8.3. \n2D Positioning: the <position> type"},{"refs":[{"id":"ref-for-typedef-position\u2463"},{"id":"ref-for-typedef-position\u2464"},{"id":"ref-for-typedef-position\u2465"},{"id":"ref-for-typedef-position\u2466"}],"title":"8.3.1. \nParsing <position>"},{"refs":[{"id":"ref-for-typedef-position\u2467"},{"id":"ref-for-typedef-position\u2468"},{"id":"ref-for-typedef-position\u2460\u24ea"},{"id":"ref-for-typedef-position\u2460\u2460"}],"title":"8.3.2. \nSerializing <position>"},{"refs":[{"id":"ref-for-typedef-position\u2460\u2461"},{"id":"ref-for-typedef-position\u2460\u2462"},{"id":"ref-for-typedef-position\u2460\u2463"}],"title":"8.3.3. \nCombination of <position>"},{"refs":[{"id":"ref-for-typedef-position\u2460\u2464"}],"title":"\nRecent Changes"}],"url":"#typedef-position"}, "typedef-quirky-length": {"dfnID":"typedef-quirky-length","dfnText":"<quirky-length>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-quirky-length"},{"id":"ref-for-typedef-quirky-length\u2460"},{"id":"ref-for-typedef-quirky-length\u2461"}],"title":"\nAppendix C: Quirky Lengths"},{"refs":[{"id":"ref-for-typedef-quirky-length\u2462"}],"title":"\nRecent Changes"}],"url":"#typedef-quirky-length"}, "typedef-rounding-strategy": {"dfnID":"typedef-rounding-strategy","dfnText":"<rounding-strategy>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-rounding-strategy"},{"id":"ref-for-typedef-rounding-strategy\u2460"},{"id":"ref-for-typedef-rounding-strategy\u2461"},{"id":"ref-for-typedef-rounding-strategy\u2462"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-typedef-rounding-strategy\u2463"}],"title":"10.3.1. \nArgument Ranges"},{"refs":[{"id":"ref-for-typedef-rounding-strategy\u2464"},{"id":"ref-for-typedef-rounding-strategy\u2465"}],"title":"10.8. \nSyntax"}],"url":"#typedef-rounding-strategy"}, "typedef-time-percentage": {"dfnID":"typedef-time-percentage","dfnText":"<time-percentage>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-time-percentage"}],"title":"5.6.1. \nComputation and Combination of Percentage and Dimension Mixes"}],"url":"#typedef-time-percentage"}, "typedef-url-modifier": {"dfnID":"typedef-url-modifier","dfnText":"<url-modifier>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-url-modifier"},{"id":"ref-for-typedef-url-modifier\u2460"},{"id":"ref-for-typedef-url-modifier\u2461"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-typedef-url-modifier\u2462"},{"id":"ref-for-typedef-url-modifier\u2463"},{"id":"ref-for-typedef-url-modifier\u2464"}],"title":"4.5.3. \nURL Modifiers"}],"url":"#typedef-url-modifier"}, "url-local-url-flag": {"dfnID":"url-local-url-flag","dfnText":"local url flag","external":false,"refSections":[{"refs":[{"id":"ref-for-url-local-url-flag"},{"id":"ref-for-url-local-url-flag\u2460"}],"title":"4.5.1.1. \nFragment URLs"},{"refs":[{"id":"ref-for-url-local-url-flag\u2461"}],"title":"\nRecent Changes"}],"url":"#url-local-url-flag"}, "url-request-modifier-steps": {"dfnID":"url-request-modifier-steps","dfnText":"URL request modifier steps","external":false,"refSections":[],"url":"#url-request-modifier-steps"}, "url-value": {"dfnID":"url-value","dfnText":"<url>","external":false,"refSections":[{"refs":[{"id":"ref-for-url-value"}],"title":"4. \nTextual Data Types"},{"refs":[{"id":"ref-for-url-value\u2460"},{"id":"ref-for-url-value\u2461"},{"id":"ref-for-url-value\u2462"},{"id":"ref-for-url-value\u2463"}],"title":"4.5. \nResource Locators: the <url> type"},{"refs":[{"id":"ref-for-url-value\u2464"}],"title":"4.5.1. \nRelative URLs"},{"refs":[{"id":"ref-for-url-value\u2465"},{"id":"ref-for-url-value\u2466"},{"id":"ref-for-url-value\u2467"}],"title":"4.5.1.1. \nFragment URLs"},{"refs":[{"id":"ref-for-url-value\u2468"}],"title":"4.5.2. \nEmpty URLs"},{"refs":[{"id":"ref-for-url-value\u2460\u24ea"},{"id":"ref-for-url-value\u2460\u2460"}],"title":"4.5.3. \nURL Modifiers"},{"refs":[{"id":"ref-for-url-value\u2460\u2461"}],"title":"4.5.4. \nURL Processing Model"},{"refs":[{"id":"ref-for-url-value\u2460\u2462"}],"title":"8.2. \nImages: the <image> type"},{"refs":[{"id":"ref-for-url-value\u2460\u2463"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-url-value\u2460\u2464"}],"title":"\nAdditions Since Level 3"},{"refs":[{"id":"ref-for-url-value\u2460\u2465"}],"title":"\nSecurity Considerations"},{"refs":[{"id":"ref-for-url-value\u2460\u2466"}],"title":"\nPrivacy Considerations"}],"url":"#url-value"}, "valdef-calc--infinity": {"dfnID":"valdef-calc--infinity","dfnText":"-infinity","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-calc--infinity"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-valdef-calc--infinity\u2460"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"},{"refs":[{"id":"ref-for-valdef-calc--infinity\u2461"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-valdef-calc--infinity\u2462"}],"title":"\nAdditions Since Level 3"}],"url":"#valdef-calc--infinity"}, "valdef-calc-e": {"dfnID":"valdef-calc-e","dfnText":"e","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-e"}],"title":"10.7.1. \nNumeric Constants: e, pi"},{"refs":[{"id":"ref-for-valdef-calc-e\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#valdef-calc-e"}, "valdef-calc-infinity": {"dfnID":"valdef-calc-infinity","dfnText":"infinity","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-infinity"},{"id":"ref-for-valdef-calc-infinity\u2460"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-valdef-calc-infinity\u2461"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"},{"refs":[{"id":"ref-for-valdef-calc-infinity\u2462"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-valdef-calc-infinity\u2463"}],"title":"\nAdditions Since Level 3"}],"url":"#valdef-calc-infinity"}, "valdef-calc-nan": {"dfnID":"valdef-calc-nan","dfnText":"NaN","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-nan"},{"id":"ref-for-valdef-calc-nan\u2460"}],"title":"10.7.2. \nDegenerate Numeric Constants: infinity, -infinity, NaN"},{"refs":[{"id":"ref-for-valdef-calc-nan\u2461"}],"title":"10.9.1. \nInfinities, NaN, and Signed Zero"},{"refs":[{"id":"ref-for-valdef-calc-nan\u2462"}],"title":"10.13. \nSerialization"},{"refs":[{"id":"ref-for-valdef-calc-nan\u2463"},{"id":"ref-for-valdef-calc-nan\u2464"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-valdef-calc-nan\u2465"}],"title":"\nAdditions Since Level 3"}],"url":"#valdef-calc-nan"}, "valdef-calc-pi": {"dfnID":"valdef-calc-pi","dfnText":"pi","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-calc-pi"}],"title":"10.7.1. \nNumeric Constants: e, pi"},{"refs":[{"id":"ref-for-valdef-calc-pi\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#valdef-calc-pi"}, "valdef-clamp-none": {"dfnID":"valdef-clamp-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clamp-none"}],"title":"\nRecent Changes"}],"url":"#valdef-clamp-none"}, "valdef-rounding-strategy-down": {"dfnID":"valdef-rounding-strategy-down","dfnText":"down","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-rounding-strategy-down"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-valdef-rounding-strategy-down\u2460"}],"title":"10.3.1. \nArgument Ranges"}],"url":"#valdef-rounding-strategy-down"}, "valdef-rounding-strategy-nearest": {"dfnID":"valdef-rounding-strategy-nearest","dfnText":"nearest","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-rounding-strategy-nearest"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-valdef-rounding-strategy-nearest\u2460"}],"title":"10.3.1. \nArgument Ranges"}],"url":"#valdef-rounding-strategy-nearest"}, "valdef-rounding-strategy-to-zero": {"dfnID":"valdef-rounding-strategy-to-zero","dfnText":"to-zero","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-rounding-strategy-to-zero"},{"id":"ref-for-valdef-rounding-strategy-to-zero\u2460"}],"title":"10.3. \nStepped Value Functions: round(), mod(), and rem()"},{"refs":[{"id":"ref-for-valdef-rounding-strategy-to-zero\u2461"}],"title":"10.3.1. \nArgument Ranges"}],"url":"#valdef-rounding-strategy-to-zero"}, "valdef-rounding-strategy-up": {"dfnID":"valdef-rounding-strategy-up","dfnText":"up","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-rounding-strategy-up"}],"title":"10.3.1. \nArgument Ranges"}],"url":"#valdef-rounding-strategy-up"}, "vb": {"dfnID":"vb","dfnText":"vb","external":false,"refSections":[{"refs":[{"id":"ref-for-vb"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-vb\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#vb"}, "vh": {"dfnID":"vh","dfnText":"vh","external":false,"refSections":[{"refs":[{"id":"ref-for-vh"}],"title":"6.1. \nRelative Lengths"}],"url":"#vh"}, "vi": {"dfnID":"vi","dfnText":"vi","external":false,"refSections":[{"refs":[{"id":"ref-for-vi"}],"title":"6.1. \nRelative Lengths"},{"refs":[{"id":"ref-for-vi\u2460"}],"title":"\nAdditions Since Level 3"}],"url":"#vi"}, "viewport-percentage-lengths": {"dfnID":"viewport-percentage-lengths","dfnText":"viewport-percentage lengths","external":false,"refSections":[{"refs":[{"id":"ref-for-viewport-percentage-lengths"},{"id":"ref-for-viewport-percentage-lengths\u2460"},{"id":"ref-for-viewport-percentage-lengths\u2461"},{"id":"ref-for-viewport-percentage-lengths\u2462"},{"id":"ref-for-viewport-percentage-lengths\u2463"}],"title":"6.1.2.1. \nThe Large, Small, and Dynamic Viewport Sizes"},{"refs":[{"id":"ref-for-viewport-percentage-lengths\u2464"}],"title":"6.1.2.2. \nThe Various Viewport-relative Units"},{"refs":[{"id":"ref-for-viewport-percentage-lengths\u2465"},{"id":"ref-for-viewport-percentage-lengths\u2466"}],"title":"\nRecent Changes"},{"refs":[{"id":"ref-for-viewport-percentage-lengths\u2467"}],"title":"\nPrivacy Considerations"}],"url":"#viewport-percentage-lengths"}, "visual-angle-unit": {"dfnID":"visual-angle-unit","dfnText":"visual angle unit (pixel unit)","external":false,"refSections":[{"refs":[{"id":"ref-for-visual-angle-unit"},{"id":"ref-for-visual-angle-unit\u2460"},{"id":"ref-for-visual-angle-unit\u2461"},{"id":"ref-for-visual-angle-unit\u2462"},{"id":"ref-for-visual-angle-unit\u2463"},{"id":"ref-for-visual-angle-unit\u2464"},{"id":"ref-for-visual-angle-unit\u2465"},{"id":"ref-for-visual-angle-unit\u2466"}],"title":"6.2. \nAbsolute Lengths: the cm, mm, Q, in, pt, pc, px units"}],"url":"#visual-angle-unit"}, "vmax": {"dfnID":"vmax","dfnText":"vmax","external":false,"refSections":[{"refs":[{"id":"ref-for-vmax"}],"title":"6.1. \nRelative Lengths"}],"url":"#vmax"}, "vmin": {"dfnID":"vmin","dfnText":"vmin","external":false,"refSections":[{"refs":[{"id":"ref-for-vmin"}],"title":"6.1. \nRelative Lengths"}],"url":"#vmin"}, "vw": {"dfnID":"vw","dfnText":"vw","external":false,"refSections":[{"refs":[{"id":"ref-for-vw"}],"title":"6.1. \nRelative Lengths"}],"url":"#vw"}, "x": {"dfnID":"x","dfnText":"x","external":false,"refSections":[{"refs":[{"id":"ref-for-x"}],"title":"\nAdditions Since Level 3"}],"url":"#x"}, "zero-value": {"dfnID":"zero-value","dfnText":"<zero>","external":false,"refSections":[{"refs":[{"id":"ref-for-zero-value"}],"title":"5.3. \nReal Numbers: the <number> type"}],"url":"#zero-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 = { "#angle-value": "Expands to: deg | grad | rad | turn", "#frequency-value": "Expands to: hz | khz", "#length-value": "Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw", "#resolution-value": "Expands to: dpcm | dpi | dppx | x", "#time-value": "Expands to: ms | s", "#typedef-rounding-strategy": "Expands to: down | nearest | to-zero | up", "#url-value": "Expands to: local url flag", "https://www.w3.org/TR/CSS21/box.html#value-def-border-width": "Expands to: <length> | medium | thick | thin", "https://www.w3.org/TR/css-color-5/#typedef-color": "Expands to: <alpha-value> | accentcolor | accentcolortext | activeborder | activecaption | activetext | aliceblue | antiquewhite | appworkspace | aqua | aquamarine | azure | background | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | buttonborder | buttonface | buttonhighlight | buttonshadow | buttontext | cadetblue | canvas | canvastext | captiontext | 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 | field | fieldtext | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | graytext | green | greenyellow | grey | highlight | highlighttext | honeydew | hotpink | inactiveborder | inactivecaption | inactivecaptiontext | indianred | indigo | infobackground | infotext | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | linktext | magenta | mark | marktext | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | menu | menutext | 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 | scrollbar | seagreen | seashell | selecteditem | selecteditemtext | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | threeddarkshadow | threedface | threedhighlight | threedlightshadow | threedshadow | tomato | transparent | turquoise | violet | visitedtext | wheat | white | whitesmoke | window | windowframe | windowtext | yellow | yellowgreen", "https://www.w3.org/TR/css-easing-1/#typedef-easing-function": "Expands to: linear", "https://www.w3.org/TR/css-grid-2/#typedef-flex": "Expands to: fr", }; 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-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#Hz": {"export":true,"for_":["<frequency>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"hz","type":"value","url":"#Hz"}, "#Q": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"q","type":"value","url":"#Q"}, "#absolute-length": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"absolute length unit","type":"dfn","url":"#absolute-length"}, "#accumulation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"accumulation","type":"dfn","url":"#accumulation"}, "#addition": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"addition","type":"dfn","url":"#addition"}, "#anchor-unit": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"anchor","type":"dfn","url":"#anchor-unit"}, "#angle-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<angle>","type":"type","url":"#angle-value"}, "#between-zero-and-b": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"between zero and b","type":"dfn","url":"#between-zero-and-b"}, "#calc-calculation": {"export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"calculation","type":"dfn","url":"#calc-calculation"}, "#calculation-tree": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"calculation tree","type":"dfn","url":"#calculation-tree"}, "#calculation-tree-calc-operator-nodes": {"export":true,"for_":["calculation tree"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"calc-operator nodes","type":"dfn","url":"#calculation-tree-calc-operator-nodes"}, "#calculation-tree-operator-nodes": {"export":true,"for_":["calculation tree"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"operator nodes","type":"dfn","url":"#calculation-tree-operator-nodes"}, "#canonical-unit": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"canonical unit","type":"dfn","url":"#canonical-unit"}, "#cap": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"cap","type":"value","url":"#cap"}, "#ch": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"ch","type":"value","url":"#ch"}, "#cm": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"cm","type":"value","url":"#cm"}, "#comb-all": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"&&","type":"grammar","url":"#comb-all"}, "#comb-comma": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":",","type":"grammar","url":"#comb-comma"}, "#comb-one": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"|","type":"grammar","url":"#comb-one"}, "#compatible-units": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"compatible","type":"dfn","url":"#compatible-units"}, "#coordinated-value-list": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"coordinated value list","type":"dfn","url":"#coordinated-value-list"}, "#coordinating-list-property": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"coordinating list property","type":"dfn","url":"#coordinating-list-property"}, "#css-bracketed-range-notation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"bracketed range notation","type":"dfn","url":"#css-bracketed-range-notation"}, "#css-consistent-type": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"consistent type","type":"dfn","url":"#css-consistent-type"}, "#css-css-identifier": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"identifier","type":"dfn","url":"#css-css-identifier"}, "#css-grammar-production-block": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"css grammar production block","type":"dfn","url":"#css-grammar-production-block"}, "#css-infinity": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"infinite","type":"dfn","url":"#css-infinity"}, "#css-make-a-type-consistent": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"made consistent","type":"dfn","url":"#css-make-a-type-consistent"}, "#css-nan": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"nan","type":"dfn","url":"#css-nan"}, "#css-round-to-the-nearest-integer": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"round to the nearest integer","type":"dfn","url":"#css-round-to-the-nearest-integer"}, "#css-signed-zero": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"signed zero","type":"dfn","url":"#css-signed-zero"}, "#css-value-definition-syntax": {"export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"value definition syntax","type":"dfn","url":"#css-value-definition-syntax"}, "#css-wide-keywords": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"css-wide keywords","type":"dfn","url":"#css-wide-keywords"}, "#default-viewport-percentage-units": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"default viewport-percentage units","type":"dfn","url":"#default-viewport-percentage-units"}, "#deg": {"export":true,"for_":["<angle>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"deg","type":"value","url":"#deg"}, "#degenerate-ratio": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"degenerate ratio","type":"dfn","url":"#degenerate-ratio"}, "#determine-the-type-of-a-calculation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"determine the type of a calculation","type":"dfn","url":"#determine-the-type-of-a-calculation"}, "#device-pixel": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"device pixel","type":"dfn","url":"#device-pixel"}, "#dimension": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dimension","type":"dfn","url":"#dimension"}, "#dpcm": {"export":true,"for_":["<resolution>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dpcm","type":"value","url":"#dpcm"}, "#dpi": {"export":true,"for_":["<resolution>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dpi","type":"value","url":"#dpi"}, "#dppx": {"export":true,"for_":["<resolution>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dppx","type":"value","url":"#dppx"}, "#dvb": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dvb","type":"value","url":"#dvb"}, "#dvh": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dvh","type":"value","url":"#dvh"}, "#dvi": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dvi","type":"value","url":"#dvi"}, "#dvmax": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dvmax","type":"value","url":"#dvmax"}, "#dvmin": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dvmin","type":"value","url":"#dvmin"}, "#dvw": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dvw","type":"value","url":"#dvw"}, "#dynamic-viewport-percentage-units": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dynamic viewport-percentage units","type":"dfn","url":"#dynamic-viewport-percentage-units"}, "#dynamic-viewport-size": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"dynamic viewport size","type":"dfn","url":"#dynamic-viewport-size"}, "#em": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"em","type":"value","url":"#em"}, "#ex": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"ex","type":"value","url":"#ex"}, "#font-relative-length": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"font-relative lengths","type":"dfn","url":"#font-relative-length"}, "#frequency-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<frequency>","type":"type","url":"#frequency-value"}, "#funcdef-abs": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"abs()","type":"function","url":"#funcdef-abs"}, "#funcdef-acos": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"acos()","type":"function","url":"#funcdef-acos"}, "#funcdef-asin": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"asin()","type":"function","url":"#funcdef-asin"}, "#funcdef-atan": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"atan()","type":"function","url":"#funcdef-atan"}, "#funcdef-atan2": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"atan2()","type":"function","url":"#funcdef-atan2"}, "#funcdef-calc": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"calc()","type":"function","url":"#funcdef-calc"}, "#funcdef-clamp": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"clamp()","type":"function","url":"#funcdef-clamp"}, "#funcdef-cos": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"cos()","type":"function","url":"#funcdef-cos"}, "#funcdef-exp": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"exp()","type":"function","url":"#funcdef-exp"}, "#funcdef-hypot": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"hypot()","type":"function","url":"#funcdef-hypot"}, "#funcdef-log": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"log()","type":"function","url":"#funcdef-log"}, "#funcdef-max": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"max()","type":"function","url":"#funcdef-max"}, "#funcdef-min": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"min()","type":"function","url":"#funcdef-min"}, "#funcdef-mod": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"mod()","type":"function","url":"#funcdef-mod"}, "#funcdef-pow": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"pow()","type":"function","url":"#funcdef-pow"}, "#funcdef-rem": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"rem()","type":"function","url":"#funcdef-rem"}, "#funcdef-round": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"round()","type":"function","url":"#funcdef-round"}, "#funcdef-sign": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"sign()","type":"function","url":"#funcdef-sign"}, "#funcdef-sin": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"sin()","type":"function","url":"#funcdef-sin"}, "#funcdef-sqrt": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"sqrt()","type":"function","url":"#funcdef-sqrt"}, "#funcdef-src": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"src()","type":"function","url":"#funcdef-src"}, "#funcdef-tan": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"tan()","type":"function","url":"#funcdef-tan"}, "#funcdef-url": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"url()","type":"function","url":"#funcdef-url"}, "#functional-notation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"functional notation","type":"dfn","url":"#functional-notation"}, "#grad": {"export":true,"for_":["<angle>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"grad","type":"value","url":"#grad"}, "#ic": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"ic","type":"value","url":"#ic"}, "#identifier-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<custom-ident>","type":"type","url":"#identifier-value"}, "#in": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"in","type":"value","url":"#in"}, "#integer": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"integer","type":"dfn","url":"#integer"}, "#integer-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<integer>","type":"type","url":"#integer-value"}, "#interpolation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"interpolation","type":"dfn","url":"#interpolation"}, "#kHz": {"export":true,"for_":["<frequency>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"khz","type":"value","url":"#kHz"}, "#large-viewport-percentage-units": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"large viewport-percentage units","type":"dfn","url":"#large-viewport-percentage-units"}, "#large-viewport-size": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"large viewport size","type":"dfn","url":"#large-viewport-size"}, "#length-advance-measure": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"advance measure","type":"dfn","url":"#length-advance-measure"}, "#length-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<length>","type":"type","url":"#length-value"}, "#lh": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"lh","type":"value","url":"#lh"}, "#lvb": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"lvb","type":"value","url":"#lvb"}, "#lvh": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"lvh","type":"value","url":"#lvh"}, "#lvi": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"lvi","type":"value","url":"#lvi"}, "#lvmax": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"lvmax","type":"value","url":"#lvmax"}, "#lvmin": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"lvmin","type":"value","url":"#lvmin"}, "#lvw": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"lvw","type":"value","url":"#lvw"}, "#math-function": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"math function","type":"dfn","url":"#math-function"}, "#mm": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"mm","type":"value","url":"#mm"}, "#ms": {"export":true,"for_":["<time>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"ms","type":"value","url":"#ms"}, "#mult-comma": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"#","type":"grammar","url":"#mult-comma"}, "#mult-opt": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"?","type":"grammar","url":"#mult-opt"}, "#mult-zero-plus": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"*","type":"grammar","url":"#mult-zero-plus"}, "#not-additive": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"not additive","type":"dfn","url":"#not-additive"}, "#number": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"number","type":"dfn","url":"#number"}, "#number-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<number>","type":"type","url":"#number-value"}, "#numeric-data-types": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"numeric data types","type":"dfn","url":"#numeric-data-types"}, "#parse-a-calculation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"parsing a calculation","type":"dfn","url":"#parse-a-calculation"}, "#pc": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"pc","type":"value","url":"#pc"}, "#percentage-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<percentage>","type":"type","url":"#percentage-value"}, "#physical-unit": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"physical unit","type":"dfn","url":"#physical-unit"}, "#pt": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"pt","type":"value","url":"#pt"}, "#px": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"px","type":"value","url":"#px"}, "#rad": {"export":true,"for_":["<angle>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"rad","type":"value","url":"#rad"}, "#ratio-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<ratio>","type":"type","url":"#ratio-value"}, "#rcap": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"rcap","type":"value","url":"#rcap"}, "#rch": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"rch","type":"value","url":"#rch"}, "#reference-pixel": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"reference pixel","type":"dfn","url":"#reference-pixel"}, "#relative-length": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"relative length unit","type":"dfn","url":"#relative-length"}, "#rem": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"rem","type":"value","url":"#rem"}, "#resolution-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<resolution>","type":"type","url":"#resolution-value"}, "#rex": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"rex","type":"value","url":"#rex"}, "#ric": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"ric","type":"value","url":"#ric"}, "#rlh": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"rlh","type":"value","url":"#rlh"}, "#root-font-relative-lengths": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"root font-relative lengths","type":"dfn","url":"#root-font-relative-lengths"}, "#s": {"export":true,"for_":["<time>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"s","type":"value","url":"#s"}, "#serialize-a-calculation-tree": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"serialize the calculation tree","type":"dfn","url":"#serialize-a-calculation-tree"}, "#serialize-a-math-function": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"serialize a math function","type":"dfn","url":"#serialize-a-math-function"}, "#simplify-a-calculation-tree": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"simplifying a calculation tree","type":"dfn","url":"#simplify-a-calculation-tree"}, "#small-viewport-percentage-units": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"small viewport-percentage units","type":"dfn","url":"#small-viewport-percentage-units"}, "#small-viewport-size": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"small viewport size","type":"dfn","url":"#small-viewport-size"}, "#snap-a-length-as-a-border-width": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"snap as a border width","type":"dfn","url":"#snap-a-length-as-a-border-width"}, "#sort-a-calculations-children": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"sort a calculation's children","type":"dfn","url":"#sort-a-calculations-children"}, "#string-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<string>","type":"type","url":"#string-value"}, "#svb": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"svb","type":"value","url":"#svb"}, "#svh": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"svh","type":"value","url":"#svh"}, "#svi": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"svi","type":"value","url":"#svi"}, "#svmax": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"svmax","type":"value","url":"#svmax"}, "#svmin": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"svmin","type":"value","url":"#svmin"}, "#svw": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"svw","type":"value","url":"#svw"}, "#time-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<time>","type":"type","url":"#time-value"}, "#top-level-calculation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"top-level calculation","type":"dfn","url":"#top-level-calculation"}, "#turn": {"export":true,"for_":["<angle>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"turn","type":"value","url":"#turn"}, "#typedef-angle-percentage": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<angle-percentage>","type":"type","url":"#typedef-angle-percentage"}, "#typedef-calc-keyword": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<calc-keyword>","type":"type","url":"#typedef-calc-keyword"}, "#typedef-calc-product": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<calc-product>","type":"type","url":"#typedef-calc-product"}, "#typedef-calc-sum": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<calc-sum>","type":"type","url":"#typedef-calc-sum"}, "#typedef-calc-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<calc-value>","type":"type","url":"#typedef-calc-value"}, "#typedef-dashed-ident": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<dashed-ident>","type":"type","url":"#typedef-dashed-ident"}, "#typedef-dimension": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<dimension>","type":"type","url":"#typedef-dimension"}, "#typedef-frequency-percentage": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<frequency-percentage>","type":"type","url":"#typedef-frequency-percentage"}, "#typedef-ident": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<ident>","type":"type","url":"#typedef-ident"}, "#typedef-length-percentage": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<length-percentage>","type":"type","url":"#typedef-length-percentage"}, "#typedef-position": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<position>","type":"type","url":"#typedef-position"}, "#typedef-quirky-length": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<quirky-length>","type":"type","url":"#typedef-quirky-length"}, "#typedef-rounding-strategy": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<rounding-strategy>","type":"type","url":"#typedef-rounding-strategy"}, "#typedef-time-percentage": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<time-percentage>","type":"type","url":"#typedef-time-percentage"}, "#typedef-url-modifier": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<url-modifier>","type":"type","url":"#typedef-url-modifier"}, "#url-local-url-flag": {"export":true,"for_":["<url>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"local url flag","type":"dfn","url":"#url-local-url-flag"}, "#url-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<url>","type":"type","url":"#url-value"}, "#valdef-calc--infinity": {"export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"-infinity","type":"value","url":"#valdef-calc--infinity"}, "#valdef-calc-e": {"export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"e","type":"value","url":"#valdef-calc-e"}, "#valdef-calc-infinity": {"export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"infinity","type":"value","url":"#valdef-calc-infinity"}, "#valdef-calc-nan": {"export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"nan","type":"value","url":"#valdef-calc-nan"}, "#valdef-calc-pi": {"export":true,"for_":["calc()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"pi","type":"value","url":"#valdef-calc-pi"}, "#valdef-clamp-none": {"export":true,"for_":["clamp()"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"none","type":"value","url":"#valdef-clamp-none"}, "#valdef-rounding-strategy-down": {"export":true,"for_":["<rounding-strategy>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"down","type":"value","url":"#valdef-rounding-strategy-down"}, "#valdef-rounding-strategy-nearest": {"export":true,"for_":["<rounding-strategy>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"nearest","type":"value","url":"#valdef-rounding-strategy-nearest"}, "#valdef-rounding-strategy-to-zero": {"export":true,"for_":["<rounding-strategy>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"to-zero","type":"value","url":"#valdef-rounding-strategy-to-zero"}, "#valdef-rounding-strategy-up": {"export":true,"for_":["<rounding-strategy>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"up","type":"value","url":"#valdef-rounding-strategy-up"}, "#vb": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"vb","type":"value","url":"#vb"}, "#vh": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"vh","type":"value","url":"#vh"}, "#vi": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"vi","type":"value","url":"#vi"}, "#viewport-percentage-lengths": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"viewport-percentage lengths","type":"dfn","url":"#viewport-percentage-lengths"}, "#visual-angle-unit": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"pixel unit","type":"dfn","url":"#visual-angle-unit"}, "#vmax": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"vmax","type":"value","url":"#vmax"}, "#vmin": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"vmin","type":"value","url":"#vmin"}, "#vw": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"vw","type":"value","url":"#vw"}, "#x": {"export":true,"for_":["<resolution>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"x","type":"value","url":"#x"}, "#zero-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"local","text":"<zero>","type":"type","url":"#zero-value"}, "https://dom.spec.whatwg.org/#concept-document-quirks": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"quirks mode","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "https://dom.spec.whatwg.org/#concept-node-tree": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"node tree","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-node-tree"}, "https://dom.spec.whatwg.org/#concept-tree-order": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"tree order","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-order"}, "https://dom.spec.whatwg.org/#document": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Document","type":"interface","url":"https://dom.spec.whatwg.org/#document"}, "https://dom.spec.whatwg.org/#shadowroot": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"ShadowRoot","type":"interface","url":"https://dom.spec.whatwg.org/#shadowroot"}, "https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation": {"export":true,"for_":["CSS"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"internal representation","type":"dfn","url":"https://drafts.css-houdini.org/css-typed-om-1/#css-internal-representation"}, "https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types": {"export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"add two types","type":"dfn","url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-add-two-types"}, "https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type": {"export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"invert a type","type":"dfn","url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-invert-a-type"}, "https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match": {"export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"match","type":"dfn","url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-match"}, "https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types": {"export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"multiply two types","type":"dfn","url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types"}, "https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint": {"export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"percent hint","type":"dfn","url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-percent-hint"}, "https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type": {"export":true,"for_":["CSSNumericValue"],"level":"1","normative":true,"shortname":"css-typed-om","spec":"css-typed-om-1","status":"current","text":"type","type":"dfn","url":"https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-type"}, "https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name": {"export":true,"for_":["CSS"],"level":"1","normative":true,"shortname":"css-scoping","spec":"css-scoping-1","status":"current","text":"tree-scoped name","type":"dfn","url":"https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name"}, "https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference": {"export":true,"for_":["CSS"],"level":"1","normative":true,"shortname":"css-scoping","spec":"css-scoping-1","status":"current","text":"tree-scoped reference","type":"dfn","url":"https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference"}, "https://drafts.csswg.org/css-values-5/#funcdef-attr": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"current","text":"attr()","type":"function","url":"https://drafts.csswg.org/css-values-5/#funcdef-attr"}, "https://drafts.csswg.org/css-values-5/#funcdef-mix": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"current","text":"mix()","type":"function","url":"https://drafts.csswg.org/css-values-5/#funcdef-mix"}, "https://drafts.csswg.org/css-values-5/#funcdef-toggle": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-values","spec":"css-values-5","status":"current","text":"toggle()","type":"function","url":"https://drafts.csswg.org/css-values-5/#funcdef-toggle"}, "https://drafts.csswg.org/css2/#propdef-line-height": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"line-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "https://fetch.spec.whatwg.org/#concept-fetch": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"fetch","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-fetch"}, "https://fetch.spec.whatwg.org/#concept-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-client": {"export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"client","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-client"}, "https://fetch.spec.whatwg.org/#concept-request-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-destination": {"export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"destination","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-destination"}, "https://fetch.spec.whatwg.org/#concept-request-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-origin": {"export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"origin","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-origin"}, "https://fetch.spec.whatwg.org/#concept-request-referrer": {"export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"referrer","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-referrer"}, "https://fetch.spec.whatwg.org/#concept-request-url": {"export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"url","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-url"}, "https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag": {"export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"use-url-credentials flag","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag"}, "https://fetch.spec.whatwg.org/#concept-response": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"response","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-response"}, "https://fetch.spec.whatwg.org/#process-response-end-of-body": {"export":true,"for_":["fetch"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"processresponseconsumebody","type":"dfn","url":"https://fetch.spec.whatwg.org/#process-response-end-of-body"}, "https://fetch.spec.whatwg.org/#request-initiator-type": {"export":true,"for_":["request"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"initiator type","type":"dfn","url":"https://fetch.spec.whatwg.org/#request-initiator-type"}, "https://fetch.spec.whatwg.org/#requestdestination": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"RequestDestination","type":"enum","url":"https://fetch.spec.whatwg.org/#requestdestination"}, "https://html.spec.whatwg.org/multipage/browsing-the-web.html#find-a-potential-indicated-element": {"export":false,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"find a potential indicated element","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsing-the-web.html#find-a-potential-indicated-element"}, "https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"the body element","type":"dfn","url":"https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2"}, "https://html.spec.whatwg.org/multipage/semantics.html#the-base-element": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"base","type":"element","url":"https://html.spec.whatwg.org/multipage/semantics.html#the-base-element"}, "https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url": {"export":true,"for_":["environment settings object"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"api base url","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url"}, "https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin": {"export":true,"for_":["environment settings object"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"origin","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin"}, "https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"relevant settings object","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object"}, "https://infra.spec.whatwg.org/#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/#code-point": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"code point","type":"dfn","url":"https://infra.spec.whatwg.org/#code-point"}, "https://infra.spec.whatwg.org/#implementation-defined": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"implementation-defined","type":"dfn","url":"https://infra.spec.whatwg.org/#implementation-defined"}, "https://infra.spec.whatwg.org/#list-iterate": {"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": {"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/#string-concatenate": {"export":true,"for_":["string"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"concatenate","type":"dfn","url":"https://infra.spec.whatwg.org/#string-concatenate"}, "https://infra.spec.whatwg.org/#string-is": {"export":true,"for_":["string"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"identical to","type":"dfn","url":"https://infra.spec.whatwg.org/#string-is"}, "https://url.spec.whatwg.org/#concept-url": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"url","spec":"url","status":"current","text":"url","type":"dfn","url":"https://url.spec.whatwg.org/#concept-url"}, "https://url.spec.whatwg.org/#concept-url-fragment": {"export":true,"for_":["url"],"level":"1","normative":true,"shortname":"url","spec":"url","status":"current","text":"fragment","type":"dfn","url":"https://url.spec.whatwg.org/#concept-url-fragment"}, "https://url.spec.whatwg.org/#concept-url-parser": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"url","spec":"url","status":"current","text":"url parser","type":"dfn","url":"https://url.spec.whatwg.org/#concept-url-parser"}, "https://url.spec.whatwg.org/#string-percent-encode-after-encoding": {"export":false,"for_":["string"],"level":"1","normative":true,"shortname":"url","spec":"url","status":"current","text":"percent-encode after encoding","type":"dfn","url":"https://url.spec.whatwg.org/#string-percent-encode-after-encoding"}, "https://www.w3.org/TR/CSS21/box.html#value-def-border-width": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"<border-width>","type":"type","url":"https://www.w3.org/TR/CSS21/box.html#value-def-border-width"}, "https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"border-collapse","type":"property","url":"https://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse"}, "https://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"border-spacing","type":"property","url":"https://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing"}, "https://www.w3.org/TR/css-2023/#user-agent": {"export":false,"for_":[],"level":"2023","normative":true,"shortname":"css","spec":"css-2023","status":"snapshot","text":"ua","type":"dfn","url":"https://www.w3.org/TR/css-2023/#user-agent"}, "https://www.w3.org/TR/css-animations-1/#propdef-animation": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"snapshot","text":"animation","type":"property","url":"https://www.w3.org/TR/css-animations-1/#propdef-animation"}, "https://www.w3.org/TR/css-animations-1/#propdef-animation-iteration-count": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"snapshot","text":"animation-iteration-count","type":"property","url":"https://www.w3.org/TR/css-animations-1/#propdef-animation-iteration-count"}, "https://www.w3.org/TR/css-animations-1/#propdef-animation-name": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"snapshot","text":"animation-name","type":"property","url":"https://www.w3.org/TR/css-animations-1/#propdef-animation-name"}, "https://www.w3.org/TR/css-animations-1/#propdef-animation-timing-function": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"snapshot","text":"animation-timing-function","type":"property","url":"https://www.w3.org/TR/css-animations-1/#propdef-animation-timing-function"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background-attachment": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background-attachment","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-attachment"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background-image","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background-position","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-bottom-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-bottom-width","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-bottom-width"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-color": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-color","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-color"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-left-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-left-width","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-left-width"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-right-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-right-width","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-right-width"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-top-width","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-width"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-width","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"box-shadow","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-box-shadow"}, "https://www.w3.org/TR/css-backgrounds-3/#valdef-background-position-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-box-4/#propdef-margin": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-margin"}, "https://www.w3.org/TR/css-box-4/#propdef-margin-bottom": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin-bottom","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-margin-bottom"}, "https://www.w3.org/TR/css-box-4/#propdef-margin-left": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin-left","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-margin-left"}, "https://www.w3.org/TR/css-box-4/#propdef-margin-right": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin-right","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-margin-right"}, "https://www.w3.org/TR/css-box-4/#propdef-margin-top": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"margin-top","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-margin-top"}, "https://www.w3.org/TR/css-box-4/#propdef-padding": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-padding"}, "https://www.w3.org/TR/css-box-4/#propdef-padding-bottom": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding-bottom","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-padding-bottom"}, "https://www.w3.org/TR/css-box-4/#propdef-padding-left": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding-left","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-padding-left"}, "https://www.w3.org/TR/css-box-4/#propdef-padding-right": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding-right","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-padding-right"}, "https://www.w3.org/TR/css-box-4/#propdef-padding-top": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"padding-top","type":"property","url":"https://www.w3.org/TR/css-box-4/#propdef-padding-top"}, "https://www.w3.org/TR/css-break-3/#propdef-orphans": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"snapshot","text":"orphans","type":"property","url":"https://www.w3.org/TR/css-break-3/#propdef-orphans"}, "https://www.w3.org/TR/css-cascade-5/#actual-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"actual value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#actual-value"}, "https://www.w3.org/TR/css-cascade-5/#at-ruledef-import": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"@import","type":"at-rule","url":"https://www.w3.org/TR/css-cascade-5/#at-ruledef-import"}, "https://www.w3.org/TR/css-cascade-5/#computed-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"computed value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#computed-value"}, "https://www.w3.org/TR/css-cascade-5/#shorthand-property": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"shorthand property","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#shorthand-property"}, "https://www.w3.org/TR/css-cascade-5/#specified-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"specified value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#specified-value"}, "https://www.w3.org/TR/css-cascade-5/#used-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"used value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#used-value"}, "https://www.w3.org/TR/css-cascade-5/#valdef-all-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": {"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": {"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/#funcdef-hsl": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"hsl()","type":"function","url":"https://www.w3.org/TR/css-color-4/#funcdef-hsl"}, "https://www.w3.org/TR/css-color-4/#funcdef-rgba": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"rgba()","type":"function","url":"https://www.w3.org/TR/css-color-4/#funcdef-rgba"}, "https://www.w3.org/TR/css-color-4/#propdef-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-5/#at-ruledef-profile": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"snapshot","text":"@color-profile","type":"at-rule","url":"https://www.w3.org/TR/css-color-5/#at-ruledef-profile"}, "https://www.w3.org/TR/css-color-5/#relative-color": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"snapshot","text":"relative color","type":"dfn","url":"https://www.w3.org/TR/css-color-5/#relative-color"}, "https://www.w3.org/TR/css-color-5/#typedef-color": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"snapshot","text":"<color>","type":"type","url":"https://www.w3.org/TR/css-color-5/#typedef-color"}, "https://www.w3.org/TR/css-conditional-3/#at-ruledef-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/#dom-css-supports-conditiontext": {"export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"snapshot","text":"supports(conditionText)","type":"method","url":"https://www.w3.org/TR/css-conditional-3/#dom-css-supports-conditiontext"}, "https://www.w3.org/TR/css-counter-styles-3/#disc": {"export":true,"for_":["<counter-style-name>"],"level":"3","normative":true,"shortname":"css-counter-styles","spec":"css-counter-styles-3","status":"snapshot","text":"disc","type":"value","url":"https://www.w3.org/TR/css-counter-styles-3/#disc"}, "https://www.w3.org/TR/css-display-3/#containing-block": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"containing block","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#containing-block"}, "https://www.w3.org/TR/css-display-3/#initial-containing-block": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"initial containing block","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#initial-containing-block"}, "https://www.w3.org/TR/css-display-3/#root-element": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"root element","type":"dfn","url":"https://www.w3.org/TR/css-display-3/#root-element"}, "https://www.w3.org/TR/css-easing-1/#easing-function": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-easing","spec":"css-easing-1","status":"snapshot","text":"timing function","type":"dfn","url":"https://www.w3.org/TR/css-easing-1/#easing-function"}, "https://www.w3.org/TR/css-easing-1/#typedef-easing-function": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-easing","spec":"css-easing-1","status":"snapshot","text":"<easing-function>","type":"type","url":"https://www.w3.org/TR/css-easing-1/#typedef-easing-function"}, "https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-in": {"export":true,"for_":["<cubic-bezier-easing-function>"],"level":"1","normative":true,"shortname":"css-easing","spec":"css-easing-1","status":"snapshot","text":"ease-in","type":"value","url":"https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-in"}, "https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-out": {"export":true,"for_":["<cubic-bezier-easing-function>"],"level":"1","normative":true,"shortname":"css-easing","spec":"css-easing-1","status":"snapshot","text":"ease-out","type":"value","url":"https://www.w3.org/TR/css-easing-1/#valdef-cubic-bezier-easing-function-ease-out"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-family": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-family","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-family"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-size": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-size","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-size"}, "https://www.w3.org/TR/css-fonts-5/#at-font-face-rule": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-fonts","spec":"css-fonts-5","status":"snapshot","text":"@font-face","type":"at-rule","url":"https://www.w3.org/TR/css-fonts-5/#at-font-face-rule"}, "https://www.w3.org/TR/css-fonts-5/#descdef-font-face-font-size": {"export":true,"for_":["@font-face"],"level":"5","normative":true,"shortname":"css-fonts","spec":"css-fonts-5","status":"snapshot","text":"font-size","type":"descriptor","url":"https://www.w3.org/TR/css-fonts-5/#descdef-font-face-font-size"}, "https://www.w3.org/TR/css-grid-2/#typedef-flex": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"snapshot","text":"<flex>","type":"type","url":"https://www.w3.org/TR/css-grid-2/#typedef-flex"}, "https://www.w3.org/TR/css-grid-2/#valdef-flex-fr": {"export":true,"for_":["<flex>"],"level":"2","normative":true,"shortname":"css-grid","spec":"css-grid-2","status":"snapshot","text":"fr","type":"value","url":"https://www.w3.org/TR/css-grid-2/#valdef-flex-fr"}, "https://www.w3.org/TR/css-images-3/#typedef-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-linear-gradient": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"snapshot","text":"linear-gradient()","type":"function","url":"https://www.w3.org/TR/css-images-4/#funcdef-linear-gradient"}, "https://www.w3.org/TR/css-images-4/#propdef-image-resolution": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"snapshot","text":"image-resolution","type":"property","url":"https://www.w3.org/TR/css-images-4/#propdef-image-resolution"}, "https://www.w3.org/TR/css-inline-3/#propdef-vertical-align": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"snapshot","text":"vertical-align","type":"property","url":"https://www.w3.org/TR/css-inline-3/#propdef-vertical-align"}, "https://www.w3.org/TR/css-inline-3/#valdef-line-height-normal": {"export":true,"for_":["line-height"],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"snapshot","text":"normal","type":"value","url":"https://www.w3.org/TR/css-inline-3/#valdef-line-height-normal"}, "https://www.w3.org/TR/css-masking-1/#propdef-clip": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"snapshot","text":"clip","type":"property","url":"https://www.w3.org/TR/css-masking-1/#propdef-clip"}, "https://www.w3.org/TR/css-overflow-3/#propdef-overflow": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"overflow","type":"property","url":"https://www.w3.org/TR/css-overflow-3/#propdef-overflow"}, "https://www.w3.org/TR/css-overflow-3/#propdef-scrollbar-gutter": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"scrollbar-gutter","type":"property","url":"https://www.w3.org/TR/css-overflow-3/#propdef-scrollbar-gutter"}, "https://www.w3.org/TR/css-overflow-4/#propdef-max-lines": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-overflow","spec":"css-overflow-4","status":"snapshot","text":"max-lines","type":"property","url":"https://www.w3.org/TR/css-overflow-4/#propdef-max-lines"}, "https://www.w3.org/TR/css-page-3/#page-area": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-page","spec":"css-page-3","status":"snapshot","text":"page area","type":"dfn","url":"https://www.w3.org/TR/css-page-3/#page-area"}, "https://www.w3.org/TR/css-position-3/#propdef-bottom": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"snapshot","text":"bottom","type":"property","url":"https://www.w3.org/TR/css-position-3/#propdef-bottom"}, "https://www.w3.org/TR/css-position-3/#propdef-left": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"snapshot","text":"left","type":"property","url":"https://www.w3.org/TR/css-position-3/#propdef-left"}, "https://www.w3.org/TR/css-position-3/#propdef-right": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"snapshot","text":"right","type":"property","url":"https://www.w3.org/TR/css-position-3/#propdef-right"}, "https://www.w3.org/TR/css-position-3/#propdef-top": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"snapshot","text":"top","type":"property","url":"https://www.w3.org/TR/css-position-3/#propdef-top"}, "https://www.w3.org/TR/css-rhythm-1/#propdef-block-step-size": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-rhythm","spec":"css-rhythm-1","status":"snapshot","text":"block-step-size","type":"property","url":"https://www.w3.org/TR/css-rhythm-1/#propdef-block-step-size"}, "https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-rect": {"export":true,"for_":["<basic-shape>"],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"snapshot","text":"rect()","type":"function","url":"https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-rect"}, "https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"box-sizing","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-box-sizing"}, "https://www.w3.org/TR/css-sizing-3/#propdef-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-max-height": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"max-height","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-max-height"}, "https://www.w3.org/TR/css-sizing-3/#propdef-max-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"max-width","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-max-width"}, "https://www.w3.org/TR/css-sizing-3/#propdef-min-height": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"min-height","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-min-height"}, "https://www.w3.org/TR/css-sizing-3/#propdef-min-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"snapshot","text":"min-width","type":"property","url":"https://www.w3.org/TR/css-sizing-3/#propdef-min-width"}, "https://www.w3.org/TR/css-sizing-3/#propdef-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": {"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-syntax-3/#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/#consume-a-url-token": {"export":false,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"consume a url token","type":"dfn","url":"https://www.w3.org/TR/css-syntax-3/#consume-a-url-token"}, "https://www.w3.org/TR/css-syntax-3/#simple-block": {"export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"simple block","type":"dfn","url":"https://www.w3.org/TR/css-syntax-3/#simple-block"}, "https://www.w3.org/TR/css-syntax-3/#typedef-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-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-dimension-token": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<dimension-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-dimension-token"}, "https://www.w3.org/TR/css-syntax-3/#typedef-function-token": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<function-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-function-token"}, "https://www.w3.org/TR/css-syntax-3/#typedef-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-number-token": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<number-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-number-token"}, "https://www.w3.org/TR/css-syntax-3/#typedef-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/#typedef-string-token": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<string-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-string-token"}, "https://www.w3.org/TR/css-syntax-3/#typedef-url-token": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<url-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-url-token"}, "https://www.w3.org/TR/css-syntax-3/#typedef-whitespace-token": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"snapshot","text":"<whitespace-token>","type":"type","url":"https://www.w3.org/TR/css-syntax-3/#typedef-whitespace-token"}, "https://www.w3.org/TR/css-syntax-3/#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-text-3/#propdef-text-align": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"snapshot","text":"text-align","type":"property","url":"https://www.w3.org/TR/css-text-3/#propdef-text-align"}, "https://www.w3.org/TR/css-text-4/#propdef-letter-spacing": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"letter-spacing","type":"property","url":"https://www.w3.org/TR/css-text-4/#propdef-letter-spacing"}, "https://www.w3.org/TR/css-text-4/#propdef-tab-size": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"tab-size","type":"property","url":"https://www.w3.org/TR/css-text-4/#propdef-tab-size"}, "https://www.w3.org/TR/css-text-4/#propdef-text-indent": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"text-indent","type":"property","url":"https://www.w3.org/TR/css-text-4/#propdef-text-indent"}, "https://www.w3.org/TR/css-text-4/#propdef-word-spacing": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"word-spacing","type":"property","url":"https://www.w3.org/TR/css-text-4/#propdef-word-spacing"}, "https://www.w3.org/TR/css-text-4/#valdef-text-align-center": {"export":true,"for_":["text-align"],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"center","type":"value","url":"https://www.w3.org/TR/css-text-4/#valdef-text-align-center"}, "https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"snapshot","text":"text-decoration","type":"property","url":"https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration"}, "https://www.w3.org/TR/css-transforms-1/#propdef-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-ui-4/#propdef-outline-color": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-ui","spec":"css-ui-4","status":"snapshot","text":"outline-color","type":"property","url":"https://www.w3.org/TR/css-ui-4/#propdef-outline-color"}, "https://www.w3.org/TR/css-variables-1/#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": {"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-writing-modes-4/#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/#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/#propdef-text-orientation": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"text-orientation","type":"property","url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation"}, "https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"writing-mode","type":"property","url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode"}, "https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright": {"export":true,"for_":["text-orientation"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"upright","type":"value","url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-text-orientation-upright"}, "https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr": {"export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"vertical-lr","type":"value","url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-lr"}, "https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-rl": {"export":true,"for_":["writing-mode"],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"vertical-rl","type":"value","url":"https://www.w3.org/TR/css-writing-modes-4/#valdef-writing-mode-vertical-rl"}, "https://www.w3.org/TR/css-writing-modes-4/#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/cssom-1/#concept-css-style-sheet-location": {"export":false,"for_":["CSSStyleSheet"],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"snapshot","text":"location","type":"dfn","url":"https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-location"}, "https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-origin-clean-flag": {"export":false,"for_":["CSSStyleSheet"],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"snapshot","text":"origin-clean flag","type":"dfn","url":"https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-origin-clean-flag"}, "https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-stylesheet-base-url": {"export":false,"for_":["CSSStyleSheet"],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"snapshot","text":"stylesheet base url","type":"dfn","url":"https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-stylesheet-base-url"}, "https://www.w3.org/TR/cssom-1/#cssstylesheet": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"snapshot","text":"CSSStyleSheet","type":"interface","url":"https://www.w3.org/TR/cssom-1/#cssstylesheet"}, "https://www.w3.org/TR/mediaqueries-5/#continuous-media": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"continuous media","type":"dfn","url":"https://www.w3.org/TR/mediaqueries-5/#continuous-media"}, "https://www.w3.org/TR/mediaqueries-5/#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/#paged-media": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"snapshot","text":"paged media","type":"dfn","url":"https://www.w3.org/TR/mediaqueries-5/#paged-media"}, "https://www.w3.org/TR/web-animations-1/#discrete": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"snapshot","text":"discrete","type":"dfn","url":"https://www.w3.org/TR/web-animations-1/#discrete"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.text != linkText) { dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.text) ); } 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)+/, " ").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>