CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>CSS Cascading and Inheritance Level 4</title> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <meta content="testing" name="csswg-work-status"> <meta content="CR" name="w3c-status"> <meta content="This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. New in this level are the ''revert'' keyword and <supports-condition> for the ''@import'' rule." name="abstract"> <link href="default.css" rel="stylesheet" type="text/css"> <meta content="Bikeshed version cace53f8c, updated Tue Dec 7 12:12:54 2021 -0800" name="generator"> <link href="https://www.w3.org/TR/css-cascade-4/" rel="canonical"> <meta content="f3360e2259c755578a7a9b7439adbfa2ee923f3b" name="document-revision"> <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>/* 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; }</style> <style>/* style-caniuse-panel */ :root { --caniuse-shadow: #999; --caniuse-nosupport-text: #ccc; --caniuse-partialsupport-text: #666; } .caniuse-status { font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; top: auto; right: 0.3em; background: var(--borderedblock-bg, #EEE); color: var(--text, black); box-shadow: 0 0 3px var(--caniuse-shadow, #999); overflow: hidden; border-collapse: initial; border-spacing: initial; } .caniuse-status.wrapped { width: auto; height: 1em; } .caniuse-status.wrapped > :not(input) { display: none; } .caniuse-status > input { float: right; border: none; background: transparent; padding: 0; margin: 0; } .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; min-width: 1.5em; 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) { width: 1em; height: 1em; } .caniuse-status.wrapped > :not(input) { display: block; } .caniuse-status:not(.wrapped) > :not(input) { display: none; } }</style> <style>/* 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>/* style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); } .dfn-panel { position: absolute; z-index: 35; height: auto; width: -webkit-fit-content; width: fit-content; max-width: 300px; 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; } .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 > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0; } .dfn-panel li { list-style: inside; } .dfn-panel.activated { display: inline-block; position: fixed; left: .5em; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; } .dfn-paneled { cursor: pointer; } </style> <style>/* style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* 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>/* 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%; } 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>/* 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 */ </style> <style>/* style-var-click-highlighting */ var { cursor: pointer; } var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; } var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; } var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; } var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; } var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; } var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; } var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; } </style> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-CR" rel="stylesheet" type="text/css"> <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 Cascading and Inheritance Level 4</h1> <a href="https://www.w3.org/standards/types#CR">W3C Candidate Recommendation Snapshot</a>, <time class="dt-updated" datetime="2022-01-13">13 January 2022</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/2022/CR-css-cascade-4-20220113/">https://www.w3.org/TR/2022/CR-css-cascade-4-20220113/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a> <dt>Editor's Draft: <dd><a href="https://drafts.csswg.org/css-cascade-4/">https://drafts.csswg.org/css-cascade-4/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2021/WD-css-cascade-4-20211015/" rel="prev">https://www.w3.org/TR/2021/WD-css-cascade-4-20211015/</a> <dd><a href="https://www.w3.org/TR/2021/WD-css-cascade-4-20210319/" rel="prev">https://www.w3.org/TR/2021/WD-css-cascade-4-20210319/</a> <dd><a href="https://www.w3.org/TR/2020/WD-css-cascade-4-20200818/" rel="prev">https://www.w3.org/TR/2020/WD-css-cascade-4-20200818/</a> <dd><a href="https://www.w3.org/TR/2018/CR-css-cascade-4-20180828/" rel="prev">https://www.w3.org/TR/2018/CR-css-cascade-4-20180828/</a> <dd><a href="https://www.w3.org/TR/2016/CR-css-cascade-4-20160114/" rel="prev">https://www.w3.org/TR/2016/CR-css-cascade-4-20160114/</a> <dd><a href="https://www.w3.org/TR/2015/WD-css-cascade-4-20150908/" rel="prev">https://www.w3.org/TR/2015/WD-css-cascade-4-20150908/</a> <dd><a href="https://www.w3.org/TR/2015/WD-css-cascade-4-20150421/" rel="prev">https://www.w3.org/TR/2015/WD-css-cascade-4-20150421/</a> <dd><a href="https://www.w3.org/TR/2013/WD-css-cascade-3-20130730/" rel="prev">https://www.w3.org/TR/2013/WD-css-cascade-3-20130730/</a> <dd><a href="https://www.w3.org/TR/2013/WD-css3-cascade-20130103/" rel="prev">https://www.w3.org/TR/2013/WD-css3-cascade-20130103/</a> <dd><a href="https://www.w3.org/TR/2005/WD-css3-cascade-20051215/" rel="prev">https://www.w3.org/TR/2005/WD-css3-cascade-20051215/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-cascade-4">https://www.w3.org/standards/history/css-cascade-4</a> <dt>Implementation Report: <dd><a href="https://wpt.fyi/results/css/css-cascade">https://wpt.fyi/results/css/css-cascade</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-cascade-4">CSSWG Issues Repository</a> <dt class="editor">Editors: <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> (Invited Expert) <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 Jr.</a> (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-cascade-4/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2022 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>® (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="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 how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements. New in this level are the <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert">revert</a> keyword and <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-conditional/#typedef-supports-condition" id="ref-for-typedef-supports-condition"><supports-condition></a> for the <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import">@import</a> rule. <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="status">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 Candidate Recommendation Snapshot using the <a href="https://www.w3.org/2021/Process-20211102/#recs-and-notes">Recommendation track</a>. Publication as a Candidate Recommendation does not imply endorsement by <abbr title="World Wide Web Consortium">W3C</abbr> and its Members. A Candidate Recommendation Snapshot has received <a href="https://www.w3.org/2021/Process-20211102/#dfn-wide-review">wide review</a>, is intended to gather implementation experience, and has commitments from Working Group members to <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Requirements">royalty-free licensing</a> for implementations. This document is intended to become a W3C Recommendation; it will remain a Candidate Recommendation at least until <time class="status-deadline" datetime="2022-03-13">13 March 2022</time> to gather additional feedback. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-cascade” in the title, like this: “[css-cascade] …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-cascade%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. This document is governed by the <a href="https://www.w3.org/2021/Process-20211102/" id="w3c_process_revision">2 November 2021 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/2004/01/pp-impl/32061/status" 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="#at-import">2 Importing Style Sheets: the @import rule</a> <ol class="toc"> <li><a href="#conditional-import">2.1 Conditional @import Rules</a> <li><a href="#import-processing">2.2 Processing Stylesheet Imports</a> <li><a href="#content-type">2.3 Content-Type of CSS Style Sheets</a> </ol> <li> <a href="#shorthand">3 Shorthand Properties</a> <ol class="toc"> <li><a href="#aliasing">3.1 Property Aliasing</a> <li><a href="#all-shorthand">3.2 Resetting All Properties: the all property</a> </ol> <li> <a href="#value-stages">4 Value Processing</a> <ol class="toc"> <li> <a href="#declared">4.1 Declared Values</a> <ol class="toc"> <li><a href="#value-aliasing">4.1.1 Value Aliasing</a> </ol> <li><a href="#cascaded">4.2 Cascaded Values</a> <li><a href="#specified">4.3 Specified Values</a> <li><a href="#computed">4.4 Computed Values</a> <li> <a href="#used">4.5 Used Values</a> <ol class="toc"> <li><a href="#applies-to">4.5.1 Applicable Properties</a> </ol> <li><a href="#actual">4.6 Actual Values</a> <li><a href="#stages-examples">4.7 Examples</a> </ol> <li><a href="#filtering">5 Filtering</a> <li> <a href="#cascading">6 Cascading</a> <ol class="toc"> <li><a href="#cascade-sort">6.1 Cascade Sorting Order</a> <li><a href="#cascading-origins">6.2 Cascading Origins</a> <li><a href="#importance">6.3 Important Declarations: the !important annotation</a> <li><a href="#preshint">6.4 Precedence of Non-CSS Presentational Hints</a> </ol> <li> <a href="#defaulting">7 Defaulting</a> <ol class="toc"> <li><a href="#initial-values">7.1 Initial Values</a> <li><a href="#inheriting">7.2 Inheritance</a> <li> <a href="#defaulting-keywords">7.3 Explicit Defaulting</a> <ol class="toc"> <li><a href="#initial">7.3.1 Resetting a Property: the initial keyword</a> <li><a href="#inherit">7.3.2 Explicit Inheritance: the inherit keyword</a> <li><a href="#inherit-initial">7.3.3 Erasing All Declarations: the unset keyword</a> <li><a href="#default">7.3.4 Rolling Back Cascade Origins: the revert keyword</a> </ol> </ol> <li> <a href="#changes">8 Changes</a> <ol class="toc"> <li><a href="#changes-2021-10">8.1 Changes since the 15 Oct 2021 Working Draft</a> <li><a href="#changes-2018">8.2 Changes Since the 28 August 2018 Candidate Recommendation</a> <li><a href="#changes-2016">8.3 Changes Since the 14 January 2016 Candidate Recommendation</a> <li><a href="#changes-2015">8.4 Changes Since the 21 April 2015 Working Draft</a> <li><a href="#additions-l3">8.5 Additions Since Level 3</a> <li><a href="#changes-2">8.6 Additions Since Level 2</a> </ol> <li><a href="#acknowledgments"> Acknowledgments</a> <li><a href="#priv-sec"> Privacy and Security 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> <li><a href="#w3c-cr-exit-criteria"> CR exit criteria</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> CSS defines a finite set of parameters, called <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="property" id="css-property">properties</dfn>, that direct the rendering of a document. Each <a data-link-type="dfn" href="#css-property" id="ref-for-css-property">property</a> has a name (e.g., <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a>, <a class="property" 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</a>, or <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-style" id="ref-for-propdef-border-style">border-style</a>), a value space (e.g., <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-color-4/#typedef-color" id="ref-for-typedef-color" title="Expands to: aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen"><color></a>, <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a>, [ solid | dashed | dotted | … ]), and a defined behavior on the rendering of the document. Properties values are assigned to various parts of the document via <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#css-property-declarations" id="ref-for-css-property-declarations">property declarations</a>, which assign the property a value (e.g. <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red">red</a>, 12pt, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-backgrounds-3/#valdef-line-style-dotted" id="ref-for-valdef-line-style-dotted">dotted</a>) for the associated element or box. One of the fundamental design principles of CSS is <a data-link-type="dfn" href="#cascade" id="ref-for-cascade">cascading</a>, which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved. The opposite problem arises when no declarations try to set a the value for an element/property combination. In this case, a value is be found by way of <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance">inheritance</a> or by looking at the property’s <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value">initial value</a>. The <a href="#cascade" id="ref-for-cascade①④">cascading</a> and <a href="#defaulting">defaulting</a> process takes a set of declarations as input, and outputs a <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value">specified value</a> for each property on each element. The rules for finding the specified value for all properties on all elements in the document are described in this specification. The rules for finding the specified values in the page context and its margin boxes are described in <a data-link-type="biblio" href="#biblio-css-page-3">[css-page-3]</a>. <h3 class="heading settled" data-level="1.1" id="placement">1.1. Module Interactions<a class="self-link" href="#placement"></a></h3> This section is normative. This module replaces and extends the rules for assigning property values, cascading, and inheritance defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> chapter 6. Other CSS modules may expand the definitions of some of the syntax and features defined here. For example, the Media Queries Level 4 specification, when combined with this module, expands the definition of the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-4/#typedef-media-query" id="ref-for-typedef-media-query"><media-query></a> value type as used in this specification. For the purpose of this specification, <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#text-nodes" id="ref-for-text-nodes">text nodes</a> are treated as <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#elements" id="ref-for-elements">element</a> children of their associated element, and possess the full set of properties; since they cannot be targeted by selectors all of their computed values are assigned by <a href="#defaulting">defaulting</a>. <h2 class="heading settled" data-level="2" id="at-import">2. Importing Style Sheets: the <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①">@import</a> rule<a class="self-link" href="#at-import"></a></h2> The <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-import">@import</dfn> rule allows users to import style rules from other style sheets. If an <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②">@import</a> rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule, with two exceptions: <ul> <li data-md> If a feature (such as the @namespace rule) explicitly defines that it only applies to a particular stylesheet, and not any imported ones, then it doesn’t apply to the imported stylesheet. <li data-md> If a feature relies on the relative ordering of two or more constructs in a stylesheet (such as the requirement that @namespace rules must not have any other rules other than <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import④">@import</a> preceding it), it only applies between constructs in the same stylesheet. </ul> <a class="self-link" href="#example-d425da12"></a> For example, declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import⑤">@import</a>. Any <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import⑥">@import</a> rules must precede all other valid at-rules and style rules in a style sheet (ignoring <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-syntax-3/#at-ruledef-charset" id="ref-for-at-ruledef-charset">@charset</a>), or else the @import rule is invalid. The syntax of @import is: <pre class="prod">@import [ <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value"><url></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value"><string></a> ] [ supports( [ <a class="production" data-link-type="type" href="https://www.w3.org/TR/css3-conditional/#typedef-supports-condition" id="ref-for-typedef-supports-condition①"><supports-condition></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production" data-link-type="type"><declaration></a> ] ) ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list"><media-query-list></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> ;</pre> where the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value①"><url></a> or <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value①"><string></a> gives the URL of the style sheet to be imported, and the optional [<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-conditional/#typedef-supports-condition" id="ref-for-typedef-supports-condition②"><supports-condition></a>|<a class="production css" data-link-type="type"><declaration></a>] and <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list①"><media-query-list></a> (collectively, the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="import-conditions">import conditions</dfn>) state the conditions under which it applies. <div class="example" id="example-05c74581"> <a class="self-link" href="#example-05c74581"></a> The following <a href="#conditional-import">conditional @import rule</a> only loads the style sheet when the UA <a href="https://www.w3.org/TR/css-conditional-3/#support-definition">supports</a> <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-display" id="ref-for-propdef-display">display: flex</a>, and only applies the style sheet on a <a href="https://www.w3.org/TR/CSS2/media.html#media-types">handheld</a> device with a <a href="https://www.w3.org/TR/mediaqueries-4/#width">maximum viewport width</a> of 400px. <pre>@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);</pre> </div> If a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#string-value" id="ref-for-string-value②"><string></a> is provided, it must be interpreted as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value②"><url></a> with the same value. <div class="example" id="example-da2e49cb"> <a class="self-link" href="#example-da2e49cb"></a> The following lines are equivalent in meaning and illustrate both <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import⑨">@import</a> syntaxes (one with <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#funcdef-url" id="ref-for-funcdef-url">url()</a> and one with a bare string): <pre class="lang-css highlight"><c- n>@import</c-> <c- s>"mystyle.css"</c-><c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"mystyle.css"</c-><c- p>);</c-> </pre> </div> <h3 class="heading settled" data-level="2.1" id="conditional-import">2.1. Conditional <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⓪">@import</a> Rules<a class="self-link" href="#conditional-import"></a></h3> The <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions">import conditions</a> allow the import to be media– or feature-support–dependent. In the absence of any import conditions, the import is unconditional. (Specifying <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/mediaqueries-4/#valdef-media-all" id="ref-for-valdef-media-all">all</a> for the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list②"><media-query-list></a> has the same effect.) If the import conditions do not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-conditional/#at-ruledef-media" id="ref-for-at-ruledef-media">@media</a> and/or <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-conditional/#at-ruledef-supports" id="ref-for-at-ruledef-supports">@supports</a> blocks with the given conditions. <div class="example" id="example-5fa651f3"> <a class="self-link" href="#example-5fa651f3"></a> The following rules illustrate how <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①①">@import</a> rules can be made media-dependent: <pre class="lang-css highlight"><c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"fineprint.css"</c-><c- p>)</c-> print<c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"bluish.css"</c-><c- p>)</c-> projection<c- p>,</c-> tv<c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"narrow.css"</c-><c- p>)</c-> handheld and <c- p>(</c->max-width: <c- m>400</c-><c- k>px</c-><c- p>);</c-> </pre> </div> User agents may therefore avoid fetching a conditional import as long as the <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions③">import conditions</a> do not match. Additionally, if a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-conditional/#typedef-supports-condition" id="ref-for-typedef-supports-condition③"><supports-condition></a> blocks the application of the imported style sheet, the UA must not fetch the style sheet (unless it is loaded through some other link) and must return null for the import rule’s CSSImportRule.styleSheet value (even if it is loaded through some other link). <div class="example" id="example-c6c2c0ee"> <a class="self-link" href="#example-c6c2c0ee"></a> The following rule illustrates how an author can provide fallback rules for legacy user agents without impacting network performance on newer user agents: <pre class="lang-css highlight"><c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"fallback-layout.css"</c-><c- p>)</c-> <c- nf>supports</c-><c- p>(</c->not <c- p>(</c->display: flex<c- p>));</c-> <c- n>@supports</c-> <c- p>(</c->display: flex<c- p>)</c-> <c- p>{</c-> ... <c- p>}</c-> </pre> </div> The <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions④">import conditions</a> are given by <a class="production css" data-link-type="type" href="https://www.w3.org/TR/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list③"><media-query-list></a>, which is parsed and interpreted as a <a data-link-type="dfn" href="https://www.w3.org/TR/mediaqueries-4/#media-query-list" id="ref-for-media-query-list">media query list</a>, and <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-conditional/#typedef-supports-condition" id="ref-for-typedef-supports-condition④"><supports-condition></a>, is parsed and interpreted as a [[supports query]]. If a <a class="production css" data-link-type="type"><declaration></a> is given in place of a <supports-condition>, it must be interpreted as a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-conditional/#typedef-supports-decl" id="ref-for-typedef-supports-decl"><supports-decl></a> (i.e. the extra set of parentheses is implied) and treated as a <supports-condition>. <div class="example" id="example-75806df4"> <a class="self-link" href="#example-75806df4"></a> For example, the following two lines are equivalent: <pre class="lang-css highlight"><c- n>@import</c-> <c- s>"mystyle.css"</c-> <c- nf>supports</c-><c- p>(</c->display: flex<c- p>);</c-> <c- n>@import</c-> <c- s>"mystyle.css"</c-> <c- nf>supports</c-><c- p>((</c->display: flex<c- p>));</c-> </pre> </div> The evaluation and full syntax of the <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions⑤">import conditions</a> are defined by the <a href="https://www.w3.org/TR/mediaqueries/">Media Queries</a> <a data-link-type="biblio" href="#biblio-mediaq">[MEDIAQ]</a> and <a href="https://www.w3.org/TR/css-conditional/">CSS Conditional Rules</a> <a data-link-type="biblio" href="#biblio-css-conditional-3">[CSS-CONDITIONAL-3]</a> specifications. <h3 class="heading settled" data-level="2.2" id="import-processing">2.2. Processing Stylesheet Imports<a class="self-link" href="#import-processing"></a></h3> When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to an independent style sheet. Note: This does not place any requirements on resource fetching, only how the style sheet is reflected in the CSSOM and used in specs such as this one. Assuming appropriate caching, it is perfectly appropriate for a UA to fetch a style sheet only once, even though it’s linked or imported multiple times. The <a data-link-type="dfn" href="#origin" id="ref-for-origin">cascade origin</a> of an imported style sheet is the cascade origin of the style sheet that imported it. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#environment-encoding" id="ref-for-environment-encoding">environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a> <div class="algorithm" data-algorithm="fetch an @import"> To <dfn data-dfn-type="dfn" data-export id="fetch-an-import">fetch an @import<a class="self-link" href="#fetch-an-import"></a></dfn>, given an <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①②">@import</a> rule <var>rule</var>: <ol> <li data-md> Let <var>parentStylesheet</var> be <var>rule</var>’s <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-1/#concept-css-rule-parent-css-style-sheet" id="ref-for-concept-css-rule-parent-css-style-sheet">parent CSS style sheet</a>. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> <li data-md> If <var>rule</var> has a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css3-conditional/#typedef-supports-condition" id="ref-for-typedef-supports-condition⑦"><supports-condition></a>, and that condition is not true, return. <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>rule</var>’s URL and <var>parentStylesheet</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>. If the algorithm returns an error, return. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> <li data-md> <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#fetch-a-style-resource" id="ref-for-fetch-a-style-resource">Fetch a style resource</a> from <var>parsedUrl</var>, with stylesheet <var>parentStylesheet</var>, destination "style", CORS mode "no-cors", and processResponse being the following steps given <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response">response</a> <var>response</var> and byte stream, null or failure <var>byteStream</var>: <ol> <li data-md> If <var>maybeByteStream</var> is not a byte stream, return. <li data-md> If <var>parentStylesheet</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks">quirks mode</a> and <var>response</var> is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-same-origin" id="ref-for-cors-same-origin">CORS-same-origin</a>, let <var>content type</var> be <code>"text/css"</code>. Otherwise, let <var>content type</var> be the Content Type metadata of <var>response</var>. <li data-md> If <var>content type</var> is not <code>"text/css"</code>, return. <li data-md> Let <var>importedStylesheet</var> be the result of <a data-link-type="dfn" href="https://www.w3.org/TR/css-syntax-3/#parse-a-stylesheet" id="ref-for-parse-a-stylesheet">parsing</a> <var>byteStram</var> given <var>parsedUrl</var>. <li data-md> Set <var>importedStylesheet</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> to <var>parentStylesheet</var>’s origin-clean flag. <li data-md> If <var>response</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-same-origin" id="ref-for-cors-same-origin①">CORS-same-origin</a>, unset <var>importedStylesheet</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>. <li data-md> Set <var>rule</var>’s <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-cssimportrule-stylesheet" id="ref-for-dom-cssimportrule-stylesheet">styleSheet</a></code> to <var>importedStylesheet</var>. </ol> </ol> </div> <h3 class="heading settled" data-level="2.3" id="content-type">2.3. Content-Type of CSS Style Sheets<a class="self-link" href="#content-type"></a></h3> The processing of imported style sheets depends on the actual type of the linked resource: <ul> <li data-md> If the resource does not have <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type" id="ref-for-content-type">Content-Type metadata</a>, the type is treated as <code>text/css</code>. <li data-md> If the host document is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①">quirks mode</a>, and the host document’s origin is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin">same origin</a> with the linked resource <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response①">response’s</a> <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-url" id="ref-for-concept-response-url">URL’s</a> origin, the type is treated as <code>text/css</code>. <li data-md> Otherwise, the type is determined from its <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type" id="ref-for-content-type①">Content-Type metadata</a>. </ul> If the linked resource’s type is <code>text/css</code>, it must be interpreted as a CSS style sheet. Otherwise, it must be interpreted as a network error. <h2 class="heading settled" data-level="3" id="shorthand">3. Shorthand Properties<a class="self-link" href="#shorthand"></a></h2> Some properties are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="shorthand property | shorthand" id="shorthand-property">shorthand properties</dfn>, meaning that they allow authors to specify the values of several properties with a single property. A <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property">shorthand property</a> sets all of its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="longhand | longhand property | sub-property" id="longhand">longhand sub-properties</dfn>, exactly as if expanded in place. When values are omitted from a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①">shorthand</a> form, unless otherwise defined, each “missing” <a data-link-type="dfn" href="#longhand" id="ref-for-longhand">sub-property</a> is assigned its <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value①">initial value</a>. <div class="note" role="note"> This means that a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property②">shorthand</a> property declaration always sets all of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand①">sub-properties</a>, even those that are not explicitly set. Carelessly used, this might result in inadvertently resetting some sub-properties. Carefully used, a shorthand can guarantee a “blank slate” by resetting sub-properties inadvertently cascaded from other sources. For example, writing <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background: green</a> rather than <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color">background-color: green</a> ensures that the background color overrides any earlier declarations that might have set the background to an image with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a>. </div> <div class="example" id="example-8762997a"> <a class="self-link" href="#example-8762997a"></a> For example, the CSS Level 1 <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-4/#propdef-font" id="ref-for-propdef-font">font</a> property is a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property④">shorthand</a> property for setting <a class="css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style">font-style</a>, <a class="css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a>, <a class="css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a>, <a class="property" 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</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height">line-height</a>, and <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> all at once. The multiple declarations of this example: <pre class="lang-css highlight">h1 <c- p>{</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>12</c-><c- k>pt</c-><c- p>;</c-> <c- k>line-height</c-><c- p>:</c-> <c- m>14</c-><c- k>pt</c-><c- p>;</c-> <c- k>font-family</c-><c- p>:</c-> Helvetica<c- p>;</c-> <c- k>font-variant</c-><c- p>:</c-> normal<c- p>;</c-> <c- k>font-style</c-><c- p>:</c-> normal<c- p>;</c-> <c- p>}</c-> </pre> can therefore be rewritten as <pre class="lang-css highlight">h1 <c- p>{</c-> <c- k>font</c-><c- p>:</c-> bold <c- m>12</c-><c- k>pt</c->/<c- m>14</c-><c- k>pt</c-> Helvetica <c- p>}</c-></pre> As more <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-4/#propdef-font" id="ref-for-propdef-font①">font</a> <a data-link-type="dfn" href="#longhand" id="ref-for-longhand④">sub-properties</a> are introduced into CSS, the shorthand declaration resets those to their initial values as well. </div> In some cases, a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑤">shorthand</a> might have different syntax or special keywords that don’t directly correspond to values of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑤">sub-properties</a>. (In such cases, the shorthand will explicitly define the expansion of its values.) In other cases, a property might be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="reset-only-sub-property">reset-only sub-property</dfn> of the shorthand: Like other <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑥">sub-properties</a>, it is reset to its initial value by the shorthand when unspecified, but the shorthand might not include syntax to set the sub-property to any of its other values. For example, the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> shorthand resets <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image" id="ref-for-propdef-border-image">border-image</a> to its initial value of none, but has no syntax to set it to anything else. <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> If a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑦">shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a> <a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a>, it sets all of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑧">sub-properties</a> to that keyword, including any that are <a data-link-type="dfn" href="#reset-only-sub-property" id="ref-for-reset-only-sub-property">reset-only sub-properties</a>. (Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.) Declaring a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑧">shorthand</a> property to be !important is equivalent to declaring all of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑨">sub-properties</a> to be !important. <h3 class="heading settled" data-level="3.1" id="aliasing">3.1. Property Aliasing<a class="self-link" href="#aliasing"></a></h3> Properties sometimes change names after being supported for a while, such as vendor-prefixed properties being standardized. The original name still needs to be supported for compatibility reasons, but the new name is preferred. To accomplish this, CSS defines two different ways of “aliasing” old syntax to new syntax. <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="legacy name alias" id="legacy-name-alias">legacy name aliases</dfn> <dd> When the old property’s value syntax is identical to that of the new property, the two names are aliased with an operation on par with case-mapping: at parse time, the old property is converted into the new property. This conversion also applies in the CSSOM, both for string arguments and property accessors: requests for the old property name transparently transfer to the new property name instead. <div class="example" id="example-5dd1d5a6"><a class="self-link" href="#example-5dd1d5a6"></a> For example, if old-name is a <a data-link-type="dfn" href="#legacy-name-alias" id="ref-for-legacy-name-alias">legacy name alias</a> for new-name, <code class="highlight">getComputedStyle<c- p>(</c->el<c- p>).</c->oldName</code> will return the computed style of the <code class="highlight">newName</code> property, and <code class="highlight">el<c- p>.</c->style<c- p>.</c->setPropertyValue<c- p>(</c-><c- u>"old-name"</c-><c- p>,</c-> <c- u>"value"</c-><c- p>)</c-></code> will set the new-name property to <code class="highlight"><c- u>"value"</c-></code>. </div> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="legacy shorthand" id="legacy-shorthand">legacy shorthands</dfn> <dd> When the old property has a distinct syntax from the new property, the two names are aliased using the <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑨">shorthand</a> mechanism. These shorthands are defined to be <a data-link-type="dfn" href="#legacy-shorthand" id="ref-for-legacy-shorthand">legacy shorthands</a>, and their use is deprecated. They otherwise behave exactly as regular shorthands, except that the CSSOM will not use them when serializing declarations. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> <div class="example" id="example-c7a1887e"> <a class="self-link" href="#example-c7a1887e"></a> For example, the <a class="property" data-link-type="propdesc">page-break-*</a> properties are <a data-link-type="dfn" href="#legacy-shorthand" id="ref-for-legacy-shorthand①">legacy shorthands</a> for the break-* properties (see <a href="https://www.w3.org/TR/css-break-3/#page-break-properties"><cite>CSS Fragmentation 3</cite> § 3.4 Page Break Aliases: the page-break-before, page-break-after, and page-break-inside properties</a>). Setting <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/page.html#propdef-page-break-before" id="ref-for-propdef-page-break-before">page-break-before: always</a> expands to <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before">break-before: page</a> at parse time, like other shorthands do. Similarly, if break-before: page is set, calling <code class="highlight">getComputedStyle<c- p>(</c->el<c- p>).</c->pageBreakBefore</code> will return <code class="highlight"><c- u>"always"</c-></code>. However, when serializing a style block (see <a href="https://www.w3.org/TR/cssom-1/#serializing-css-values"><cite>CSSOM 1</cite> § 6.7.2 Serializing CSS Values</a>), the page-break-before property will never be chosen as the shorthand to serialize to, regardless of whether it or break-before was specified; instead, break-before will always be chosen. </div> </dl> <h3 class="heading settled caniuse-paneled" data-level="3.2" id="all-shorthand">3.2. Resetting All Properties: the <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all">all</a> property<a class="self-link" href="#all-shorthand"></a></h3> <table class="def propdef" data-link-for-hint="all"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-all">all</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">initial <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> inherit | unset | revert <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar </table> The <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all①">all</a> property is a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①⓪">shorthand</a> that resets all CSS properties except <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a>. It only accepts the <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS-wide keywords</a>. It does not reset <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property">custom properties</a> <a data-link-type="biblio" href="#biblio-css-variables-1">[css-variables-1]</a>. Note: The excepted CSS properties <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①">unicode-bidi</a> are actually markup-level features, and <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">should not be set in the author’s style sheet</a>. (They exist as CSS properties only to style document languages not supported by the UA.) Authors should use the appropriate markup, such as HTML’s <code>dir</code> attribute, instead. <a data-link-type="biblio" href="#biblio-css-writing-modes-3">[css-writing-modes-3]</a> <div class="example" id="example-dae18981"> <a class="self-link" href="#example-dae18981"></a> For example, if an author specifies <a class="css" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all②">all: initial</a> on an element, it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-display" id="ref-for-propdef-display①">display: block</a> from the UA style sheet on block elements such as <code><div></code>) will also be blown away. </div> <h2 class="heading settled" data-level="4" id="value-stages">4. Value Processing<a class="self-link" href="#value-stages"></a></h2> Once a user agent has parsed a document and constructed a document tree, it must assign, to every element in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree">flat tree</a>, and correspondingly to every box in the formatting structure, a value to every property that applies to the target media type. The final value of a CSS property for a given element or box is the result of a multi-step calculation: <ol> <li> First, all the <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value">declared values</a> applied to an element are collected, for each property on each element. There may be zero or many declared values applied to the element. <li> Cascading yields the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value">cascaded value</a>. There is at most one cascaded value per property per element. <li> Defaulting yields the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①">specified value</a>. Every element has exactly one specified value per property. <li> Resolving value dependencies yields the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value">computed value</a>. Every element has exactly one computed value per property. <li> Formatting the document yields the <a data-link-type="dfn" href="#used-value" id="ref-for-used-value">used value</a>. An element only has a used value for a given property if that property applies to the element. <li> Finally, the used value is transformed to the <a data-link-type="dfn" href="#actual-value" id="ref-for-actual-value">actual value</a> based on constraints of the display environment. As with the <a data-link-type="dfn" href="#used-value" id="ref-for-used-value②">used value</a>, there may or may not be an actual value for a given property on an element. </ol> Elements that are not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected">connected</a> or are not part of the document’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree①">flattened element tree</a> do not participate in CSS value processing, and do not have <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value②">declared</a>, <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value②">cascaded</a>, <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value③">specified</a>, <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value②">computed</a>, <a data-link-type="dfn" href="#used-value" id="ref-for-used-value③">used</a>, or <a data-link-type="dfn" href="#actual-value" id="ref-for-actual-value②">actual</a> values, even if they potentially have style declarations assigned to them (for example, by a <code>style</code> attribute). <h3 class="heading settled" data-level="4.1" id="declared">4.1. Declared Values<a class="self-link" href="#declared"></a></h3> Each property declaration <a href="#filtering">applied to an element</a> contributes a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="declared" id="declared-value">declared value</dfn> for that property associated with the element. See <a href="#filtering">Filtering Declarations</a> for details. These values are then processed by the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①">cascade</a> to choose a single “winning value”. <h4 class="heading settled" data-level="4.1.1" id="value-aliasing">4.1.1. Value Aliasing<a class="self-link" href="#value-aliasing"></a></h4> Some property values have <dfn data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="legacy value alias" id="css-legacy-value-alias">legacy value aliases<a class="self-link" href="#css-legacy-value-alias"></a></dfn>: at parse time, the legacy syntax is converted into the new syntax, resulting in a <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value③">declared value</a> different from the parsed input. These aliases are typically used for handling legacy compatibility requirements, such as converting <a data-link-type="dfn" href="https://www.w3.org/TR/css-2021/#vendor-prefix" id="ref-for-vendor-prefix">vendor-prefixed</a> values to their standard equivalents. <h3 class="heading settled" data-level="4.2" id="cascaded">4.2. Cascaded Values<a class="self-link" href="#cascaded"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="cascaded" id="cascaded-value">cascaded value</dfn> represents the result of <a href="#cascade" id="ref-for-cascade①⑤">the cascade</a>: it is the <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value④">declared value</a> that wins the cascade (is sorted first in the <a data-link-type="dfn" href="#output-of-the-cascade" id="ref-for-output-of-the-cascade">output of the cascade</a>). If the output of the cascade is an empty list, there is no <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value③">cascaded value</a>. <h3 class="heading settled" data-level="4.3" id="specified">4.3. Specified Values<a class="self-link" href="#specified"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="specified" id="specified-value">specified value</dfn> is the value of a given property that the style sheet authors intended for that element. It is the result of putting the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value④">cascaded value</a> through the <a href="#defaulting">defaulting</a> processes, guaranteeing that a <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value④">specified value</a> exists for every property on every element. In many cases, the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value⑤">specified value</a> is the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value⑤">cascaded value</a>. However, if there is no cascaded value at all, the specified value is <a href="#defaulting">defaulted</a>. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> are handled specially when they are the cascaded value of a property, setting the specified value as required by that keyword, see <a href="#defaulting-keywords">§ 7.3 Explicit Defaulting</a>. <h3 class="heading settled" data-level="4.4" id="computed">4.4. Computed Values<a class="self-link" href="#computed"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="computed" id="computed-value">computed value</dfn> is the result of resolving the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value⑧">specified value</a> as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance①">inheritance</a>. Note: The <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value③">computed value</a> is the value that is transferred from parent to child during <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance②">inheritance</a>. For historical reasons, it is not necessarily the value returned by the <code class="idl"><a data-link-type="idl" href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle">getComputedStyle()</a></code> function, which sometimes returns <a data-link-type="dfn" href="#used-value" id="ref-for-used-value④">used values</a>. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> Furthermore, the computed value is an abstract data representation: their definitions reflect that data representation, not how that data is serialized. For example, serialization rules often allow omitting certain values which are implied during parsing; but those values are nonetheless part of the computed value. <div class="example" id="example-29410c97"> <a class="self-link" href="#example-29410c97"></a> A <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value⑨">specified value</a> can be either absolute (i.e., not relative to another value, as in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red①">red</a> or 2mm) or relative (i.e., relative to another value, as in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-align-3/#valdef-justify-self-auto" id="ref-for-valdef-justify-self-auto">auto</a>, 2em). Computing a relative value generally absolutizes it: <ul> <li> values with relative units (<a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#em" id="ref-for-em">em</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-3/#ex" id="ref-for-ex">ex</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#valdef-length-vh" id="ref-for-valdef-length-vh">vh</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#valdef-length-vw" id="ref-for-valdef-length-vw">vw</a>) must be made absolute by multiplying with the appropriate reference size <li> certain keywords (e.g., smaller, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-4/#valdef-font-weight-bolder" id="ref-for-valdef-font-weight-bolder">bolder</a>) must be replaced according to their definitions <li> percentages on some properties must be multiplied by a reference value (defined by the property) <li> valid relative URLs must be resolved to become absolute. </ul> See examples (f), (g) and (h) in the <a href="#stages-examples">table below</a>. </div> Note: In general, the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value⑥">computed value</a> resolves the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⓪">specified value</a> as far as possible without laying out the document or performing other expensive or hard-to-parallelize operations, such as resolving network requests or retrieving values other than from the element and its parent. The <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value⑦">computed value</a> exists even when the property does not apply. However, some properties may change how they determine the computed value based on whether the property <a data-link-type="dfn" href="#apply" id="ref-for-apply">applies to</a> the element. <h3 class="heading settled" data-level="4.5" id="used">4.5. Used Values<a class="self-link" href="#used"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="used" id="used-value">used value</dfn> is the result of taking the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value⑨">computed value</a> and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document. <a class="self-link" href="#example-aaa6b50b"></a> For example, a declaration of <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width: auto</a> can’t be resolved into a length without knowing the layout of the element’s ancestors, so the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①⓪">computed value</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-align-3/#valdef-justify-self-auto" id="ref-for-valdef-justify-self-auto①">auto</a>, while the <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑤">used value</a> is an absolute length, such as 100px. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> <a class="self-link" href="#example-aac2d669"></a> As another example, a <code><div></code> might have a computed <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before④">break-before</a> value of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-align-3/#valdef-justify-self-auto" id="ref-for-valdef-justify-self-auto②">auto</a>, but acquire a used break-before value of <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-break-4/#valdef-break-before-page" id="ref-for-valdef-break-before-page">page</a> by propagation from its first child. <a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a> If a property does not <a data-link-type="dfn" href="#apply" id="ref-for-apply①">apply to</a> this element or box type then it has no <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑥">used value</a> for that property. <a class="self-link" href="#example-19a1092f"></a> For example, the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex" id="ref-for-propdef-flex">flex</a> property has no <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑦">used value</a> on elements that aren’t <a data-link-type="dfn" href="https://www.w3.org/TR/css-flexbox-1/#flex-item" id="ref-for-flex-item">flex items</a>. <h4 class="heading settled" data-level="4.5.1" id="applies-to">4.5.1. Applicable Properties<a class="self-link" href="#applies-to"></a></h4> If a property does not <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="apply">apply to</dfn> an element or box type—as noted in its “Applies to” line—this means it does not directly take effect on that type of box or element. Note: A property that does not apply can still have indirect formatting effects if its computed value affects the computation of other properties that do apply; and of course its <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①①">computed value</a>, which always exists, can still inherit to descendants and take effect on them. <div class="example" id="example-9b82d3cf"><a class="self-link" href="#example-9b82d3cf"></a> Even though <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a> do not apply to table rows (they do not affect how the table row or its children are laid out), setting them on such boxes will still affect the calculation of font relative units such as <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#ch" id="ref-for-ch">ch</a>, and thus possibly any property that takes a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value" title="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"><length></a>. </div> <div class="example" id="example-c1c9d619"><a class="self-link" href="#example-c1c9d619"></a> Setting <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-transform" id="ref-for-propdef-text-transform">text-transform</a> on an HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element" id="ref-for-the-p-element">p</a></code> element (which is <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-display" id="ref-for-propdef-display②">display: block</a> by default) will have an effect, even though text-transform only applies to <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#inline-box" id="ref-for-inline-box">inline boxes</a>, because the property inherits into the paragraph’s anonymous <a data-link-type="dfn" href="https://www.w3.org/TR/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a> and applies to the text it contains. </div> Note: A property defined to apply to “all elements” applies to all elements and <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#display-type" id="ref-for-display-type">display types</a>, but not necessarily to all <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> types, since pseudo-elements often have their own specific rendering models or other restrictions. The <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after">::after</a> pseudo-elements, however, are defined to generate boxes almost exactly like normal elements and are therefore defined accept all properties that apply to “all elements”. See <a data-link-type="biblio" href="#biblio-css-pseudo-4">[CSS-PSEUDO-4]</a> for more information about pseudo-elements. <h3 class="heading settled" data-level="4.6" id="actual">4.6. Actual Values<a class="self-link" href="#actual"></a></h3> A <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑧">used value</a> is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑨">used</a> width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust" id="ref-for-propdef-font-size-adjust">font-size-adjust</a> property. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="actual" id="actual-value">actual value</dfn> is the used value after any such adjustments have been made. Note: By probing the actual values of elements, much can be learned about how the document is laid out. However, not all information is recorded in the actual values. For example, the actual value of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/page.html#propdef-page-break-after" id="ref-for-propdef-page-break-after">page-break-after</a> property does not reflect whether there is a page break or not after the element. Similarly, the actual value of <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans">orphans</a> does not reflect how many orphan lines there is in a certain element. See examples (j) and (k) in the <a href="#stages-examples">table below</a>. <h3 class="heading settled" data-level="4.7" id="stages-examples">4.7. Examples<a class="self-link" href="#stages-examples"></a></h3> <table class="data non-normative"> <caption>Examples of CSS Value Computation</caption> <thead> <tr> <th> <th>Property <th>Winning declaration <th>Cascaded value <th>Specified value <th>Computed value <th>Used value <th>Actual value <tbody> <tr> <td>(a) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> <td><code class="declaration">text-align: left</code> <td>left <td>left <td>left <td>left <td>left <tr> <td>(b) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> <td><code class="declaration">border-width: inherit</code> <td>inherit <td class="say">4.2px <td>4.2px <td>4.2px <td>4px <tr> <td>(c) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width①">width</a> <td>(none) <td>(none) <td>auto (initial value) <td>auto <td>120px <td>120px <tr> <td>(d) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-lists-3/#propdef-list-style-position" id="ref-for-propdef-list-style-position">list-style-position</a> <td><code class="declaration">list-style-position: inherit</code> <td>inherit <td class="say">inside <td>inside <td>inside <td>inside <tr> <td>(e) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-lists-3/#propdef-list-style-position" id="ref-for-propdef-list-style-position①">list-style-position</a> <td><code class="declaration">list-style-position: initial</code> <td>initial <td>outside (initial value) <td>outside <td>outside <td>outside <tr> <td>(f) <th><a class="property" 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</a> <td><code class="declaration">font-size: 1.2em</code> <td>1.2em <td>1.2em <td class="say">14.1px <td>14.1px <td>14px <tr> <td>(g) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width②">width</a> <td><code class="declaration">width: 80%</code> <td>80% <td>80% <td>80% <td class="say">354.2px <td>354px <tr> <td>(h) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-width" id="ref-for-propdef-width③">width</a> <td><code class="declaration">width: auto</code> <td>auto <td>auto <td>auto <td class="say">134px <td>134px <tr> <td>(i) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a> <td><code class="declaration">height: auto</code> <td>auto <td>auto <td>auto <td class="say">176px <td>176px <tr> <td>(j) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/page.html#propdef-page-break-after" id="ref-for-propdef-page-break-after①">page-break-after</a> <td>(none) <td>(none) <td>auto (initial value) <td>auto <td>auto <td>auto <tr> <td>(k) <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans①">orphans</a> <td><code class="declaration">orphans: 3</code> <td>3 <td>3 <td>3 <td>3 <td>3 </table> <h2 class="heading settled" data-level="5" id="filtering">5. Filtering<a class="self-link" href="#filtering"></a></h2> In order to find the <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑤">declared values</a>, implementations must first identify all declarations that apply to each element. A declaration applies to an element if: <ul> <li> It belongs to a style sheet that currently applies to this document. <li> It is not qualified by a conditional rule <a data-link-type="biblio" href="#biblio-css-conditional-3">[CSS-CONDITIONAL-3]</a> with a false condition. <li> It belongs to a style rule whose selector matches the element. <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> (Taking <a href="https://www.w3.org/TR/selectors-4/#scoping">scoping</a> into account, if necessary.) <li> It is syntactically valid: the declaration’s property is a known property name, and the declaration’s value matches the syntax for that property. </ul> The values of the declarations that apply form, for each property on each element, a list of <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑥">declared values</a>. The next section, the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade②">cascade</a>, prioritizes these lists. <h2 class="heading settled" data-level="6" id="cascading">6. Cascading<a class="self-link" href="#cascading"></a></h2> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cascade">cascade</dfn> takes an unordered list of <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑦">declared values</a> for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value⑧">cascaded value</a>. <h3 class="heading settled" data-level="6.1" id="cascade-sort">6.1. Cascade Sorting Order<a class="self-link" href="#cascade-sort"></a></h3> The cascade sorts declarations according to the following criteria, in descending order of priority: <dl> <dt id="cascade-origin"><a class="self-link" href="#cascade-origin"></a>Origin and Importance <dd> The <a data-link-type="dfn" href="#origin" id="ref-for-origin②">origin</a> of a declaration is based on where it comes from and its <a data-link-type="dfn" href="#important" id="ref-for-important">importance</a> is whether or not it is declared with !important (see <a href="#importance">below</a>). The precedence of the various origins is, in descending order: <ol> <li>Transition declarations <a data-link-type="biblio" href="#biblio-css-transitions-1">[css-transitions-1]</a> <li><a data-link-type="dfn" href="#important" id="ref-for-important①">Important</a> <a data-link-type="dfn" href="#cascade-origin-ua" id="ref-for-cascade-origin-ua">user agent</a> declarations <li><a data-link-type="dfn" href="#important" id="ref-for-important②">Important</a> <a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user">user</a> declarations <li><a data-link-type="dfn" href="#important" id="ref-for-important③">Important</a> <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author">author</a> declarations <li>Animation declarations <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> <li><a data-link-type="dfn" href="#normal" id="ref-for-normal">Normal</a> <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author①">author</a> declarations <li><a data-link-type="dfn" href="#normal" id="ref-for-normal①">Normal</a> <a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user①">user</a> declarations <li><a data-link-type="dfn" href="#normal" id="ref-for-normal②">Normal</a> <a data-link-type="dfn" href="#cascade-origin-ua" id="ref-for-cascade-origin-ua①">user agent</a> declarations </ol> Declarations from <a data-link-type="dfn" href="#origin" id="ref-for-origin④">origins</a> earlier in this list win over declarations from later origins. <dt id="cascade-context"><a class="self-link" href="#cascade-context"></a>Context <dd> A document language can provide for blending declarations sourced from different <dfn class="dfn-paneled" data-dfn-type="dfn" data-local-lt="context" data-noexport id="encapsulation-contexts">encapsulation contexts</dfn>, such as the nested <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#tree-context" id="ref-for-tree-context">tree contexts</a> of <a data-link-type="dfn" href="https://www.w3.org/TR/css-scoping-1/#shadow-tree" id="ref-for-shadow-tree">shadow trees</a> in the <a data-link-type="biblio" href="#biblio-dom">[DOM]</a>. When comparing two declarations that are sourced from different <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts">encapsulation contexts</a>, then for <a data-link-type="dfn" href="#normal" id="ref-for-normal③">normal</a> rules the declaration from the outer context wins, and for <a data-link-type="dfn" href="#important" id="ref-for-important④">important</a> rules the declaration from the inner context wins. For this purpose, <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#tree-context" id="ref-for-tree-context①">tree contexts</a> are considered to be nested in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order" id="ref-for-concept-shadow-including-tree-order">shadow-including tree order</a>. Note: This effectively means that <a data-link-type="dfn" href="#normal" id="ref-for-normal④">normal</a> declarations belonging to an <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts①">encapsulation context</a> can set defaults that are easily overridden by the outer context, while <a data-link-type="dfn" href="#important" id="ref-for-important⑤">important</a> declarations belonging to an encapsulation context can enforce requirements that cannot be overridden by the outer context. <dt id="cascade-specificity"><a class="self-link" href="#cascade-specificity"></a>Specificity <dd> The <a href="https://www.w3.org/TR/selectors/#specificity">Selectors module</a> <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> describes how to compute the specificity of a selector. Each declaration has the same specificity as the style rule it appears in. For the purpose of this step, declarations that do not belong to a style rule (such as the <a href="https://www.w3.org/TR/css-style-attr/#interpret">contents of a style attribute</a>) are considered to have a specificity higher than any selector. The declaration with the highest specificity wins. <dt id="cascade-order"><a class="self-link" href="#cascade-order"></a>Order of Appearance <dd> The last declaration in document order wins. For this purpose: <ul> <li>Declarations from <a class="css" data-link-type="at-rule" href="#at-ruledef-import" id="ref-for-at-ruledef-import①③">imported style sheets</a> are ordered as if their style sheets were substituted in place of the @import rule. <li>Declarations from style sheets independently linked by the originating document are treated as if they were concatenated in linking order, as determined by the host document language. <li>Declarations from style attributes are ordered according to the document order of the element the style attribute appears on, and are all placed after any style sheets. </ul> </dl> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="output-of-the-cascade">output of the cascade</dfn> is a (potentially empty) sorted list of <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑧">declared values</a> for each property on each element. <h3 class="heading settled" data-level="6.2" id="cascading-origins">6.2. Cascading Origins<a class="self-link" href="#cascading-origins"></a></h3> Each style rule has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="origin" id="origin">cascade origin</dfn>, which determines where it enters the cascade. CSS defines three core <a data-link-type="dfn" href="#origin" id="ref-for-origin⑥">origins</a>: <dl> <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="author origin|author style sheet|author-origin" id="cascade-origin-author">Author Origin</dfn> <dd> The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="user origin|user style sheet|user-origin" id="cascade-origin-user">User Origin</dfn> <dd> The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did). <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="user-agent origin|UA origin|user-agent style sheet|UA style sheet|UA-origin" id="cascade-origin-ua">User-Agent Origin</dfn> <dd> Conforming user agents must apply a default style sheet (or behave as if they did). A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See e.g. the <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">HTML user agent style sheet</a>. <a data-link-type="biblio" href="#biblio-html">[HTML]</a> </dl> Extensions to CSS define the following additional <a data-link-type="dfn" href="#origin" id="ref-for-origin⑦">origins</a>: <dl> <dt><dfn data-dfn-type="dfn" data-export id="cascade-origin-animation">Animation Origin<a class="self-link" href="#cascade-origin-animation"></a></dfn> <dd> CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> generate “virtual” rules representing their effects when running. <dt><dfn data-dfn-type="dfn" data-export id="cascade-origin-transition">Transition Origin<a class="self-link" href="#cascade-origin-transition"></a></dfn> <dd> Like CSS Animations, CSS Transitions <a data-link-type="biblio" href="#biblio-css-transitions-1">[css-transitions-1]</a> generate “virtual” rules representing their effects when running. </dl> <h3 class="heading settled" data-level="6.3" id="importance">6.3. Important Declarations: the !important annotation<a class="self-link" href="#importance"></a></h3> CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author’s style sheet override those in a user’s style sheet, which override those in the user-agent’s default style sheet. To balance this, a declaration can be marked <a data-link-type="dfn" href="#important" id="ref-for-important⑥">important</a>, which increases its weight in the cascade and inverts the order of precedence. A declaration is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="importance" id="important">important</dfn> if it has a !important annotation as defined by <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a>, i.e. if the last two (non-whitespace, non-comment) tokens in its value are the delimiter token ! followed by the identifier token important. All other declarations are <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="normal">normal</dfn> (non-<a data-link-type="dfn" href="#important" id="ref-for-important⑦">important</a>). <div class="example" id="example-813b5c64"> <a class="self-link" href="#example-813b5c64"></a> <pre class="lang-css highlight"><c- p>[</c->hidden<c- p>]</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> none !important<c- p>;</c-> <c- p>}</c-></pre> </div> An <a data-link-type="dfn" href="#important" id="ref-for-important⑧">important</a> declaration takes precedence over a <a data-link-type="dfn" href="#normal" id="ref-for-normal⑤">normal</a> declaration. Author and user style sheets may contain important declarations, with <a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user②">user-origin</a> important declarations overriding <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author②">author-origin</a> important declarations. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation. <a data-link-type="dfn" href="#important" id="ref-for-important①②">Important</a> declarations from all origins take precedence over animations. This allows authors to override animated values in important cases. (Animated values normally override all other rules.) <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> <a data-link-type="dfn" href="#cascade-origin-ua" id="ref-for-cascade-origin-ua②">User-agent style sheets</a> may also contain <a data-link-type="dfn" href="#important" id="ref-for-important①③">important</a> declarations. These override all <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author③">author</a> and <a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user③">user</a> declarations. <div class="example" id="example-b189d121"> <a class="self-link" href="#example-b189d121"></a> The first rule in the user’s style sheet in the following example contains an !important declaration, which overrides the corresponding declaration in the author’s style sheet. The declaration in the second rule will also win due to being marked !important. However, the third declaration in the user’s style sheet is not !important and will therefore lose to the second rule in the author’s style sheet (which happens to set style on a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①①">shorthand</a> property). Also, the third author rule will lose to the second author rule since the second declaration is !important. This shows that !important declarations have a function also within author style sheets. <pre class="lang-css highlight"><c- c>/* From the user’s style sheet */</c-> p <c- p>{</c-> <c- k>text-indent</c-><c- p>:</c-> <c- m>1</c-><c- k>em</c-> !important <c- p>}</c-> p <c- p>{</c-> <c- k>font-style</c-><c- p>:</c-> italic !important <c- p>}</c-> p <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>18</c-><c- k>pt</c-> <c- p>}</c-> <c- c>/* From the author’s style sheet */</c-> p <c- p>{</c-> <c- k>text-indent</c-><c- p>:</c-> <c- m>1.5</c-><c- k>em</c-> !important <c- p>}</c-> p <c- p>{</c-> <c- k>font</c-><c- p>:</c-> normal <c- m>12</c-><c- k>pt</c-> sans-serif !important <c- p>}</c-> p <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> <c- m>24</c-><c- k>pt</c-> <c- p>}</c-> </pre> <table class="data"> <thead> <tr> <th>Property <th>Winning value <tbody> <tr> <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> <td>1em <tr> <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style①">font-style</a> <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-4/#valdef-font-style-italic" id="ref-for-valdef-font-style-italic">italic</a> <tr> <th><a class="property" 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</a> <td>12pt <tr> <th><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family①">font-family</a> <td><a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-fonts-4/#valdef-font-family-sans-serif" id="ref-for-valdef-font-family-sans-serif">sans-serif</a> </table> </div> <h3 class="heading settled" data-level="6.4" id="preshint">6.4. Precedence of Non-CSS Presentational Hints<a class="self-link" href="#preshint"></a></h3> The UA may choose to honor presentational hints in a source document’s markup, for example the <code>bgcolor</code> attribute or <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element" id="ref-for-the-s-element">s</a></code> element in <a data-link-type="biblio" href="#biblio-html">[HTML]</a>. All document language-based styling must be translated to corresponding CSS rules and enter the cascade as rules in either the <a data-link-type="dfn" href="#cascade-origin-ua" id="ref-for-cascade-origin-ua③">UA-origin</a> or a special-purpose <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="author-presentational-hint-origin">author presentational hint origin</dfn> between the regular <a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user④">user origin</a> and the <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author④">author origin</a>. For the purpose of <a data-link-type="dfn" href="#cascade" id="ref-for-cascade③">cascading</a> this <a data-link-type="dfn" href="#author-presentational-hint-origin" id="ref-for-author-presentational-hint-origin">author presentational hint origin</a> is treated as an independent <a data-link-type="dfn" href="#origin" id="ref-for-origin⑧">origin</a>, but for the purpose of the <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert①">revert</a> keyword it is considered part of the author origin. A document language may define whether such a presentational hint enters the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade④">cascade</a> as <a data-link-type="dfn" href="#cascade-origin-ua" id="ref-for-cascade-origin-ua④">UA-origin</a> or <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author⑥">author-origin</a>; if so, the UA must behave accordingly. For example, <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a> maps its presentation attributes into the author origin. Note: Presentational hints entering the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade⑤">cascade</a> as <a data-link-type="dfn" href="#cascade-origin-ua" id="ref-for-cascade-origin-ua⑤">UA-origin</a> rules can be overridden by <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author⑧">author-origin</a> or <a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user⑤">user-origin</a> styles. Presentational hints entering the cascade as <a data-link-type="dfn" href="#author-presentational-hint-origin" id="ref-for-author-presentational-hint-origin①">author presentational hint origin</a> rules can be overridden by author-origin styles, but not by non-<a data-link-type="dfn" href="#important" id="ref-for-important①④">important</a> user-origin styles. Host languages should choose the appropriate origin for presentational hints with these considerations in mind. <h2 class="heading settled" data-level="7" id="defaulting">7. Defaulting<a class="self-link" href="#defaulting"></a></h2> When the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade⑥">cascade</a> does not result in a value, the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①①">specified value</a> must be found some other way. <a data-link-type="dfn" href="#inherited-property" id="ref-for-inherited-property">Inherited properties</a> draw their defaults from their parent element through <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance③">inheritance</a>; all other properties take their <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value②">initial value</a>. Authors can explicitly request inheritance or initialization via the <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> and <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial">initial</a> keywords. <h3 class="heading settled" data-level="7.1" id="initial-values">7.1. Initial Values<a class="self-link" href="#initial-values"></a></h3> Each property has an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="initial-value">initial value</dfn>, defined in the property’s definition table. If the property is not an <a data-link-type="dfn" href="#inherited-property" id="ref-for-inherited-property①">inherited property</a>, and the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade⑦">cascade</a> does not result in a value, then the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①②">specified value</a> of the property is its <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value③">initial value</a>. <h3 class="heading settled" data-level="7.2" id="inheriting">7.2. Inheritance<a class="self-link" href="#inheriting"></a></h3> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inheritance|inherit" id="inheritance">Inheritance</dfn> propagates property values from parent elements to their children. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inherited-value">inherited value</dfn> of a property on an element is the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①②">computed value</a> of the property on the element’s parent element. For the root element, which has no parent element, the <a data-link-type="dfn" href="#inherited-value" id="ref-for-inherited-value">inherited value</a> is the <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value④">initial value</a> of the property. For a <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> tree with shadows, inheritance operates on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree②">flattened element tree</a>. This means that slotted elements inherit from the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element" id="ref-for-the-slot-element">slot</a></code> they’re assigned to, rather than directly from their <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-light-tree" id="ref-for-concept-light-tree">light tree</a> parent. <a data-link-type="dfn" href="https://www.w3.org/TR/selectors-4/#pseudo-element" id="ref-for-pseudo-element②">Pseudo-elements</a> inherit according to the fictional tag sequence described for each pseudo-element. <a data-link-type="biblio" href="#biblio-css-pseudo-4">[CSS-PSEUDO-4]</a> Some properties are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inherited property" id="inherited-property">inherited properties</dfn>, as defined in their property definition table. This means that, unless the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade⑧">cascade</a> results in a value, the value will be determined by <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance④">inheritance</a>. A property can also be explicitly inherited. See the <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit①">inherit</a> keyword. Note: Inheritance follows the document tree and is not intercepted by <a href="https://www.w3.org/TR/CSS2/visuren.html#box-gen">anonymous boxes</a>, or otherwise affected by manipulations of the box tree. <h3 class="heading settled" data-level="7.3" id="defaulting-keywords">7.3. Explicit Defaulting<a class="self-link" href="#defaulting-keywords"></a></h3> Several CSS-wide property values are defined below; declaring a property to have these values explicitly specifies a particular defaulting behavior. As specified in <a href="https://www.w3.org/TR/css-values/#common-keywords">CSS Values and Units</a> <a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a>, all CSS properties can accept these values. <h4 class="heading settled" data-level="7.3.1" id="initial">7.3.1. Resetting a Property: the <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial①">initial</a> keyword<a class="self-link" href="#initial"></a></h4> If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value⑨">cascaded value</a> of a property is the <dfn class="caniuse-paneled dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-initial">initial</dfn> keyword, the property’s <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①③">specified value</a> is its <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value⑤">initial value</a>. <h4 class="heading settled" data-level="7.3.2" id="inherit">7.3.2. Explicit Inheritance: the <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit②">inherit</a> keyword<a class="self-link" href="#inherit"></a></h4> If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⓪">cascaded value</a> of a property is the <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-inherit">inherit</dfn> keyword, the property’s <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①④">specified</a> and <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①③">computed values</a> are the <a data-link-type="dfn" href="#inherited-value" id="ref-for-inherited-value①">inherited value</a>. <h4 class="heading settled" data-level="7.3.3" id="inherit-initial">7.3.3. Erasing All Declarations: the <a class="css" data-link-type="maybe" href="#valdef-all-unset" id="ref-for-valdef-all-unset">unset</a> keyword<a class="self-link" href="#inherit-initial"></a></h4> If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①①">cascaded value</a> of a property is the <dfn class="caniuse-paneled dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-unset">unset</dfn> keyword, then if it is an inherited property, this is treated as <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit③">inherit</a>, and if it is not, this is treated as <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial②">initial</a>. This keyword effectively erases all <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑨">declared values</a> occurring earlier in the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade⑨">cascade</a>, correctly inheriting or not as appropriate for the property (or all longhands of a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①②">shorthand</a>). <h4 class="heading settled" data-level="7.3.4" id="default">7.3.4. Rolling Back Cascade Origins: the <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert②">revert</a> keyword<a class="self-link" href="#default"></a></h4> If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①②">cascaded value</a> of a property is the <dfn class="caniuse-paneled dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-revert">revert</dfn> keyword, the behavior depends on the <a data-link-type="dfn" href="#origin" id="ref-for-origin⑨">cascade origin</a> to which the declaration belongs: <dl> <dt><a data-link-type="dfn" href="#cascade-origin-ua" id="ref-for-cascade-origin-ua⑥">user-agent origin</a> <dd> Equivalent to <a class="css" data-link-type="maybe" href="#valdef-all-unset" id="ref-for-valdef-all-unset①">unset</a>. <dt><a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user⑦">user origin</a> <dd> Rolls back the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①③">cascaded value</a> to the user-agent level, so that the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⑤">specified value</a> is calculated as if no <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author①⓪">author-origin</a> or <a data-link-type="dfn" href="#cascade-origin-user" id="ref-for-cascade-origin-user⑧">user-origin</a> rules were specified for this property on this element. <dt><a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author①①">author origin</a> <dd> Rolls back the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①④">cascaded value</a> to the user level, so that the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⑥">specified value</a> is calculated as if no <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author①②">author-origin</a> rules were specified for this property on this element. For the purpose of <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert③">revert</a>, this origin includes the Animation <a data-link-type="dfn" href="#origin" id="ref-for-origin①⓪">origin</a>. </dl> <h2 class="heading settled" data-level="8" id="changes">8. Changes<a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" data-level="8.1" id="changes-2021-10">8.1. Changes since the 15 Oct 2021 Working Draft<a class="self-link" href="#changes-2021-10"></a></h3> Non-trivial changes since the <a href="https://www.w3.org/TR/2021/WD-css-cascade-4-20211015/">15 October 2021 Working Draft</a>: <ul> <li data-md> Updated @import grammar for media queries and supports conditions <li data-md> Allowed functional notation parse-time aliases <li data-md> Defined fetching an @import, in terms of Fetch <li data-md> Added <a href="#value-aliasing">§ 4.1.1 Value Aliasing</a> section. (<a href="https://github.com/w3c/csswg-drafts/issues/6193">Issue 6193</a>) </ul> <h3 class="heading settled" data-level="8.2" id="changes-2018">8.2. Changes Since the 28 August 2018 Candidate Recommendation<a class="self-link" href="#changes-2018"></a></h3> Non-trivial changes since the <a href="https://www.w3.org/TR/2021/WD-css-cascade-4-20210319/">19 March 2021 Working Draft</a> include: <ul class="non-normative"> <li id="change-2021-preshint-origin"><a class="self-link" href="#change-2021-preshint-origin"></a> Defined <a data-link-type="dfn" href="#author-presentational-hint-origin" id="ref-for-author-presentational-hint-origin②">author presentational hint origin</a> to handle author-origin presentational hints, instead of relying on zero-specificity and source order, to correctly define their interaction with the <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts③">encapsulation context</a> aspect of the cascade. (<a href="https://github.com/w3c/csswg-drafts/issues/6659">Issue 66749</a>) </ul> Non-trivial changes since the <a href="https://www.w3.org/TR/2020/WD-css-cascade-4-20200818/">18 August 2020 Working Draft</a> include: <ul class="non-normative"> <li id="change-2020-alias-subset"><a class="self-link" href="#change-2020-alias-subset"></a> Removed possibility of <a data-link-type="dfn" href="#legacy-name-alias" id="ref-for-legacy-name-alias①">legacy name aliases</a> to map subsets of the value space, since they are simple name aliases. (<a href="https://github.com/w3c/csswg-drafts/issues/4839">Issue 4839</a>) <li id="change-2020-applies-to"><a class="self-link" href="#change-2020-applies-to"></a> Gave concept of <a data-link-type="dfn" href="#apply" id="ref-for-apply②">applies to</a> its own section and add some notes about implications. (Issues <a href="https://github.com/w3c/csswg-drafts/issues/1861">1861</a> and <a href="https://github.com/w3c/csswg-drafts/issues/5565">5565</a>) <li id="change-2020-properties"><a class="self-link" href="#change-2020-properties"></a> Defined the term <a data-link-type="dfn" href="#css-property" id="ref-for-css-property①">property</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5633">Issue 5633</a>) <li id="change-2020-disconnected"> <a class="self-link" href="#change-2020-disconnected"></a> Defined value processing of elements that are not part of the tree. (Issue <a href="https://github.com/w3c/csswg-drafts/issues/1964">1964</a> and <a href="https://github.com/w3c/csswg-drafts/issues/1548">1548</a>) <blockquote> <ins>Elements that are not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected①">connected</a> or are not part of the document’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree③">flattened element tree</a> do not participate in CSS value processing, and do not have <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value①⓪">declared</a>, <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⑤">cascaded</a>, <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⑦">specified</a>, <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①④">computed</a>, <a data-link-type="dfn" href="#used-value" id="ref-for-used-value①⓪">used</a>, or <a data-link-type="dfn" href="#actual-value" id="ref-for-actual-value③">actual</a> values, even if they potentially have style declarations assigned to them (for example, by a <code>style</code> attribute).</ins> </blockquote> <li id="change-2020-origins"><a class="self-link" href="#change-2020-origins"></a> Clarify origin comparison for quirks mode Content-Type assumptions in <a href="#content-type">§ 2.3 Content-Type of CSS Style Sheets</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/4838">Issue 4838</a>) </ul> Non-trivial changes since the <a href="https://www.w3.org/TR/2018/CR-css-cascade-4-20180828/">28 August 2018 Candidate Recommendation</a> include: <ul class="non-normative"> <li id="change-2018-context"><a class="self-link" href="#change-2018-context"></a> Added <a href="#cascade-context">context</a> to the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①⓪">cascade</a> sort criteria to accommodate Shadow DOM. <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> (<a href="https://github.com/w3c/csswg-drafts/issues/5372">Issue 5372</a>) <li id="change-2018-shadow-inherit"><a class="self-link" href="#change-2018-shadow-inherit"></a> Defined that, in consideration of <a data-link-type="dfn" href="https://www.w3.org/TR/css-scoping-1/#shadow-tree" id="ref-for-shadow-tree①">shadow trees</a>, <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance⑤">inheritance</a> operates over the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree④">flattened element tree</a>. <li id="change-2018-drop-scoped"><a class="self-link" href="#change-2018-drop-scoped"></a> Removed scoping from the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①①">cascade</a> sort criteria, because it has not been implemented. </ul> <h3 class="heading settled" data-level="8.3" id="changes-2016">8.3. Changes Since the 14 January 2016 Candidate Recommendation<a class="self-link" href="#changes-2016"></a></h3> Non-trivial changes since the <a href="https://www.w3.org/TR/2016/CR-css-cascade-4-20160114/">14 January 2016 Working Draft</a> include: <ul class="non-normative"> <li id="change-2016-alias"><a class="self-link" href="#change-2016-alias"></a> Precisely defined the types of aliasing that CSS uses. (<a href="https://github.com/w3c/csswg-drafts/issues/866">Issue 866</a>) See <a href="#aliasing">§ 3.1 Property Aliasing</a>. <li id="change-2016-revert"> <a class="self-link" href="#change-2016-revert"></a> Clarified that <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert④">revert</a> only affects the cascaded value, not the inherited value. <blockquote> <dl> <dt>user origin <dd> Rolls back the <del>cascade</del> <ins> <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⑥">cascaded value</a> <ins> to the user-agent level, so that the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⑧">specified value</a> is calculated as if no author-level or user-level rules were specified for this property <ins>on this element</ins> . </ins> </ins> <dt>author origin <dd> Rolls back the <del>cascade</del> <ins><a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⑦">cascaded value</a></ins> to the user level, so that the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⑨">specified value</a> is calculated as if no author-level rules were specified for this property <ins>on this element</ins> . </dl> </blockquote> <li id="change-2016-custom-all"> <a class="self-link" href="#change-2016-custom-all"></a> Clarified that <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property①">custom properties</a> are not reset by the <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all③">all</a> shorthand. (<a href="https://github.com/w3c/csswg-drafts/issues/2518">2518</a>) <blockquote> The <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all④">all</a> property is a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①③">shorthand</a> that resets all CSS properties except <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②">unicode-bidi</a>. … <ins>It does not reset <a data-link-type="dfn" href="https://www.w3.org/TR/css-variables-1/#custom-property" id="ref-for-custom-property②">custom properties</a> <a data-link-type="biblio" href="#biblio-css-variables-1">[css-variables-1]</a>.</ins> </blockquote> <li id="change-2016-import"> <a class="self-link" href="#change-2016-import"></a> Defined more precisely that imported stylesheets are interpreted separately from the importing stylesheet, in terms of ordering of rules, etc. <blockquote> If an <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑤">@import</a> rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule <ins>, with two exceptions:</ins> <ins> <ul> <li>If a feature (such as the @namespace rule) explicitly defines that it only applies to a particular stylesheet, and not any imported ones, then it doesn’t apply to the imported stylesheet. <li>If a feature relies on the relative ordering of two or more constructs in a stylesheet (such as the requirement that <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-syntax-3/#at-ruledef-charset" id="ref-for-at-ruledef-charset①">@charset</a> must not have any other content preceding it), it only applies between constructs in the same stylesheet. </ul> </ins> </blockquote> <li id="change-2016-text"> <a class="self-link" href="#change-2016-text"></a> Specified that text nodes are considered children of their parent element, and receive styles via defaulting, as their properties are now observable distinct from their inline parent’s via <a class="css" data-link-type="propdesc" href="https://www.w3.org/TR/CSS2/visuren.html#propdef-display" id="ref-for-propdef-display③">display: contents</a> <a data-link-type="biblio" href="#biblio-css-display-3">[css-display-3]</a>. <blockquote> <ins> For the purpose of this specification, <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#text-nodes" id="ref-for-text-nodes①">text nodes</a> are treated as <a data-link-type="dfn" href="https://www.w3.org/TR/css-display-3/#elements" id="ref-for-elements①">element</a> children of their associated element, and possess the full set of properties; since they cannot be targeted by selectors all of their computed values are assigned by <a href="#defaulting">defaulting</a>. </ins> </blockquote> <li id="change-2016-override"><a class="self-link" href="#change-2016-override"></a> Removed any mention of the obsolete “override” origin, originally defined by <a href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">DOM Level 2 Style</a> and later abandoned. (<a href="https://github.com/w3c/csswg-drafts/issues/1385">Issue 1385</a>) </ul> A <a href="https://drafts.csswg.org/css-cascade-3/issues-cr-2016">Disposition of Comments</a> is available. <h3 class="heading settled" data-level="8.4" id="changes-2015">8.4. Changes Since the 21 April 2015 Working Draft<a class="self-link" href="#changes-2015"></a></h3> Changes since the <a href="https://www.w3.org/TR/2015/WD-css-cascade-4-20150421/">21 April 2015 Working Draft</a> include: <ul class="non-normative"> <li>Renamed default keyword to <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert⑤">revert</a>. <li>Allowed dropping duplicate parentheses in <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-5/#funcdef-supports" id="ref-for-funcdef-supports">supports()</a> syntax when it only contains one declaration. </ul> <h3 class="heading settled" data-level="8.5" id="additions-l3">8.5. Additions Since Level 3<a class="self-link" href="#additions-l3"></a></h3> The following features have been added since <a href="https://www.w3.org/TR/css-cascade-3/">Level 3</a>: <ul> <li data-md> Introduced <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert⑥">revert</a> keyword, for rolling back the cascade. <li data-md> Introduced <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-conditional-5/#funcdef-supports" id="ref-for-funcdef-supports①">supports()</a> syntax for supports-conditional <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑦">@import</a> rules. <li data-md> Added <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts④">encapsulation context</a> to the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①②">cascade</a> sort criteria to accommodate Shadow DOM. <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> <li data-md> Defined the property two aliasing mechanisms CSS uses to support legacy syntaxes. See <a href="#aliasing">§ 3.1 Property Aliasing</a>. </ul> <h3 class="heading settled" data-level="8.6" id="changes-2">8.6. Additions Since Level 2<a class="self-link" href="#changes-2"></a></h3> The following features have been added since <a href="https://www.w3.org/TR/CSS2/cascade.html">Level 2</a>: <ul> <li>The <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all⑤">all</a> shorthand <li>The <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial③">initial</a> keyword <li>The <a class="css" data-link-type="maybe" href="#valdef-all-unset" id="ref-for-valdef-all-unset②">unset</a> keyword <li>Incorporation of animations and transitions into the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①③">cascade</a>. </ul> <h2 class="no-num heading settled" id="acknowledgments">Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> David Baron, Tantek Çelik, Simon Sapin, Noam Rosenthal, and Boris Zbarsky contributed to this specification. <h2 class="no-num heading settled" id="priv-sec"> Privacy and Security Considerations<a class="self-link" href="#priv-sec"></a></h2> <ul> <li data-md> The cascade process does not distinguish between same-origin and cross-origin stylesheets, enabling the content of cross-origin stylesheets to be inferred from the computed styles they apply to a document. <li data-md> User preferences and UA defaults expressed via application of style rules are exposed by the cascade process, and can be inferred from the computed styles they apply to a document. <li data-md> The <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑧">@import</a> rule does not apply the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#cors-protocol" id="ref-for-cors-protocol">CORS protocol</a> to loading cross-origin stylesheets, instead allowing them to be freely imported and applied. <li data-md> The <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑨">@import</a> rule assumes that resources without <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type" id="termref-for-content-type"><code>Content-Type</code> metadata</a> (or any same-origin file if the host document is in quirks mode) are <code>text/css</code>, potentially allowing arbitrary files to be imported into the page and interpreted as CSS, potentially allowing sensitive data to be inferred from the computed styles they apply to a document. </ul> </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">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</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="note"</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></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. <h3 class="no-ref heading settled" id="w3c-cr-exit-criteria"> CR exit criteria<a class="self-link" href="#w3c-cr-exit-criteria"></a></h3> For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms: <dl> <dt>independent <dd>each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement. <dt>interoperable <dd>passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review. <dt>implementation <dd> a user agent which: <ol class="inline"> <li>implements the specification. <li>is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or "nightly build"). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability. <li>is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward). </ol> </dl> The specification will remain Candidate Recommendation for at least six months. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <aside class="caniuse-status wrapped" data-deco data-dfn-id="all-shorthand"> <input class="caniuse-panel-btn" type="button" value="CanIUse"> Support:Android Browser4.4.3+Baidu Browser7.12+Blackberry BrowserNoneChrome37+Chrome for Android96+Edge79+Firefox27+Firefox for Android95+IENoneIE MobileNoneKaiOS Browser2.5+Opera24+Opera MiniNoneOpera Mobile64+QQ Browser10.4+Safari9.1+Safari on iOS9.3+Samsung Internet4+UC Browser for Android12.12+ Source: <a href="https://caniuse.com/#feat=css-all">caniuse.com</a> as of 2022-01-08 </aside> <aside class="caniuse-status wrapped" data-deco data-dfn-id="valdef-all-initial"> <input class="caniuse-panel-btn" type="button" value="CanIUse"> Support:Android Browser2.3+Baidu Browser7.12+Blackberry Browser7+Chrome4+Chrome for Android96+Edge12+Firefox19+Firefox for Android95+IENoneIE MobileNoneKaiOS Browser2.5+Opera15+Opera MiniNoneOpera Mobile64+QQ Browser10.4+Safari3.2+Safari on iOS4.0+Samsung Internet4+UC Browser for Android12.12+ Source: <a href="https://caniuse.com/#feat=css-initial-value">caniuse.com</a> as of 2022-01-08 </aside> <aside class="caniuse-status wrapped" data-deco data-dfn-id="valdef-all-unset"> <input class="caniuse-panel-btn" type="button" value="CanIUse"> Support:Android Browser96+Baidu Browser7.12+Blackberry BrowserNoneChrome41+Chrome for Android96+Edge13+Firefox27+Firefox for Android95+IENoneIE MobileNoneKaiOS Browser2.5+Opera28+Opera MiniNoneOpera Mobile64+QQ Browser10.4+Safari9.1+Safari on iOS9.3+Samsung Internet4+UC Browser for Android12.12+ Source: <a href="https://caniuse.com/#feat=css-unset-value">caniuse.com</a> as of 2022-01-08 </aside> <aside class="caniuse-status wrapped" data-deco data-dfn-id="valdef-all-revert"> <input class="caniuse-panel-btn" type="button" value="CanIUse"> Support:Android Browser96+Baidu BrowserNoneBlackberry BrowserNoneChrome84+Chrome for Android96+Edge84+Firefox67+Firefox for Android95+IENoneIE MobileNoneKaiOS BrowserNoneOpera73+Opera MiniNoneOpera Mobile64+QQ BrowserNoneSafari9.1+Safari on iOS9.3+Samsung Internet14.0+UC Browser for AndroidNone Source: <a href="https://caniuse.com/#feat=css-revert-value">caniuse.com</a> as of 2022-01-08 </aside> <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="#actual-value">actual</a>, in § 4.6 <li><a href="#actual-value">actual value</a>, in § 4.6 <li><a href="#propdef-all">all</a>, in § 3.2 <li><a href="#cascade-origin-animation">Animation Origin</a>, in § 6.2 <li><a href="#apply">apply to</a>, in § 4.5.1 <li><a href="#cascade-origin-author">author origin</a>, in § 6.2 <li><a href="#cascade-origin-author">author-origin</a>, in § 6.2 <li><a href="#author-presentational-hint-origin">author presentational hint origin</a>, in § 6.4 <li><a href="#cascade-origin-author">author style sheet</a>, in § 6.2 <li><a href="#cascade">cascade</a>, in § 6 <li><a href="#cascaded-value">cascaded</a>, in § 4.2 <li><a href="#cascaded-value">cascaded value</a>, in § 4.2 <li><a href="#origin">cascade origin</a>, in § 6.2 <li><a href="#computed-value">computed</a>, in § 4.4 <li><a href="#computed-value">computed value</a>, in § 4.4 <li><a href="#encapsulation-contexts">context</a>, in § 6.1 <li><a href="#declared-value">declared</a>, in § 4.1 <li><a href="#declared-value">declared value</a>, in § 4.1 <li><a href="#encapsulation-contexts">encapsulation contexts</a>, in § 6.1 <li><a href="#fetch-an-import">fetch an @import</a>, in § 2.2 <li><a href="#at-ruledef-import">@import</a>, in § 2 <li><a href="#important">importance</a>, in § 6.3 <li><a href="#important">important</a>, in § 6.3 <li><a href="#import-conditions">import conditions</a>, in § 2 <li> inherit <ul> <li><a href="#inheritance">definition of</a>, in § 7.2 <li><a href="#valdef-all-inherit">value for all</a>, in § 7.3.2 </ul> <li><a href="#inheritance">inheritance</a>, in § 7.2 <li><a href="#inherited-property">inherited property</a>, in § 7.2 <li><a href="#inherited-value">inherited value</a>, in § 7.2 <li><a href="#valdef-all-initial">initial</a>, in § 7.3.1 <li><a href="#initial-value">initial value</a>, in § 7.1 <li><a href="#legacy-name-alias">legacy name alias</a>, in § 3.1 <li><a href="#legacy-shorthand">legacy shorthand</a>, in § 3.1 <li><a href="#css-legacy-value-alias">legacy value alias</a>, in § 4.1.1 <li><a href="#longhand">longhand</a>, in § 3 <li><a href="#longhand">longhand property</a>, in § 3 <li><a href="#normal">normal</a>, in § 6.3 <li><a href="#origin">origin</a>, in § 6.2 <li><a href="#output-of-the-cascade">output of the cascade</a>, in § 6.1 <li><a href="#css-property">property</a>, in § 1 <li><a href="#reset-only-sub-property">reset-only sub-property</a>, in § 3 <li><a href="#valdef-all-revert">revert</a>, in § 7.3.4 <li><a href="#shorthand-property">shorthand</a>, in § 3 <li><a href="#shorthand-property">shorthand property</a>, in § 3 <li><a href="#specified-value">specified</a>, in § 4.3 <li><a href="#specified-value">specified value</a>, in § 4.3 <li><a href="#longhand">sub-property</a>, in § 3 <li><a href="#cascade-origin-transition">Transition Origin</a>, in § 6.2 <li><a href="#cascade-origin-ua">UA origin</a>, in § 6.2 <li><a href="#cascade-origin-ua">UA-origin</a>, in § 6.2 <li><a href="#cascade-origin-ua">UA style sheet</a>, in § 6.2 <li><a href="#valdef-all-unset">unset</a>, in § 7.3.3 <li><a href="#used-value">used</a>, in § 4.5 <li><a href="#used-value">used value</a>, in § 4.5 <li><a href="#cascade-origin-ua">user-agent origin</a>, in § 6.2 <li><a href="#cascade-origin-ua">user-agent style sheet</a>, in § 6.2 <li><a href="#cascade-origin-user">user origin</a>, in § 6.2 <li><a href="#cascade-origin-user">user-origin</a>, in § 6.2 <li><a href="#cascade-origin-user">user style sheet</a>, in § 6.2 </ul> <aside class="dfn-panel" data-for="term-for-vendor-prefix"> <a href="https://www.w3.org/TR/css-2021/#vendor-prefix">https://www.w3.org/TR/css-2021/#vendor-prefix</a>Referenced in: <ul> <li><a href="#ref-for-vendor-prefix">4.1.1. Value Aliasing</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-justify-self-auto"> <a href="https://www.w3.org/TR/css-align-3/#valdef-justify-self-auto">https://www.w3.org/TR/css-align-3/#valdef-justify-self-auto</a>Referenced in: <ul> <li><a href="#ref-for-valdef-justify-self-auto">4.4. Computed Values</a> <li><a href="#ref-for-valdef-justify-self-auto①">4.5. Used Values</a> <a href="#ref-for-valdef-justify-self-auto②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-background"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background">https://www.w3.org/TR/css-backgrounds-3/#propdef-background</a>Referenced in: <ul> <li><a href="#ref-for-propdef-background">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-background-color"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-color">https://www.w3.org/TR/css-backgrounds-3/#propdef-background-color</a>Referenced in: <ul> <li><a href="#ref-for-propdef-background-color">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-background-image"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image">https://www.w3.org/TR/css-backgrounds-3/#propdef-background-image</a>Referenced in: <ul> <li><a href="#ref-for-propdef-background-image">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-border"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border">https://www.w3.org/TR/css-backgrounds-3/#propdef-border</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-width"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-bottom-width">https://www.w3.org/TR/css-backgrounds-3/#propdef-border-bottom-width</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border-bottom-width">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-border-image"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image">https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border-image">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-border-left-width"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-left-width">https://www.w3.org/TR/css-backgrounds-3/#propdef-border-left-width</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border-left-width">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-border-right-width"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-right-width">https://www.w3.org/TR/css-backgrounds-3/#propdef-border-right-width</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border-right-width">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-border-style"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-style">https://www.w3.org/TR/css-backgrounds-3/#propdef-border-style</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border-style">1. Introduction</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-border-top-width"> <a href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-width">https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-width</a>Referenced in: <ul> <li><a href="#ref-for-propdef-border-top-width">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-line-style-dotted"> <a href="https://www.w3.org/TR/css-backgrounds-3/#valdef-line-style-dotted">https://www.w3.org/TR/css-backgrounds-3/#valdef-line-style-dotted</a>Referenced in: <ul> <li><a href="#ref-for-valdef-line-style-dotted">1. Introduction</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-break-before"> <a href="https://www.w3.org/TR/css-break-3/#propdef-break-before">https://www.w3.org/TR/css-break-3/#propdef-break-before</a>Referenced in: <ul> <li><a href="#ref-for-propdef-break-before">3.1. Property Aliasing</a> <a href="#ref-for-propdef-break-before①">(2)</a> <a href="#ref-for-propdef-break-before②">(3)</a> <a href="#ref-for-propdef-break-before③">(4)</a> <li><a href="#ref-for-propdef-break-before④">4.5. Used Values</a> <a href="#ref-for-propdef-break-before⑤">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-orphans"> <a href="https://www.w3.org/TR/css-break-3/#propdef-orphans">https://www.w3.org/TR/css-break-3/#propdef-orphans</a>Referenced in: <ul> <li><a href="#ref-for-propdef-orphans">4.6. Actual Values</a> <li><a href="#ref-for-propdef-orphans①">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-break-before-page"> <a href="https://www.w3.org/TR/css-break-4/#valdef-break-before-page">https://www.w3.org/TR/css-break-4/#valdef-break-before-page</a>Referenced in: <ul> <li><a href="#ref-for-valdef-break-before-page">4.5. Used Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-color"> <a href="https://www.w3.org/TR/css-color-4/#typedef-color">https://www.w3.org/TR/css-color-4/#typedef-color</a>Referenced in: <ul> <li><a href="#ref-for-typedef-color">1. Introduction</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-color"> <a href="https://www.w3.org/TR/css-color-4/#propdef-color">https://www.w3.org/TR/css-color-4/#propdef-color</a>Referenced in: <ul> <li><a href="#ref-for-propdef-color">1. Introduction</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-color-red"> <a href="https://www.w3.org/TR/css-color-4/#valdef-color-red">https://www.w3.org/TR/css-color-4/#valdef-color-red</a>Referenced in: <ul> <li><a href="#ref-for-valdef-color-red">1. Introduction</a> <li><a href="#ref-for-valdef-color-red①">4.4. Computed Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-supports-condition"> <a href="https://www.w3.org/TR/css3-conditional/#typedef-supports-condition">https://www.w3.org/TR/css3-conditional/#typedef-supports-condition</a>Referenced in: <ul> <li><a href="#ref-for-typedef-supports-condition">Unnumbered Section</a> <li><a href="#ref-for-typedef-supports-condition①">2. Importing Style Sheets: the @import rule</a> <a href="#ref-for-typedef-supports-condition②">(2)</a> <li><a href="#ref-for-typedef-supports-condition③">2.1. Conditional @import Rules</a> <a href="#ref-for-typedef-supports-condition④">(2)</a> <a href="#ref-for-typedef-supports-condition⑤">(3)</a> <a href="#ref-for-typedef-supports-condition⑥">(4)</a> <li><a href="#ref-for-typedef-supports-condition⑦">2.2. Processing Stylesheet Imports</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-supports-decl"> <a href="https://www.w3.org/TR/css3-conditional/#typedef-supports-decl">https://www.w3.org/TR/css3-conditional/#typedef-supports-decl</a>Referenced in: <ul> <li><a href="#ref-for-typedef-supports-decl">2.1. Conditional @import Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-media"> <a href="https://www.w3.org/TR/css3-conditional/#at-ruledef-media">https://www.w3.org/TR/css3-conditional/#at-ruledef-media</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-media">2.1. Conditional @import Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-supports"> <a href="https://www.w3.org/TR/css3-conditional/#at-ruledef-supports">https://www.w3.org/TR/css3-conditional/#at-ruledef-supports</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-supports">2.1. Conditional @import Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-funcdef-supports"> <a href="https://www.w3.org/TR/css-conditional-5/#funcdef-supports">https://www.w3.org/TR/css-conditional-5/#funcdef-supports</a>Referenced in: <ul> <li><a href="#ref-for-funcdef-supports">8.4. Changes Since the 21 April 2015 Working Draft</a> <li><a href="#ref-for-funcdef-supports①">8.5. Additions Since Level 3</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-display-type"> <a href="https://www.w3.org/TR/css-display-3/#display-type">https://www.w3.org/TR/css-display-3/#display-type</a>Referenced in: <ul> <li><a href="#ref-for-display-type">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-elements"> <a href="https://www.w3.org/TR/css-display-3/#elements">https://www.w3.org/TR/css-display-3/#elements</a>Referenced in: <ul> <li><a href="#ref-for-elements">1.1. Module Interactions</a> <li><a href="#ref-for-elements①">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-inline-box"> <a href="https://www.w3.org/TR/css-display-3/#inline-box">https://www.w3.org/TR/css-display-3/#inline-box</a>Referenced in: <ul> <li><a href="#ref-for-inline-box">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-text-nodes"> <a href="https://www.w3.org/TR/css-display-3/#text-nodes">https://www.w3.org/TR/css-display-3/#text-nodes</a>Referenced in: <ul> <li><a href="#ref-for-text-nodes">1.1. Module Interactions</a> <li><a href="#ref-for-text-nodes①">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-flex"> <a href="https://www.w3.org/TR/css-flexbox-1/#propdef-flex">https://www.w3.org/TR/css-flexbox-1/#propdef-flex</a>Referenced in: <ul> <li><a href="#ref-for-propdef-flex">4.5. Used Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-flex-item"> <a href="https://www.w3.org/TR/css-flexbox-1/#flex-item">https://www.w3.org/TR/css-flexbox-1/#flex-item</a>Referenced in: <ul> <li><a href="#ref-for-flex-item">4.5. Used Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-font-weight-bolder"> <a href="https://www.w3.org/TR/css-fonts-4/#valdef-font-weight-bolder">https://www.w3.org/TR/css-fonts-4/#valdef-font-weight-bolder</a>Referenced in: <ul> <li><a href="#ref-for-valdef-font-weight-bolder">4.4. Computed Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-font"> <a href="https://www.w3.org/TR/css-fonts-4/#propdef-font">https://www.w3.org/TR/css-fonts-4/#propdef-font</a>Referenced in: <ul> <li><a href="#ref-for-propdef-font">3. Shorthand Properties</a> <a href="#ref-for-propdef-font①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-font-family"> <a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-family">https://www.w3.org/TR/css-fonts-4/#propdef-font-family</a>Referenced in: <ul> <li><a href="#ref-for-propdef-font-family">3. Shorthand Properties</a> <li><a href="#ref-for-propdef-font-family①">6.3. Important Declarations: the !important annotation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-font-style"> <a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-style">https://www.w3.org/TR/css-fonts-4/#propdef-font-style</a>Referenced in: <ul> <li><a href="#ref-for-propdef-font-style">3. Shorthand Properties</a> <li><a href="#ref-for-propdef-font-style①">6.3. Important Declarations: the !important annotation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-font-variant"> <a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant">https://www.w3.org/TR/css-fonts-4/#propdef-font-variant</a>Referenced in: <ul> <li><a href="#ref-for-propdef-font-variant">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-font-weight"> <a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-weight">https://www.w3.org/TR/css-fonts-4/#propdef-font-weight</a>Referenced in: <ul> <li><a href="#ref-for-propdef-font-weight">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-font-style-italic"> <a href="https://www.w3.org/TR/css-fonts-4/#valdef-font-style-italic">https://www.w3.org/TR/css-fonts-4/#valdef-font-style-italic</a>Referenced in: <ul> <li><a href="#ref-for-valdef-font-style-italic">6.3. Important Declarations: the !important annotation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-font-family-sans-serif"> <a href="https://www.w3.org/TR/css-fonts-4/#valdef-font-family-sans-serif">https://www.w3.org/TR/css-fonts-4/#valdef-font-family-sans-serif</a>Referenced in: <ul> <li><a href="#ref-for-valdef-font-family-sans-serif">6.3. Important Declarations: the !important annotation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-descdef-font-face-font-size"> <a href="https://www.w3.org/TR/css-fonts-5/#descdef-font-face-font-size">https://www.w3.org/TR/css-fonts-5/#descdef-font-face-font-size</a>Referenced in: <ul> <li><a href="#ref-for-descdef-font-face-font-size">1. Introduction</a> <li><a href="#ref-for-descdef-font-face-font-size①">3. Shorthand Properties</a> <li><a href="#ref-for-descdef-font-face-font-size②">4.7. Examples</a> <li><a href="#ref-for-descdef-font-face-font-size③">6.3. Important Declarations: the !important annotation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-font-size-adjust"> <a href="https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust">https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust</a>Referenced in: <ul> <li><a href="#ref-for-propdef-font-size-adjust">4.6. Actual Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-root-inline-box"> <a href="https://www.w3.org/TR/css-inline-3/#root-inline-box">https://www.w3.org/TR/css-inline-3/#root-inline-box</a>Referenced in: <ul> <li><a href="#ref-for-root-inline-box">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-list-style-position"> <a href="https://www.w3.org/TR/css-lists-3/#propdef-list-style-position">https://www.w3.org/TR/css-lists-3/#propdef-list-style-position</a>Referenced in: <ul> <li><a href="#ref-for-propdef-list-style-position">4.7. Examples</a> <a href="#ref-for-propdef-list-style-position①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selectordef-after"> <a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-after">https://www.w3.org/TR/css-pseudo-4/#selectordef-after</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-after">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-selectordef-before"> <a href="https://www.w3.org/TR/css-pseudo-4/#selectordef-before">https://www.w3.org/TR/css-pseudo-4/#selectordef-before</a>Referenced in: <ul> <li><a href="#ref-for-selectordef-before">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-flat-tree"> <a href="https://drafts.csswg.org/css-scoping-1/#flat-tree">https://drafts.csswg.org/css-scoping-1/#flat-tree</a>Referenced in: <ul> <li><a href="#ref-for-flat-tree">4. Value Processing</a> <a href="#ref-for-flat-tree①">(2)</a> <li><a href="#ref-for-flat-tree②">7.2. Inheritance</a> <li><a href="#ref-for-flat-tree③">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> <a href="#ref-for-flat-tree④">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-flat-tree"> <a href="https://drafts.csswg.org/css-scoping-1/#flat-tree">https://drafts.csswg.org/css-scoping-1/#flat-tree</a>Referenced in: <ul> <li><a href="#ref-for-flat-tree">4. Value Processing</a> <a href="#ref-for-flat-tree①">(2)</a> <li><a href="#ref-for-flat-tree②">7.2. Inheritance</a> <li><a href="#ref-for-flat-tree③">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> <a href="#ref-for-flat-tree④">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-shadow-tree"> <a href="https://www.w3.org/TR/css-scoping-1/#shadow-tree">https://www.w3.org/TR/css-scoping-1/#shadow-tree</a>Referenced in: <ul> <li><a href="#ref-for-shadow-tree">6.1. Cascade Sorting Order</a> <li><a href="#ref-for-shadow-tree①">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-tree-context"> <a href="https://drafts.csswg.org/css-scoping-1/#tree-context">https://drafts.csswg.org/css-scoping-1/#tree-context</a>Referenced in: <ul> <li><a href="#ref-for-tree-context">6.1. Cascade Sorting Order</a> <a href="#ref-for-tree-context①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-height"> <a href="https://www.w3.org/TR/css-sizing-3/#propdef-height">https://www.w3.org/TR/css-sizing-3/#propdef-height</a>Referenced in: <ul> <li><a href="#ref-for-propdef-height">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-width"> <a href="https://www.w3.org/TR/css-sizing-3/#propdef-width">https://www.w3.org/TR/css-sizing-3/#propdef-width</a>Referenced in: <ul> <li><a href="#ref-for-propdef-width">4.5. Used Values</a> <li><a href="#ref-for-propdef-width①">4.7. Examples</a> <a href="#ref-for-propdef-width②">(2)</a> <a href="#ref-for-propdef-width③">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-at-ruledef-charset"> <a href="https://www.w3.org/TR/css-syntax-3/#at-ruledef-charset">https://www.w3.org/TR/css-syntax-3/#at-ruledef-charset</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-charset">2. Importing Style Sheets: the @import rule</a> <li><a href="#ref-for-at-ruledef-charset①">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-environment-encoding"> <a href="https://www.w3.org/TR/css-syntax-3/#environment-encoding">https://www.w3.org/TR/css-syntax-3/#environment-encoding</a>Referenced in: <ul> <li><a href="#ref-for-environment-encoding">2.2. Processing Stylesheet Imports</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-parse-a-stylesheet"> <a href="https://www.w3.org/TR/css-syntax-3/#parse-a-stylesheet">https://www.w3.org/TR/css-syntax-3/#parse-a-stylesheet</a>Referenced in: <ul> <li><a href="#ref-for-parse-a-stylesheet">2.2. Processing Stylesheet Imports</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-css-property-declarations"> <a href="https://www.w3.org/TR/css-syntax-3/#css-property-declarations">https://www.w3.org/TR/css-syntax-3/#css-property-declarations</a>Referenced in: <ul> <li><a href="#ref-for-css-property-declarations">1. Introduction</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-align"> <a href="https://www.w3.org/TR/css-text-3/#propdef-text-align">https://www.w3.org/TR/css-text-3/#propdef-text-align</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-align">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-indent"> <a href="https://www.w3.org/TR/css-text-3/#propdef-text-indent">https://www.w3.org/TR/css-text-3/#propdef-text-indent</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-indent">6.3. Important Declarations: the !important annotation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-transform"> <a href="https://www.w3.org/TR/css-text-3/#propdef-text-transform">https://www.w3.org/TR/css-text-3/#propdef-text-transform</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-transform">4.5.1. Applicable Properties</a> <a href="#ref-for-propdef-text-transform①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-ex"> <a href="https://www.w3.org/TR/css-values-3/#ex">https://www.w3.org/TR/css-values-3/#ex</a>Referenced in: <ul> <li><a href="#ref-for-ex">4.4. Computed Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-length-percentage"> <a href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage">https://www.w3.org/TR/css-values-4/#typedef-length-percentage</a>Referenced in: <ul> <li><a href="#ref-for-typedef-length-percentage">1. Introduction</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-length-value"> <a href="https://www.w3.org/TR/css-values-4/#length-value">https://www.w3.org/TR/css-values-4/#length-value</a>Referenced in: <ul> <li><a href="#ref-for-length-value">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-string-value"> <a href="https://www.w3.org/TR/css-values-4/#string-value">https://www.w3.org/TR/css-values-4/#string-value</a>Referenced in: <ul> <li><a href="#ref-for-string-value">2. Importing Style Sheets: the @import rule</a> <a href="#ref-for-string-value①">(2)</a> <a href="#ref-for-string-value②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-url-value"> <a href="https://www.w3.org/TR/css-values-4/#url-value">https://www.w3.org/TR/css-values-4/#url-value</a>Referenced in: <ul> <li><a href="#ref-for-url-value">2. Importing Style Sheets: the @import rule</a> <a href="#ref-for-url-value①">(2)</a> <a href="#ref-for-url-value②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-mult-opt"> <a href="https://www.w3.org/TR/css-values-4/#mult-opt">https://www.w3.org/TR/css-values-4/#mult-opt</a>Referenced in: <ul> <li><a href="#ref-for-mult-opt">2. Importing Style Sheets: the @import rule</a> <a href="#ref-for-mult-opt①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-ch"> <a href="https://www.w3.org/TR/css-values-4/#ch">https://www.w3.org/TR/css-values-4/#ch</a>Referenced in: <ul> <li><a href="#ref-for-ch">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-css-wide-keywords"> <a href="https://www.w3.org/TR/css-values-4/#css-wide-keywords">https://www.w3.org/TR/css-values-4/#css-wide-keywords</a>Referenced in: <ul> <li><a href="#ref-for-css-wide-keywords">4.3. Specified Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-em"> <a href="https://www.w3.org/TR/css-values-4/#em">https://www.w3.org/TR/css-values-4/#em</a>Referenced in: <ul> <li><a href="#ref-for-em">4.4. Computed Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-fetch-a-style-resource"> <a href="https://www.w3.org/TR/css-values-4/#fetch-a-style-resource">https://www.w3.org/TR/css-values-4/#fetch-a-style-resource</a>Referenced in: <ul> <li><a href="#ref-for-fetch-a-style-resource">2.2. Processing Stylesheet Imports</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-funcdef-url"> <a href="https://www.w3.org/TR/css-values-4/#funcdef-url">https://www.w3.org/TR/css-values-4/#funcdef-url</a>Referenced in: <ul> <li><a href="#ref-for-funcdef-url">2. Importing Style Sheets: the @import rule</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-length-vh"> <a href="https://www.w3.org/TR/css-values-4/#valdef-length-vh">https://www.w3.org/TR/css-values-4/#valdef-length-vh</a>Referenced in: <ul> <li><a href="#ref-for-valdef-length-vh">4.4. Computed Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-length-vw"> <a href="https://www.w3.org/TR/css-values-4/#valdef-length-vw">https://www.w3.org/TR/css-values-4/#valdef-length-vw</a>Referenced in: <ul> <li><a href="#ref-for-valdef-length-vw">4.4. Computed Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-comb-one"> <a href="https://www.w3.org/TR/css-values-4/#comb-one">https://www.w3.org/TR/css-values-4/#comb-one</a>Referenced in: <ul> <li><a href="#ref-for-comb-one">2. Importing Style Sheets: the @import rule</a> <a href="#ref-for-comb-one①">(2)</a> <li><a href="#ref-for-comb-one②">3.2. Resetting All Properties: the all property</a> <a href="#ref-for-comb-one③">(2)</a> <a href="#ref-for-comb-one④">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-custom-property"> <a href="https://www.w3.org/TR/css-variables-1/#custom-property">https://www.w3.org/TR/css-variables-1/#custom-property</a>Referenced in: <ul> <li><a href="#ref-for-custom-property">3.2. Resetting All Properties: the all property</a> <li><a href="#ref-for-custom-property①">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> <a href="#ref-for-custom-property②">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-direction"> <a href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction">https://www.w3.org/TR/css-writing-modes-3/#propdef-direction</a>Referenced in: <ul> <li><a href="#ref-for-propdef-direction">3.2. Resetting All Properties: the all property</a> <a href="#ref-for-propdef-direction①">(2)</a> <li><a href="#ref-for-propdef-direction②">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-unicode-bidi"> <a href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi">https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi</a>Referenced in: <ul> <li><a href="#ref-for-propdef-unicode-bidi">3.2. Resetting All Properties: the all property</a> <a href="#ref-for-propdef-unicode-bidi①">(2)</a> <li><a href="#ref-for-propdef-unicode-bidi②">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-text-orientation"> <a href="https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation">https://www.w3.org/TR/css-writing-modes-4/#propdef-text-orientation</a>Referenced in: <ul> <li><a href="#ref-for-propdef-text-orientation">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-writing-mode"> <a href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode">https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode</a>Referenced in: <ul> <li><a href="#ref-for-propdef-writing-mode">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-display"> <a href="https://www.w3.org/TR/CSS2/visuren.html#propdef-display">https://www.w3.org/TR/CSS2/visuren.html#propdef-display</a>Referenced in: <ul> <li><a href="#ref-for-propdef-display">2. Importing Style Sheets: the @import rule</a> <li><a href="#ref-for-propdef-display①">3.2. Resetting All Properties: the all property</a> <li><a href="#ref-for-propdef-display②">4.5.1. Applicable Properties</a> <li><a href="#ref-for-propdef-display③">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-line-height"> <a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height</a>Referenced in: <ul> <li><a href="#ref-for-propdef-line-height">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-page-break-after"> <a href="https://www.w3.org/TR/CSS2/page.html#propdef-page-break-after">https://www.w3.org/TR/CSS2/page.html#propdef-page-break-after</a>Referenced in: <ul> <li><a href="#ref-for-propdef-page-break-after">4.6. Actual Values</a> <li><a href="#ref-for-propdef-page-break-after①">4.7. Examples</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-propdef-page-break-before"> <a href="https://www.w3.org/TR/CSS2/page.html#propdef-page-break-before">https://www.w3.org/TR/CSS2/page.html#propdef-page-break-before</a>Referenced in: <ul> <li><a href="#ref-for-propdef-page-break-before">3.1. Property Aliasing</a> <a href="#ref-for-propdef-page-break-before①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-dom-window-getcomputedstyle"> <a href="https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle">https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle</a>Referenced in: <ul> <li><a href="#ref-for-dom-window-getcomputedstyle">4.4. Computed Values</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-css-style-sheet-location"> <a href="https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-location">https://www.w3.org/TR/cssom-1/#concept-css-style-sheet-location</a>Referenced in: <ul> <li><a href="#ref-for-concept-css-style-sheet-location">2.2. Processing Stylesheet Imports</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-css-style-sheet-origin-clean-flag"> <a href="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-origin-clean-flag</a>Referenced in: <ul> <li><a href="#ref-for-concept-css-style-sheet-origin-clean-flag">2.2. Processing Stylesheet Imports</a> <a href="#ref-for-concept-css-style-sheet-origin-clean-flag①">(2)</a> <a href="#ref-for-concept-css-style-sheet-origin-clean-flag②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-css-rule-parent-css-style-sheet"> <a href="https://www.w3.org/TR/cssom-1/#concept-css-rule-parent-css-style-sheet">https://www.w3.org/TR/cssom-1/#concept-css-rule-parent-css-style-sheet</a>Referenced in: <ul> <li><a href="#ref-for-concept-css-rule-parent-css-style-sheet">2.2. Processing Stylesheet Imports</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-dom-cssimportrule-stylesheet"> <a href="https://www.w3.org/TR/cssom-1/#dom-cssimportrule-stylesheet">https://www.w3.org/TR/cssom-1/#dom-cssimportrule-stylesheet</a>Referenced in: <ul> <li><a href="#ref-for-dom-cssimportrule-stylesheet">2.2. Processing Stylesheet Imports</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-connected"> <a href="https://dom.spec.whatwg.org/#connected">https://dom.spec.whatwg.org/#connected</a>Referenced in: <ul> <li><a href="#ref-for-connected">4. Value Processing</a> <li><a href="#ref-for-connected①">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-light-tree"> <a href="https://dom.spec.whatwg.org/#concept-light-tree">https://dom.spec.whatwg.org/#concept-light-tree</a>Referenced in: <ul> <li><a href="#ref-for-concept-light-tree">7.2. Inheritance</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-document-quirks"> <a href="https://dom.spec.whatwg.org/#concept-document-quirks">https://dom.spec.whatwg.org/#concept-document-quirks</a>Referenced in: <ul> <li><a href="#ref-for-concept-document-quirks">2.2. Processing Stylesheet Imports</a> <li><a href="#ref-for-concept-document-quirks①">2.3. Content-Type of CSS Style Sheets</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-shadow-including-tree-order"> <a href="https://dom.spec.whatwg.org/#concept-shadow-including-tree-order">https://dom.spec.whatwg.org/#concept-shadow-including-tree-order</a>Referenced in: <ul> <li><a href="#ref-for-concept-shadow-including-tree-order">6.1. Cascade Sorting Order</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cors-protocol"> <a href="https://fetch.spec.whatwg.org/#cors-protocol">https://fetch.spec.whatwg.org/#cors-protocol</a>Referenced in: <ul> <li><a href="#ref-for-cors-protocol"> Privacy and Security Considerations</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-response"> <a href="https://fetch.spec.whatwg.org/#concept-response">https://fetch.spec.whatwg.org/#concept-response</a>Referenced in: <ul> <li><a href="#ref-for-concept-response">2.2. Processing Stylesheet Imports</a> <li><a href="#ref-for-concept-response①">2.3. Content-Type of CSS Style Sheets</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-response-url"> <a href="https://fetch.spec.whatwg.org/#concept-response-url">https://fetch.spec.whatwg.org/#concept-response-url</a>Referenced in: <ul> <li><a href="#ref-for-concept-response-url">2.3. Content-Type of CSS Style Sheets</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-content-type"> <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type">https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type</a>Referenced in: <ul> <li><a href="#ref-for-content-type">2.3. Content-Type of CSS Style Sheets</a> <a href="#ref-for-content-type①">(2)</a> <li><a href="#termref-for-content-type"> Privacy and Security Considerations</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-cors-same-origin"> <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-same-origin">https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-same-origin</a>Referenced in: <ul> <li><a href="#ref-for-cors-same-origin">2.2. Processing Stylesheet Imports</a> <a href="#ref-for-cors-same-origin①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-p-element"> <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element">https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element</a>Referenced in: <ul> <li><a href="#ref-for-the-p-element">4.5.1. Applicable Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-s-element"> <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element</a>Referenced in: <ul> <li><a href="#ref-for-the-s-element">6.4. Precedence of Non-CSS Presentational Hints</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-same-origin"> <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin">https://html.spec.whatwg.org/multipage/origin.html#same-origin</a>Referenced in: <ul> <li><a href="#ref-for-same-origin">2.3. Content-Type of CSS Style Sheets</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-the-slot-element"> <a href="https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element">https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element</a>Referenced in: <ul> <li><a href="#ref-for-the-slot-element">7.2. Inheritance</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-media-query-list"> <a href="https://www.w3.org/TR/mediaqueries-4/#typedef-media-query-list">https://www.w3.org/TR/mediaqueries-4/#typedef-media-query-list</a>Referenced in: <ul> <li><a href="#ref-for-typedef-media-query-list">2. Importing Style Sheets: the @import rule</a> <a href="#ref-for-typedef-media-query-list①">(2)</a> <li><a href="#ref-for-typedef-media-query-list②">2.1. Conditional @import Rules</a> <a href="#ref-for-typedef-media-query-list③">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-typedef-media-query"> <a href="https://www.w3.org/TR/mediaqueries-4/#typedef-media-query">https://www.w3.org/TR/mediaqueries-4/#typedef-media-query</a>Referenced in: <ul> <li><a href="#ref-for-typedef-media-query">1.1. Module Interactions</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-valdef-media-all"> <a href="https://www.w3.org/TR/mediaqueries-4/#valdef-media-all">https://www.w3.org/TR/mediaqueries-4/#valdef-media-all</a>Referenced in: <ul> <li><a href="#ref-for-valdef-media-all">2.1. Conditional @import Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-media-query-list"> <a href="https://www.w3.org/TR/mediaqueries-4/#media-query-list">https://www.w3.org/TR/mediaqueries-4/#media-query-list</a>Referenced in: <ul> <li><a href="#ref-for-media-query-list">2.1. Conditional @import Rules</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-pseudo-element"> <a href="https://www.w3.org/TR/selectors-4/#pseudo-element">https://www.w3.org/TR/selectors-4/#pseudo-element</a>Referenced in: <ul> <li><a href="#ref-for-pseudo-element">4.5.1. Applicable Properties</a> <a href="#ref-for-pseudo-element①">(2)</a> <li><a href="#ref-for-pseudo-element②">7.2. Inheritance</a> <a href="#ref-for-pseudo-element③">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="term-for-concept-url-parser"> <a href="https://url.spec.whatwg.org/#concept-url-parser">https://url.spec.whatwg.org/#concept-url-parser</a>Referenced in: <ul> <li><a href="#ref-for-concept-url-parser">2.2. Processing Stylesheet Imports</a> </ul> </aside> <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-2021]</a> defines the following terms: <ul> <li>vendor-prefixed </ul> <li> <a data-link-type="biblio">[css-align-3]</a> defines the following terms: <ul> <li>auto </ul> <li> <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms: <ul> <li>background <li>background-color <li>background-image <li>border <li>border-bottom-width <li>border-image <li>border-left-width <li>border-right-width <li>border-style <li>border-top-width <li>dotted </ul> <li> <a data-link-type="biblio">[css-break-3]</a> defines the following terms: <ul> <li>break-before <li>orphans </ul> <li> <a data-link-type="biblio">[css-break-4]</a> defines the following terms: <ul> <li>page </ul> <li> <a data-link-type="biblio">[css-color-4]</a> defines the following terms: <ul> <li><color> <li>color <li>red </ul> <li> <a data-link-type="biblio">[CSS-CONDITIONAL-3]</a> defines the following terms: <ul> <li><supports-condition> <li><supports-decl> <li>@media <li>@supports </ul> <li> <a data-link-type="biblio">[css-conditional-5]</a> defines the following terms: <ul> <li>supports() </ul> <li> <a data-link-type="biblio">[css-display-3]</a> defines the following terms: <ul> <li>display type <li>element <li>inline box <li>text node </ul> <li> <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms: <ul> <li>flex <li>flex item </ul> <li> <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms: <ul> <li>bolder <li>font <li>font-family <li>font-style <li>font-variant <li>font-weight <li>italic <li>sans-serif </ul> <li> <a data-link-type="biblio">[css-fonts-5]</a> defines the following terms: <ul> <li>font-size <li>font-size-adjust </ul> <li> <a data-link-type="biblio">[css-inline-3]</a> defines the following terms: <ul> <li>root inline box </ul> <li> <a data-link-type="biblio">[css-lists-3]</a> defines the following terms: <ul> <li>list-style-position </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::after <li>::before </ul> <li> <a data-link-type="biblio">[css-scoping-1]</a> defines the following terms: <ul> <li>flat tree <li>flattened element tree <li>shadow tree <li>tree context </ul> <li> <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms: <ul> <li>height <li>width </ul> <li> <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms: <ul> <li>@charset <li>environment encoding <li>parse a stylesheet <li>property declarations </ul> <li> <a data-link-type="biblio">[css-text-3]</a> defines the following terms: <ul> <li>text-align <li>text-indent <li>text-transform </ul> <li> <a data-link-type="biblio">[css-values-3]</a> defines the following terms: <ul> <li>ex </ul> <li> <a data-link-type="biblio">[css-values-4]</a> defines the following terms: <ul> <li><length-percentage> <li><length> <li><string> <li><url> <li>? <li>ch <li>css-wide keywords <li>em <li>fetch a style resource <li>url() <li>vh <li>vw <li>| </ul> <li> <a data-link-type="biblio">[css-variables-1]</a> defines the following terms: <ul> <li>custom property </ul> <li> <a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms: <ul> <li>direction <li>unicode-bidi </ul> <li> <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms: <ul> <li>text-orientation <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>display <li>line-height <li>page-break-after <li>page-break-before </ul> <li> <a data-link-type="biblio">[CSSOM]</a> defines the following terms: <ul> <li>getComputedStyle(elt) <li>location <li>origin-clean flag <li>parent css style sheet <li>styleSheet </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>connected <li>light tree <li>quirks mode <li>shadow-including tree order </ul> <li> <a data-link-type="biblio">[FETCH]</a> defines the following terms: <ul> <li>cors protocol <li>response <li>url </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>content-type metadata <li>cors-same-origin <li>p <li>s <li>same origin <li>slot </ul> <li> <a data-link-type="biblio">[MEDIAQ]</a> defines the following terms: <ul> <li><media-query-list> <li><media-query> <li>all <li>media query list </ul> <li> <a data-link-type="biblio">[selectors-4]</a> defines the following terms: <ul> <li>pseudo-element </ul> <li> <a data-link-type="biblio">[URL]</a> defines the following terms: <ul> <li>url parser </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-2021">[CSS-2021] <dd>Tab Atkins Jr.; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-2021/"><cite>CSS Snapshot 2021</cite></a>. 31 December 2021. NOTE. URL: <a href="https://www.w3.org/TR/css-2021/">https://www.w3.org/TR/css-2021/</a> <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1] <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/"><cite>CSS Animations Level 1</cite></a>. 11 October 2018. 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-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. 26 July 2021. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</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>. 15 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</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>. 23 December 2021. 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-conditional-5">[CSS-CONDITIONAL-5] <dd>David Baron; Elika Etemad; Chris Lilley. <a href="https://www.w3.org/TR/css-conditional-5/"><cite>CSS Conditional Rules Module Level 5</cite></a>. 21 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-conditional-5/">https://www.w3.org/TR/css-conditional-5/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/"><cite>CSS Display Module Level 3</cite></a>. 3 September 2021. 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-fonts-5">[CSS-FONTS-5] <dd>Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-5/"><cite>CSS Fonts Module Level 5</cite></a>. 21 December 2021. 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-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. 31 December 2020. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</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-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-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/"><cite>CSS Transitions</cite></a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. 6 June 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 16 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css-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>. 11 November 2021. 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-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. 10 December 2019. REC. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</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-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-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-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-select">[SELECT] <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/"><cite>Selectors Level 3</cite></a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/"><cite>Selectors Level 4</cite></a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</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> </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-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/"><cite>CSS Box Alignment Module Level 3</cite></a>. 24 December 2021. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a> <dt id="biblio-css-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-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a> <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. 21 December 2021. 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-inline-3">[CSS-INLINE-3] <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. 27 August 2020. 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-lists-3">[CSS-LISTS-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-lists-3/"><cite>CSS Lists and Counters Module Level 3</cite></a>. 17 November 2020. WD. URL: <a href="https://www.w3.org/TR/css-lists-3/">https://www.w3.org/TR/css-lists-3/</a> <dt id="biblio-css-page-3">[CSS-PAGE-3] <dd>Elika Etemad; Simon Sapin. <a href="https://www.w3.org/TR/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. 18 October 2018. 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-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-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>. 22 April 2021. 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-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-svg11">[SVG11] <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/"><cite>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</cite></a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-all" id="ref-for-propdef-all⑥">all</a> <td>initial | inherit | unset | revert <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties </table> </div> <aside class="dfn-panel" data-for="css-property"> <a href="#css-property">#css-property</a>Referenced in: <ul> <li><a href="#ref-for-css-property">1. Introduction</a> <li><a href="#ref-for-css-property①">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="at-ruledef-import"> <a href="#at-ruledef-import">#at-ruledef-import</a>Referenced in: <ul> <li><a href="#ref-for-at-ruledef-import①">2. Importing Style Sheets: the @import rule</a> <a href="#ref-for-at-ruledef-import②">(2)</a> <a href="#ref-for-at-ruledef-import③">(3)</a> <a href="#ref-for-at-ruledef-import④">(4)</a> <a href="#ref-for-at-ruledef-import⑤">(5)</a> <a href="#ref-for-at-ruledef-import⑥">(6)</a> <a href="#ref-for-at-ruledef-import⑦">(7)</a> <a href="#ref-for-at-ruledef-import⑧">(8)</a> <a href="#ref-for-at-ruledef-import⑨">(9)</a> <li><a href="#ref-for-at-ruledef-import①⓪">2.1. Conditional @import Rules</a> <a href="#ref-for-at-ruledef-import①①">(2)</a> <li><a href="#ref-for-at-ruledef-import①②">2.2. Processing Stylesheet Imports</a> <li><a href="#ref-for-at-ruledef-import①③">6.1. Cascade Sorting Order</a> <a href="#ref-for-at-ruledef-import①④">(2)</a> <li><a href="#ref-for-at-ruledef-import①⑤">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> <a href="#ref-for-at-ruledef-import①⑥">(2)</a> <li><a href="#ref-for-at-ruledef-import①⑦">8.5. Additions Since Level 3</a> <li><a href="#ref-for-at-ruledef-import①⑧"> Privacy and Security Considerations</a> <a href="#ref-for-at-ruledef-import①⑨">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="import-conditions"> <a href="#import-conditions">#import-conditions</a>Referenced in: <ul> <li><a href="#ref-for-import-conditions">2.1. Conditional @import Rules</a> <a href="#ref-for-import-conditions①">(2)</a> <a href="#ref-for-import-conditions②">(3)</a> <a href="#ref-for-import-conditions③">(4)</a> <a href="#ref-for-import-conditions④">(5)</a> <a href="#ref-for-import-conditions⑤">(6)</a> </ul> </aside> <aside class="dfn-panel" data-for="shorthand-property"> <a href="#shorthand-property">#shorthand-property</a>Referenced in: <ul> <li><a href="#ref-for-shorthand-property">3. Shorthand Properties</a> <a href="#ref-for-shorthand-property①">(2)</a> <a href="#ref-for-shorthand-property②">(3)</a> <a href="#ref-for-shorthand-property③">(4)</a> <a href="#ref-for-shorthand-property④">(5)</a> <a href="#ref-for-shorthand-property⑤">(6)</a> <a href="#ref-for-shorthand-property⑥">(7)</a> <a href="#ref-for-shorthand-property⑦">(8)</a> <a href="#ref-for-shorthand-property⑧">(9)</a> <li><a href="#ref-for-shorthand-property⑨">3.1. Property Aliasing</a> <li><a href="#ref-for-shorthand-property①⓪">3.2. Resetting All Properties: the all property</a> <li><a href="#ref-for-shorthand-property①①">6.3. Important Declarations: the !important annotation</a> <li><a href="#ref-for-shorthand-property①②">7.3.3. Erasing All Declarations: the unset keyword</a> <li><a href="#ref-for-shorthand-property①③">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="longhand"> <a href="#longhand">#longhand</a>Referenced in: <ul> <li><a href="#ref-for-longhand">3. Shorthand Properties</a> <a href="#ref-for-longhand①">(2)</a> <a href="#ref-for-longhand②">(3)</a> <a href="#ref-for-longhand③">(4)</a> <a href="#ref-for-longhand④">(5)</a> <a href="#ref-for-longhand⑤">(6)</a> <a href="#ref-for-longhand⑥">(7)</a> <a href="#ref-for-longhand⑦">(8)</a> <a href="#ref-for-longhand⑧">(9)</a> <a href="#ref-for-longhand⑨">(10)</a> </ul> </aside> <aside class="dfn-panel" data-for="reset-only-sub-property"> <a href="#reset-only-sub-property">#reset-only-sub-property</a>Referenced in: <ul> <li><a href="#ref-for-reset-only-sub-property">3. Shorthand Properties</a> </ul> </aside> <aside class="dfn-panel" data-for="legacy-name-alias"> <a href="#legacy-name-alias">#legacy-name-alias</a>Referenced in: <ul> <li><a href="#ref-for-legacy-name-alias">3.1. Property Aliasing</a> <li><a href="#ref-for-legacy-name-alias①">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="legacy-shorthand"> <a href="#legacy-shorthand">#legacy-shorthand</a>Referenced in: <ul> <li><a href="#ref-for-legacy-shorthand">3.1. Property Aliasing</a> <a href="#ref-for-legacy-shorthand①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="propdef-all"> <a href="#propdef-all">#propdef-all</a>Referenced in: <ul> <li><a href="#ref-for-propdef-all">3.2. Resetting All Properties: the all property</a> <a href="#ref-for-propdef-all①">(2)</a> <a href="#ref-for-propdef-all②">(3)</a> <li><a href="#ref-for-propdef-all③">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> <a href="#ref-for-propdef-all④">(2)</a> <li><a href="#ref-for-propdef-all⑤">8.6. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="declared-value"> <a href="#declared-value">#declared-value</a>Referenced in: <ul> <li><a href="#ref-for-declared-value">4. Value Processing</a> <a href="#ref-for-declared-value①">(2)</a> <a href="#ref-for-declared-value②">(3)</a> <li><a href="#ref-for-declared-value③">4.1.1. Value Aliasing</a> <li><a href="#ref-for-declared-value④">4.2. Cascaded Values</a> <li><a href="#ref-for-declared-value⑤">5. Filtering</a> <a href="#ref-for-declared-value⑥">(2)</a> <li><a href="#ref-for-declared-value⑦">6. Cascading</a> <li><a href="#ref-for-declared-value⑧">6.1. Cascade Sorting Order</a> <li><a href="#ref-for-declared-value⑨">7.3.3. Erasing All Declarations: the unset keyword</a> <li><a href="#ref-for-declared-value①⓪">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="cascaded-value"> <a href="#cascaded-value">#cascaded-value</a>Referenced in: <ul> <li><a href="#ref-for-cascaded-value">4. Value Processing</a> <a href="#ref-for-cascaded-value①">(2)</a> <a href="#ref-for-cascaded-value②">(3)</a> <li><a href="#ref-for-cascaded-value③">4.2. Cascaded Values</a> <li><a href="#ref-for-cascaded-value④">4.3. Specified Values</a> <a href="#ref-for-cascaded-value⑤">(2)</a> <a href="#ref-for-cascaded-value⑥">(3)</a> <a href="#ref-for-cascaded-value⑦">(4)</a> <li><a href="#ref-for-cascaded-value⑧">6. Cascading</a> <li><a href="#ref-for-cascaded-value⑨">7.3.1. Resetting a Property: the initial keyword</a> <li><a href="#ref-for-cascaded-value①⓪">7.3.2. Explicit Inheritance: the inherit keyword</a> <li><a href="#ref-for-cascaded-value①①">7.3.3. Erasing All Declarations: the unset keyword</a> <li><a href="#ref-for-cascaded-value①②">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> <a href="#ref-for-cascaded-value①③">(2)</a> <a href="#ref-for-cascaded-value①④">(3)</a> <li><a href="#ref-for-cascaded-value①⑤">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> <li><a href="#ref-for-cascaded-value①⑥">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> <a href="#ref-for-cascaded-value①⑦">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="specified-value"> <a href="#specified-value">#specified-value</a>Referenced in: <ul> <li><a href="#ref-for-specified-value">1. Introduction</a> <li><a href="#ref-for-specified-value①">4. Value Processing</a> <a href="#ref-for-specified-value②">(2)</a> <a href="#ref-for-specified-value③">(3)</a> <li><a href="#ref-for-specified-value④">4.3. Specified Values</a> <a href="#ref-for-specified-value⑤">(2)</a> <a href="#ref-for-specified-value⑥">(3)</a> <a href="#ref-for-specified-value⑦">(4)</a> <li><a href="#ref-for-specified-value⑧">4.4. Computed Values</a> <a href="#ref-for-specified-value⑨">(2)</a> <a href="#ref-for-specified-value①⓪">(3)</a> <li><a href="#ref-for-specified-value①①">7. Defaulting</a> <li><a href="#ref-for-specified-value①②">7.1. Initial Values</a> <li><a href="#ref-for-specified-value①③">7.3.1. Resetting a Property: the initial keyword</a> <li><a href="#ref-for-specified-value①④">7.3.2. Explicit Inheritance: the inherit keyword</a> <li><a href="#ref-for-specified-value①⑤">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> <a href="#ref-for-specified-value①⑥">(2)</a> <li><a href="#ref-for-specified-value①⑦">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> <li><a href="#ref-for-specified-value①⑧">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> <a href="#ref-for-specified-value①⑨">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="computed-value"> <a href="#computed-value">#computed-value</a>Referenced in: <ul> <li><a href="#ref-for-computed-value">4. Value Processing</a> <a href="#ref-for-computed-value①">(2)</a> <a href="#ref-for-computed-value②">(3)</a> <li><a href="#ref-for-computed-value③">4.4. Computed Values</a> <a href="#ref-for-computed-value④">(2)</a> <a href="#ref-for-computed-value⑤">(3)</a> <a href="#ref-for-computed-value⑥">(4)</a> <a href="#ref-for-computed-value⑦">(5)</a> <a href="#ref-for-computed-value⑧">(6)</a> <li><a href="#ref-for-computed-value⑨">4.5. Used Values</a> <a href="#ref-for-computed-value①⓪">(2)</a> <li><a href="#ref-for-computed-value①①">4.5.1. Applicable Properties</a> <li><a href="#ref-for-computed-value①②">7.2. Inheritance</a> <li><a href="#ref-for-computed-value①③">7.3.2. Explicit Inheritance: the inherit keyword</a> <li><a href="#ref-for-computed-value①④">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="used-value"> <a href="#used-value">#used-value</a>Referenced in: <ul> <li><a href="#ref-for-used-value">4. Value Processing</a> <a href="#ref-for-used-value①">(2)</a> <a href="#ref-for-used-value②">(3)</a> <a href="#ref-for-used-value③">(4)</a> <li><a href="#ref-for-used-value④">4.4. Computed Values</a> <li><a href="#ref-for-used-value⑤">4.5. Used Values</a> <a href="#ref-for-used-value⑥">(2)</a> <a href="#ref-for-used-value⑦">(3)</a> <li><a href="#ref-for-used-value⑧">4.6. Actual Values</a> <a href="#ref-for-used-value⑨">(2)</a> <li><a href="#ref-for-used-value①⓪">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="apply"> <a href="#apply">#apply</a>Referenced in: <ul> <li><a href="#ref-for-apply">4.4. Computed Values</a> <li><a href="#ref-for-apply①">4.5. Used Values</a> <li><a href="#ref-for-apply②">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="actual-value"> <a href="#actual-value">#actual-value</a>Referenced in: <ul> <li><a href="#ref-for-actual-value">4. Value Processing</a> <a href="#ref-for-actual-value①">(2)</a> <a href="#ref-for-actual-value②">(3)</a> <li><a href="#ref-for-actual-value③">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="cascade"> <a href="#cascade">#cascade</a>Referenced in: <ul> <li><a href="#ref-for-cascade">1. Introduction</a> <a href="#ref-for-cascade">(2)</a> <li><a href="#ref-for-cascade①">4.1. Declared Values</a> <li><a href="#ref-for-cascade">4.2. Cascaded Values</a> <li><a href="#ref-for-cascade②">5. Filtering</a> <li><a href="#ref-for-cascade③">6.4. Precedence of Non-CSS Presentational Hints</a> <a href="#ref-for-cascade④">(2)</a> <a href="#ref-for-cascade⑤">(3)</a> <li><a href="#ref-for-cascade⑥">7. Defaulting</a> <li><a href="#ref-for-cascade⑦">7.1. Initial Values</a> <li><a href="#ref-for-cascade⑧">7.2. Inheritance</a> <li><a href="#ref-for-cascade⑨">7.3.3. Erasing All Declarations: the unset keyword</a> <li><a href="#ref-for-cascade①⓪">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> <a href="#ref-for-cascade①①">(2)</a> <li><a href="#ref-for-cascade①②">8.5. Additions Since Level 3</a> <li><a href="#ref-for-cascade①③">8.6. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="encapsulation-contexts"> <a href="#encapsulation-contexts">#encapsulation-contexts</a>Referenced in: <ul> <li><a href="#ref-for-encapsulation-contexts">6.1. Cascade Sorting Order</a> <a href="#ref-for-encapsulation-contexts①">(2)</a> <a href="#ref-for-encapsulation-contexts②">(3)</a> <li><a href="#ref-for-encapsulation-contexts③">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> <li><a href="#ref-for-encapsulation-contexts④">8.5. Additions Since Level 3</a> </ul> </aside> <aside class="dfn-panel" data-for="output-of-the-cascade"> <a href="#output-of-the-cascade">#output-of-the-cascade</a>Referenced in: <ul> <li><a href="#ref-for-output-of-the-cascade">4.2. Cascaded Values</a> <a href="#ref-for-output-of-the-cascade①">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="origin"> <a href="#origin">#origin</a>Referenced in: <ul> <li><a href="#ref-for-origin">2.2. Processing Stylesheet Imports</a> <a href="#ref-for-origin①">(2)</a> <li><a href="#ref-for-origin②">6.1. Cascade Sorting Order</a> <a href="#ref-for-origin③">(2)</a> <a href="#ref-for-origin④">(3)</a> <a href="#ref-for-origin⑤">(4)</a> <li><a href="#ref-for-origin⑥">6.2. Cascading Origins</a> <a href="#ref-for-origin⑦">(2)</a> <li><a href="#ref-for-origin⑧">6.4. Precedence of Non-CSS Presentational Hints</a> <li><a href="#ref-for-origin⑨">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> <a href="#ref-for-origin①⓪">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="cascade-origin-author"> <a href="#cascade-origin-author">#cascade-origin-author</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-author">6.1. Cascade Sorting Order</a> <a href="#ref-for-cascade-origin-author①">(2)</a> <li><a href="#ref-for-cascade-origin-author②">6.3. Important Declarations: the !important annotation</a> <a href="#ref-for-cascade-origin-author③">(2)</a> <li><a href="#ref-for-cascade-origin-author④">6.4. Precedence of Non-CSS Presentational Hints</a> <a href="#ref-for-cascade-origin-author⑤">(2)</a> <a href="#ref-for-cascade-origin-author⑥">(3)</a> <a href="#ref-for-cascade-origin-author⑦">(4)</a> <a href="#ref-for-cascade-origin-author⑧">(5)</a> <a href="#ref-for-cascade-origin-author⑨">(6)</a> <li><a href="#ref-for-cascade-origin-author①⓪">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> <a href="#ref-for-cascade-origin-author①①">(2)</a> <a href="#ref-for-cascade-origin-author①②">(3)</a> </ul> </aside> <aside class="dfn-panel" data-for="cascade-origin-user"> <a href="#cascade-origin-user">#cascade-origin-user</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-user">6.1. Cascade Sorting Order</a> <a href="#ref-for-cascade-origin-user①">(2)</a> <li><a href="#ref-for-cascade-origin-user②">6.3. Important Declarations: the !important annotation</a> <a href="#ref-for-cascade-origin-user③">(2)</a> <li><a href="#ref-for-cascade-origin-user④">6.4. Precedence of Non-CSS Presentational Hints</a> <a href="#ref-for-cascade-origin-user⑤">(2)</a> <a href="#ref-for-cascade-origin-user⑥">(3)</a> <li><a href="#ref-for-cascade-origin-user⑦">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> <a href="#ref-for-cascade-origin-user⑧">(2)</a> </ul> </aside> <aside class="dfn-panel" data-for="cascade-origin-ua"> <a href="#cascade-origin-ua">#cascade-origin-ua</a>Referenced in: <ul> <li><a href="#ref-for-cascade-origin-ua">6.1. Cascade Sorting Order</a> <a href="#ref-for-cascade-origin-ua①">(2)</a> <li><a href="#ref-for-cascade-origin-ua②">6.3. Important Declarations: the !important annotation</a> <li><a href="#ref-for-cascade-origin-ua③">6.4. Precedence of Non-CSS Presentational Hints</a> <a href="#ref-for-cascade-origin-ua④">(2)</a> <a href="#ref-for-cascade-origin-ua⑤">(3)</a> <li><a href="#ref-for-cascade-origin-ua⑥">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> </ul> </aside> <aside class="dfn-panel" data-for="important"> <a href="#important">#important</a>Referenced in: <ul> <li><a href="#ref-for-important">6.1. Cascade Sorting Order</a> <a href="#ref-for-important①">(2)</a> <a href="#ref-for-important②">(3)</a> <a href="#ref-for-important③">(4)</a> <a href="#ref-for-important④">(5)</a> <a href="#ref-for-important⑤">(6)</a> <li><a href="#ref-for-important⑥">6.3. Important Declarations: the !important annotation</a> <a href="#ref-for-important⑦">(2)</a> <a href="#ref-for-important⑧">(3)</a> <a href="#ref-for-important⑨">(4)</a> <a href="#ref-for-important①⓪">(5)</a> <a href="#ref-for-important①①">(6)</a> <a href="#ref-for-important①②">(7)</a> <a href="#ref-for-important①③">(8)</a> <li><a href="#ref-for-important①④">6.4. Precedence of Non-CSS Presentational Hints</a> </ul> </aside> <aside class="dfn-panel" data-for="normal"> <a href="#normal">#normal</a>Referenced in: <ul> <li><a href="#ref-for-normal">6.1. Cascade Sorting Order</a> <a href="#ref-for-normal①">(2)</a> <a href="#ref-for-normal②">(3)</a> <a href="#ref-for-normal③">(4)</a> <a href="#ref-for-normal④">(5)</a> <li><a href="#ref-for-normal⑤">6.3. Important Declarations: the !important annotation</a> </ul> </aside> <aside class="dfn-panel" data-for="author-presentational-hint-origin"> <a href="#author-presentational-hint-origin">#author-presentational-hint-origin</a>Referenced in: <ul> <li><a href="#ref-for-author-presentational-hint-origin">6.4. Precedence of Non-CSS Presentational Hints</a> <a href="#ref-for-author-presentational-hint-origin①">(2)</a> <li><a href="#ref-for-author-presentational-hint-origin②">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="initial-value"> <a href="#initial-value">#initial-value</a>Referenced in: <ul> <li><a href="#ref-for-initial-value">1. Introduction</a> <li><a href="#ref-for-initial-value①">3. Shorthand Properties</a> <li><a href="#ref-for-initial-value②">7. Defaulting</a> <li><a href="#ref-for-initial-value③">7.1. Initial Values</a> <li><a href="#ref-for-initial-value④">7.2. Inheritance</a> <li><a href="#ref-for-initial-value⑤">7.3.1. Resetting a Property: the initial keyword</a> </ul> </aside> <aside class="dfn-panel" data-for="inheritance"> <a href="#inheritance">#inheritance</a>Referenced in: <ul> <li><a href="#ref-for-inheritance">1. Introduction</a> <li><a href="#ref-for-inheritance①">4.4. Computed Values</a> <a href="#ref-for-inheritance②">(2)</a> <li><a href="#ref-for-inheritance③">7. Defaulting</a> <li><a href="#ref-for-inheritance④">7.2. Inheritance</a> <li><a href="#ref-for-inheritance⑤">8.2. Changes Since the 28 August 2018 Candidate Recommendation</a> </ul> </aside> <aside class="dfn-panel" data-for="inherited-value"> <a href="#inherited-value">#inherited-value</a>Referenced in: <ul> <li><a href="#ref-for-inherited-value">7.2. Inheritance</a> <li><a href="#ref-for-inherited-value①">7.3.2. Explicit Inheritance: the inherit keyword</a> </ul> </aside> <aside class="dfn-panel" data-for="inherited-property"> <a href="#inherited-property">#inherited-property</a>Referenced in: <ul> <li><a href="#ref-for-inherited-property">7. Defaulting</a> <li><a href="#ref-for-inherited-property①">7.1. Initial Values</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-all-initial"> <a href="#valdef-all-initial">#valdef-all-initial</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-initial">7. Defaulting</a> <li><a href="#ref-for-valdef-all-initial①">7.3.1. Resetting a Property: the initial keyword</a> <li><a href="#ref-for-valdef-all-initial②">7.3.3. Erasing All Declarations: the unset keyword</a> <li><a href="#ref-for-valdef-all-initial③">8.6. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-all-inherit"> <a href="#valdef-all-inherit">#valdef-all-inherit</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-inherit">7. Defaulting</a> <li><a href="#ref-for-valdef-all-inherit①">7.2. Inheritance</a> <li><a href="#ref-for-valdef-all-inherit②">7.3.2. Explicit Inheritance: the inherit keyword</a> <li><a href="#ref-for-valdef-all-inherit③">7.3.3. Erasing All Declarations: the unset keyword</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-all-unset"> <a href="#valdef-all-unset">#valdef-all-unset</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-unset">7.3.3. Erasing All Declarations: the unset keyword</a> <li><a href="#ref-for-valdef-all-unset①">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> <li><a href="#ref-for-valdef-all-unset②">8.6. Additions Since Level 2</a> </ul> </aside> <aside class="dfn-panel" data-for="valdef-all-revert"> <a href="#valdef-all-revert">#valdef-all-revert</a>Referenced in: <ul> <li><a href="#ref-for-valdef-all-revert①">6.4. Precedence of Non-CSS Presentational Hints</a> <li><a href="#ref-for-valdef-all-revert②">7.3.4. Rolling Back Cascade Origins: the revert keyword</a> <a href="#ref-for-valdef-all-revert③">(2)</a> <li><a href="#ref-for-valdef-all-revert④">8.3. Changes Since the 14 January 2016 Candidate Recommendation</a> <li><a href="#ref-for-valdef-all-revert⑤">8.4. Changes Since the 21 April 2015 Working Draft</a> <li><a href="#ref-for-valdef-all-revert⑥">8.5. Additions Since Level 3</a> </ul> </aside> <script>/* script-caniuse-panel */ window.addEventListener("load", function(){ var panels = [].slice.call(document.querySelectorAll(".caniuse-status")); for(var i = 0; i < panels.length; i++) { var panel = panels[i]; var dfn = document.querySelector("#" + panel.getAttribute("data-dfn-id")); var rect = dfn.getBoundingClientRect(); panel.style.top = (window.scrollY + rect.top) + "px"; } }); document.body.addEventListener("click", function(e) { if(e.target.classList.contains("caniuse-panel-btn")) { e.target.parentNode.classList.toggle("wrapped"); } });</script> <script>/* script-dfn-panel */ document.body.addEventListener("click", function(e) { var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); } // Find the dfn element or panel, if any, that was clicked on. var el = e.target; var target; var hitALink = false; while(el.parentElement) { if(el.tagName == "A") { // Clicking on a link in a <dfn> shouldn't summon the panel hitALink = true; } if(el.classList.contains("dfn-paneled")) { target = "dfn"; break; } if(el.classList.contains("dfn-panel")) { target = "dfn-panel"; break; } el = el.parentElement; } if(target != "dfn-panel") { // Turn off any currently "on" or "activated" panels. queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){ el.classList.remove("on"); el.classList.remove("activated"); }); } if(target == "dfn" && !hitALink) { // open the panel var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']"); if(dfnPanel) { dfnPanel.classList.add("on"); var rect = el.getBoundingClientRect(); dfnPanel.style.left = window.scrollX + rect.right + 5 + "px"; dfnPanel.style.top = window.scrollY + rect.top + "px"; var panelRect = dfnPanel.getBoundingClientRect(); var panelWidth = panelRect.right - panelRect.left; if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) { // Reposition, because the panel is overflowing dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px"; } } else { console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']"); } } else if(target == "dfn-panel") { // Switch it to "activated" state, which pins it. el.classList.add("activated"); el.style.left = null; el.style.top = null; } }); </script> <script>/* script-var-click-highlighting */ document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); { const indexCounts = new Map(); const indexNames = new Map(); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = null; let searchEl = v; while(algoContainer == null && searchEl != document.body) { searchEl = searchEl.parentNode; if(searchEl.hasAttribute("data-algorithm")) { algoContainer = searchEl; } } // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const algoName = algoContainer.getAttribute("data-algorithm"); const varName = getVarName(v); const addClass = !v.classList.contains("selected"); let highlightClass = null; if(addClass) { const index = chooseHighlightIndex(algoName, varName); indexCounts.get(algoName)[index] += 1; indexNames.set(algoName+"///"+varName, index); highlightClass = nameFromIndex(index); } else { const index = previousHighlightIndex(algoName, varName); indexCounts.get(algoName)[index] -= 1; highlightClass = nameFromIndex(index); } // Find all same-name vars, and toggle their class appropriately. for(const el of algoContainer.querySelectorAll("var")) { if(getVarName(el) == varName) { el.classList.toggle("selected", addClass); el.classList.toggle(highlightClass, addClass); } } } function getVarName(el) { return el.textContent.replace(/(\s|\xa0)+/, " ").trim(); } function chooseHighlightIndex(algoName, varName) { let indexes = null; if(indexCounts.has(algoName)) { indexes = indexCounts.get(algoName); } else { // 7 classes right now indexes = [0,0,0,0,0,0,0]; indexCounts.set(algoName, indexes); } // If the element was recently unclicked, // *and* that color is still unclaimed, // give it back the same color. const lastIndex = previousHighlightIndex(algoName, varName); if(indexes[lastIndex] === 0) return lastIndex; // Find the earliest index with the lowest count. const minCount = Math.min.apply(null, indexes); let index = null; for(var i = 0; i < indexes.length; i++) { if(indexes[i] == minCount) { return i; } } } function previousHighlightIndex(algoName, varName) { return indexNames.get(algoName+"///"+varName); } function nameFromIndex(index) { return "selected" + index; } } </script>