[{"data":1,"prerenderedAt":1899},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools\u002F":3,"content-all-pages":1336,"live-demo:cq-debug-labels":1893},{"id":4,"title":5,"body":6,"description":1317,"extension":1318,"meta":1319,"navigation":379,"path":1332,"seo":1333,"stem":1334,"__hash__":1335},"content\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools\u002Findex.md","Debugging Container Queries in DevTools: Why a Rule Doesn't Match",{"type":7,"value":8,"toc":1307},"minimark",[9,13,33,38,58,177,180,184,187,667,677,697,707,731,735,738,811,827,831,834,847,864,874,880,884,887,1183,1186,1190,1208,1212,1221,1225,1237,1246,1256,1270,1274,1304],[10,11,5],"h1",{"id":12},"debugging-container-queries-in-devtools-why-a-rule-doesnt-match",[14,15,16,17,21,22,27,28,32],"p",{},"Media queries fail in one way: the viewport is not the size you thought. Container queries have more moving parts — which ancestor is the container, whether it has the right type, whether its name matches, how big it actually is — and each part fails silently. The ",[18,19,20],"code",{},"@container"," rule is simply never applied, with no error. The narrow problem this page solves is diagnosing that silence quickly, with a checklist that maps each symptom to its cause and the DevTools features in Chrome, Firefox and Safari that reveal it. It belongs to ",[23,24,26],"a",{"href":25},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002F","Container Query Syntax Basics"," in the ",[23,29,31],{"href":30},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide.",[34,35,37],"h2",{"id":36},"why-container-queries-fail-silently","Why container queries fail silently",[14,39,40,41,45,46,49,50,53,54,57],{},"A container query is evaluated in three stages. First, the browser searches ancestors of the styled element for a ",[42,43,44],"em",{},"query container",": an element with a ",[18,47,48],{},"container-type"," other than ",[18,51,52],{},"normal",", and a ",[18,55,56],{},"container-name"," matching the rule's name if the rule has one. Second, it measures that container's content box. Third, it evaluates the condition against the measurement. A failure at any stage makes the rule inapplicable, and CSS has no way to report that except by not applying styles.",[59,60,66,67,66,71,66,75,66,83,66,93,66,99,66,104,66,113,66,115,66,118,66,121,66,125,66,127,66,131,66,134,66,140,66,144,66,148,66,151,66,155,66,157,66,160,66,163,66,166,66,168,66,171,66,174],"svg",{"viewBox":61,"role":62,"ariaLabel":63,"xmlns":64,"style":65},"0 0 720 320","img","Three-stage pipeline of container query evaluation with the typical failure at each stage","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[68,69,70],"title",{},"Where a container query can fail",[72,73,74],"desc",{},"Stage one finds the container: fails if no ancestor has container-type or the name does not match. Stage two measures it: fails if the container collapsed to zero or lacks block-size containment for a height condition. Stage three evaluates the condition: fails if the condition is invalid or uses units unexpectedly.",[76,77,82],"text",{"textAnchor":78,"x":79,"y":80,"style":81},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","Three stages, three families of bug",[84,85],"rect",{"x":86,"y":87,"width":88,"height":89,"rx":90,"fill":91,"opacity":92},"20","56","210","80","10","#7aa2ff","0.28",[76,94,98],{"textAnchor":78,"x":95,"y":96,"style":97},"125","86","text-anchor:middle;fill:currentColor;font:700 13px sans-serif","1. Find container",[76,100,103],{"textAnchor":78,"x":95,"y":101,"style":102},"112","text-anchor:middle;fill:currentColor;font:12px sans-serif","nearest matching ancestor",[105,106],"line",{"x1":107,"y1":108,"x2":109,"y2":108,"stroke":110,"strokeWidth":111,"opacity":112},"230","96","255","currentColor","1.5","0.6",[84,114],{"x":109,"y":87,"width":88,"height":89,"rx":90,"fill":91,"opacity":92},[76,116,117],{"textAnchor":78,"x":79,"y":96,"style":97},"2. Measure it",[76,119,120],{"textAnchor":78,"x":79,"y":101,"style":102},"content-box size",[105,122],{"x1":123,"y1":108,"x2":124,"y2":108,"stroke":110,"strokeWidth":111,"opacity":112},"465","490",[84,126],{"x":124,"y":87,"width":88,"height":89,"rx":90,"fill":91,"opacity":92},[76,128,130],{"textAnchor":78,"x":129,"y":96,"style":97},"595","3. Evaluate",[76,132,133],{"textAnchor":78,"x":129,"y":101,"style":102},"condition against size",[84,135],{"x":86,"y":136,"width":88,"height":137,"rx":90,"fill":138,"stroke":110,"strokeWidth":111,"opacity":139},"160","120","none","0.55",[76,141,143],{"textAnchor":78,"x":95,"y":142,"style":102},"186","no container-type",[76,145,147],{"textAnchor":78,"x":95,"y":146,"style":102},"208","name mismatch",[76,149,150],{"textAnchor":78,"x":95,"y":107,"style":102},"querying itself",[76,152,154],{"textAnchor":78,"x":95,"y":153,"style":102},"252","wrong ancestor wins",[84,156],{"x":109,"y":136,"width":88,"height":137,"rx":90,"fill":138,"stroke":110,"strokeWidth":111,"opacity":139},[76,158,159],{"textAnchor":78,"x":79,"y":142,"style":102},"collapsed to 0px",[76,161,162],{"textAnchor":78,"x":79,"y":146,"style":102},"height on inline-size",[76,164,165],{"textAnchor":78,"x":79,"y":107,"style":102},"padding not counted",[84,167],{"x":124,"y":136,"width":88,"height":137,"rx":90,"fill":138,"stroke":110,"strokeWidth":111,"opacity":139},[76,169,170],{"textAnchor":78,"x":129,"y":142,"style":102},"and\u002For unparenthesised",[76,172,173],{"textAnchor":78,"x":129,"y":146,"style":102},"var() in condition",[76,175,176],{"textAnchor":78,"x":129,"y":107,"style":102},"em vs rem surprise",[14,178,179],{},"Knowing which stage failed narrows the search immediately. The workflow below checks them in order.",[34,181,183],{"id":182},"the-debugging-workflow","The debugging workflow",[14,185,186],{},"The sample below contains four deliberate bugs, one per common cause. Each fix is annotated.",[188,189,194],"pre",{"className":190,"code":191,"language":192,"meta":193,"style":193},"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>Container query bugs\u003C\u002Ftitle>\n\u003Cstyle>\n  \u002F* BUG 1: querying yourself. .card is the container AND the element\n     being styled, so the rule looks for a container ABOVE .card and\n     finds none. FIX: style a child, or make the parent the container. *\u002F\n  .card { container-type: inline-size; }\n  @container (width > 30rem) { .card { display: flex; } }            \u002F* never applies *\u002F\n  @container (width > 30rem) { .card__body { display: flex; } }      \u002F* works *\u002F\n\n  \u002F* BUG 2: name mismatch. The rule asks for \"sidebar\"; the ancestor is\n     named \"aside\". FIX: use the same name, or drop the name. *\u002F\n  .aside { container: aside \u002F inline-size; }\n  @container sidebar (width > 20rem) { .nav { columns: 2; } }        \u002F* never applies *\u002F\n\n  \u002F* BUG 3: height query on an inline-size container. Only size\n     containers can be queried on height. FIX: container-type: size\n     plus an explicit height, or query width instead. *\u002F\n  .tile { container-type: inline-size; }\n  @container (height > 10rem) { .tile__meta { display: block; } }    \u002F* never applies *\u002F\n\n  \u002F* BUG 4: collapsed container. A container is a flex item with no\n     basis, so its content-derived width is 0 and nothing matches.\n     FIX: give it flex: 1, a width, or align-self: stretch. *\u002F\n  .row { display: flex; }\n  .row > .widget { container-type: inline-size; }                   \u002F* 0px wide *\u002F\n  .row > .widget { flex: 1; }                                        \u002F* fixed *\u002F\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Carticle class=\"card\">\u003Cdiv class=\"card__body\">Body\u003C\u002Fdiv>\u003C\u002Farticle>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[18,195,196,215,235,245,263,277,287,294,300,306,320,350,374,381,387,393,407,433,438,444,450,456,468,493,498,504,510,516,533,554,578,588,597,607,649,658],{"__ignoreMap":193},[197,198,200,204,208,212],"span",{"class":105,"line":199},1,[197,201,203],{"class":202},"suds8","\u003C!",[197,205,207],{"class":206},"sne4z","doctype",[197,209,211],{"class":210},"s-5SL"," html",[197,213,214],{"class":202},">\n",[197,216,218,221,223,226,229,233],{"class":105,"line":217},2,[197,219,220],{"class":202},"\u003C",[197,222,192],{"class":206},[197,224,225],{"class":210}," lang",[197,227,228],{"class":202},"=",[197,230,232],{"class":231},"sT6z2","\"en\"",[197,234,214],{"class":202},[197,236,238,240,243],{"class":105,"line":237},3,[197,239,220],{"class":202},[197,241,242],{"class":206},"head",[197,244,214],{"class":202},[197,246,248,250,253,256,258,261],{"class":105,"line":247},4,[197,249,220],{"class":202},[197,251,252],{"class":206},"meta",[197,254,255],{"class":210}," charset",[197,257,228],{"class":202},[197,259,260],{"class":231},"\"utf-8\"",[197,262,214],{"class":202},[197,264,266,268,270,273,275],{"class":105,"line":265},5,[197,267,220],{"class":202},[197,269,68],{"class":206},[197,271,272],{"class":202},">Container query bugs\u003C\u002F",[197,274,68],{"class":206},[197,276,214],{"class":202},[197,278,280,282,285],{"class":105,"line":279},6,[197,281,220],{"class":202},[197,283,284],{"class":206},"style",[197,286,214],{"class":202},[197,288,290],{"class":105,"line":289},7,[197,291,293],{"class":292},"sLBg1","  \u002F* BUG 1: querying yourself. .card is the container AND the element\n",[197,295,297],{"class":105,"line":296},8,[197,298,299],{"class":292},"     being styled, so the rule looks for a container ABOVE .card and\n",[197,301,303],{"class":105,"line":302},9,[197,304,305],{"class":292},"     finds none. FIX: style a child, or make the parent the container. *\u002F\n",[197,307,309,312,315,317],{"class":105,"line":308},10,[197,310,311],{"class":210},"  .card",[197,313,314],{"class":202}," { ",[197,316,48],{"class":210},[197,318,319],{"class":202},": inline-size; }\n",[197,321,323,327,330,333,335,338,341,344,347],{"class":105,"line":322},11,[197,324,326],{"class":325},"sHUrx","  @container",[197,328,329],{"class":202}," (width > 30rem) { ",[197,331,332],{"class":210},".card",[197,334,314],{"class":202},[197,336,337],{"class":210},"display",[197,339,340],{"class":202},": ",[197,342,343],{"class":210},"flex",[197,345,346],{"class":202},"; } }            ",[197,348,349],{"class":292},"\u002F* never applies *\u002F\n",[197,351,353,355,357,360,362,364,366,368,371],{"class":105,"line":352},12,[197,354,326],{"class":325},[197,356,329],{"class":202},[197,358,359],{"class":210},".card__body",[197,361,314],{"class":202},[197,363,337],{"class":210},[197,365,340],{"class":202},[197,367,343],{"class":210},[197,369,370],{"class":202},"; } }      ",[197,372,373],{"class":292},"\u002F* works *\u002F\n",[197,375,377],{"class":105,"line":376},13,[197,378,380],{"emptyLinePlaceholder":379},true,"\n",[197,382,384],{"class":105,"line":383},14,[197,385,386],{"class":292},"  \u002F* BUG 2: name mismatch. The rule asks for \"sidebar\"; the ancestor is\n",[197,388,390],{"class":105,"line":389},15,[197,391,392],{"class":292},"     named \"aside\". FIX: use the same name, or drop the name. *\u002F\n",[197,394,396,399,401,404],{"class":105,"line":395},16,[197,397,398],{"class":210},"  .aside",[197,400,314],{"class":202},[197,402,403],{"class":210},"container",[197,405,406],{"class":202},": aside \u002F inline-size; }\n",[197,408,410,412,415,418,420,423,425,428,431],{"class":105,"line":409},17,[197,411,326],{"class":325},[197,413,414],{"class":202}," sidebar (width > 20rem) { ",[197,416,417],{"class":210},".nav",[197,419,314],{"class":202},[197,421,422],{"class":210},"columns",[197,424,340],{"class":202},[197,426,427],{"class":210},"2",[197,429,430],{"class":202},"; } }        ",[197,432,349],{"class":292},[197,434,436],{"class":105,"line":435},18,[197,437,380],{"emptyLinePlaceholder":379},[197,439,441],{"class":105,"line":440},19,[197,442,443],{"class":292},"  \u002F* BUG 3: height query on an inline-size container. Only size\n",[197,445,447],{"class":105,"line":446},20,[197,448,449],{"class":292},"     containers can be queried on height. FIX: container-type: size\n",[197,451,453],{"class":105,"line":452},21,[197,454,455],{"class":292},"     plus an explicit height, or query width instead. *\u002F\n",[197,457,459,462,464,466],{"class":105,"line":458},22,[197,460,461],{"class":210},"  .tile",[197,463,314],{"class":202},[197,465,48],{"class":210},[197,467,319],{"class":202},[197,469,471,473,476,479,481,483,485,488,491],{"class":105,"line":470},23,[197,472,326],{"class":325},[197,474,475],{"class":202}," (height > 10rem) { ",[197,477,478],{"class":210},".tile__meta",[197,480,314],{"class":202},[197,482,337],{"class":210},[197,484,340],{"class":202},[197,486,487],{"class":210},"block",[197,489,490],{"class":202},"; } }    ",[197,492,349],{"class":292},[197,494,496],{"class":105,"line":495},24,[197,497,380],{"emptyLinePlaceholder":379},[197,499,501],{"class":105,"line":500},25,[197,502,503],{"class":292},"  \u002F* BUG 4: collapsed container. A container is a flex item with no\n",[197,505,507],{"class":105,"line":506},26,[197,508,509],{"class":292},"     basis, so its content-derived width is 0 and nothing matches.\n",[197,511,513],{"class":105,"line":512},27,[197,514,515],{"class":292},"     FIX: give it flex: 1, a width, or align-self: stretch. *\u002F\n",[197,517,519,522,524,526,528,530],{"class":105,"line":518},28,[197,520,521],{"class":210},"  .row",[197,523,314],{"class":202},[197,525,337],{"class":210},[197,527,340],{"class":202},[197,529,343],{"class":210},[197,531,532],{"class":202},"; }\n",[197,534,536,538,541,544,546,548,551],{"class":105,"line":535},29,[197,537,521],{"class":210},[197,539,540],{"class":325}," >",[197,542,543],{"class":210}," .widget",[197,545,314],{"class":202},[197,547,48],{"class":210},[197,549,550],{"class":202},": inline-size; }                   ",[197,552,553],{"class":292},"\u002F* 0px wide *\u002F\n",[197,555,557,559,561,563,565,567,569,572,575],{"class":105,"line":556},30,[197,558,521],{"class":210},[197,560,540],{"class":325},[197,562,543],{"class":210},[197,564,314],{"class":202},[197,566,343],{"class":210},[197,568,340],{"class":202},[197,570,571],{"class":210},"1",[197,573,574],{"class":202},"; }                                        ",[197,576,577],{"class":292},"\u002F* fixed *\u002F\n",[197,579,581,584,586],{"class":105,"line":580},31,[197,582,583],{"class":202},"\u003C\u002F",[197,585,284],{"class":206},[197,587,214],{"class":202},[197,589,591,593,595],{"class":105,"line":590},32,[197,592,583],{"class":202},[197,594,242],{"class":206},[197,596,214],{"class":202},[197,598,600,602,605],{"class":105,"line":599},33,[197,601,220],{"class":202},[197,603,604],{"class":206},"body",[197,606,214],{"class":202},[197,608,610,613,616,619,621,624,627,630,632,634,637,640,642,645,647],{"class":105,"line":609},34,[197,611,612],{"class":202},"  \u003C",[197,614,615],{"class":206},"article",[197,617,618],{"class":210}," class",[197,620,228],{"class":202},[197,622,623],{"class":231},"\"card\"",[197,625,626],{"class":202},">\u003C",[197,628,629],{"class":206},"div",[197,631,618],{"class":210},[197,633,228],{"class":202},[197,635,636],{"class":231},"\"card__body\"",[197,638,639],{"class":202},">Body\u003C\u002F",[197,641,629],{"class":206},[197,643,644],{"class":202},">\u003C\u002F",[197,646,615],{"class":206},[197,648,214],{"class":202},[197,650,652,654,656],{"class":105,"line":651},35,[197,653,583],{"class":202},[197,655,604],{"class":206},[197,657,214],{"class":202},[197,659,661,663,665],{"class":105,"line":660},36,[197,662,583],{"class":202},[197,664,192],{"class":206},[197,666,214],{"class":202},[14,668,669,673,674,676],{},[670,671,672],"strong",{},"Step 1: confirm the rule exists and is unmatched."," Select the element you expected to change. In the Styles pane, an ",[18,675,20],{}," rule that is not applying is listed but greyed out or absent from the matched rules, depending on the browser. If the rule is not listed at all, the problem is the selector, not the container.",[14,678,679,682,683,685,686,689,690,693,694,696],{},[670,680,681],{},"Step 2: find the container the rule resolved against."," In Chrome and Edge, each ",[18,684,20],{}," rule in the Styles pane shows the container it resolved to, such as ",[18,687,688],{},"@container (width > 30rem)"," followed by ",[18,691,692],{},"div.card-slot",". Hovering highlights the container on the page; clicking selects it in the Elements tree. If it says no container was found, you are in stage one: check ",[18,695,48],{}," on the intended ancestor, the name, and whether you are styling the container itself.",[14,698,699,702,703,706],{},[670,700,701],{},"Step 3: read the container's size."," With the container selected, check the Computed pane or the box model diagram. The query compares against the ",[42,704,705],{},"content box"," — width minus padding and border. A container that looks 400 pixels wide with 24 pixels of padding each side is 352 pixels for query purposes. A reported width of zero means the container has collapsed.",[14,708,709,712,713,716,717,720,721,724,725,727,728,730],{},[670,710,711],{},"Step 4: check the condition."," Copy the condition into a scratch rule on the container itself as an ",[18,714,715],{},"@supports","-style sanity check: is it well-formed, are ",[18,718,719],{},"and"," and ",[18,722,723],{},"or"," grouped with parentheses, and does it use units you expect? In container conditions ",[18,726,42],{}," resolves against the container's font size, not the styled element's, which surprises people using ",[18,729,42],{},"-based thresholds.",[34,732,734],{"id":733},"the-key-technique-devtools-badges-and-overlays","The key technique: DevTools badges and overlays",[14,736,737],{},"Every major browser now marks containers in the Elements panel, which is the fastest way to see the containment structure of a page at a glance.",[59,739,66,742,66,745,66,748,66,751,66,757,66,763,66,768,66,772,66,777,66,781,66,785,66,790,66,795,66,801,66,807],{"viewBox":740,"role":62,"ariaLabel":741,"xmlns":64,"style":65},"0 0 720 280","An Elements tree with container badges on two ancestors; the styled element's rule resolves to the nearer one",[68,743,744],{},"Reading the container structure from the Elements panel",[72,746,747],{},"A DOM tree: main with a container badge named layout, section.cards without a badge, div.card-slot with a container badge, and h3.card__title. The title's container query resolves to the nearest badged ancestor, div.card-slot, not main.",[76,749,750],{"textAnchor":78,"x":79,"y":80,"style":81},"The nearest badged ancestor is the one measured",[76,752,756],{"textAnchor":753,"x":89,"y":754,"style":755},"start","70","text-anchor:start;fill:currentColor;font:13px ui-monospace,monospace","\u003Cmain>",[84,758],{"x":136,"y":759,"width":137,"height":760,"rx":761,"fill":91,"opacity":762},"54","24","12","0.4",[76,764,403],{"textAnchor":78,"x":765,"y":766,"style":767},"220","71","text-anchor:middle;fill:currentColor;font:11px ui-monospace,monospace",[76,769,771],{"textAnchor":753,"x":770,"y":770,"style":755},"110","\u003Csection class=\"cards\">",[76,773,776],{"textAnchor":753,"x":774,"y":775,"style":755},"140","150","\u003Cdiv class=\"card-slot\">",[84,778],{"x":779,"y":780,"width":137,"height":760,"rx":761,"fill":91,"opacity":762},"340","134",[76,782,403],{"textAnchor":78,"x":783,"y":784,"style":767},"400","151",[76,786,789],{"textAnchor":753,"x":787,"y":788,"style":755},"170","190","\u003Ch3 class=\"card__title\">",[791,792],"path",{"d":793,"fill":138,"stroke":91,"strokeWidth":794},"M160 184 C120 180 120 150 136 146","2.5",[76,796,800],{"textAnchor":753,"x":797,"y":798,"style":799},"480","192","text-anchor:start;fill:currentColor;font:12px sans-serif","@container resolves here",[105,802],{"x1":803,"y1":804,"x2":805,"y2":806,"stroke":110,"strokeWidth":111,"opacity":112},"470","188","430","158",[76,808,810],{"textAnchor":78,"x":79,"y":809,"style":102},"246","Unnamed queries use the nearest container; named ones skip non-matching names.",[14,812,813,814,816,817,819,820,822,823,826],{},"In Chrome and Edge, elements that establish a container show a ",[18,815,403],{}," badge in the Elements tree; clicking it toggles an overlay that outlines the container and labels its size. Firefox's inspector shows the container type in the rules view and marks container query rules with the condition. Safari's Web Inspector lists ",[18,818,20],{}," rules in the Styles sidebar and lets you inspect ancestors for ",[18,821,48],{},". In all three, the fastest test of a hypothesis is to edit the container's ",[18,824,825],{},"width"," in the Styles pane and watch the rule switch on and off.",[34,828,830],{"id":829},"subtler-failures-the-rule-matches-but-the-wrong-way","Subtler failures: the rule matches, but the wrong way",[14,832,833],{},"Not every container bug is a rule that never applies. Some rules apply at the wrong time, which is harder to notice.",[14,835,836,839,840,842,843,846],{},[670,837,838],{},"The wrong ancestor answered."," An unnamed ",[18,841,20],{}," rule uses the nearest container of any matching type. When a component is dropped inside another component that also establishes a container, the inner container becomes the one measured, and the thresholds suddenly apply to a much narrower box. Naming the containers each component depends on — ",[18,844,845],{},"container-name: card"," — makes the relationship explicit and immune to nesting.",[14,848,849,852,853,855,856,859,860,863],{},[670,850,851],{},"Units resolve somewhere unexpected."," Container conditions written in ",[18,854,42],{}," resolve against the container's computed font size, which may differ from the styled element's. Container query units such as ",[18,857,858],{},"cqi"," inside the rule's declarations resolve against the nearest container ",[42,861,862],{},"for that element",", which is not always the container the condition queried. When sizes look off by a consistent ratio, check which container each unit is measuring.",[14,865,866,869,870,873],{},[670,867,868],{},"The container changes size because of its own children."," An inline-size container ignores its children for its inline size, but a ",[18,871,872],{},"size"," container with a percentage height, or one inside a grid track sized by content, can change size when the query's styles change what is inside the track. The result is flicker at the threshold as the layout alternates. DevTools shows this as a rule that toggles on every frame; the fix is to give the container a size that does not depend on the queried content.",[14,875,876,879],{},[670,877,878],{},"Styles transition across the threshold."," If a transition is declared on a property that the query changes, crossing the threshold animates — which may be the intention, or may look like lag. Temporarily disabling transitions in DevTools distinguishes a slow query from an animation.",[34,881,883],{"id":882},"variation-a-debugging-stylesheet","Variation: a debugging stylesheet",[14,885,886],{},"For a component library, a small opt-in debugging stylesheet makes containers visible without opening DevTools, which helps designers and reviewers see what each component is responding to.",[188,888,892],{"className":889,"code":890,"language":891,"meta":193,"style":193},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* Include only in development, or behind a query parameter. *\u002F\n[data-debug-containers] :where([style*=\"container\"], .cq, [class*=\"-slot\"]) {\n  outline: 1px dashed #f59e0b;\n  outline-offset: -1px;\n}\n\n\u002F* Label each band the component is in by setting a token per band... *\u002F\n@container (width \u003C 20rem)          { .cq-label::after { content: \"compact\"; } }\n@container (20rem \u003C= width \u003C 40rem) { .cq-label::after { content: \"regular\"; } }\n@container (width >= 40rem)         { .cq-label::after { content: \"wide\"; } }\n\n\u002F* ...and printing it in a corner of the component. *\u002F\n[data-debug-containers] .cq-label::after {\n  position: absolute;\n  inset: 0 0 auto auto;\n  padding: 0 0.3rem;\n  font: 10px\u002F1.4 ui-monospace, monospace;\n  background: #fef3c7;\n  color: #78350f;\n}\n","css",[18,893,894,899,944,965,979,984,988,993,1016,1036,1056,1060,1065,1078,1090,1110,1127,1155,1167,1179],{"__ignoreMap":193},[197,895,896],{"class":105,"line":199},[197,897,898],{"class":292},"\u002F* Include only in development, or behind a query parameter. *\u002F\n",[197,900,901,904,907,910,913,916,918,921,924,927,930,933,936,938,941],{"class":105,"line":217},[197,902,903],{"class":202},"[",[197,905,906],{"class":210},"data-debug-containers",[197,908,909],{"class":202},"] ",[197,911,912],{"class":210},":where",[197,914,915],{"class":202},"([",[197,917,284],{"class":210},[197,919,920],{"class":325},"*=",[197,922,923],{"class":231},"\"container\"",[197,925,926],{"class":202},"], ",[197,928,929],{"class":210},".cq",[197,931,932],{"class":202},", [",[197,934,935],{"class":210},"class",[197,937,920],{"class":325},[197,939,940],{"class":231},"\"-slot\"",[197,942,943],{"class":202},"]) {\n",[197,945,946,949,951,953,956,959,962],{"class":105,"line":237},[197,947,948],{"class":210},"  outline",[197,950,340],{"class":202},[197,952,571],{"class":210},[197,954,955],{"class":325},"px",[197,957,958],{"class":210}," dashed",[197,960,961],{"class":210}," #f59e0b",[197,963,964],{"class":202},";\n",[197,966,967,970,972,975,977],{"class":105,"line":247},[197,968,969],{"class":210},"  outline-offset",[197,971,340],{"class":202},[197,973,974],{"class":210},"-1",[197,976,955],{"class":325},[197,978,964],{"class":202},[197,980,981],{"class":105,"line":265},[197,982,983],{"class":202},"}\n",[197,985,986],{"class":105,"line":279},[197,987,380],{"emptyLinePlaceholder":379},[197,989,990],{"class":105,"line":289},[197,991,992],{"class":292},"\u002F* Label each band the component is in by setting a token per band... *\u002F\n",[197,994,995,997,1000,1003,1005,1008,1010,1013],{"class":105,"line":296},[197,996,20],{"class":325},[197,998,999],{"class":202}," (width \u003C 20rem)          { ",[197,1001,1002],{"class":210},".cq-label::after",[197,1004,314],{"class":202},[197,1006,1007],{"class":210},"content",[197,1009,340],{"class":202},[197,1011,1012],{"class":231},"\"compact\"",[197,1014,1015],{"class":202},"; } }\n",[197,1017,1018,1020,1023,1025,1027,1029,1031,1034],{"class":105,"line":302},[197,1019,20],{"class":325},[197,1021,1022],{"class":202}," (20rem \u003C= width \u003C 40rem) { ",[197,1024,1002],{"class":210},[197,1026,314],{"class":202},[197,1028,1007],{"class":210},[197,1030,340],{"class":202},[197,1032,1033],{"class":231},"\"regular\"",[197,1035,1015],{"class":202},[197,1037,1038,1040,1043,1045,1047,1049,1051,1054],{"class":105,"line":308},[197,1039,20],{"class":325},[197,1041,1042],{"class":202}," (width >= 40rem)         { ",[197,1044,1002],{"class":210},[197,1046,314],{"class":202},[197,1048,1007],{"class":210},[197,1050,340],{"class":202},[197,1052,1053],{"class":231},"\"wide\"",[197,1055,1015],{"class":202},[197,1057,1058],{"class":105,"line":322},[197,1059,380],{"emptyLinePlaceholder":379},[197,1061,1062],{"class":105,"line":352},[197,1063,1064],{"class":292},"\u002F* ...and printing it in a corner of the component. *\u002F\n",[197,1066,1067,1069,1071,1073,1075],{"class":105,"line":376},[197,1068,903],{"class":202},[197,1070,906],{"class":210},[197,1072,909],{"class":202},[197,1074,1002],{"class":210},[197,1076,1077],{"class":202}," {\n",[197,1079,1080,1083,1085,1088],{"class":105,"line":383},[197,1081,1082],{"class":210},"  position",[197,1084,340],{"class":202},[197,1086,1087],{"class":210},"absolute",[197,1089,964],{"class":202},[197,1091,1092,1095,1097,1100,1103,1106,1108],{"class":105,"line":389},[197,1093,1094],{"class":210},"  inset",[197,1096,340],{"class":202},[197,1098,1099],{"class":210},"0",[197,1101,1102],{"class":210}," 0",[197,1104,1105],{"class":210}," auto",[197,1107,1105],{"class":210},[197,1109,964],{"class":202},[197,1111,1112,1115,1117,1119,1122,1125],{"class":105,"line":395},[197,1113,1114],{"class":210},"  padding",[197,1116,340],{"class":202},[197,1118,1099],{"class":210},[197,1120,1121],{"class":210}," 0.3",[197,1123,1124],{"class":325},"rem",[197,1126,964],{"class":202},[197,1128,1129,1132,1134,1136,1138,1141,1144,1147,1150,1153],{"class":105,"line":409},[197,1130,1131],{"class":210},"  font",[197,1133,340],{"class":202},[197,1135,90],{"class":210},[197,1137,955],{"class":325},[197,1139,1140],{"class":202},"\u002F",[197,1142,1143],{"class":210},"1.4",[197,1145,1146],{"class":210}," ui-monospace",[197,1148,1149],{"class":202},", ",[197,1151,1152],{"class":210},"monospace",[197,1154,964],{"class":202},[197,1156,1157,1160,1162,1165],{"class":105,"line":435},[197,1158,1159],{"class":210},"  background",[197,1161,340],{"class":202},[197,1163,1164],{"class":210},"#fef3c7",[197,1166,964],{"class":202},[197,1168,1169,1172,1174,1177],{"class":105,"line":440},[197,1170,1171],{"class":210},"  color",[197,1173,340],{"class":202},[197,1175,1176],{"class":210},"#78350f",[197,1178,964],{"class":202},[197,1180,1181],{"class":105,"line":446},[197,1182,983],{"class":202},[14,1184,1185],{},"The demo shows the idea on a single card: resize the frame and the corner tag updates as the container crosses each band boundary.",[1187,1188],"live-demo",{"name":1189},"cq-debug-labels",[14,1191,1192,1193,1197,1198,1202,1203,1207],{},"Printing the active band in each component turns a silent mechanism into a visible one, which is invaluable when tuning thresholds. The thresholds themselves are best written with the range syntax covered in ",[23,1194,1196],{"href":1195},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators\u002F","Container Query Range Syntax and Logic",", so bands never overlap. For the collapsed-container problem in depth, see ",[23,1199,1201],{"href":1200},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size\u002F","container-type: size vs inline-size",". The same DevTools discipline applies to motion: ",[23,1204,1206],{"href":1205},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools\u002F","Profiling Animations in DevTools"," covers the animation side of the panels.",[34,1209,1211],{"id":1210},"browser-support","Browser support",[14,1213,1214,1215,1217,1218,1220],{},"Container queries are supported in Chrome and Edge 105+, Firefox 110+ and Safari 16+. DevTools support for inspecting them is present in current versions of all three browsers: Chromium's Elements panel shows container badges and the resolved container for each ",[18,1216,20],{}," rule, Firefox's inspector shows container query rules and container types, and Safari's Web Inspector lists ",[18,1219,20],{}," rules in its Styles sidebar. Exact panel names and affordances change between releases, but the resolved-container information is available in all of them.",[34,1222,1224],{"id":1223},"faq","FAQ",[14,1226,1227,1233,1234,1236],{},[670,1228,1229,1230,1232],{},"Why does my ",[18,1231,20],{}," rule never apply?","\nThe most common causes are no ancestor with ",[18,1235,48],{}," set, a container name that does not match, a condition on height against an inline-size container, or a container that has collapsed to zero width. DevTools shows which container a rule resolved against, which usually identifies the cause within seconds.",[14,1238,1239,1242,1243,1245],{},[670,1240,1241],{},"How do I see which element a container query is measuring?","\nIn Chromium DevTools, the Styles pane shows each ",[18,1244,20],{}," rule with the container it resolved to; hovering it highlights the container on the page, and clicking it selects the container in the Elements tree. Firefox and Safari show the container query condition and let you inspect ancestors to find the container.",[14,1247,1248,1251,1252,1255],{},[670,1249,1250],{},"Why is my container zero pixels wide?","\nAn element with ",[18,1253,1254],{},"container-type: inline-size"," does not use its content to determine its inline size. If it sits in a shrink-to-fit context, such as a flex item without a basis or an absolutely positioned element without a width, it collapses to zero. Give it a width or let it stretch.",[14,1257,1258,1261,1262,1265,1266,1269],{},[670,1259,1260],{},"Can I test container queries without resizing the browser?","\nYes. Change the container's width directly in the Styles pane, or add ",[18,1263,1264],{},"resize: horizontal"," with ",[18,1267,1268],{},"overflow: auto"," to the container temporarily and drag its corner. Container queries respond to the container, so the viewport does not need to change.",[34,1271,1273],{"id":1272},"related","Related",[1275,1276,1277,1283,1290,1297],"ul",{},[1278,1279,1280,1282],"li",{},[23,1281,26],{"href":25}," — the parent guide.",[1278,1284,1285,1289],{},[23,1286,1288],{"href":1287},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries\u002F","Nesting and Naming Container Queries"," — how names change which container is found.",[1278,1291,1292,1296],{},[23,1293,1295],{"href":1294},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production\u002F","How to Use Container Queries in Production"," — structuring containers to avoid these bugs.",[1278,1298,1299,1303],{},[23,1300,1302],{"href":1301},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers\u002F","Suppressing Motion in Small Containers"," — container queries that gate animation.",[284,1305,1306],{},"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 .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":193,"searchDepth":217,"depth":217,"links":1308},[1309,1310,1311,1312,1313,1314,1315,1316],{"id":36,"depth":217,"text":37},{"id":182,"depth":217,"text":183},{"id":733,"depth":217,"text":734},{"id":829,"depth":217,"text":830},{"id":882,"depth":217,"text":883},{"id":1210,"depth":217,"text":1211},{"id":1223,"depth":217,"text":1224},{"id":1272,"depth":217,"text":1273},"Find out why a container query does not match: locate the resolved container, read its size, and spot collapsed containers and wrong names in each browser.","md",{"pageTitle":1320,"datePublished":1321,"dateModified":1321,"faq":1322},"Debugging Container Queries in DevTools","2026-09-18",[1323,1326,1328,1330],{"q":1324,"a":1325},"Why does my @container rule never apply?","The most common causes are no ancestor with container-type set, a container name that does not match, a condition on height against an inline-size container, or a container that has collapsed to zero width. DevTools shows which container a rule resolved against, which usually identifies the cause within seconds.",{"q":1241,"a":1327},"In Chromium DevTools, the Styles pane shows each @container rule with the container it resolved to; hovering it highlights the container on the page, and clicking it selects the container in the Elements tree. Firefox and Safari show the container query condition and let you inspect ancestors to find the container.",{"q":1250,"a":1329},"An element with container-type: inline-size does not use its content to determine its inline size. If it sits in a shrink-to-fit context, such as a flex item without a basis or an absolutely positioned element without a width, it collapses to zero. Give it a width or let it stretch.",{"q":1260,"a":1331},"Yes. Change the container's width directly in the Styles pane, or add resize: horizontal with overflow: auto to the container temporarily and drag its corner. Container queries respond to the container, so the viewport does not need to change.","\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools",{"title":5,"description":1317},"mastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools\u002Findex","nS98ViX3kX76wBo387DUXpAn5xRTXo4rIwTVea4iajY",[1337,1340,1343,1346,1349,1352,1355,1358,1361,1364,1367,1370,1373,1376,1379,1382,1385,1388,1391,1394,1397,1400,1403,1406,1409,1412,1415,1418,1421,1424,1427,1430,1433,1436,1439,1442,1445,1448,1451,1454,1457,1460,1463,1466,1469,1472,1475,1478,1481,1484,1487,1490,1493,1496,1499,1502,1505,1508,1511,1514,1517,1520,1523,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,1618,1621,1624,1627,1630,1633,1636,1639,1642,1645,1648,1651,1654,1657,1660,1663,1666,1669,1672,1673,1676,1678,1681,1684,1687,1690,1693,1696,1699,1702,1705,1708,1711,1714,1717,1720,1723,1726,1729,1732,1735,1738,1741,1744,1747,1750,1753,1755,1758,1761,1764,1767,1770,1773,1776,1779,1782,1785,1788,1791,1794,1797,1800,1803,1806,1809,1812,1815,1818,1821,1824,1827,1830,1833,1836,1839,1842,1845,1848,1851,1854,1857,1860,1863,1866,1869,1872,1875,1878,1881,1884,1887,1890],{"path":1338,"title":1339},"\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":1341,"title":1342},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1344,"title":1345},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1347,"title":1348},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1350,"title":1351},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fpause-controls-for-looping-animations","Pause Controls for Looping CSS Animations: Meeting WCAG 2.2.2",{"path":1353,"title":1354},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1356,"title":1357},"\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":1359,"title":1360},"\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":1362,"title":1363},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1365,"title":1366},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1368,"title":1369},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fanimated-gradient-borders-with-property","Animated Gradient Borders With @property: A Spinning Highlight Without Extra Elements",{"path":1371,"title":1372},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations","Clip-Path Reveal Animations: Wipes, Irises and Corners Without Extra Markup",{"path":1374,"title":1375},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1377,"title":1378},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmask-image-fade-edges","Fading Edges With mask-image: Soft Boundaries That Work on Any Background",{"path":1380,"title":1381},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmorphing-shapes-with-clip-path-polygon","Morphing Shapes With clip-path: polygon(): Point-Matched Transitions",{"path":1383,"title":1384},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1386,"title":1387},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fcolor-mix-hover-states","Hover and Active States With color-mix(): One Token, Every Shade",{"path":1389,"title":1390},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1392,"title":1393},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Flight-dark-function-for-themes","Light and Dark Themes With light-dark(): One Declaration per Colour",{"path":1395,"title":1396},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1398,"title":1399},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1401,"title":1402},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1404,"title":1405},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1407,"title":1408},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1410,"title":1411},"\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":1413,"title":1414},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1416,"title":1417},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1419,"title":1420},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1422,"title":1423},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1425,"title":1426},"\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":1428,"title":1429},"\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":1431,"title":1432},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1434,"title":1435},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1437,"title":1438},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1440,"title":1441},"\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":1443,"title":1444},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1446,"title":1447},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1449,"title":1450},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1452,"title":1453},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1455,"title":1456},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1458,"title":1459},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1461,"title":1462},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1464,"title":1465},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1467,"title":1468},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1470,"title":1471},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1473,"title":1474},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1476,"title":1477},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Finterpolate-size-for-height-auto-animation","Animating to height: auto With interpolate-size and calc-size()",{"path":1479,"title":1480},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1482,"title":1483},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1485,"title":1486},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1488,"title":1489},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1491,"title":1492},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1494,"title":1495},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Flinear-easing-function-for-springs","Spring and Bounce Easing With linear(): Physical Motion Without JavaScript",{"path":1497,"title":1498},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fsteps-easing-for-sprite-animations","steps() Easing: Sprite Sheets, Typewriters and Other Frame-by-Frame Effects",{"path":1500,"title":1501},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1503,"title":1504},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1506,"title":1507},"\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":1509,"title":1510},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1512,"title":1513},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay","Hover Intent Delays With transition-delay: Menus That Don't Flicker",{"path":1515,"title":1516},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1518,"title":1519},"\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":1521,"title":1522},"\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":1524,"title":1525},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1527,"title":1528},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1530,"title":1531},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-fill-mode-explained","animation-fill-mode: What an Animation Applies Before and After It Runs",{"path":1533,"title":1534},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1536,"title":1537},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1539,"title":1540},"\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":1542,"title":1543},"\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":1545,"title":1546},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1548,"title":1549},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1551,"title":1552},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1554,"title":1555},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1557,"title":1558},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1560,"title":1561},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1563,"title":1564},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1566,"title":1567},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1569,"title":1570},"\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":1572,"title":1573},"\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":1575,"title":1576},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1578,"title":1579},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1581,"title":1582},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1584,"title":1585},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1587,"title":1588},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1590,"title":1591},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1593,"title":1594},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1596,"title":1597},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":1599,"title":1600},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1602,"title":1603},"\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":1605,"title":1606},"\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":1608,"title":1609},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":1611,"title":1612},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1614,"title":1615},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":1140,"title":1617},"Modern CSS Layouts & Micro-Interactions",{"path":1619,"title":1620},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1622,"title":1623},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1625,"title":1626},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":1628,"title":1629},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1631,"title":1632},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1634,"title":1635},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":1637,"title":1638},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":1640,"title":1641},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":1643,"title":1644},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1646,"title":1647},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1649,"title":1650},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1652,"title":1653},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":1655,"title":1656},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":1658,"title":1659},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-queries-inside-css-nesting","Container Queries Inside CSS Nesting: Keeping Responses Next to the Styles They Change",{"path":1661,"title":1662},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":1664,"title":1665},"\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":1667,"title":1668},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1670,"title":1671},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1332,"title":5},{"path":1674,"title":1675},"\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":1677,"title":26},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics",{"path":1679,"title":1680},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1682,"title":1683},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1685,"title":1686},"\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":1688,"title":1689},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":1691,"title":1692},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts","Responsive Layouts With grid-template-areas: Rearranging Regions by Name",{"path":1694,"title":1695},"\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":1697,"title":1698},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1700,"title":1701},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fmasonry-style-layouts-with-grid","Masonry-Style Layouts With the CSS That Ships Today",{"path":1703,"title":1704},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking","Overlapping Elements With Grid Stacking: Layers Without position: absolute",{"path":1706,"title":1707},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1709,"title":1710},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fcentering-in-css-every-method","Centering in CSS: Every Modern Method and When Each One Breaks",{"path":1712,"title":1713},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-basis-vs-width","flex-basis vs width: Which Size a Flex Item Actually Starts From",{"path":1715,"title":1716},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":1718,"title":1719},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":1721,"title":1722},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":1724,"title":1725},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":1727,"title":1728},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid","Sticky Footer With Flexbox or Grid: Pinning the Footer on Short Pages",{"path":1730,"title":1731},"\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":1733,"title":1734},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":1736,"title":1737},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-line-height-and-measure","Fluid Line Height and Measure: Keeping Text Readable as It Scales",{"path":1739,"title":1740},"\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":1742,"title":1743},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1745,"title":1746},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1748,"title":1749},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1751,"title":1752},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ftext-wrap-balance-and-pretty","text-wrap: balance and pretty: Better Line Breaks Without Manual Breaks",{"path":1754,"title":31},"\u002Fmastering-container-queries-responsive-layouts",{"path":1756,"title":1757},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1759,"title":1760},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fcontent-visibility-and-contain-intrinsic-size","content-visibility and contain-intrinsic-size: Rendering Only What Is Near the Screen",{"path":1762,"title":1763},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1765,"title":1766},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Flayout-widths-with-min-max-clamp","Layout Widths With min(), max() and clamp(): Sizing Without Breakpoints",{"path":1768,"title":1769},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1771,"title":1772},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":1774,"title":1775},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1777,"title":1778},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1780,"title":1781},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1783,"title":1784},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":1786,"title":1787},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1789,"title":1790},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Frevert-layer-and-revert-keywords","initial, inherit, unset, revert and revert-layer: Undoing Styles Correctly",{"path":1792,"title":1793},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":1795,"title":1796},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fcontent-aware-card-layouts-with-has","Content-Aware Card Layouts With :has(): One Component, Many Shapes",{"path":1798,"title":1799},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":1801,"title":1802},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fform-validation-layouts-with-has","Form Validation Layouts With :has(): Styling Groups From Field State",{"path":1804,"title":1805},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-selector-performance",":has() Selector Performance: What Is Cheap, What Is Not, and How to Measure",{"path":1807,"title":1808},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-vs-container-style-queries",":has() vs Container Style Queries: Discovered State and Published State",{"path":1810,"title":1811},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":1813,"title":1814},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fquantity-queries-with-has","Quantity Queries With :has(): Layouts That Respond to How Many Items There Are",{"path":1816,"title":1817},"\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":1819,"title":1820},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1822,"title":1823},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1825,"title":1826},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1828,"title":1829},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1831,"title":1832},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":1834,"title":1835},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1837,"title":1838},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":1840,"title":1841},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":1843,"title":1844},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":1846,"title":1847},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fhorizontal-scrolling-card-rows","Horizontal Scrolling Card Rows: Swipeable Lists That Stay in Their Lane",{"path":1849,"title":1850},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":1852,"title":1853},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Foverscroll-behavior-for-nested-scrolling","overscroll-behavior: Taming Nested Scrolling, Pull-to-Refresh and Back-Swipe",{"path":1855,"title":1856},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fscroll-margin-and-scroll-padding-for-sticky-headers","scroll-margin and scroll-padding: Keeping Targets Clear of Sticky Headers",{"path":1858,"title":1859},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":1861,"title":1862},"\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":1864,"title":1865},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1867,"title":1868},"\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":1870,"title":1871},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":1873,"title":1874},"\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",{"path":1876,"title":1877},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fdvh-svh-lvh-mobile-viewport-units","dvh, svh and lvh: Choosing the Right Mobile Viewport Unit",{"path":1879,"title":1880},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts","Full-Bleed Sections in a Constrained Layout: Breaking Out Without Breaking the Page",{"path":1882,"title":1883},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":1885,"title":1886},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fsafe-area-insets-for-notched-screens","Safe Area Insets: Designing Around Notches, Corners and Home Indicators",{"path":1888,"title":1889},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fviewport-units-vs-container-units","Viewport Units vs Container Units: Choosing the Right Reference Box",{"path":1891,"title":1892},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":1894,"caption":1895,"height":1896,"resizable":379,"html":1897,"css":1898},"Debug labels that print each container band","Drag the frame narrower and wider: the amber tag in the corner names the band the component is currently in.",220,"\n\u003Cdiv class=\"cq\" data-debug-containers>\n  \u003Carticle class=\"card cq-label\">\n    \u003Ch3>Quarterly report\u003C\u002Fh3>\n    \u003Cp>Revenue grew in every region this quarter.\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Fdiv>","\n.cq { container-type: inline-size; outline: 1px dashed #f59e0b; outline-offset: -1px; }\n.card { position: relative; margin: 0.5rem; padding: 1rem; border-radius: 10px; background: var(--demo-surface); }\n.card h3 { margin: 0 0 0.3rem; }\n.card p { margin: 0; color: var(--demo-muted); }\n@container (width \u003C 20rem) { .cq-label::after { content: \"compact\"; } }\n@container (20rem \u003C= width \u003C 40rem) { .cq-label::after { content: \"regular\"; } }\n@container (width >= 40rem) { .cq-label::after { content: \"wide\"; } }\n[data-debug-containers] .cq-label::after { position: absolute; inset: 0 0 auto auto; padding: 0 0.3rem; font: 10px\u002F1.4 ui-monospace, monospace; background: #fef3c7; color: #78350f; }",1789717746012]