[{"data":1,"prerenderedAt":1547},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support\u002F":3,"content-all-pages":1286},{"id":4,"title":5,"body":6,"description":1267,"extension":1268,"meta":1269,"navigation":406,"path":1282,"seo":1283,"stem":1284,"__hash__":1285},"content\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support\u002Findex.md","Style Query Fallbacks and Support: Designing for Older Browser Versions",{"type":7,"value":8,"toc":1256},"minimark",[9,13,22,36,39,44,50,61,64,66,70,87,97,100,102,106,109,201,204,208,210,214,991,998,1000,1004,1014,1031,1038,1040,1044,1047,1140,1147,1149,1153,1166,1168,1172,1182,1188,1194,1204,1206,1210,1253],[10,11,5],"h1",{"id":12},"style-query-fallbacks-and-support-designing-for-older-browser-versions",[14,15,16,17,21],"p",{},"Custom-property style queries are implemented in every current engine — Chromium since 111, Safari since 18, and Firefox since 151, released in May 2026. There is no hold-out browser to design around. What remains is the ordinary trailing edge of version adoption: users on a Firefox from last year, a Safari from before 18, a locked-down enterprise Chromium. For those, and only those, a ",[18,19,20],"code",{},"style()"," block is dropped entirely.",[14,23,24,25,30,31,35],{},"That changes what a \"fallback\" means here. It is not a parallel implementation for a permanently missing engine; it is a decay path that gets exercised by a shrinking slice of traffic and then stops mattering. The right amount of engineering for that is small — but it is not zero, and the discipline that keeps it small is worth stating precisely. This page sits within the ",[26,27,29],"a",{"href":28},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002F","style queries and container state"," guide, part of ",[26,32,34],{"href":33},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts",".",[37,38],"hr",{},[40,41,43],"h2",{"id":42},"what-actually-happens-on-a-version-without-support","What actually happens on a version without support",[14,45,46,47,49],{},"An engine that does not implement ",[18,48,20],{}," cannot parse the condition. Per the CSS error-handling rules for conditional group rules, an at-rule with an unrecognised condition is dropped in its entirety — the browser does not attempt the rules inside, and it does not report anything. The result is clean and total: every declaration inside the block is absent, and every rule outside it applies exactly as written.",[14,51,52,53,60],{},"That is a better failure mode than it sounds. There is no half-applied state to reason about and no cascade surprise. It means the entire correctness question reduces to a single, testable proposition: ",[54,55,56,57,59],"strong",{},"does the page look right with all ",[18,58,20],{}," blocks deleted?"," If yes, you are safe to ship. If no, the block is carrying something load-bearing and needs restructuring.",[14,62,63],{},"It also means the correctness question can be answered without knowing anything about the visitor's browser, which is the property the rest of this page builds on.",[37,65],{},[40,67,69],{"id":68},"why-not-to-detect-at-all","Why not to detect at all",[14,71,72,75,76,78,79,82,83,35],{},[18,73,74],{},"@supports (container-type: inline-size)"," tests size container support and tells you nothing about ",[18,77,20],{},". Size queries shipped years earlier in every engine, so a browser can pass that test and still be too old to evaluate a style query. It is not a proxy; do not use it as one. The genuine detection technique for ",[18,80,81],{},"container-type"," is covered separately in ",[26,84,86],{"href":85},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports\u002F","feature detection with @supports",[14,88,89,90,92,93,96],{},"There is no property-value pair that correlates with ",[18,91,20],{}," support either, so the familiar ",[18,94,95],{},"@supports not (…)"," mirror-block pattern — the modern branch in one block, the legacy branch in its negation — is unavailable here. There is nothing to negate.",[14,98,99],{},"The right conclusion is not to hunt for a cleverer probe. It is that detection is the wrong tool for this problem. A detection-based approach commits you to maintaining two rendering paths for a gap that closes on its own as versions roll forward, and it buys you nothing that ordering does not already give you for free. Build the structure so the question never needs asking.",[37,101],{},[40,103,105],{"id":104},"the-layering-pattern","The layering pattern",[14,107,108],{},"Three layers, written in this order, each one complete without the ones after it.",[110,111,117,118,117,122,117,126,117,133,117,145,117,151,117,156,117,162,117,165,117,169,117,173,117,177,117,182,117,186,117,191,117,196],"svg",{"viewBox":112,"role":113,"ariaLabel":114,"xmlns":115,"style":116},"0 0 720 340","img","Three stacked layers: a class baseline, a token declaration, and a style query enhancement, with a note on which engines apply each","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[119,120,121],"title",{},"Layering a style query enhancement",[123,124,125],"desc",{},"A class baseline renders everywhere, the token declaration is inert on its own, and only the style query block is dropped where unsupported.",[127,128,132],"text",{"x":129,"y":130,"style":131},"360","30","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","Layering the enhancement",[134,135],"rect",{"x":136,"y":137,"width":138,"height":139,"rx":140,"fill":141,"stroke":142,"strokeWidth":143,"opacity":144},"40","56","430","68","10","none","currentColor","1.5","0.55",[127,146,150],{"x":147,"y":148,"style":149},"255","82","text-anchor:middle;fill:currentColor;font:600 13px sans-serif","1. class baseline",[127,152,155],{"x":147,"y":153,"style":154},"106","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace;opacity:0.85",".ticket.is-urgent",[127,157,161],{"x":158,"y":159,"style":160},"690","96","text-anchor:end;fill:currentColor;font:11px sans-serif;opacity:0.75","applies everywhere",[134,163],{"x":136,"y":164,"width":138,"height":139,"rx":140,"fill":141,"stroke":142,"strokeWidth":143,"opacity":144},"140",[127,166,168],{"x":147,"y":167,"style":149},"166","2. token declaration",[127,170,172],{"x":147,"y":171,"style":154},"190","--priority: urgent",[127,174,176],{"x":158,"y":175,"style":160},"180","inert on its own",[134,178],{"x":136,"y":179,"width":138,"height":139,"rx":140,"fill":180,"opacity":181,"stroke":180,"strokeWidth":143},"224","#7aa2ff","0.18",[127,183,185],{"x":147,"y":184,"style":149},"250","3. style query block",[127,187,190],{"x":147,"y":188,"style":189},"274","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace;opacity:0.9","@container style(...)",[127,192,195],{"x":158,"y":193,"style":194},"264","text-anchor:end;fill:#7aa2ff;font:11px sans-serif","dropped if unsupported",[127,197,200],{"x":129,"y":198,"style":199},"322","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.7","removing any layer leaves the ones above it intact",[14,202,203],{},"The demo shows the finished arrangement. The urgent styling you see comes from the class in every browser; the refinement on top of it comes from the query only where it is understood.",[205,206],"live-demo",{"name":207},"style-queries-progressive-baseline",[37,209],{},[40,211,213],{"id":212},"complete-working-implementation","Complete working implementation",[215,216,221],"pre",{"className":217,"code":218,"language":219,"meta":220,"style":220},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!doctype html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Ctitle>Layered style query enhancement\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font: 400 16px\u002F1.5 system-ui, sans-serif; margin: 2rem; color: #101828; }\n  .wrap { max-inline-size: 34rem; }\n\n  \u002F* LAYER 1 — baseline. Plain classes, no query. This is the whole design in an\n     engine without style queries, and it must read as finished, not degraded. *\u002F\n  .ticket {\n    padding: 1rem;\n    border: 1px solid #d0d5dd;\n    border-radius: 10px;\n    background: #ffffff;\n  }\n  .ticket__label {\n    margin: 0 0 .3rem;\n    font: 700 .78rem\u002F1.3 system-ui, sans-serif;\n    letter-spacing: .06em;\n    text-transform: uppercase;\n    color: #667085;\n  }\n  .ticket__text { margin: 0; }\n\n  \u002F* The state is expressed as a class, because a class works everywhere. *\u002F\n  .ticket.is-urgent { border-color: #7aa2ff; }\n  .ticket.is-urgent .ticket__label { color: #3f5fa8; }\n\n  \u002F* LAYER 2 — the same state as a token. Declared on the wrapper so descendants\n     can read it. :has() keeps the two representations in sync from one source of\n     truth in the markup; you can equally set the token from a template. *\u002F\n  .wrap { --priority: normal; }\n  .wrap:has(.is-urgent) { --priority: urgent; }\n\n  \u002F* LAYER 3 — enhancement. Everything here is additive: a wider edge, a tinted\n     surface. Delete the block and layer 1 still communicates urgency. *\u002F\n  @container style(--priority: urgent) {\n    .ticket {\n      border-inline-start-width: 4px;\n      background: color-mix(in srgb, #7aa2ff 10%, #ffffff);\n    }\n    .ticket__label { letter-spacing: .08em; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv class=\"wrap\">\n    \u003Carticle class=\"ticket is-urgent\">\n      \u003Cp class=\"ticket__label\">Urgent\u003C\u002Fp>\n      \u003Cp class=\"ticket__text\">Certificate expires in 48 hours on edge-gateway-03.\u003C\u002Fp>\n    \u003C\u002Farticle>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[18,222,223,243,263,273,291,305,315,381,401,408,415,421,430,446,466,480,493,499,507,528,557,573,586,599,604,620,625,631,648,667,672,678,684,690,708,728,733,739,745,754,762,777,813,819,839,844,854,863,873,892,910,932,953,963,973,982],{"__ignoreMap":220},[224,225,228,232,236,240],"span",{"class":226,"line":227},"line",1,[224,229,231],{"class":230},"suds8","\u003C!",[224,233,235],{"class":234},"sne4z","doctype",[224,237,239],{"class":238},"s-5SL"," html",[224,241,242],{"class":230},">\n",[224,244,246,249,251,254,257,261],{"class":226,"line":245},2,[224,247,248],{"class":230},"\u003C",[224,250,219],{"class":234},[224,252,253],{"class":238}," lang",[224,255,256],{"class":230},"=",[224,258,260],{"class":259},"sT6z2","\"en\"",[224,262,242],{"class":230},[224,264,266,268,271],{"class":226,"line":265},3,[224,267,248],{"class":230},[224,269,270],{"class":234},"head",[224,272,242],{"class":230},[224,274,276,278,281,284,286,289],{"class":226,"line":275},4,[224,277,248],{"class":230},[224,279,280],{"class":234},"meta",[224,282,283],{"class":238}," charset",[224,285,256],{"class":230},[224,287,288],{"class":259},"\"utf-8\"",[224,290,242],{"class":230},[224,292,294,296,298,301,303],{"class":226,"line":293},5,[224,295,248],{"class":230},[224,297,119],{"class":234},[224,299,300],{"class":230},">Layered style query enhancement\u003C\u002F",[224,302,119],{"class":234},[224,304,242],{"class":230},[224,306,308,310,313],{"class":226,"line":307},6,[224,309,248],{"class":230},[224,311,312],{"class":234},"style",[224,314,242],{"class":230},[224,316,318,321,324,327,330,333,336,340,343,345,348,351,354,357,360,362,365,368,370,373,375,378],{"class":226,"line":317},7,[224,319,320],{"class":234},"  body",[224,322,323],{"class":230}," { ",[224,325,326],{"class":238},"font",[224,328,329],{"class":230},": ",[224,331,332],{"class":238},"400",[224,334,335],{"class":238}," 16",[224,337,339],{"class":338},"sHUrx","px",[224,341,342],{"class":230},"\u002F",[224,344,143],{"class":238},[224,346,347],{"class":238}," system-ui",[224,349,350],{"class":230},", ",[224,352,353],{"class":238},"sans-serif",[224,355,356],{"class":230},"; ",[224,358,359],{"class":238},"margin",[224,361,329],{"class":230},[224,363,364],{"class":238},"2",[224,366,367],{"class":338},"rem",[224,369,356],{"class":230},[224,371,372],{"class":238},"color",[224,374,329],{"class":230},[224,376,377],{"class":238},"#101828",[224,379,380],{"class":230},"; }\n",[224,382,384,387,389,392,394,397,399],{"class":226,"line":383},8,[224,385,386],{"class":238},"  .wrap",[224,388,323],{"class":230},[224,390,391],{"class":238},"max-inline-size",[224,393,329],{"class":230},[224,395,396],{"class":238},"34",[224,398,367],{"class":338},[224,400,380],{"class":230},[224,402,404],{"class":226,"line":403},9,[224,405,407],{"emptyLinePlaceholder":406},true,"\n",[224,409,411],{"class":226,"line":410},10,[224,412,414],{"class":413},"sLBg1","  \u002F* LAYER 1 — baseline. Plain classes, no query. This is the whole design in an\n",[224,416,418],{"class":226,"line":417},11,[224,419,420],{"class":413},"     engine without style queries, and it must read as finished, not degraded. *\u002F\n",[224,422,424,427],{"class":226,"line":423},12,[224,425,426],{"class":238},"  .ticket",[224,428,429],{"class":230}," {\n",[224,431,433,436,438,441,443],{"class":226,"line":432},13,[224,434,435],{"class":238},"    padding",[224,437,329],{"class":230},[224,439,440],{"class":238},"1",[224,442,367],{"class":338},[224,444,445],{"class":230},";\n",[224,447,449,452,454,456,458,461,464],{"class":226,"line":448},14,[224,450,451],{"class":238},"    border",[224,453,329],{"class":230},[224,455,440],{"class":238},[224,457,339],{"class":338},[224,459,460],{"class":238}," solid",[224,462,463],{"class":238}," #d0d5dd",[224,465,445],{"class":230},[224,467,469,472,474,476,478],{"class":226,"line":468},15,[224,470,471],{"class":238},"    border-radius",[224,473,329],{"class":230},[224,475,140],{"class":238},[224,477,339],{"class":338},[224,479,445],{"class":230},[224,481,483,486,488,491],{"class":226,"line":482},16,[224,484,485],{"class":238},"    background",[224,487,329],{"class":230},[224,489,490],{"class":238},"#ffffff",[224,492,445],{"class":230},[224,494,496],{"class":226,"line":495},17,[224,497,498],{"class":230},"  }\n",[224,500,502,505],{"class":226,"line":501},18,[224,503,504],{"class":238},"  .ticket__label",[224,506,429],{"class":230},[224,508,510,513,515,518,521,524,526],{"class":226,"line":509},19,[224,511,512],{"class":238},"    margin",[224,514,329],{"class":230},[224,516,517],{"class":238},"0",[224,519,520],{"class":238}," 0",[224,522,523],{"class":238}," .3",[224,525,367],{"class":338},[224,527,445],{"class":230},[224,529,531,534,536,539,542,544,546,549,551,553,555],{"class":226,"line":530},20,[224,532,533],{"class":238},"    font",[224,535,329],{"class":230},[224,537,538],{"class":238},"700",[224,540,541],{"class":238}," .78",[224,543,367],{"class":338},[224,545,342],{"class":230},[224,547,548],{"class":238},"1.3",[224,550,347],{"class":238},[224,552,350],{"class":230},[224,554,353],{"class":238},[224,556,445],{"class":230},[224,558,560,563,565,568,571],{"class":226,"line":559},21,[224,561,562],{"class":238},"    letter-spacing",[224,564,329],{"class":230},[224,566,567],{"class":238},".06",[224,569,570],{"class":338},"em",[224,572,445],{"class":230},[224,574,576,579,581,584],{"class":226,"line":575},22,[224,577,578],{"class":238},"    text-transform",[224,580,329],{"class":230},[224,582,583],{"class":238},"uppercase",[224,585,445],{"class":230},[224,587,589,592,594,597],{"class":226,"line":588},23,[224,590,591],{"class":238},"    color",[224,593,329],{"class":230},[224,595,596],{"class":238},"#667085",[224,598,445],{"class":230},[224,600,602],{"class":226,"line":601},24,[224,603,498],{"class":230},[224,605,607,610,612,614,616,618],{"class":226,"line":606},25,[224,608,609],{"class":238},"  .ticket__text",[224,611,323],{"class":230},[224,613,359],{"class":238},[224,615,329],{"class":230},[224,617,517],{"class":238},[224,619,380],{"class":230},[224,621,623],{"class":226,"line":622},26,[224,624,407],{"emptyLinePlaceholder":406},[224,626,628],{"class":226,"line":627},27,[224,629,630],{"class":413},"  \u002F* The state is expressed as a class, because a class works everywhere. *\u002F\n",[224,632,634,637,639,642,644,646],{"class":226,"line":633},28,[224,635,636],{"class":238},"  .ticket.is-urgent",[224,638,323],{"class":230},[224,640,641],{"class":238},"border-color",[224,643,329],{"class":230},[224,645,180],{"class":238},[224,647,380],{"class":230},[224,649,651,653,656,658,660,662,665],{"class":226,"line":650},29,[224,652,636],{"class":238},[224,654,655],{"class":238}," .ticket__label",[224,657,323],{"class":230},[224,659,372],{"class":238},[224,661,329],{"class":230},[224,663,664],{"class":238},"#3f5fa8",[224,666,380],{"class":230},[224,668,670],{"class":226,"line":669},30,[224,671,407],{"emptyLinePlaceholder":406},[224,673,675],{"class":226,"line":674},31,[224,676,677],{"class":413},"  \u002F* LAYER 2 — the same state as a token. Declared on the wrapper so descendants\n",[224,679,681],{"class":226,"line":680},32,[224,682,683],{"class":413},"     can read it. :has() keeps the two representations in sync from one source of\n",[224,685,687],{"class":226,"line":686},33,[224,688,689],{"class":413},"     truth in the markup; you can equally set the token from a template. *\u002F\n",[224,691,693,695,697,701,703,706],{"class":226,"line":692},34,[224,694,386],{"class":238},[224,696,323],{"class":230},[224,698,700],{"class":699},"soyes","--priority",[224,702,329],{"class":230},[224,704,705],{"class":238},"normal",[224,707,380],{"class":230},[224,709,711,714,717,720,723,725],{"class":226,"line":710},35,[224,712,713],{"class":238},"  .wrap:has",[224,715,716],{"class":230},"(",[224,718,719],{"class":238},".is-urgent",[224,721,722],{"class":230},") { ",[224,724,700],{"class":699},[224,726,727],{"class":230},": urgent; }\n",[224,729,731],{"class":226,"line":730},36,[224,732,407],{"emptyLinePlaceholder":406},[224,734,736],{"class":226,"line":735},37,[224,737,738],{"class":413},"  \u002F* LAYER 3 — enhancement. Everything here is additive: a wider edge, a tinted\n",[224,740,742],{"class":226,"line":741},38,[224,743,744],{"class":413},"     surface. Delete the block and layer 1 still communicates urgency. *\u002F\n",[224,746,748,751],{"class":226,"line":747},39,[224,749,750],{"class":338},"  @container",[224,752,753],{"class":230}," style(--priority: urgent) {\n",[224,755,757,760],{"class":226,"line":756},40,[224,758,759],{"class":238},"    .ticket",[224,761,429],{"class":230},[224,763,765,768,770,773,775],{"class":226,"line":764},41,[224,766,767],{"class":238},"      border-inline-start-width",[224,769,329],{"class":230},[224,771,772],{"class":238},"4",[224,774,339],{"class":338},[224,776,445],{"class":230},[224,778,780,783,785,788,790,793,796,798,800,803,806,808,810],{"class":226,"line":779},42,[224,781,782],{"class":238},"      background",[224,784,329],{"class":230},[224,786,787],{"class":238},"color-mix",[224,789,716],{"class":230},[224,791,792],{"class":699},"in",[224,794,795],{"class":238}," srgb",[224,797,350],{"class":230},[224,799,180],{"class":238},[224,801,802],{"class":238}," 10",[224,804,805],{"class":338},"%",[224,807,350],{"class":230},[224,809,490],{"class":238},[224,811,812],{"class":230},");\n",[224,814,816],{"class":226,"line":815},43,[224,817,818],{"class":230},"    }\n",[224,820,822,825,827,830,832,835,837],{"class":226,"line":821},44,[224,823,824],{"class":238},"    .ticket__label",[224,826,323],{"class":230},[224,828,829],{"class":238},"letter-spacing",[224,831,329],{"class":230},[224,833,834],{"class":238},".08",[224,836,570],{"class":338},[224,838,380],{"class":230},[224,840,842],{"class":226,"line":841},45,[224,843,498],{"class":230},[224,845,847,850,852],{"class":226,"line":846},46,[224,848,849],{"class":230},"\u003C\u002F",[224,851,312],{"class":234},[224,853,242],{"class":230},[224,855,857,859,861],{"class":226,"line":856},47,[224,858,849],{"class":230},[224,860,270],{"class":234},[224,862,242],{"class":230},[224,864,866,868,871],{"class":226,"line":865},48,[224,867,248],{"class":230},[224,869,870],{"class":234},"body",[224,872,242],{"class":230},[224,874,876,879,882,885,887,890],{"class":226,"line":875},49,[224,877,878],{"class":230},"  \u003C",[224,880,881],{"class":234},"div",[224,883,884],{"class":238}," class",[224,886,256],{"class":230},[224,888,889],{"class":259},"\"wrap\"",[224,891,242],{"class":230},[224,893,895,898,901,903,905,908],{"class":226,"line":894},50,[224,896,897],{"class":230},"    \u003C",[224,899,900],{"class":234},"article",[224,902,884],{"class":238},[224,904,256],{"class":230},[224,906,907],{"class":259},"\"ticket is-urgent\"",[224,909,242],{"class":230},[224,911,913,916,918,920,922,925,928,930],{"class":226,"line":912},51,[224,914,915],{"class":230},"      \u003C",[224,917,14],{"class":234},[224,919,884],{"class":238},[224,921,256],{"class":230},[224,923,924],{"class":259},"\"ticket__label\"",[224,926,927],{"class":230},">Urgent\u003C\u002F",[224,929,14],{"class":234},[224,931,242],{"class":230},[224,933,935,937,939,941,943,946,949,951],{"class":226,"line":934},52,[224,936,915],{"class":230},[224,938,14],{"class":234},[224,940,884],{"class":238},[224,942,256],{"class":230},[224,944,945],{"class":259},"\"ticket__text\"",[224,947,948],{"class":230},">Certificate expires in 48 hours on edge-gateway-03.\u003C\u002F",[224,950,14],{"class":234},[224,952,242],{"class":230},[224,954,956,959,961],{"class":226,"line":955},53,[224,957,958],{"class":230},"    \u003C\u002F",[224,960,900],{"class":234},[224,962,242],{"class":230},[224,964,966,969,971],{"class":226,"line":965},54,[224,967,968],{"class":230},"  \u003C\u002F",[224,970,881],{"class":234},[224,972,242],{"class":230},[224,974,976,978,980],{"class":226,"line":975},55,[224,977,849],{"class":230},[224,979,870],{"class":234},[224,981,242],{"class":230},[224,983,985,987,989],{"class":226,"line":984},56,[224,986,849],{"class":230},[224,988,219],{"class":234},[224,990,242],{"class":230},[14,992,993,994,997],{},"Two design decisions in that sheet are worth naming. The urgency is communicated by a text label, not by colour alone — so the enhancement layer is genuinely cosmetic and its absence costs nothing in comprehension, which is also what WCAG 1.4.1 requires. And ",[18,995,996],{},"color-mix()"," appears only inside layer 3; putting a newer colour function in the baseline would create a second, unrelated support cliff underneath the first.",[37,999],{},[40,1001,1003],{"id":1002},"key-technique-keep-the-enhancement-strictly-additive","Key technique: keep the enhancement strictly additive",[14,1005,1006,1007,1009,1010,1013],{},"The discipline that makes this work is a rule about what may go inside a ",[18,1008,20],{}," block. Permitted: refinements that adjust something the baseline already establishes — a border width the baseline already set, a background it already declared, a spacing value it already chose. Not permitted: anything that first ",[570,1011,1012],{},"creates"," structure or meaning.",[14,1015,1016,1017,350,1020,350,1023,1026,1027,1030],{},"Concretely, do not put ",[18,1018,1019],{},"display",[18,1021,1022],{},"grid-template-columns",[18,1024,1025],{},"position",", or ",[18,1028,1029],{},"content"," inside a style query unless the baseline already produces a coherent layout without them. Do not let a style query be the only thing that gives an element a visible boundary, a readable contrast ratio, or an accessible name. If you find yourself writing a baseline rule whose only purpose is to be overridden by the query, you have inverted the layers: the baseline should be the design, and the query should be the polish.",[14,1032,1033,1034,1037],{},"A quick test catches violations. Comment out every ",[18,1035,1036],{},"@container style("," line in your build and reload. Anything that looks broken rather than merely plainer is a bug in the layering, not a browser problem.",[37,1039],{},[40,1041,1043],{"id":1042},"variation-opting-into-a-javascript-mirror-and-why-usually-not-to","Variation: opting into a JavaScript mirror, and why usually not to",[14,1045,1046],{},"Where a style query really is load-bearing — a product surface that must render one specific way even on a browser version from before the feature landed — the mirror is to read the token in script and reflect it onto a class:",[215,1048,1052],{"className":1049,"code":1050,"language":1051,"meta":220,"style":220},"language-js shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F Only worth doing when the enhancement genuinely cannot be optional.\nconst el = document.querySelector('.wrap');\nconst priority = getComputedStyle(el).getPropertyValue('--priority').trim();\nel.classList.toggle('wrap--urgent', priority === 'urgent');\n","js",[18,1053,1054,1059,1084,1116],{"__ignoreMap":220},[224,1055,1056],{"class":226,"line":227},[224,1057,1058],{"class":413},"\u002F\u002F Only worth doing when the enhancement genuinely cannot be optional.\n",[224,1060,1061,1064,1067,1070,1073,1077,1079,1082],{"class":226,"line":245},[224,1062,1063],{"class":338},"const",[224,1065,1066],{"class":238}," el",[224,1068,1069],{"class":338}," =",[224,1071,1072],{"class":230}," document.",[224,1074,1076],{"class":1075},"sKwhi","querySelector",[224,1078,716],{"class":230},[224,1080,1081],{"class":259},"'.wrap'",[224,1083,812],{"class":230},[224,1085,1086,1088,1091,1093,1096,1099,1102,1104,1107,1110,1113],{"class":226,"line":265},[224,1087,1063],{"class":338},[224,1089,1090],{"class":238}," priority",[224,1092,1069],{"class":338},[224,1094,1095],{"class":1075}," getComputedStyle",[224,1097,1098],{"class":230},"(el).",[224,1100,1101],{"class":1075},"getPropertyValue",[224,1103,716],{"class":230},[224,1105,1106],{"class":259},"'--priority'",[224,1108,1109],{"class":230},").",[224,1111,1112],{"class":1075},"trim",[224,1114,1115],{"class":230},"();\n",[224,1117,1118,1121,1124,1126,1129,1132,1135,1138],{"class":226,"line":275},[224,1119,1120],{"class":230},"el.classList.",[224,1122,1123],{"class":1075},"toggle",[224,1125,716],{"class":230},[224,1127,1128],{"class":259},"'wrap--urgent'",[224,1130,1131],{"class":230},", priority ",[224,1133,1134],{"class":338},"===",[224,1136,1137],{"class":259}," 'urgent'",[224,1139,812],{"class":230},[14,1141,1142,1143,35],{},"Now the same state lives in a token and a class, and they can disagree. The script runs after first paint, so there is a visible flash before the class lands. And the class needs its own rule set duplicating the query block. Every one of those costs is permanent, and it is being paid to serve a slice of traffic that shrinks every month. That trade was already poor when an engine was missing the feature entirely; now that all three ship it, it is almost never worth making. Restructure the design so the enhancement can be optional instead — the same conclusion reached for version skew generally in ",[26,1144,1146],{"href":1145},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers\u002F","handling container query fallbacks for older browsers",[37,1148],{},[40,1150,1152],{"id":1151},"browser-support","Browser support",[14,1154,1155,1158,1159,1161,1162,35],{},[18,1156,1157],{},"@container style()"," for custom properties is supported in Chrome and Edge 111+, Firefox 151+, and Safari 18+. Every current engine evaluates it, so the question is version skew rather than engine choice: Firefox is the most recent to ship, which makes pre-151 Firefox the largest remaining slice, with pre-18 Safari behind it. Because there is no reliable feature test, the support strategy stays structural rather than conditional — write the baseline as the design, keep every ",[18,1160,20],{}," block additive, and verify by removing them. That same discipline is what genuinely unevenly-shipped features still require, as in ",[26,1163,1165],{"href":1164},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks\u002F","scroll-driven animation fallbacks",[37,1167],{},[40,1169,1171],{"id":1170},"faq","FAQ",[14,1173,1174,1181],{},[54,1175,1176,1177,1180],{},"Can ",[18,1178,1179],{},"@supports"," detect style queries?","\nNot with any property-value pair, because none correlates with style query support. Since every current engine implements the feature, the dependable approach is not detection at all but writing the enhancement so its absence is harmless.",[14,1183,1184,1187],{},[54,1185,1186],{},"What does a browser too old to support style queries render?","\nNothing from inside the block. The at-rule fails to parse as a recognised condition and is dropped whole, so only the rules outside the query apply. There is no partial application and no error.",[14,1189,1190,1193],{},[54,1191,1192],{},"Is a JavaScript fallback worth writing?","\nRarely. Reading a token and mirroring it onto a class duplicates the state in two places and reintroduces the flash of unstyled content that the declarative approach avoids.",[14,1195,1196,1199,1200,1203],{},[54,1197,1198],{},"How do I test the unsupported path without installing another browser?","\nTemporarily rename the at-rule to something unrecognised, such as ",[18,1201,1202],{},"@containerx",", in DevTools or a local build. Every style query block is then dropped and you see exactly what an unsupporting engine renders.",[37,1205],{},[40,1207,1209],{"id":1208},"related","Related",[1211,1212,1213,1223,1230,1237,1246],"ul",{},[1214,1215,1216,1219,1220,1222],"li",{},[26,1217,1218],{"href":28},"Style queries and container state"," — the parent guide for ",[18,1221,20],{}," syntax and evaluation.",[1214,1224,1225,1229],{},[26,1226,1228],{"href":1227},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties\u002F","Style queries with custom properties"," — the ancestor rule that decides where a token must be declared.",[1214,1231,1232,1236],{},[26,1233,1235],{"href":1234},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming\u002F","Container style query theming"," — a theme axis built so the base rules stand alone.",[1214,1238,1239,1242,1243,1245],{},[26,1240,1241],{"href":85},"Feature detection with @supports"," — what ",[18,1244,1179],{}," can and cannot answer for containment.",[1214,1247,1248,1252],{},[26,1249,1251],{"href":1250},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation\u002F","When to use JavaScript animation"," — the same cost-benefit reasoning applied to scripting a CSS effect.",[312,1254,1255],{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}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 .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}",{"title":220,"searchDepth":245,"depth":245,"links":1257},[1258,1259,1260,1261,1262,1263,1264,1265,1266],{"id":42,"depth":245,"text":43},{"id":68,"depth":245,"text":69},{"id":104,"depth":245,"text":105},{"id":212,"depth":245,"text":213},{"id":1002,"depth":245,"text":1003},{"id":1042,"depth":245,"text":1043},{"id":1151,"depth":245,"text":1152},{"id":1170,"depth":245,"text":1171},{"id":1208,"depth":245,"text":1209},"Style queries now ship in every engine, so fallbacks are about older versions: what a dropped style() block renders and how to layer an additive enhancement.","md",{"pageTitle":1270,"datePublished":1271,"dateModified":1271,"faq":1272},"Style Query Fallbacks and Support","2026-07-20",[1273,1276,1278,1280],{"q":1274,"a":1275},"Can @supports detect style queries?","Not with any property-value pair, because none correlates with style query support. Since every current engine implements the feature, the dependable approach is not detection at all but writing the enhancement so its absence is harmless.",{"q":1186,"a":1277},"Nothing from inside the block. The at-rule fails to parse as a recognised condition and is dropped whole, so only the rules outside the query apply. There is no partial application and no error.",{"q":1192,"a":1279},"Rarely. Reading a token and mirroring it onto a class duplicates the state in two places and reintroduces the flash of unstyled content that the declarative approach avoids.",{"q":1198,"a":1281},"Temporarily rename the at-rule to something unrecognised, such as @containerx, in DevTools or a local build. Every style query block is then dropped and you see exactly what an unsupporting engine renders.","\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support",{"title":5,"description":1267},"mastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support\u002Findex","2Vy53QRNGgFv7azW7P3DZCD7H2kwKUP6FxUp5qCX5x4",[1287,1290,1293,1296,1299,1302,1305,1308,1311,1314,1317,1320,1323,1326,1329,1332,1335,1338,1341,1344,1347,1350,1353,1356,1359,1362,1365,1368,1371,1374,1377,1380,1383,1386,1389,1392,1395,1398,1401,1404,1407,1410,1413,1416,1419,1422,1425,1427,1430,1433,1436,1439,1442,1445,1448,1451,1454,1457,1460,1463,1466,1469,1472,1475,1478,1481,1484,1487,1490,1493,1496,1498,1501,1504,1507,1510,1513,1516,1519,1522,1525,1528,1531,1534,1537,1540,1543,1546],{"path":1288,"title":1289},"\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":1291,"title":1292},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1294,"title":1295},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1297,"title":1298},"\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":1300,"title":1301},"\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":1303,"title":1304},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1306,"title":1307},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1309,"title":1310},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1312,"title":1313},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1315,"title":1316},"\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":1318,"title":1319},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1321,"title":1322},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1324,"title":1325},"\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":1327,"title":1328},"\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":1330,"title":1331},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1333,"title":1334},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1336,"title":1337},"\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":1339,"title":1340},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1342,"title":1343},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1345,"title":1346},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1348,"title":1349},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1351,"title":1352},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1354,"title":1355},"\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":1357,"title":1358},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1360,"title":1361},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1363,"title":1364},"\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":1366,"title":1367},"\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":1369,"title":1370},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1372,"title":1373},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1375,"title":1376},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1378,"title":1379},"\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":1381,"title":1382},"\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":1384,"title":1385},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1387,"title":1388},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1390,"title":1391},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1393,"title":1394},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1396,"title":1397},"\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":1399,"title":1400},"\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":1402,"title":1403},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1405,"title":1406},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1408,"title":1409},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1411,"title":1412},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1414,"title":1415},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1417,"title":1418},"\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":1420,"title":1421},"\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":1423,"title":1424},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":342,"title":1426},"Modern CSS Layouts & Micro-Interactions",{"path":1428,"title":1429},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1431,"title":1432},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1434,"title":1435},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1437,"title":1438},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1440,"title":1441},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1443,"title":1444},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1446,"title":1447},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1449,"title":1450},"\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":1452,"title":1453},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1455,"title":1456},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1458,"title":1459},"\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":1461,"title":1462},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1464,"title":1465},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1467,"title":1468},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1470,"title":1471},"\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":1473,"title":1474},"\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":1476,"title":1477},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1479,"title":1480},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1482,"title":1483},"\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":1485,"title":1486},"\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":1488,"title":1489},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1491,"title":1492},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1494,"title":1495},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1497,"title":34},"\u002Fmastering-container-queries-responsive-layouts",{"path":1499,"title":1500},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1502,"title":1503},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1505,"title":1506},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1508,"title":1509},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1511,"title":1512},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1514,"title":1515},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1517,"title":1518},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1520,"title":1521},"\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":1523,"title":1524},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1526,"title":1527},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1529,"title":1530},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1532,"title":1533},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1535,"title":1536},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1538,"title":1539},"\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":1541,"title":1542},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1544,"title":1545},"\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":1282,"title":5},1784566156607]