[{"data":1,"prerenderedAt":2182},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators":3,"content-all-pages":1619,"live-demo:cq-range-logic":2176},{"id":4,"title":5,"body":6,"description":1598,"extension":1599,"meta":1600,"navigation":393,"path":1615,"seo":1616,"stem":1617,"__hash__":1618},"content\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators\u002Findex.md","Container Query Range Syntax and Logic Operators",{"type":7,"value":8,"toc":1587},"minimark",[9,13,57,62,91,106,201,205,208,212,1079,1095,1099,1114,1178,1191,1195,1198,1201,1213,1220,1224,1248,1287,1308,1312,1319,1448,1458,1462,1476,1480,1502,1524,1544,1553,1557,1584],[10,11,5],"h1",{"id":12},"container-query-range-syntax-and-logic-operators",[14,15,16,17,21,22,26,27,30,31,34,35,38,39,41,42,45,46,51,52,56],"p",{},"Most container queries in the wild are a single ",[18,19,20],"code",{},"min-width"," test. That covers the simple case — switch a card to a row layout above some width — but component layouts often need more precise conditions: a middle band between two widths, a state that applies when a container is ",[23,24,25],"em",{},"either"," very narrow ",[23,28,29],{},"or"," very short, a rule for everything ",[23,32,33],{},"except"," a range. Container queries support a full condition language with range comparisons and ",[18,36,37],{},"and",", ",[18,40,29],{}," and ",[18,43,44],{},"not",", and writing those conditions correctly avoids both overlapping breakpoints and the silent failures that come from ambiguous logic. This page covers the syntax, the precedence rules, and the queries that only work on size containers. It belongs to ",[47,48,50],"a",{"href":49},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002F","Container Query Syntax Basics"," in the ",[47,53,55],{"href":54},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide.",[58,59,61],"h2",{"id":60},"why-range-syntax-matters","Why range syntax matters",[14,63,64,65,67,68,71,72,75,76,79,80,83,84,41,87,90],{},"The classic ",[18,66,20],{},"\u002F",[18,69,70],{},"max-width"," pairs have a boundary problem. With ",[18,73,74],{},"(max-width: 30rem)"," for the narrow layout and ",[18,77,78],{},"(min-width: 30rem)"," for the wide one, a container exactly 30rem wide matches both, and whichever rule comes later wins. Off-by-one-pixel fixes such as ",[18,81,82],{},"max-width: 29.99rem"," paper over it but leave a gap at fractional widths. Range syntax states the boundary exactly: ",[18,85,86],{},"width \u003C 30rem",[18,88,89],{},"width >= 30rem"," share the breakpoint with no overlap and no gap.",[14,92,93,94,97,98,101,102,105],{},"Range syntax is also easier to read. ",[18,95,96],{},"(20rem \u003C= width \u003C 40rem)"," says \"between 20 and 40\" in one expression, where the legacy form needs ",[18,99,100],{},"(min-width: 20rem) and (max-width: 39.99rem)",". For container queries, which are newer than media queries, there is no compatibility reason to prefer the old form: every engine that supports ",[18,103,104],{},"@container"," supports range comparisons.",[107,108,114,115,114,119,114,123,114,131,114,140,114,146,114,151,114,160,114,164,114,170,114,175,114,180,114,183,114,187,114,191,114,194,114,197],"svg",{"viewBox":109,"role":110,"ariaLabel":111,"xmlns":112,"style":113},"0 0 720 300","img","Number line of container widths showing inclusive min and max queries overlapping at the breakpoint, and exclusive range queries meeting exactly","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[116,117,118],"title",{},"Overlap at the breakpoint versus a clean boundary",[120,121,122],"desc",{},"Top: max-width 30rem and min-width 30rem both include the value 30rem, so a container exactly that wide matches both. Bottom: width less than 30rem and width greater than or equal to 30rem meet at the boundary without overlap.",[124,125,130],"text",{"textAnchor":126,"x":127,"y":128,"style":129},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","What happens at exactly 30rem",[132,133],"line",{"x1":134,"y1":135,"x2":136,"y2":135,"stroke":137,"strokeWidth":138,"opacity":139},"60","100","660","currentColor","1.5","0.6",[132,141],{"x1":127,"y1":134,"x2":127,"y2":142,"stroke":137,"strokeWidth":138,"strokeDashArray":143,"opacity":145},"240",[144,144],"4","0.7",[124,147,150],{"textAnchor":126,"x":127,"y":148,"style":149},"54","text-anchor:middle;fill:currentColor;font:600 12px ui-monospace,monospace","30rem",[152,153],"rect",{"x":134,"y":154,"width":155,"height":156,"rx":157,"fill":158,"opacity":159},"80","305","16","3","#7aa2ff","0.45",[152,161],{"x":162,"y":163,"width":155,"height":156,"rx":157,"fill":158,"opacity":159},"355","104",[124,165,169],{"textAnchor":126,"x":166,"y":167,"style":168},"200","74","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace","max-width: 30rem",[124,171,174],{"textAnchor":126,"x":172,"y":173,"style":168},"520","140","min-width: 30rem",[124,176,179],{"textAnchor":126,"x":127,"y":177,"style":178},"162","text-anchor:middle;fill:currentColor;font:12px sans-serif","both match at 30rem: source order decides",[132,181],{"x1":134,"y1":182,"x2":136,"y2":182,"stroke":137,"strokeWidth":138,"opacity":139},"210",[152,184],{"x":134,"y":185,"width":186,"height":156,"rx":157,"fill":158,"opacity":159},"190","298",[152,188],{"x":189,"y":190,"width":186,"height":156,"rx":157,"fill":158,"opacity":159},"362","214",[124,192,86],{"textAnchor":126,"x":166,"y":193,"style":168},"184",[124,195,89],{"textAnchor":126,"x":172,"y":196,"style":168},"250",[124,198,200],{"textAnchor":126,"x":127,"y":199,"style":178},"284","exactly one matches at every width",[58,202,204],{"id":203},"the-complete-implementation","The complete implementation",[14,206,207],{},"The component below has three bands — compact, regular and wide — plus a rule for short containers and a rule that applies outside the regular band. Drag the demo to see each condition switch.",[209,210],"live-demo",{"name":211},"cq-range-logic",[213,214,219],"pre",{"className":215,"code":216,"language":217,"meta":218,"style":218},"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\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003Ctitle>Container query ranges and logic\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font: 15px\u002F1.5 system-ui, sans-serif; margin: 1rem; }\n\n  .panel-host {\n    \u002F* size containment in both axes so height conditions can match *\u002F\n    container: panel \u002F size;\n    height: 14rem;\n    resize: both;\n    overflow: auto;\n    border: 1px dashed #94a3b8;\n  }\n\n  .panel { display: grid; gap: 0.5rem; padding: 1rem; height: 100%; box-sizing: border-box; }\n  .panel__label::after { content: \" · base\"; }\n\n  \u002F* Three exclusive bands with no overlap and no gap. *\u002F\n  @container panel (width \u003C 20rem) {\n    .panel__label::after { content: \" · compact\"; }\n  }\n  @container panel (20rem \u003C= width \u003C 40rem) {\n    .panel { grid-template-columns: 1fr 1fr; }\n    .panel__label::after { content: \" · regular\"; }\n  }\n  @container panel (width >= 40rem) {\n    .panel { grid-template-columns: repeat(3, 1fr); }\n    .panel__label::after { content: \" · wide\"; }\n  }\n\n  \u002F* OR: tight in either axis. Parentheses around each test are required. *\u002F\n  @container panel (width \u003C 16rem) or (height \u003C 10rem) {\n    .panel { font-size: 0.85rem; }\n  }\n\n  \u002F* NOT: everything outside the regular band gets a border accent. *\u002F\n  @container panel not (20rem \u003C= width \u003C 40rem) {\n    .panel { outline: 2px solid #6366f1; outline-offset: -2px; }\n  }\n\n  \u002F* AND with a nested OR: parentheses make the grouping explicit. *\u002F\n  @container panel (width >= 30rem) and ((orientation: landscape) or (aspect-ratio > 2)) {\n    .panel__hint { display: block; }\n  }\n  .panel__hint { display: none; color: #475569; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv class=\"panel-host\">\n    \u003Cdiv class=\"panel\">\n      \u003Cstrong class=\"panel__label\">Layout\u003C\u002Fstrong>\n      \u003Cdiv>One\u003C\u002Fdiv>\u003Cdiv>Two\u003C\u002Fdiv>\u003Cdiv>Three\u003C\u002Fdiv>\n      \u003Cp class=\"panel__hint\">Wide and landscape: extra hint shown.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[18,220,221,240,260,270,288,313,327,337,388,395,404,411,420,436,449,462,482,488,493,556,574,579,585,594,611,616,624,649,665,670,678,706,722,727,732,738,746,765,770,775,781,789,826,831,836,842,850,867,872,899,909,918,928,947,964,987,1020,1041,1051,1061,1070],{"__ignoreMap":218},[222,223,225,229,233,237],"span",{"class":132,"line":224},1,[222,226,228],{"class":227},"suds8","\u003C!",[222,230,232],{"class":231},"sne4z","doctype",[222,234,236],{"class":235},"s-5SL"," html",[222,238,239],{"class":227},">\n",[222,241,243,246,248,251,254,258],{"class":132,"line":242},2,[222,244,245],{"class":227},"\u003C",[222,247,217],{"class":231},[222,249,250],{"class":235}," lang",[222,252,253],{"class":227},"=",[222,255,257],{"class":256},"sT6z2","\"en\"",[222,259,239],{"class":227},[222,261,263,265,268],{"class":132,"line":262},3,[222,264,245],{"class":227},[222,266,267],{"class":231},"head",[222,269,239],{"class":227},[222,271,273,275,278,281,283,286],{"class":132,"line":272},4,[222,274,245],{"class":227},[222,276,277],{"class":231},"meta",[222,279,280],{"class":235}," charset",[222,282,253],{"class":227},[222,284,285],{"class":256},"\"utf-8\"",[222,287,239],{"class":227},[222,289,291,293,295,298,300,303,306,308,311],{"class":132,"line":290},5,[222,292,245],{"class":227},[222,294,277],{"class":231},[222,296,297],{"class":235}," name",[222,299,253],{"class":227},[222,301,302],{"class":256},"\"viewport\"",[222,304,305],{"class":235}," content",[222,307,253],{"class":227},[222,309,310],{"class":256},"\"width=device-width, initial-scale=1\"",[222,312,239],{"class":227},[222,314,316,318,320,323,325],{"class":132,"line":315},6,[222,317,245],{"class":227},[222,319,116],{"class":231},[222,321,322],{"class":227},">Container query ranges and logic\u003C\u002F",[222,324,116],{"class":231},[222,326,239],{"class":227},[222,328,330,332,335],{"class":132,"line":329},7,[222,331,245],{"class":227},[222,333,334],{"class":231},"style",[222,336,239],{"class":227},[222,338,340,343,346,349,352,355,359,361,363,366,368,371,374,377,379,382,385],{"class":132,"line":339},8,[222,341,342],{"class":231},"  body",[222,344,345],{"class":227}," { ",[222,347,348],{"class":235},"font",[222,350,351],{"class":227},": ",[222,353,354],{"class":235},"15",[222,356,358],{"class":357},"sHUrx","px",[222,360,67],{"class":227},[222,362,138],{"class":235},[222,364,365],{"class":235}," system-ui",[222,367,38],{"class":227},[222,369,370],{"class":235},"sans-serif",[222,372,373],{"class":227},"; ",[222,375,376],{"class":235},"margin",[222,378,351],{"class":227},[222,380,381],{"class":235},"1",[222,383,384],{"class":357},"rem",[222,386,387],{"class":227},"; }\n",[222,389,391],{"class":132,"line":390},9,[222,392,394],{"emptyLinePlaceholder":393},true,"\n",[222,396,398,401],{"class":132,"line":397},10,[222,399,400],{"class":235},"  .panel-host",[222,402,403],{"class":227}," {\n",[222,405,407],{"class":132,"line":406},11,[222,408,410],{"class":409},"sLBg1","    \u002F* size containment in both axes so height conditions can match *\u002F\n",[222,412,414,417],{"class":132,"line":413},12,[222,415,416],{"class":235},"    container",[222,418,419],{"class":227},": panel \u002F size;\n",[222,421,423,426,428,431,433],{"class":132,"line":422},13,[222,424,425],{"class":235},"    height",[222,427,351],{"class":227},[222,429,430],{"class":235},"14",[222,432,384],{"class":357},[222,434,435],{"class":227},";\n",[222,437,439,442,444,447],{"class":132,"line":438},14,[222,440,441],{"class":235},"    resize",[222,443,351],{"class":227},[222,445,446],{"class":235},"both",[222,448,435],{"class":227},[222,450,452,455,457,460],{"class":132,"line":451},15,[222,453,454],{"class":235},"    overflow",[222,456,351],{"class":227},[222,458,459],{"class":235},"auto",[222,461,435],{"class":227},[222,463,465,468,470,472,474,477,480],{"class":132,"line":464},16,[222,466,467],{"class":235},"    border",[222,469,351],{"class":227},[222,471,381],{"class":235},[222,473,358],{"class":357},[222,475,476],{"class":235}," dashed",[222,478,479],{"class":235}," #94a3b8",[222,481,435],{"class":227},[222,483,485],{"class":132,"line":484},17,[222,486,487],{"class":227},"  }\n",[222,489,491],{"class":132,"line":490},18,[222,492,394],{"emptyLinePlaceholder":393},[222,494,496,499,501,504,506,509,511,514,516,519,521,523,526,528,530,532,534,537,539,541,544,546,549,551,554],{"class":132,"line":495},19,[222,497,498],{"class":235},"  .panel",[222,500,345],{"class":227},[222,502,503],{"class":235},"display",[222,505,351],{"class":227},[222,507,508],{"class":235},"grid",[222,510,373],{"class":227},[222,512,513],{"class":235},"gap",[222,515,351],{"class":227},[222,517,518],{"class":235},"0.5",[222,520,384],{"class":357},[222,522,373],{"class":227},[222,524,525],{"class":235},"padding",[222,527,351],{"class":227},[222,529,381],{"class":235},[222,531,384],{"class":357},[222,533,373],{"class":227},[222,535,536],{"class":235},"height",[222,538,351],{"class":227},[222,540,135],{"class":235},[222,542,543],{"class":357},"%",[222,545,373],{"class":227},[222,547,548],{"class":235},"box-sizing",[222,550,351],{"class":227},[222,552,553],{"class":235},"border-box",[222,555,387],{"class":227},[222,557,559,562,564,567,569,572],{"class":132,"line":558},20,[222,560,561],{"class":235},"  .panel__label::after",[222,563,345],{"class":227},[222,565,566],{"class":235},"content",[222,568,351],{"class":227},[222,570,571],{"class":256},"\" · base\"",[222,573,387],{"class":227},[222,575,577],{"class":132,"line":576},21,[222,578,394],{"emptyLinePlaceholder":393},[222,580,582],{"class":132,"line":581},22,[222,583,584],{"class":409},"  \u002F* Three exclusive bands with no overlap and no gap. *\u002F\n",[222,586,588,591],{"class":132,"line":587},23,[222,589,590],{"class":357},"  @container",[222,592,593],{"class":227}," panel (width \u003C 20rem) {\n",[222,595,597,600,602,604,606,609],{"class":132,"line":596},24,[222,598,599],{"class":235},"    .panel__label::after",[222,601,345],{"class":227},[222,603,566],{"class":235},[222,605,351],{"class":227},[222,607,608],{"class":256},"\" · compact\"",[222,610,387],{"class":227},[222,612,614],{"class":132,"line":613},25,[222,615,487],{"class":227},[222,617,619,621],{"class":132,"line":618},26,[222,620,590],{"class":357},[222,622,623],{"class":227}," panel (20rem \u003C= width \u003C 40rem) {\n",[222,625,627,630,632,635,637,639,642,645,647],{"class":132,"line":626},27,[222,628,629],{"class":235},"    .panel",[222,631,345],{"class":227},[222,633,634],{"class":235},"grid-template-columns",[222,636,351],{"class":227},[222,638,381],{"class":235},[222,640,641],{"class":357},"fr",[222,643,644],{"class":235}," 1",[222,646,641],{"class":357},[222,648,387],{"class":227},[222,650,652,654,656,658,660,663],{"class":132,"line":651},28,[222,653,599],{"class":235},[222,655,345],{"class":227},[222,657,566],{"class":235},[222,659,351],{"class":227},[222,661,662],{"class":256},"\" · regular\"",[222,664,387],{"class":227},[222,666,668],{"class":132,"line":667},29,[222,669,487],{"class":227},[222,671,673,675],{"class":132,"line":672},30,[222,674,590],{"class":357},[222,676,677],{"class":227}," panel (width >= 40rem) {\n",[222,679,681,683,685,687,689,692,695,697,699,701,703],{"class":132,"line":680},31,[222,682,629],{"class":235},[222,684,345],{"class":227},[222,686,634],{"class":235},[222,688,351],{"class":227},[222,690,691],{"class":235},"repeat",[222,693,694],{"class":227},"(",[222,696,157],{"class":235},[222,698,38],{"class":227},[222,700,381],{"class":235},[222,702,641],{"class":357},[222,704,705],{"class":227},"); }\n",[222,707,709,711,713,715,717,720],{"class":132,"line":708},32,[222,710,599],{"class":235},[222,712,345],{"class":227},[222,714,566],{"class":235},[222,716,351],{"class":227},[222,718,719],{"class":256},"\" · wide\"",[222,721,387],{"class":227},[222,723,725],{"class":132,"line":724},33,[222,726,487],{"class":227},[222,728,730],{"class":132,"line":729},34,[222,731,394],{"emptyLinePlaceholder":393},[222,733,735],{"class":132,"line":734},35,[222,736,737],{"class":409},"  \u002F* OR: tight in either axis. Parentheses around each test are required. *\u002F\n",[222,739,741,743],{"class":132,"line":740},36,[222,742,590],{"class":357},[222,744,745],{"class":227}," panel (width \u003C 16rem) or (height \u003C 10rem) {\n",[222,747,749,751,753,756,758,761,763],{"class":132,"line":748},37,[222,750,629],{"class":235},[222,752,345],{"class":227},[222,754,755],{"class":235},"font-size",[222,757,351],{"class":227},[222,759,760],{"class":235},"0.85",[222,762,384],{"class":357},[222,764,387],{"class":227},[222,766,768],{"class":132,"line":767},38,[222,769,487],{"class":227},[222,771,773],{"class":132,"line":772},39,[222,774,394],{"emptyLinePlaceholder":393},[222,776,778],{"class":132,"line":777},40,[222,779,780],{"class":409},"  \u002F* NOT: everything outside the regular band gets a border accent. *\u002F\n",[222,782,784,786],{"class":132,"line":783},41,[222,785,590],{"class":357},[222,787,788],{"class":227}," panel not (20rem \u003C= width \u003C 40rem) {\n",[222,790,792,794,796,799,801,804,806,809,812,814,817,819,822,824],{"class":132,"line":791},42,[222,793,629],{"class":235},[222,795,345],{"class":227},[222,797,798],{"class":235},"outline",[222,800,351],{"class":227},[222,802,803],{"class":235},"2",[222,805,358],{"class":357},[222,807,808],{"class":235}," solid",[222,810,811],{"class":235}," #6366f1",[222,813,373],{"class":227},[222,815,816],{"class":235},"outline-offset",[222,818,351],{"class":227},[222,820,821],{"class":235},"-2",[222,823,358],{"class":357},[222,825,387],{"class":227},[222,827,829],{"class":132,"line":828},43,[222,830,487],{"class":227},[222,832,834],{"class":132,"line":833},44,[222,835,394],{"emptyLinePlaceholder":393},[222,837,839],{"class":132,"line":838},45,[222,840,841],{"class":409},"  \u002F* AND with a nested OR: parentheses make the grouping explicit. *\u002F\n",[222,843,845,847],{"class":132,"line":844},46,[222,846,590],{"class":357},[222,848,849],{"class":227}," panel (width >= 30rem) and ((orientation: landscape) or (aspect-ratio > 2)) {\n",[222,851,853,856,858,860,862,865],{"class":132,"line":852},47,[222,854,855],{"class":235},"    .panel__hint",[222,857,345],{"class":227},[222,859,503],{"class":235},[222,861,351],{"class":227},[222,863,864],{"class":235},"block",[222,866,387],{"class":227},[222,868,870],{"class":132,"line":869},48,[222,871,487],{"class":227},[222,873,875,878,880,882,884,887,889,892,894,897],{"class":132,"line":874},49,[222,876,877],{"class":235},"  .panel__hint",[222,879,345],{"class":227},[222,881,503],{"class":235},[222,883,351],{"class":227},[222,885,886],{"class":235},"none",[222,888,373],{"class":227},[222,890,891],{"class":235},"color",[222,893,351],{"class":227},[222,895,896],{"class":235},"#475569",[222,898,387],{"class":227},[222,900,902,905,907],{"class":132,"line":901},50,[222,903,904],{"class":227},"\u003C\u002F",[222,906,334],{"class":231},[222,908,239],{"class":227},[222,910,912,914,916],{"class":132,"line":911},51,[222,913,904],{"class":227},[222,915,267],{"class":231},[222,917,239],{"class":227},[222,919,921,923,926],{"class":132,"line":920},52,[222,922,245],{"class":227},[222,924,925],{"class":231},"body",[222,927,239],{"class":227},[222,929,931,934,937,940,942,945],{"class":132,"line":930},53,[222,932,933],{"class":227},"  \u003C",[222,935,936],{"class":231},"div",[222,938,939],{"class":235}," class",[222,941,253],{"class":227},[222,943,944],{"class":256},"\"panel-host\"",[222,946,239],{"class":227},[222,948,950,953,955,957,959,962],{"class":132,"line":949},54,[222,951,952],{"class":227},"    \u003C",[222,954,936],{"class":231},[222,956,939],{"class":235},[222,958,253],{"class":227},[222,960,961],{"class":256},"\"panel\"",[222,963,239],{"class":227},[222,965,967,970,973,975,977,980,983,985],{"class":132,"line":966},55,[222,968,969],{"class":227},"      \u003C",[222,971,972],{"class":231},"strong",[222,974,939],{"class":235},[222,976,253],{"class":227},[222,978,979],{"class":256},"\"panel__label\"",[222,981,982],{"class":227},">Layout\u003C\u002F",[222,984,972],{"class":231},[222,986,239],{"class":227},[222,988,990,992,994,997,999,1002,1004,1007,1009,1011,1013,1016,1018],{"class":132,"line":989},56,[222,991,969],{"class":227},[222,993,936],{"class":231},[222,995,996],{"class":227},">One\u003C\u002F",[222,998,936],{"class":231},[222,1000,1001],{"class":227},">\u003C",[222,1003,936],{"class":231},[222,1005,1006],{"class":227},">Two\u003C\u002F",[222,1008,936],{"class":231},[222,1010,1001],{"class":227},[222,1012,936],{"class":231},[222,1014,1015],{"class":227},">Three\u003C\u002F",[222,1017,936],{"class":231},[222,1019,239],{"class":227},[222,1021,1023,1025,1027,1029,1031,1034,1037,1039],{"class":132,"line":1022},57,[222,1024,969],{"class":227},[222,1026,14],{"class":231},[222,1028,939],{"class":235},[222,1030,253],{"class":227},[222,1032,1033],{"class":256},"\"panel__hint\"",[222,1035,1036],{"class":227},">Wide and landscape: extra hint shown.\u003C\u002F",[222,1038,14],{"class":231},[222,1040,239],{"class":227},[222,1042,1044,1047,1049],{"class":132,"line":1043},58,[222,1045,1046],{"class":227},"    \u003C\u002F",[222,1048,936],{"class":231},[222,1050,239],{"class":227},[222,1052,1054,1057,1059],{"class":132,"line":1053},59,[222,1055,1056],{"class":227},"  \u003C\u002F",[222,1058,936],{"class":231},[222,1060,239],{"class":227},[222,1062,1064,1066,1068],{"class":132,"line":1063},60,[222,1065,904],{"class":227},[222,1067,925],{"class":231},[222,1069,239],{"class":227},[222,1071,1073,1075,1077],{"class":132,"line":1072},61,[222,1074,904],{"class":227},[222,1076,217],{"class":231},[222,1078,239],{"class":227},[14,1080,1081,1082,1085,1086,38,1088,41,1091,1094],{},"The host uses ",[18,1083,1084],{},"container: panel \u002F size",", the shorthand for a name and a type. Size containment in both axes is what allows the ",[18,1087,536],{},[18,1089,1090],{},"orientation",[18,1092,1093],{},"aspect-ratio"," conditions to match; on an inline-size container those tests never match because the container has no definite block size to compare.",[58,1096,1098],{"id":1097},"the-key-technique-parentheses-define-the-grouping","The key technique: parentheses define the grouping",[14,1100,1101,1102,41,1104,1106,1107,1110,1111,1113],{},"The condition language deliberately forbids mixing ",[18,1103,37],{},[18,1105,29],{}," at the same level, so there is never a question of which binds tighter. An expression like ",[18,1108,1109],{},"(a) and (b) or (c)"," is invalid, and an invalid condition makes the entire ",[18,1112,104],{}," rule never match — silently.",[107,1115,114,1118,114,1121,114,1124,114,1127,114,1136,114,1141,114,1146,114,1150,114,1154,114,1158,114,1161,114,1165,114,1168,114,1171,114,1175],{"viewBox":1116,"role":110,"ariaLabel":1117,"xmlns":112,"style":113},"0 0 720 290","Valid and invalid container condition forms: mixed and\u002For without grouping is invalid; grouped forms are valid",[116,1119,1120],{},"Grouping rules for container conditions",[120,1122,1123],{},"Invalid: (a) and (b) or (c). Valid: (a) and ((b) or (c)), ((a) and (b)) or (c), and not (a). The not keyword applies to one parenthesised condition and cannot be chained with and or or without its own parentheses.",[124,1125,1126],{"textAnchor":126,"x":127,"y":128,"style":129},"Mixing and\u002For needs explicit parentheses",[152,1128],{"x":1129,"y":1130,"width":1131,"height":1132,"rx":1133,"fill":886,"stroke":137,"strokeWidth":138,"strokeDashArray":1134,"opacity":145},"40","50","640","46","8",[1135,144],"6",[124,1137,1109],{"textAnchor":1138,"x":134,"y":1139,"style":1140},"start","78","text-anchor:start;fill:currentColor;font:13px ui-monospace,monospace",[124,1142,1145],{"textAnchor":1143,"x":136,"y":1139,"style":1144},"end","text-anchor:end;fill:currentColor;font:600 12px sans-serif","invalid: rule never applies",[152,1147],{"x":1129,"y":1148,"width":1131,"height":1132,"rx":1133,"fill":158,"opacity":1149},"108","0.28",[124,1151,1153],{"textAnchor":1138,"x":134,"y":1152,"style":1140},"136","(a) and ((b) or (c))",[124,1155,1157],{"textAnchor":1143,"x":136,"y":1152,"style":1156},"text-anchor:end;fill:currentColor;font:12px sans-serif","valid: a, plus b or c",[152,1159],{"x":1129,"y":1160,"width":1131,"height":1132,"rx":1133,"fill":158,"opacity":1149},"166",[124,1162,1164],{"textAnchor":1138,"x":134,"y":1163,"style":1140},"194","((a) and (b)) or (c)",[124,1166,1167],{"textAnchor":1143,"x":136,"y":1163,"style":1156},"valid: both a and b, or c",[152,1169],{"x":1129,"y":1170,"width":1131,"height":1132,"rx":1133,"fill":158,"opacity":1149},"224",[124,1172,1174],{"textAnchor":1138,"x":134,"y":1173,"style":1140},"252","not ((a) or (b))",[124,1176,1177],{"textAnchor":1143,"x":136,"y":1173,"style":1156},"valid: neither a nor b",[14,1179,1180,1182,1183,1186,1187,1190],{},[18,1181,44],{}," negates exactly one condition in parentheses, so ",[18,1184,1185],{},"not (a) and (b)"," is also invalid; write ",[18,1188,1189],{},"(not (a)) and (b)"," or restructure. When a container query mysteriously never applies, an ungrouped mix of operators is one of the first things to check — DevTools will show the rule, but it will never be marked as matching.",[58,1192,1194],{"id":1193},"choosing-where-the-bands-begin","Choosing where the bands begin",[14,1196,1197],{},"Range syntax makes band boundaries precise, which raises the question of where they should be. Viewport breakpoints are usually chosen from device classes; component bands should be chosen from the component's content.",[14,1199,1200],{},"Start from the smallest width at which each layout still works. For a card that shows an image beside text, that is the image's minimum comfortable width plus the gap plus the shortest line of text that reads well — perhaps 8rem, 1rem and 12rem, giving a threshold of 21rem. Below it, the side-by-side layout squeezes text into a column too narrow to read, so the band boundary belongs there, not at a round number. Deriving thresholds this way also makes them explainable in a code review, which arbitrary round numbers are not.",[14,1202,1203,1204,1206,1207,1209,1210,1212],{},"Prefer ",[18,1205,384],{}," over ",[18,1208,358],{}," for thresholds. A container measured in ",[18,1211,384],{}," scales with the user's font size, so a reader who has set a larger default font sees the compact layout earlier, which is exactly right: their text needs more room. Pixel thresholds ignore that setting and can leave enlarged text squeezed into a layout designed for smaller type.",[14,1214,1215,1216,1219],{},"Keep the number of bands small. Two or three bands per component — compact, regular and occasionally wide — are usually enough, because flexbox wrapping, grid ",[18,1217,1218],{},"auto-fit"," and fluid values handle the continuous adjustments between them. A component with six bands is often a component whose internal layout should be more intrinsic.",[58,1221,1223],{"id":1222},"which-features-a-container-can-be-queried-on","Which features a container can be queried on",[14,1225,1226,1227,38,1230,38,1232,38,1235,38,1238,41,1240,1242,1243,41,1245,1247],{},"Size container queries accept the size features: ",[18,1228,1229],{},"width",[18,1231,536],{},[18,1233,1234],{},"inline-size",[18,1236,1237],{},"block-size",[18,1239,1093],{},[18,1241,1090],{},", each with range syntax. ",[18,1244,1234],{},[18,1246,1237],{}," are the logical forms, which follow the writing mode and are the better choice for components that may appear in vertical text. Which of these can match depends on the container type:",[1249,1250,1251,1274],"ul",{},[1252,1253,1254,1259,1260,67,1262,1264,1265,38,1267,38,1269,41,1271,1273],"li",{},[972,1255,1256],{},[18,1257,1258],{},"container-type: inline-size"," establishes containment in the inline axis only. ",[18,1261,1229],{},[18,1263,1234],{}," conditions work; ",[18,1266,536],{},[18,1268,1237],{},[18,1270,1093],{},[18,1272,1090],{}," never match.",[1252,1275,1276,1281,1282,1286],{},[972,1277,1278],{},[18,1279,1280],{},"container-type: size"," establishes containment in both axes, so every size feature works — but the container no longer sizes its height from its content, so it needs an explicit height. The trade-off is explained in ",[47,1283,1285],{"href":1284},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size\u002F","container-type: size vs inline-size",".",[14,1288,1289,1290,1293,1294,1296,1297,38,1299,41,1301,1303,1304,1286],{},"Style queries use a separate function, ",[18,1291,1292],{},"style()",", and can be combined with size conditions in the same ",[18,1295,104],{}," rule using the same ",[18,1298,37],{},[18,1300,29],{},[18,1302,44],{}," operators — a pattern developed in ",[47,1305,1307],{"href":1306},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries\u002F","Combining Size and Style Queries",[58,1309,1311],{"id":1310},"variation-named-queries-and-custom-breakpoints","Variation: named queries and custom breakpoints",[14,1313,1314,1315,1318],{},"Range conditions become easier to maintain when their thresholds are shared. Custom properties cannot be used inside container conditions — ",[18,1316,1317],{},"(width > var(--bp))"," is invalid, because conditions are evaluated before custom properties resolve — so shared breakpoints are usually kept in a preprocessor or documented as a small set of standard values.",[213,1320,1324],{"className":1321,"code":1322,"language":1323,"meta":218,"style":218},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* Documented component bands, used consistently across the library:\n   compact  \u003C 20rem\n   regular  20rem – 40rem\n   wide     >= 40rem *\u002F\n@container card (width \u003C 20rem)            { .card { --pad: 0.75rem; } }\n@container card (20rem \u003C= width \u003C 40rem)   { .card { --pad: 1rem; } }\n@container card (width >= 40rem)           { .card { --pad: 1.5rem; } }\n\n\u002F* The bands set tokens; the component reads them once. *\u002F\n.card { padding: var(--pad, 1rem); }\n","css",[18,1325,1326,1331,1336,1341,1346,1372,1393,1414,1418,1423],{"__ignoreMap":218},[222,1327,1328],{"class":132,"line":224},[222,1329,1330],{"class":409},"\u002F* Documented component bands, used consistently across the library:\n",[222,1332,1333],{"class":132,"line":242},[222,1334,1335],{"class":409},"   compact  \u003C 20rem\n",[222,1337,1338],{"class":132,"line":262},[222,1339,1340],{"class":409},"   regular  20rem – 40rem\n",[222,1342,1343],{"class":132,"line":272},[222,1344,1345],{"class":409},"   wide     >= 40rem *\u002F\n",[222,1347,1348,1350,1353,1356,1358,1362,1364,1367,1369],{"class":132,"line":290},[222,1349,104],{"class":357},[222,1351,1352],{"class":227}," card (width \u003C 20rem)            { ",[222,1354,1355],{"class":235},".card",[222,1357,345],{"class":227},[222,1359,1361],{"class":1360},"soyes","--pad",[222,1363,351],{"class":227},[222,1365,1366],{"class":235},"0.75",[222,1368,384],{"class":357},[222,1370,1371],{"class":227},"; } }\n",[222,1373,1374,1376,1379,1381,1383,1385,1387,1389,1391],{"class":132,"line":315},[222,1375,104],{"class":357},[222,1377,1378],{"class":227}," card (20rem \u003C= width \u003C 40rem)   { ",[222,1380,1355],{"class":235},[222,1382,345],{"class":227},[222,1384,1361],{"class":1360},[222,1386,351],{"class":227},[222,1388,381],{"class":235},[222,1390,384],{"class":357},[222,1392,1371],{"class":227},[222,1394,1395,1397,1400,1402,1404,1406,1408,1410,1412],{"class":132,"line":329},[222,1396,104],{"class":357},[222,1398,1399],{"class":227}," card (width >= 40rem)           { ",[222,1401,1355],{"class":235},[222,1403,345],{"class":227},[222,1405,1361],{"class":1360},[222,1407,351],{"class":227},[222,1409,138],{"class":235},[222,1411,384],{"class":357},[222,1413,1371],{"class":227},[222,1415,1416],{"class":132,"line":339},[222,1417,394],{"emptyLinePlaceholder":393},[222,1419,1420],{"class":132,"line":390},[222,1421,1422],{"class":409},"\u002F* The bands set tokens; the component reads them once. *\u002F\n",[222,1424,1425,1427,1429,1431,1433,1436,1438,1440,1442,1444,1446],{"class":132,"line":397},[222,1426,1355],{"class":235},[222,1428,345],{"class":227},[222,1430,525],{"class":235},[222,1432,351],{"class":227},[222,1434,1435],{"class":235},"var",[222,1437,694],{"class":227},[222,1439,1361],{"class":1360},[222,1441,38],{"class":227},[222,1443,381],{"class":235},[222,1445,384],{"class":357},[222,1447,705],{"class":227},[14,1449,1450,1451,1453,1454,1286],{},"Setting custom properties inside the bands, and reading them in a single component rule, keeps the conditions short and the component's layout logic in one place. It also makes the bands easy to animate across: a registered ",[18,1452,1361],{}," can transition when the container crosses a boundary, which is the idea behind ",[47,1455,1457],{"href":1456},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations\u002F","container-query-triggered keyframe animations",[58,1459,1461],{"id":1460},"browser-support","Browser support",[14,1463,1464,1465,38,1467,41,1469,1471,1472,1475],{},"Container size queries with range syntax and ",[18,1466,37],{},[18,1468,29],{},[18,1470,44],{}," are supported in Chrome and Edge 105+, Firefox 110+ and Safari 16+. Media query range syntax, the same notation in ",[18,1473,1474],{},"@media",", is supported in Chrome and Edge 104+, Firefox 102+ and Safari 16.4+. Style queries for custom properties, combinable with these conditions, are supported in Chrome and Edge 111+, Firefox 151+ and Safari 18+.",[58,1477,1479],{"id":1478},"faq","FAQ",[14,1481,1482,1489,1490,41,1493,1496,1497,41,1499,1501],{},[972,1483,1484,1485,1488],{},"Can container queries use range syntax like ",[18,1486,1487],{},"width > 30rem","?","\nYes. Container size queries were specified with range syntax from the start, so ",[18,1491,1492],{},"@container (width > 30rem)",[18,1494,1495],{},"@container (20rem \u003C= width \u003C 40rem)"," both work in every engine that supports container queries. The older ",[18,1498,20],{},[18,1500,70],{}," forms also work.",[14,1503,1504,1512,1513,41,1515,1517,1518,1520,1521,1523],{},[972,1505,1506,1507,41,1509,1511],{},"Why is my container query with ",[18,1508,37],{},[18,1510,29],{}," invalid?","\nCSS does not allow ",[18,1514,37],{},[18,1516,29],{}," to be mixed at the same level without parentheses. Write ",[18,1519,1153],{}," rather than ",[18,1522,1109],{},". The whole condition is dropped if it is ambiguous.",[14,1525,1526,1534,1535,1537,1538,1540,1541,1543],{},[972,1527,1528,1529,1531,1532,1488],{},"Is ",[18,1530,174],{}," the same as ",[18,1533,89],{},"\nYes. ",[18,1536,20],{}," is inclusive, so it matches at exactly 30rem, which is the same as ",[18,1539,89],{},". The range form makes exclusive boundaries such as ",[18,1542,1487],{}," possible, which avoids both of two adjacent queries matching at the exact breakpoint.",[14,1545,1546,1549,1550,1552],{},[972,1547,1548],{},"Can a container query test orientation or aspect ratio?","\nYes, but only on a container with size containment in both axes, which means ",[18,1551,1280],{},". An inline-size container has no definite block size to compare, so orientation and aspect-ratio queries against it never match.",[58,1554,1556],{"id":1555},"related","Related",[1249,1558,1559,1564,1571,1578],{},[1252,1560,1561,1563],{},[47,1562,50],{"href":49}," — the parent guide.",[1252,1565,1566,1570],{},[47,1567,1569],{"href":1568},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries\u002F","Nesting and Naming Container Queries"," — targeting a specific container by name.",[1252,1572,1573,1577],{},[47,1574,1576],{"href":1575},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools\u002F","Debugging Container Queries in DevTools"," — finding conditions that never match.",[1252,1579,1580,1583],{},[47,1581,1582],{"href":1456},"Container-Query-Triggered Keyframe Animations"," — motion at the band boundaries.",[334,1585,1586],{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html .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 .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}",{"title":218,"searchDepth":242,"depth":242,"links":1588},[1589,1590,1591,1592,1593,1594,1595,1596,1597],{"id":60,"depth":242,"text":61},{"id":203,"depth":242,"text":204},{"id":1097,"depth":242,"text":1098},{"id":1193,"depth":242,"text":1194},{"id":1222,"depth":242,"text":1223},{"id":1310,"depth":242,"text":1311},{"id":1460,"depth":242,"text":1461},{"id":1478,"depth":242,"text":1479},{"id":1555,"depth":242,"text":1556},"Write container conditions with range syntax, and, or and not: bounded ranges, aspect-ratio and orientation queries, and the grouping rules that trip people up.","md",{"pageTitle":1601,"datePublished":1602,"dateModified":1602,"faq":1603},"Container Query Range Syntax and Logic","2026-09-18",[1604,1607,1610,1613],{"q":1605,"a":1606},"Can container queries use range syntax like width > 30rem?","Yes. Container size queries were specified with range syntax from the start, so @container (width > 30rem) and @container (20rem \u003C= width \u003C 40rem) both work in every engine that supports container queries. The older min-width and max-width forms also work.",{"q":1608,"a":1609},"Why is my container query with and and or invalid?","CSS does not allow and and or to be mixed at the same level without parentheses. Write (a) and ((b) or (c)) rather than (a) and (b) or (c). The whole condition is dropped if it is ambiguous.",{"q":1611,"a":1612},"Is min-width: 30rem the same as width >= 30rem?","Yes. min-width is inclusive, so it matches at exactly 30rem, which is the same as width >= 30rem. The range form makes exclusive boundaries such as width > 30rem possible, which avoids both of two adjacent queries matching at the exact breakpoint.",{"q":1548,"a":1614},"Yes, but only on a container with size containment in both axes, which means container-type: size. An inline-size container has no definite block size to compare, so orientation and aspect-ratio queries against it never match.","\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators",{"title":5,"description":1598},"mastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators\u002Findex","CVNnE-_JY79Kxj9026tNbI2g-sHlJyYHYFoCO8eDXJQ",[1620,1623,1626,1629,1632,1635,1638,1641,1644,1647,1650,1653,1656,1659,1662,1665,1668,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,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,1893,1896,1899,1901,1904,1907,1910,1913,1916,1919,1922,1925,1928,1931,1934,1937,1940,1943,1944,1947,1950,1953,1956,1959,1961,1964,1967,1970,1973,1976,1979,1982,1985,1988,1991,1994,1997,2000,2003,2006,2009,2012,2015,2018,2021,2024,2027,2030,2033,2036,2038,2041,2044,2047,2050,2053,2056,2059,2062,2065,2068,2071,2074,2077,2080,2083,2086,2089,2092,2095,2098,2101,2104,2107,2110,2113,2116,2119,2122,2125,2128,2131,2134,2137,2140,2143,2146,2149,2152,2155,2158,2161,2164,2167,2170,2173],{"path":1621,"title":1622},"\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":1624,"title":1625},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1627,"title":1628},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1630,"title":1631},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1633,"title":1634},"\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":1636,"title":1637},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1639,"title":1640},"\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":1642,"title":1643},"\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":1645,"title":1646},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1648,"title":1649},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1651,"title":1652},"\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":1654,"title":1655},"\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":1657,"title":1658},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1660,"title":1661},"\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":1663,"title":1664},"\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":1666,"title":1667},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1669,"title":1670},"\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":1672,"title":1673},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1675,"title":1676},"\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":1678,"title":1679},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1681,"title":1682},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1684,"title":1685},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1687,"title":1688},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1690,"title":1691},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1693,"title":1694},"\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":1696,"title":1697},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1699,"title":1700},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1702,"title":1703},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1705,"title":1706},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1708,"title":1709},"\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":1711,"title":1712},"\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":1714,"title":1715},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1717,"title":1718},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1720,"title":1721},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1723,"title":1724},"\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":1726,"title":1727},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1729,"title":1730},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1732,"title":1733},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1735,"title":1736},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1738,"title":1739},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1741,"title":1742},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1744,"title":1745},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1747,"title":1748},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1750,"title":1751},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1753,"title":1754},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1756,"title":1757},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1759,"title":1760},"\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":1762,"title":1763},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1765,"title":1766},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1768,"title":1769},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1771,"title":1772},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1774,"title":1775},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1777,"title":1778},"\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":1780,"title":1781},"\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":1783,"title":1784},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1786,"title":1787},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1789,"title":1790},"\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":1792,"title":1793},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1795,"title":1796},"\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":1798,"title":1799},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1801,"title":1802},"\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":1804,"title":1805},"\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":1807,"title":1808},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1810,"title":1811},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1813,"title":1814},"\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":1816,"title":1817},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1819,"title":1820},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1822,"title":1823},"\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":1825,"title":1826},"\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":1828,"title":1829},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1831,"title":1832},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1834,"title":1835},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1837,"title":1838},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1840,"title":1841},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1843,"title":1844},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1846,"title":1847},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1849,"title":1850},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1852,"title":1853},"\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":1855,"title":1856},"\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":1858,"title":1859},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1861,"title":1862},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1864,"title":1865},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1867,"title":1868},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1870,"title":1871},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1873,"title":1874},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1876,"title":1877},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1879,"title":1880},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":1882,"title":1883},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1885,"title":1886},"\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":1888,"title":1889},"\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":1891,"title":1892},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":1894,"title":1895},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1897,"title":1898},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":67,"title":1900},"Modern CSS Layouts & Micro-Interactions",{"path":1902,"title":1903},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1905,"title":1906},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1908,"title":1909},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":1911,"title":1912},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1914,"title":1915},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1917,"title":1918},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":1920,"title":1921},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":1923,"title":1924},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":1926,"title":1927},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1929,"title":1930},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1932,"title":1933},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1935,"title":1936},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":1938,"title":1939},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":1941,"title":1942},"\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":1615,"title":5},{"path":1945,"title":1946},"\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":1948,"title":1949},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1951,"title":1952},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1954,"title":1955},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools","Debugging Container Queries in DevTools: Why a Rule Doesn't Match",{"path":1957,"title":1958},"\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":1960,"title":50},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics",{"path":1962,"title":1963},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1965,"title":1966},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1968,"title":1969},"\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":1971,"title":1972},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":1974,"title":1975},"\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":1977,"title":1978},"\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":1980,"title":1981},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1983,"title":1984},"\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":1986,"title":1987},"\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":1989,"title":1990},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1992,"title":1993},"\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":1995,"title":1996},"\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":1998,"title":1999},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":2001,"title":2002},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":2004,"title":2005},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2007,"title":2008},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":2010,"title":2011},"\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":2013,"title":2014},"\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":2016,"title":2017},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":2019,"title":2020},"\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":2022,"title":2023},"\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":2025,"title":2026},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2028,"title":2029},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2031,"title":2032},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2034,"title":2035},"\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":2037,"title":55},"\u002Fmastering-container-queries-responsive-layouts",{"path":2039,"title":2040},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2042,"title":2043},"\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":2045,"title":2046},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2048,"title":2049},"\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":2051,"title":2052},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2054,"title":2055},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":2057,"title":2058},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2060,"title":2061},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2063,"title":2064},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2066,"title":2067},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":2069,"title":2070},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2072,"title":2073},"\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":2075,"title":2076},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":2078,"title":2079},"\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":2081,"title":2082},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2084,"title":2085},"\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":2087,"title":2088},"\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":2090,"title":2091},"\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":2093,"title":2094},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2096,"title":2097},"\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":2099,"title":2100},"\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":2102,"title":2103},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2105,"title":2106},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2108,"title":2109},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2111,"title":2112},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2114,"title":2115},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":2117,"title":2118},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2120,"title":2121},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2123,"title":2124},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2126,"title":2127},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2129,"title":2130},"\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":2132,"title":2133},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2135,"title":2136},"\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":2138,"title":2139},"\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":2141,"title":2142},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2144,"title":2145},"\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":2147,"title":2148},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2150,"title":2151},"\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":2153,"title":2154},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2156,"title":2157},"\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":2159,"title":2160},"\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":2162,"title":2163},"\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":2165,"title":2166},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2168,"title":2169},"\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":2171,"title":2172},"\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":2174,"title":2175},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2177,"caption":2178,"height":2179,"resizable":393,"html":2180,"css":2181},"Exclusive width bands plus or and not conditions","Resize the dashed panel in both directions: the label names the active band, a short or narrow panel shrinks its text, and bands outside the middle get an outline.",300,"\n\u003Cdiv class=\"panel-host\">\n  \u003Cdiv class=\"panel\">\n    \u003Cstrong class=\"panel__label\">Layout\u003C\u002Fstrong>\n    \u003Cdiv>One\u003C\u002Fdiv>\u003Cdiv>Two\u003C\u002Fdiv>\u003Cdiv>Three\u003C\u002Fdiv>\n    \u003Cp class=\"panel__hint\">Wide and landscape: extra hint shown.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>","\n.panel-host { container: panel \u002F size; height: 14rem; resize: both; overflow: auto; border: 1px dashed var(--demo-border); }\n.panel { display: grid; gap: 0.5rem; padding: 1rem; height: 100%; box-sizing: border-box; }\n.panel > div { padding: 0.4rem; border-radius: 6px; background: var(--demo-surface); }\n.panel__label::after { content: \" · base\"; }\n@container panel (width \u003C 20rem) { .panel__label::after { content: \" · compact\"; } }\n@container panel (20rem \u003C= width \u003C 40rem) { .panel { grid-template-columns: 1fr 1fr; } .panel__label::after { content: \" · regular\"; } }\n@container panel (width >= 40rem) { .panel { grid-template-columns: repeat(3, 1fr); } .panel__label::after { content: \" · wide\"; } }\n@container panel (width \u003C 16rem) or (height \u003C 10rem) { .panel { font-size: 0.85rem; } }\n@container panel not (20rem \u003C= width \u003C 40rem) { .panel { outline: 2px solid #6366f1; outline-offset: -2px; } }\n@container panel (width >= 30rem) and ((orientation: landscape) or (aspect-ratio > 2)) { .panel__hint { display: block; } }\n.panel__hint { display: none; margin: 0; color: var(--demo-muted); }",1789717748101]