[{"data":1,"prerenderedAt":3069},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002F":3,"content-all-pages":2809},{"id":4,"title":5,"body":6,"description":2789,"extension":2790,"meta":2791,"navigation":596,"path":2805,"seo":2806,"stem":2807,"__hash__":2808},"content\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Findex.md","Style Queries and Container State: Token-Driven Component Variants",{"type":7,"value":8,"toc":2768},"minimark",[9,13,42,127,133,152,155,160,163,204,206,210,220,227,252,264,269,282,293,295,299,456,484,486,490,494,497,631,634,638,641,781,785,794,957,960,964,968,971,1247,1250,1253,1255,1259,1262,1547,2207,2227,2234,2236,2240,2250,2261,2284,2298,2313,2315,2319,2387,2389,2393,2505,2524,2526,2530,2619,2621,2625,2641,2660,2666,2675,2677,2681,2724,2726,2730,2764],[10,11,5],"h1",{"id":12},"style-queries-and-container-state-token-driven-component-variants",[14,15,16,17,21,22,26,27,30,31,36,37,41],"p",{},"Size queries let a component read how much room it has. Style queries let it read what it has been ",[18,19,20],"em",{},"told"," — a value sitting in a custom property somewhere above it in the tree. This guide covers the ",[23,24,25],"code",{},"style()"," half of the ",[23,28,29],{},"@container"," at-rule and belongs to the ",[32,33,35],"a",{"href":34},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide, extending the mechanics introduced in ",[32,38,40],{"href":39},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002F","Container Query Syntax Basics",". The payoff is architectural: a component can carry every one of its variants in one stylesheet, activated by a single inherited token, with no variant class threaded through the markup and no JavaScript deciding which class to apply.",[43,44,50,51,50,55,50,59,50,66,50,77,50,82,50,87,50,97,50,102,50,107,50,112,50,116,50,122],"svg",{"viewBox":45,"role":46,"ariaLabel":47,"xmlns":48,"style":49},"0 0 720 360","img","A custom property declared on an ancestor inherits down and is matched by a style query on a descendant","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[52,53,54],"title",{},"How a style query resolves against an ancestor",[56,57,58],"desc",{},"A token declared on an outer region inherits through an untyped wrapper and is matched by a descendant's style query.",[60,61,65],"text",{"x":62,"y":63,"style":64},"360","30","text-anchor:middle;fill:currentColor;font:700 18px sans-serif","Style query resolution",[67,68],"rect",{"x":69,"y":70,"width":71,"height":72,"rx":73,"fill":74,"opacity":75,"stroke":74,"strokeWidth":76},"60","56","600","76","10","#7aa2ff","0.16","1.5",[60,78,81],{"x":62,"y":79,"style":80},"84","text-anchor:middle;fill:currentColor;font:600 14px sans-serif","ancestor region declares the token",[60,83,86],{"x":62,"y":84,"style":85},"108","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace;opacity:0.9","--theme: dusk",[67,88],{"x":89,"y":90,"width":91,"height":92,"rx":93,"fill":94,"stroke":95,"strokeWidth":76,"opacity":96},"140","152","440","58","8","none","currentColor","0.5",[60,98,101],{"x":62,"y":99,"style":100},"187","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.75","wrapper: inherits, declares nothing",[67,103],{"x":104,"y":105,"width":106,"height":72,"rx":93,"fill":94,"stroke":95,"strokeWidth":76},"200","230","320",[60,108,111],{"x":62,"y":109,"style":110},"258","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.85","queried element",[60,113,115],{"x":62,"y":114,"style":85},"284","style(--theme: dusk)",[60,117,121],{"x":118,"y":119,"style":120},"700","186","text-anchor:end;fill:#7aa2ff;font:11px sans-serif","inherits downward",[60,123,126],{"x":62,"y":124,"style":125},"340","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.7","an element never matches a token it declares on itself",[14,128,129],{},[130,131,132],"strong",{},"What this guide covers:",[134,135,136,143,146,149],"ul",{},[137,138,139,140,142],"li",{},"The evaluation model that separates ",[23,141,25],{}," from size conditions",[137,144,145],{},"Why current implementations accept custom properties only",[137,147,148],{},"Declaring, inheriting, and matching state tokens",[137,150,151],{},"Replacing variant class permutations with a single token axis",[153,154],"hr",{},[156,157,159],"h2",{"id":158},"prerequisites","Prerequisites",[14,161,162],{},"Before working through the code here, you should be comfortable with:",[134,164,165,171,178,189,192],{},[137,166,167,168,170],{},"The ",[23,169,29],{}," at-rule and how a query names or omits a container.",[137,172,173,174,177],{},"Custom property declaration and inheritance — that ",[23,175,176],{},"--x"," set on an element flows to every descendant until redeclared.",[137,179,180,181,184,185,188],{},"The difference between a ",[18,182,183],{},"declared"," value and a ",[18,186,187],{},"computed"," value, since style queries match computed values.",[137,190,191],{},"Basic cascade reasoning: specificity, source order, and the fact that at-rules do not contribute specificity.",[137,193,194,195,198,199,203],{},"Optionally, ",[23,196,197],{},"container-type"," semantics as covered in ",[32,200,202],{"href":201},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size\u002F","container-type: size vs inline-size"," — useful context, though style queries do not require it.",[153,205],{},[156,207,209],{"id":208},"core-concept-querying-state-instead-of-space","Core concept: querying state instead of space",[14,211,212,213,216,217,219],{},"A size query asks a geometric question — ",[18,214,215],{},"is the container at least 400 pixels wide?"," The engine must lay the container out before it can answer, which is why size containment is required and why ",[23,218,197],{}," exists at all.",[14,221,222,223,226],{},"A style query asks a completely different question — ",[18,224,225],{},"does the container's computed value for this property equal this value?"," No layout is involved. The answer depends only on style computation, which happens earlier in the rendering pipeline and does not require the container to have been sized, contained, or even rendered.",[14,228,229,230,233,234,236,237,240,241,243,244,247,248,251],{},"That difference has one immediate and frequently surprising consequence: ",[130,231,232],{},"every element is a style container by default."," The initial value of ",[23,235,197],{}," is ",[23,238,239],{},"normal",", and ",[23,242,239],{}," still establishes a style query container. You do not opt in. A bare ",[23,245,246],{},"@container style(--tone: warning) { … }"," inside a rule set resolves against the ",[18,249,250],{},"parent"," of each matched element, because the parent is the nearest ancestor and every ancestor qualifies.",[14,253,254,255,258,259,263],{},"The spec language is worth internalising: a style query is evaluated against the nearest ancestor ",[18,256,257],{},"style query container",", and a query container never includes the element being styled. The element's own declarations are invisible to its own query. This is not a quirk to work around; it is what makes the mechanism safe, since self-matching would create trivially circular style dependencies where a rule's outcome changes the value the rule tested. The mechanics of that ancestor rule, and the mistakes it produces, are worked through in detail in ",[32,260,262],{"href":261},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties\u002F","style queries with custom properties",".",[265,266,268],"h3",{"id":267},"the-custom-property-only-limitation","The custom-property-only limitation",[14,270,271,272,274,275,278,279,281],{},"CSS Conditional Rules Level 5 defines ",[23,273,25],{}," to accept any declaration, including standard properties: ",[23,276,277],{},"@container style(font-style: italic)"," is valid in the specification. No shipping engine implements that. As of mid-2026 Chromium, Gecko, and WebKit all restrict ",[23,280,25],{}," to custom properties, and a query naming a standard property simply never matches — it does not throw, warn, or fall back. It silently evaluates false.",[14,283,284,285,288,289,292],{},"Treat that as a design constraint rather than a temporary gap. Even when standard-property queries land, routing component state through explicit tokens is the more legible pattern: ",[23,286,287],{},"--density: compact"," states intent, whereas ",[23,290,291],{},"padding: 4px"," states an outcome and invites brittle coupling between a component's internals and the rules that test them.",[153,294],{},[156,296,298],{"id":297},"syntax-and-parameters","Syntax and parameters",[300,301,302,318],"table",{},[303,304,305],"thead",{},[306,307,308,312,315],"tr",{},[309,310,311],"th",{},"Token",[309,313,314],{},"Accepted values",[309,316,317],{},"Default \u002F notes",[319,320,321,338,351,362,375,388,404,424,440],"tbody",{},[306,322,323,329,335],{},[324,325,326],"td",{},[23,327,328],{},"style( … )",[324,330,331,332],{},"A single declaration: ",[23,333,334],{},"--name: value",[324,336,337],{},"The only query function that reads computed style",[306,339,340,345,348],{},[324,341,342],{},[23,343,344],{},"--name",[324,346,347],{},"Any custom property name",[324,349,350],{},"Standard property names parse but never match in shipping engines",[306,352,353,356,359],{},[324,354,355],{},"value",[324,357,358],{},"Any token sequence; compared after computation",[324,360,361],{},"Matching is on computed value, whitespace-normalised",[306,363,364,369,372],{},[324,365,366],{},[23,367,368],{},"style(--name)",[324,370,371],{},"Boolean form — property has a value other than its initial",[324,373,374],{},"Guaranteed-invalid values (unset custom properties) fail",[306,376,377,382,385],{},[324,378,379],{},[23,380,381],{},"not style( … )",[324,383,384],{},"Negation of a single query",[324,386,387],{},"Useful for expressing a default branch",[306,389,390,395,398],{},[324,391,392],{},[23,393,394],{},"style(a) and style(b)",[324,396,397],{},"Conjunction",[324,399,400,401,403],{},"Each ",[23,402,25],{}," wraps exactly one declaration",[306,405,406,411,414],{},[324,407,408],{},[23,409,410],{},"style(a) or style(b)",[324,412,413],{},"Disjunction",[324,415,416,417,420,421],{},"Parenthesise when mixing ",[23,418,419],{},"and"," with ",[23,422,423],{},"or",[306,425,426,429,434],{},[324,427,428],{},"container name",[324,430,431],{},[23,432,433],{},"@container card style(--x: y)",[324,435,436,437],{},"Restricts resolution to the nearest ancestor with that ",[23,438,439],{},"container-name",[306,441,442,446,451],{},[324,443,444],{},[23,445,197],{},[324,447,448,449],{},"Not required for ",[23,450,25],{},[324,452,453,455],{},[23,454,239],{}," (the initial value) already qualifies as a style container",[14,457,458,459,461,462,465,466,469,470,473,474,477,478,480,481,483],{},"Two syntax details cause most parse-time confusion. First, each ",[23,460,25],{}," holds exactly one declaration — ",[23,463,464],{},"style(--a: 1; --b: 2)"," is invalid; write ",[23,467,468],{},"style(--a: 1) and style(--b: 2)",". Second, mixing size and style conditions in one query is allowed and often useful: ",[23,471,472],{},"@container card (min-width: 400px) and style(--variant: feature)"," resolves the size half against the nearest ancestor named ",[23,475,476],{},"card"," that has a ",[23,479,197],{},", and the style half against the nearest ancestor named ",[23,482,476],{}," regardless.",[153,485],{},[156,487,489],{"id":488},"step-by-step-implementation","Step-by-step implementation",[265,491,493],{"id":492},"step-1-declare-the-token-where-the-decision-belongs","Step 1 — Declare the token where the decision belongs",[14,495,496],{},"Put the custom property on whichever element owns the decision. For a component-level variant that is the component root; for a page-region theme it is the region wrapper. Always give it a default so the query has something deterministic to read.",[498,499,504],"pre",{"className":500,"code":501,"language":502,"meta":503,"style":503},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".card {\n  --variant: comfortable; \u002F* every card has a defined value from the start *\u002F\n  border: 1px solid #d7dce5;\n  border-radius: 10px;\n  background: #fff;\n}\n\n.card--compact { --variant: compact; }\n.card--feature { --variant: feature; }\n","css","",[23,505,506,519,533,558,572,585,591,598,618],{"__ignoreMap":503},[507,508,511,515],"span",{"class":509,"line":510},"line",1,[507,512,514],{"class":513},"s-5SL",".card",[507,516,518],{"class":517},"suds8"," {\n",[507,520,522,526,529],{"class":509,"line":521},2,[507,523,525],{"class":524},"soyes","  --variant",[507,527,528],{"class":517},": comfortable; ",[507,530,532],{"class":531},"sLBg1","\u002F* every card has a defined value from the start *\u002F\n",[507,534,536,539,542,545,549,552,555],{"class":509,"line":535},3,[507,537,538],{"class":513},"  border",[507,540,541],{"class":517},": ",[507,543,544],{"class":513},"1",[507,546,548],{"class":547},"sHUrx","px",[507,550,551],{"class":513}," solid",[507,553,554],{"class":513}," #d7dce5",[507,556,557],{"class":517},";\n",[507,559,561,564,566,568,570],{"class":509,"line":560},4,[507,562,563],{"class":513},"  border-radius",[507,565,541],{"class":517},[507,567,73],{"class":513},[507,569,548],{"class":547},[507,571,557],{"class":517},[507,573,575,578,580,583],{"class":509,"line":574},5,[507,576,577],{"class":513},"  background",[507,579,541],{"class":517},[507,581,582],{"class":513},"#fff",[507,584,557],{"class":517},[507,586,588],{"class":509,"line":587},6,[507,589,590],{"class":517},"}\n",[507,592,594],{"class":509,"line":593},7,[507,595,597],{"emptyLinePlaceholder":596},true,"\n",[507,599,601,604,607,610,612,615],{"class":509,"line":600},8,[507,602,603],{"class":513},".card--compact",[507,605,606],{"class":517}," { ",[507,608,609],{"class":524},"--variant",[507,611,541],{"class":517},[507,613,614],{"class":513},"compact",[507,616,617],{"class":517},"; }\n",[507,619,621,624,626,628],{"class":509,"line":620},9,[507,622,623],{"class":513},".card--feature",[507,625,606],{"class":517},[507,627,609],{"class":524},[507,629,630],{"class":517},": feature; }\n",[14,632,633],{},"The modifier classes here set nothing but a token. They carry no visual declarations, so they never enter a specificity contest with the rules that respond to them.",[265,635,637],{"id":636},"step-2-write-the-default-appearance-with-no-query-at-all","Step 2 — Write the default appearance with no query at all",[14,639,640],{},"Everything outside a query is what the component looks like when no token matches — in an unsupporting engine, or when the token holds an unrecognised value. Make this branch complete and correct on its own.",[498,642,644],{"className":500,"code":643,"language":502,"meta":503,"style":503},".card__body { padding: 1rem; color: #101828; }\n.card__title { margin: 0 0 .25rem; font: 600 1rem\u002F1.3 system-ui, sans-serif; }\n.card__meta { margin: 0; color: #667085; font: 400 .8rem\u002F1.4 ui-monospace, monospace; }\n",[23,645,646,676,730],{"__ignoreMap":503},[507,647,648,651,653,656,658,660,663,666,669,671,674],{"class":509,"line":510},[507,649,650],{"class":513},".card__body",[507,652,606],{"class":517},[507,654,655],{"class":513},"padding",[507,657,541],{"class":517},[507,659,544],{"class":513},[507,661,662],{"class":547},"rem",[507,664,665],{"class":517},"; ",[507,667,668],{"class":513},"color",[507,670,541],{"class":517},[507,672,673],{"class":513},"#101828",[507,675,617],{"class":517},[507,677,678,681,683,686,688,691,694,697,699,701,704,706,708,711,713,716,719,722,725,728],{"class":509,"line":521},[507,679,680],{"class":513},".card__title",[507,682,606],{"class":517},[507,684,685],{"class":513},"margin",[507,687,541],{"class":517},[507,689,690],{"class":513},"0",[507,692,693],{"class":513}," 0",[507,695,696],{"class":513}," .25",[507,698,662],{"class":547},[507,700,665],{"class":517},[507,702,703],{"class":513},"font",[507,705,541],{"class":517},[507,707,71],{"class":513},[507,709,710],{"class":513}," 1",[507,712,662],{"class":547},[507,714,715],{"class":517},"\u002F",[507,717,718],{"class":513},"1.3",[507,720,721],{"class":513}," system-ui",[507,723,724],{"class":517},", ",[507,726,727],{"class":513},"sans-serif",[507,729,617],{"class":517},[507,731,732,735,737,739,741,743,745,747,749,752,754,756,758,761,764,766,768,771,774,776,779],{"class":509,"line":535},[507,733,734],{"class":513},".card__meta",[507,736,606],{"class":517},[507,738,685],{"class":513},[507,740,541],{"class":517},[507,742,690],{"class":513},[507,744,665],{"class":517},[507,746,668],{"class":513},[507,748,541],{"class":517},[507,750,751],{"class":513},"#667085",[507,753,665],{"class":517},[507,755,703],{"class":513},[507,757,541],{"class":517},[507,759,760],{"class":513},"400",[507,762,763],{"class":513}," .8",[507,765,662],{"class":547},[507,767,715],{"class":517},[507,769,770],{"class":513},"1.4",[507,772,773],{"class":513}," ui-monospace",[507,775,724],{"class":517},[507,777,778],{"class":513},"monospace",[507,780,617],{"class":517},[265,782,784],{"id":783},"step-3-add-one-query-block-per-token-value","Step 3 — Add one query block per token value",[14,786,787,788,790,791,793],{},"Each block reads the token from the nearest ancestor. Because ",[23,789,650],{}," is a child of ",[23,792,514],{},", the token declared in step 1 is exactly one hop away.",[498,795,797],{"className":500,"code":796,"language":502,"meta":503,"style":503},"@container style(--variant: compact) {\n  .card__body { padding: .5rem .75rem; display: flex; align-items: baseline; gap: .6rem; }\n  .card__title { margin: 0; font-size: .9rem; }\n}\n\n@container style(--variant: feature) {\n  .card__body { padding: 1.4rem; border-left: 4px solid #7aa2ff; }\n  .card__title { font-size: 1.35rem; }\n}\n",[23,798,799,806,861,888,892,896,903,936,953],{"__ignoreMap":503},[507,800,801,803],{"class":509,"line":510},[507,802,29],{"class":547},[507,804,805],{"class":517}," style(--variant: compact) {\n",[507,807,808,811,813,815,817,820,822,825,827,829,832,834,837,839,842,844,847,849,852,854,857,859],{"class":509,"line":521},[507,809,810],{"class":513},"  .card__body",[507,812,606],{"class":517},[507,814,655],{"class":513},[507,816,541],{"class":517},[507,818,819],{"class":513},".5",[507,821,662],{"class":547},[507,823,824],{"class":513}," .75",[507,826,662],{"class":547},[507,828,665],{"class":517},[507,830,831],{"class":513},"display",[507,833,541],{"class":517},[507,835,836],{"class":513},"flex",[507,838,665],{"class":517},[507,840,841],{"class":513},"align-items",[507,843,541],{"class":517},[507,845,846],{"class":513},"baseline",[507,848,665],{"class":517},[507,850,851],{"class":513},"gap",[507,853,541],{"class":517},[507,855,856],{"class":513},".6",[507,858,662],{"class":547},[507,860,617],{"class":517},[507,862,863,866,868,870,872,874,876,879,881,884,886],{"class":509,"line":535},[507,864,865],{"class":513},"  .card__title",[507,867,606],{"class":517},[507,869,685],{"class":513},[507,871,541],{"class":517},[507,873,690],{"class":513},[507,875,665],{"class":517},[507,877,878],{"class":513},"font-size",[507,880,541],{"class":517},[507,882,883],{"class":513},".9",[507,885,662],{"class":547},[507,887,617],{"class":517},[507,889,890],{"class":509,"line":560},[507,891,590],{"class":517},[507,893,894],{"class":509,"line":574},[507,895,597],{"emptyLinePlaceholder":596},[507,897,898,900],{"class":509,"line":587},[507,899,29],{"class":547},[507,901,902],{"class":517}," style(--variant: feature) {\n",[507,904,905,907,909,911,913,915,917,919,922,924,927,929,931,934],{"class":509,"line":593},[507,906,810],{"class":513},[507,908,606],{"class":517},[507,910,655],{"class":513},[507,912,541],{"class":517},[507,914,770],{"class":513},[507,916,662],{"class":547},[507,918,665],{"class":517},[507,920,921],{"class":513},"border-left",[507,923,541],{"class":517},[507,925,926],{"class":513},"4",[507,928,548],{"class":547},[507,930,551],{"class":513},[507,932,933],{"class":513}," #7aa2ff",[507,935,617],{"class":517},[507,937,938,940,942,944,946,949,951],{"class":509,"line":600},[507,939,865],{"class":513},[507,941,606],{"class":517},[507,943,878],{"class":513},[507,945,541],{"class":517},[507,947,948],{"class":513},"1.35",[507,950,662],{"class":547},[507,952,617],{"class":517},[507,954,955],{"class":509,"line":620},[507,956,590],{"class":517},[14,958,959],{},"Drag your eye across the three cards below — the markup for all three is identical apart from one class that sets one custom property.",[961,962],"live-demo",{"name":963},"style-queries-variant-token",[265,965,967],{"id":966},"step-4-combine-with-a-size-condition-where-both-matter","Step 4 — Combine with a size condition where both matter",[14,969,970],{},"Size and style answer different questions, so let each own what it is good at: geometry from the size query, intent from the token.",[498,972,974],{"className":500,"code":973,"language":502,"meta":503,"style":503},".panel {\n  --tone: neutral;\n  container-type: inline-size; \u002F* required for the size half only *\u002F\n  border: 1px solid #d7dce5;\n  border-radius: 10px;\n  background: #fff;\n  padding: 1rem;\n}\n.panel--alert { --tone: alert; }\n\n.panel__inner { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }\n\n\u002F* Geometry *\u002F\n@container (min-width: 380px) {\n  .panel__inner { flex-direction: row; align-items: center; gap: 1rem; }\n}\n\n\u002F* Intent *\u002F\n@container style(--tone: alert) {\n  .panel__badge { background: #7aa2ff; color: #10182b; }\n  .panel__text { font-weight: 600; }\n}\n",[23,975,976,983,991,1002,1018,1030,1040,1053,1057,1070,1075,1120,1125,1131,1139,1175,1180,1185,1191,1199,1225,1242],{"__ignoreMap":503},[507,977,978,981],{"class":509,"line":510},[507,979,980],{"class":513},".panel",[507,982,518],{"class":517},[507,984,985,988],{"class":509,"line":521},[507,986,987],{"class":524},"  --tone",[507,989,990],{"class":517},": neutral;\n",[507,992,993,996,999],{"class":509,"line":535},[507,994,995],{"class":513},"  container-type",[507,997,998],{"class":517},": inline-size; ",[507,1000,1001],{"class":531},"\u002F* required for the size half only *\u002F\n",[507,1003,1004,1006,1008,1010,1012,1014,1016],{"class":509,"line":560},[507,1005,538],{"class":513},[507,1007,541],{"class":517},[507,1009,544],{"class":513},[507,1011,548],{"class":547},[507,1013,551],{"class":513},[507,1015,554],{"class":513},[507,1017,557],{"class":517},[507,1019,1020,1022,1024,1026,1028],{"class":509,"line":574},[507,1021,563],{"class":513},[507,1023,541],{"class":517},[507,1025,73],{"class":513},[507,1027,548],{"class":547},[507,1029,557],{"class":517},[507,1031,1032,1034,1036,1038],{"class":509,"line":587},[507,1033,577],{"class":513},[507,1035,541],{"class":517},[507,1037,582],{"class":513},[507,1039,557],{"class":517},[507,1041,1042,1045,1047,1049,1051],{"class":509,"line":593},[507,1043,1044],{"class":513},"  padding",[507,1046,541],{"class":517},[507,1048,544],{"class":513},[507,1050,662],{"class":547},[507,1052,557],{"class":517},[507,1054,1055],{"class":509,"line":600},[507,1056,590],{"class":517},[507,1058,1059,1062,1064,1067],{"class":509,"line":620},[507,1060,1061],{"class":513},".panel--alert",[507,1063,606],{"class":517},[507,1065,1066],{"class":524},"--tone",[507,1068,1069],{"class":517},": alert; }\n",[507,1071,1073],{"class":509,"line":1072},10,[507,1074,597],{"emptyLinePlaceholder":596},[507,1076,1078,1081,1083,1085,1087,1089,1091,1094,1096,1099,1101,1103,1105,1108,1110,1112,1114,1116,1118],{"class":509,"line":1077},11,[507,1079,1080],{"class":513},".panel__inner",[507,1082,606],{"class":517},[507,1084,831],{"class":513},[507,1086,541],{"class":517},[507,1088,836],{"class":513},[507,1090,665],{"class":517},[507,1092,1093],{"class":513},"flex-direction",[507,1095,541],{"class":517},[507,1097,1098],{"class":513},"column",[507,1100,665],{"class":517},[507,1102,841],{"class":513},[507,1104,541],{"class":517},[507,1106,1107],{"class":513},"flex-start",[507,1109,665],{"class":517},[507,1111,851],{"class":513},[507,1113,541],{"class":517},[507,1115,856],{"class":513},[507,1117,662],{"class":547},[507,1119,617],{"class":517},[507,1121,1123],{"class":509,"line":1122},12,[507,1124,597],{"emptyLinePlaceholder":596},[507,1126,1128],{"class":509,"line":1127},13,[507,1129,1130],{"class":531},"\u002F* Geometry *\u002F\n",[507,1132,1134,1136],{"class":509,"line":1133},14,[507,1135,29],{"class":547},[507,1137,1138],{"class":517}," (min-width: 380px) {\n",[507,1140,1142,1145,1147,1149,1151,1154,1156,1158,1160,1163,1165,1167,1169,1171,1173],{"class":509,"line":1141},15,[507,1143,1144],{"class":513},"  .panel__inner",[507,1146,606],{"class":517},[507,1148,1093],{"class":513},[507,1150,541],{"class":517},[507,1152,1153],{"class":513},"row",[507,1155,665],{"class":517},[507,1157,841],{"class":513},[507,1159,541],{"class":517},[507,1161,1162],{"class":513},"center",[507,1164,665],{"class":517},[507,1166,851],{"class":513},[507,1168,541],{"class":517},[507,1170,544],{"class":513},[507,1172,662],{"class":547},[507,1174,617],{"class":517},[507,1176,1178],{"class":509,"line":1177},16,[507,1179,590],{"class":517},[507,1181,1183],{"class":509,"line":1182},17,[507,1184,597],{"emptyLinePlaceholder":596},[507,1186,1188],{"class":509,"line":1187},18,[507,1189,1190],{"class":531},"\u002F* Intent *\u002F\n",[507,1192,1194,1196],{"class":509,"line":1193},19,[507,1195,29],{"class":547},[507,1197,1198],{"class":517}," style(--tone: alert) {\n",[507,1200,1202,1205,1207,1210,1212,1214,1216,1218,1220,1223],{"class":509,"line":1201},20,[507,1203,1204],{"class":513},"  .panel__badge",[507,1206,606],{"class":517},[507,1208,1209],{"class":513},"background",[507,1211,541],{"class":517},[507,1213,74],{"class":513},[507,1215,665],{"class":517},[507,1217,668],{"class":513},[507,1219,541],{"class":517},[507,1221,1222],{"class":513},"#10182b",[507,1224,617],{"class":517},[507,1226,1228,1231,1233,1236,1238,1240],{"class":509,"line":1227},21,[507,1229,1230],{"class":513},"  .panel__text",[507,1232,606],{"class":517},[507,1234,1235],{"class":513},"font-weight",[507,1237,541],{"class":517},[507,1239,71],{"class":513},[507,1241,617],{"class":517},[507,1243,1245],{"class":509,"line":1244},22,[507,1246,590],{"class":517},[14,1248,1249],{},"Resize the frame and note that the two conditions never interfere — narrowing the panel does not change its tone, and changing its tone does not change its axis.",[961,1251],{"name":1252},"style-queries-size-and-style",[153,1254],{},[156,1256,1258],{"id":1257},"annotated-production-example-a-notification-list-item","Annotated production example: a notification list item",[14,1260,1261],{},"This is a realistic component with three orthogonal state axes — severity, density, and read state — that would classically require a matrix of modifier classes. Here each axis is one token.",[498,1263,1267],{"className":1264,"code":1265,"language":1266,"meta":503,"style":503},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cul class=\"feed\" style=\"--density: comfortable\">\n  \u003Cli class=\"feed__item\" style=\"--severity: critical; --read: no\">\n    \u003Cdiv class=\"feed__marker\" aria-hidden=\"true\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"feed__content\">\n      \u003Cp class=\"feed__title\">Certificate expires in 48 hours\u003C\u002Fp>\n      \u003Cp class=\"feed__detail\">edge-gateway-03 · renewal not scheduled\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fli>\n  \u003Cli class=\"feed__item\" style=\"--severity: info; --read: yes\">\n    \u003Cdiv class=\"feed__marker\" aria-hidden=\"true\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"feed__content\">\n      \u003Cp class=\"feed__title\">Nightly backup completed\u003C\u002Fp>\n      \u003Cp class=\"feed__detail\">14 volumes · 2m 11s\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n","html",[23,1268,1269,1298,1321,1351,1366,1387,1407,1416,1425,1446,1470,1484,1503,1522,1530,1538],{"__ignoreMap":503},[507,1270,1271,1274,1277,1280,1283,1287,1290,1292,1295],{"class":509,"line":510},[507,1272,1273],{"class":517},"\u003C",[507,1275,134],{"class":1276},"sne4z",[507,1278,1279],{"class":513}," class",[507,1281,1282],{"class":517},"=",[507,1284,1286],{"class":1285},"sT6z2","\"feed\"",[507,1288,1289],{"class":513}," style",[507,1291,1282],{"class":517},[507,1293,1294],{"class":1285},"\"--density: comfortable\"",[507,1296,1297],{"class":517},">\n",[507,1299,1300,1303,1305,1307,1309,1312,1314,1316,1319],{"class":509,"line":521},[507,1301,1302],{"class":517},"  \u003C",[507,1304,137],{"class":1276},[507,1306,1279],{"class":513},[507,1308,1282],{"class":517},[507,1310,1311],{"class":1285},"\"feed__item\"",[507,1313,1289],{"class":513},[507,1315,1282],{"class":517},[507,1317,1318],{"class":1285},"\"--severity: critical; --read: no\"",[507,1320,1297],{"class":517},[507,1322,1323,1326,1329,1331,1333,1336,1339,1341,1344,1347,1349],{"class":509,"line":535},[507,1324,1325],{"class":517},"    \u003C",[507,1327,1328],{"class":1276},"div",[507,1330,1279],{"class":513},[507,1332,1282],{"class":517},[507,1334,1335],{"class":1285},"\"feed__marker\"",[507,1337,1338],{"class":513}," aria-hidden",[507,1340,1282],{"class":517},[507,1342,1343],{"class":1285},"\"true\"",[507,1345,1346],{"class":517},">\u003C\u002F",[507,1348,1328],{"class":1276},[507,1350,1297],{"class":517},[507,1352,1353,1355,1357,1359,1361,1364],{"class":509,"line":560},[507,1354,1325],{"class":517},[507,1356,1328],{"class":1276},[507,1358,1279],{"class":513},[507,1360,1282],{"class":517},[507,1362,1363],{"class":1285},"\"feed__content\"",[507,1365,1297],{"class":517},[507,1367,1368,1371,1373,1375,1377,1380,1383,1385],{"class":509,"line":574},[507,1369,1370],{"class":517},"      \u003C",[507,1372,14],{"class":1276},[507,1374,1279],{"class":513},[507,1376,1282],{"class":517},[507,1378,1379],{"class":1285},"\"feed__title\"",[507,1381,1382],{"class":517},">Certificate expires in 48 hours\u003C\u002F",[507,1384,14],{"class":1276},[507,1386,1297],{"class":517},[507,1388,1389,1391,1393,1395,1397,1400,1403,1405],{"class":509,"line":587},[507,1390,1370],{"class":517},[507,1392,14],{"class":1276},[507,1394,1279],{"class":513},[507,1396,1282],{"class":517},[507,1398,1399],{"class":1285},"\"feed__detail\"",[507,1401,1402],{"class":517},">edge-gateway-03 · renewal not scheduled\u003C\u002F",[507,1404,14],{"class":1276},[507,1406,1297],{"class":517},[507,1408,1409,1412,1414],{"class":509,"line":593},[507,1410,1411],{"class":517},"    \u003C\u002F",[507,1413,1328],{"class":1276},[507,1415,1297],{"class":517},[507,1417,1418,1421,1423],{"class":509,"line":600},[507,1419,1420],{"class":517},"  \u003C\u002F",[507,1422,137],{"class":1276},[507,1424,1297],{"class":517},[507,1426,1427,1429,1431,1433,1435,1437,1439,1441,1444],{"class":509,"line":620},[507,1428,1302],{"class":517},[507,1430,137],{"class":1276},[507,1432,1279],{"class":513},[507,1434,1282],{"class":517},[507,1436,1311],{"class":1285},[507,1438,1289],{"class":513},[507,1440,1282],{"class":517},[507,1442,1443],{"class":1285},"\"--severity: info; --read: yes\"",[507,1445,1297],{"class":517},[507,1447,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466,1468],{"class":509,"line":1072},[507,1449,1325],{"class":517},[507,1451,1328],{"class":1276},[507,1453,1279],{"class":513},[507,1455,1282],{"class":517},[507,1457,1335],{"class":1285},[507,1459,1338],{"class":513},[507,1461,1282],{"class":517},[507,1463,1343],{"class":1285},[507,1465,1346],{"class":517},[507,1467,1328],{"class":1276},[507,1469,1297],{"class":517},[507,1471,1472,1474,1476,1478,1480,1482],{"class":509,"line":1077},[507,1473,1325],{"class":517},[507,1475,1328],{"class":1276},[507,1477,1279],{"class":513},[507,1479,1282],{"class":517},[507,1481,1363],{"class":1285},[507,1483,1297],{"class":517},[507,1485,1486,1488,1490,1492,1494,1496,1499,1501],{"class":509,"line":1122},[507,1487,1370],{"class":517},[507,1489,14],{"class":1276},[507,1491,1279],{"class":513},[507,1493,1282],{"class":517},[507,1495,1379],{"class":1285},[507,1497,1498],{"class":517},">Nightly backup completed\u003C\u002F",[507,1500,14],{"class":1276},[507,1502,1297],{"class":517},[507,1504,1505,1507,1509,1511,1513,1515,1518,1520],{"class":509,"line":1127},[507,1506,1370],{"class":517},[507,1508,14],{"class":1276},[507,1510,1279],{"class":513},[507,1512,1282],{"class":517},[507,1514,1399],{"class":1285},[507,1516,1517],{"class":517},">14 volumes · 2m 11s\u003C\u002F",[507,1519,14],{"class":1276},[507,1521,1297],{"class":517},[507,1523,1524,1526,1528],{"class":509,"line":1133},[507,1525,1411],{"class":517},[507,1527,1328],{"class":1276},[507,1529,1297],{"class":517},[507,1531,1532,1534,1536],{"class":509,"line":1141},[507,1533,1420],{"class":517},[507,1535,137],{"class":1276},[507,1537,1297],{"class":517},[507,1539,1540,1543,1545],{"class":509,"line":1177},[507,1541,1542],{"class":517},"\u003C\u002F",[507,1544,134],{"class":1276},[507,1546,1297],{"class":517},[498,1548,1550],{"className":500,"code":1549,"language":502,"meta":503,"style":503},".feed {\n  --density: comfortable;      \u002F* list-level axis, inherited by every item *\u002F\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  gap: .5rem;\n}\n\n.feed__item {\n  --severity: info;            \u002F* item-level axes, overriding nothing above *\u002F\n  --read: no;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: .75rem;\n  align-items: start;\n  padding: .9rem 1rem;\n  border: 1px solid #d7dce5;\n  border-radius: 10px;\n  background: #fff;\n}\n\n.feed__marker {\n  inline-size: 10px;\n  block-size: 10px;\n  margin-block-start: .35rem;\n  border-radius: 50%;\n  background: #98a2b3;\n}\n\n.feed__title { margin: 0; font: 600 .95rem\u002F1.4 system-ui, sans-serif; color: #101828; }\n.feed__detail { margin: .15rem 0 0; font: 400 .82rem\u002F1.4 system-ui, sans-serif; color: #667085; }\n\n\u002F* Axis 1 — severity. Read from .feed__item by its own children. *\u002F\n@container style(--severity: critical) {\n  .feed__marker { background: #b42318; }\n  .feed__title { color: #912018; }\n}\n\n@container style(--severity: warning) {\n  .feed__marker { background: #b54708; }\n}\n\n\u002F* Axis 2 — read state. Independent of severity; the two blocks compose. *\u002F\n@container style(--read: yes) {\n  .feed__title { font-weight: 400; }\n  .feed__marker { background: transparent; box-shadow: inset 0 0 0 2px #d0d5dd; }\n}\n\n\u002F* Axis 3 — density. Declared on .feed, so .feed__item reads it from its parent. *\u002F\n@container style(--density: compact) {\n  .feed__item { padding: .5rem .75rem; gap: .5rem; }\n  .feed__detail { display: none; }\n}\n",[23,1551,1552,1559,1570,1581,1592,1602,1614,1627,1631,1635,1642,1653,1661,1671,1688,1701,1713,1729,1745,1757,1767,1771,1775,1783,1797,1811,1826,1841,1853,1858,1863,1910,1964,1969,1975,1983,2000,2017,2022,2027,2035,2051,2056,2061,2067,2075,2090,2130,2135,2140,2146,2154,2186,2202],{"__ignoreMap":503},[507,1553,1554,1557],{"class":509,"line":510},[507,1555,1556],{"class":513},".feed",[507,1558,518],{"class":517},[507,1560,1561,1564,1567],{"class":509,"line":521},[507,1562,1563],{"class":524},"  --density",[507,1565,1566],{"class":517},": comfortable;      ",[507,1568,1569],{"class":531},"\u002F* list-level axis, inherited by every item *\u002F\n",[507,1571,1572,1575,1577,1579],{"class":509,"line":535},[507,1573,1574],{"class":513},"  list-style",[507,1576,541],{"class":517},[507,1578,94],{"class":513},[507,1580,557],{"class":517},[507,1582,1583,1586,1588,1590],{"class":509,"line":560},[507,1584,1585],{"class":513},"  margin",[507,1587,541],{"class":517},[507,1589,690],{"class":513},[507,1591,557],{"class":517},[507,1593,1594,1596,1598,1600],{"class":509,"line":574},[507,1595,1044],{"class":513},[507,1597,541],{"class":517},[507,1599,690],{"class":513},[507,1601,557],{"class":517},[507,1603,1604,1607,1609,1612],{"class":509,"line":587},[507,1605,1606],{"class":513},"  display",[507,1608,541],{"class":517},[507,1610,1611],{"class":513},"grid",[507,1613,557],{"class":517},[507,1615,1616,1619,1621,1623,1625],{"class":509,"line":593},[507,1617,1618],{"class":513},"  gap",[507,1620,541],{"class":517},[507,1622,819],{"class":513},[507,1624,662],{"class":547},[507,1626,557],{"class":517},[507,1628,1629],{"class":509,"line":600},[507,1630,590],{"class":517},[507,1632,1633],{"class":509,"line":620},[507,1634,597],{"emptyLinePlaceholder":596},[507,1636,1637,1640],{"class":509,"line":1072},[507,1638,1639],{"class":513},".feed__item",[507,1641,518],{"class":517},[507,1643,1644,1647,1650],{"class":509,"line":1077},[507,1645,1646],{"class":524},"  --severity",[507,1648,1649],{"class":517},": info;            ",[507,1651,1652],{"class":531},"\u002F* item-level axes, overriding nothing above *\u002F\n",[507,1654,1655,1658],{"class":509,"line":1122},[507,1656,1657],{"class":524},"  --read",[507,1659,1660],{"class":517},": no;\n",[507,1662,1663,1665,1667,1669],{"class":509,"line":1127},[507,1664,1606],{"class":513},[507,1666,541],{"class":517},[507,1668,1611],{"class":513},[507,1670,557],{"class":517},[507,1672,1673,1676,1678,1681,1683,1686],{"class":509,"line":1133},[507,1674,1675],{"class":513},"  grid-template-columns",[507,1677,541],{"class":517},[507,1679,1680],{"class":513},"auto",[507,1682,710],{"class":513},[507,1684,1685],{"class":547},"fr",[507,1687,557],{"class":517},[507,1689,1690,1692,1694,1697,1699],{"class":509,"line":1141},[507,1691,1618],{"class":513},[507,1693,541],{"class":517},[507,1695,1696],{"class":513},".75",[507,1698,662],{"class":547},[507,1700,557],{"class":517},[507,1702,1703,1706,1708,1711],{"class":509,"line":1177},[507,1704,1705],{"class":513},"  align-items",[507,1707,541],{"class":517},[507,1709,1710],{"class":513},"start",[507,1712,557],{"class":517},[507,1714,1715,1717,1719,1721,1723,1725,1727],{"class":509,"line":1182},[507,1716,1044],{"class":513},[507,1718,541],{"class":517},[507,1720,883],{"class":513},[507,1722,662],{"class":547},[507,1724,710],{"class":513},[507,1726,662],{"class":547},[507,1728,557],{"class":517},[507,1730,1731,1733,1735,1737,1739,1741,1743],{"class":509,"line":1187},[507,1732,538],{"class":513},[507,1734,541],{"class":517},[507,1736,544],{"class":513},[507,1738,548],{"class":547},[507,1740,551],{"class":513},[507,1742,554],{"class":513},[507,1744,557],{"class":517},[507,1746,1747,1749,1751,1753,1755],{"class":509,"line":1193},[507,1748,563],{"class":513},[507,1750,541],{"class":517},[507,1752,73],{"class":513},[507,1754,548],{"class":547},[507,1756,557],{"class":517},[507,1758,1759,1761,1763,1765],{"class":509,"line":1201},[507,1760,577],{"class":513},[507,1762,541],{"class":517},[507,1764,582],{"class":513},[507,1766,557],{"class":517},[507,1768,1769],{"class":509,"line":1227},[507,1770,590],{"class":517},[507,1772,1773],{"class":509,"line":1244},[507,1774,597],{"emptyLinePlaceholder":596},[507,1776,1778,1781],{"class":509,"line":1777},23,[507,1779,1780],{"class":513},".feed__marker",[507,1782,518],{"class":517},[507,1784,1786,1789,1791,1793,1795],{"class":509,"line":1785},24,[507,1787,1788],{"class":513},"  inline-size",[507,1790,541],{"class":517},[507,1792,73],{"class":513},[507,1794,548],{"class":547},[507,1796,557],{"class":517},[507,1798,1800,1803,1805,1807,1809],{"class":509,"line":1799},25,[507,1801,1802],{"class":513},"  block-size",[507,1804,541],{"class":517},[507,1806,73],{"class":513},[507,1808,548],{"class":547},[507,1810,557],{"class":517},[507,1812,1814,1817,1819,1822,1824],{"class":509,"line":1813},26,[507,1815,1816],{"class":513},"  margin-block-start",[507,1818,541],{"class":517},[507,1820,1821],{"class":513},".35",[507,1823,662],{"class":547},[507,1825,557],{"class":517},[507,1827,1829,1831,1833,1836,1839],{"class":509,"line":1828},27,[507,1830,563],{"class":513},[507,1832,541],{"class":517},[507,1834,1835],{"class":513},"50",[507,1837,1838],{"class":547},"%",[507,1840,557],{"class":517},[507,1842,1844,1846,1848,1851],{"class":509,"line":1843},28,[507,1845,577],{"class":513},[507,1847,541],{"class":517},[507,1849,1850],{"class":513},"#98a2b3",[507,1852,557],{"class":517},[507,1854,1856],{"class":509,"line":1855},29,[507,1857,590],{"class":517},[507,1859,1861],{"class":509,"line":1860},30,[507,1862,597],{"emptyLinePlaceholder":596},[507,1864,1866,1869,1871,1873,1875,1877,1879,1881,1883,1885,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908],{"class":509,"line":1865},31,[507,1867,1868],{"class":513},".feed__title",[507,1870,606],{"class":517},[507,1872,685],{"class":513},[507,1874,541],{"class":517},[507,1876,690],{"class":513},[507,1878,665],{"class":517},[507,1880,703],{"class":513},[507,1882,541],{"class":517},[507,1884,71],{"class":513},[507,1886,1887],{"class":513}," .95",[507,1889,662],{"class":547},[507,1891,715],{"class":517},[507,1893,770],{"class":513},[507,1895,721],{"class":513},[507,1897,724],{"class":517},[507,1899,727],{"class":513},[507,1901,665],{"class":517},[507,1903,668],{"class":513},[507,1905,541],{"class":517},[507,1907,673],{"class":513},[507,1909,617],{"class":517},[507,1911,1913,1916,1918,1920,1922,1925,1927,1929,1931,1933,1935,1937,1939,1942,1944,1946,1948,1950,1952,1954,1956,1958,1960,1962],{"class":509,"line":1912},32,[507,1914,1915],{"class":513},".feed__detail",[507,1917,606],{"class":517},[507,1919,685],{"class":513},[507,1921,541],{"class":517},[507,1923,1924],{"class":513},".15",[507,1926,662],{"class":547},[507,1928,693],{"class":513},[507,1930,693],{"class":513},[507,1932,665],{"class":517},[507,1934,703],{"class":513},[507,1936,541],{"class":517},[507,1938,760],{"class":513},[507,1940,1941],{"class":513}," .82",[507,1943,662],{"class":547},[507,1945,715],{"class":517},[507,1947,770],{"class":513},[507,1949,721],{"class":513},[507,1951,724],{"class":517},[507,1953,727],{"class":513},[507,1955,665],{"class":517},[507,1957,668],{"class":513},[507,1959,541],{"class":517},[507,1961,751],{"class":513},[507,1963,617],{"class":517},[507,1965,1967],{"class":509,"line":1966},33,[507,1968,597],{"emptyLinePlaceholder":596},[507,1970,1972],{"class":509,"line":1971},34,[507,1973,1974],{"class":531},"\u002F* Axis 1 — severity. Read from .feed__item by its own children. *\u002F\n",[507,1976,1978,1980],{"class":509,"line":1977},35,[507,1979,29],{"class":547},[507,1981,1982],{"class":517}," style(--severity: critical) {\n",[507,1984,1986,1989,1991,1993,1995,1998],{"class":509,"line":1985},36,[507,1987,1988],{"class":513},"  .feed__marker",[507,1990,606],{"class":517},[507,1992,1209],{"class":513},[507,1994,541],{"class":517},[507,1996,1997],{"class":513},"#b42318",[507,1999,617],{"class":517},[507,2001,2003,2006,2008,2010,2012,2015],{"class":509,"line":2002},37,[507,2004,2005],{"class":513},"  .feed__title",[507,2007,606],{"class":517},[507,2009,668],{"class":513},[507,2011,541],{"class":517},[507,2013,2014],{"class":513},"#912018",[507,2016,617],{"class":517},[507,2018,2020],{"class":509,"line":2019},38,[507,2021,590],{"class":517},[507,2023,2025],{"class":509,"line":2024},39,[507,2026,597],{"emptyLinePlaceholder":596},[507,2028,2030,2032],{"class":509,"line":2029},40,[507,2031,29],{"class":547},[507,2033,2034],{"class":517}," style(--severity: warning) {\n",[507,2036,2038,2040,2042,2044,2046,2049],{"class":509,"line":2037},41,[507,2039,1988],{"class":513},[507,2041,606],{"class":517},[507,2043,1209],{"class":513},[507,2045,541],{"class":517},[507,2047,2048],{"class":513},"#b54708",[507,2050,617],{"class":517},[507,2052,2054],{"class":509,"line":2053},42,[507,2055,590],{"class":517},[507,2057,2059],{"class":509,"line":2058},43,[507,2060,597],{"emptyLinePlaceholder":596},[507,2062,2064],{"class":509,"line":2063},44,[507,2065,2066],{"class":531},"\u002F* Axis 2 — read state. Independent of severity; the two blocks compose. *\u002F\n",[507,2068,2070,2072],{"class":509,"line":2069},45,[507,2071,29],{"class":547},[507,2073,2074],{"class":517}," style(--read: yes) {\n",[507,2076,2078,2080,2082,2084,2086,2088],{"class":509,"line":2077},46,[507,2079,2005],{"class":513},[507,2081,606],{"class":517},[507,2083,1235],{"class":513},[507,2085,541],{"class":517},[507,2087,760],{"class":513},[507,2089,617],{"class":517},[507,2091,2093,2095,2097,2099,2101,2104,2106,2109,2111,2114,2116,2118,2120,2123,2125,2128],{"class":509,"line":2092},47,[507,2094,1988],{"class":513},[507,2096,606],{"class":517},[507,2098,1209],{"class":513},[507,2100,541],{"class":517},[507,2102,2103],{"class":513},"transparent",[507,2105,665],{"class":517},[507,2107,2108],{"class":513},"box-shadow",[507,2110,541],{"class":517},[507,2112,2113],{"class":513},"inset",[507,2115,693],{"class":513},[507,2117,693],{"class":513},[507,2119,693],{"class":513},[507,2121,2122],{"class":513}," 2",[507,2124,548],{"class":547},[507,2126,2127],{"class":513}," #d0d5dd",[507,2129,617],{"class":517},[507,2131,2133],{"class":509,"line":2132},48,[507,2134,590],{"class":517},[507,2136,2138],{"class":509,"line":2137},49,[507,2139,597],{"emptyLinePlaceholder":596},[507,2141,2143],{"class":509,"line":2142},50,[507,2144,2145],{"class":531},"\u002F* Axis 3 — density. Declared on .feed, so .feed__item reads it from its parent. *\u002F\n",[507,2147,2149,2151],{"class":509,"line":2148},51,[507,2150,29],{"class":547},[507,2152,2153],{"class":517}," style(--density: compact) {\n",[507,2155,2157,2160,2162,2164,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184],{"class":509,"line":2156},52,[507,2158,2159],{"class":513},"  .feed__item",[507,2161,606],{"class":517},[507,2163,655],{"class":513},[507,2165,541],{"class":517},[507,2167,819],{"class":513},[507,2169,662],{"class":547},[507,2171,824],{"class":513},[507,2173,662],{"class":547},[507,2175,665],{"class":517},[507,2177,851],{"class":513},[507,2179,541],{"class":517},[507,2181,819],{"class":513},[507,2183,662],{"class":547},[507,2185,617],{"class":517},[507,2187,2189,2192,2194,2196,2198,2200],{"class":509,"line":2188},53,[507,2190,2191],{"class":513},"  .feed__detail",[507,2193,606],{"class":517},[507,2195,831],{"class":513},[507,2197,541],{"class":517},[507,2199,94],{"class":513},[507,2201,617],{"class":517},[507,2203,2205],{"class":509,"line":2204},54,[507,2206,590],{"class":517},[14,2208,2209,2210,2212,2213,2215,2216,2218,2219,2222,2223,2226],{},"Three points deserve attention. The density block styles ",[23,2211,1639],{}," itself, which works because the token lives one level up on ",[23,2214,1556],{}," — had it been declared on ",[23,2217,1639],{},", the item could not read it. The severity and read blocks style ",[18,2220,2221],{},"children"," of the element carrying the token, which is the ordinary arrangement. And the blocks compose freely: a critical unread item picks up declarations from two blocks with no combinatorial rule like ",[23,2224,2225],{},".feed__item--critical.feed__item--unread"," anywhere in the sheet.",[14,2228,2229,2230,263],{},"Adding a fourth severity value costs one block. Adding a fourth axis costs one block per value, not a multiplication against everything already present. That linear-instead-of-multiplicative growth is the whole argument, and it is examined against the class-based and attribute-based alternatives in ",[32,2231,2233],{"href":2232},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming\u002F","container style query theming",[153,2235],{},[156,2237,2239],{"id":2238},"performance-and-accessibility-notes","Performance and accessibility notes",[14,2241,2242,2245,2246,2249],{},[130,2243,2244],{},"Style queries do not force layout."," Unlike size queries, which need the container's box before they can be answered, a style query is resolved during style computation. There is no containment cost, no ",[23,2247,2248],{},"contain"," side effect, and no risk of the layout thrashing that deeply nested size containers can cause. If you have been rationing container queries for performance reasons, that budget does not apply here.",[14,2251,2252,2253,2256,2257,2260],{},"The cost that does exist is invalidation breadth. Changing a token on a high element invalidates style for its whole subtree, and the engine must recompute matches for every descendant with a query that reads it. Declaring ",[23,2254,2255],{},"--theme"," on ",[23,2258,2259],{},":root"," and querying it from a thousand nodes is fine when it changes on user action; it is wasteful when the value is animated frame by frame. Keep token mutation event-driven, not continuous.",[14,2262,2263,2264,2267,2268,2271,2272,2275,2276,2279,2280,263],{},"Custom properties registered with ",[23,2265,2266],{},"@property"," compute to their specified syntax before matching, which makes comparisons predictable — ",[23,2269,2270],{},"--ratio: 1.0"," registered as ",[23,2273,2274],{},"\u003Cnumber>"," matches ",[23,2277,2278],{},"style(--ratio: 1)"," where an unregistered property would compare the literal token sequences instead. The type behaviour is covered from the other direction in ",[32,2281,2283],{"href":2282},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety\u002F","registered properties and type safety",[14,2285,2286,2287,2290,2291,724,2294,2297],{},"On accessibility, remember what a style query is not: a token change alters presentation only. If ",[23,2288,2289],{},"--state: error"," turns a field red, assistive technology learns nothing from it. The token must accompany an accessible signal — ",[23,2292,2293],{},"aria-invalid",[23,2295,2296],{},"role=\"alert\"",", real text — not replace one. Colour-only distinctions between severity levels also fail WCAG 1.4.1 (Use of Color); pair every colour shift with a shape, icon, or text label, exactly as the marker-plus-title pairing does above.",[14,2299,2300,2301,2304,2305,2308,2309,263],{},"Finally, tokens driving motion should still respect user preference. A ",[23,2302,2303],{},"--motion: expressive"," token must sit under the same ",[23,2306,2307],{},"prefers-reduced-motion"," discipline as any other animation trigger, per ",[32,2310,2312],{"href":2311},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css\u002F","reducing motion preferences in CSS",[153,2314],{},[156,2316,2318],{"id":2317},"devtools-debugging-workflow","DevTools debugging workflow",[2320,2321,2322,2336,2345,2354,2368,2374],"ol",{},[137,2323,2324,2327,2328,2331,2332,2335],{},[130,2325,2326],{},"Confirm the engine supports the feature at all."," Every current engine does, so this is a question about the ",[18,2329,2330],{},"version"," in front of you rather than the brand. Check the Styles pane for whether your ",[23,2333,2334],{},"@container style(...)"," block is listed as an at-rule group at all: a version predating the feature omits the block entirely, which is the fastest way to tell a support problem from a code problem.",[137,2337,2338,2341,2342,2344],{},[130,2339,2340],{},"Select the queried element, not the container."," In the Elements panel, the Styles pane shows matched rules grouped under their ",[23,2343,29],{}," header. If your block is absent, the query did not match for this element.",[137,2346,2347,2350,2351,2353],{},[130,2348,2349],{},"Walk one level up and read the Computed tab."," Filter for the custom property name. The value shown on the ",[18,2352,250],{}," is the value the query tested. If the property appears on the selected element but not on its parent, you have the self-declaration bug.",[137,2355,2356,2359,2360,2363,2364,2367],{},[130,2357,2358],{},"Check whitespace and case in the computed value."," Custom properties preserve their token stream. A trailing comment or an unexpected ",[23,2361,2362],{},"Dusk"," versus ",[23,2365,2366],{},"dusk"," will fail an equality test that looks correct in source.",[137,2369,2370,2373],{},[130,2371,2372],{},"Edit the token live."," Change the parent's custom property value directly in the Styles pane; matching blocks appear and disappear on the child immediately. This is the fastest confirmation that resolution is wired correctly, and it also exercises invalidation so you can watch the Performance panel for recalculation cost.",[137,2375,2376,2379,2380,2382,2383,2386],{},[130,2377,2378],{},"For named queries, verify the name resolves."," ",[23,2381,433],{}," needs an ancestor with ",[23,2384,2385],{},"container-name: card","; if no ancestor matches the name, the query is false regardless of token values.",[153,2388],{},[156,2390,2392],{"id":2391},"browser-compatibility","Browser compatibility",[300,2394,2395,2414],{},[303,2396,2397],{},[306,2398,2399,2402,2405,2408,2411],{},[309,2400,2401],{},"Feature",[309,2403,2404],{},"Chrome\u002FEdge",[309,2406,2407],{},"Firefox",[309,2409,2410],{},"Safari",[309,2412,2413],{},"Notes",[319,2415,2416,2435,2452,2469,2487],{},[306,2417,2418,2423,2426,2429,2432],{},[324,2419,2420],{},[23,2421,2422],{},"@container style(--prop: value)",[324,2424,2425],{},"111+",[324,2427,2428],{},"151+",[324,2430,2431],{},"18+",[324,2433,2434],{},"Custom properties only",[306,2436,2437,2443,2445,2447,2449],{},[324,2438,2439,2440],{},"Boolean form ",[23,2441,2442],{},"style(--prop)",[324,2444,2425],{},[324,2446,2428],{},[324,2448,2431],{},[324,2450,2451],{},"True when the property has a non-initial value",[306,2453,2454,2459,2462,2464,2466],{},[324,2455,2456,2458],{},[23,2457,25],{}," with standard properties",[324,2460,2461],{},"Not implemented",[324,2463,2461],{},[324,2465,2461],{},[324,2467,2468],{},"Specified, but no engine ships it",[306,2470,2471,2476,2478,2480,2482],{},[324,2472,2473,2475],{},[23,2474,25],{}," combined with a size condition",[324,2477,2425],{},[324,2479,2428],{},[324,2481,2431],{},[324,2483,2484,2485],{},"Size half still needs ",[23,2486,197],{},[306,2488,2489,2494,2496,2498,2500],{},[324,2490,2491,2492],{},"Style container without ",[23,2493,197],{},[324,2495,2425],{},[324,2497,2428],{},[324,2499,2431],{},[324,2501,2502,2504],{},[23,2503,239],{}," already qualifies",[14,2506,2507,2508,2511,2512,2514,2515,2519,2520,263],{},"Custom-property style queries are now implemented in all three engines: Chromium since 111, Safari since 18, and Firefox since 151. The remaining support question is therefore about ",[18,2509,2510],{},"older"," versions still in circulation rather than about a hold-out engine, and it is answered structurally — keep every ",[23,2513,25],{}," block additive so an engine that drops it still renders a finished design. That discipline, and how to verify it, is set out in ",[32,2516,2518],{"href":2517},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support\u002F","style query fallbacks and support","; the general detection technique for containment is in ",[32,2521,2523],{"href":2522},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports\u002F","feature detection with @supports",[153,2525],{},[156,2527,2529],{"id":2528},"common-pitfalls","Common pitfalls",[300,2531,2532,2545],{},[303,2533,2534],{},[306,2535,2536,2539,2542],{},[309,2537,2538],{},"Pitfall",[309,2540,2541],{},"Cause",[309,2543,2544],{},"Resolution",[319,2546,2547,2558,2572,2585,2608],{},[306,2548,2549,2552,2555],{},[324,2550,2551],{},"Query never matches although the value looks right",[324,2553,2554],{},"The property is declared on the element being styled, not on an ancestor",[324,2556,2557],{},"Move the declaration to a parent, or introduce a wrapper that carries the token",[306,2559,2560,2566,2569],{},[324,2561,2562,2565],{},[23,2563,2564],{},"style(display: grid)"," does nothing",[324,2567,2568],{},"Standard properties are not implemented in any shipping engine",[324,2570,2571],{},"Route the state through a custom property instead",[306,2573,2574,2577,2582],{},[324,2575,2576],{},"Two blocks fight and the wrong one wins",[324,2578,2579,2581],{},[23,2580,29],{}," adds no specificity; an unrelated selector outranks both",[324,2583,2584],{},"Equalise selector specificity between blocks, or place them in an ordered layer",[306,2586,2587,2590,2599],{},[324,2588,2589],{},"Value mismatch on a numeric token",[324,2591,2592,2593,2596,2597],{},"Unregistered custom properties compare token streams, so ",[23,2594,2595],{},"1.0"," is not ",[23,2598,544],{},[324,2600,2601,2602,2604,2605,2607],{},"Register the property with ",[23,2603,2266],{}," and a ",[23,2606,2274],{}," syntax",[306,2609,2610,2613,2616],{},[324,2611,2612],{},"Theme flickers or lags on toggle",[324,2614,2615],{},"Token declared very high and mutated on every animation frame",[324,2617,2618],{},"Declare tokens close to their consumers and change them on discrete events",[153,2620],{},[156,2622,2624],{"id":2623},"faq","FAQ",[14,2626,2627,2633,2634,2636,2637,2640],{},[130,2628,2629,2630,2632],{},"Do style queries need ",[23,2631,197],{}," on the ancestor?","\nNo. Every element is a style container by default, so ",[23,2635,197],{}," is only required for size queries. Declaring ",[23,2638,2639],{},"container-type: inline-size"," does not disable style queries, and omitting it does not prevent them.",[14,2642,2643,2652,2653,2655,2656,2659],{},[130,2644,2645,2646,2648,2649,2651],{},"Can I query a standard property like ",[23,2647,668],{}," or ",[23,2650,831],{},"?","\nNot in any shipping engine as of mid-2026. The specification allows querying non-custom properties, but every engine that ships ",[23,2654,25],{}," restricts it to custom properties, so ",[23,2657,2658],{},"style(color: red)"," never matches.",[14,2661,2662,2665],{},[130,2663,2664],{},"Why does my style query fail when the element sets the property itself?","\nA style query is evaluated against the nearest ancestor container, and an element is never its own container. Move the declaration to a parent element and the query will match.",[14,2667,2668,2671,2672,2674],{},[130,2669,2670],{},"How do style queries interact with specificity?","\nThe ",[23,2673,29],{}," at-rule adds no specificity at all. Rules inside it carry exactly the specificity of their own selectors, so a style query cannot outrank a more specific selector declared elsewhere.",[153,2676],{},[156,2678,2680],{"id":2679},"specification-references","Specification references",[134,2682,2683,2698,2711],{},[137,2684,2685,2688,2689,2691,2692],{},[130,2686,2687],{},"CSS Conditional Rules Module Level 5"," — defines ",[23,2690,25],{},", the boolean form, and the style query container concept. ",[32,2693,2697],{"href":2694,"rel":2695},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-conditional-5\u002F#style-container",[2696],"nofollow","W3C Spec",[137,2699,2700,2688,2703,2706,2707],{},[130,2701,2702],{},"CSS Containment Module Level 3",[23,2704,2705],{},"container-type: normal"," and the query container hierarchy. ",[32,2708,2697],{"href":2709,"rel":2710},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-contain-3\u002F",[2696],[137,2712,2713,2716,2717,2719,2720],{},[130,2714,2715],{},"CSS Properties and Values API Level 1"," — ",[23,2718,2266],{}," registration and computed-value behaviour for custom properties. ",[32,2721,2697],{"href":2722,"rel":2723},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-properties-values-api-1\u002F",[2696],[153,2725],{},[156,2727,2729],{"id":2728},"related","Related",[134,2731,2732,2738,2744,2750,2757],{},[137,2733,2734,2737],{},[32,2735,2736],{"href":261},"Style queries with custom properties"," — the exact matching and inheritance rules.",[137,2739,2740,2743],{},[32,2741,2742],{"href":2232},"Container style query theming"," — one token replacing a matrix of theme classes.",[137,2745,2746,2749],{},[32,2747,2748],{"href":2517},"Style query fallbacks and support"," — keeping the enhancement additive for older engine versions.",[137,2751,2752,2756],{},[32,2753,2755],{"href":2754},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens\u002F","Cascade layers for reset and tokens"," — where token declarations belong in an ordered cascade.",[137,2758,2759,2763],{},[32,2760,2762],{"href":2761},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations\u002F","Fluid spacing tokens driving transition durations"," — the same token discipline applied to motion.",[2765,2766,2767],"style",{},"html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}",{"title":503,"searchDepth":521,"depth":521,"links":2769},[2770,2771,2774,2775,2781,2782,2783,2784,2785,2786,2787,2788],{"id":158,"depth":521,"text":159},{"id":208,"depth":521,"text":209,"children":2772},[2773],{"id":267,"depth":535,"text":268},{"id":297,"depth":521,"text":298},{"id":488,"depth":521,"text":489,"children":2776},[2777,2778,2779,2780],{"id":492,"depth":535,"text":493},{"id":636,"depth":535,"text":637},{"id":783,"depth":535,"text":784},{"id":966,"depth":535,"text":967},{"id":1257,"depth":521,"text":1258},{"id":2238,"depth":521,"text":2239},{"id":2317,"depth":521,"text":2318},{"id":2391,"depth":521,"text":2392},{"id":2528,"depth":521,"text":2529},{"id":2623,"depth":521,"text":2624},{"id":2679,"depth":521,"text":2680},{"id":2728,"depth":521,"text":2729},"How CSS style queries work: @container style() syntax, custom-property matching, ancestor evaluation, and token-driven component variants with no variant class.","md",{"pageTitle":2792,"datePublished":2793,"dateModified":2793,"faq":2794},"Style Queries and Container State","2026-07-20",[2795,2798,2801,2803],{"q":2796,"a":2797},"Do style queries need container-type on the ancestor?","No. Every element is a style container by default, so container-type is only required for size queries. Declaring container-type: inline-size does not disable style queries, and omitting it does not prevent them.",{"q":2799,"a":2800},"Can I query a standard property like color or display?","Not in any shipping engine as of mid-2026. The specification allows querying non-custom properties, but every engine that ships style() restricts it to custom properties, so style(color: red) never matches.",{"q":2664,"a":2802},"A style query is evaluated against the nearest ancestor container, and an element is never its own container. Move the declaration to a parent element and the query will match.",{"q":2670,"a":2804},"The @container at-rule adds no specificity at all. Rules inside it carry exactly the specificity of their own selectors, so a style query cannot outrank a more specific selector declared elsewhere.","\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state",{"title":5,"description":2789},"mastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Findex","4Wz87DzB6a08Jl4hbWEmucjLACPjGYKIG4_ZFgmKMSo",[2810,2813,2816,2819,2822,2825,2828,2831,2834,2837,2840,2843,2846,2849,2852,2855,2858,2861,2864,2867,2870,2873,2876,2879,2882,2885,2888,2891,2894,2897,2900,2903,2906,2909,2912,2915,2918,2921,2924,2927,2930,2933,2936,2939,2942,2945,2948,2950,2953,2956,2959,2962,2965,2968,2971,2974,2977,2980,2983,2985,2988,2991,2994,2997,3000,3003,3006,3009,3012,3015,3018,3020,3023,3026,3029,3032,3035,3038,3041,3044,3047,3050,3053,3056,3059,3062,3063,3066],{"path":2811,"title":2812},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":2814,"title":2815},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":2817,"title":2818},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":2820,"title":2821},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":2823,"title":2824},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":2826,"title":2827},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":2829,"title":2830},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":2832,"title":2833},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":2835,"title":2836},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":2838,"title":2839},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":2841,"title":2842},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":2844,"title":2845},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":2847,"title":2848},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":2850,"title":2851},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":2853,"title":2854},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":2856,"title":2857},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":2859,"title":2860},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":2862,"title":2863},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":2865,"title":2866},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":2868,"title":2869},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":2871,"title":2872},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":2874,"title":2875},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":2877,"title":2878},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":2880,"title":2881},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":2883,"title":2884},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":2886,"title":2887},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":2889,"title":2890},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":2892,"title":2893},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":2895,"title":2896},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":2898,"title":2899},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":2901,"title":2902},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":2904,"title":2905},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":2907,"title":2908},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":2910,"title":2911},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":2913,"title":2914},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":2916,"title":2917},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":2919,"title":2920},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":2922,"title":2923},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":2925,"title":2926},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":2928,"title":2929},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":2931,"title":2932},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":2934,"title":2935},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":2937,"title":2938},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":2940,"title":2941},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":2943,"title":2944},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":2946,"title":2947},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":715,"title":2949},"Modern CSS Layouts & Micro-Interactions",{"path":2951,"title":2952},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":2954,"title":2955},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2957,"title":2958},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2960,"title":2961},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2963,"title":2964},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2966,"title":2967},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2969,"title":2970},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2972,"title":2973},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":2975,"title":2976},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2978,"title":2979},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2981,"title":2982},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":2984,"title":40},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics",{"path":2986,"title":2987},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2989,"title":2990},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2992,"title":2993},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":2995,"title":2996},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":2998,"title":2999},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":3001,"title":3002},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":3004,"title":3005},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":3007,"title":3008},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":3010,"title":3011},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":3013,"title":3014},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":3016,"title":3017},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":3019,"title":35},"\u002Fmastering-container-queries-responsive-layouts",{"path":3021,"title":3022},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":3024,"title":3025},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":3027,"title":3028},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":3030,"title":3031},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":3033,"title":3034},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":3036,"title":3037},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":3039,"title":3040},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":3042,"title":3043},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":3045,"title":3046},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":3048,"title":3049},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":3051,"title":3052},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":3054,"title":3055},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":3057,"title":3058},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":3060,"title":3061},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":2805,"title":5},{"path":3064,"title":3065},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":3067,"title":3068},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",1784566156217]