[{"data":1,"prerenderedAt":1788},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks\u002F":3,"content-all-pages":1525},{"id":4,"title":5,"body":6,"description":1505,"extension":1506,"meta":1507,"navigation":283,"path":1521,"seo":1522,"stem":1523,"__hash__":1524},"content\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks\u002Findex.md","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"type":7,"value":8,"toc":1495},"minimark",[9,13,23,28,31,34,46,57,135,139,142,146,266,909,915,919,922,952,966,976,990,994,999,1074,1083,1107,1111,1117,1324,1336,1339,1373,1377,1389,1398,1402,1419,1435,1445,1451,1455,1491],[10,11,5],"h1",{"id":12},"anchor-positioning-fallbacks-a-graceful-floor-for-older-browser-versions",[14,15,16,17,22],"p",{},"CSS anchor positioning is in Chrome and Edge from version 125, Safari from version 26, and Firefox from version 147. Every current engine ships it, so the old question — \"can I use this at all?\" — is settled. The question that remains is the ordinary one you ask of any recent CSS feature: what does the page do in the browser versions that are still out there and predate the ship date? The narrow problem this page solves is how to answer that with one component, one set of markup, one stylesheet, in which the placement gracefully degrades to something that has worked since 2005 without you maintaining two parallel implementations. It belongs to the ",[18,19,21],"a",{"href":20},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002F","CSS anchor positioning and overlays"," section, which covers what the properties do; this page is only about how to deploy them.",[24,25,27],"h2",{"id":26},"why-a-layered-override-beats-a-parallel-component","Why a layered override beats a parallel component",[14,29,30],{},"There are three ways to handle a recently shipped layout feature, and two of them go badly.",[14,32,33],{},"The first bad option is a runtime check that swaps components — detect support in JavaScript, render the anchored version or a library-positioned version. This produces two components that drift, doubles your visual test surface, and moves a styling decision into the render path where a hydration mismatch can flash the wrong one.",[14,35,36,37,41,42,45],{},"The second bad option is writing everything twice in CSS: a full ",[38,39,40],"code",{},"@supports not (anchor-name: --x)"," block containing a complete copy of the component, and a full positive block containing another. Every change to padding, colour, or typography now has to be made in two places, and the negated query has a subtle extra failure mode — an engine so old it does not implement ",[38,43,44],{},"@supports"," at all ignores both blocks and gets nothing.",[14,47,48,49,51,52,56],{},"The option that works is neither. Write the component once, unguarded, using a placement that every browser has understood for two decades. Then add a single ",[38,50,44],{}," block that overrides ",[53,54,55],"em",{},"only the declarations that describe placement"," — typically five or six lines. Nothing about the component's appearance is duplicated, and an engine without support never sees the block at all.",[58,59,65,66,65,70,65,74,65,81,65,93,65,98,65,103,65,108,65,113,65,117,65,121,65,126,65,130],"svg",{"viewBox":60,"role":61,"ariaLabel":62,"xmlns":63,"style":64},"0 0 720 320","img","A baseline stylesheet applies everywhere while a supports block overrides only the placement declarations","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[67,68,69],"title",{},"Baseline placement with a narrow enhancement on top",[71,72,73],"desc",{},"The unguarded baseline supplies appearance and an absolute placement; the supports block replaces only the placement declarations.",[75,76,80],"text",{"x":77,"y":78,"style":79},"360","30","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","One component, one narrow override",[82,83],"rect",{"x":84,"y":85,"width":86,"height":87,"rx":88,"fill":89,"stroke":90,"strokeWidth":91,"opacity":92},"40","58","640","96","10","none","currentColor","1.5","0.5",[75,94,97],{"x":77,"y":95,"style":96},"86","text-anchor:middle;fill:currentColor;font:13px sans-serif","baseline — every browser, no guard",[75,99,102],{"x":77,"y":100,"style":101},"112","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace","position: absolute; inset-block-end: 100%",[75,104,107],{"x":77,"y":105,"style":106},"136","text-anchor:middle;fill:currentColor;font:11px sans-serif;opacity:0.7","plus all colour, spacing and type — written once",[82,109],{"x":84,"y":110,"width":86,"height":87,"rx":88,"fill":111,"opacity":112},"180","#7aa2ff","0.24",[75,114,116],{"x":77,"y":115,"style":96},"208","enhancement — Chrome 125+, Safari 26+, Firefox 147+",[75,118,120],{"x":77,"y":119,"style":101},"234","position: fixed; position-anchor: --hint",[75,122,125],{"x":77,"y":123,"style":124},"258","text-anchor:middle;fill:currentColor;font:11px sans-serif;opacity:0.75","placement declarations only — nothing else repeated",[127,128],"line",{"x1":77,"y1":129,"x2":77,"y2":110,"stroke":90,"strokeWidth":91},"154",[75,131,134],{"x":77,"y":132,"style":133},"304","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.7","an engine without support never parses the second block",[24,136,138],{"id":137},"complete-working-implementation","Complete working implementation",[14,140,141],{},"The frame below renders the anchored placement in any current browser and the baseline in anything older, from the single stylesheet that follows it.",[143,144],"live-demo",{"name":145},"anchor-fallback-layered",[147,148,153],"pre",{"className":149,"code":150,"language":151,"meta":152,"style":152},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cdiv class=\"hint\">\n  \u003Cbutton type=\"button\" class=\"hint__trigger\" aria-describedby=\"hint-1\">What is this?\u003C\u002Fbutton>\n  \u003Cspan role=\"tooltip\" id=\"hint-1\" class=\"hint__panel\">Same panel, two placement engines.\u003C\u002Fspan>\n\u003C\u002Fdiv>\n","html","",[38,154,155,181,220,256],{"__ignoreMap":152},[156,157,159,163,167,171,174,178],"span",{"class":127,"line":158},1,[156,160,162],{"class":161},"suds8","\u003C",[156,164,166],{"class":165},"sne4z","div",[156,168,170],{"class":169},"s-5SL"," class",[156,172,173],{"class":161},"=",[156,175,177],{"class":176},"sT6z2","\"hint\"",[156,179,180],{"class":161},">\n",[156,182,184,187,190,193,195,198,200,202,205,208,210,213,216,218],{"class":127,"line":183},2,[156,185,186],{"class":161},"  \u003C",[156,188,189],{"class":165},"button",[156,191,192],{"class":169}," type",[156,194,173],{"class":161},[156,196,197],{"class":176},"\"button\"",[156,199,170],{"class":169},[156,201,173],{"class":161},[156,203,204],{"class":176},"\"hint__trigger\"",[156,206,207],{"class":169}," aria-describedby",[156,209,173],{"class":161},[156,211,212],{"class":176},"\"hint-1\"",[156,214,215],{"class":161},">What is this?\u003C\u002F",[156,217,189],{"class":165},[156,219,180],{"class":161},[156,221,223,225,227,230,232,235,238,240,242,244,246,249,252,254],{"class":127,"line":222},3,[156,224,186],{"class":161},[156,226,156],{"class":165},[156,228,229],{"class":169}," role",[156,231,173],{"class":161},[156,233,234],{"class":176},"\"tooltip\"",[156,236,237],{"class":169}," id",[156,239,173],{"class":161},[156,241,212],{"class":176},[156,243,170],{"class":169},[156,245,173],{"class":161},[156,247,248],{"class":176},"\"hint__panel\"",[156,250,251],{"class":161},">Same panel, two placement engines.\u003C\u002F",[156,253,156],{"class":165},[156,255,180],{"class":161},[156,257,259,262,264],{"class":127,"line":258},4,[156,260,261],{"class":161},"\u003C\u002F",[156,263,166],{"class":165},[156,265,180],{"class":161},[147,267,271],{"className":268,"code":269,"language":270,"meta":152,"style":152},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* ---- Baseline: parsed and applied by every browser ---- *\u002F\n\n\u002F* The wrapper is a containing block ONLY for the fallback placement. *\u002F\n.hint { position: relative; display: inline-block; }\n\n.hint__trigger {\n  font: inherit;\n  padding: 0.45rem 0.8rem;\n  border: 1px solid #d3d8e0;\n  border-radius: 0.45rem;\n  background: #fff;\n}\n\n.hint__panel {\n  position: absolute;\n  inset-block-end: calc(100% + 0.5rem);  \u002F* above the trigger, with a gap *\u002F\n  inset-inline-start: 50%;\n  translate: -50% 0;                      \u002F* the classic centring trick *\u002F\n  width: max-content;\n  max-width: 16rem;\n  padding: 0.45rem 0.7rem;\n  border-radius: 0.45rem;\n  background: #1e2430;\n  color: #fff;\n  font-size: 0.8rem;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n\u002F* ---- Enhancement: only placement is restated ---- *\u002F\n\n@supports (anchor-name: --x) {\n  \u002F* The wrapper no longer needs to be a containing block; the anchor is\n     the reference frame now, and static positioning frees the panel from\n     any ancestor clipping. *\u002F\n  .hint { position: static; }\n\n  .hint__trigger { anchor-name: --hint; }\n\n  .hint__panel {\n    position: fixed;\n    position-anchor: --hint;\n    position-area: block-start center;\n    position-try-fallbacks: flip-block;\n\n    \u002F* Undo the baseline's manual placement so it cannot interfere. *\u002F\n    inset: auto;\n    translate: none;\n    margin-block-end: 0.5rem;\n  }\n}\n\n\u002F* State handling is shared by both branches. *\u002F\n.hint__trigger:hover + .hint__panel,\n.hint__trigger:focus-visible + .hint__panel { opacity: 1; }\n","css",[38,272,273,279,285,290,321,326,335,349,371,393,407,420,426,431,439,452,486,501,523,536,551,569,582,594,606,621,634,654,659,664,670,675,689,695,701,707,724,729,742,747,755,768,777,793,802,807,813,826,838,852,858,863,868,874,888],{"__ignoreMap":152},[156,274,275],{"class":127,"line":158},[156,276,278],{"class":277},"sLBg1","\u002F* ---- Baseline: parsed and applied by every browser ---- *\u002F\n",[156,280,281],{"class":127,"line":183},[156,282,284],{"emptyLinePlaceholder":283},true,"\n",[156,286,287],{"class":127,"line":222},[156,288,289],{"class":277},"\u002F* The wrapper is a containing block ONLY for the fallback placement. *\u002F\n",[156,291,292,295,298,301,304,307,310,313,315,318],{"class":127,"line":258},[156,293,294],{"class":169},".hint",[156,296,297],{"class":161}," { ",[156,299,300],{"class":169},"position",[156,302,303],{"class":161},": ",[156,305,306],{"class":169},"relative",[156,308,309],{"class":161},"; ",[156,311,312],{"class":169},"display",[156,314,303],{"class":161},[156,316,317],{"class":169},"inline-block",[156,319,320],{"class":161},"; }\n",[156,322,324],{"class":127,"line":323},5,[156,325,284],{"emptyLinePlaceholder":283},[156,327,329,332],{"class":127,"line":328},6,[156,330,331],{"class":169},".hint__trigger",[156,333,334],{"class":161}," {\n",[156,336,338,341,343,346],{"class":127,"line":337},7,[156,339,340],{"class":169},"  font",[156,342,303],{"class":161},[156,344,345],{"class":169},"inherit",[156,347,348],{"class":161},";\n",[156,350,352,355,357,360,364,367,369],{"class":127,"line":351},8,[156,353,354],{"class":169},"  padding",[156,356,303],{"class":161},[156,358,359],{"class":169},"0.45",[156,361,363],{"class":362},"sHUrx","rem",[156,365,366],{"class":169}," 0.8",[156,368,363],{"class":362},[156,370,348],{"class":161},[156,372,374,377,379,382,385,388,391],{"class":127,"line":373},9,[156,375,376],{"class":169},"  border",[156,378,303],{"class":161},[156,380,381],{"class":169},"1",[156,383,384],{"class":362},"px",[156,386,387],{"class":169}," solid",[156,389,390],{"class":169}," #d3d8e0",[156,392,348],{"class":161},[156,394,396,399,401,403,405],{"class":127,"line":395},10,[156,397,398],{"class":169},"  border-radius",[156,400,303],{"class":161},[156,402,359],{"class":169},[156,404,363],{"class":362},[156,406,348],{"class":161},[156,408,410,413,415,418],{"class":127,"line":409},11,[156,411,412],{"class":169},"  background",[156,414,303],{"class":161},[156,416,417],{"class":169},"#fff",[156,419,348],{"class":161},[156,421,423],{"class":127,"line":422},12,[156,424,425],{"class":161},"}\n",[156,427,429],{"class":127,"line":428},13,[156,430,284],{"emptyLinePlaceholder":283},[156,432,434,437],{"class":127,"line":433},14,[156,435,436],{"class":169},".hint__panel",[156,438,334],{"class":161},[156,440,442,445,447,450],{"class":127,"line":441},15,[156,443,444],{"class":169},"  position",[156,446,303],{"class":161},[156,448,449],{"class":169},"absolute",[156,451,348],{"class":161},[156,453,455,458,460,463,466,469,472,475,478,480,483],{"class":127,"line":454},16,[156,456,457],{"class":169},"  inset-block-end",[156,459,303],{"class":161},[156,461,462],{"class":169},"calc",[156,464,465],{"class":161},"(",[156,467,468],{"class":169},"100",[156,470,471],{"class":362},"%",[156,473,474],{"class":362}," +",[156,476,477],{"class":169}," 0.5",[156,479,363],{"class":362},[156,481,482],{"class":161},");  ",[156,484,485],{"class":277},"\u002F* above the trigger, with a gap *\u002F\n",[156,487,489,492,494,497,499],{"class":127,"line":488},17,[156,490,491],{"class":169},"  inset-inline-start",[156,493,303],{"class":161},[156,495,496],{"class":169},"50",[156,498,471],{"class":362},[156,500,348],{"class":161},[156,502,504,507,509,512,514,517,520],{"class":127,"line":503},18,[156,505,506],{"class":169},"  translate",[156,508,303],{"class":161},[156,510,511],{"class":169},"-50",[156,513,471],{"class":362},[156,515,516],{"class":169}," 0",[156,518,519],{"class":161},";                      ",[156,521,522],{"class":277},"\u002F* the classic centring trick *\u002F\n",[156,524,526,529,531,534],{"class":127,"line":525},19,[156,527,528],{"class":169},"  width",[156,530,303],{"class":161},[156,532,533],{"class":169},"max-content",[156,535,348],{"class":161},[156,537,539,542,544,547,549],{"class":127,"line":538},20,[156,540,541],{"class":169},"  max-width",[156,543,303],{"class":161},[156,545,546],{"class":169},"16",[156,548,363],{"class":362},[156,550,348],{"class":161},[156,552,554,556,558,560,562,565,567],{"class":127,"line":553},21,[156,555,354],{"class":169},[156,557,303],{"class":161},[156,559,359],{"class":169},[156,561,363],{"class":362},[156,563,564],{"class":169}," 0.7",[156,566,363],{"class":362},[156,568,348],{"class":161},[156,570,572,574,576,578,580],{"class":127,"line":571},22,[156,573,398],{"class":169},[156,575,303],{"class":161},[156,577,359],{"class":169},[156,579,363],{"class":362},[156,581,348],{"class":161},[156,583,585,587,589,592],{"class":127,"line":584},23,[156,586,412],{"class":169},[156,588,303],{"class":161},[156,590,591],{"class":169},"#1e2430",[156,593,348],{"class":161},[156,595,597,600,602,604],{"class":127,"line":596},24,[156,598,599],{"class":169},"  color",[156,601,303],{"class":161},[156,603,417],{"class":169},[156,605,348],{"class":161},[156,607,609,612,614,617,619],{"class":127,"line":608},25,[156,610,611],{"class":169},"  font-size",[156,613,303],{"class":161},[156,615,616],{"class":169},"0.8",[156,618,363],{"class":362},[156,620,348],{"class":161},[156,622,624,627,629,632],{"class":127,"line":623},26,[156,625,626],{"class":169},"  opacity",[156,628,303],{"class":161},[156,630,631],{"class":169},"0",[156,633,348],{"class":161},[156,635,637,640,643,646,649,652],{"class":127,"line":636},27,[156,638,639],{"class":169},"  transition",[156,641,642],{"class":161},": opacity ",[156,644,645],{"class":169},"0.15",[156,647,648],{"class":362},"s",[156,650,651],{"class":169}," ease",[156,653,348],{"class":161},[156,655,657],{"class":127,"line":656},28,[156,658,425],{"class":161},[156,660,662],{"class":127,"line":661},29,[156,663,284],{"emptyLinePlaceholder":283},[156,665,667],{"class":127,"line":666},30,[156,668,669],{"class":277},"\u002F* ---- Enhancement: only placement is restated ---- *\u002F\n",[156,671,673],{"class":127,"line":672},31,[156,674,284],{"emptyLinePlaceholder":283},[156,676,678,680,683,686],{"class":127,"line":677},32,[156,679,44],{"class":362},[156,681,682],{"class":161}," (",[156,684,685],{"class":169},"anchor-name",[156,687,688],{"class":161},": --x) {\n",[156,690,692],{"class":127,"line":691},33,[156,693,694],{"class":277},"  \u002F* The wrapper no longer needs to be a containing block; the anchor is\n",[156,696,698],{"class":127,"line":697},34,[156,699,700],{"class":277},"     the reference frame now, and static positioning frees the panel from\n",[156,702,704],{"class":127,"line":703},35,[156,705,706],{"class":277},"     any ancestor clipping. *\u002F\n",[156,708,710,713,715,717,719,722],{"class":127,"line":709},36,[156,711,712],{"class":169},"  .hint",[156,714,297],{"class":161},[156,716,300],{"class":169},[156,718,303],{"class":161},[156,720,721],{"class":169},"static",[156,723,320],{"class":161},[156,725,727],{"class":127,"line":726},37,[156,728,284],{"emptyLinePlaceholder":283},[156,730,732,735,737,739],{"class":127,"line":731},38,[156,733,734],{"class":169},"  .hint__trigger",[156,736,297],{"class":161},[156,738,685],{"class":169},[156,740,741],{"class":161},": --hint; }\n",[156,743,745],{"class":127,"line":744},39,[156,746,284],{"emptyLinePlaceholder":283},[156,748,750,753],{"class":127,"line":749},40,[156,751,752],{"class":169},"  .hint__panel",[156,754,334],{"class":161},[156,756,758,761,763,766],{"class":127,"line":757},41,[156,759,760],{"class":169},"    position",[156,762,303],{"class":161},[156,764,765],{"class":169},"fixed",[156,767,348],{"class":161},[156,769,771,774],{"class":127,"line":770},42,[156,772,773],{"class":169},"    position-anchor",[156,775,776],{"class":161},": --hint;\n",[156,778,780,783,785,788,791],{"class":127,"line":779},43,[156,781,782],{"class":169},"    position-area",[156,784,303],{"class":161},[156,786,787],{"class":169},"block-start",[156,789,790],{"class":169}," center",[156,792,348],{"class":161},[156,794,796,799],{"class":127,"line":795},44,[156,797,798],{"class":169},"    position-try-fallbacks",[156,800,801],{"class":161},": flip-block;\n",[156,803,805],{"class":127,"line":804},45,[156,806,284],{"emptyLinePlaceholder":283},[156,808,810],{"class":127,"line":809},46,[156,811,812],{"class":277},"    \u002F* Undo the baseline's manual placement so it cannot interfere. *\u002F\n",[156,814,816,819,821,824],{"class":127,"line":815},47,[156,817,818],{"class":169},"    inset",[156,820,303],{"class":161},[156,822,823],{"class":169},"auto",[156,825,348],{"class":161},[156,827,829,832,834,836],{"class":127,"line":828},48,[156,830,831],{"class":169},"    translate",[156,833,303],{"class":161},[156,835,89],{"class":169},[156,837,348],{"class":161},[156,839,841,844,846,848,850],{"class":127,"line":840},49,[156,842,843],{"class":169},"    margin-block-end",[156,845,303],{"class":161},[156,847,92],{"class":169},[156,849,363],{"class":362},[156,851,348],{"class":161},[156,853,855],{"class":127,"line":854},50,[156,856,857],{"class":161},"  }\n",[156,859,861],{"class":127,"line":860},51,[156,862,425],{"class":161},[156,864,866],{"class":127,"line":865},52,[156,867,284],{"emptyLinePlaceholder":283},[156,869,871],{"class":127,"line":870},53,[156,872,873],{"class":277},"\u002F* State handling is shared by both branches. *\u002F\n",[156,875,877,880,882,885],{"class":127,"line":876},54,[156,878,879],{"class":169},".hint__trigger:hover",[156,881,474],{"class":362},[156,883,884],{"class":169}," .hint__panel",[156,886,887],{"class":161},",\n",[156,889,891,894,896,898,900,903,905,907],{"class":127,"line":890},55,[156,892,893],{"class":169},".hint__trigger:focus-visible",[156,895,474],{"class":362},[156,897,884],{"class":169},[156,899,297],{"class":161},[156,901,902],{"class":169},"opacity",[156,904,303],{"class":161},[156,906,381],{"class":169},[156,908,320],{"class":161},[14,910,911,912,914],{},"The block inside ",[38,913,44],{}," is nine declarations. Everything else — colour, radius, typography, the reveal transition, the hover and focus selectors — exists once and is unaffected by which branch runs.",[24,916,918],{"id":917},"the-technique-undoing-the-baseline-is-the-part-people-forget","The technique: undoing the baseline is the part people forget",[14,920,921],{},"Two lines in that enhancement block do more work than they look like they do, and omitting either produces a bug that is hard to attribute.",[14,923,924,927,928,931,932,935,936,939,940,943,944,947,948,951],{},[38,925,926],{},"inset: auto"," clears the baseline's ",[38,929,930],{},"inset-block-end"," and ",[38,933,934],{},"inset-inline-start",". Those declarations do not stop applying just because the element is now anchored — ",[38,937,938],{},"position-area"," and an explicit ",[38,941,942],{},"inset"," value both feed into the same placement computation, and a leftover ",[38,945,946],{},"inset-block-end: calc(100% + 0.5rem)"," will shrink the inset-modified containing block that ",[38,949,950],{},"position-try-fallbacks"," measures against. The symptom is the one described as a mystery in most bug reports: a tooltip that flips even though there is obviously room. Reset the insets explicitly.",[14,953,954,957,958,961,962,965],{},[38,955,956],{},"translate: none"," clears the centring transform. ",[38,959,960],{},"position-area: block-start center"," already centres the panel over its anchor, so leaving the baseline's ",[38,963,964],{},"translate: -50% 0"," in place shifts it half its own width to the left. This one is at least visible immediately, which is small mercy.",[14,967,968,969,972,973,975],{},"The general rule: any property the baseline uses to ",[53,970,971],{},"place"," the element must be neutralised in the enhancement, because ",[38,974,44],{}," blocks add declarations, they do not replace a rule wholesale. It is worth keeping the baseline's placement declarations grouped together in the source purely so the list of things to undo is obvious at a glance.",[14,977,978,981,982,985,986,989],{},[38,979,980],{},".hint { position: static; }"," is the third piece. The baseline needs ",[38,983,984],{},"position: relative"," on the wrapper to serve as a containing block; the enhancement does not, and dropping it back to static is what lets the anchored panel escape any ancestor with ",[38,987,988],{},"overflow: hidden",". This is the one respect in which the two branches are not merely cosmetically different — the fallback placement can be clipped by an overflowing ancestor and the anchored one cannot. Design the surrounding layout so that the fallback is not clipped, rather than assuming the enhancement will rescue it.",[24,991,993],{"id":992},"choosing-the-detection-test","Choosing the detection test",[14,995,996,998],{},[38,997,44],{}," evaluates a property\u002Fvalue pair, and which pair you pick matters more here than usual.",[147,1000,1002],{"className":268,"code":1001,"language":270,"meta":152,"style":152},"\u002F* Good: a value only a supporting parser accepts. *\u002F\n@supports (anchor-name: --x) { }\n\n\u002F* Also fine, and a stricter test of the placement machinery. *\u002F\n@supports (position-area: block-start) { }\n\n\u002F* Avoid: this property was renamed late; a positive result is not\n   proof that the current syntax is understood. *\u002F\n@supports (inset-area: top) { }\n",[38,1003,1004,1009,1020,1024,1029,1044,1048,1053,1058],{"__ignoreMap":152},[156,1005,1006],{"class":127,"line":158},[156,1007,1008],{"class":277},"\u002F* Good: a value only a supporting parser accepts. *\u002F\n",[156,1010,1011,1013,1015,1017],{"class":127,"line":183},[156,1012,44],{"class":362},[156,1014,682],{"class":161},[156,1016,685],{"class":169},[156,1018,1019],{"class":161},": --x) { }\n",[156,1021,1022],{"class":127,"line":222},[156,1023,284],{"emptyLinePlaceholder":283},[156,1025,1026],{"class":127,"line":258},[156,1027,1028],{"class":277},"\u002F* Also fine, and a stricter test of the placement machinery. *\u002F\n",[156,1030,1031,1033,1035,1037,1039,1041],{"class":127,"line":323},[156,1032,44],{"class":362},[156,1034,682],{"class":161},[156,1036,938],{"class":169},[156,1038,303],{"class":161},[156,1040,787],{"class":169},[156,1042,1043],{"class":161},") { }\n",[156,1045,1046],{"class":127,"line":328},[156,1047,284],{"emptyLinePlaceholder":283},[156,1049,1050],{"class":127,"line":337},[156,1051,1052],{"class":277},"\u002F* Avoid: this property was renamed late; a positive result is not\n",[156,1054,1055],{"class":127,"line":351},[156,1056,1057],{"class":277},"   proof that the current syntax is understood. *\u002F\n",[156,1059,1060,1062,1064,1067,1069,1072],{"class":127,"line":373},[156,1061,44],{"class":362},[156,1063,682],{"class":161},[156,1065,1066],{"class":169},"inset-area",[156,1068,303],{"class":161},[156,1070,1071],{"class":169},"top",[156,1073,1043],{"class":161},[14,1075,1076,1079,1080,1082],{},[38,1077,1078],{},"anchor-name: --x"," is the recommended test because the property is the entry point to the whole feature — an engine that parses it has the rest — and because a dashed ident is a value no unsupporting engine will accept by accident. Avoid testing ",[38,1081,1066],{},", the property's pre-standardisation name, since a browser could in principle support the old spelling and not the new one.",[14,1084,1085,1086,1089,1090,1093,1094,1096,1097,1101,1102,1106],{},"Combine conditions with ",[38,1087,1088],{},"and"," when your enhancement genuinely needs two features, but do not over-constrain. If your component uses anchoring plus ",[38,1091,1092],{},"@starting-style",", testing both means a browser with anchoring and no ",[38,1095,1092],{}," falls all the way back to the static placement when it could have had the good placement without the animation. Separate concerns into separate blocks. The syntax for compound and negated queries is covered in ",[18,1098,1100],{"href":1099},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports\u002F","feature detection with @supports",", and the same layering discipline applied to a different feature is worked through in ",[18,1103,1105],{"href":1104},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers\u002F","handling container query fallbacks for older browsers",".",[24,1108,1110],{"id":1109},"variation-keeping-the-branches-apart-with-cascade-layers","Variation: keeping the branches apart with cascade layers",[14,1112,1113,1114,1116],{},"On a component small enough to read in one screen, the baseline and the ",[38,1115,44],{}," block can sit next to each other. On a design system with dozens of tethered surfaces, it helps to separate them by cascade layer so that the enhancement can never be accidentally outranked by a more specific baseline selector written later.",[147,1118,1120],{"className":268,"code":1119,"language":270,"meta":152,"style":152},"@layer placement.base, placement.anchored;\n\n@layer placement.base {\n  .hint__panel {\n    position: absolute;\n    inset-block-end: calc(100% + 0.5rem);\n    inset-inline-start: 50%;\n    translate: -50% 0;\n  }\n}\n\n@layer placement.anchored {\n  @supports (anchor-name: --x) {\n    .hint__panel {\n      position: fixed;\n      position-anchor: --hint;\n      position-area: block-start center;\n      inset: auto;\n      translate: none;\n      margin-block-end: 0.5rem;\n    }\n  }\n}\n",[38,1121,1122,1130,1134,1141,1147,1157,1181,1194,1208,1212,1216,1220,1227,1238,1245,1256,1263,1276,1287,1298,1311,1316,1320],{"__ignoreMap":152},[156,1123,1124,1127],{"class":127,"line":158},[156,1125,1126],{"class":362},"@layer",[156,1128,1129],{"class":161}," placement.base, placement.anchored;\n",[156,1131,1132],{"class":127,"line":183},[156,1133,284],{"emptyLinePlaceholder":283},[156,1135,1136,1138],{"class":127,"line":222},[156,1137,1126],{"class":362},[156,1139,1140],{"class":161}," placement.base {\n",[156,1142,1143,1145],{"class":127,"line":258},[156,1144,752],{"class":169},[156,1146,334],{"class":161},[156,1148,1149,1151,1153,1155],{"class":127,"line":323},[156,1150,760],{"class":169},[156,1152,303],{"class":161},[156,1154,449],{"class":169},[156,1156,348],{"class":161},[156,1158,1159,1162,1164,1166,1168,1170,1172,1174,1176,1178],{"class":127,"line":328},[156,1160,1161],{"class":169},"    inset-block-end",[156,1163,303],{"class":161},[156,1165,462],{"class":169},[156,1167,465],{"class":161},[156,1169,468],{"class":169},[156,1171,471],{"class":362},[156,1173,474],{"class":362},[156,1175,477],{"class":169},[156,1177,363],{"class":362},[156,1179,1180],{"class":161},");\n",[156,1182,1183,1186,1188,1190,1192],{"class":127,"line":337},[156,1184,1185],{"class":169},"    inset-inline-start",[156,1187,303],{"class":161},[156,1189,496],{"class":169},[156,1191,471],{"class":362},[156,1193,348],{"class":161},[156,1195,1196,1198,1200,1202,1204,1206],{"class":127,"line":351},[156,1197,831],{"class":169},[156,1199,303],{"class":161},[156,1201,511],{"class":169},[156,1203,471],{"class":362},[156,1205,516],{"class":169},[156,1207,348],{"class":161},[156,1209,1210],{"class":127,"line":373},[156,1211,857],{"class":161},[156,1213,1214],{"class":127,"line":395},[156,1215,425],{"class":161},[156,1217,1218],{"class":127,"line":409},[156,1219,284],{"emptyLinePlaceholder":283},[156,1221,1222,1224],{"class":127,"line":422},[156,1223,1126],{"class":362},[156,1225,1226],{"class":161}," placement.anchored {\n",[156,1228,1229,1232,1234,1236],{"class":127,"line":428},[156,1230,1231],{"class":362},"  @supports",[156,1233,682],{"class":161},[156,1235,685],{"class":169},[156,1237,688],{"class":161},[156,1239,1240,1243],{"class":127,"line":433},[156,1241,1242],{"class":169},"    .hint__panel",[156,1244,334],{"class":161},[156,1246,1247,1250,1252,1254],{"class":127,"line":441},[156,1248,1249],{"class":169},"      position",[156,1251,303],{"class":161},[156,1253,765],{"class":169},[156,1255,348],{"class":161},[156,1257,1258,1261],{"class":127,"line":454},[156,1259,1260],{"class":169},"      position-anchor",[156,1262,776],{"class":161},[156,1264,1265,1268,1270,1272,1274],{"class":127,"line":488},[156,1266,1267],{"class":169},"      position-area",[156,1269,303],{"class":161},[156,1271,787],{"class":169},[156,1273,790],{"class":169},[156,1275,348],{"class":161},[156,1277,1278,1281,1283,1285],{"class":127,"line":503},[156,1279,1280],{"class":169},"      inset",[156,1282,303],{"class":161},[156,1284,823],{"class":169},[156,1286,348],{"class":161},[156,1288,1289,1292,1294,1296],{"class":127,"line":525},[156,1290,1291],{"class":169},"      translate",[156,1293,303],{"class":161},[156,1295,89],{"class":169},[156,1297,348],{"class":161},[156,1299,1300,1303,1305,1307,1309],{"class":127,"line":538},[156,1301,1302],{"class":169},"      margin-block-end",[156,1304,303],{"class":161},[156,1306,92],{"class":169},[156,1308,363],{"class":362},[156,1310,348],{"class":161},[156,1312,1313],{"class":127,"line":553},[156,1314,1315],{"class":161},"    }\n",[156,1317,1318],{"class":127,"line":571},[156,1319,857],{"class":161},[156,1321,1322],{"class":127,"line":584},[156,1323,425],{"class":161},[14,1325,1326,1327,1330,1331,1335],{},"Because later layers win regardless of selector specificity, the anchored rules apply even if someone later writes ",[38,1328,1329],{},".card .hint__panel { inset-block-end: 2rem }"," in the base layer. That is a meaningful safety property once more than one person maintains the stylesheet; ",[18,1332,1334],{"href":1333},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens\u002F","cascade layers for reset and tokens"," covers how to order layers across a whole system.",[14,1337,1338],{},"To review the fallback without switching browsers, break the test on purpose:",[147,1340,1342],{"className":268,"code":1341,"language":270,"meta":152,"style":152},"\u002F* Temporarily forces every engine down the baseline path. *\u002F\n@supports (anchor-name: --x) and (nonsense-property: 1) { }\n",[38,1343,1344,1349],{"__ignoreMap":152},[156,1345,1346],{"class":127,"line":158},[156,1347,1348],{"class":277},"\u002F* Temporarily forces every engine down the baseline path. *\u002F\n",[156,1350,1351,1353,1355,1357,1360,1362,1364,1367,1369,1371],{"class":127,"line":183},[156,1352,44],{"class":362},[156,1354,682],{"class":161},[156,1356,685],{"class":169},[156,1358,1359],{"class":161},": --x) ",[156,1361,1088],{"class":362},[156,1363,682],{"class":161},[156,1365,1366],{"class":169},"nonsense-property",[156,1368,303],{"class":161},[156,1370,381],{"class":169},[156,1372,1043],{"class":161},[24,1374,1376],{"id":1375},"browser-support","Browser support",[14,1378,1379,1380,1382,1383,1385,1386,1388],{},"Anchor positioning is available in Chrome 125+, Edge 125+, Safari 26+, and Firefox 147+; ",[38,1381,950],{}," arrived in Chrome and Edge 128, and ",[38,1384,938],{}," in Chrome and Edge 129, so a Chromium build between 125 and 128 parses ",[38,1387,685],{}," while ignoring parts of the placement layer. That is the practical reason to keep the baseline in place even though the feature is interoperable at head: your support floor, not your support ceiling, decides whether the fallback runs.",[14,1390,1391,1393,1394,1397],{},[38,1392,44],{}," itself is universal in every browser you would target, and cascade layers are supported in Chrome 99+, Edge 99+, Firefox 97+, and Safari 15.4+, so the layering strategy above is safe everywhere. The baseline placement uses ",[38,1395,1396],{},"position: absolute"," with logical inset properties, which have been interoperable for years — comfortably older than anything still in circulation.",[24,1399,1401],{"id":1400},"faq","FAQ",[14,1403,1404,1411,1412,1415,1416,1418],{},[1405,1406,1407,1408,1410],"strong",{},"What is the right ",[38,1409,44],{}," test for anchor positioning?","\nTest a property and value pair that only a supporting engine parses, such as ",[38,1413,1414],{},"@supports (anchor-name: --x)",". Testing the property name alone is not enough, and testing ",[38,1417,950],{}," is riskier because its name changed late in development.",[14,1420,1421,1428,1429,1431,1432,1434],{},[1405,1422,1423,1424,1427],{},"Should I use ",[38,1425,1426],{},"@supports not"," to write the fallback?","\nPrefer writing the baseline unguarded and putting only the enhancement inside ",[38,1430,44],{},". A negated query means engines that do not understand ",[38,1433,44],{}," at all skip your fallback too, and it doubles the number of rules that must be kept in sync.",[14,1436,1437,1440,1441,1444],{},[1405,1438,1439],{},"How do I review the fallback when every current browser supports the feature?","\nTemporarily change the test to something no engine supports, such as ",[38,1442,1443],{},"@supports (anchor-name: --x) and (nonsense: 1)",". Every browser then fails the query and renders the baseline, which lets you review it in the browser you already have open without hunting down an old build.",[14,1446,1447,1450],{},[1405,1448,1449],{},"Is a JavaScript positioning library still worth loading as a fallback?","\nRarely, now that every current engine positions natively. Consider it only when the placement is genuinely load-bearing, such as a menu that would cover the control it belongs to, and your support floor still includes pre-2026 browser versions. For hints and dropdowns a static CSS placement is good enough.",[24,1452,1454],{"id":1453},"related","Related",[1456,1457,1458,1464,1471,1478,1484],"ul",{},[1459,1460,1461,1463],"li",{},[18,1462,21],{"href":20}," — the parent guide to the property set being guarded here.",[1459,1465,1466,1470],{},[18,1467,1469],{"href":1468},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips\u002F","Anchor positioned tooltips"," — the component this fallback pattern most often wraps.",[1459,1472,1473,1477],{},[18,1474,1476],{"href":1475},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling\u002F","Popover attribute and CSS styling"," — overlay behaviour that needs no fallback at all.",[1459,1479,1480,1483],{},[18,1481,1482],{"href":1099},"Feature detection with @supports"," — the detection syntax in depth.",[1459,1485,1486,1490],{},[18,1487,1489],{"href":1488},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css\u002F","Reducing motion preferences in CSS"," — cross-area: the same progressive-enhancement discipline applied to motion.",[1492,1493,1494],"style",{},"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 .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 .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}",{"title":152,"searchDepth":183,"depth":183,"links":1496},[1497,1498,1499,1500,1501,1502,1503,1504],{"id":26,"depth":183,"text":27},{"id":137,"depth":183,"text":138},{"id":917,"depth":183,"text":918},{"id":992,"depth":183,"text":993},{"id":1109,"depth":183,"text":1110},{"id":1375,"depth":183,"text":1376},{"id":1400,"depth":183,"text":1401},{"id":1453,"depth":183,"text":1454},"Ship CSS anchor positioning today: detect it with @supports (anchor-name: --x), build an absolute baseline for every browser, then override just the placement.","md",{"pageTitle":1508,"datePublished":1509,"dateModified":1509,"faq":1510},"Anchor Positioning Fallbacks in CSS","2026-07-20",[1511,1514,1517,1519],{"q":1512,"a":1513},"What is the right @supports test for anchor positioning?","Test a property and value pair that only a supporting engine parses, such as @supports (anchor-name: --x). Testing the property name alone is not enough, and testing position-try-fallbacks is riskier because its name changed late in development.",{"q":1515,"a":1516},"Should I use @supports not to write the fallback?","Prefer writing the baseline unguarded and putting only the enhancement inside @supports. A negated query means engines that do not understand @supports at all skip your fallback too, and it doubles the number of rules that must be kept in sync.",{"q":1439,"a":1518},"Temporarily change the test to something no engine supports, such as @supports (anchor-name: --x) and (nonsense: 1). Every browser then fails the query and renders the baseline, which lets you review it in the browser you already have open without hunting down an old build.",{"q":1449,"a":1520},"Rarely, now that every current engine positions natively. Consider it only when the placement is genuinely load-bearing, such as a menu that would cover the control it belongs to, and your support floor still includes pre-2026 browser versions. For hints and dropdowns a static CSS placement is good enough.","\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks",{"title":5,"description":1505},"mastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks\u002Findex","wh6KaUVymL5HVcZ2DivHoYpq7_JgcZWXpNpnkpa4Dak",[1526,1529,1532,1535,1538,1541,1544,1547,1550,1553,1556,1559,1562,1565,1568,1571,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1619,1622,1625,1628,1631,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661,1664,1667,1670,1671,1674,1677,1680,1683,1686,1689,1692,1695,1698,1701,1704,1707,1710,1713,1716,1719,1722,1725,1728,1731,1734,1737,1740,1743,1746,1749,1752,1755,1758,1761,1764,1767,1770,1773,1776,1779,1782,1785],{"path":1527,"title":1528},"\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":1530,"title":1531},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1533,"title":1534},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1536,"title":1537},"\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":1539,"title":1540},"\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":1542,"title":1543},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1545,"title":1546},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1548,"title":1549},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1551,"title":1552},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1554,"title":1555},"\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":1557,"title":1558},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1560,"title":1561},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1563,"title":1564},"\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":1566,"title":1567},"\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":1569,"title":1570},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1572,"title":1573},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1575,"title":1576},"\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":1578,"title":1579},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1581,"title":1582},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1584,"title":1585},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1587,"title":1588},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1590,"title":1591},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1593,"title":1594},"\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":1596,"title":1597},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1599,"title":1600},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1602,"title":1603},"\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":1605,"title":1606},"\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":1608,"title":1609},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1611,"title":1612},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1614,"title":1615},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1617,"title":1618},"\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":1620,"title":1621},"\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":1623,"title":1624},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1626,"title":1627},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1629,"title":1630},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1632,"title":1633},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1635,"title":1636},"\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":1638,"title":1639},"\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":1641,"title":1642},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1644,"title":1645},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1647,"title":1648},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1650,"title":1651},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1653,"title":1654},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1656,"title":1657},"\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":1659,"title":1660},"\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":1662,"title":1663},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":1665,"title":1666},"\u002F","Modern CSS Layouts & Micro-Interactions",{"path":1668,"title":1669},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1521,"title":5},{"path":1672,"title":1673},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1675,"title":1676},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1678,"title":1679},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1681,"title":1682},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1684,"title":1685},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1687,"title":1688},"\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":1690,"title":1691},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1693,"title":1694},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1696,"title":1697},"\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":1699,"title":1700},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1702,"title":1703},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1705,"title":1706},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1708,"title":1709},"\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":1711,"title":1712},"\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":1714,"title":1715},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1717,"title":1718},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1720,"title":1721},"\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":1723,"title":1724},"\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":1726,"title":1727},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1729,"title":1730},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1732,"title":1733},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1735,"title":1736},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":1738,"title":1739},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1741,"title":1742},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1744,"title":1745},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1747,"title":1748},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1750,"title":1751},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1753,"title":1754},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1756,"title":1757},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1759,"title":1760},"\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":1762,"title":1763},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1765,"title":1766},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1768,"title":1769},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1771,"title":1772},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1774,"title":1775},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1777,"title":1778},"\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":1780,"title":1781},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1783,"title":1784},"\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":1786,"title":1787},"\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",1784566157143]