CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Cascading and Inheritance Level 5</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 742f3d674, updated Mon Nov 4 14:56:54 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-cascade-5/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="dbde8fabad3b9e7fb3b25413cb4293c8e9d527d8" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-caniuse-panel */ @media (max-width: 767px) { .caniuse-status { opacity: .1; transition: opacity .1s; } } :root { --caniuse-bg: #EEE; --caniuse-shadow: #999; --caniuse-nosupport-text: #ccc; --caniuse-partialsupport-text: #666; } @media (prefers-color-scheme: dark) { :root { --caniuse-bg: #222; --caniuse-shadow: #444; --caniuse-nosupport-text: #666; --caniuse-partialsupport-text: #bbb; } } .caniuse-status { background: var(--caniuse-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--caniuse-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: .2em; position: absolute; right: 0.3em; top: auto; width: fit-content; word-wrap: normal; z-index: 8; } .caniuse-status.unpositioned { display: none; } .caniuse-status.overlapping-main { opacity: .2; transition: opacity .1s; } .caniuse-status[open] { opacity: 1; z-index: 9; min-width: 9em; width: fit-content; } .caniuse-status:hover { outline: var(--text, black) 1px solid; opacity: 1; } .caniuse-status > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .caniuse-status > p { font-size: 0.6em; margin: 0; padding: 0; clear: both; } .caniuse-status > p + p { padding-top: 0.5em; } .caniuse-status > .support { display: block; } .caniuse-status > .support > span { padding: 0.2em 0; display: block; display: table; } .caniuse-status > .support > span.partial { color: var(--caniuse-partialsupport-text, #666666); filter: grayscale(50%); } .caniuse-status > .support > span.no { color: var(--caniuse-nosupport-text, #CCCCCC); filter: grayscale(100%); } .caniuse-status > .support > span.no::before { opacity: 0.5; } .caniuse-status > .support > span:first-of-type { padding-top: 0.5em; } .caniuse-status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; } .caniuse-status > .support > span > span:first-child { width: 100%; } .caniuse-status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .caniuse-status > .support > span::before { content: ' '; display: table-cell; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .caniuse-status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */ .caniuse-status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); } .caniuse-status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */ .caniuse-status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .caniuse-status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .caniuse-status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); } .caniuse-status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .caniuse-status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); } .caniuse-status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .caniuse-status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .caniuse-status > .caniuse { text-align: right; font-style: italic; } @media (max-width: 767px) { .caniuse-status.wrapped { width: 9em; height: auto; } .caniuse-status:not(.wrapped) { height: 1em; max-width: min-content; } .caniuse-status.wrapped > :not(input) { display: block; } .caniuse-status:not(.wrapped) > :not(input) { display: none; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-idl-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .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; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/static/images/favicons/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Cascading and Inheritance Level 5</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2023-08-28">28 August 2023</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://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2022/CR-css-cascade-5-20220113/" rel="prev">https://www.w3.org/TR/2022/CR-css-cascade-5-20220113/</a> <dd><a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20211015/" rel="prev">https://www.w3.org/TR/2021/WD-css-cascade-5-20211015/</a> <dd><a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210829/" rel="prev">https://www.w3.org/TR/2021/WD-css-cascade-5-20210829/</a> <dd><a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210608/" rel="prev">https://www.w3.org/TR/2021/WD-css-cascade-5-20210608/</a> <dd><a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210319/" rel="prev">https://www.w3.org/TR/2021/WD-css-cascade-5-20210319/</a> <dd><a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210119/" rel="prev">https://www.w3.org/TR/2021/WD-css-cascade-5-20210119/</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-5">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (Apple) <dd class="editor p-author h-card vcard" data-editor-id="117151"><a class="p-name fn u-url url" href="http://miriamsuzanne.com/contact">Miriam E. Suzanne</a> (Invited Expert) <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-5/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This CSS module describes 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 is <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers">cascade layers</a>. <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-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/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </div> <div data-fill-with="at-risk"> The following features are at-risk, and may be dropped during the CR period: <ul> <li>the <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer">revert-layer</a> keyword </ul> “At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first. </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> <li><a href="#fragments">4.8 Per-Fragment Value Processing</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="#layering">6.4 Cascade Layers</a> <ol class="toc"> <li><a href="#layer-declaration">6.4.1 Declaring Cascade Layers</a> <li> <a href="#layer-names">6.4.2 Layer Naming and Nesting</a> <ol class="toc"> <li><a href="#unnamed-layers">6.4.2.1 Anonymous Layers</a> </ol> <li><a href="#layer-ordering">6.4.3 Layer Ordering</a> <li> <a href="#at-layer">6.4.4 Declaring Layers Inline: the @layer rule</a> <ol class="toc"> <li><a href="#layer-block">6.4.4.1 Assigning Styles Inline: the @layer block at-rule</a> <li><a href="#layer-empty">6.4.4.2 Declaring Without Styles: the @layer statement at-rule</a> </ol> </ol> <li><a href="#preshint">6.5 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> <li><a href="#revert-layer">7.3.5 Rolling Back Cascade Layers: the revert-layer keyword</a> </ol> </ol> <li> <a href="#layer-apis">8 Layer APIs</a> <ol class="toc"> <li><a href="#the-csslayerblockrule-interface">8.1 The <code>CSSLayerBlockRule</code> interface</a> <li><a href="#the-csslayerstatementrule-interface">8.2 The <code>CSSLayerStatementRule</code> interface</a> </ol> <li> <a href="#changes">9 Changes</a> <ol class="toc"> <li><a href="#changes-2022-01">9.1 Changes since the 13 Jan 2022 Candidate Recommendation Snapshot</a> <li><a href="#changes-2021-10">9.2 Changes since the 15 Oct 2021 Working Draft</a> <li><a href="#changes-2021-08">9.3 Changes since the 29 August 2021 Working Draft</a> <li><a href="#changes-2021-06">9.4 Changes since the 8 June 2021 Working Draft</a> <li><a href="#changes-2021-03">9.5 Changes since the 19 March 2021 Working Draft</a> <li><a href="#changes-2021-01">9.6 Changes since the 19 January 2021 Working Draft</a> <li><a href="#additions-l4">9.7 Additions Since Level 4</a> <li><a href="#additions-l3">9.8 Additions Since Level 3</a> <li><a href="#changes-2">9.9 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> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> <li><a href="#idl-index"> IDL Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> 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">property</a> has a name (e.g., <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a>, or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/css-color-5/#typedef-color" id="ref-for-typedef-color"><color></a>, <a class="production css" data-link-type="type" href="https://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red">red</a>, 12pt, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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 <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations">declarations</a> try to set a value for the same element/property combination, the conflicts must somehow be resolved. The opposite problem arises when no <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations①">declarations</a> try to set a value for an element/property combination. In this case, a value is be found by way of <a data-link-type="dfn" href="#css-inheritance" id="ref-for-css-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 <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations②">declarations</a> 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" title="CSS Paged Media Module Level 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" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#text-nodes" id="ref-for-text-nodes">text nodes</a> are treated as <a data-link-type="dfn" href="https://drafts.csswg.org/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 <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace" id="ref-for-at-ruledef-namespace">@namespace</a> 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 <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace" id="ref-for-at-ruledef-namespace①">@namespace</a> 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, <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations③">declarations</a> 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://drafts.csswg.org/css-syntax-3/#at-ruledef-charset" id="ref-for-at-ruledef-charset">@charset</a> and <a href="#layer-empty">@layer statement</a> rules) and must not have any other valid at-rules or style rules between it and previous @import rules, 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://drafts.csswg.org/css-values-4/#url-value" id="ref-for-url-value"><url></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value"><string></a> ] [ layer <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> layer(<a class="production" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name"><layer-name></a>) ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a class="production" data-link-type="type" href="#typedef-import-conditions" id="ref-for-typedef-import-conditions"><import-conditions></a> ; <dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-import-conditions"><import-conditions></dfn> = [ supports( [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-conditional-3/#typedef-supports-condition" id="ref-for-typedef-supports-condition"><supports-condition></a> <a data-link-type="grammar" href="https://drafts.csswg.org/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://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list"><media-query-list></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a></pre> where: <ul> <li data-md> the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#url-value" id="ref-for-url-value①"><url></a> or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#string-value" id="ref-for-string-value①"><string></a> gives the URL of the style sheet to be imported. <li data-md> the optional layer keyword or layer() function assigns the contents of the style sheet into its own anonymous <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①">cascade layer</a> or into the named cascade layer. The layer is added to the <a href="#layer-ordering">layer order</a> even if the import fails to load the stylesheet, but is subject to any <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions">import conditions</a> (just as if declared by an <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer">@layer</a> rule wrapped in the appropriate <a data-link-type="dfn" href="https://drafts.csswg.org/css-conditional-3/#conditional-group-rule" id="ref-for-conditional-group-rule">conditional group rules</a>). <li data-md> the optional <a class="production css" data-link-type="type" href="#typedef-import-conditions" id="ref-for-typedef-import-conditions①"><import-conditions></a> states the <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions①">import conditions</a> under which it applies. </ul> <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://drafts.csswg.org/css-display-4/#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> <div class="example" id="example-6e298f38"> <a class="self-link" href="#example-6e298f38"></a> The following layer imports load the style sheets into the framework.component layer, and an un-named layer, respectively: <pre>@import url("tabs.css") layer(framework.component); @import url("override.css") layer; </pre> </div> If a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/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> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="import-conditions">Import conditions</dfn> allow the import to be media– or feature-support–dependent. In the absence of any <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions②">import conditions</a>, the import is unconditional. (Specifying all for the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/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://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media">@media</a> and/or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-3/#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://drafts.csswg.org/css-conditional-3/#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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/css-conditional-3/#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://drafts.csswg.org/css-conditional-3/#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" title="Media Queries Level 4">[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" title="CSS Conditional Rules Module Level 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://drafts.csswg.org/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" title="CSS Syntax Module Level 3">[css-syntax-3]</a> <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/browsers.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> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-property-declarations" id="ref-for-css-property-declarations①">property declaration</a> 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://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background: green</a> rather than <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color">background-color: green</a> ensures that the background color overrides any earlier <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations④">declarations</a> that might have set the background to an image with <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style">font-style</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css2/#propdef-line-height" id="ref-for-propdef-line-height">line-height</a>, and <a class="css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> shorthand resets <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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" title="CSS Backgrounds and Borders Module Level 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" title="CSS Values and Units Module Level 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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration">declaration</a>, 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-519bf7b3"><a class="self-link" href="#example-519bf7b3"></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->setProperty<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" title="CSS Object Model (CSSOM)">[CSSOM]</a> <div class="example" id="example-c7a1887e"> <a class="self-link" href="#example-c7a1887e"></a> For example, the <a class="property css" data-link-type="property">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://drafts.csswg.org/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://drafts.csswg.org/css2/#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://drafts.csswg.org/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://drafts.csswg.org/cssom-1/#serializing-css-values"><cite>CSSOM</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 css" data-link-type="property" 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://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> inherit | unset | revert | revert-layer <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 css" data-link-type="property" 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 css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/css-variables-2/#custom-property" id="ref-for-custom-property">custom properties</a> <a data-link-type="biblio" href="#biblio-css-variables-1" title="CSS Custom Properties for Cascading Variables Module Level 1">[css-variables-1]</a>. Note: The excepted CSS properties <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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" title="CSS Writing Modes Level 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://drafts.csswg.org/css-display-4/#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 <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations⑤">declarations</a> 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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-property-declarations" id="ref-for-css-property-declarations②">property declaration</a> <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 class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="legacy value alias" id="css-legacy-value-alias">legacy value aliases</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">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://drafts.csswg.org/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="#css-inheritance" id="ref-for-css-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="#css-inheritance" id="ref-for-css-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://drafts.csswg.org/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" title="CSS Object Model (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://drafts.csswg.org/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://drafts.csswg.org/css-align-3/#valdef-align-self-auto" id="ref-for-valdef-align-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://drafts.csswg.org/css-values-4/#em" id="ref-for-em">em</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-3/#ex" id="ref-for-ex">ex</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh" id="ref-for-vh">vh</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw" id="ref-for-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://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/css-align-3/#valdef-align-self-auto" id="ref-for-valdef-align-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" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> <a class="self-link" href="#example-aac2d669"></a> As another example, a <code><div></code> might have a computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/css-align-3/#valdef-align-self-auto" id="ref-for-valdef-align-self-auto②">auto</a>, but acquire a used break-before value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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" title="CSS Fragmentation Module Level 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 css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/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://drafts.csswg.org/css-values-4/#length-value" id="ref-for-length-value"><length></a>. </div> <div class="example" id="example-c1c9d619"><a class="self-link" href="#example-c1c9d619"></a> Setting <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#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://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/css-display-4/#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://drafts.csswg.org/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://drafts.csswg.org/css-display-4/#display-type" id="ref-for-display-type">display types</a>, but not necessarily to all <a data-link-type="dfn" href="https://drafts.csswg.org/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://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/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" title="CSS Pseudo-Elements Module Level 4">[CSS-PSEUDO-4]</a> for more information about <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/selector.html#x22" id="ref-for-x22">pseudo-elements</a>. <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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css2/#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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/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 css" data-link-type="property" href="https://drafts.csswg.org/css2/#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 css" data-link-type="property" href="https://drafts.csswg.org/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> <h3 class="heading settled" data-level="4.8" id="fragments">4.8. Per-Fragment Value Processing<a class="self-link" href="#fragments"></a></h3> Certain CSS features can interfere with value processing on a per-fragment basis. See for example <a href="https://drafts.csswg.org/css-pseudo-4/#first-line-inheritance"><cite>CSS Pseudo-Elements 4</cite> § 2.1.3 Inheritance and the ::first-line Pseudo-element</a> which alters inheritance for fragments within the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a> pseudo-element. In such cases, where individual fragments are given different <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①①">specified values</a>, any values that resolve based on the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①②">computed value</a> of other properties (such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor" id="ref-for-valdef-color-currentcolor">currentcolor</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#em" id="ref-for-em①">em</a> units) are resolved per <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragment</a>. Subsequent value processing proceeds as normal in each fragment. APIs that assume a singular value per <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box">box</a> (rather than per <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment①">box fragment</a>) must ignore the effects of non-<a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#tree-abiding" id="ref-for-tree-abiding">tree-abiding</a> <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/selector.html#x22" id="ref-for-x22①">pseudo-elements</a>. (For example, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line①">::first-line</a> styles have no effect on the value returned by <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle①">getComputedStyle()</a></code>.) <div class="example" id="example-d0a2e292"> <a class="self-link" href="#example-d0a2e292"></a> For example, given the following markup: <pre class="highlight"><c- p><</c-><c- f>div</c-><c- p>><</c-><c- f>span</c-><c- p>></c->First line<c- p><</c-><c- f>br</c-> <c- p>/></c->Second line<c- p></</c-><c- f>span</c-><c- p>></</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>div</c-><c- p>><</c-><c- f>span</c-><c- p>></c->First line<c- p></</c-><c- f>span</c-><c- p>></</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>div</c-><c- p>></c->First line<c- p><</c-><c- f>br</c-><c- p>><</c-><c- f>span</c-><c- p>></c->Second line<c- p></</c-><c- f>span</c-><c- p>></</c-><c- f>div</c-><c- p>></c-> <c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>div</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>blue</c-><c- p>;</c-> <c- p>}</c-> <c- f>div</c-><c- p>::</c-><c- nd>first-line</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>yellow</c-><c- p>;</c-> <c- p>}</c-> <c- f>span</c-> <c- p>{</c-> <c- k>border</c-><c- p>:</c-> <c- kc>thin</c-> <c- kc>solid</c-> <c- n>currentcolor</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> </pre> In each <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element" id="ref-for-the-div-element">div</a></code>, the “First line” text is yellow and the “Second line” text is blue; the border for each fragment of the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element" id="ref-for-the-span-element">span</a></code>s that wrap each line matches that color. However, <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle②">getComputedStyle()</a></code> on all three of the spans will return <code>"blue"</code> for <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color" id="ref-for-propdef-border-color">border-color</a>, because the effects of a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line②">::first-line</a> pseudo-element are ignored for APIs that aren’t fragment-aware. </div> <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 <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations⑥">declarations</a> 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" title="CSS Conditional Rules Module Level 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" title="Selectors Level 3">[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 <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations⑦">declarations</a> 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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration①">declaration’s</a> 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 <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations⑧">declarations</a> according to the following criteria, in descending order of precedence: <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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration②">declaration</a> 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" title="CSS Transitions">[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" title="CSS Animations Level 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 <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations⑨">declarations</a> 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://dom.spec.whatwg.org/#concept-shadow-tree" id="ref-for-concept-shadow-tree">shadow trees</a> in the <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[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" title="DOM Standard">[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="style-attr"><a class="self-link" href="#style-attr"></a>Element-Attached Styles <dd> Separately for <a data-link-type="dfn" href="#normal" id="ref-for-normal⑤">normal</a> and <a data-link-type="dfn" href="#important" id="ref-for-important⑥">important</a> <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations①⓪">declarations</a>, declarations that are attached directly to an element (such as the <a href="https://www.w3.org/TR/css-style-attr/#interpret">contents of a style attribute</a>) rather than indirectly mapped by means of a style rule selector take precedence over declarations the same importance that are mapped via style rule. See <a data-link-type="biblio" href="#biblio-cssstyleattr" title="CSS Style Attributes">[CSSSTYLEATTR]</a>. Note: Non-CSS presentational hints (such as presentational markup) are handled separately, see <a href="#preshint">§ 6.5 Precedence of Non-CSS Presentational Hints</a>. <dt id="cascade-layering"><a class="self-link" href="#cascade-layering"></a>Layers <dd> <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations①①">Declarations</a> within each <a data-link-type="dfn" href="#origin" id="ref-for-origin⑥">origin</a> and <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts③">context</a> can be explicitly assigned to a <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers③">cascade layer</a>. For the purpose of this step, any declaration not assigned to an explicit layer is added to an implicit final layer. Cascade layers (like declarations) are sorted by order of appearance, see <a href="#layer-ordering">§ 6.4.3 Layer Ordering</a>. When comparing declarations that belong to different layers, then for <a data-link-type="dfn" href="#normal" id="ref-for-normal⑥">normal</a> rules the declaration whose <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers④">cascade layer</a> is latest in the layer order wins, and for <a data-link-type="dfn" href="#important" id="ref-for-important⑧">important</a> rules the declaration whose cascade layer is earliest wins. Note: This follows the same logic used for precedence of <a data-link-type="dfn" href="#normal" id="ref-for-normal⑦">normal</a> and <a data-link-type="dfn" href="#important" id="ref-for-important⑨">important</a> <a data-link-type="dfn" href="#origin" id="ref-for-origin⑦">origins</a>, thus the !important flag maintains the same “override” purpose in both settings. <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" title="Selectors Level 3">[SELECT]</a> describes how to compute the specificity of a selector. Each <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration③">declaration</a> has the same specificity as the style rule it appears in. 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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration④">declaration</a> in document order wins. For this purpose: <ul> <li>Style sheets are ordered in [[final CSS style sheets]] order. <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. <a data-link-type="biblio" href="#biblio-cssstyleattr" title="CSS Style Attributes">[CSSSTYLEATTR]</a> </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" title="HTML Standard">[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 class="dfn-paneled" data-dfn-type="dfn" data-export id="cascade-origin-animation">Animation Origin</dfn> <dd> CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1" title="CSS Animations Level 1">[css-animations-1]</a> generate “virtual” rules representing their effects when running. <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cascade-origin-transition">Transition Origin</dfn> <dd> Like CSS Animations, CSS Transitions <a data-link-type="biblio" href="#biblio-css-transitions-1" title="CSS Transitions">[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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration⑤">declaration</a> 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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration⑥">declaration</a> 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" title="CSS Syntax Module Level 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" title="CSS Animations Level 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 css" data-link-type="property" href="https://drafts.csswg.org/css-text-4/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> <td>1em <tr> <th><a class="property css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic" id="ref-for-valdef-font-style-italic">italic</a> <tr> <th><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size③">font-size</a> <td>12pt <tr> <th><a class="property css" data-link-type="property" href="https://drafts.csswg.org/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://drafts.csswg.org/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="layering">6.4. Cascade Layers<a class="self-link" href="#layering"></a></h3> In the same way that <a data-link-type="dfn" href="#origin" id="ref-for-origin①⓪">cascade origins</a> provide a balance of power between user and author styles, <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="layer" id="cascade-layers">cascade layers</dfn> provide a structured way to organize and balance concerns within a single origin. Rules within a single <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers⑥">cascade layer</a> cascade together, without interleaving with style rules outside the layer. Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way, without altering selectors or specificity within each layer, or relying on order of appearance to resolve conflicts across layers. <div class="example" id="example-44a16416"> <a class="self-link" href="#example-44a16416"></a> For example, the following generates an explicit reset layer, with lower cascade precedence than any unlayered styles: <pre class="lang-css highlight">audio <c- p>{</c-> <c- c>/* specificity of 0,0,1 - implicit (final) layer */</c-> display: flex<c- p>;</c-> <c- p>}</c-> <c- n>@layer</c-> reset <c- p>{</c-> audio<c- p>[</c->controls<c- p>]</c-> <c- p>{</c-> <c- c>/* specificity of 0,1,1 - explicit "reset" layer */</c-> display: block<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> The unlayered declarations on the <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/media.html#audio" id="ref-for-audio">audio</a></code> element take precedence over the explicitly layered declarations on <code>audio[controls]</code>—even though the unlayered styles have a lower specificity, and come first in the order of appearance. </div> Name-defining <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#at-rule" id="ref-for-at-rule">at-rules</a> such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes" id="ref-for-at-ruledef-keyframes">@keyframes</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-5/#at-font-face-rule" id="ref-for-at-font-face-rule">@font-face</a> that are defined inside <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers⑦">cascade layers</a> also use the layer order when resolving name collisions. <div class="example" id="example-14540e6d"> <a class="self-link" href="#example-14540e6d"></a> For example, authors could override the animation from a framework, by providing keyframes with the same name in a higher-precedence layer: <pre class="lang-css highlight"><c- c>/* establish the layer order, so the "override" layer takes precedence */</c-> <c- n>@layer</c-> framework<c- p>,</c-> override<c- p>;</c-> <c- n>@layer</c-> override <c- p>{</c-> <c- n>@keyframes</c-> slide-left <c- p>{</c-> from <c- p>{</c-> <c- k>translate</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> to <c- p>{</c-> <c- k>translate</c-><c- p>:</c-> <c- m>-100</c-><c- k>%</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> framework <c- p>{</c-> <c- n>@keyframes</c-> slide-left <c- p>{</c-> from <c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> to <c- p>{</c-> <c- k>margin-left</c-><c- p>:</c-> <c- m>-100</c-><c- k>%</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> .sidebar <c- p>{</c-> <c- k>animation</c-><c- p>:</c-> slide-left <c- m>300</c-><c- k>ms</c-><c- p>;</c-> <c- p>}</c-> </pre> In this case the override layer has a higher cascade precedence than the framework layer, so <code>slide-left</code> will animate using the <code>translate</code> property rather than <code>margin-left</code>. </div> <h4 class="heading settled" data-level="6.4.1" id="layer-declaration">6.4.1. Declaring Cascade Layers<a class="self-link" href="#layer-declaration"></a></h4> Cascade layers can be declared: <ul> <li data-md> using an <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①④">@import</a> rule with the layer keyword or layer() function, assigning the contents of the imported file into that layer. <li data-md> using a <a href="#layer-block">@layer block at-rule</a>, assigning its child style rules into that layer. <li data-md> using a <a href="#layer-empty">@layer statement at-rule</a>, declaring a named layer without assigning any rules. </ul> <a class="self-link" href="#issue-3d8c81e9"></a> Provide an attribute for assigning link or style elements to cascade layers? <a href="https://github.com/w3c/csswg-drafts/issues/5853">[Issue #w3c/csswg-drafts#5853]</a> <h4 class="heading settled" data-level="6.4.2" id="layer-names">6.4.2. Layer Naming and Nesting<a class="self-link" href="#layer-names"></a></h4> A <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers⑧">cascade layer</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="layer-name">layer name</dfn>, which is an ordered list representing each level of layer nesting, each segment of which can be named (as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-css-identifier" id="ref-for-css-css-identifier">CSS identifier</a>) or anonymous. (Thus, when a layer is nested inside of another layer, this concatenates their names.) One layer is nested in another when it is declared within the scope of another layer, e.g. an <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①">@layer</a> rule inside another @layer, a layered <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑤">@import</a> inside a layered import, or an @layer rule inside a layered import. <a data-link-type="dfn" href="#layer-name" id="ref-for-layer-name">Layer names</a> represent the same <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers⑨">cascade layer</a> if they contain the same segments in the same order; however anonymous segments have unique identities for each occurrence. Note that nesting can cause multiple layers to share the same anonymous segment. <div class="example" id="example-8b497e80"> <a class="self-link" href="#example-8b497e80"></a> Explicit layer identifiers provide a way to assign multiple style blocks to a single layer. In the following example, the contents of <code>headings.css</code> and <code>links.css</code> are cascaded within the same layer as the <code>audio[controls]</code> rule: <pre class="lang-css highlight"><c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>headings.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->default<c- p>);</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>links.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->default<c- p>);</c-> <c- n>@layer</c-> default <c- p>{</c-> audio<c- p>[</c->controls<c- p>]</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> <div class="example" id="example-23b0f30e"> <a class="self-link" href="#example-23b0f30e"></a> In this example, the nested framework.base layer is distinct from the top-level <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ui-4/#valdef-appearance-base" id="ref-for-valdef-appearance-base">base</a> layer: <pre class="lang-css highlight"><c- n>@layer</c-> base <c- p>{</c-> p <c- p>{</c-> <c- k>max-width</c-><c- p>:</c-> <c- m>70</c-><c- k>ch</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> framework <c- p>{</c-> <c- n>@layer</c-> base <c- p>{</c-> p <c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>0.75</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> theme <c- p>{</c-> p <c- p>{</c-> <c- k>color</c-><c- p>:</c-> #222<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> </pre> The resulting layers can be represented as a tree: <ol> <li data-md> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ui-4/#valdef-appearance-base" id="ref-for-valdef-appearance-base①">base</a> <li data-md> framework <ol> <li data-md> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ui-4/#valdef-appearance-base" id="ref-for-valdef-appearance-base②">base</a> <li data-md> theme </ol> </ol> or as a flat list with nested identifiers: <ol> <li data-md> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ui-4/#valdef-appearance-base" id="ref-for-valdef-appearance-base③">base</a> <li data-md> framework.base <li data-md> framework.theme </ol> </div> Syntactically, an explicit <a data-link-type="dfn" href="#layer-name" id="ref-for-layer-name①">layer name</a> is represented by the <a class="production css" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name①"><layer-name></a> in <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer④">@layer</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑥">@import</a> rules, which is a period-separated list of <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident"><ident></a> tokens with no intervening white space: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-layer-name"><a class="production" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name②"><layer-name></a></dfn> = <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident①"><ident></a> [ '.' <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident②"><ident></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> </pre> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords①">CSS-wide keywords</a> are reserved for future use, and cause the rule to be invalid at parse time if used as an <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident③"><ident></a> in the <a class="production css" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name③"><layer-name></a>. When multiple identifiers are concatenated with a period, this is a shorthand representing those layers nested in order. <div class="example" id="example-cd070ab3"> <a class="self-link" href="#example-cd070ab3"></a> <pre class="lang-css highlight"><c- n>@layer</c-> framework <c- p>{</c-> <c- n>@layer</c-> default <c- p>{</c-> p <c- p>{</c-> <c- k>margin-block</c-><c- p>:</c-> <c- m>0.75</c-><c- k>em</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> theme <c- p>{</c-> p <c- p>{</c-> <c- k>color</c-><c- p>:</c-> #222<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> framework.theme <c- p>{</c-> <c- c>/* These styles will be added to the theme layer inside the framework layer */</c-> blockquote <c- p>{</c-> <c- k>color</c-><c- p>:</c-> rebeccapurple<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> Note: A nested layer cannot “escape” its parent layer to reference layers outside itself. <h5 class="heading settled" data-level="6.4.2.1" id="unnamed-layers">6.4.2.1. Anonymous Layers<a class="self-link" href="#unnamed-layers"></a></h5> When a <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer⑤">@layer</a> rule omits its <a class="production css" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name④"><layer-name></a>, or an <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑦">@import</a> rule uses the layer keyword (which does not provide a <layer-name>), its <a data-link-type="dfn" href="#layer-name" id="ref-for-layer-name②">layer name</a> gains a unique anonymous segment; it therefore cannot be referenced from the outside. <div class="example" id="example-787042b6"> <a class="self-link" href="#example-787042b6"></a> Each occurrence of an anonymous layer declaration represents a unique cascade layer, thus: <ul> <li data-md> Multiple unnamed layer rules place their styles into separate layers, as each occurrence is referencing a distinct anonymous layer name. <pre class="lang-css highlight"><c- n>@layer</c-> <c- p>{</c-> <c- c>/* layer 1 */</c-> <c- p>}</c-> <c- n>@layer</c-> <c- p>{</c-> <c- c>/* layer 2 */</c-> <c- p>}</c-> </pre> <li data-md> Within a single unnamed layer, child layers with the same name refer to the same cascade layer, because they share the same anonymous parent layer. <pre class="lang-css highlight"><c- n>@layer</c-> <c- p>{</c-> <c- n>@layer</c-> foo <c- p>{</c-> <c- c>/* layer 1 */</c-> <c- p>}</c-> <c- n>@layer</c-> foo <c- p>{</c-> <c- c>/* also layer 1 */</c-> <c- p>}</c-> <c- p>}</c-> </pre> <li data-md> Whereas in separate unnamed layers, child layers with the same name refer to different cascade layers, because they have distinct anonymous parent layers. <pre class="lang-css highlight"><c- n>@layer</c-> <c- p>{</c-> <c- n>@layer</c-> foo <c- p>{</c-> <c- c>/* layer 1 */</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> <c- p>{</c-> <c- n>@layer</c-> foo <c- p>{</c-> <c- c>/* layer 2 */</c-> <c- p>}</c-> <c- p>}</c-> </pre> </ul> </div> <div class="example" id="example-52455707"> <a class="self-link" href="#example-52455707"></a> A layer declared without a <a class="production css" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name⑥"><layer-name></a> does not provide any external hook for re-arranging or adding styles. While this can be a mere convenience for brevity, it can also be used by teams as a way to force an organizing convention (all code in that layer must be defined in the same place), or by libraries wanting to merge & hide a set of internal “private” layers that they don’t want exposed to author manipulation: <pre class="lang-css highlight"><c- c>/* bootstrap-base.css */</c-> <c- c>/* unnamed wrapper layers around each sub-file */</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>base-forms.css</c-><c- p>)</c-> layer<c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>base-links.css</c-><c- p>)</c-> layer<c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>base-headings.css</c-><c- p>)</c-> layer<c- p>;</c-> </pre> <pre class="lang-css highlight"><c- c>/* bootstrap.css */</c-> <c- c>/* the internal names are hidden from access, subsumed in "base" */</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>bootstrap-base.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->base<c- p>);</c-> </pre> <pre class="lang-css highlight"><c- c>/* author.css */</c-> <c- c>/* author has access to bootstrap.base layer, but not into unnamed layers */</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>bootstrap.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->bootstrap<c- p>);</c-> <c- c>/* Adds additional styles to the bootstrap layer: */</c-> <c- n>@layer</c-> bootstrap <c- p>{</c->...<c- p>}</c-> </pre> </div> <h4 class="heading settled" data-level="6.4.3" id="layer-ordering">6.4.3. Layer Ordering<a class="self-link" href="#layer-ordering"></a></h4> Cascade layers are sorted by the order in which they first are declared, with nested layers grouped within their parent layer. Unlayered rules are sorted later than any layered rules within the same parent layer (if any). <div class="example" id="example-deeaea42"> <a class="self-link" href="#example-deeaea42"></a> Given the following layer rules: <pre class="lang-css highlight"><c- c>/* unlayered styles come last in the layer order */</c-> h1 <c- p>{</c-> <c- k>color</c-><c- p>:</c-> darkslateblue<c- p>;</c-> <c- p>}</c-> <c- n>@layer</c-> reset.type <c- p>{</c-> strong <c- p>{</c-> <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> framework <c- p>{</c-> .title <c- p>{</c-> <c- k>font-weight</c-><c- p>:</c-> <c- m>100</c-><c- p>;</c-> <c- p>}</c-> <c- n>@layer</c-> theme <c- p>{</c-> h1<c- p>,</c-> h2 <c- p>{</c-> <c- k>color</c-><c- p>:</c-> maroon<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> reset <c- p>{</c-> <c- p>[</c->hidden<c- p>]</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> none<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> The outer layers are sorted first, with any unlayered style rules added to an implicit outer layer which has higher precedence than (comes after) the explicit layers: <ol> <li data-md> reset <li data-md> framework <li data-md> (implicit outer layer) </ol> Within each layer, nested layers are sorted in appearance order, and style rules without further nesting are similarly added to an implicit sub-layer after the explicitly nested layers: <ol> <li data-md> reset.type <li data-md> reset (implicit sub-layer) <li data-md> framework.theme <li data-md> framework (implicit sub-layer) <li data-md> (implicit outer layer) </ol> </div> Layers that are defined inside of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-conditional-3/#conditional-group-rule" id="ref-for-conditional-group-rule①">conditional group rule</a> do not contribute to the layer order unless the condition is true or unless the conditional group rule can evaluate differently for different elements in the document. Note: Since the layer order is global to the document, any layers defined inside an element-sensitive <a data-link-type="dfn" href="https://drafts.csswg.org/css-conditional-3/#conditional-group-rule" id="ref-for-conditional-group-rule③">conditional group rule</a> need to be accommodated when establishing the global layer order, regardless of the rule’s condition. Conditions that are global to the document, however (such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media①">@media</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports" id="ref-for-at-ruledef-supports①">@supports</a>) can accommodate such <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer⑥">@layer</a> rules conditionally. <div class="example" id="example-87e2d331"> <a class="self-link" href="#example-87e2d331"></a> For example, the following layer order will depend on which media conditions match: <pre class="lang-css highlight"><c- n>@media</c-> <c- p>(</c->min-width: <c- m>30</c-><c- k>em</c-><c- p>)</c-> <c- p>{</c-> <c- n>@layer</c-> layout <c- p>{</c-> .title <c- p>{</c-> <c- k>font-size</c-><c- p>:</c-> x-large<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@media</c-> <c- p>(</c->prefers-color-scheme: dark<c- p>)</c-> <c- p>{</c-> <c- n>@layer</c-> theme <c- p>{</c-> .title <c- p>{</c-> <c- k>color</c-><c- p>:</c-> white<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> theme<c- p>,</c-> layout<c- p>;</c-> </pre> If the first media-query matches based on viewport dimensions, then the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-contain-2/#valdef-contain-layout" id="ref-for-valdef-contain-layout">layout</a> layer will come first in the layer order. If the color-scheme preference query matches, or if neither condition is true, then theme will come first in the layer order. Authors who want to avoid this behavior can establish an explicit ordering of layers in advance, and avoid defining new layers inside conditional rules. </div> Note: <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①⓪">Cascade layers</a> are scoped to their <a data-link-type="dfn" href="#origin" id="ref-for-origin①①">origin</a> and <a data-link-type="dfn" href="#encapsulation-contexts" id="ref-for-encapsulation-contexts④">context</a>, so the ordering of layers in the light DOM has no impact on the order of identically-named layers in the shadow DOM (and vice versa). <a class="self-link" href="#issue-e29f5f96"></a> Allow authors to explicitly place unlayered styles in the layer order <a href="https://github.com/w3c/csswg-drafts/issues/6323">[Issue #6323]</a> <h4 class="heading settled" data-level="6.4.4" id="at-layer">6.4.4. Declaring Layers Inline: the <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer⑦">@layer</a> rule<a class="self-link" href="#at-layer"></a></h4> The <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-layer">@layer</dfn> rule declares a <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①①">cascade layer</a>, with the option to assign style rules. <h5 class="heading settled" data-level="6.4.4.1" id="layer-block">6.4.4.1. Assigning Styles Inline: the <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer⑧">@layer</a> block at-rule<a class="self-link" href="#layer-block"></a></h5> The <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer⑨">@layer</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#block-at-rule" id="ref-for-block-at-rule">block at-rule</a> assigns its child style rules to a particular named <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①②">cascade layer</a>. This block layer-assignment syntax is: <pre class="prod">@layer <a class="production" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name⑦"><layer-name></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt③">?</a> { <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-syntax-3/#typedef-rule-list" id="ref-for-typedef-rule-list"><rule-list></a> } </pre> Such <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①⓪">@layer</a> block rules have the same restrictions and processing as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-conditional-3/#conditional-group-rule" id="ref-for-conditional-group-rule④">conditional group rule</a> <a data-link-type="biblio" href="#biblio-css-conditional-3" title="CSS Conditional Rules Module Level 3">[CSS-CONDITIONAL-3]</a> with a true condition. <div class="example" id="example-149ef997"> <a class="self-link" href="#example-149ef997"></a> For example, <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①①">@layer</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media②">@media</a> can be mixed: <pre class="lang-css highlight"><c- n>@layer</c-> framework <c- p>{</c-> h1<c- p>,</c-> h2 <c- p>{</c-> <c- k>color</c-><c- p>:</c-> maroon<c- p>;</c-> <c- k>background</c-><c- p>:</c-> white<c- p>;}</c-> <c- n>@media</c-> <c- p>(</c->prefers-color-scheme: dark<c- p>)</c-> <c- p>{</c-> h1<c- p>,</c-> h2 <c- p>{</c-> <c- k>color</c-><c- p>:</c-> red<c- p>;</c-> <c- k>background</c-><c- p>:</c-> black<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> Note: <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①②">@layer</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#block-at-rule" id="ref-for-block-at-rule①">block at-rules</a> cannot be interleaved with <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑧">@import</a> rules. <h5 class="heading settled" data-level="6.4.4.2" id="layer-empty">6.4.4.2. Declaring Without Styles: the <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①③">@layer</a> statement at-rule<a class="self-link" href="#layer-empty"></a></h5> The <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①④">@layer</a> rule can also be used to define new layers without assigning any style rules, by providing only the <a data-link-type="dfn" href="#layer-name" id="ref-for-layer-name③">layer name</a>: <pre class="prod">@layer <a class="production" data-link-type="type" href="#typedef-layer-name" id="ref-for-typedef-layer-name⑧"><layer-name></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a>; </pre> Such empty <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①⑤">@layer</a> rules are allowed before <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①⑨">@import</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace" id="ref-for-at-ruledef-namespace②">@namespace</a> rules (after the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset" id="ref-for-at-ruledef-charset①">@charset</a> rule, if any) as well as everywhere @layer <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#block-at-rule" id="ref-for-block-at-rule②">block at-rules</a> are allowed. Note: No <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①⑦">@layer</a> rules are allowed between <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②⓪">@import</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace" id="ref-for-at-ruledef-namespace③">@namespace</a> rules. Any @layer rule that comes after an @import or @namespace rule will cause any subsequent @import or @namespace rules to be ignored. Unlike the <a href="#layer-block">block syntax</a>, multiple comma-separated layer names can be provided in this syntax, declaring each of the layers in the order specified. Note: Since layer ordering is defined by first occurrence of the layer name (see <a href="#layer-ordering">§ 6.4.3 Layer Ordering</a>), this rule allows a page to declare the order of its layers up front, so that their order is apparent without having to read the entire style sheet. It also allows inline layers to be interleaved with imported layers, which is not possible with the <a href="#layer-block">block syntax</a>. <div class="example" id="example-aa4a55a5"> <a class="self-link" href="#example-aa4a55a5"></a> The statement syntax allows establishing a layer order in advance, regardless of the order in which style rules are added to each layer. It can be helpful to establish that layer order in advance, before any <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②③">@import</a> rules. In this example, the imported <code>theme.css</code> style rules will override any rules added in the later default block since the order of layers has already been established: <pre class="lang-css highlight"><c- n>@layer</c-> default<c- p>,</c-> theme<c- p>,</c-> components<c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>theme.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->theme<c- p>);</c-> <c- n>@layer</c-> default <c- p>{</c-> audio<c- p>[</c->controls<c- p>]</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> It’s also possible to have <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②④">@import</a> rules help establish the order, by placing them between <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer①⑨">@layer</a> rules. This example will have the same result: <pre class="lang-css highlight"><c- n>@layer</c-> default<c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>theme.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->theme<c- p>);</c-> <c- n>@layer</c-> components<c- p>;</c-> <c- n>@layer</c-> default <c- p>{</c-> audio<c- p>[</c->controls<c- p>]</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> However, <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②⑤">@import</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace" id="ref-for-at-ruledef-namespace⑥">@namespace</a> rules must be consecutive, without any intervening rules. The following is invalid: <pre class="lang-css highlight"><c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>default.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->default<c- p>);</c-> <c- n>@layer</c-> theme<c- p>;</c-> <c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>components.css</c-><c- p>)</c-> <c- nf>layer</c-><c- p>(</c->components<c- p>);</c-> <c- n>@layer</c-> theme <c- p>{</c-> audio<c- p>[</c->controls<c- p>]</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> block<c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> </div> <h3 class="heading settled" data-level="6.5" id="preshint">6.5. 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" title="HTML Standard">[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>; however 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 (but not for the <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer①">revert-layer</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" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[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="#css-inheritance" id="ref-for-css-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-for="CSS" data-dfn-type="dfn" data-export data-lt="inheritance|inherit" id="css-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" title="DOM Standard">[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/CSS21/selector.html#x22" id="ref-for-x22②">Pseudo-elements</a> inherit according to the fictional tag sequence described for each <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element①">pseudo-element</a>. <a data-link-type="biblio" href="#biblio-css-pseudo-4" title="CSS Pseudo-Elements Module Level 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="#css-inheritance" id="ref-for-css-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" title="CSS Values and Units Module Level 3">[css-values-3]</a>, all CSS properties can accept these values. The keywords <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert①">revert</a> and <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer②">revert-layer</a> are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="cascade-dependent keyword" id="cascade-dependent-keyword">cascade-dependent keywords</dfn>; some contexts may restrict their use while allowing the other <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords②">CSS-wide keywords</a>. <h4 class="heading settled caniuse-paneled" 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> The <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-initial">initial</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords③">CSS-wide keyword</a> represents the value defined as the property’s <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value⑤">initial value</a>. If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value⑨">cascaded value</a> of a property is the <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial②">initial</a> 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> The <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-inherit">inherit</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords④">CSS-wide keyword</a> represents the property’s <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①④">computed value</a> on the parent element. If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⓪">cascaded value</a> of a property is the <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit③">inherit</a> 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 caniuse-paneled" 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> The <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-unset">unset</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords⑤">CSS-wide keyword</a> acts as either <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit④">inherit</a> or <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial③">initial</a>, depending on whether the property is <a data-link-type="dfn" href="#inherited-property" id="ref-for-inherited-property②">inherited</a> or not. If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①①">cascaded value</a> of a property is the <a class="css" data-link-type="maybe" href="#valdef-all-unset" id="ref-for-valdef-all-unset①">unset</a> 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 caniuse-paneled" data-level="7.3.4" for="all" 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> The <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-revert">revert</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords⑥">CSS-wide keyword</a> rolls back the cascade to the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①②">cascaded value</a> of the earlier <a data-link-type="dfn" href="#origin" id="ref-for-origin①③">origin</a>. If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①③">cascaded value</a> of a property is the <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert③">revert</a> keyword, the behavior depends on the <a data-link-type="dfn" href="#origin" id="ref-for-origin①④">cascade origin</a> to which the <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#declaration" id="ref-for-declaration⑦">declaration</a> 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> Note: Effectively the <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert⑤">revert</a> keyword is substituted with the value from the earlier <a data-link-type="dfn" href="#origin" id="ref-for-origin①⑥">cascade origin</a>. Thus, reverting a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①③">shorthand property</a> reverts all its longhands; reverting any <a href="#aliasing">property alias</a> of a property reverts all of them; reverting one of the paired properties in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#logical-property-group" id="ref-for-logical-property-group">logical property group</a> also reverts the other one; etc. <h4 class="heading settled" data-level="7.3.5" id="revert-layer">7.3.5. Rolling Back Cascade Layers: the <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer③">revert-layer</a> keyword<a class="self-link" href="#revert-layer"></a></h4> The <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-revert-layer">revert-layer</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords⑦">CSS-wide keyword</a> rolls back the cascade similar to <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert⑥">revert</a>, except it works by <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①③">cascade layer</a> rather than by <a data-link-type="dfn" href="#origin" id="ref-for-origin①⑦">cascade origin</a>. If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⑥">cascaded value</a> of a property is the <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer④">revert-layer</a> keyword, the cascaded value is rolled back to the earlier <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①④">layer</a>, so that the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⑧">specified value</a> is calculated as if no rules were specified in the current cascade layer—or between its <a data-link-type="dfn" href="#normal" id="ref-for-normal⑨">normal</a> and <a data-link-type="dfn" href="#important" id="ref-for-important①⑨">important</a> levels in the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①⓪">cascade</a>—for this property on this element. For revert-layer in important <a href="#style-attr">element-attached styles</a>, however, it only reverts the <a href="#style-attr">element-attached styles</a> and the intervening <a data-link-type="dfn" href="#cascade-origin-animation" id="ref-for-cascade-origin-animation">animation origin</a>, and not any of the intervening <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author①③">author-origin</a> important rules. <div class="example" id="example-8f3e3ea0"> <a class="self-link" href="#example-8f3e3ea0"></a> For example, applying <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer⑥">revert-layer</a> to the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height①">height</a> in layer <code>two</code>, reverts the height property to the value defined in layer <code>one</code>, yielding a height of <code>100px</code>. <pre class="lang-css highlight"><c- n>@layer</c-> one <c- p>{</c-> div <c- p>{</c-> <c- k>height</c-><c- p>:</c-> <c- m>100</c-><c- k>px</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@layer</c-> two <c- p>{</c-> div <c- p>{</c-> <c- k>height</c-><c- p>:</c-> <c- m>200</c-><c- k>px</c-> <c- p>}</c-> div <c- p>{</c-> <c- k>height</c-><c- p>:</c-> revert-layer <c- p>}</c-> <c- p>}</c-> </pre> Note that since <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height④">height</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-logical-1/#propdef-block-size" id="ref-for-propdef-block-size">block-size</a> are paired properties in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-logical-1/#logical-property-group" id="ref-for-logical-property-group①">logical property group</a>, the following layer <code>two</code> declaration would also revert to the height defined in layer <code>one</code>. <pre class="lang-css highlight"><c- n>@layer</c-> two <c- p>{</c-> div <c- p>{</c-> <c- k>height</c-><c- p>:</c-> <c- m>200</c-><c- k>px</c-> <c- p>}</c-> div <c- p>{</c-> <c- k>block-size</c-><c- p>:</c-> revert-layer <c- p>}</c-> <c- p>}</c-> </pre> </div> Note: If there are no lower-precedence <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations" id="ref-for-cssstyledeclaration-declarations①②">declarations</a> in the same <a data-link-type="dfn" href="#origin" id="ref-for-origin①⑧">cascade origin</a> as the <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer⑦">revert-layer</a> value, the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⑧">cascaded value</a> will roll back to the previous origin. Note: The <a data-link-type="dfn" href="#cascade-origin-animation" id="ref-for-cascade-origin-animation①">animation origin</a> is not collapsed with the <a data-link-type="dfn" href="#cascade-origin-author" id="ref-for-cascade-origin-author①④">author origin</a> for this purpose as it is for <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert⑦">revert</a>, and thus effectively forms its own <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①⑥">cascade layer</a>. <h2 class="heading settled" data-level="8" id="layer-apis">8. Layer APIs<a class="self-link" href="#layer-apis"></a></h2> <h3 class="heading settled" data-level="8.1" id="the-csslayerblockrule-interface">8.1. The <code>CSSLayerBlockRule</code> interface<a class="self-link" href="#the-csslayerblockrule-interface"></a></h3> The <code class="idl"><a data-link-type="idl" href="#csslayerblockrule" id="ref-for-csslayerblockrule">CSSLayerBlockRule</a></code> interface represents the <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②⓪">@layer</a> <a href="#layer-block">block rule</a>: <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="csslayerblockrule"><code><c- g>CSSLayerBlockRule</c-></code></dfn> : <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssgroupingrule" id="ref-for-cssgroupingrule"><c- n>CSSGroupingRule</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csslayerblockrule-name" id="ref-for-dom-csslayerblockrule-name"><c- g>name</c-></a>; }; </pre> Its <dfn class="dfn-paneled idl-code" data-dfn-for="CSSLayerBlockRule" data-dfn-type="attribute" data-export id="dom-csslayerblockrule-name"><code>name</code></dfn> attribute represents the <a data-link-type="dfn" href="#layer-name" id="ref-for-layer-name④">layer name</a> declared by the at-rule itself, and is an empty string if the layer is anonymous. <div class="example" id="example-1c46cc0f"> <a class="self-link" href="#example-1c46cc0f"></a> For example, additional nested context is not added from wrapping layer rules. <pre class="lang-css highlight"><c- n>@layer</c-> outer <c- p>{</c-> <c- n>@layer</c-> foo.bar <c- p>{</c-> <c- p>}</c-> <c- p>}</c-> </pre> in this case the <code class="idl"><a data-link-type="idl" href="#dom-csslayerblockrule-name" id="ref-for-dom-csslayerblockrule-name①">name</a></code> of the inner <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②①">@layer</a> rule is “foo.bar” (and not “outer.foo.bar”). </div> <h3 class="heading settled" data-level="8.2" id="the-csslayerstatementrule-interface">8.2. The <code>CSSLayerStatementRule</code> interface<a class="self-link" href="#the-csslayerstatementrule-interface"></a></h3> The <code class="idl"><a data-link-type="idl" href="#csslayerstatementrule" id="ref-for-csslayerstatementrule">CSSLayerStatementRule</a></code> interface represents the <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②②">@layer</a> <a href="#layer-empty">statement</a>: <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="csslayerstatementrule"><code><c- g>CSSLayerStatementRule</c-></code></dfn> : <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssrule" id="ref-for-cssrule"><c- n>CSSRule</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array" id="ref-for-idl-frozen-array"><c- b>FrozenArray</c-></a><<a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①"><c- n>CSSOMString</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<CSSOMString>" href="#dom-csslayerstatementrule-namelist" id="ref-for-dom-csslayerstatementrule-namelist"><c- g>nameList</c-></a>; }; </pre> Its <dfn class="dfn-paneled idl-code" data-dfn-for="CSSLayerStatementRule" data-dfn-type="attribute" data-export id="dom-csslayerstatementrule-namelist"><code>nameList</code></dfn> attribute represents the list of <a data-link-type="dfn" href="#layer-name" id="ref-for-layer-name⑤">layer names</a> declared by the at-rule, normalized following the same rule as the <code class="idl"><a data-link-type="idl" href="#csslayerblockrule" id="ref-for-csslayerblockrule①">CSSLayerBlockRule</a></code>’s <code class="idl"><a data-link-type="idl" href="#dom-csslayerblockrule-name" id="ref-for-dom-csslayerblockrule-name②">name</a></code> attribute. <h2 class="heading settled" data-level="9" id="changes">9. Changes<a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" data-level="9.1" id="changes-2022-01">9.1. Changes since the 13 Jan 2022 Candidate Recommendation Snapshot<a class="self-link" href="#changes-2022-01"></a></h3> Non-trivial changes since the <a href="CSS Cascading and Inheritance Level 5">13 January 2022 Candidate Recommendation Snapshot</a>: <ul> <li data-md> Clarify that all “aliases” of a property are reverted by <a class="css" data-link-type="maybe" href="#valdef-all-revert" id="ref-for-valdef-all-revert⑧">revert</a>/<a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer⑧">revert-layer</a>. <li data-md> Clarify that style sheets are ordered in [[final CSS style sheets]] order. <li data-md> Clarify that only <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②③">@layer</a> statement rules are ignored when checking validity of <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②⑥">@import</a>, not empty @layer block rules. </ul> <h3 class="heading settled" data-level="9.2" id="changes-2021-10">9.2. 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-5-20211015/">15 October 2021 Working Draft</a>: <ul> <li data-md> Updated grammar style for @import media queries and supports conditions <li data-md> Allowed functional notation parse-time aliases (<a href="https://github.com/w3c/csswg-drafts/issues/6193">Issue 6193</a>) <li data-md> Made CSSImportRule.layerName nullable (<a href="https://github.com/w3c/csswg-drafts/issues/6576">Issue 6576</a>) <li data-md> Clarified that revert-layer in style attr does not revert author layers (<a href="https://github.com/w3c/csswg-drafts/issues/6743">Issue 6743</a>) <li data-md> Clarified revert-layer on style attr and keyframes (<a href="https://github.com/w3c/csswg-drafts/issues/6743">Issue 6743</a>) <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>) <li data-md> Added <a href="#layer-apis">§ 8 Layer APIs</a> section. (<a href="https://github.com/w3c/csswg-drafts/issues/6576">Issue 6576</a>) <li data-md> Clarified the behavior of <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer⑨">revert-layer</a> keyword when used in the style attribute or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes" id="ref-for-at-ruledef-keyframes①">@keyframes</a> at-rule. (<a href="https://github.com/w3c/csswg-drafts/issues/6743">Issue 6743</a>) <li data-md> Clarified the behavior of the layer keyword and layer() function on <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②⑦">@import</a> rules. (<a href="https://github.com/w3c/csswg-drafts/issues/6776">Issue 6776</a>) </ul> <h3 class="heading settled" data-level="9.3" id="changes-2021-08">9.3. Changes since the 29 August 2021 Working Draft<a class="self-link" href="#changes-2021-08"></a></h3> Changes since the <a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210829/">29 August 2021 Working Draft</a> include: <ul> <li data-md> Revert the ordering of unlayered styles. (See <a href="#changes-2021-06">§ 9.4 Changes since the 8 June 2021 Working Draft</a> and <a href="https://github.com/w3c/csswg-drafts/issues/6284">Issue 6284</a>) <li data-md> Defined presentational hints to use the <a data-link-type="dfn" href="#author-presentational-hint-origin" id="ref-for-author-presentational-hint-origin②">author presentational hint origin</a> instead of layers, matching update to <a data-link-type="biblio" href="#biblio-css-cascade-4" title="CSS Cascading and Inheritance Level 4">[CSS-CASCADE-4]</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/6659">Issue 6659</a>) </ul> <h3 class="heading settled" data-level="9.4" id="changes-2021-06">9.4. Changes since the 8 June 2021 Working Draft<a class="self-link" href="#changes-2021-06"></a></h3> Significant changes since the <a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210608/">8 June 2021 Working Draft</a> include: <ul> <li data-md> Reserve the CSS-wide keywords for future use in layer-names. (<a href="https://github.com/w3c/csswg-drafts/issues/6323">Issue 6323</a>) <li data-md> Clarify that <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②⑤">@layer</a> rules respect global conditional rules, but are always applied to the layer order when declared in non-global conditions such as a container query. (<a href="https://github.com/w3c/csswg-drafts/issues/6407">Issue 6407</a>) <li data-md> Name-defining at-rules follow layer order for collision resolution, similar to specificity resolution. (<a href="https://github.com/w3c/csswg-drafts/issues/6404">Issue 6404</a>) <li data-md> Disallow interleaving of <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②⑥">@layer</a> with <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②⑧">@import</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace" id="ref-for-at-ruledef-namespace⑦">@namespace</a> rules. (<a href="https://github.com/w3c/csswg-drafts/issues/6522">Issue 6522</a>) </ul> <h3 class="heading settled" data-level="9.5" id="changes-2021-03">9.5. Changes since the 19 March 2021 Working Draft<a class="self-link" href="#changes-2021-03"></a></h3> Significant changes since the <a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210319/">19 March 2021 Working Draft</a> include: <ul> <li data-md> Switched the ordering of unlayered styles from highest to lowest precedence in the normal origins. (<a href="https://github.com/w3c/csswg-drafts/issues/6284">Issue 6284</a>) </ul> <h3 class="heading settled" data-level="9.6" id="changes-2021-01">9.6. Changes since the 19 January 2021 Working Draft<a class="self-link" href="#changes-2021-01"></a></h3> Significant changes since the <a href="https://www.w3.org/TR/2021/WD-css-cascade-5-20210119/">19 January 2021 First Public Working Draft</a> include: <ul> <li data-md> Switched <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①⑦">layer</a> import syntax from using <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②⑦">@layer</a> to using <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import②⑨">@import</a>. (<a href="https://github.com/w3c/csswg-drafts/issues/5681">Issue 5681</a>) <li data-md> Added <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer①⓪">revert-layer</a> keyword. (<a href="https://github.com/w3c/csswg-drafts/issues/5793">Issue 5793</a>) </ul> <h3 class="heading settled" data-level="9.7" id="additions-l4">9.7. Additions Since Level 4<a class="self-link" href="#additions-l4"></a></h3> The following features have been added since <a href="https://www.w3.org/TR/css-cascade-4/">Level 4</a>: <ul> <li data-md> Added <a data-link-type="dfn" href="#cascade-layers" id="ref-for-cascade-layers①⑧">cascade layers</a> to the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①①">cascade</a> sort criteria (and defined style attributes as a distinct step of the cascade sort criteria so that they interact appropriately). <li data-md> Introduced the <a class="css" data-link-type="maybe" href="#at-ruledef-layer" id="ref-for-at-ruledef-layer②⑧">@layer</a> rule for defining cascade layers. <li data-md> Added layer/layer() option to <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import③⓪">@import</a> definition. <li data-md> Introduced the <a class="css" data-link-type="maybe" href="#valdef-all-revert-layer" id="ref-for-valdef-all-revert-layer①①">revert-layer</a> keyword for rolling back values to previous layers. </ul> <h3 class="heading settled" data-level="9.8" id="additions-l3">9.8. 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://drafts.csswg.org/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" title="DOM Standard">[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="9.9" id="changes-2">9.9. Additions Since Level 2<a class="self-link" href="#changes-2"></a></h3> The following features have been added since <a href="http://www.w3.org/TR/CSS2/cascade.html">Level 2</a>: <ul> <li>The <a class="property css" data-link-type="property" 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, Florian Rivoal, Noam Rosenthal, Simon Sapin, Jen Simmons, 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="5ca12a2a0"><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" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="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. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#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.5 <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="#cascade-dependent-keyword">cascade-dependent keyword</a>, in § 7.3 <li><a href="#cascaded-value">cascaded value</a>, in § 4.2 <li><a href="#cascade-layers">cascade layers</a>, in § 6.4 <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="#csslayerblockrule">CSSLayerBlockRule</a>, in § 8.1 <li><a href="#csslayerstatementrule">CSSLayerStatementRule</a>, in § 8.2 <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="#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="#typedef-import-conditions"><import-conditions></a>, in § 2 <li><a href="#import-conditions">Import conditions</a>, in § 2.1 <li> inherit <ul> <li><a href="#css-inheritance">dfn for CSS</a>, in § 7.2 <li><a href="#valdef-all-inherit">value for all</a>, in § 7.3.2 </ul> <li><a href="#css-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="#at-ruledef-layer">@layer</a>, in § 6.4.4 <li><a href="#cascade-layers">layer</a>, in § 6.4 <li><a href="#typedef-layer-name"><layer-name></a>, in § 6.4.2 <li><a href="#layer-name">layer name</a>, in § 6.4.2 <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="#dom-csslayerblockrule-name">name</a>, in § 8.1 <li><a href="#dom-csslayerstatementrule-namelist">nameList</a>, in § 8.2 <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="#valdef-all-revert-layer">revert-layer</a>, in § 7.3.5 <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> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ALIGN-3]</a> defines the following terms: <ul> <li>auto </ul> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-1]</a> defines the following terms: <ul> <li>@keyframes </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-color <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>box fragment <li>page </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>color <li>currentcolor <li>red </ul> <li> <a data-link-type="biblio">[CSS-COLOR-5]</a> defines the following terms: <ul> <li><color> </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 <li>conditional group rule </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-CONTAIN-2]</a> defines the following terms: <ul> <li>layout </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>element </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>box <li>display <li>display type <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-size <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-face <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-LOGICAL-1]</a> defines the following terms: <ul> <li>block-size <li>logical property group </ul> <li> <a data-link-type="biblio">[CSS-NAMESPACES-3]</a> defines the following terms: <ul> <li>@namespace </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>::after <li>::before <li>::first-line <li>tree-abiding </ul> <li> <a data-link-type="biblio">[CSS-SCOPING-1]</a> defines the following terms: <ul> <li>flat tree <li>flattened element 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><rule-list> <li>@charset <li>at-rule <li>block at-rule <li>declaration <li>environment encoding <li>property declarations </ul> <li> <a data-link-type="biblio">[CSS-TEXT-3]</a> defines the following terms: <ul> <li>text-align </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>text-indent <li>text-transform </ul> <li> <a data-link-type="biblio">[CSS-UI-4]</a> defines the following terms: <ul> <li>base </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># <li>* <li><ident> <li><length-percentage> <li><length> <li><string> <li><url> <li>? <li>ch <li>CSS identifier <li>CSS-wide keywords <li>em <li>url() <li>vh <li>vw <li>| </ul> <li> <a data-link-type="biblio">[CSS-VARIABLES-2]</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>pseudo-elements </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <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>CSSGroupingRule <li>CSSOMString <li>CSSRule <li>declarations <li>getComputedStyle(elt) </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>connected <li>light tree <li>quirks mode <li>shadow tree <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>audio <li>Content-Type metadata <li>div <li>p <li>s <li>same origin <li>slot <li>span </ul> <li> <a data-link-type="biblio">[MEDIAQ]</a> defines the following terms: <ul> <li><media-query-list> <li><media-query> <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">[WEBIDL]</a> defines the following terms: <ul> <li>Exposed <li>FrozenArray </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-animations-1">[CSS-ANIMATIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-animations/"><cite>CSS Animations Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-animations/">https://drafts.csswg.org/css-animations/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Chris Lilley; Tab Atkins Jr.; Lea Verou. <a href="https://drafts.csswg.org/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a> <dt id="biblio-css-color-5">[CSS-COLOR-5] <dd>Chris Lilley; et al. <a href="https://drafts.csswg.org/css-color-5/"><cite>CSS Color Module Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-5/">https://drafts.csswg.org/css-color-5/</a> <dt id="biblio-css-conditional-3">[CSS-CONDITIONAL-3] <dd>Chris Lilley; David Baron; Elika Etemad. <a href="https://drafts.csswg.org/css-conditional-3/"><cite>CSS Conditional Rules Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-conditional-3/">https://drafts.csswg.org/css-conditional-3/</a> <dt id="biblio-css-conditional-5">[CSS-CONDITIONAL-5] <dd>Chris Lilley; et al. <a href="https://drafts.csswg.org/css-conditional-5/"><cite>CSS Conditional Rules Module Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-conditional-5/">https://drafts.csswg.org/css-conditional-5/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd><a href="https://drafts.csswg.org/css-display-4/"><cite>CSS Display Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-display-4/">https://drafts.csswg.org/css-display-4/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-4/">https://drafts.csswg.org/css-fonts-4/</a> <dt id="biblio-css-fonts-5">[CSS-FONTS-5] <dd>Chris Lilley. <a href="https://drafts.csswg.org/css-fonts-5/"><cite>CSS Fonts Module Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-fonts-5/">https://drafts.csswg.org/css-fonts-5/</a> <dt id="biblio-css-namespaces-3">[CSS-NAMESPACES-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-namespaces/"><cite>CSS Namespaces Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-namespaces/">https://drafts.csswg.org/css-namespaces/</a> <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-scoping-1">[CSS-SCOPING-1] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-scoping/"><cite>CSS Scoping Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-scoping/">https://drafts.csswg.org/css-scoping/</a> <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://drafts.csswg.org/css-syntax/"><cite>CSS Syntax Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-syntax/">https://drafts.csswg.org/css-syntax/</a> <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-transitions/"><cite>CSS Transitions</cite></a>. URL: <a href="https://drafts.csswg.org/css-transitions/">https://drafts.csswg.org/css-transitions/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-variables-2">[CSS-VARIABLES-2] <dd><a href="https://drafts.csswg.org/css-variables-2/"><cite>CSS Custom Properties for Cascading Variables Module Level 2</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-variables-2/">https://drafts.csswg.org/css-variables-2/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-cssom">[CSSOM] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/cssom/"><cite>CSS Object Model (CSSOM)</cite></a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</a> <dt id="biblio-cssstyleattr">[CSSSTYLEATTR] <dd>Tantek Çelik; Elika Etemad. <a href="https://drafts.csswg.org/css-style-attr/"><cite>CSS Style Attributes</cite></a>. URL: <a href="https://drafts.csswg.org/css-style-attr/">https://drafts.csswg.org/css-style-attr/</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://drafts.csswg.org/mediaqueries-4/"><cite>Media Queries Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/mediaqueries-4/">https://drafts.csswg.org/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://drafts.csswg.org/selectors-3/"><cite>Selectors Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/selectors-3/">https://drafts.csswg.org/selectors-3/</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/selectors/"><cite>Selectors Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/selectors/">https://drafts.csswg.org/selectors/</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-align/"><cite>CSS Box Alignment Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-align/">https://drafts.csswg.org/css-align/</a> <dt id="biblio-css-break-3">[CSS-BREAK-3] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break/"><cite>CSS Fragmentation Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-break/">https://drafts.csswg.org/css-break/</a> <dt id="biblio-css-cascade-4">[CSS-CASCADE-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-4/"><cite>CSS Cascading and Inheritance Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-4/">https://drafts.csswg.org/css-cascade-4/</a> <dt id="biblio-css-contain-2">[CSS-CONTAIN-2] <dd>Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. <a href="https://drafts.csswg.org/css-contain-2/"><cite>CSS Containment Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-contain-2/">https://drafts.csswg.org/css-contain-2/</a> <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1] <dd>Tab Atkins Jr.; et al. <a href="https://drafts.csswg.org/css-flexbox-1/"><cite>CSS Flexible Box Layout Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-flexbox-1/">https://drafts.csswg.org/css-flexbox-1/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-inline-3/">https://drafts.csswg.org/css-inline-3/</a> <dt id="biblio-css-lists-3">[CSS-LISTS-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-lists-3/"><cite>CSS Lists and Counters Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-lists-3/">https://drafts.csswg.org/css-lists-3/</a> <dt id="biblio-css-logical-1">[CSS-LOGICAL-1] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-logical-1/"><cite>CSS Logical Properties and Values Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-logical-1/">https://drafts.csswg.org/css-logical-1/</a> <dt id="biblio-css-page-3">[CSS-PAGE-3] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-page-3/"><cite>CSS Paged Media Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-page-3/">https://drafts.csswg.org/css-page-3/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</a> <dt id="biblio-css-ui-4">[CSS-UI-4] <dd>Florian Rivoal. <a href="https://drafts.csswg.org/css-ui-4/"><cite>CSS Basic User Interface Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-ui-4/">https://drafts.csswg.org/css-ui-4/</a> <dt id="biblio-css-variables-1">[CSS-VARIABLES-1] <dd>Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-variables/"><cite>CSS Custom Properties for Cascading Variables Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-variables/">https://drafts.csswg.org/css-variables/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</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 | revert-layer <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> <h2 class="no-num no-ref heading settled" id="idl-index">IDL Index<a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#csslayerblockrule"><code><c- g>CSSLayerBlockRule</c-></code></a> : <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssgroupingrule"><c- n>CSSGroupingRule</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-csslayerblockrule-name"><c- g>name</c-></a>; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#csslayerstatementrule"><code><c- g>CSSLayerStatementRule</c-></code></a> : <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssrule"><c- n>CSSRule</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-frozen-array"><c- b>FrozenArray</c-></a><<a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<CSSOMString>" href="#dom-csslayerstatementrule-namelist"><c- g>nameList</c-></a>; }; </pre> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> Provide an attribute for assigning link or style elements to cascade layers? <a href="https://github.com/w3c/csswg-drafts/issues/5853">[Issue #w3c/csswg-drafts#5853]</a> <a class="issue-return" href="#issue-3d8c81e9" title="Jump to section">↵</a></div> <div class="issue"> Allow authors to explicitly place unlayered styles in the layer order <a href="https://github.com/w3c/csswg-drafts/issues/6323">[Issue #6323]</a> <a class="issue-return" href="#issue-e29f5f96" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="dom-csslayerblockrule-name"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSLayerBlockRule/name" title="The read-only name property of the CSSLayerBlockRule interface represents the name of the associated cascade layer.">CSSLayerBlockRule/name</a> In all current engines. <div class="support"> Firefox97+Safari15.4+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="csslayerblockrule"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSLayerBlockRule" title="The CSSLayerBlockRule represents a @layer block rule. It is a grouping at-rule meaning that it can contain other rules, and is associated to a given cascade layer, identified by its name.">CSSLayerBlockRule</a> In all current engines. <div class="support"> Firefox97+Safari15.4+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-csslayerstatementrule-namelist"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSLayerStatementRule/nameList" title="The read-only nameList property of the CSSLayerStatementRule interface return the list of associated cascade layer names. The names can't be modified.">CSSLayerStatementRule/nameList</a> In all current engines. <div class="support"> Firefox97+Safari15.4+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="csslayerstatementrule"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSLayerStatementRule" title="The CSSLayerStatementRule represents a @layer statement rule. Unlike CSSLayerBlockRule, it doesn't contain other rules and merely defines one or several layers by providing their names.">CSSLayerStatementRule</a> In all current engines. <div class="support"> Firefox97+Safari15.4+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="at-import"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import" title="The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top of the stylesheet, before any other at-rule (except @charset and @layer) and style declarations, or it will be ignored.">@import</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3.5+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="layering"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" title="The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.">@layer</a> In all current engines. <div class="support"> Firefox97+Safari15.4+Chrome99+ <hr> Opera?Edge99+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="revert-layer"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer" title="The revert-layer CSS keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of the property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.">revert-layer</a> In only one current engine. <div class="support"> Firefox97+SafariNoneChromeNone <hr> Opera?EdgeNone <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="caniuse-status unpositioned" data-anno-for="all-shorthand" data-deco> <summary>CanIUse</summary> Support:Android Browser4.4.3+Baidu Browser13.52+Blackberry BrowserNoneChrome37+Chrome for Android131+Edge79+Firefox27+Firefox for Android132+IENoneIE MobileNoneKaiOS Browser2.5+Opera24+Opera MiniNoneOpera Mobile80+QQ Browser14.9+Safari9.1+Safari on iOS9.3+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=css-all">caniuse.com</a> as of 2024-11-24 </details> <details class="caniuse-status unpositioned" data-anno-for="initial" data-deco> <summary>CanIUse</summary> Support:Android Browser2.3+Baidu Browser13.52+Blackberry Browser7+Chrome4+Chrome for Android131+Edge12+Firefox19+Firefox for Android132+IENoneIE MobileNoneKaiOS Browser2.5+Opera15+Opera MiniNoneOpera Mobile80+QQ Browser14.9+Safari3.2+Safari on iOS4.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=css-initial-value">caniuse.com</a> as of 2024-11-24 </details> <details class="caniuse-status unpositioned" data-anno-for="inherit-initial" data-deco> <summary>CanIUse</summary> Support:Android Browser131+Baidu Browser13.52+Blackberry BrowserNoneChrome41+Chrome for Android131+Edge13+Firefox27+Firefox for Android132+IENoneIE MobileNoneKaiOS Browser2.5+Opera28+Opera MiniNoneOpera Mobile80+QQ Browser14.9+Safari9.1+Safari on iOS9.3+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=css-unset-value">caniuse.com</a> as of 2024-11-24 </details> <details class="caniuse-status unpositioned" data-anno-for="default" data-deco> <summary>CanIUse</summary> Support:Android Browser131+Baidu Browser13.52+Blackberry BrowserNoneChrome84+Chrome for Android131+Edge84+Firefox67+Firefox for Android132+IENoneIE MobileNoneKaiOS Browser3.0+Opera73+Opera MiniNoneOpera Mobile80+QQ BrowserNoneSafari9.1+Safari on iOS9.3+Samsung Internet14.0+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=css-revert-value">caniuse.com</a> as of 2024-11-24 </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "0197874e": {"dfnID":"0197874e","dfnText":"block at-rule","external":true,"refSections":[{"refs":[{"id":"ref-for-block-at-rule"},{"id":"ref-for-block-at-rule\u2460"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"},{"refs":[{"id":"ref-for-block-at-rule\u2461"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"}],"url":"https://drafts.csswg.org/css-syntax-3/#block-at-rule"}, "0497de86": {"dfnID":"0497de86","dfnText":"@font-face","external":true,"refSections":[{"refs":[{"id":"ref-for-at-font-face-rule"}],"title":"6.4. \nCascade Layers"}],"url":"https://drafts.csswg.org/css-fonts-5/#at-font-face-rule"}, "05353767": {"dfnID":"05353767","dfnText":"italic","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-style-italic"}],"title":"6.3. \nImportant Declarations: the !important annotation"}],"url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic"}, "083ffe5f": {"dfnID":"083ffe5f","dfnText":"inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-box"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "09444896": {"dfnID":"09444896","dfnText":"vh","external":true,"refSections":[{"refs":[{"id":"ref-for-vh"}],"title":"4.4. \nComputed Values"}],"url":"https://drafts.csswg.org/css-values-4/#vh"}, "09cd65e4": {"dfnID":"09cd65e4","dfnText":"display type","external":true,"refSections":[{"refs":[{"id":"ref-for-display-type"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-display-4/#display-type"}, "0e99038a": {"dfnID":"0e99038a","dfnText":"ex","external":true,"refSections":[{"refs":[{"id":"ref-for-ex"}],"title":"4.4. \nComputed Values"}],"url":"https://drafts.csswg.org/css-values-3/#ex"}, "0fe1fd87": {"dfnID":"0fe1fd87","dfnText":"Content-Type metadata","external":true,"refSections":[{"refs":[{"id":"ref-for-content-type"},{"id":"ref-for-content-type\u2460"}],"title":"2.3. \nContent-Type of CSS Style Sheets"},{"refs":[{"id":"5ca12a2a0"}],"title":"\nPrivacy and Security Considerations"}],"url":"https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type"}, "11fb4d5b": {"dfnID":"11fb4d5b","dfnText":"background-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-color"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color"}, "12432dcb": {"dfnID":"12432dcb","dfnText":"<supports-condition>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-supports-condition"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-typedef-supports-condition\u2460"},{"id":"ref-for-typedef-supports-condition\u2461"},{"id":"ref-for-typedef-supports-condition\u2462"},{"id":"ref-for-typedef-supports-condition\u2463"}],"title":"2.1. \nConditional @import Rules"}],"url":"https://drafts.csswg.org/css-conditional-3/#typedef-supports-condition"}, "1548047a": {"dfnID":"1548047a","dfnText":"<color>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-color"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-color-5/#typedef-color"}, "16d57f47": {"dfnID":"16d57f47","dfnText":"list-style-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-list-style-position"},{"id":"ref-for-propdef-list-style-position\u2460"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-position"}, "174d5a21": {"dfnID":"174d5a21","dfnText":"element","external":true,"refSections":[{"refs":[{"id":"ref-for-elements"}],"title":"1.1. \nModule Interactions"}],"url":"https://drafts.csswg.org/css-display-3/#elements"}, "18222566": {"dfnID":"18222566","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "198f1537": {"dfnID":"198f1537","dfnText":"custom property","external":true,"refSections":[{"refs":[{"id":"ref-for-custom-property"}],"title":"3.2. \nResetting All Properties: the all property"}],"url":"https://drafts.csswg.org/css-variables-2/#custom-property"}, "19f9e9df": {"dfnID":"19f9e9df","dfnText":"shadow tree","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-shadow-tree"}],"title":"6.1. \nCascade Sorting Order"}],"url":"https://dom.spec.whatwg.org/#concept-shadow-tree"}, "2161cf2b": {"dfnID":"2161cf2b","dfnText":"pseudo-elements","external":true,"refSections":[{"refs":[{"id":"ref-for-x22"}],"title":"4.5.1. \nApplicable Properties"},{"refs":[{"id":"ref-for-x22\u2460"}],"title":"4.8. \nPer-Fragment Value Processing"},{"refs":[{"id":"ref-for-x22\u2461"}],"title":"7.2. \nInheritance"}],"url":"https://www.w3.org/TR/CSS21/selector.html#x22"}, "22109b0e": {"dfnID":"22109b0e","dfnText":"flat tree","external":true,"refSections":[{"refs":[{"id":"ref-for-flat-tree"},{"id":"ref-for-flat-tree\u2460"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-flat-tree\u2461"}],"title":"7.2. \nInheritance"}],"url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "22413b3f": {"dfnID":"22413b3f","dfnText":"layout","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-contain-layout"}],"title":"6.4.3. \nLayer Ordering"}],"url":"https://drafts.csswg.org/css-contain-2/#valdef-contain-layout"}, "2485e0d1": {"dfnID":"2485e0d1","dfnText":"CSSGroupingRule","external":true,"refSections":[{"refs":[{"id":"ref-for-cssgroupingrule"}],"title":"8.1. \nThe CSSLayerBlockRule interface"}],"url":"https://drafts.csswg.org/cssom-1/#cssgroupingrule"}, "2589df91": {"dfnID":"2589df91","dfnText":"orphans","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-orphans"}],"title":"4.6. \nActual Values"},{"refs":[{"id":"ref-for-propdef-orphans\u2460"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-orphans"}, "2c57f900": {"dfnID":"2c57f900","dfnText":"font","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font"},{"id":"ref-for-propdef-font\u2460"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font"}, "2c82d279": {"dfnID":"2c82d279","dfnText":"audio","external":true,"refSections":[{"refs":[{"id":"ref-for-audio"}],"title":"6.4. \nCascade Layers"}],"url":"https://html.spec.whatwg.org/multipage/media.html#audio"}, "3268a8eb": {"dfnID":"3268a8eb","dfnText":"URL","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-response-url"}],"title":"2.3. \nContent-Type of CSS Style Sheets"}],"url":"https://fetch.spec.whatwg.org/#concept-response-url"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"4.3. \nSpecified Values"},{"refs":[{"id":"ref-for-css-wide-keywords\u2460"}],"title":"6.4.2. \nLayer Naming and Nesting"},{"refs":[{"id":"ref-for-css-wide-keywords\u2461"}],"title":"7.3. \nExplicit Defaulting"},{"refs":[{"id":"ref-for-css-wide-keywords\u2462"}],"title":"7.3.1. \nResetting a Property: the initial keyword"},{"refs":[{"id":"ref-for-css-wide-keywords\u2463"}],"title":"7.3.2. \nExplicit Inheritance: the inherit keyword"},{"refs":[{"id":"ref-for-css-wide-keywords\u2464"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"},{"refs":[{"id":"ref-for-css-wide-keywords\u2465"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-css-wide-keywords\u2466"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "36630685": {"dfnID":"36630685","dfnText":"property declarations","external":true,"refSections":[{"refs":[{"id":"ref-for-css-property-declarations"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-css-property-declarations\u2460"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-css-property-declarations\u2461"}],"title":"4.1. \nDeclared Values"}],"url":"https://drafts.csswg.org/css-syntax-3/#css-property-declarations"}, "385326d7": {"dfnID":"385326d7","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "3ad13207": {"dfnID":"3ad13207","dfnText":"slot","external":true,"refSections":[{"refs":[{"id":"ref-for-the-slot-element"}],"title":"7.2. \nInheritance"}],"url":"https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element"}, "3bd4bbe9": {"dfnID":"3bd4bbe9","dfnText":"text-orientation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-orientation"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation"}, "3c91be7d": {"dfnID":"3c91be7d","dfnText":"bolder","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-weight-bolder"}],"title":"4.4. \nComputed Values"}],"url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bolder"}, "3e31a6cc": {"dfnID":"3e31a6cc","dfnText":"<media-query>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-media-query"}],"title":"1.1. \nModule Interactions"}],"url":"https://drafts.csswg.org/mediaqueries-4/#typedef-media-query"}, "42871fa3": {"dfnID":"42871fa3","dfnText":"border-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-style"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style"}, "4356bfe3": {"dfnID":"4356bfe3","dfnText":"text-align","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-align"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "46464297": {"dfnID":"46464297","dfnText":"dotted","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-line-style-dotted"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#valdef-line-style-dotted"}, "4a16f115": {"dfnID":"4a16f115","dfnText":"border-top-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-width"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "4c891868": {"dfnID":"4c891868","dfnText":"<media-query-list>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-media-query-list"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-typedef-media-query-list\u2460"},{"id":"ref-for-typedef-media-query-list\u2461"}],"title":"2.1. \nConditional @import Rules"}],"url":"https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list"}, "51810d12": {"dfnID":"51810d12","dfnText":"s","external":true,"refSections":[{"refs":[{"id":"ref-for-the-s-element"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"}],"url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element"}, "537cf076": {"dfnID":"537cf076","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"},{"id":"ref-for-mult-opt\u2460"},{"id":"ref-for-mult-opt\u2461"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-mult-opt\u2462"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"}],"url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "5424dbef": {"dfnID":"5424dbef","dfnText":"media query list","external":true,"refSections":[{"refs":[{"id":"ref-for-media-query-list"}],"title":"2.1. \nConditional @import Rules"}],"url":"https://drafts.csswg.org/mediaqueries-4/#media-query-list"}, "551c9ee4": {"dfnID":"551c9ee4","dfnText":"page","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-break-before-page"}],"title":"4.5. \nUsed Values"}],"url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-page"}, "5869f885": {"dfnID":"5869f885","dfnText":"::before","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-before"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-before"}, "5a2f7ea1": {"dfnID":"5a2f7ea1","dfnText":"url()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-url"}],"title":"2. \nImporting Style Sheets: the @import rule"}],"url":"https://drafts.csswg.org/css-values-4/#funcdef-url"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"},{"id":"ref-for-propdef-direction\u2460"}],"title":"3.2. \nResetting All Properties: the all property"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "5ddc23c6": {"dfnID":"5ddc23c6","dfnText":"page-break-after","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-after"}],"title":"4.6. \nActual Values"},{"refs":[{"id":"ref-for-propdef-page-break-after\u2460"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "5f1b7f60": {"dfnID":"5f1b7f60","dfnText":"@media","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-media"}],"title":"2.1. \nConditional @import Rules"},{"refs":[{"id":"ref-for-at-ruledef-media\u2460"}],"title":"6.4.3. \nLayer Ordering"},{"refs":[{"id":"ref-for-at-ruledef-media\u2461"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"}],"url":"https://drafts.csswg.org/css-conditional-3/#at-ruledef-media"}, "5fced98b": {"dfnID":"5fced98b","dfnText":"CSSOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-cssomstring"}],"title":"8.1. \nThe CSSLayerBlockRule interface"},{"refs":[{"id":"ref-for-cssomstring\u2460"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"https://drafts.csswg.org/cssom-1/#cssomstring"}, "620ca81c": {"dfnID":"620ca81c","dfnText":"ch","external":true,"refSections":[{"refs":[{"id":"ref-for-ch"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-values-4/#ch"}, "65c9f2cf": {"dfnID":"65c9f2cf","dfnText":"<rule-list>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-rule-list"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"}],"url":"https://drafts.csswg.org/css-syntax-3/#typedef-rule-list"}, "66c521a7": {"dfnID":"66c521a7","dfnText":"flex item","external":true,"refSections":[{"refs":[{"id":"ref-for-flex-item"}],"title":"4.5. \nUsed Values"}],"url":"https://drafts.csswg.org/css-flexbox-1/#flex-item"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"4.7. \nExamples"},{"refs":[{"id":"ref-for-propdef-height\u2460"},{"id":"ref-for-propdef-height\u2461"},{"id":"ref-for-propdef-height\u2462"},{"id":"ref-for-propdef-height\u2463"},{"id":"ref-for-propdef-height\u2464"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "68150e76": {"dfnID":"68150e76","dfnText":"*","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-zero-plus"}],"title":"6.4.2. \nLayer Naming and Nesting"}],"url":"https://drafts.csswg.org/css-values-4/#mult-zero-plus"}, "68487d22": {"dfnID":"68487d22","dfnText":"#","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-comma"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"}],"url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "6e51b40a": {"dfnID":"6e51b40a","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-align-self-auto"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-valdef-align-self-auto\u2460"},{"id":"ref-for-valdef-align-self-auto\u2461"}],"title":"4.5. \nUsed Values"}],"url":"https://drafts.csswg.org/css-align-3/#valdef-align-self-auto"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"},{"id":"ref-for-comb-one\u2464"},{"id":"ref-for-comb-one\u2465"}],"title":"3.2. \nResetting All Properties: the all property"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "6f7798a0": {"dfnID":"6f7798a0","dfnText":"root inline box","external":true,"refSections":[{"refs":[{"id":"ref-for-root-inline-box"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "732c4198": {"dfnID":"732c4198","dfnText":"flattened element tree","external":true,"refSections":[{"refs":[{"id":"ref-for-flat-tree"},{"id":"ref-for-flat-tree\u2460"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-flat-tree\u2461"}],"title":"7.2. \nInheritance"}],"url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "73759fff": {"dfnID":"73759fff","dfnText":"border-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-color"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "7393da89": {"dfnID":"7393da89","dfnText":"same origin","external":true,"refSections":[{"refs":[{"id":"ref-for-same-origin"}],"title":"2.3. \nContent-Type of CSS Style Sheets"}],"url":"https://html.spec.whatwg.org/multipage/browsers.html#same-origin"}, "73a16e8f": {"dfnID":"73a16e8f","dfnText":"flex","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-flex"}],"title":"4.5. \nUsed Values"}],"url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex"}, "73ea1d43": {"dfnID":"73ea1d43","dfnText":"color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color"}],"title":"1. \nIntroduction"}],"url":"https://drafts.csswg.org/css-color-4/#propdef-color"}, "75bfa627": {"dfnID":"75bfa627","dfnText":"::first-line","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-first-line"},{"id":"ref-for-selectordef-first-line\u2460"},{"id":"ref-for-selectordef-first-line\u2461"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "762610c7": {"dfnID":"762610c7","dfnText":"at-rule","external":true,"refSections":[{"refs":[{"id":"ref-for-at-rule"}],"title":"6.4. \nCascade Layers"}],"url":"https://drafts.csswg.org/css-syntax-3/#at-rule"}, "76883434": {"dfnID":"76883434","dfnText":"<supports-decl>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-supports-decl"}],"title":"2.1. \nConditional @import Rules"}],"url":"https://drafts.csswg.org/css-conditional-3/#typedef-supports-decl"}, "7e4aa58b": {"dfnID":"7e4aa58b","dfnText":"environment encoding","external":true,"refSections":[{"refs":[{"id":"ref-for-environment-encoding"}],"title":"2.2. \nProcessing Stylesheet Imports"}],"url":"https://drafts.csswg.org/css-syntax-3/#environment-encoding"}, "8000726e": {"dfnID":"8000726e","dfnText":"border-left-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-width"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "82ed5c4b": {"dfnID":"82ed5c4b","dfnText":"red","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-red"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-valdef-color-red\u2460"}],"title":"4.4. \nComputed Values"}],"url":"https://drafts.csswg.org/css-color-4/#valdef-color-red"}, "8458d39f": {"dfnID":"8458d39f","dfnText":"sans-serif","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-font-family-sans-serif"}],"title":"6.3. \nImportant Declarations: the !important annotation"}],"url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-family-sans-serif"}, "881c2f72": {"dfnID":"881c2f72","dfnText":"box","external":true,"refSections":[{"refs":[{"id":"ref-for-box"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://drafts.csswg.org/css-display-4/#box"}, "8831f13c": {"dfnID":"8831f13c","dfnText":"text-indent","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-indent"}],"title":"6.3. \nImportant Declarations: the !important annotation"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-text-indent"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"}],"title":"4.5. \nUsed Values"},{"refs":[{"id":"ref-for-propdef-width\u2460"},{"id":"ref-for-propdef-width\u2461"},{"id":"ref-for-propdef-width\u2462"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "889e932f": {"dfnID":"889e932f","dfnText":"Exposed","external":true,"refSections":[{"refs":[{"id":"ref-for-Exposed"}],"title":"8.1. \nThe CSSLayerBlockRule interface"},{"refs":[{"id":"ref-for-Exposed\u2460"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, "8f568cb6": {"dfnID":"8f568cb6","dfnText":"page-break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-page-break-before"},{"id":"ref-for-propdef-page-break-before\u2460"}],"title":"3.1. \nProperty Aliasing"}],"url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "9213678e": {"dfnID":"9213678e","dfnText":"<ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-ident"},{"id":"ref-for-typedef-ident\u2460"},{"id":"ref-for-typedef-ident\u2461"},{"id":"ref-for-typedef-ident\u2462"}],"title":"6.4.2. \nLayer Naming and Nesting"}],"url":"https://drafts.csswg.org/css-values-4/#typedef-ident"}, "9638f92b": {"dfnID":"9638f92b","dfnText":"connected","external":true,"refSections":[{"refs":[{"id":"ref-for-connected"}],"title":"4. \nValue Processing"}],"url":"https://dom.spec.whatwg.org/#connected"}, "977d3003": {"dfnID":"977d3003","dfnText":"<string>","external":true,"refSections":[{"refs":[{"id":"ref-for-string-value"},{"id":"ref-for-string-value\u2460"},{"id":"ref-for-string-value\u2461"}],"title":"2. \nImporting Style Sheets: the @import rule"}],"url":"https://drafts.csswg.org/css-values-4/#string-value"}, "982e17a3": {"dfnID":"982e17a3","dfnText":"unicode-bidi","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-unicode-bidi"},{"id":"ref-for-propdef-unicode-bidi\u2460"}],"title":"3.2. \nResetting All Properties: the all property"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi"}, "989f9ee6": {"dfnID":"989f9ee6","dfnText":"border-right-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-right-width"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "9bfc28f6": {"dfnID":"9bfc28f6","dfnText":"pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-pseudo-element"}],"title":"4.5.1. \nApplicable Properties"},{"refs":[{"id":"ref-for-pseudo-element\u2460"}],"title":"7.2. \nInheritance"}],"url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "a15951ea": {"dfnID":"a15951ea","dfnText":"supports()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-supports"}],"title":"9.8. \nAdditions Since Level 3"}],"url":"https://drafts.csswg.org/css-conditional-5/#funcdef-supports"}, "a2a30ba8": {"dfnID":"a2a30ba8","dfnText":"CORS protocol","external":true,"refSections":[{"refs":[{"id":"ref-for-cors-protocol"}],"title":"\nPrivacy and Security Considerations"}],"url":"https://fetch.spec.whatwg.org/#cors-protocol"}, "a4cd8a8d": {"dfnID":"a4cd8a8d","dfnText":"border-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image"}, "a7bbaf9f": {"dfnID":"a7bbaf9f","dfnText":"div","external":true,"refSections":[{"refs":[{"id":"ref-for-the-div-element"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element"}, "a8fe91d7": {"dfnID":"a8fe91d7","dfnText":"font-weight","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-weight"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-weight"}, "a9734ee4": {"dfnID":"a9734ee4","dfnText":"border","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "ac54fbff": {"dfnID":"ac54fbff","dfnText":"line-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-line-height"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "actual-value": {"dfnID":"actual-value","dfnText":"actual value","external":false,"refSections":[{"refs":[{"id":"ref-for-actual-value"},{"id":"ref-for-actual-value\u2460"},{"id":"ref-for-actual-value\u2461"}],"title":"4. \nValue Processing"}],"url":"#actual-value"}, "apply": {"dfnID":"apply","dfnText":"apply to","external":false,"refSections":[{"refs":[{"id":"ref-for-apply"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-apply\u2460"}],"title":"4.5. \nUsed Values"}],"url":"#apply"}, "at-ruledef-import": {"dfnID":"at-ruledef-import","dfnText":"@import","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-import"},{"id":"ref-for-at-ruledef-import\u2460"},{"id":"ref-for-at-ruledef-import\u2461"},{"id":"ref-for-at-ruledef-import\u2462"},{"id":"ref-for-at-ruledef-import\u2463"},{"id":"ref-for-at-ruledef-import\u2464"},{"id":"ref-for-at-ruledef-import\u2465"},{"id":"ref-for-at-ruledef-import\u2466"},{"id":"ref-for-at-ruledef-import\u2467"},{"id":"ref-for-at-ruledef-import\u2468"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-at-ruledef-import\u2460\u24ea"},{"id":"ref-for-at-ruledef-import\u2460\u2460"}],"title":"2.1. \nConditional @import Rules"},{"refs":[{"id":"ref-for-at-ruledef-import\u2460\u2461"},{"id":"ref-for-at-ruledef-import\u2460\u2462"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-at-ruledef-import\u2460\u2463"}],"title":"6.4.1. \nDeclaring Cascade Layers"},{"refs":[{"id":"ref-for-at-ruledef-import\u2460\u2464"},{"id":"ref-for-at-ruledef-import\u2460\u2465"}],"title":"6.4.2. \nLayer Naming and Nesting"},{"refs":[{"id":"ref-for-at-ruledef-import\u2460\u2466"}],"title":"6.4.2.1. \nAnonymous Layers"},{"refs":[{"id":"ref-for-at-ruledef-import\u2460\u2467"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"},{"refs":[{"id":"ref-for-at-ruledef-import\u2460\u2468"},{"id":"ref-for-at-ruledef-import\u2461\u24ea"},{"id":"ref-for-at-ruledef-import\u2461\u2460"},{"id":"ref-for-at-ruledef-import\u2461\u2461"},{"id":"ref-for-at-ruledef-import\u2461\u2462"},{"id":"ref-for-at-ruledef-import\u2461\u2463"},{"id":"ref-for-at-ruledef-import\u2461\u2464"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"},{"refs":[{"id":"ref-for-at-ruledef-import\u2461\u2465"}],"title":"9.1. \nChanges since the 13 Jan 2022 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-at-ruledef-import\u2461\u2466"}],"title":"9.2. \nChanges since the 15 Oct 2021 Working Draft"},{"refs":[{"id":"ref-for-at-ruledef-import\u2461\u2467"}],"title":"9.4. \nChanges since the 8 June 2021 Working Draft"},{"refs":[{"id":"ref-for-at-ruledef-import\u2461\u2468"}],"title":"9.6. \nChanges since the 19 January 2021 Working Draft"},{"refs":[{"id":"ref-for-at-ruledef-import\u2462\u24ea"}],"title":"9.7. \nAdditions Since Level 4"},{"refs":[{"id":"ref-for-at-ruledef-import\u2462\u2460"}],"title":"9.8. \nAdditions Since Level 3"},{"refs":[{"id":"ref-for-at-ruledef-import\u2462\u2461"},{"id":"ref-for-at-ruledef-import\u2462\u2462"}],"title":"\nPrivacy and Security Considerations"}],"url":"#at-ruledef-import"}, "at-ruledef-layer": {"dfnID":"at-ruledef-layer","dfnText":"@layer","external":false,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-layer"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2460"},{"id":"ref-for-at-ruledef-layer\u2461"},{"id":"ref-for-at-ruledef-layer\u2462"},{"id":"ref-for-at-ruledef-layer\u2463"}],"title":"6.4.2. \nLayer Naming and Nesting"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2464"}],"title":"6.4.2.1. \nAnonymous Layers"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2465"}],"title":"6.4.3. \nLayer Ordering"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2466"}],"title":"6.4.4. \nDeclaring Layers Inline: the @layer rule"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2467"},{"id":"ref-for-at-ruledef-layer\u2468"},{"id":"ref-for-at-ruledef-layer\u2460\u24ea"},{"id":"ref-for-at-ruledef-layer\u2460\u2460"},{"id":"ref-for-at-ruledef-layer\u2460\u2461"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2460\u2462"},{"id":"ref-for-at-ruledef-layer\u2460\u2463"},{"id":"ref-for-at-ruledef-layer\u2460\u2464"},{"id":"ref-for-at-ruledef-layer\u2460\u2465"},{"id":"ref-for-at-ruledef-layer\u2460\u2466"},{"id":"ref-for-at-ruledef-layer\u2460\u2467"},{"id":"ref-for-at-ruledef-layer\u2460\u2468"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2461\u24ea"},{"id":"ref-for-at-ruledef-layer\u2461\u2460"}],"title":"8.1. \nThe CSSLayerBlockRule interface"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2461\u2461"}],"title":"8.2. \nThe CSSLayerStatementRule interface"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2461\u2462"},{"id":"ref-for-at-ruledef-layer\u2461\u2463"}],"title":"9.1. \nChanges since the 13 Jan 2022 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2461\u2464"},{"id":"ref-for-at-ruledef-layer\u2461\u2465"}],"title":"9.4. \nChanges since the 8 June 2021 Working Draft"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2461\u2466"}],"title":"9.6. \nChanges since the 19 January 2021 Working Draft"},{"refs":[{"id":"ref-for-at-ruledef-layer\u2461\u2467"}],"title":"9.7. \nAdditions Since Level 4"}],"url":"#at-ruledef-layer"}, "author-presentational-hint-origin": {"dfnID":"author-presentational-hint-origin","dfnText":"author presentational hint origin","external":false,"refSections":[{"refs":[{"id":"ref-for-author-presentational-hint-origin"},{"id":"ref-for-author-presentational-hint-origin\u2460"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-author-presentational-hint-origin\u2461"}],"title":"9.3. \nChanges since the 29 August 2021 Working Draft"}],"url":"#author-presentational-hint-origin"}, "b203675a": {"dfnID":"b203675a","dfnText":"getComputedStyle(elt)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-window-getcomputedstyle"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-dom-window-getcomputedstyle\u2460"},{"id":"ref-for-dom-window-getcomputedstyle\u2461"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle"}, "b30820a7": {"dfnID":"b30820a7","dfnText":"text node","external":true,"refSections":[{"refs":[{"id":"ref-for-text-nodes"}],"title":"1.1. \nModule Interactions"}],"url":"https://drafts.csswg.org/css-display-4/#text-nodes"}, "b32b852a": {"dfnID":"b32b852a","dfnText":"span","external":true,"refSections":[{"refs":[{"id":"ref-for-the-span-element"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element"}, "b54af98a": {"dfnID":"b54af98a","dfnText":"tree-abiding","external":true,"refSections":[{"refs":[{"id":"ref-for-tree-abiding"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://www.w3.org/TR/css-pseudo-4/#tree-abiding"}, "b80d76a2": {"dfnID":"b80d76a2","dfnText":"p","external":true,"refSections":[{"refs":[{"id":"ref-for-the-p-element"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element"}, "bf0e8186": {"dfnID":"bf0e8186","dfnText":"@namespace","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-namespace"},{"id":"ref-for-at-ruledef-namespace\u2460"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-at-ruledef-namespace\u2461"},{"id":"ref-for-at-ruledef-namespace\u2462"},{"id":"ref-for-at-ruledef-namespace\u2463"},{"id":"ref-for-at-ruledef-namespace\u2464"},{"id":"ref-for-at-ruledef-namespace\u2465"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"},{"refs":[{"id":"ref-for-at-ruledef-namespace\u2466"}],"title":"9.4. \nChanges since the 8 June 2021 Working Draft"}],"url":"https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace"}, "bf3ca8a7": {"dfnID":"bf3ca8a7","dfnText":"conditional group rule","external":true,"refSections":[{"refs":[{"id":"ref-for-conditional-group-rule"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-conditional-group-rule\u2460"},{"id":"ref-for-conditional-group-rule\u2461"},{"id":"ref-for-conditional-group-rule\u2462"}],"title":"6.4.3. \nLayer Ordering"},{"refs":[{"id":"ref-for-conditional-group-rule\u2463"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"}],"url":"https://drafts.csswg.org/css-conditional-3/#conditional-group-rule"}, "c117ac59": {"dfnID":"c117ac59","dfnText":"vw","external":true,"refSections":[{"refs":[{"id":"ref-for-vw"}],"title":"4.4. \nComputed Values"}],"url":"https://drafts.csswg.org/css-values-4/#vw"}, "c1654d36": {"dfnID":"c1654d36","dfnText":"break-before","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-break-before"},{"id":"ref-for-propdef-break-before\u2460"},{"id":"ref-for-propdef-break-before\u2461"},{"id":"ref-for-propdef-break-before\u2462"}],"title":"3.1. \nProperty Aliasing"},{"refs":[{"id":"ref-for-propdef-break-before\u2463"},{"id":"ref-for-propdef-break-before\u2464"}],"title":"4.5. \nUsed Values"}],"url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "c1ebc639": {"dfnID":"c1ebc639","dfnText":"@supports","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-supports"}],"title":"2.1. \nConditional @import Rules"},{"refs":[{"id":"ref-for-at-ruledef-supports\u2460"}],"title":"6.4.3. \nLayer Ordering"}],"url":"https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports"}, "c33ace41": {"dfnID":"c33ace41","dfnText":"CSS identifier","external":true,"refSections":[{"refs":[{"id":"ref-for-css-css-identifier"}],"title":"6.4.2. \nLayer Naming and Nesting"}],"url":"https://drafts.csswg.org/css-values-4/#css-css-identifier"}, "c3bd6e1d": {"dfnID":"c3bd6e1d","dfnText":"box fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-box-fragment"},{"id":"ref-for-box-fragment\u2460"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://drafts.csswg.org/css-break-4/#box-fragment"}, "c533ddd8": {"dfnID":"c533ddd8","dfnText":"@charset","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-charset"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-at-ruledef-charset\u2460"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"}],"url":"https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset"}, "cad72d2f": {"dfnID":"cad72d2f","dfnText":"currentcolor","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-currentcolor"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor"}, "caf45308": {"dfnID":"caf45308","dfnText":"font-size-adjust","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size-adjust"}],"title":"4.6. \nActual Values"}],"url":"https://drafts.csswg.org/css-fonts-5/#propdef-font-size-adjust"}, "cascade": {"dfnID":"cascade","dfnText":"cascade","external":false,"refSections":[{"refs":[{"id":"ref-for-cascade"},{"id":"ref-for-cascade"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-cascade\u2460"}],"title":"4.1. \nDeclared Values"},{"refs":[{"id":"ref-for-cascade"}],"title":"4.2. \nCascaded Values"},{"refs":[{"id":"ref-for-cascade\u2461"}],"title":"5. \nFiltering"},{"refs":[{"id":"ref-for-cascade\u2462"},{"id":"ref-for-cascade\u2463"},{"id":"ref-for-cascade\u2464"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-cascade\u2465"}],"title":"7. \nDefaulting"},{"refs":[{"id":"ref-for-cascade\u2466"}],"title":"7.1. \nInitial Values"},{"refs":[{"id":"ref-for-cascade\u2467"}],"title":"7.2. \nInheritance"},{"refs":[{"id":"ref-for-cascade\u2468"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"},{"refs":[{"id":"ref-for-cascade\u2460\u24ea"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"},{"refs":[{"id":"ref-for-cascade\u2460\u2460"},{"id":"ref-for-cascade\u2460\u2461"}],"title":"9.7. \nAdditions Since Level 4"},{"refs":[{"id":"ref-for-cascade\u2460\u2462"}],"title":"9.8. \nAdditions Since Level 3"},{"refs":[{"id":"ref-for-cascade\u2460\u2463"}],"title":"9.9. \nAdditions Since Level 2"}],"url":"#cascade"}, "cascade-dependent-keyword": {"dfnID":"cascade-dependent-keyword","dfnText":"cascade-dependent keywords","external":false,"refSections":[],"url":"#cascade-dependent-keyword"}, "cascade-layers": {"dfnID":"cascade-layers","dfnText":"cascade layers","external":false,"refSections":[{"refs":[{"id":"ref-for-cascade-layers\u2460"},{"id":"ref-for-cascade-layers\u2461"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-cascade-layers\u2462"},{"id":"ref-for-cascade-layers\u2463"},{"id":"ref-for-cascade-layers\u2464"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-cascade-layers\u2465"},{"id":"ref-for-cascade-layers\u2466"}],"title":"6.4. \nCascade Layers"},{"refs":[{"id":"ref-for-cascade-layers\u2467"},{"id":"ref-for-cascade-layers\u2468"}],"title":"6.4.2. \nLayer Naming and Nesting"},{"refs":[{"id":"ref-for-cascade-layers\u2460\u24ea"}],"title":"6.4.3. \nLayer Ordering"},{"refs":[{"id":"ref-for-cascade-layers\u2460\u2460"}],"title":"6.4.4. \nDeclaring Layers Inline: the @layer rule"},{"refs":[{"id":"ref-for-cascade-layers\u2460\u2461"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"},{"refs":[{"id":"ref-for-cascade-layers\u2460\u2462"},{"id":"ref-for-cascade-layers\u2460\u2463"},{"id":"ref-for-cascade-layers\u2460\u2464"},{"id":"ref-for-cascade-layers\u2460\u2465"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"},{"refs":[{"id":"ref-for-cascade-layers\u2460\u2466"}],"title":"9.6. \nChanges since the 19 January 2021 Working Draft"},{"refs":[{"id":"ref-for-cascade-layers\u2460\u2467"}],"title":"9.7. \nAdditions Since Level 4"}],"url":"#cascade-layers"}, "cascade-origin-animation": {"dfnID":"cascade-origin-animation","dfnText":"Animation Origin","external":false,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-animation"},{"id":"ref-for-cascade-origin-animation\u2460"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"#cascade-origin-animation"}, "cascade-origin-author": {"dfnID":"cascade-origin-author","dfnText":"Author Origin","external":false,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-author"},{"id":"ref-for-cascade-origin-author\u2460"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-cascade-origin-author\u2461"},{"id":"ref-for-cascade-origin-author\u2462"}],"title":"6.3. \nImportant Declarations: the !important annotation"},{"refs":[{"id":"ref-for-cascade-origin-author\u2463"},{"id":"ref-for-cascade-origin-author\u2464"},{"id":"ref-for-cascade-origin-author\u2465"},{"id":"ref-for-cascade-origin-author\u2466"},{"id":"ref-for-cascade-origin-author\u2467"},{"id":"ref-for-cascade-origin-author\u2468"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-cascade-origin-author\u2460\u24ea"},{"id":"ref-for-cascade-origin-author\u2460\u2460"},{"id":"ref-for-cascade-origin-author\u2460\u2461"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-cascade-origin-author\u2460\u2462"},{"id":"ref-for-cascade-origin-author\u2460\u2463"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"#cascade-origin-author"}, "cascade-origin-transition": {"dfnID":"cascade-origin-transition","dfnText":"Transition Origin","external":false,"refSections":[],"url":"#cascade-origin-transition"}, "cascade-origin-ua": {"dfnID":"cascade-origin-ua","dfnText":"User-Agent Origin","external":false,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-ua"},{"id":"ref-for-cascade-origin-ua\u2460"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-cascade-origin-ua\u2461"}],"title":"6.3. \nImportant Declarations: the !important annotation"},{"refs":[{"id":"ref-for-cascade-origin-ua\u2462"},{"id":"ref-for-cascade-origin-ua\u2463"},{"id":"ref-for-cascade-origin-ua\u2464"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-cascade-origin-ua\u2465"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"}],"url":"#cascade-origin-ua"}, "cascade-origin-user": {"dfnID":"cascade-origin-user","dfnText":"User Origin","external":false,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-user"},{"id":"ref-for-cascade-origin-user\u2460"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-cascade-origin-user\u2461"},{"id":"ref-for-cascade-origin-user\u2462"}],"title":"6.3. \nImportant Declarations: the !important annotation"},{"refs":[{"id":"ref-for-cascade-origin-user\u2463"},{"id":"ref-for-cascade-origin-user\u2464"},{"id":"ref-for-cascade-origin-user\u2465"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-cascade-origin-user\u2466"},{"id":"ref-for-cascade-origin-user\u2467"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"}],"url":"#cascade-origin-user"}, "cascaded-value": {"dfnID":"cascaded-value","dfnText":"cascaded value","external":false,"refSections":[{"refs":[{"id":"ref-for-cascaded-value"},{"id":"ref-for-cascaded-value\u2460"},{"id":"ref-for-cascaded-value\u2461"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-cascaded-value\u2462"}],"title":"4.2. \nCascaded Values"},{"refs":[{"id":"ref-for-cascaded-value\u2463"},{"id":"ref-for-cascaded-value\u2464"},{"id":"ref-for-cascaded-value\u2465"},{"id":"ref-for-cascaded-value\u2466"}],"title":"4.3. \nSpecified Values"},{"refs":[{"id":"ref-for-cascaded-value\u2467"}],"title":"6. \nCascading"},{"refs":[{"id":"ref-for-cascaded-value\u2468"}],"title":"7.3.1. \nResetting a Property: the initial keyword"},{"refs":[{"id":"ref-for-cascaded-value\u2460\u24ea"}],"title":"7.3.2. \nExplicit Inheritance: the inherit keyword"},{"refs":[{"id":"ref-for-cascaded-value\u2460\u2460"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"},{"refs":[{"id":"ref-for-cascaded-value\u2460\u2461"},{"id":"ref-for-cascaded-value\u2460\u2462"},{"id":"ref-for-cascaded-value\u2460\u2463"},{"id":"ref-for-cascaded-value\u2460\u2464"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-cascaded-value\u2460\u2465"},{"id":"ref-for-cascaded-value\u2460\u2466"},{"id":"ref-for-cascaded-value\u2460\u2467"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"#cascaded-value"}, "cbc54f93": {"dfnID":"cbc54f93","dfnText":"text-transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-transform"},{"id":"ref-for-propdef-text-transform\u2460"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "cd1cb230": {"dfnID":"cd1cb230","dfnText":"light tree","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-light-tree"}],"title":"7.2. \nInheritance"}],"url":"https://dom.spec.whatwg.org/#concept-light-tree"}, "cfd2c803": {"dfnID":"cfd2c803","dfnText":"tree context","external":true,"refSections":[{"refs":[{"id":"ref-for-tree-context"},{"id":"ref-for-tree-context\u2460"}],"title":"6.1. \nCascade Sorting Order"}],"url":"https://drafts.csswg.org/css-scoping-1/#tree-context"}, "computed-value": {"dfnID":"computed-value","dfnText":"computed value","external":false,"refSections":[{"refs":[{"id":"ref-for-computed-value"},{"id":"ref-for-computed-value\u2460"},{"id":"ref-for-computed-value\u2461"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-computed-value\u2462"},{"id":"ref-for-computed-value\u2463"},{"id":"ref-for-computed-value\u2464"},{"id":"ref-for-computed-value\u2465"},{"id":"ref-for-computed-value\u2466"},{"id":"ref-for-computed-value\u2467"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-computed-value\u2468"},{"id":"ref-for-computed-value\u2460\u24ea"}],"title":"4.5. \nUsed Values"},{"refs":[{"id":"ref-for-computed-value\u2460\u2460"}],"title":"4.5.1. \nApplicable Properties"},{"refs":[{"id":"ref-for-computed-value\u2460\u2461"}],"title":"4.8. \nPer-Fragment Value Processing"},{"refs":[{"id":"ref-for-computed-value\u2460\u2462"}],"title":"7.2. \nInheritance"},{"refs":[{"id":"ref-for-computed-value\u2460\u2463"},{"id":"ref-for-computed-value\u2460\u2464"}],"title":"7.3.2. \nExplicit Inheritance: the inherit keyword"}],"url":"#computed-value"}, "css-inheritance": {"dfnID":"css-inheritance","dfnText":"Inheritance","external":false,"refSections":[{"refs":[{"id":"ref-for-css-inheritance"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-css-inheritance\u2460"},{"id":"ref-for-css-inheritance\u2461"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-css-inheritance\u2462"}],"title":"7. \nDefaulting"},{"refs":[{"id":"ref-for-css-inheritance\u2463"}],"title":"7.2. \nInheritance"}],"url":"#css-inheritance"}, "css-legacy-value-alias": {"dfnID":"css-legacy-value-alias","dfnText":"legacy value aliases","external":false,"refSections":[],"url":"#css-legacy-value-alias"}, "css-property": {"dfnID":"css-property","dfnText":"properties","external":false,"refSections":[],"url":"#css-property"}, "csslayerblockrule": {"dfnID":"csslayerblockrule","dfnText":"CSSLayerBlockRule","external":false,"refSections":[{"refs":[{"id":"ref-for-csslayerblockrule"}],"title":"8.1. \nThe CSSLayerBlockRule interface"},{"refs":[{"id":"ref-for-csslayerblockrule\u2460"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"#csslayerblockrule"}, "csslayerstatementrule": {"dfnID":"csslayerstatementrule","dfnText":"CSSLayerStatementRule","external":false,"refSections":[{"refs":[{"id":"ref-for-csslayerstatementrule"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"#csslayerstatementrule"}, "d45afbab": {"dfnID":"d45afbab","dfnText":"font-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-style"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-propdef-font-style\u2460"}],"title":"6.3. \nImportant Declarations: the !important annotation"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-style"}, "d65d17df": {"dfnID":"d65d17df","dfnText":"font-family","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-family"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-propdef-font-family\u2460"}],"title":"6.3. \nImportant Declarations: the !important annotation"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-family"}, "dcf5fafa": {"dfnID":"dcf5fafa","dfnText":"FrozenArray","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-frozen-array"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"https://webidl.spec.whatwg.org/#idl-frozen-array"}, "dd0f8cfb": {"dfnID":"dd0f8cfb","dfnText":"border-bottom-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-bottom-width"}],"title":"4.7. \nExamples"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "declared-value": {"dfnID":"declared-value","dfnText":"declared value","external":false,"refSections":[{"refs":[{"id":"ref-for-declared-value"},{"id":"ref-for-declared-value\u2460"},{"id":"ref-for-declared-value\u2461"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-declared-value\u2462"}],"title":"4.1.1. \nValue Aliasing"},{"refs":[{"id":"ref-for-declared-value\u2463"}],"title":"4.2. \nCascaded Values"},{"refs":[{"id":"ref-for-declared-value\u2464"},{"id":"ref-for-declared-value\u2465"}],"title":"5. \nFiltering"},{"refs":[{"id":"ref-for-declared-value\u2466"}],"title":"6. \nCascading"},{"refs":[{"id":"ref-for-declared-value\u2467"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-declared-value\u2468"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"}],"url":"#declared-value"}, "dfd120f7": {"dfnID":"dfd120f7","dfnText":"declaration","external":true,"refSections":[{"refs":[{"id":"ref-for-declaration"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-declaration\u2460"}],"title":"6. \nCascading"},{"refs":[{"id":"ref-for-declaration\u2461"},{"id":"ref-for-declaration\u2462"},{"id":"ref-for-declaration\u2463"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-declaration\u2464"},{"id":"ref-for-declaration\u2465"}],"title":"6.3. \nImportant Declarations: the !important annotation"},{"refs":[{"id":"ref-for-declaration\u2466"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"}],"url":"https://drafts.csswg.org/css-syntax-3/#declaration"}, "dom-csslayerblockrule-name": {"dfnID":"dom-csslayerblockrule-name","dfnText":"name","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-csslayerblockrule-name"},{"id":"ref-for-dom-csslayerblockrule-name\u2460"}],"title":"8.1. \nThe CSSLayerBlockRule interface"},{"refs":[{"id":"ref-for-dom-csslayerblockrule-name\u2461"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"#dom-csslayerblockrule-name"}, "dom-csslayerstatementrule-namelist": {"dfnID":"dom-csslayerstatementrule-namelist","dfnText":"nameList","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-csslayerstatementrule-namelist"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"#dom-csslayerstatementrule-namelist"}, "e4ffca7f": {"dfnID":"e4ffca7f","dfnText":"declarations","external":true,"refSections":[{"refs":[{"id":"ref-for-cssstyledeclaration-declarations"},{"id":"ref-for-cssstyledeclaration-declarations\u2460"},{"id":"ref-for-cssstyledeclaration-declarations\u2461"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-cssstyledeclaration-declarations\u2462"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-cssstyledeclaration-declarations\u2463"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-cssstyledeclaration-declarations\u2464"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-cssstyledeclaration-declarations\u2465"},{"id":"ref-for-cssstyledeclaration-declarations\u2466"}],"title":"5. \nFiltering"},{"refs":[{"id":"ref-for-cssstyledeclaration-declarations\u2467"},{"id":"ref-for-cssstyledeclaration-declarations\u2468"},{"id":"ref-for-cssstyledeclaration-declarations\u2460\u24ea"},{"id":"ref-for-cssstyledeclaration-declarations\u2460\u2460"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-cssstyledeclaration-declarations\u2460\u2461"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-propdef-display\u2460"}],"title":"3.2. \nResetting All Properties: the all property"},{"refs":[{"id":"ref-for-propdef-display\u2461"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "e8ff0bb4": {"dfnID":"e8ff0bb4","dfnText":"em","external":true,"refSections":[{"refs":[{"id":"ref-for-em"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-em\u2460"}],"title":"4.8. \nPer-Fragment Value Processing"}],"url":"https://drafts.csswg.org/css-values-4/#em"}, "e9cef995": {"dfnID":"e9cef995","dfnText":"base","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-appearance-base"},{"id":"ref-for-valdef-appearance-base\u2460"},{"id":"ref-for-valdef-appearance-base\u2461"},{"id":"ref-for-valdef-appearance-base\u2462"}],"title":"6.4.2. \nLayer Naming and Nesting"}],"url":"https://drafts.csswg.org/css-ui-4/#valdef-appearance-base"}, "eb3aa672": {"dfnID":"eb3aa672","dfnText":"logical property group","external":true,"refSections":[{"refs":[{"id":"ref-for-logical-property-group"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-logical-property-group\u2460"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"https://drafts.csswg.org/css-logical-1/#logical-property-group"}, "ebaeb088": {"dfnID":"ebaeb088","dfnText":"CSSRule","external":true,"refSections":[{"refs":[{"id":"ref-for-cssrule"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"https://drafts.csswg.org/cssom-1/#cssrule"}, "ee7bba09": {"dfnID":"ee7bba09","dfnText":"response","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-response"}],"title":"2.3. \nContent-Type of CSS Style Sheets"}],"url":"https://fetch.spec.whatwg.org/#concept-response"}, "encapsulation-contexts": {"dfnID":"encapsulation-contexts","dfnText":"encapsulation contexts","external":false,"refSections":[{"refs":[{"id":"ref-for-encapsulation-contexts"},{"id":"ref-for-encapsulation-contexts\u2460"},{"id":"ref-for-encapsulation-contexts\u2461"},{"id":"ref-for-encapsulation-contexts\u2462"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-encapsulation-contexts\u2463"}],"title":"6.4.3. \nLayer Ordering"},{"refs":[{"id":"ref-for-encapsulation-contexts\u2464"}],"title":"9.8. \nAdditions Since Level 3"}],"url":"#encapsulation-contexts"}, "f0c46389": {"dfnID":"f0c46389","dfnText":"block-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-block-size"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"https://drafts.csswg.org/css-logical-1/#propdef-block-size"}, "f5eca8c9": {"dfnID":"f5eca8c9","dfnText":"background","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "f831c141": {"dfnID":"f831c141","dfnText":"background-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-image"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image"}, "fa19c68e": {"dfnID":"fa19c68e","dfnText":"@keyframes","external":true,"refSections":[{"refs":[{"id":"ref-for-at-ruledef-keyframes"}],"title":"6.4. \nCascade Layers"},{"refs":[{"id":"ref-for-at-ruledef-keyframes\u2460"}],"title":"9.2. \nChanges since the 15 Oct 2021 Working Draft"}],"url":"https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes"}, "fa293cdd": {"dfnID":"fa293cdd","dfnText":"<url>","external":true,"refSections":[{"refs":[{"id":"ref-for-url-value"},{"id":"ref-for-url-value\u2460"},{"id":"ref-for-url-value\u2461"}],"title":"2. \nImporting Style Sheets: the @import rule"}],"url":"https://drafts.csswg.org/css-values-4/#url-value"}, "fb030e6c": {"dfnID":"fb030e6c","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-values-4/#length-value"}, "fb7153bd": {"dfnID":"fb7153bd","dfnText":"font-variant","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-variant"}],"title":"3. \nShorthand Properties"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant"}, "fd0c9e35": {"dfnID":"fd0c9e35","dfnText":"::after","external":true,"refSections":[{"refs":[{"id":"ref-for-selectordef-after"}],"title":"4.5.1. \nApplicable Properties"}],"url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-after"}, "fd11cdcd": {"dfnID":"fd11cdcd","dfnText":"quirks mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document-quirks"}],"title":"2.3. \nContent-Type of CSS Style Sheets"}],"url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "fdf6efd5": {"dfnID":"fdf6efd5","dfnText":"font-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-propdef-font-size\u2460"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-propdef-font-size\u2461"}],"title":"4.7. \nExamples"},{"refs":[{"id":"ref-for-propdef-font-size\u2462"}],"title":"6.3. \nImportant Declarations: the !important annotation"}],"url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-size"}, "fefa5851": {"dfnID":"fefa5851","dfnText":"shadow-including tree order","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-shadow-including-tree-order"}],"title":"6.1. \nCascade Sorting Order"}],"url":"https://dom.spec.whatwg.org/#concept-shadow-including-tree-order"}, "import-conditions": {"dfnID":"import-conditions","dfnText":"Import conditions","external":false,"refSections":[{"refs":[{"id":"ref-for-import-conditions"},{"id":"ref-for-import-conditions\u2460"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-import-conditions\u2461"},{"id":"ref-for-import-conditions\u2462"},{"id":"ref-for-import-conditions\u2463"},{"id":"ref-for-import-conditions\u2464"},{"id":"ref-for-import-conditions\u2465"}],"title":"2.1. \nConditional @import Rules"}],"url":"#import-conditions"}, "important": {"dfnID":"important","dfnText":"important","external":false,"refSections":[{"refs":[{"id":"ref-for-important"},{"id":"ref-for-important\u2460"},{"id":"ref-for-important\u2461"},{"id":"ref-for-important\u2462"},{"id":"ref-for-important\u2463"},{"id":"ref-for-important\u2464"},{"id":"ref-for-important\u2465"},{"id":"ref-for-important\u2466"},{"id":"ref-for-important\u2467"},{"id":"ref-for-important\u2468"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-important\u2460\u24ea"},{"id":"ref-for-important\u2460\u2460"},{"id":"ref-for-important\u2460\u2461"},{"id":"ref-for-important\u2460\u2462"},{"id":"ref-for-important\u2460\u2463"},{"id":"ref-for-important\u2460\u2464"},{"id":"ref-for-important\u2460\u2465"},{"id":"ref-for-important\u2460\u2466"}],"title":"6.3. \nImportant Declarations: the !important annotation"},{"refs":[{"id":"ref-for-important\u2460\u2467"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-important\u2460\u2468"},{"id":"ref-for-important\u2461\u24ea"},{"id":"ref-for-important\u2461\u2460"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"#important"}, "inherited-property": {"dfnID":"inherited-property","dfnText":"inherited properties","external":false,"refSections":[{"refs":[{"id":"ref-for-inherited-property"}],"title":"7. \nDefaulting"},{"refs":[{"id":"ref-for-inherited-property\u2460"}],"title":"7.1. \nInitial Values"},{"refs":[{"id":"ref-for-inherited-property\u2461"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"}],"url":"#inherited-property"}, "inherited-value": {"dfnID":"inherited-value","dfnText":"inherited value","external":false,"refSections":[{"refs":[{"id":"ref-for-inherited-value"}],"title":"7.2. \nInheritance"},{"refs":[{"id":"ref-for-inherited-value\u2460"}],"title":"7.3.2. \nExplicit Inheritance: the inherit keyword"}],"url":"#inherited-value"}, "initial-value": {"dfnID":"initial-value","dfnText":"initial value","external":false,"refSections":[{"refs":[{"id":"ref-for-initial-value"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-initial-value\u2460"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-initial-value\u2461"}],"title":"7. \nDefaulting"},{"refs":[{"id":"ref-for-initial-value\u2462"}],"title":"7.1. \nInitial Values"},{"refs":[{"id":"ref-for-initial-value\u2463"}],"title":"7.2. \nInheritance"},{"refs":[{"id":"ref-for-initial-value\u2464"},{"id":"ref-for-initial-value\u2465"}],"title":"7.3.1. \nResetting a Property: the initial keyword"}],"url":"#initial-value"}, "layer-name": {"dfnID":"layer-name","dfnText":"layer name","external":false,"refSections":[{"refs":[{"id":"ref-for-layer-name"},{"id":"ref-for-layer-name\u2460"}],"title":"6.4.2. \nLayer Naming and Nesting"},{"refs":[{"id":"ref-for-layer-name\u2461"}],"title":"6.4.2.1. \nAnonymous Layers"},{"refs":[{"id":"ref-for-layer-name\u2462"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"},{"refs":[{"id":"ref-for-layer-name\u2463"}],"title":"8.1. \nThe CSSLayerBlockRule interface"},{"refs":[{"id":"ref-for-layer-name\u2464"}],"title":"8.2. \nThe CSSLayerStatementRule interface"}],"url":"#layer-name"}, "legacy-name-alias": {"dfnID":"legacy-name-alias","dfnText":"legacy name aliases","external":false,"refSections":[{"refs":[{"id":"ref-for-legacy-name-alias"}],"title":"3.1. \nProperty Aliasing"}],"url":"#legacy-name-alias"}, "legacy-shorthand": {"dfnID":"legacy-shorthand","dfnText":"legacy shorthands","external":false,"refSections":[{"refs":[{"id":"ref-for-legacy-shorthand"},{"id":"ref-for-legacy-shorthand\u2460"}],"title":"3.1. \nProperty Aliasing"}],"url":"#legacy-shorthand"}, "longhand": {"dfnID":"longhand","dfnText":"longhand sub-properties","external":false,"refSections":[{"refs":[{"id":"ref-for-longhand"},{"id":"ref-for-longhand\u2460"},{"id":"ref-for-longhand\u2461"},{"id":"ref-for-longhand\u2462"},{"id":"ref-for-longhand\u2463"},{"id":"ref-for-longhand\u2464"},{"id":"ref-for-longhand\u2465"},{"id":"ref-for-longhand\u2466"},{"id":"ref-for-longhand\u2467"},{"id":"ref-for-longhand\u2468"}],"title":"3. \nShorthand Properties"}],"url":"#longhand"}, "normal": {"dfnID":"normal","dfnText":"normal","external":false,"refSections":[{"refs":[{"id":"ref-for-normal"},{"id":"ref-for-normal\u2460"},{"id":"ref-for-normal\u2461"},{"id":"ref-for-normal\u2462"},{"id":"ref-for-normal\u2463"},{"id":"ref-for-normal\u2464"},{"id":"ref-for-normal\u2465"},{"id":"ref-for-normal\u2466"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-normal\u2467"}],"title":"6.3. \nImportant Declarations: the !important annotation"},{"refs":[{"id":"ref-for-normal\u2468"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"#normal"}, "origin": {"dfnID":"origin","dfnText":"cascade origin","external":false,"refSections":[{"refs":[{"id":"ref-for-origin"},{"id":"ref-for-origin\u2460"}],"title":"2.2. \nProcessing Stylesheet Imports"},{"refs":[{"id":"ref-for-origin\u2461"},{"id":"ref-for-origin\u2462"},{"id":"ref-for-origin\u2463"},{"id":"ref-for-origin\u2464"},{"id":"ref-for-origin\u2465"},{"id":"ref-for-origin\u2466"}],"title":"6.1. \nCascade Sorting Order"},{"refs":[{"id":"ref-for-origin\u2467"},{"id":"ref-for-origin\u2468"}],"title":"6.2. \nCascading Origins"},{"refs":[{"id":"ref-for-origin\u2460\u24ea"}],"title":"6.4. \nCascade Layers"},{"refs":[{"id":"ref-for-origin\u2460\u2460"}],"title":"6.4.3. \nLayer Ordering"},{"refs":[{"id":"ref-for-origin\u2460\u2461"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-origin\u2460\u2462"},{"id":"ref-for-origin\u2460\u2463"},{"id":"ref-for-origin\u2460\u2464"},{"id":"ref-for-origin\u2460\u2465"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-origin\u2460\u2466"},{"id":"ref-for-origin\u2460\u2467"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"#origin"}, "output-of-the-cascade": {"dfnID":"output-of-the-cascade","dfnText":"output of the cascade","external":false,"refSections":[{"refs":[{"id":"ref-for-output-of-the-cascade"},{"id":"ref-for-output-of-the-cascade\u2460"}],"title":"4.2. \nCascaded Values"}],"url":"#output-of-the-cascade"}, "propdef-all": {"dfnID":"propdef-all","dfnText":"all","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-all"},{"id":"ref-for-propdef-all\u2460"},{"id":"ref-for-propdef-all\u2461"}],"title":"3.2. \nResetting All Properties: the all property"},{"refs":[{"id":"ref-for-propdef-all\u2462"}],"title":"9.9. \nAdditions Since Level 2"}],"url":"#propdef-all"}, "reset-only-sub-property": {"dfnID":"reset-only-sub-property","dfnText":"reset-only sub-property","external":false,"refSections":[{"refs":[{"id":"ref-for-reset-only-sub-property"}],"title":"3. \nShorthand Properties"}],"url":"#reset-only-sub-property"}, "shorthand-property": {"dfnID":"shorthand-property","dfnText":"shorthand properties","external":false,"refSections":[{"refs":[{"id":"ref-for-shorthand-property"},{"id":"ref-for-shorthand-property\u2460"},{"id":"ref-for-shorthand-property\u2461"},{"id":"ref-for-shorthand-property\u2462"},{"id":"ref-for-shorthand-property\u2463"},{"id":"ref-for-shorthand-property\u2464"},{"id":"ref-for-shorthand-property\u2465"},{"id":"ref-for-shorthand-property\u2466"},{"id":"ref-for-shorthand-property\u2467"}],"title":"3. \nShorthand Properties"},{"refs":[{"id":"ref-for-shorthand-property\u2468"}],"title":"3.1. \nProperty Aliasing"},{"refs":[{"id":"ref-for-shorthand-property\u2460\u24ea"}],"title":"3.2. \nResetting All Properties: the all property"},{"refs":[{"id":"ref-for-shorthand-property\u2460\u2460"}],"title":"6.3. \nImportant Declarations: the !important annotation"},{"refs":[{"id":"ref-for-shorthand-property\u2460\u2461"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"},{"refs":[{"id":"ref-for-shorthand-property\u2460\u2462"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"}],"url":"#shorthand-property"}, "specified-value": {"dfnID":"specified-value","dfnText":"specified value","external":false,"refSections":[{"refs":[{"id":"ref-for-specified-value"}],"title":"1. \nIntroduction"},{"refs":[{"id":"ref-for-specified-value\u2460"},{"id":"ref-for-specified-value\u2461"},{"id":"ref-for-specified-value\u2462"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-specified-value\u2463"},{"id":"ref-for-specified-value\u2464"},{"id":"ref-for-specified-value\u2465"},{"id":"ref-for-specified-value\u2466"}],"title":"4.3. \nSpecified Values"},{"refs":[{"id":"ref-for-specified-value\u2467"},{"id":"ref-for-specified-value\u2468"},{"id":"ref-for-specified-value\u2460\u24ea"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-specified-value\u2460\u2460"}],"title":"4.8. \nPer-Fragment Value Processing"},{"refs":[{"id":"ref-for-specified-value\u2460\u2461"}],"title":"7. \nDefaulting"},{"refs":[{"id":"ref-for-specified-value\u2460\u2462"}],"title":"7.1. \nInitial Values"},{"refs":[{"id":"ref-for-specified-value\u2460\u2463"}],"title":"7.3.1. \nResetting a Property: the initial keyword"},{"refs":[{"id":"ref-for-specified-value\u2460\u2464"}],"title":"7.3.2. \nExplicit Inheritance: the inherit keyword"},{"refs":[{"id":"ref-for-specified-value\u2460\u2465"},{"id":"ref-for-specified-value\u2460\u2466"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-specified-value\u2460\u2467"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"}],"url":"#specified-value"}, "typedef-import-conditions": {"dfnID":"typedef-import-conditions","dfnText":"<import-conditions>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-import-conditions"},{"id":"ref-for-typedef-import-conditions\u2460"}],"title":"2. \nImporting Style Sheets: the @import rule"}],"url":"#typedef-import-conditions"}, "typedef-layer-name": {"dfnID":"typedef-layer-name","dfnText":"<layer-name>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-layer-name"}],"title":"2. \nImporting Style Sheets: the @import rule"},{"refs":[{"id":"ref-for-typedef-layer-name\u2460"},{"id":"ref-for-typedef-layer-name\u2461"},{"id":"ref-for-typedef-layer-name\u2462"}],"title":"6.4.2. \nLayer Naming and Nesting"},{"refs":[{"id":"ref-for-typedef-layer-name\u2463"},{"id":"ref-for-typedef-layer-name\u2464"},{"id":"ref-for-typedef-layer-name\u2465"}],"title":"6.4.2.1. \nAnonymous Layers"},{"refs":[{"id":"ref-for-typedef-layer-name\u2466"}],"title":"6.4.4.1. \nAssigning Styles Inline: the @layer block at-rule"},{"refs":[{"id":"ref-for-typedef-layer-name\u2467"}],"title":"6.4.4.2. \nDeclaring Without Styles: the @layer statement at-rule"}],"url":"#typedef-layer-name"}, "used-value": {"dfnID":"used-value","dfnText":"used value","external":false,"refSections":[{"refs":[{"id":"ref-for-used-value"},{"id":"ref-for-used-value\u2460"},{"id":"ref-for-used-value\u2461"},{"id":"ref-for-used-value\u2462"}],"title":"4. \nValue Processing"},{"refs":[{"id":"ref-for-used-value\u2463"}],"title":"4.4. \nComputed Values"},{"refs":[{"id":"ref-for-used-value\u2464"},{"id":"ref-for-used-value\u2465"},{"id":"ref-for-used-value\u2466"}],"title":"4.5. \nUsed Values"},{"refs":[{"id":"ref-for-used-value\u2467"},{"id":"ref-for-used-value\u2468"}],"title":"4.6. \nActual Values"}],"url":"#used-value"}, "valdef-all-inherit": {"dfnID":"valdef-all-inherit","dfnText":"inherit","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-all-inherit"}],"title":"7. \nDefaulting"},{"refs":[{"id":"ref-for-valdef-all-inherit\u2460"}],"title":"7.2. \nInheritance"},{"refs":[{"id":"ref-for-valdef-all-inherit\u2461"},{"id":"ref-for-valdef-all-inherit\u2462"}],"title":"7.3.2. \nExplicit Inheritance: the inherit keyword"},{"refs":[{"id":"ref-for-valdef-all-inherit\u2463"},{"id":"ref-for-valdef-all-inherit\u2464"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"}],"url":"#valdef-all-inherit"}, "valdef-all-initial": {"dfnID":"valdef-all-initial","dfnText":"initial","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-all-initial"}],"title":"7. \nDefaulting"},{"refs":[{"id":"ref-for-valdef-all-initial\u2460"},{"id":"ref-for-valdef-all-initial\u2461"}],"title":"7.3.1. \nResetting a Property: the initial keyword"},{"refs":[{"id":"ref-for-valdef-all-initial\u2462"},{"id":"ref-for-valdef-all-initial\u2463"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"},{"refs":[{"id":"ref-for-valdef-all-initial\u2464"}],"title":"9.9. \nAdditions Since Level 2"}],"url":"#valdef-all-initial"}, "valdef-all-revert": {"dfnID":"valdef-all-revert","dfnText":"revert","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-all-revert"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-valdef-all-revert\u2460"}],"title":"7.3. \nExplicit Defaulting"},{"refs":[{"id":"ref-for-valdef-all-revert\u2461"},{"id":"ref-for-valdef-all-revert\u2462"},{"id":"ref-for-valdef-all-revert\u2463"},{"id":"ref-for-valdef-all-revert\u2464"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-valdef-all-revert\u2465"},{"id":"ref-for-valdef-all-revert\u2466"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"},{"refs":[{"id":"ref-for-valdef-all-revert\u2467"}],"title":"9.1. \nChanges since the 13 Jan 2022 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-valdef-all-revert\u2468"}],"title":"9.8. \nAdditions Since Level 3"}],"url":"#valdef-all-revert"}, "valdef-all-revert-layer": {"dfnID":"valdef-all-revert-layer","dfnText":"revert-layer","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-all-revert-layer\u2460"}],"title":"6.5. \nPrecedence of Non-CSS Presentational Hints"},{"refs":[{"id":"ref-for-valdef-all-revert-layer\u2461"}],"title":"7.3. \nExplicit Defaulting"},{"refs":[{"id":"ref-for-valdef-all-revert-layer\u2462"},{"id":"ref-for-valdef-all-revert-layer\u2463"},{"id":"ref-for-valdef-all-revert-layer\u2464"},{"id":"ref-for-valdef-all-revert-layer\u2465"},{"id":"ref-for-valdef-all-revert-layer\u2466"}],"title":"7.3.5. \nRolling Back Cascade Layers: the revert-layer keyword"},{"refs":[{"id":"ref-for-valdef-all-revert-layer\u2467"}],"title":"9.1. \nChanges since the 13 Jan 2022 Candidate Recommendation Snapshot"},{"refs":[{"id":"ref-for-valdef-all-revert-layer\u2468"}],"title":"9.2. \nChanges since the 15 Oct 2021 Working Draft"},{"refs":[{"id":"ref-for-valdef-all-revert-layer\u2460\u24ea"}],"title":"9.6. \nChanges since the 19 January 2021 Working Draft"},{"refs":[{"id":"ref-for-valdef-all-revert-layer\u2460\u2460"}],"title":"9.7. \nAdditions Since Level 4"}],"url":"#valdef-all-revert-layer"}, "valdef-all-unset": {"dfnID":"valdef-all-unset","dfnText":"unset","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-all-unset"},{"id":"ref-for-valdef-all-unset\u2460"}],"title":"7.3.3. \nErasing All Declarations: the unset keyword"},{"refs":[{"id":"ref-for-valdef-all-unset\u2461"}],"title":"7.3.4. \nRolling Back Cascade Origins: the revert keyword"},{"refs":[{"id":"ref-for-valdef-all-unset\u2462"}],"title":"9.9. \nAdditions Since Level 2"}],"url":"#valdef-all-unset"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "https://drafts.csswg.org/css-color-5/#typedef-color": "Expands to: <alpha-value> | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | currentcolor | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | none | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | transparent | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen", "https://drafts.csswg.org/css-values-4/#length-value": "Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw", "https://drafts.csswg.org/css-values-4/#url-value": "Expands to: local url flag", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#actual-value": {"displayText":"actual value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"actual value","type":"dfn","url":"#actual-value"}, "#apply": {"displayText":"apply to","export":true,"for_":["CSS"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"apply to","type":"dfn","url":"#apply"}, "#at-ruledef-import": {"displayText":"@import","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"@import","type":"at-rule","url":"#at-ruledef-import"}, "#at-ruledef-layer": {"displayText":"@layer","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"@layer","type":"at-rule","url":"#at-ruledef-layer"}, "#author-presentational-hint-origin": {"displayText":"author presentational hint origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"author presentational hint origin","type":"dfn","url":"#author-presentational-hint-origin"}, "#cascade": {"displayText":"cascade","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"cascade","type":"dfn","url":"#cascade"}, "#cascade-layers": {"displayText":"cascade layers","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"cascade layers","type":"dfn","url":"#cascade-layers"}, "#cascade-origin-animation": {"displayText":"animation origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"animation origin","type":"dfn","url":"#cascade-origin-animation"}, "#cascade-origin-author": {"displayText":"author origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"author origin","type":"dfn","url":"#cascade-origin-author"}, "#cascade-origin-ua": {"displayText":"user-agent origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"user-agent origin","type":"dfn","url":"#cascade-origin-ua"}, "#cascade-origin-user": {"displayText":"user origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"user origin","type":"dfn","url":"#cascade-origin-user"}, "#cascaded-value": {"displayText":"cascaded value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"cascaded value","type":"dfn","url":"#cascaded-value"}, "#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"computed value","type":"dfn","url":"#computed-value"}, "#css-inheritance": {"displayText":"inheritance","export":true,"for_":["CSS"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"inheritance","type":"dfn","url":"#css-inheritance"}, "#csslayerblockrule": {"displayText":"CSSLayerBlockRule","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"CSSLayerBlockRule","type":"interface","url":"#csslayerblockrule"}, "#csslayerstatementrule": {"displayText":"CSSLayerStatementRule","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"CSSLayerStatementRule","type":"interface","url":"#csslayerstatementrule"}, "#declared-value": {"displayText":"declared value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"declared value","type":"dfn","url":"#declared-value"}, "#dom-csslayerblockrule-name": {"displayText":"name","export":true,"for_":["CSSLayerBlockRule"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"name","type":"attribute","url":"#dom-csslayerblockrule-name"}, "#dom-csslayerstatementrule-namelist": {"displayText":"nameList","export":true,"for_":["CSSLayerStatementRule"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"nameList","type":"attribute","url":"#dom-csslayerstatementrule-namelist"}, "#encapsulation-contexts": {"displayText":"encapsulation contexts","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"encapsulation contexts","type":"dfn","url":"#encapsulation-contexts"}, "#import-conditions": {"displayText":"import conditions","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"import conditions","type":"dfn","url":"#import-conditions"}, "#important": {"displayText":"important","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"important","type":"dfn","url":"#important"}, "#inherited-property": {"displayText":"inherited property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"inherited property","type":"dfn","url":"#inherited-property"}, "#inherited-value": {"displayText":"inherited value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"inherited value","type":"dfn","url":"#inherited-value"}, "#initial-value": {"displayText":"initial value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"initial value","type":"dfn","url":"#initial-value"}, "#layer-name": {"displayText":"layer name","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"layer name","type":"dfn","url":"#layer-name"}, "#legacy-name-alias": {"displayText":"legacy name alias","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"legacy name alias","type":"dfn","url":"#legacy-name-alias"}, "#legacy-shorthand": {"displayText":"legacy shorthand","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"legacy shorthand","type":"dfn","url":"#legacy-shorthand"}, "#longhand": {"displayText":"sub-property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"sub-property","type":"dfn","url":"#longhand"}, "#normal": {"displayText":"normal","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"normal","type":"dfn","url":"#normal"}, "#origin": {"displayText":"cascade origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"cascade origin","type":"dfn","url":"#origin"}, "#output-of-the-cascade": {"displayText":"output of the cascade","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"output of the cascade","type":"dfn","url":"#output-of-the-cascade"}, "#propdef-all": {"displayText":"all","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"all","type":"property","url":"#propdef-all"}, "#reset-only-sub-property": {"displayText":"reset-only sub-property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"reset-only sub-property","type":"dfn","url":"#reset-only-sub-property"}, "#shorthand-property": {"displayText":"shorthand property","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"shorthand property","type":"dfn","url":"#shorthand-property"}, "#specified-value": {"displayText":"specified value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"specified value","type":"dfn","url":"#specified-value"}, "#typedef-import-conditions": {"displayText":"<import-conditions>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"<import-conditions>","type":"type","url":"#typedef-import-conditions"}, "#typedef-layer-name": {"displayText":"<layer-name>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"<layer-name>","type":"type","url":"#typedef-layer-name"}, "#used-value": {"displayText":"used value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"used value","type":"dfn","url":"#used-value"}, "#valdef-all-inherit": {"displayText":"inherit","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"inherit","type":"value","url":"#valdef-all-inherit"}, "#valdef-all-initial": {"displayText":"initial","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"initial","type":"value","url":"#valdef-all-initial"}, "#valdef-all-revert": {"displayText":"revert","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"revert","type":"value","url":"#valdef-all-revert"}, "#valdef-all-revert-layer": {"displayText":"revert-layer","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"revert-layer","type":"value","url":"#valdef-all-revert-layer"}, "#valdef-all-unset": {"displayText":"unset","export":true,"for_":["all"],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"local","text":"unset","type":"value","url":"#valdef-all-unset"}, "https://dom.spec.whatwg.org/#concept-document-quirks": {"displayText":"quirks mode","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"quirks mode","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "https://dom.spec.whatwg.org/#concept-light-tree": {"displayText":"light tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"light tree","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-light-tree"}, "https://dom.spec.whatwg.org/#concept-shadow-including-tree-order": {"displayText":"shadow-including tree order","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"shadow-including tree order","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-shadow-including-tree-order"}, "https://dom.spec.whatwg.org/#concept-shadow-tree": {"displayText":"shadow tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"shadow tree","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-shadow-tree"}, "https://dom.spec.whatwg.org/#connected": {"displayText":"connected","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"connected","type":"dfn","url":"https://dom.spec.whatwg.org/#connected"}, "https://drafts.csswg.org/css-align-3/#valdef-align-self-auto": {"displayText":"auto","export":true,"for_":["align-self"],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-align-3/#valdef-align-self-auto"}, "https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes": {"displayText":"@keyframes","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"current","text":"@keyframes","type":"at-rule","url":"https://drafts.csswg.org/css-animations-1/#at-ruledef-keyframes"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background": {"displayText":"background","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color": {"displayText":"background-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image": {"displayText":"background-image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"background-image","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border": {"displayText":"border","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width": {"displayText":"border-bottom-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-bottom-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color": {"displayText":"border-color","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-color","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-color"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image": {"displayText":"border-image","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-image","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width": {"displayText":"border-left-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width": {"displayText":"border-right-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-right-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style": {"displayText":"border-style","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-style","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-style"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width": {"displayText":"border-top-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "https://drafts.csswg.org/css-backgrounds-3/#valdef-line-style-dotted": {"displayText":"dotted","export":true,"for_":["<line-style>","border-style","border-top-style","border-left-style","border-bottom-style","border-right-style","border"],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"dotted","type":"value","url":"https://drafts.csswg.org/css-backgrounds-3/#valdef-line-style-dotted"}, "https://drafts.csswg.org/css-break-3/#propdef-break-before": {"displayText":"break-before","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"break-before","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-break-before"}, "https://drafts.csswg.org/css-break-3/#propdef-orphans": {"displayText":"orphans","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-break","spec":"css-break-3","status":"current","text":"orphans","type":"property","url":"https://drafts.csswg.org/css-break-3/#propdef-orphans"}, "https://drafts.csswg.org/css-break-4/#box-fragment": {"displayText":"box fragment","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"box fragment","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#box-fragment"}, "https://drafts.csswg.org/css-break-4/#valdef-break-before-page": {"displayText":"page","export":true,"for_":["break-before","break-after"],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"page","type":"value","url":"https://drafts.csswg.org/css-break-4/#valdef-break-before-page"}, "https://drafts.csswg.org/css-color-4/#propdef-color": {"displayText":"color","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"current","text":"color","type":"property","url":"https://drafts.csswg.org/css-color-4/#propdef-color"}, "https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor": {"displayText":"currentcolor","export":true,"for_":["<color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"current","text":"currentcolor","type":"value","url":"https://drafts.csswg.org/css-color-4/#valdef-color-currentcolor"}, "https://drafts.csswg.org/css-color-4/#valdef-color-red": {"displayText":"red","export":true,"for_":["<color>","<named-color>"],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"current","text":"red","type":"value","url":"https://drafts.csswg.org/css-color-4/#valdef-color-red"}, "https://drafts.csswg.org/css-color-5/#typedef-color": {"displayText":"<color>","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-color","spec":"css-color-5","status":"current","text":"<color>","type":"type","url":"https://drafts.csswg.org/css-color-5/#typedef-color"}, "https://drafts.csswg.org/css-conditional-3/#at-ruledef-media": {"displayText":"@media","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"current","text":"@media","type":"at-rule","url":"https://drafts.csswg.org/css-conditional-3/#at-ruledef-media"}, "https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports": {"displayText":"@supports","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"current","text":"@supports","type":"at-rule","url":"https://drafts.csswg.org/css-conditional-3/#at-ruledef-supports"}, "https://drafts.csswg.org/css-conditional-3/#conditional-group-rule": {"displayText":"conditional group rule","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"current","text":"conditional group rule","type":"dfn","url":"https://drafts.csswg.org/css-conditional-3/#conditional-group-rule"}, "https://drafts.csswg.org/css-conditional-3/#typedef-supports-condition": {"displayText":"<supports-condition>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"current","text":"<supports-condition>","type":"type","url":"https://drafts.csswg.org/css-conditional-3/#typedef-supports-condition"}, "https://drafts.csswg.org/css-conditional-3/#typedef-supports-decl": {"displayText":"<supports-decl>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-conditional","spec":"css-conditional-3","status":"current","text":"<supports-decl>","type":"type","url":"https://drafts.csswg.org/css-conditional-3/#typedef-supports-decl"}, "https://drafts.csswg.org/css-conditional-5/#funcdef-supports": {"displayText":"supports()","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-conditional","spec":"css-conditional-5","status":"current","text":"supports()","type":"function","url":"https://drafts.csswg.org/css-conditional-5/#funcdef-supports"}, "https://drafts.csswg.org/css-contain-2/#valdef-contain-layout": {"displayText":"layout","export":true,"for_":["contain"],"level":"2","normative":true,"shortname":"css-contain","spec":"css-contain-2","status":"current","text":"layout","type":"value","url":"https://drafts.csswg.org/css-contain-2/#valdef-contain-layout"}, "https://drafts.csswg.org/css-display-3/#elements": {"displayText":"element","export":false,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"current","text":"element","type":"dfn","url":"https://drafts.csswg.org/css-display-3/#elements"}, "https://drafts.csswg.org/css-display-4/#box": {"displayText":"box","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#box"}, "https://drafts.csswg.org/css-display-4/#display-type": {"displayText":"display type","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display type","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#display-type"}, "https://drafts.csswg.org/css-display-4/#inline-box": {"displayText":"inline box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-box"}, "https://drafts.csswg.org/css-display-4/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "https://drafts.csswg.org/css-display-4/#text-nodes": {"displayText":"text node","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"text node","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#text-nodes"}, "https://drafts.csswg.org/css-flexbox-1/#flex-item": {"displayText":"flex item","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex item","type":"dfn","url":"https://drafts.csswg.org/css-flexbox-1/#flex-item"}, "https://drafts.csswg.org/css-flexbox-1/#propdef-flex": {"displayText":"flex","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-flexbox","spec":"css-flexbox-1","status":"current","text":"flex","type":"property","url":"https://drafts.csswg.org/css-flexbox-1/#propdef-flex"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font": {"displayText":"font","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-family": {"displayText":"font-family","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-family","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-family"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-size": {"displayText":"font-size","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-size","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-size"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-style": {"displayText":"font-style","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-style","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-style"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-variant": {"displayText":"font-variant","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-variant","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-variant"}, "https://drafts.csswg.org/css-fonts-4/#propdef-font-weight": {"displayText":"font-weight","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"font-weight","type":"property","url":"https://drafts.csswg.org/css-fonts-4/#propdef-font-weight"}, "https://drafts.csswg.org/css-fonts-4/#valdef-font-family-sans-serif": {"displayText":"sans-serif","export":true,"for_":["font-family","<generic-family>"],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"sans-serif","type":"value","url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-family-sans-serif"}, "https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic": {"displayText":"italic","export":true,"for_":["font-style"],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"italic","type":"value","url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic"}, "https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bolder": {"displayText":"bolder","export":true,"for_":["font-weight"],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"current","text":"bolder","type":"value","url":"https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bolder"}, "https://drafts.csswg.org/css-fonts-5/#at-font-face-rule": {"displayText":"@font-face","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-fonts","spec":"css-fonts-5","status":"current","text":"@font-face","type":"at-rule","url":"https://drafts.csswg.org/css-fonts-5/#at-font-face-rule"}, "https://drafts.csswg.org/css-fonts-5/#propdef-font-size-adjust": {"displayText":"font-size-adjust","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-fonts","spec":"css-fonts-5","status":"current","text":"font-size-adjust","type":"property","url":"https://drafts.csswg.org/css-fonts-5/#propdef-font-size-adjust"}, "https://drafts.csswg.org/css-inline-3/#root-inline-box": {"displayText":"root inline box","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"current","text":"root inline box","type":"dfn","url":"https://drafts.csswg.org/css-inline-3/#root-inline-box"}, "https://drafts.csswg.org/css-lists-3/#propdef-list-style-position": {"displayText":"list-style-position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-lists","spec":"css-lists-3","status":"current","text":"list-style-position","type":"property","url":"https://drafts.csswg.org/css-lists-3/#propdef-list-style-position"}, "https://drafts.csswg.org/css-logical-1/#logical-property-group": {"displayText":"logical property group","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"current","text":"logical property group","type":"dfn","url":"https://drafts.csswg.org/css-logical-1/#logical-property-group"}, "https://drafts.csswg.org/css-logical-1/#propdef-block-size": {"displayText":"block-size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-logical","spec":"css-logical-1","status":"current","text":"block-size","type":"property","url":"https://drafts.csswg.org/css-logical-1/#propdef-block-size"}, "https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace": {"displayText":"@namespace","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-namespaces","spec":"css-namespaces-3","status":"current","text":"@namespace","type":"at-rule","url":"https://drafts.csswg.org/css-namespaces-3/#at-ruledef-namespace"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-after": {"displayText":"::after","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::after","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-after"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-before": {"displayText":"::before","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::before","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-before"}, "https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line": {"displayText":"::first-line","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"::first-line","type":"selector","url":"https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line"}, "https://drafts.csswg.org/css-scoping-1/#flat-tree": {"displayText":"flat tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scoping","spec":"css-scoping-1","status":"current","text":"flat tree","type":"dfn","url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "https://drafts.csswg.org/css-scoping-1/#tree-context": {"displayText":"tree context","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scoping","spec":"css-scoping-1","status":"current","text":"tree context","type":"dfn","url":"https://drafts.csswg.org/css-scoping-1/#tree-context"}, "https://drafts.csswg.org/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "https://drafts.csswg.org/css-syntax-3/#at-rule": {"displayText":"at-rule","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"at-rule","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#at-rule"}, "https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset": {"displayText":"@charset","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"@charset","type":"at-rule","url":"https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset"}, "https://drafts.csswg.org/css-syntax-3/#block-at-rule": {"displayText":"block at-rule","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"block at-rule","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#block-at-rule"}, "https://drafts.csswg.org/css-syntax-3/#css-property-declarations": {"displayText":"property declarations","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"property declarations","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#css-property-declarations"}, "https://drafts.csswg.org/css-syntax-3/#declaration": {"displayText":"declaration","export":true,"for_":["CSS"],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"declaration","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#declaration"}, "https://drafts.csswg.org/css-syntax-3/#environment-encoding": {"displayText":"environment encoding","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"environment encoding","type":"dfn","url":"https://drafts.csswg.org/css-syntax-3/#environment-encoding"}, "https://drafts.csswg.org/css-syntax-3/#typedef-rule-list": {"displayText":"<rule-list>","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-syntax","spec":"css-syntax-3","status":"current","text":"<rule-list>","type":"type","url":"https://drafts.csswg.org/css-syntax-3/#typedef-rule-list"}, "https://drafts.csswg.org/css-text-3/#propdef-text-align": {"displayText":"text-align","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-text","spec":"css-text-3","status":"current","text":"text-align","type":"property","url":"https://drafts.csswg.org/css-text-3/#propdef-text-align"}, "https://drafts.csswg.org/css-text-4/#propdef-text-indent": {"displayText":"text-indent","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"text-indent","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-text-indent"}, "https://drafts.csswg.org/css-text-4/#propdef-text-transform": {"displayText":"text-transform","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"text-transform","type":"property","url":"https://drafts.csswg.org/css-text-4/#propdef-text-transform"}, "https://drafts.csswg.org/css-ui-4/#valdef-appearance-base": {"displayText":"base","export":true,"for_":["appearance"],"level":"4","normative":true,"shortname":"css-ui","spec":"css-ui-4","status":"current","text":"base","type":"value","url":"https://drafts.csswg.org/css-ui-4/#valdef-appearance-base"}, "https://drafts.csswg.org/css-values-3/#ex": {"displayText":"ex","export":true,"for_":["<length>"],"level":"3","normative":true,"shortname":"css-values","spec":"css-values-3","status":"current","text":"ex","type":"value","url":"https://drafts.csswg.org/css-values-3/#ex"}, "https://drafts.csswg.org/css-values-4/#ch": {"displayText":"ch","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"ch","type":"value","url":"https://drafts.csswg.org/css-values-4/#ch"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-css-identifier": {"displayText":"CSS identifier","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css identifier","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-css-identifier"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-values-4/#em": {"displayText":"em","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"em","type":"value","url":"https://drafts.csswg.org/css-values-4/#em"}, "https://drafts.csswg.org/css-values-4/#funcdef-url": {"displayText":"url()","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"url()","type":"function","url":"https://drafts.csswg.org/css-values-4/#funcdef-url"}, "https://drafts.csswg.org/css-values-4/#length-value": {"displayText":"<length>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length>","type":"type","url":"https://drafts.csswg.org/css-values-4/#length-value"}, "https://drafts.csswg.org/css-values-4/#mult-comma": {"displayText":"#","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"#","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-comma"}, "https://drafts.csswg.org/css-values-4/#mult-opt": {"displayText":"?","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"?","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-opt"}, "https://drafts.csswg.org/css-values-4/#mult-zero-plus": {"displayText":"*","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"*","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#mult-zero-plus"}, "https://drafts.csswg.org/css-values-4/#string-value": {"displayText":"<string>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<string>","type":"type","url":"https://drafts.csswg.org/css-values-4/#string-value"}, "https://drafts.csswg.org/css-values-4/#typedef-ident": {"displayText":"<ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<ident>","type":"type","url":"https://drafts.csswg.org/css-values-4/#typedef-ident"}, "https://drafts.csswg.org/css-values-4/#typedef-length-percentage": {"displayText":"<length-percentage>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<length-percentage>","type":"type","url":"https://drafts.csswg.org/css-values-4/#typedef-length-percentage"}, "https://drafts.csswg.org/css-values-4/#url-value": {"displayText":"<url>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<url>","type":"type","url":"https://drafts.csswg.org/css-values-4/#url-value"}, "https://drafts.csswg.org/css-values-4/#vh": {"displayText":"vh","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"vh","type":"value","url":"https://drafts.csswg.org/css-values-4/#vh"}, "https://drafts.csswg.org/css-values-4/#vw": {"displayText":"vw","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"vw","type":"value","url":"https://drafts.csswg.org/css-values-4/#vw"}, "https://drafts.csswg.org/css-variables-2/#custom-property": {"displayText":"custom property","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-variables","spec":"css-variables-2","status":"current","text":"custom property","type":"dfn","url":"https://drafts.csswg.org/css-variables-2/#custom-property"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi": {"displayText":"unicode-bidi","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"unicode-bidi","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation": {"displayText":"text-orientation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"text-orientation","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing-mode","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "https://drafts.csswg.org/css2/#propdef-line-height": {"displayText":"line-height","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"line-height","type":"property","url":"https://drafts.csswg.org/css2/#propdef-line-height"}, "https://drafts.csswg.org/css2/#propdef-page-break-after": {"displayText":"page-break-after","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"page-break-after","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-after"}, "https://drafts.csswg.org/css2/#propdef-page-break-before": {"displayText":"page-break-before","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"page-break-before","type":"property","url":"https://drafts.csswg.org/css2/#propdef-page-break-before"}, "https://drafts.csswg.org/cssom-1/#cssgroupingrule": {"displayText":"CSSGroupingRule","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"CSSGroupingRule","type":"interface","url":"https://drafts.csswg.org/cssom-1/#cssgroupingrule"}, "https://drafts.csswg.org/cssom-1/#cssomstring": {"displayText":"CSSOMString","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"CSSOMString","type":"interface","url":"https://drafts.csswg.org/cssom-1/#cssomstring"}, "https://drafts.csswg.org/cssom-1/#cssrule": {"displayText":"CSSRule","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"CSSRule","type":"interface","url":"https://drafts.csswg.org/cssom-1/#cssrule"}, "https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations": {"displayText":"declarations","export":true,"for_":["CSSStyleDeclaration"],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"declarations","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#cssstyledeclaration-declarations"}, "https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle": {"displayText":"getComputedStyle(elt)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"getComputedStyle(elt)","type":"method","url":"https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle"}, "https://drafts.csswg.org/mediaqueries-4/#media-query-list": {"displayText":"media query list","export":true,"for_":[],"level":"4","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-4","status":"current","text":"media query list","type":"dfn","url":"https://drafts.csswg.org/mediaqueries-4/#media-query-list"}, "https://drafts.csswg.org/mediaqueries-4/#typedef-media-query": {"displayText":"<media-query>","export":true,"for_":[],"level":"4","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-4","status":"current","text":"<media-query>","type":"type","url":"https://drafts.csswg.org/mediaqueries-4/#typedef-media-query"}, "https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list": {"displayText":"<media-query-list>","export":true,"for_":[],"level":"4","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-4","status":"current","text":"<media-query-list>","type":"type","url":"https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list"}, "https://drafts.csswg.org/selectors-4/#pseudo-element": {"displayText":"pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"pseudo-element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "https://fetch.spec.whatwg.org/#concept-response": {"displayText":"response","export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"response","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-response"}, "https://fetch.spec.whatwg.org/#concept-response-url": {"displayText":"URL","export":true,"for_":["response"],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"url","type":"dfn","url":"https://fetch.spec.whatwg.org/#concept-response-url"}, "https://fetch.spec.whatwg.org/#cors-protocol": {"displayText":"CORS protocol","export":true,"for_":[],"level":"1","normative":true,"shortname":"fetch","spec":"fetch","status":"current","text":"cors protocol","type":"dfn","url":"https://fetch.spec.whatwg.org/#cors-protocol"}, "https://html.spec.whatwg.org/multipage/browsers.html#same-origin": {"displayText":"same origin","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"same origin","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsers.html#same-origin"}, "https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element": {"displayText":"div","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"div","type":"element","url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element"}, "https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element": {"displayText":"p","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"p","type":"element","url":"https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element"}, "https://html.spec.whatwg.org/multipage/media.html#audio": {"displayText":"audio","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"audio","type":"element","url":"https://html.spec.whatwg.org/multipage/media.html#audio"}, "https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element": {"displayText":"slot","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"slot","type":"element","url":"https://html.spec.whatwg.org/multipage/scripting.html#the-slot-element"}, "https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element": {"displayText":"s","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"s","type":"element","url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element"}, "https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element": {"displayText":"span","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"span","type":"element","url":"https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-span-element"}, "https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type": {"displayText":"Content-Type metadata","export":false,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"content-type metadata","type":"dfn","url":"https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type"}, "https://webidl.spec.whatwg.org/#Exposed": {"displayText":"Exposed","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Exposed","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#Exposed"}, "https://webidl.spec.whatwg.org/#idl-frozen-array": {"displayText":"FrozenArray","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"FrozenArray","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-frozen-array"}, "https://www.w3.org/TR/CSS21/selector.html#x22": {"displayText":"pseudo-elements","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"current","text":"pseudo-elements","type":"dfn","url":"https://www.w3.org/TR/CSS21/selector.html#x22"}, "https://www.w3.org/TR/css-pseudo-4/#tree-abiding": {"displayText":"tree-abiding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"snapshot","text":"tree-abiding","type":"dfn","url":"https://www.w3.org/TR/css-pseudo-4/#tree-abiding"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>