[{"data":1,"prerenderedAt":2021},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles\u002F":3,"content-all-pages":1457,"live-demo:css-scope-card":2015},{"id":4,"title":5,"body":6,"description":1437,"extension":1438,"meta":1439,"navigation":372,"path":1453,"seo":1454,"stem":1455,"__hash__":1456},"content\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles\u002Findex.md","@scope for Component Styles: Short Selectors That Cannot Leak",{"type":7,"value":8,"toc":1424},"minimark",[9,18,51,56,72,87,170,174,186,190,884,893,897,906,981,999,1006,1010,1023,1042,1052,1059,1062,1101,1121,1129,1138,1295,1311,1315,1332,1336,1348,1364,1370,1385,1389,1421],[10,11,13,17],"h1",{"id":12},"scope-for-component-styles-short-selectors-that-cannot-leak",[14,15,16],"code",{},"@scope"," for Component Styles: Short Selectors That Cannot Leak",[19,20,21,22,25,26,29,30,33,34,36,37,39,40,45,46,50],"p",{},"Component CSS has always had a reach problem. A rule written for a card's title — ",[14,23,24],{},".title { font-size: 1.1rem }"," — applies to every ",[14,27,28],{},".title"," on the page, so teams invented naming conventions such as BEM (",[14,31,32],{},".card__title",") to make selectors unique, or reached for build tools that rewrite class names. Both work by avoiding the cascade's global reach rather than controlling it. ",[14,35,16],{}," controls it directly: it limits a block of rules to a subtree of the document, and optionally stops at an inner boundary so a component's styles do not reach into content nested inside it. This page explains scope roots and limits, the new proximity step in the cascade, and where ",[14,38,16],{}," fits beside layers and naming conventions. It belongs to ",[41,42,44],"a",{"href":43},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002F","Modern CSS Reset Strategies"," in the ",[41,47,49],{"href":48},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide.",[52,53,55],"h2",{"id":54},"why-selectors-need-boundaries","Why selectors need boundaries",[19,57,58,59,63,64,67,68,71],{},"There are two directions in which component styles leak. ",[60,61,62],"strong",{},"Outward",": a short selector written for one component matches elements in another. ",[60,65,66],{},"Inward",": a component's descendant selectors reach into content nested inside it — a card's ",[14,69,70],{},"p { margin-block: 0.5rem }"," restyling the paragraphs of a comment thread placed in the card's body.",[19,73,74,75,77,78,82,83,86],{},"Naming conventions prevent outward leaks by making every selector unique, at the cost of long class names everywhere. Nothing in plain CSS prevented inward leaks except more specific selectors or the child combinator, which breaks as soon as markup gains a wrapper. ",[14,76,16],{}," solves both: the ",[79,80,81],"em",{},"scope root"," prevents outward leaks, and the ",[79,84,85],{},"scope limit"," prevents inward ones.",[88,89,95,96,95,100,95,104,95,112,95,123,95,130,95,140,95,146,95,150,95,158,95,163,95,167],"svg",{"viewBox":90,"role":91,"ariaLabel":92,"xmlns":93,"style":94},"0 0 720 320","img","Donut scope: styles apply between the card root and the slot limit, not outside the card and not inside the slot","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[97,98,99],"title",{},"A scope with a hole in it",[101,102,103],"desc",{},"An outer page region, a card region marked as the scope root, and an inner slot region marked as the scope limit. The card's styles apply in the band between the card edge and the slot edge; they do not apply outside the card or inside the slot, where nested content keeps its own styles.",[105,106,111],"text",{"textAnchor":107,"x":108,"y":109,"style":110},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","@scope (.card) to (.card__slot)",[113,114],"path",{"d":115,"fill":116,"stroke":117,"strokeWidth":118,"strokeDashArray":119,"opacity":122},"M30 46 H690 V300 H30 Z","none","currentColor","1.5",[120,121],"6","4","0.6",[105,124,129],{"textAnchor":125,"x":126,"y":127,"style":128},"start","46","66","text-anchor:start;fill:currentColor;font:12px sans-serif","page: not styled by the card",[131,132],"rect",{"x":133,"y":134,"width":135,"height":136,"rx":137,"fill":138,"opacity":139},"100","80","520","200","12","#7aa2ff","0.3",[105,141,145],{"textAnchor":125,"x":142,"y":143,"style":144},"120","104","text-anchor:start;fill:currentColor;font:600 12px ui-monospace,monospace",".card (scope root)",[105,147,149],{"textAnchor":125,"x":142,"y":148,"style":128},"126","card styles apply here",[131,151],{"x":152,"y":153,"width":154,"height":155,"rx":156,"fill":117,"opacity":157},"220","144","280","110","10","0.14",[105,159,162],{"textAnchor":107,"x":108,"y":160,"style":161},"176","text-anchor:middle;fill:currentColor;font:600 12px ui-monospace,monospace",".card__slot (scope limit)",[105,164,166],{"textAnchor":107,"x":108,"y":136,"style":165},"text-anchor:middle;fill:currentColor;font:12px sans-serif","nested content keeps",[105,168,169],{"textAnchor":107,"x":108,"y":152,"style":165},"its own styles",[52,171,173],{"id":172},"the-complete-implementation","The complete implementation",[19,175,176,177,180,181,180,183,185],{},"The card below uses short, generic selectors — ",[14,178,179],{},"h3",", ",[14,182,19],{},[14,184,41],{}," — inside a scope, and its slot holds a nested comment component whose paragraphs are untouched by the card's rules.",[187,188],"live-demo",{"name":189},"css-scope-card",[191,192,197],"pre",{"className":193,"code":194,"language":195,"meta":196,"style":196},"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>@scope for components\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font: 16px\u002F1.5 system-ui, sans-serif; margin: 1.5rem; }\n\n  \u002F* Card styles reach from .card down to, but not into, .card__slot. *\u002F\n  @scope (.card) to (.card__slot) {\n    :scope {                      \u002F* the scope root itself *\u002F\n      display: grid;\n      gap: 0.5rem;\n      padding: 1rem;\n      border: 1px solid #cbd5e1;\n      border-radius: 12px;\n    }\n    h3 { margin: 0; font-size: 1.1rem; }\n    p  { margin: 0; color: #475569; }     \u002F* short selector, cannot leak *\u002F\n    a  { color: #4338ca; font-weight: 600; }\n  }\n\n  \u002F* The comment component has its own scope. Its p is styled here, and\n     the card's p rule never reaches it because of the scope limit. *\u002F\n  @scope (.comment) {\n    :scope { padding: 0.75rem; border-radius: 8px; background: #f1f5f9; }\n    p { margin: 0; font-style: italic; color: #0f172a; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Carticle class=\"card\">\n    \u003Ch3>Release notes\u003C\u002Fh3>\n    \u003Cp>Version 4.2 adds offline sync.\u003C\u002Fp>\n    \u003Cdiv class=\"card__slot\">\n      \u003Cdiv class=\"comment\">\u003Cp>\"Offline sync saved my trip.\" — a reader\u003C\u002Fp>\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Ca href=\"\u002Freleases\u002F4-2\u002F\">Read more\u003C\u002Fa>\n  \u003C\u002Farticle>\n  \u003Cp>Page paragraph: untouched by the card's p rule.\u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[14,198,199,219,239,249,267,292,306,316,367,374,381,390,402,416,431,446,466,480,486,515,546,573,579,584,590,596,604,645,679,684,694,703,713,732,747,761,778,810,820,842,852,866,875],{"__ignoreMap":196},[200,201,204,208,212,216],"span",{"class":202,"line":203},"line",1,[200,205,207],{"class":206},"suds8","\u003C!",[200,209,211],{"class":210},"sne4z","doctype",[200,213,215],{"class":214},"s-5SL"," html",[200,217,218],{"class":206},">\n",[200,220,222,225,227,230,233,237],{"class":202,"line":221},2,[200,223,224],{"class":206},"\u003C",[200,226,195],{"class":210},[200,228,229],{"class":214}," lang",[200,231,232],{"class":206},"=",[200,234,236],{"class":235},"sT6z2","\"en\"",[200,238,218],{"class":206},[200,240,242,244,247],{"class":202,"line":241},3,[200,243,224],{"class":206},[200,245,246],{"class":210},"head",[200,248,218],{"class":206},[200,250,252,254,257,260,262,265],{"class":202,"line":251},4,[200,253,224],{"class":206},[200,255,256],{"class":210},"meta",[200,258,259],{"class":214}," charset",[200,261,232],{"class":206},[200,263,264],{"class":235},"\"utf-8\"",[200,266,218],{"class":206},[200,268,270,272,274,277,279,282,285,287,290],{"class":202,"line":269},5,[200,271,224],{"class":206},[200,273,256],{"class":210},[200,275,276],{"class":214}," name",[200,278,232],{"class":206},[200,280,281],{"class":235},"\"viewport\"",[200,283,284],{"class":214}," content",[200,286,232],{"class":206},[200,288,289],{"class":235},"\"width=device-width, initial-scale=1\"",[200,291,218],{"class":206},[200,293,295,297,299,302,304],{"class":202,"line":294},6,[200,296,224],{"class":206},[200,298,97],{"class":210},[200,300,301],{"class":206},">@scope for components\u003C\u002F",[200,303,97],{"class":210},[200,305,218],{"class":206},[200,307,309,311,314],{"class":202,"line":308},7,[200,310,224],{"class":206},[200,312,313],{"class":210},"style",[200,315,218],{"class":206},[200,317,319,322,325,328,331,334,338,341,343,346,348,351,354,357,359,361,364],{"class":202,"line":318},8,[200,320,321],{"class":210},"  body",[200,323,324],{"class":206}," { ",[200,326,327],{"class":214},"font",[200,329,330],{"class":206},": ",[200,332,333],{"class":214},"16",[200,335,337],{"class":336},"sHUrx","px",[200,339,340],{"class":206},"\u002F",[200,342,118],{"class":214},[200,344,345],{"class":214}," system-ui",[200,347,180],{"class":206},[200,349,350],{"class":214},"sans-serif",[200,352,353],{"class":206},"; ",[200,355,356],{"class":214},"margin",[200,358,330],{"class":206},[200,360,118],{"class":214},[200,362,363],{"class":336},"rem",[200,365,366],{"class":206},"; }\n",[200,368,370],{"class":202,"line":369},9,[200,371,373],{"emptyLinePlaceholder":372},true,"\n",[200,375,377],{"class":202,"line":376},10,[200,378,380],{"class":379},"sLBg1","  \u002F* Card styles reach from .card down to, but not into, .card__slot. *\u002F\n",[200,382,384,387],{"class":202,"line":383},11,[200,385,386],{"class":336},"  @scope",[200,388,389],{"class":206}," (.card) to (.card__slot) {\n",[200,391,393,396,399],{"class":202,"line":392},12,[200,394,395],{"class":214},"    :scope",[200,397,398],{"class":206}," {                      ",[200,400,401],{"class":379},"\u002F* the scope root itself *\u002F\n",[200,403,405,408,410,413],{"class":202,"line":404},13,[200,406,407],{"class":214},"      display",[200,409,330],{"class":206},[200,411,412],{"class":214},"grid",[200,414,415],{"class":206},";\n",[200,417,419,422,424,427,429],{"class":202,"line":418},14,[200,420,421],{"class":214},"      gap",[200,423,330],{"class":206},[200,425,426],{"class":214},"0.5",[200,428,363],{"class":336},[200,430,415],{"class":206},[200,432,434,437,439,442,444],{"class":202,"line":433},15,[200,435,436],{"class":214},"      padding",[200,438,330],{"class":206},[200,440,441],{"class":214},"1",[200,443,363],{"class":336},[200,445,415],{"class":206},[200,447,449,452,454,456,458,461,464],{"class":202,"line":448},16,[200,450,451],{"class":214},"      border",[200,453,330],{"class":206},[200,455,441],{"class":214},[200,457,337],{"class":336},[200,459,460],{"class":214}," solid",[200,462,463],{"class":214}," #cbd5e1",[200,465,415],{"class":206},[200,467,469,472,474,476,478],{"class":202,"line":468},17,[200,470,471],{"class":214},"      border-radius",[200,473,330],{"class":206},[200,475,137],{"class":214},[200,477,337],{"class":336},[200,479,415],{"class":206},[200,481,483],{"class":202,"line":482},18,[200,484,485],{"class":206},"    }\n",[200,487,489,492,494,496,498,501,503,506,508,511,513],{"class":202,"line":488},19,[200,490,491],{"class":210},"    h3",[200,493,324],{"class":206},[200,495,356],{"class":214},[200,497,330],{"class":206},[200,499,500],{"class":214},"0",[200,502,353],{"class":206},[200,504,505],{"class":214},"font-size",[200,507,330],{"class":206},[200,509,510],{"class":214},"1.1",[200,512,363],{"class":336},[200,514,366],{"class":206},[200,516,518,521,524,526,528,530,532,535,537,540,543],{"class":202,"line":517},20,[200,519,520],{"class":210},"    p",[200,522,523],{"class":206},"  { ",[200,525,356],{"class":214},[200,527,330],{"class":206},[200,529,500],{"class":214},[200,531,353],{"class":206},[200,533,534],{"class":214},"color",[200,536,330],{"class":206},[200,538,539],{"class":214},"#475569",[200,541,542],{"class":206},"; }     ",[200,544,545],{"class":379},"\u002F* short selector, cannot leak *\u002F\n",[200,547,549,552,554,556,558,561,563,566,568,571],{"class":202,"line":548},21,[200,550,551],{"class":210},"    a",[200,553,523],{"class":206},[200,555,534],{"class":214},[200,557,330],{"class":206},[200,559,560],{"class":214},"#4338ca",[200,562,353],{"class":206},[200,564,565],{"class":214},"font-weight",[200,567,330],{"class":206},[200,569,570],{"class":214},"600",[200,572,366],{"class":206},[200,574,576],{"class":202,"line":575},22,[200,577,578],{"class":206},"  }\n",[200,580,582],{"class":202,"line":581},23,[200,583,373],{"emptyLinePlaceholder":372},[200,585,587],{"class":202,"line":586},24,[200,588,589],{"class":379},"  \u002F* The comment component has its own scope. Its p is styled here, and\n",[200,591,593],{"class":202,"line":592},25,[200,594,595],{"class":379},"     the card's p rule never reaches it because of the scope limit. *\u002F\n",[200,597,599,601],{"class":202,"line":598},26,[200,600,386],{"class":336},[200,602,603],{"class":206}," (.comment) {\n",[200,605,607,609,611,614,616,619,621,623,626,628,631,633,635,638,640,643],{"class":202,"line":606},27,[200,608,395],{"class":214},[200,610,324],{"class":206},[200,612,613],{"class":214},"padding",[200,615,330],{"class":206},[200,617,618],{"class":214},"0.75",[200,620,363],{"class":336},[200,622,353],{"class":206},[200,624,625],{"class":214},"border-radius",[200,627,330],{"class":206},[200,629,630],{"class":214},"8",[200,632,337],{"class":336},[200,634,353],{"class":206},[200,636,637],{"class":214},"background",[200,639,330],{"class":206},[200,641,642],{"class":214},"#f1f5f9",[200,644,366],{"class":206},[200,646,648,650,652,654,656,658,660,663,665,668,670,672,674,677],{"class":202,"line":647},28,[200,649,520],{"class":210},[200,651,324],{"class":206},[200,653,356],{"class":214},[200,655,330],{"class":206},[200,657,500],{"class":214},[200,659,353],{"class":206},[200,661,662],{"class":214},"font-style",[200,664,330],{"class":206},[200,666,667],{"class":214},"italic",[200,669,353],{"class":206},[200,671,534],{"class":214},[200,673,330],{"class":206},[200,675,676],{"class":214},"#0f172a",[200,678,366],{"class":206},[200,680,682],{"class":202,"line":681},29,[200,683,578],{"class":206},[200,685,687,690,692],{"class":202,"line":686},30,[200,688,689],{"class":206},"\u003C\u002F",[200,691,313],{"class":210},[200,693,218],{"class":206},[200,695,697,699,701],{"class":202,"line":696},31,[200,698,689],{"class":206},[200,700,246],{"class":210},[200,702,218],{"class":206},[200,704,706,708,711],{"class":202,"line":705},32,[200,707,224],{"class":206},[200,709,710],{"class":210},"body",[200,712,218],{"class":206},[200,714,716,719,722,725,727,730],{"class":202,"line":715},33,[200,717,718],{"class":206},"  \u003C",[200,720,721],{"class":210},"article",[200,723,724],{"class":214}," class",[200,726,232],{"class":206},[200,728,729],{"class":235},"\"card\"",[200,731,218],{"class":206},[200,733,735,738,740,743,745],{"class":202,"line":734},34,[200,736,737],{"class":206},"    \u003C",[200,739,179],{"class":210},[200,741,742],{"class":206},">Release notes\u003C\u002F",[200,744,179],{"class":210},[200,746,218],{"class":206},[200,748,750,752,754,757,759],{"class":202,"line":749},35,[200,751,737],{"class":206},[200,753,19],{"class":210},[200,755,756],{"class":206},">Version 4.2 adds offline sync.\u003C\u002F",[200,758,19],{"class":210},[200,760,218],{"class":206},[200,762,764,766,769,771,773,776],{"class":202,"line":763},36,[200,765,737],{"class":206},[200,767,768],{"class":210},"div",[200,770,724],{"class":214},[200,772,232],{"class":206},[200,774,775],{"class":235},"\"card__slot\"",[200,777,218],{"class":206},[200,779,781,784,786,788,790,793,796,798,801,803,806,808],{"class":202,"line":780},37,[200,782,783],{"class":206},"      \u003C",[200,785,768],{"class":210},[200,787,724],{"class":214},[200,789,232],{"class":206},[200,791,792],{"class":235},"\"comment\"",[200,794,795],{"class":206},">\u003C",[200,797,19],{"class":210},[200,799,800],{"class":206},">\"Offline sync saved my trip.\" — a reader\u003C\u002F",[200,802,19],{"class":210},[200,804,805],{"class":206},">\u003C\u002F",[200,807,768],{"class":210},[200,809,218],{"class":206},[200,811,813,816,818],{"class":202,"line":812},38,[200,814,815],{"class":206},"    \u003C\u002F",[200,817,768],{"class":210},[200,819,218],{"class":206},[200,821,823,825,827,830,832,835,838,840],{"class":202,"line":822},39,[200,824,737],{"class":206},[200,826,41],{"class":210},[200,828,829],{"class":214}," href",[200,831,232],{"class":206},[200,833,834],{"class":235},"\"\u002Freleases\u002F4-2\u002F\"",[200,836,837],{"class":206},">Read more\u003C\u002F",[200,839,41],{"class":210},[200,841,218],{"class":206},[200,843,845,848,850],{"class":202,"line":844},40,[200,846,847],{"class":206},"  \u003C\u002F",[200,849,721],{"class":210},[200,851,218],{"class":206},[200,853,855,857,859,862,864],{"class":202,"line":854},41,[200,856,718],{"class":206},[200,858,19],{"class":210},[200,860,861],{"class":206},">Page paragraph: untouched by the card's p rule.\u003C\u002F",[200,863,19],{"class":210},[200,865,218],{"class":206},[200,867,869,871,873],{"class":202,"line":868},42,[200,870,689],{"class":206},[200,872,710],{"class":210},[200,874,218],{"class":206},[200,876,878,880,882],{"class":202,"line":877},43,[200,879,689],{"class":206},[200,881,195],{"class":210},[200,883,218],{"class":206},[19,885,886,887,889,890,892],{},"Three things happen here that plain descendant selectors could not guarantee. The page-level paragraph outside the card is unaffected by the card's ",[14,888,19],{}," rule — outward containment. The comment's paragraph inside the slot is unaffected by the card's ",[14,891,19],{}," rule — inward containment. And the card's link and heading use bare element selectors without any naming scheme, because the scope makes them unambiguous.",[52,894,896],{"id":895},"the-key-technique-proximity-joins-the-cascade","The key technique: proximity joins the cascade",[19,898,899,901,902,905],{},[14,900,16],{}," adds a new step to how the cascade chooses between competing declarations. After origin, importance, layers and specificity are compared and found equal, ",[79,903,904],{},"scope proximity"," decides: the rule whose scope root is fewer generations away from the element wins. Only if proximity is also equal does source order break the tie.",[88,907,95,910,95,913,95,916,95,919,95,924,95,928,95,931,95,934,95,937,95,940,95,944,95,949,95,952,95,956,95,960,95,966,95,973,95,978],{"viewBox":908,"role":91,"ariaLabel":909,"xmlns":93,"style":94},"0 0 720 280","Cascade comparison order with scope proximity inserted between specificity and source order, and an example of nested themes",[97,911,912],{},"Where proximity sits in the cascade",[101,914,915],{},"Comparison steps in order: origin and importance, cascade layers, specificity, scope proximity, source order. Example: a link inside a dark theme scope nested inside a light theme scope takes the dark theme's colour because the dark scope root is closer.",[105,917,918],{"textAnchor":107,"x":108,"y":109,"style":110},"Ties are broken by the nearest scope root",[131,920],{"x":921,"y":922,"width":142,"height":923,"rx":630,"fill":116,"stroke":117,"strokeWidth":118,"opacity":122},"20","50","44",[105,925,927],{"textAnchor":107,"x":134,"y":926,"style":165},"77","origin",[131,929],{"x":930,"y":922,"width":142,"height":923,"rx":630,"fill":116,"stroke":117,"strokeWidth":118,"opacity":122},"160",[105,932,933],{"textAnchor":107,"x":152,"y":926,"style":165},"layers",[131,935],{"x":936,"y":922,"width":142,"height":923,"rx":630,"fill":116,"stroke":117,"strokeWidth":118,"opacity":122},"300",[105,938,939],{"textAnchor":107,"x":108,"y":926,"style":165},"specificity",[131,941],{"x":942,"y":922,"width":142,"height":923,"rx":630,"fill":138,"opacity":943},"440","0.45",[105,945,948],{"textAnchor":107,"x":946,"y":926,"style":947},"500","text-anchor:middle;fill:currentColor;font:600 12px sans-serif","proximity",[131,950],{"x":951,"y":922,"width":142,"height":923,"rx":630,"fill":116,"stroke":117,"strokeWidth":118,"opacity":122},"580",[105,953,955],{"textAnchor":107,"x":954,"y":926,"style":165},"640","source order",[131,957],{"x":142,"y":958,"width":959,"height":142,"rx":156,"fill":116,"stroke":117,"strokeWidth":118,"opacity":426},"130","480",[105,961,965],{"textAnchor":125,"x":962,"y":963,"style":964},"140","152","text-anchor:start;fill:currentColor;font:12px ui-monospace,monospace",".theme-light",[131,967],{"x":968,"y":969,"width":970,"height":971,"rx":630,"fill":138,"opacity":972},"190","164","340","72","0.2",[105,974,977],{"textAnchor":125,"x":975,"y":976,"style":964},"210","186",".theme-dark",[105,979,980],{"textAnchor":107,"x":108,"y":152,"style":165},"a link here: dark scope is 1 step away → dark wins",[19,982,983,984,987,988,991,992,353,996,998],{},"Proximity is what makes nested themes and nested components behave intuitively. Two scoped theme blocks — ",[14,985,986],{},"@scope (.theme-light) { a { color: … } }"," and ",[14,989,990],{},"@scope (.theme-dark) { a { color: … } }"," — have identical specificity. Without proximity, whichever appeared later in the stylesheet would win everywhere, so a light section nested inside a dark one would get the wrong link colour. With proximity, each link takes its colour from the nearest theme root around it. The same problem is solved with custom properties and style queries in ",[41,993,995],{"href":994},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming\u002F","Container Style Query Theming",[14,997,16],{}," solves it within plain selectors.",[19,1000,1001,1002,1005],{},"Note that proximity sits ",[79,1003,1004],{},"below"," specificity. A more specific selector in an outer scope still beats a less specific one in an inner scope. Keeping scoped selectors short and uniform — bare elements and single classes — lets proximity do its job.",[52,1007,1009],{"id":1008},"specificity-inside-a-scope","Specificity inside a scope",[19,1011,1012,1013,1015,1016,1018,1019,1022],{},"Selectors inside ",[14,1014,16],{}," are written as if relative to the scope root, and their specificity is calculated from the selector as written — the scope root does not add weight. ",[14,1017,19],{}," inside ",[14,1020,1021],{},"@scope (.card)"," has the specificity of a bare element selector, one type selector, even though it only matches paragraphs within cards. That is a deliberate design choice: it lets scoped component rules stay light, so utilities and state classes override them easily.",[19,1024,1025,1026,1029,1030,1033,1034,1037,1038,1041],{},"The ",[14,1027,1028],{},":scope"," pseudo-class refers to the scope root and carries the specificity of a pseudo-class, like a single class. Writing ",[14,1031,1032],{},":scope > p"," targets only direct children of the root and weighs one class plus one type. If you want the scope root to contribute its full selector's weight — for example to match a legacy rule — write it out explicitly with ",[14,1035,1036],{},"&"," in the nested form, which behaves like ",[14,1039,1040],{},":is(.card)",".",[19,1043,1044,1045,1047,1048,1051],{},"Two practical consequences follow. A scoped ",[14,1046,19],{}," rule loses to an unscoped ",[14,1049,1050],{},".intro"," class anywhere on the page if they target the same element, because class beats type before proximity is considered; that is usually what you want, since a utility or state class should win. And two scoped rules for the same element from nested scopes with different selector weights are settled by weight first: a heavier selector in the outer scope beats a lighter one in the inner scope. Keeping scoped selectors uniformly light is what lets proximity make the decisions you expect.",[52,1053,1055,1056,1058],{"id":1054},"where-scope-fits-with-layers-and-conventions","Where ",[14,1057,16],{}," fits with layers and conventions",[19,1060,1061],{},"The three tools answer different questions, and they combine cleanly:",[1063,1064,1065,1076,1087],"ul",{},[1066,1067,1068,1071,1072,1075],"li",{},[60,1069,1070],{},"Cascade layers"," decide ",[79,1073,1074],{},"which group of styles wins"," — reset, tokens, components, utilities.",[1066,1077,1078,1082,1083,1086],{},[60,1079,1080],{},[14,1081,16],{}," decides ",[79,1084,1085],{},"which elements a group of styles can reach"," — this card, not the page; this card, not its slot.",[1066,1088,1089,1092,1093,1096,1097,1100],{},[60,1090,1091],{},"Naming conventions"," make markup ",[79,1094,1095],{},"readable and searchable"," — ",[14,1098,1099],{},".card__slot"," still says what the element is for.",[19,1102,1103,1104,1107,1108,1111,1112,1114,1115,1117,1118,1120],{},"A practical arrangement puts each component's scoped rules inside the ",[14,1105,1106],{},"components"," layer: ",[14,1109,1110],{},"@layer components { @scope (.card) to (.card__slot) { … } }",". The layer places the component relative to utilities and resets; the scope contains it relative to the rest of the page. Teams that adopt ",[14,1113,16],{}," often keep BEM-style names for elements that act as scope boundaries — ",[14,1116,1099],{}," is clearer than an anonymous ",[14,1119,768],{}," — while dropping the long names for ordinary descendants.",[52,1122,1124,1125,1128],{"id":1123},"variation-inline-style-scoping","Variation: inline ",[14,1126,1127],{},"\u003Cstyle>"," scoping",[19,1130,1131,1132,1134,1135,1137],{},"A ",[14,1133,1127],{}," element placed inside a component's markup can use ",[14,1136,16],{}," with no selector, which scopes its rules to the style element's parent. This is useful for server-rendered components and CMS blocks that ship their own styles.",[191,1139,1141],{"className":193,"code":1140,"language":195,"meta":196,"style":196},"\u003Csection class=\"promo\">\n  \u003Cstyle>\n    @scope {\n      :scope { padding: 1.5rem; border-radius: 12px; background: #fef3c7; }\n      h2 { margin: 0 0 0.5rem; }\n      p  { margin: 0; }\n    }\n  \u003C\u002Fstyle>\n  \u003Ch2>Spring sale\u003C\u002Fh2>\n  \u003Cp>Twenty percent off all tents this week.\u003C\u002Fp>\n\u003C\u002Fsection>\n",[14,1142,1143,1159,1167,1175,1211,1234,1249,1253,1261,1274,1287],{"__ignoreMap":196},[200,1144,1145,1147,1150,1152,1154,1157],{"class":202,"line":203},[200,1146,224],{"class":206},[200,1148,1149],{"class":210},"section",[200,1151,724],{"class":214},[200,1153,232],{"class":206},[200,1155,1156],{"class":235},"\"promo\"",[200,1158,218],{"class":206},[200,1160,1161,1163,1165],{"class":202,"line":221},[200,1162,718],{"class":206},[200,1164,313],{"class":210},[200,1166,218],{"class":206},[200,1168,1169,1172],{"class":202,"line":241},[200,1170,1171],{"class":336},"    @scope",[200,1173,1174],{"class":206}," {\n",[200,1176,1177,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1209],{"class":202,"line":251},[200,1178,1179],{"class":214},"      :scope",[200,1181,324],{"class":206},[200,1183,613],{"class":214},[200,1185,330],{"class":206},[200,1187,118],{"class":214},[200,1189,363],{"class":336},[200,1191,353],{"class":206},[200,1193,625],{"class":214},[200,1195,330],{"class":206},[200,1197,137],{"class":214},[200,1199,337],{"class":336},[200,1201,353],{"class":206},[200,1203,637],{"class":214},[200,1205,330],{"class":206},[200,1207,1208],{"class":214},"#fef3c7",[200,1210,366],{"class":206},[200,1212,1213,1216,1218,1220,1222,1224,1227,1230,1232],{"class":202,"line":269},[200,1214,1215],{"class":210},"      h2",[200,1217,324],{"class":206},[200,1219,356],{"class":214},[200,1221,330],{"class":206},[200,1223,500],{"class":214},[200,1225,1226],{"class":214}," 0",[200,1228,1229],{"class":214}," 0.5",[200,1231,363],{"class":336},[200,1233,366],{"class":206},[200,1235,1236,1239,1241,1243,1245,1247],{"class":202,"line":294},[200,1237,1238],{"class":210},"      p",[200,1240,523],{"class":206},[200,1242,356],{"class":214},[200,1244,330],{"class":206},[200,1246,500],{"class":214},[200,1248,366],{"class":206},[200,1250,1251],{"class":202,"line":308},[200,1252,485],{"class":206},[200,1254,1255,1257,1259],{"class":202,"line":318},[200,1256,847],{"class":206},[200,1258,313],{"class":210},[200,1260,218],{"class":206},[200,1262,1263,1265,1267,1270,1272],{"class":202,"line":369},[200,1264,718],{"class":206},[200,1266,52],{"class":210},[200,1268,1269],{"class":206},">Spring sale\u003C\u002F",[200,1271,52],{"class":210},[200,1273,218],{"class":206},[200,1275,1276,1278,1280,1283,1285],{"class":202,"line":376},[200,1277,718],{"class":206},[200,1279,19],{"class":210},[200,1281,1282],{"class":206},">Twenty percent off all tents this week.\u003C\u002F",[200,1284,19],{"class":210},[200,1286,218],{"class":206},[200,1288,1289,1291,1293],{"class":202,"line":383},[200,1290,689],{"class":206},[200,1292,1149],{"class":210},[200,1294,218],{"class":206},[19,1296,1297,1298,1301,1302,987,1304,1306,1307,1041],{},"The styles cannot escape the ",[14,1299,1300],{},"\u003Csection>",", so a CMS editor can drop the block onto any page without its generic ",[14,1303,52],{},[14,1305,19],{}," rules affecting the rest of the page. The same property also makes the block's motion rules safe to include inline; for entrance animations on such blocks, see ",[41,1308,1310],{"href":1309},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations\u002F","Starting-Style Entry Animations",[52,1312,1314],{"id":1313},"browser-support","Browser support",[19,1316,1317,1319,1320,1322,1323,1325,1326,1328,1329,1331],{},[14,1318,16],{}," is supported in current Chromium-based browsers and in Safari; Firefox added support more recently, so check its current release status against your support policy. In an engine without ",[14,1321,16],{},", the entire ",[14,1324,16],{}," block is ignored — its rules do not apply at all — so scoped styles need either a fallback or a support policy that excludes those engines. A common approach is to keep BEM-style class names in the scoped selectors during the transition (",[14,1327,32],{}," rather than ",[14,1330,179],{},"), so the same rules can also be emitted unscoped for older browsers. Cascade layers are supported in Chrome and Edge 99+, Firefox 97+ and Safari 15.4+.",[52,1333,1335],{"id":1334},"faq","FAQ",[19,1337,1338,1344,1345,1347],{},[60,1339,1340,1341,1343],{},"What does ",[14,1342,16],{}," do?","\nIt restricts a block of style rules to elements inside a scope root, optionally stopping at a scope limit. Selectors inside the block only match elements within that range, so short selectors like ",[14,1346,28],{}," cannot leak into unrelated parts of the page.",[19,1349,1350,1353,1354,1356,1357,1360,1361,1363],{},[60,1351,1352],{},"What is donut scoping?","\nScoping that has a hole in the middle. ",[14,1355,111],{}," styles everything inside ",[14,1358,1359],{},".card"," except the contents of ",[14,1362,1099],{},", so a card's styles do not reach into content nested within it, such as another component placed in the slot.",[19,1365,1366,1369],{},[60,1367,1368],{},"How does scoping proximity affect the cascade?","\nWhen two scoped rules with equal specificity and layer order both match an element, the one whose scope root is closer in the DOM wins. This lets nested themes or components override outer ones naturally, without raising specificity.",[19,1371,1372,1378,1379,1381,1382,1384],{},[60,1373,1374,1375,1377],{},"Does ",[14,1376,16],{}," replace cascade layers or BEM?","\nIt complements them. Layers decide precedence between groups of styles, ",[14,1380,16],{}," decides which elements a group can reach, and naming conventions remain useful for readability. Many teams use layers for ordering and ",[14,1383,16],{}," to keep component selectors short and contained.",[52,1386,1388],{"id":1387},"related","Related",[1063,1390,1391,1396,1403,1414],{},[1066,1392,1393,1395],{},[41,1394,44],{"href":43}," — the parent guide.",[1066,1397,1398,1402],{},[41,1399,1401],{"href":1400},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks\u002F","Cascade Layers vs Specificity Hacks"," — ordering groups of styles.",[1066,1404,1405,1413],{},[41,1406,1408,1409,1412],{"href":1407},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fcontent-aware-card-layouts-with-has\u002F","Content-Aware Card Layouts With ",[1410,1411],"has",{},"()"," — components that style themselves by their contents.",[1066,1415,1416,1420],{},[41,1417,1419],{"href":1418},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety\u002F","Registered Properties and Type Safety"," — scoping tokens as well as selectors.",[313,1422,1423],{},"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);}",{"title":196,"searchDepth":221,"depth":221,"links":1425},[1426,1427,1428,1429,1430,1432,1434,1435,1436],{"id":54,"depth":221,"text":55},{"id":172,"depth":221,"text":173},{"id":895,"depth":221,"text":896},{"id":1008,"depth":221,"text":1009},{"id":1054,"depth":221,"text":1431},"Where @scope fits with layers and conventions",{"id":1123,"depth":221,"text":1433},"Variation: inline \u003Cstyle> scoping",{"id":1313,"depth":221,"text":1314},{"id":1334,"depth":221,"text":1335},{"id":1387,"depth":221,"text":1388},"Limit component styles to a subtree with @scope: scope roots and limits for donut scoping, proximity in the cascade, and how it compares with BEM and layers.","md",{"pageTitle":1440,"datePublished":1441,"dateModified":1441,"faq":1442},"@scope for Component Styles in CSS","2026-09-18",[1443,1446,1448,1450],{"q":1444,"a":1445},"What does @scope do?","It restricts a block of style rules to elements inside a scope root, optionally stopping at a scope limit. Selectors inside the block only match elements within that range, so short selectors like .title cannot leak into unrelated parts of the page.",{"q":1352,"a":1447},"Scoping that has a hole in the middle. @scope (.card) to (.card__slot) styles everything inside .card except the contents of .card__slot, so a card's styles do not reach into content nested within it, such as another component placed in the slot.",{"q":1368,"a":1449},"When two scoped rules with equal specificity and layer order both match an element, the one whose scope root is closer in the DOM wins. This lets nested themes or components override outer ones naturally, without raising specificity.",{"q":1451,"a":1452},"Does @scope replace cascade layers or BEM?","It complements them. Layers decide precedence between groups of styles, @scope decides which elements a group can reach, and naming conventions remain useful for readability. Many teams use layers for ordering and @scope to keep component selectors short and contained.","\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles",{"title":5,"description":1437},"mastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles\u002Findex","7_8FDNIbH27LecKV6Osdld-3flCquQjVIJ5CQjDr9GM",[1458,1461,1464,1467,1470,1473,1476,1479,1482,1485,1488,1491,1494,1497,1500,1503,1506,1509,1512,1515,1518,1521,1524,1527,1530,1533,1536,1539,1542,1545,1548,1551,1554,1557,1560,1563,1566,1569,1572,1575,1578,1581,1584,1587,1590,1593,1596,1599,1602,1605,1608,1611,1614,1617,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,1739,1742,1745,1748,1751,1754,1757,1760,1763,1766,1769,1772,1775,1778,1781,1784,1787,1790,1793,1796,1799,1802,1805,1808,1811,1814,1817,1820,1823,1826,1829,1832,1835,1838,1841,1844,1847,1850,1853,1856,1859,1862,1865,1868,1871,1874,1877,1879,1882,1885,1888,1891,1894,1897,1900,1903,1906,1907,1910,1913,1916,1919,1922,1925,1928,1931,1934,1937,1940,1943,1946,1949,1952,1955,1958,1961,1964,1967,1970,1973,1976,1979,1982,1985,1988,1991,1994,1997,2000,2003,2006,2009,2012],{"path":1459,"title":1460},"\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":1462,"title":1463},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1465,"title":1466},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1468,"title":1469},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1471,"title":1472},"\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":1474,"title":1475},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1477,"title":1478},"\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":1480,"title":1481},"\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":1483,"title":1484},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1486,"title":1487},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1489,"title":1490},"\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":1492,"title":1493},"\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":1495,"title":1496},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1498,"title":1499},"\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":1501,"title":1502},"\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":1504,"title":1505},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1507,"title":1508},"\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":1510,"title":1511},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1513,"title":1514},"\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":1516,"title":1517},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1519,"title":1520},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1522,"title":1523},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1525,"title":1526},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1528,"title":1529},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1531,"title":1532},"\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":1534,"title":1535},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1537,"title":1538},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1540,"title":1541},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1543,"title":1544},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1546,"title":1547},"\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":1549,"title":1550},"\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":1552,"title":1553},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1555,"title":1556},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1558,"title":1559},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1561,"title":1562},"\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":1564,"title":1565},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1567,"title":1568},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1570,"title":1571},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1573,"title":1574},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1576,"title":1577},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1579,"title":1580},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1582,"title":1583},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1585,"title":1586},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1588,"title":1589},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1591,"title":1592},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1594,"title":1595},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1597,"title":1598},"\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":1600,"title":1601},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1603,"title":1604},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1606,"title":1607},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1609,"title":1610},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1612,"title":1613},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1615,"title":1616},"\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":1618,"title":1619},"\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":1621,"title":1622},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1624,"title":1625},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1627,"title":1628},"\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":1630,"title":1631},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1633,"title":1634},"\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":1636,"title":1637},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1639,"title":1640},"\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":1642,"title":1643},"\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":1645,"title":1646},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1648,"title":1649},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1651,"title":1652},"\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":1654,"title":1655},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1657,"title":1658},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1660,"title":1661},"\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":1663,"title":1664},"\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":1666,"title":1667},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1669,"title":1670},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1672,"title":1673},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1675,"title":1676},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1678,"title":1679},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1681,"title":1682},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1684,"title":1685},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1687,"title":1688},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1690,"title":1691},"\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":1693,"title":1694},"\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":1696,"title":1697},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1699,"title":1700},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1702,"title":1703},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1705,"title":1706},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1708,"title":1709},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1711,"title":1712},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1714,"title":1715},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1717,"title":1718},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":1720,"title":1721},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1723,"title":1724},"\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":1726,"title":1727},"\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":1729,"title":1730},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":1732,"title":1733},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1735,"title":1736},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":340,"title":1738},"Modern CSS Layouts & Micro-Interactions",{"path":1740,"title":1741},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1743,"title":1744},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1746,"title":1747},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":1749,"title":1750},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1752,"title":1753},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1755,"title":1756},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":1758,"title":1759},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":1761,"title":1762},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":1764,"title":1765},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1767,"title":1768},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1770,"title":1771},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1773,"title":1774},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":1776,"title":1777},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":1779,"title":1780},"\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":1782,"title":1783},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":1785,"title":1786},"\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":1788,"title":1789},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1791,"title":1792},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1794,"title":1795},"\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":1797,"title":1798},"\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":1800,"title":1801},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1803,"title":1804},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1806,"title":1807},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1809,"title":1810},"\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":1812,"title":1813},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":1815,"title":1816},"\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":1818,"title":1819},"\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":1821,"title":1822},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1824,"title":1825},"\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":1827,"title":1828},"\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":1830,"title":1831},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1833,"title":1834},"\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":1836,"title":1837},"\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":1839,"title":1840},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":1842,"title":1843},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":1845,"title":1846},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":1848,"title":1849},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":1851,"title":1852},"\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":1854,"title":1855},"\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":1857,"title":1858},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":1860,"title":1861},"\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":1863,"title":1864},"\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":1866,"title":1867},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1869,"title":1870},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1872,"title":1873},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1875,"title":1876},"\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":1878,"title":49},"\u002Fmastering-container-queries-responsive-layouts",{"path":1880,"title":1881},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1883,"title":1884},"\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":1886,"title":1887},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1889,"title":1890},"\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":1892,"title":1893},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1895,"title":1896},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":1898,"title":1899},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1901,"title":1902},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1904,"title":1905},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1453,"title":5},{"path":1908,"title":1909},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1911,"title":1912},"\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":1914,"title":1915},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":1917,"title":1918},"\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":1920,"title":1921},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":1923,"title":1924},"\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":1926,"title":1927},"\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":1929,"title":1930},"\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":1932,"title":1933},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":1935,"title":1936},"\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":1938,"title":1939},"\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":1941,"title":1942},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1944,"title":1945},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1947,"title":1948},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1950,"title":1951},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1953,"title":1954},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":1956,"title":1957},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1959,"title":1960},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":1962,"title":1963},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":1965,"title":1966},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":1968,"title":1969},"\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":1971,"title":1972},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":1974,"title":1975},"\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":1977,"title":1978},"\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":1980,"title":1981},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":1983,"title":1984},"\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":1986,"title":1987},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1989,"title":1990},"\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":1992,"title":1993},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":1995,"title":1996},"\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":1998,"title":1999},"\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":2001,"title":2002},"\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":2004,"title":2005},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2007,"title":2008},"\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":2010,"title":2011},"\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":2013,"title":2014},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2016,"caption":2017,"height":2018,"html":2019,"css":2020},"Donut-scoped card styles that stop at the slot","The card styles its own p grey, but the comment in the slot and the paragraph outside the card keep their own styles. (In browsers without @scope the styled rules do not apply.)",280,"\n\u003Cdiv class=\"wrap\">\n  \u003Carticle class=\"card\">\n    \u003Ch3>Release notes\u003C\u002Fh3>\n    \u003Cp>Version 4.2 adds offline sync.\u003C\u002Fp>\n    \u003Cdiv class=\"card__slot\">\u003Cdiv class=\"comment\">\u003Cp>\"Offline sync saved my trip.\" — a reader\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n    \u003Ca href=\"#\">Read more\u003C\u002Fa>\n  \u003C\u002Farticle>\n  \u003Cp class=\"outside\">Page paragraph: untouched by the card's p rule.\u003C\u002Fp>\n\u003C\u002Fdiv>","\nbody { display: block; }\n@scope (.card) to (.card__slot) {\n  :scope { display: grid; gap: 0.5rem; padding: 1rem; border: 1px solid var(--demo-border); border-radius: 12px; }\n  h3 { margin: 0; font-size: 1.1rem; }\n  p { margin: 0; color: var(--demo-muted); }\n  a { color: var(--demo-accent); font-weight: 600; }\n}\n@scope (.comment) {\n  :scope { padding: 0.75rem; border-radius: 8px; background: var(--demo-surface); }\n  p { margin: 0; font-style: italic; color: var(--demo-fg); }\n}\n.outside { margin: 1rem 0 0; }",1789717746294]