[{"data":1,"prerenderedAt":2092},["ShallowReactive",2],{"page-\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions\u002F":3,"content-all-pages":1533},{"id":4,"title":5,"body":6,"description":1516,"extension":1517,"meta":1518,"navigation":789,"path":1529,"seo":1530,"stem":1531,"__hash__":1532},"content\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions\u002Findex.md","Cross-Document View Transitions",{"type":7,"value":8,"toc":1505},"minimark",[9,13,28,33,41,144,148,151,498,754,1007,1010,1014,1026,1033,1114,1118,1132,1225,1241,1245,1248,1277,1280,1368,1372,1375,1415,1418,1422,1435,1439,1448,1454,1463,1469,1473,1501],[10,11,5],"h1",{"id":12},"cross-document-view-transitions",[14,15,16,17,22,23,27],"p",{},"Same-document view transitions animate a change made by script within one page. Cross-document view transitions do the same thing across an ordinary link click: the browser captures the old page, navigates, captures the new page, and animates between the two — for a multi-page site with no client-side router at all. For content sites, documentation and shops built as plain HTML, this is the feature that removes the last argument for turning a site into a single-page app purely for smooth navigation. This page covers opting in, shared elements across documents, customising the animation, and the conditions under which the browser quietly skips the transition. It belongs to ",[18,19,21],"a",{"href":20},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002F","View Transitions for CSS Developers"," in the ",[18,24,26],{"href":25},"\u002Fcss-only-micro-interactions-animations\u002F","CSS-Only Micro-Interactions & Animations"," guide.",[29,30,32],"h2",{"id":31},"how-a-cross-document-transition-happens","How a cross-document transition happens",[14,34,35,36,40],{},"The mechanism mirrors the same-document version, with a navigation in the middle. When the user follows a same-origin link, the browser takes a snapshot of the outgoing page's named elements. It then loads the new page as usual. Once the new page is ready to render its first frame, the browser captures its named elements too, builds the familiar ",[37,38,39],"code",{},"::view-transition"," pseudo-element tree over the new page, and runs the animations. The old page is gone by then; only its snapshots remain.",[42,43,49,50,49,54,49,58,49,66,49,77,49,83,49,86,49,90,49,96,49,101,49,105,49,109,49,112,49,115,49,119,49,122,49,125,49,129,49,132,49,135,49,140],"svg",{"viewBox":44,"role":45,"ariaLabel":46,"xmlns":47,"style":48},"0 0 720 300","img","Timeline of a cross-document view transition: capture on the old page, navigation and load, capture on the new page, then the animation plays over the new page","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[51,52,53],"title",{},"Capture, navigate, capture, animate",[55,56,57],"desc",{},"Four steps left to right. Step one: the user clicks a link and the old page is captured as snapshots. Step two: the browser navigates and loads the new document. Step three: when the new page is ready to render, its named elements are captured. Step four: the pseudo-element tree animates from the old snapshots to the new live page.",[59,60,65],"text",{"textAnchor":61,"x":62,"y":63,"style":64},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","A link click with a transition in the middle",[67,68],"rect",{"x":69,"y":70,"width":71,"height":72,"rx":73,"fill":74,"opacity":75,"stroke":74,"strokeWidth":76},"20","70","155","110","10","#7aa2ff","0.2","1.5",[67,78],{"x":79,"y":70,"width":71,"height":72,"rx":73,"fill":80,"stroke":81,"strokeWidth":76,"opacity":82},"195","none","currentColor","0.6",[67,84],{"x":85,"y":70,"width":71,"height":72,"rx":73,"fill":74,"opacity":75,"stroke":74,"strokeWidth":76},"370",[67,87],{"x":88,"y":70,"width":71,"height":72,"rx":73,"fill":74,"opacity":89,"stroke":74,"strokeWidth":76},"545","0.35",[59,91,95],{"textAnchor":61,"x":92,"y":93,"style":94},"97","112","text-anchor:middle;fill:currentColor;font:600 13px sans-serif","1. Old page",[59,97,100],{"textAnchor":61,"x":92,"y":98,"style":99},"134","text-anchor:middle;fill:currentColor;font:12px sans-serif","captured on",[59,102,104],{"textAnchor":61,"x":92,"y":103,"style":99},"152","link click",[59,106,108],{"textAnchor":61,"x":107,"y":93,"style":94},"272","2. Navigate",[59,110,111],{"textAnchor":61,"x":107,"y":98,"style":99},"new document",[59,113,114],{"textAnchor":61,"x":107,"y":103,"style":99},"loads",[59,116,118],{"textAnchor":61,"x":117,"y":93,"style":94},"447","3. New page",[59,120,121],{"textAnchor":61,"x":117,"y":98,"style":99},"captured at",[59,123,124],{"textAnchor":61,"x":117,"y":103,"style":99},"first render",[59,126,128],{"textAnchor":61,"x":127,"y":93,"style":94},"622","4. Animate",[59,130,131],{"textAnchor":61,"x":127,"y":98,"style":99},"old snapshots",[59,133,134],{"textAnchor":61,"x":127,"y":103,"style":99},"to live page",[59,136,139],{"textAnchor":61,"x":62,"y":137,"style":138},"230","text-anchor:middle;fill:currentColor;font:13px sans-serif","Both documents must include @view-transition { navigation: auto; }",[59,141,143],{"textAnchor":61,"x":62,"y":142,"style":99},"256","Same origin only. No script required.",[29,145,147],{"id":146},"the-complete-implementation","The complete implementation",[14,149,150],{},"Two pages — a list of articles and an article — sharing one stylesheet. The shared stylesheet opts both documents in and names the elements that should morph.",[152,153,158],"pre",{"className":154,"code":155,"language":156,"meta":157,"style":157},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!-- list.html -->\n\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>Articles\u003C\u002Ftitle>\n\u003Clink rel=\"stylesheet\" href=\"site.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cheader class=\"site-header\">Field Notes\u003C\u002Fheader>\n  \u003Cmain>\n    \u003Ca class=\"teaser\" href=\"article.html\">\n      \u003Cimg class=\"teaser__img\" src=\"lake.jpg\" alt=\"\" width=\"320\" height=\"180\"\n           style=\"view-transition-name: hero-lake\">\n      \u003Ch2 style=\"view-transition-name: title-lake\">A morning at the lake\u003C\u002Fh2>\n    \u003C\u002Fa>\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[37,159,160,169,187,207,217,235,260,274,300,310,320,344,354,378,425,438,460,470,480,489],{"__ignoreMap":157},[161,162,165],"span",{"class":163,"line":164},"line",1,[161,166,168],{"class":167},"sLBg1","\u003C!-- list.html -->\n",[161,170,172,176,180,184],{"class":163,"line":171},2,[161,173,175],{"class":174},"suds8","\u003C!",[161,177,179],{"class":178},"sne4z","doctype",[161,181,183],{"class":182},"s-5SL"," html",[161,185,186],{"class":174},">\n",[161,188,190,193,195,198,201,205],{"class":163,"line":189},3,[161,191,192],{"class":174},"\u003C",[161,194,156],{"class":178},[161,196,197],{"class":182}," lang",[161,199,200],{"class":174},"=",[161,202,204],{"class":203},"sT6z2","\"en\"",[161,206,186],{"class":174},[161,208,210,212,215],{"class":163,"line":209},4,[161,211,192],{"class":174},[161,213,214],{"class":178},"head",[161,216,186],{"class":174},[161,218,220,222,225,228,230,233],{"class":163,"line":219},5,[161,221,192],{"class":174},[161,223,224],{"class":178},"meta",[161,226,227],{"class":182}," charset",[161,229,200],{"class":174},[161,231,232],{"class":203},"\"utf-8\"",[161,234,186],{"class":174},[161,236,238,240,242,245,247,250,253,255,258],{"class":163,"line":237},6,[161,239,192],{"class":174},[161,241,224],{"class":178},[161,243,244],{"class":182}," name",[161,246,200],{"class":174},[161,248,249],{"class":203},"\"viewport\"",[161,251,252],{"class":182}," content",[161,254,200],{"class":174},[161,256,257],{"class":203},"\"width=device-width, initial-scale=1\"",[161,259,186],{"class":174},[161,261,263,265,267,270,272],{"class":163,"line":262},7,[161,264,192],{"class":174},[161,266,51],{"class":178},[161,268,269],{"class":174},">Articles\u003C\u002F",[161,271,51],{"class":178},[161,273,186],{"class":174},[161,275,277,279,282,285,287,290,293,295,298],{"class":163,"line":276},8,[161,278,192],{"class":174},[161,280,281],{"class":178},"link",[161,283,284],{"class":182}," rel",[161,286,200],{"class":174},[161,288,289],{"class":203},"\"stylesheet\"",[161,291,292],{"class":182}," href",[161,294,200],{"class":174},[161,296,297],{"class":203},"\"site.css\"",[161,299,186],{"class":174},[161,301,303,306,308],{"class":163,"line":302},9,[161,304,305],{"class":174},"\u003C\u002F",[161,307,214],{"class":178},[161,309,186],{"class":174},[161,311,313,315,318],{"class":163,"line":312},10,[161,314,192],{"class":174},[161,316,317],{"class":178},"body",[161,319,186],{"class":174},[161,321,323,326,329,332,334,337,340,342],{"class":163,"line":322},11,[161,324,325],{"class":174},"  \u003C",[161,327,328],{"class":178},"header",[161,330,331],{"class":182}," class",[161,333,200],{"class":174},[161,335,336],{"class":203},"\"site-header\"",[161,338,339],{"class":174},">Field Notes\u003C\u002F",[161,341,328],{"class":178},[161,343,186],{"class":174},[161,345,347,349,352],{"class":163,"line":346},12,[161,348,325],{"class":174},[161,350,351],{"class":178},"main",[161,353,186],{"class":174},[161,355,357,360,362,364,366,369,371,373,376],{"class":163,"line":356},13,[161,358,359],{"class":174},"    \u003C",[161,361,18],{"class":178},[161,363,331],{"class":182},[161,365,200],{"class":174},[161,367,368],{"class":203},"\"teaser\"",[161,370,292],{"class":182},[161,372,200],{"class":174},[161,374,375],{"class":203},"\"article.html\"",[161,377,186],{"class":174},[161,379,381,384,386,388,390,393,396,398,401,404,406,409,412,414,417,420,422],{"class":163,"line":380},14,[161,382,383],{"class":174},"      \u003C",[161,385,45],{"class":178},[161,387,331],{"class":182},[161,389,200],{"class":174},[161,391,392],{"class":203},"\"teaser__img\"",[161,394,395],{"class":182}," src",[161,397,200],{"class":174},[161,399,400],{"class":203},"\"lake.jpg\"",[161,402,403],{"class":182}," alt",[161,405,200],{"class":174},[161,407,408],{"class":203},"\"\"",[161,410,411],{"class":182}," width",[161,413,200],{"class":174},[161,415,416],{"class":203},"\"320\"",[161,418,419],{"class":182}," height",[161,421,200],{"class":174},[161,423,424],{"class":203},"\"180\"\n",[161,426,428,431,433,436],{"class":163,"line":427},15,[161,429,430],{"class":182},"           style",[161,432,200],{"class":174},[161,434,435],{"class":203},"\"view-transition-name: hero-lake\"",[161,437,186],{"class":174},[161,439,441,443,445,448,450,453,456,458],{"class":163,"line":440},16,[161,442,383],{"class":174},[161,444,29],{"class":178},[161,446,447],{"class":182}," style",[161,449,200],{"class":174},[161,451,452],{"class":203},"\"view-transition-name: title-lake\"",[161,454,455],{"class":174},">A morning at the lake\u003C\u002F",[161,457,29],{"class":178},[161,459,186],{"class":174},[161,461,463,466,468],{"class":163,"line":462},17,[161,464,465],{"class":174},"    \u003C\u002F",[161,467,18],{"class":178},[161,469,186],{"class":174},[161,471,473,476,478],{"class":163,"line":472},18,[161,474,475],{"class":174},"  \u003C\u002F",[161,477,351],{"class":178},[161,479,186],{"class":174},[161,481,483,485,487],{"class":163,"line":482},19,[161,484,305],{"class":174},[161,486,317],{"class":178},[161,488,186],{"class":174},[161,490,492,494,496],{"class":163,"line":491},20,[161,493,305],{"class":174},[161,495,156],{"class":178},[161,497,186],{"class":174},[152,499,501],{"className":154,"code":500,"language":156,"meta":157,"style":157},"\u003C!-- article.html -->\n\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>A morning at the lake\u003C\u002Ftitle>\n\u003Clink rel=\"stylesheet\" href=\"site.css\">\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cheader class=\"site-header\">Field Notes\u003C\u002Fheader>\n  \u003Cmain>\n    \u003Cimg class=\"article__hero\" src=\"lake.jpg\" alt=\"Mist over a still lake at dawn\"\n         width=\"1200\" height=\"600\" style=\"view-transition-name: hero-lake\">\n    \u003Ch1 style=\"view-transition-name: title-lake\">A morning at the lake\u003C\u002Fh1>\n    \u003Cp>Article text…\u003C\u002Fp>\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[37,502,503,508,518,532,540,554,574,586,606,614,622,640,648,674,699,717,730,738,746],{"__ignoreMap":157},[161,504,505],{"class":163,"line":164},[161,506,507],{"class":167},"\u003C!-- article.html -->\n",[161,509,510,512,514,516],{"class":163,"line":171},[161,511,175],{"class":174},[161,513,179],{"class":178},[161,515,183],{"class":182},[161,517,186],{"class":174},[161,519,520,522,524,526,528,530],{"class":163,"line":189},[161,521,192],{"class":174},[161,523,156],{"class":178},[161,525,197],{"class":182},[161,527,200],{"class":174},[161,529,204],{"class":203},[161,531,186],{"class":174},[161,533,534,536,538],{"class":163,"line":209},[161,535,192],{"class":174},[161,537,214],{"class":178},[161,539,186],{"class":174},[161,541,542,544,546,548,550,552],{"class":163,"line":219},[161,543,192],{"class":174},[161,545,224],{"class":178},[161,547,227],{"class":182},[161,549,200],{"class":174},[161,551,232],{"class":203},[161,553,186],{"class":174},[161,555,556,558,560,562,564,566,568,570,572],{"class":163,"line":237},[161,557,192],{"class":174},[161,559,224],{"class":178},[161,561,244],{"class":182},[161,563,200],{"class":174},[161,565,249],{"class":203},[161,567,252],{"class":182},[161,569,200],{"class":174},[161,571,257],{"class":203},[161,573,186],{"class":174},[161,575,576,578,580,582,584],{"class":163,"line":262},[161,577,192],{"class":174},[161,579,51],{"class":178},[161,581,455],{"class":174},[161,583,51],{"class":178},[161,585,186],{"class":174},[161,587,588,590,592,594,596,598,600,602,604],{"class":163,"line":276},[161,589,192],{"class":174},[161,591,281],{"class":178},[161,593,284],{"class":182},[161,595,200],{"class":174},[161,597,289],{"class":203},[161,599,292],{"class":182},[161,601,200],{"class":174},[161,603,297],{"class":203},[161,605,186],{"class":174},[161,607,608,610,612],{"class":163,"line":302},[161,609,305],{"class":174},[161,611,214],{"class":178},[161,613,186],{"class":174},[161,615,616,618,620],{"class":163,"line":312},[161,617,192],{"class":174},[161,619,317],{"class":178},[161,621,186],{"class":174},[161,623,624,626,628,630,632,634,636,638],{"class":163,"line":322},[161,625,325],{"class":174},[161,627,328],{"class":178},[161,629,331],{"class":182},[161,631,200],{"class":174},[161,633,336],{"class":203},[161,635,339],{"class":174},[161,637,328],{"class":178},[161,639,186],{"class":174},[161,641,642,644,646],{"class":163,"line":346},[161,643,325],{"class":174},[161,645,351],{"class":178},[161,647,186],{"class":174},[161,649,650,652,654,656,658,661,663,665,667,669,671],{"class":163,"line":356},[161,651,359],{"class":174},[161,653,45],{"class":178},[161,655,331],{"class":182},[161,657,200],{"class":174},[161,659,660],{"class":203},"\"article__hero\"",[161,662,395],{"class":182},[161,664,200],{"class":174},[161,666,400],{"class":203},[161,668,403],{"class":182},[161,670,200],{"class":174},[161,672,673],{"class":203},"\"Mist over a still lake at dawn\"\n",[161,675,676,679,681,684,686,688,691,693,695,697],{"class":163,"line":380},[161,677,678],{"class":182},"         width",[161,680,200],{"class":174},[161,682,683],{"class":203},"\"1200\"",[161,685,419],{"class":182},[161,687,200],{"class":174},[161,689,690],{"class":203},"\"600\"",[161,692,447],{"class":182},[161,694,200],{"class":174},[161,696,435],{"class":203},[161,698,186],{"class":174},[161,700,701,703,705,707,709,711,713,715],{"class":163,"line":427},[161,702,359],{"class":174},[161,704,10],{"class":178},[161,706,447],{"class":182},[161,708,200],{"class":174},[161,710,452],{"class":203},[161,712,455],{"class":174},[161,714,10],{"class":178},[161,716,186],{"class":174},[161,718,719,721,723,726,728],{"class":163,"line":440},[161,720,359],{"class":174},[161,722,14],{"class":178},[161,724,725],{"class":174},">Article text…\u003C\u002F",[161,727,14],{"class":178},[161,729,186],{"class":174},[161,731,732,734,736],{"class":163,"line":462},[161,733,475],{"class":174},[161,735,351],{"class":178},[161,737,186],{"class":174},[161,739,740,742,744],{"class":163,"line":472},[161,741,305],{"class":174},[161,743,317],{"class":178},[161,745,186],{"class":174},[161,747,748,750,752],{"class":163,"line":482},[161,749,305],{"class":174},[161,751,156],{"class":178},[161,753,186],{"class":174},[152,755,759],{"className":756,"code":757,"language":758,"meta":157,"style":157},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* site.css — loaded by both pages *\u002F\n@view-transition {\n  navigation: auto;\n}\n\n\u002F* The header is identical on both pages: keep it still. *\u002F\n.site-header {\n  view-transition-name: site-header;\n}\n\n\u002F* Shared elements get a slightly longer, eased morph. *\u002F\n::view-transition-group(hero-lake),\n::view-transition-group(title-lake) {\n  animation-duration: 350ms;\n  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);\n}\n\n\u002F* The rest of the page crossfades quickly. *\u002F\n::view-transition-old(root),\n::view-transition-new(root) {\n  animation-duration: 200ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ::view-transition-group(*),\n  ::view-transition-old(*),\n  ::view-transition-new(*) {\n    animation-duration: 1ms;\n  }\n}\n","css",[37,760,761,766,775,780,785,791,796,803,811,815,819,824,835,845,862,895,899,903,908,913,918,932,937,942,951,962,972,982,996,1002],{"__ignoreMap":157},[161,762,763],{"class":163,"line":164},[161,764,765],{"class":167},"\u002F* site.css — loaded by both pages *\u002F\n",[161,767,768,772],{"class":163,"line":171},[161,769,771],{"class":770},"sHUrx","@view-transition",[161,773,774],{"class":174}," {\n",[161,776,777],{"class":163,"line":189},[161,778,779],{"class":174},"  navigation: auto;\n",[161,781,782],{"class":163,"line":209},[161,783,784],{"class":174},"}\n",[161,786,787],{"class":163,"line":219},[161,788,790],{"emptyLinePlaceholder":789},true,"\n",[161,792,793],{"class":163,"line":237},[161,794,795],{"class":167},"\u002F* The header is identical on both pages: keep it still. *\u002F\n",[161,797,798,801],{"class":163,"line":262},[161,799,800],{"class":182},".site-header",[161,802,774],{"class":174},[161,804,805,808],{"class":163,"line":276},[161,806,807],{"class":182},"  view-transition-name",[161,809,810],{"class":174},": site-header;\n",[161,812,813],{"class":163,"line":302},[161,814,784],{"class":174},[161,816,817],{"class":163,"line":312},[161,818,790],{"emptyLinePlaceholder":789},[161,820,821],{"class":163,"line":322},[161,822,823],{"class":167},"\u002F* Shared elements get a slightly longer, eased morph. *\u002F\n",[161,825,826,829,832],{"class":163,"line":346},[161,827,828],{"class":174},"::view-transition-group(",[161,830,831],{"class":178},"hero-lake",[161,833,834],{"class":174},"),\n",[161,836,837,839,842],{"class":163,"line":356},[161,838,828],{"class":174},[161,840,841],{"class":178},"title-lake",[161,843,844],{"class":174},") {\n",[161,846,847,850,853,856,859],{"class":163,"line":380},[161,848,849],{"class":182},"  animation-duration",[161,851,852],{"class":174},": ",[161,854,855],{"class":182},"350",[161,857,858],{"class":770},"ms",[161,860,861],{"class":174},";\n",[161,863,864,867,869,872,875,877,880,883,885,887,889,892],{"class":163,"line":427},[161,865,866],{"class":182},"  animation-timing-function",[161,868,852],{"class":174},[161,870,871],{"class":182},"cubic-bezier",[161,873,874],{"class":174},"(",[161,876,75],{"class":182},[161,878,879],{"class":174},", ",[161,881,882],{"class":182},"0",[161,884,879],{"class":174},[161,886,882],{"class":182},[161,888,879],{"class":174},[161,890,891],{"class":182},"1",[161,893,894],{"class":174},");\n",[161,896,897],{"class":163,"line":440},[161,898,784],{"class":174},[161,900,901],{"class":163,"line":462},[161,902,790],{"emptyLinePlaceholder":789},[161,904,905],{"class":163,"line":472},[161,906,907],{"class":167},"\u002F* The rest of the page crossfades quickly. *\u002F\n",[161,909,910],{"class":163,"line":482},[161,911,912],{"class":174},"::view-transition-old(root),\n",[161,914,915],{"class":163,"line":491},[161,916,917],{"class":174},"::view-transition-new(root) {\n",[161,919,921,923,925,928,930],{"class":163,"line":920},21,[161,922,849],{"class":182},[161,924,852],{"class":174},[161,926,927],{"class":182},"200",[161,929,858],{"class":770},[161,931,861],{"class":174},[161,933,935],{"class":163,"line":934},22,[161,936,784],{"class":174},[161,938,940],{"class":163,"line":939},23,[161,941,790],{"emptyLinePlaceholder":789},[161,943,945,948],{"class":163,"line":944},24,[161,946,947],{"class":770},"@media",[161,949,950],{"class":174}," (prefers-reduced-motion: reduce) {\n",[161,952,954,957,960],{"class":163,"line":953},25,[161,955,956],{"class":174},"  ::view-transition-group(",[161,958,959],{"class":178},"*",[161,961,834],{"class":174},[161,963,965,968,970],{"class":163,"line":964},26,[161,966,967],{"class":174},"  ::view-transition-old(",[161,969,959],{"class":178},[161,971,834],{"class":174},[161,973,975,978,980],{"class":163,"line":974},27,[161,976,977],{"class":174},"  ::view-transition-new(",[161,979,959],{"class":178},[161,981,844],{"class":174},[161,983,985,988,990,992,994],{"class":163,"line":984},28,[161,986,987],{"class":182},"    animation-duration",[161,989,852],{"class":174},[161,991,891],{"class":182},[161,993,858],{"class":770},[161,995,861],{"class":174},[161,997,999],{"class":163,"line":998},29,[161,1000,1001],{"class":174},"  }\n",[161,1003,1005],{"class":163,"line":1004},30,[161,1006,784],{"class":174},[14,1008,1009],{},"Clicking the teaser now morphs the thumbnail into the hero image and the heading into the page title, while the header stays fixed and everything else crossfades. The browser's back button plays the same transition in reverse, because the article page is now the old document and the list the new one.",[29,1011,1013],{"id":1012},"the-key-technique-both-sides-opt-in-names-match-across-documents","The key technique: both sides opt in, names match across documents",[14,1015,1016,1017,1021,1022,1025],{},"Two rules make or break a cross-document transition. First, ",[1018,1019,1020],"em",{},"both"," documents must contain ",[37,1023,1024],{},"@view-transition { navigation: auto; }",". The old page's opt-in tells the browser to capture before leaving; the new page's opt-in tells it to animate on arrival. A single shared stylesheet is the easiest way to guarantee both — a rule added to one template only is the most common reason nothing happens.",[14,1027,1028,1029,1032],{},"Second, a shared element is matched by its ",[37,1030,1031],{},"view-transition-name"," alone. The element can be a small thumbnail on one page and a full-width hero on the other, a different tag, in a different place in the DOM; if the names match, the browser animates the group from one box to the other. Names must still be unique within each document, so a listing page with many teasers needs a distinct name per item — typically generated from an ID in the template — and only the clicked item's name will find a partner on the detail page.",[42,1034,49,1037,49,1040,49,1043,49,1046,49,1051,49,1057,49,1064,49,1067,49,1070,49,1076,49,1080,49,1084,49,1087,49,1091,49,1096,49,1100,49,1107,49,1111],{"viewBox":1035,"role":45,"ariaLabel":1036,"xmlns":47,"style":48},"0 0 720 280","A thumbnail on the list page and a hero image on the article page share the name hero-lake; the group animates from the small box to the large box",[51,1038,1039],{},"Names pair elements across two documents",[55,1041,1042],{},"On the left, a list page with three teaser thumbnails; one is named hero-lake. On the right, an article page with a large hero image also named hero-lake. An arrow shows the group morphing from the thumbnail's box to the hero's box. The other two teasers have names with no partner, so they simply fade out.",[59,1044,1045],{"textAnchor":61,"x":62,"y":63,"style":64},"Matching names morph; unmatched names fade",[67,1047],{"x":1048,"y":1049,"width":1050,"height":927,"rx":73,"fill":80,"stroke":81,"strokeWidth":76,"opacity":82},"40","56","250",[59,1052,1056],{"textAnchor":61,"x":1053,"y":1054,"style":1055},"165","78","text-anchor:middle;fill:currentColor;font:600 12px sans-serif","list.html",[67,1058],{"x":1059,"y":1060,"width":1061,"height":1062,"rx":1063,"fill":74,"opacity":82},"60","92","90","50","4",[67,1065],{"x":1059,"y":103,"width":1061,"height":1048,"rx":1063,"fill":81,"opacity":1066},"0.15",[67,1068],{"x":1059,"y":1069,"width":1061,"height":1048,"rx":1063,"fill":81,"opacity":1066},"202",[59,1071,831],{"textAnchor":1072,"x":1073,"y":1074,"style":1075},"start","160","122","text-anchor:start;fill:currentColor;font:11px ui-monospace,monospace",[59,1077,1079],{"textAnchor":1072,"x":1073,"y":1078,"style":1075},"176","hero-pier",[59,1081,1083],{"textAnchor":1072,"x":1073,"y":1082,"style":1075},"226","hero-ridge",[67,1085],{"x":1086,"y":1049,"width":1050,"height":927,"rx":73,"fill":80,"stroke":81,"strokeWidth":76,"opacity":82},"430",[59,1088,1090],{"textAnchor":61,"x":1089,"y":1054,"style":1055},"555","article.html",[67,1092],{"x":1093,"y":1060,"width":1094,"height":1095,"rx":1063,"fill":74,"opacity":82},"450","210","100",[59,1097,831],{"textAnchor":61,"x":1089,"y":1098,"style":1099},"147","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace",[163,1101],{"x1":1102,"y1":1103,"x2":1104,"y2":1105,"stroke":74,"strokeWidth":1106},"245","117","440","130","3",[1108,1109],"path",{"d":1110,"fill":74},"M430 124 L446 131 L432 138 Z",[59,1112,1113],{"textAnchor":61,"x":1089,"y":1082,"style":99},"pier and ridge: no partner, fade",[29,1115,1117],{"id":1116},"customising-per-navigation-with-types","Customising per navigation with types",[14,1119,1120,1121,1123,1124,1127,1128,1131],{},"Often a transition should depend on where the user is going: slide left when moving forward through a series, slide right when going back. The ",[37,1122,771],{}," rule accepts a ",[37,1125,1126],{},"types"," descriptor, and those types can be matched with the ",[37,1129,1130],{},":active-view-transition-type()"," selector:",[152,1133,1135],{"className":756,"code":1134,"language":758,"meta":157,"style":157},"@view-transition {\n  navigation: auto;\n  types: page-change;\n}\n\nhtml:active-view-transition-type(page-change) {\n  &::view-transition-old(root) { animation: slide-out 250ms ease-in both; }\n  &::view-transition-new(root) { animation: slide-in 250ms ease-out both; }\n}\n",[37,1136,1137,1143,1147,1157,1161,1165,1176,1200,1221],{"__ignoreMap":157},[161,1138,1139,1141],{"class":163,"line":164},[161,1140,771],{"class":770},[161,1142,774],{"class":174},[161,1144,1145],{"class":163,"line":171},[161,1146,779],{"class":174},[161,1148,1149,1152,1155],{"class":163,"line":189},[161,1150,1151],{"class":174},"  types: ",[161,1153,1154],{"class":178},"page-change",[161,1156,861],{"class":174},[161,1158,1159],{"class":163,"line":209},[161,1160,784],{"class":174},[161,1162,1163],{"class":163,"line":219},[161,1164,790],{"emptyLinePlaceholder":789},[161,1166,1167,1169,1172,1174],{"class":163,"line":237},[161,1168,156],{"class":178},[161,1170,1171],{"class":174},":active-view-transition-type(",[161,1173,1154],{"class":178},[161,1175,844],{"class":174},[161,1177,1178,1181,1184,1187,1189,1191,1194,1197],{"class":163,"line":262},[161,1179,1180],{"class":174},"  &::view-transition-old(root) { ",[161,1182,1183],{"class":182},"animation",[161,1185,1186],{"class":174},": slide-out ",[161,1188,1050],{"class":182},[161,1190,858],{"class":770},[161,1192,1193],{"class":182}," ease-in",[161,1195,1196],{"class":182}," both",[161,1198,1199],{"class":174},"; }\n",[161,1201,1202,1205,1207,1210,1212,1214,1217,1219],{"class":163,"line":276},[161,1203,1204],{"class":174},"  &::view-transition-new(root) { ",[161,1206,1183],{"class":182},[161,1208,1209],{"class":174},": slide-in ",[161,1211,1050],{"class":182},[161,1213,858],{"class":770},[161,1215,1216],{"class":182}," ease-out",[161,1218,1196],{"class":182},[161,1220,1199],{"class":174},[161,1222,1223],{"class":163,"line":302},[161,1224,784],{"class":174},[14,1226,1227,1228,1231,1232,1235,1236,1240],{},"Choosing a type per navigation — forward versus back — requires the ",[37,1229,1230],{},"pageswap"," and ",[37,1233,1234],{},"pagereveal"," events, which let script inspect the navigation and add types to the transition. That keeps the default path CSS-only and moves only the decision into script. Without any script, every opted-in navigation gets the same type, which is often enough: a site with one consistent page-change animation feels coherent, and direction-aware motion can be added later without touching the CSS already written. ",[18,1237,1239],{"href":1238},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes\u002F","View Transition Types and Classes"," covers the type system in detail.",[29,1242,1244],{"id":1243},"when-the-browser-skips-the-transition","When the browser skips the transition",[14,1246,1247],{},"Cross-document transitions fail silently by design, since the navigation must succeed either way. The transition is skipped when:",[1249,1250,1251,1259,1265,1271],"ul",{},[1252,1253,1254,1258],"li",{},[1255,1256,1257],"strong",{},"The navigation is cross-origin."," Even a subdomain change counts. Both URLs must share scheme, host and port.",[1252,1260,1261,1264],{},[1255,1262,1263],{},"Either page did not opt in."," Check that the rule is not inside a media query or layer that fails to apply on one of the pages.",[1252,1266,1267,1270],{},[1255,1268,1269],{},"The new page is slow to render."," Browsers impose a timeout between leaving the old page and the new page's first render; beyond it, the transition is abandoned. Large render-blocking resources on the destination page are the usual culprit. Keeping critical CSS small helps.",[1252,1272,1273,1276],{},[1255,1274,1275],{},"The navigation type is excluded."," Reloads and navigations the user triggers from the address bar do not animate; link clicks, form submissions to the same origin and history traversal do.",[14,1278,1279],{},"To keep the page usable while waiting, the browser holds the old page's frame on screen until the new page is ready, which means a slow destination feels frozen rather than blank. That is another reason to keep the first render of every page fast.",[42,1281,49,1284,49,1287,49,1290,49,1293,49,1299,49,1302,49,1305,49,1308,49,1313,49,1318,49,1322,49,1326,49,1330,49,1334,49,1338,49,1343,49,1348,49,1351,49,1354,49,1357,49,1360,49,1363],{"viewBox":1282,"role":45,"ariaLabel":1283,"xmlns":47,"style":48},"131 0 573 330","Decision chain for whether a cross-document transition runs: same origin, both pages opted in, eligible navigation type, and new page rendered before the timeout",[51,1285,1286],{},"Four checks before the transition plays",[55,1288,1289],{},"A vertical chain of four checks. Is the navigation same-origin? Did both pages opt in with the at-rule? Is it a link click, form submission or history traversal rather than a reload or address-bar entry? Did the new page render its first frame in time? A no at any step leads to an instant page swap on the right. Four yeses lead to the transition at the bottom.",[59,1291,1292],{"textAnchor":61,"x":62,"y":63,"style":64},"Any \"no\" means an instant swap",[67,1294],{"x":1295,"y":1296,"width":1297,"height":1048,"rx":1298,"fill":80,"stroke":81,"strokeWidth":76},"150","48","300","8",[67,1300],{"x":1295,"y":1301,"width":1297,"height":1048,"rx":1298,"fill":80,"stroke":81,"strokeWidth":76},"108",[67,1303],{"x":1295,"y":1304,"width":1297,"height":1048,"rx":1298,"fill":80,"stroke":81,"strokeWidth":76},"168",[67,1306],{"x":1295,"y":1307,"width":1297,"height":1048,"rx":1298,"fill":80,"stroke":81,"strokeWidth":76},"228",[67,1309],{"x":927,"y":1310,"width":927,"height":1311,"rx":1298,"fill":74,"opacity":1312},"284","36","0.4",[67,1314],{"x":1315,"y":1316,"width":1073,"height":1059,"rx":1298,"fill":81,"opacity":1317},"530","138","0.12",[59,1319,1321],{"textAnchor":61,"x":1297,"y":1320,"style":138},"73","Same origin?",[59,1323,1325],{"textAnchor":61,"x":1297,"y":1324,"style":138},"133","Both pages opted in?",[59,1327,1329],{"textAnchor":61,"x":1297,"y":1328,"style":138},"193","Link, form or back\u002Fforward?",[59,1331,1333],{"textAnchor":61,"x":1297,"y":1332,"style":138},"253","New page rendered in time?",[59,1335,1337],{"textAnchor":61,"x":1297,"y":1336,"style":94},"307","Transition plays",[59,1339,1342],{"textAnchor":61,"x":1340,"y":1341,"style":94},"610","164","Instant swap",[59,1344,1347],{"textAnchor":61,"x":1340,"y":1345,"style":1346},"184","text-anchor:middle;fill:currentColor;font:11px sans-serif","no error, no event",[163,1349],{"x1":1297,"y1":1350,"x2":1297,"y2":1301,"stroke":81,"strokeWidth":76},"88",[163,1352],{"x1":1297,"y1":1353,"x2":1297,"y2":1304,"stroke":81,"strokeWidth":76},"148",[163,1355],{"x1":1297,"y1":1356,"x2":1297,"y2":1307,"stroke":81,"strokeWidth":76},"208",[163,1358],{"x1":1297,"y1":1359,"x2":1297,"y2":1310,"stroke":81,"strokeWidth":76},"268",[1108,1361],{"d":1362,"fill":80,"stroke":81,"strokeWidth":76,"opacity":82},"M450 68 H500 V250 H450 M450 128 H500 M450 188 H500 M500 168 H530",[59,1364,1367],{"textAnchor":1072,"x":1365,"y":1095,"style":1366},"506","text-anchor:start;fill:currentColor;font:11px sans-serif","no",[29,1369,1371],{"id":1370},"preparing-pages-for-smooth-transitions","Preparing pages for smooth transitions",[14,1373,1374],{},"Because the new page must render before the animation starts, a cross-document transition exposes every slow first render on a site. A few habits keep transitions reliable:",[1249,1376,1377,1383,1400,1409],{},[1252,1378,1379,1382],{},[1255,1380,1381],{},"Keep render-blocking CSS small and shared."," A single cached stylesheet across pages means the destination usually renders from cache almost immediately. Page-specific stylesheets that must download before first paint lengthen the frozen moment between click and animation.",[1252,1384,1385,1388,1389,1231,1392,1395,1396,1399],{},[1255,1386,1387],{},"Give images dimensions."," Shared elements are captured at the new page's first render. An image without ",[37,1390,1391],{},"width",[37,1393,1394],{},"height"," attributes has no size yet, so the morph targets a zero-height box and then jumps. Explicit dimensions, or ",[37,1397,1398],{},"aspect-ratio"," in CSS, give the capture the right geometry.",[1252,1401,1402,1405,1406,1408],{},[1255,1403,1404],{},"Keep names stable."," A name applied by a script after load does not exist at capture time. Put ",[37,1407,1031],{}," in the markup or stylesheet so it is present on the first frame.",[1252,1410,1411,1414],{},[1255,1412,1413],{},"Avoid naming huge elements."," Each named element becomes a separate snapshot image. Naming a long article body means capturing a very large bitmap on both pages; name the hero, title and navigation, and let the root crossfade handle the rest.",[14,1416,1417],{},"When a transition behaves oddly, the Animations panel in Chromium's DevTools can pause and slow the transition so each pseudo-element can be inspected, just as with same-document transitions.",[29,1419,1421],{"id":1420},"browser-support","Browser support",[14,1423,1424,1425,1427,1428,1430,1431,1434],{},"The cross-document ",[37,1426,771],{}," rule is supported in Chrome and Edge 126+ and Safari 18.2+. It is not supported in Firefox's stable releases, where navigation happens instantly as it always has. Same-document transitions and ",[37,1429,1031],{}," are wider: Chrome and Edge 111+, Firefox 144+ and Safari 18+. Because unsupporting browsers simply ignore the at-rule, no feature detection is needed. The ",[37,1432,1433],{},"prefers-reduced-motion"," media feature is supported in Chrome 74+, Edge 79+, Firefox 63+ and Safari 10.1+.",[29,1436,1438],{"id":1437},"faq","FAQ",[14,1440,1441,1444,1445,1447],{},[1255,1442,1443],{},"Do cross-document view transitions need JavaScript?","\nNo. Adding ",[37,1446,1024],{}," to the CSS of both the outgoing and incoming page is enough. The browser captures the old page, loads the new one, and crossfades between them. JavaScript is only needed for advanced cases such as choosing a transition type per link.",[14,1449,1450,1453],{},[1255,1451,1452],{},"Why is my cross-document transition not running?","\nThe most common causes are that only one page opted in, the navigation is cross-origin, the navigation was a reload or started from the address bar, or the new page took too long to render its first frame. Both pages must be same-origin and both must include the rule.",[14,1455,1456,1459,1460,1462],{},[1255,1457,1458],{},"Can shared elements morph between two pages?","\nYes. Give the element the same ",[37,1461,1031],{}," on both pages, such as a product thumbnail on the listing and the hero image on the detail page. The browser animates the group's position and size between the two captures.",[14,1464,1465,1468],{},[1255,1466,1467],{},"What happens in browsers without support?","\nThe rule is ignored and navigation works exactly as before, with an instant page swap. Cross-document transitions are a pure enhancement; there is nothing to polyfill or feature-test.",[29,1470,1472],{"id":1471},"related","Related",[1249,1474,1475,1480,1487,1494],{},[1252,1476,1477,1479],{},[18,1478,21],{"href":20}," — the parent guide.",[1252,1481,1482,1486],{},[18,1483,1485],{"href":1484},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions\u002F","Same-Document View Transitions"," — the single-page counterpart.",[1252,1488,1489,1493],{},[18,1490,1492],{"href":1491},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements\u002F","view-transition-name and Shared Elements"," — naming rules in depth.",[1252,1495,1496,1500],{},[18,1497,1499],{"href":1498},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion\u002F","View Transitions and Reduced Motion"," — substituting gentler motion.",[1502,1503,1504],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}",{"title":157,"searchDepth":171,"depth":171,"links":1506},[1507,1508,1509,1510,1511,1512,1513,1514,1515],{"id":31,"depth":171,"text":32},{"id":146,"depth":171,"text":147},{"id":1012,"depth":171,"text":1013},{"id":1116,"depth":171,"text":1117},{"id":1243,"depth":171,"text":1244},{"id":1370,"depth":171,"text":1371},{"id":1420,"depth":171,"text":1421},{"id":1437,"depth":171,"text":1438},{"id":1471,"depth":171,"text":1472},"Animate between separate HTML pages with the @view-transition rule: opting both pages in, naming shared elements across documents, and the same-origin rules.","md",{"pageTitle":5,"datePublished":1519,"dateModified":1519,"faq":1520},"2026-09-18",[1521,1523,1525,1527],{"q":1443,"a":1522},"No. Adding @view-transition { navigation: auto; } to the CSS of both the outgoing and incoming page is enough. The browser captures the old page, loads the new one, and crossfades between them. JavaScript is only needed for advanced cases such as choosing a transition type per link.",{"q":1452,"a":1524},"The most common causes are that only one page opted in, the navigation is cross-origin, the navigation was a reload or started from the address bar, or the new page took too long to render its first frame. Both pages must be same-origin and both must include the rule.",{"q":1458,"a":1526},"Yes. Give the element the same view-transition-name on both pages, such as a product thumbnail on the listing and the hero image on the detail page. The browser animates the group's position and size between the two captures.",{"q":1467,"a":1528},"The rule is ignored and navigation works exactly as before, with an instant page swap. Cross-document transitions are a pure enhancement; there is nothing to polyfill or feature-test.","\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions",{"title":5,"description":1516},"css-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions\u002Findex","Zsdl6JWimRhzp8zOQ0NdonRN3bjcPaI869Pk5Sa9WQs",[1534,1537,1540,1543,1546,1549,1552,1555,1558,1561,1564,1567,1570,1573,1576,1579,1582,1585,1588,1591,1594,1597,1600,1603,1606,1609,1612,1615,1618,1621,1624,1627,1630,1633,1636,1639,1642,1645,1648,1651,1654,1657,1660,1663,1666,1669,1672,1675,1678,1681,1684,1687,1690,1693,1696,1699,1702,1705,1708,1711,1714,1717,1720,1723,1726,1729,1732,1735,1738,1741,1744,1747,1750,1753,1756,1759,1762,1765,1768,1771,1774,1777,1780,1783,1786,1789,1792,1793,1796,1799,1802,1804,1807,1810,1813,1816,1819,1822,1825,1828,1831,1834,1837,1840,1843,1846,1849,1852,1855,1858,1861,1864,1867,1870,1873,1876,1879,1882,1885,1888,1891,1894,1897,1900,1903,1906,1909,1912,1915,1918,1921,1924,1927,1930,1933,1936,1939,1942,1945,1948,1951,1954,1957,1960,1963,1966,1969,1972,1975,1978,1981,1984,1987,1990,1993,1996,1999,2002,2005,2008,2011,2014,2017,2020,2023,2026,2029,2032,2035,2038,2041,2044,2047,2050,2053,2056,2059,2062,2065,2068,2071,2074,2077,2080,2083,2086,2089],{"path":1535,"title":1536},"\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":1538,"title":1539},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1541,"title":1542},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1544,"title":1545},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1547,"title":1548},"\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":1550,"title":1551},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1553,"title":1554},"\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":1556,"title":1557},"\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":1559,"title":1560},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1562,"title":1563},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1565,"title":1566},"\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":1568,"title":1569},"\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":1571,"title":1572},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1574,"title":1575},"\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":1577,"title":1578},"\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":1580,"title":1581},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1583,"title":1584},"\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":1586,"title":1587},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1589,"title":1590},"\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":1592,"title":1593},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1595,"title":1596},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1598,"title":1599},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1601,"title":1602},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1604,"title":1605},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1607,"title":1608},"\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":1610,"title":1611},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1613,"title":1614},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1616,"title":1617},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1619,"title":1620},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1622,"title":1623},"\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":1625,"title":1626},"\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":1628,"title":1629},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1631,"title":1632},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1634,"title":1635},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1637,"title":1638},"\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":1640,"title":1641},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1643,"title":1644},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1646,"title":1647},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1649,"title":1650},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1652,"title":1653},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1655,"title":1656},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1658,"title":1659},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1661,"title":1662},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1664,"title":1665},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1667,"title":1668},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1670,"title":1671},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1673,"title":1674},"\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":1676,"title":1677},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1679,"title":1680},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1682,"title":1683},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1685,"title":1686},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1688,"title":1689},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1691,"title":1692},"\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":1694,"title":1695},"\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":1697,"title":1698},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1700,"title":1701},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1703,"title":1704},"\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":1706,"title":1707},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1709,"title":1710},"\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":1712,"title":1713},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1715,"title":1716},"\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":1718,"title":1719},"\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":1721,"title":1722},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1724,"title":1725},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1727,"title":1728},"\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":1730,"title":1731},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1733,"title":1734},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1736,"title":1737},"\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":1739,"title":1740},"\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":1742,"title":1743},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1745,"title":1746},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1748,"title":1749},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1751,"title":1752},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1754,"title":1755},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1757,"title":1758},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1760,"title":1761},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1763,"title":1764},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1766,"title":1767},"\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":1769,"title":1770},"\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":1772,"title":1773},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1775,"title":1776},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1778,"title":1779},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1781,"title":1782},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1784,"title":1785},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1787,"title":1788},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1790,"title":1791},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1529,"title":5},{"path":1794,"title":1795},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1797,"title":1798},"\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":1800,"title":1801},"\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":1803,"title":1239},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes",{"path":1805,"title":1806},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1808,"title":1809},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":1811,"title":1812},"\u002F","Modern CSS Layouts & Micro-Interactions",{"path":1814,"title":1815},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1817,"title":1818},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1820,"title":1821},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":1823,"title":1824},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1826,"title":1827},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1829,"title":1830},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":1832,"title":1833},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":1835,"title":1836},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":1838,"title":1839},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1841,"title":1842},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1844,"title":1845},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1847,"title":1848},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":1850,"title":1851},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":1853,"title":1854},"\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":1856,"title":1857},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":1859,"title":1860},"\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":1862,"title":1863},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1865,"title":1866},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1868,"title":1869},"\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":1871,"title":1872},"\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":1874,"title":1875},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1877,"title":1878},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1880,"title":1881},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1883,"title":1884},"\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":1886,"title":1887},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":1889,"title":1890},"\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":1892,"title":1893},"\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":1895,"title":1896},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1898,"title":1899},"\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":1901,"title":1902},"\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":1904,"title":1905},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1907,"title":1908},"\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":1910,"title":1911},"\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":1913,"title":1914},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":1916,"title":1917},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":1919,"title":1920},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":1922,"title":1923},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":1925,"title":1926},"\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":1928,"title":1929},"\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":1931,"title":1932},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":1934,"title":1935},"\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":1937,"title":1938},"\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":1940,"title":1941},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1943,"title":1944},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1946,"title":1947},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1949,"title":1950},"\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":1952,"title":1953},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":1955,"title":1956},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1958,"title":1959},"\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":1961,"title":1962},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1964,"title":1965},"\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":1967,"title":1968},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1970,"title":1971},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":1973,"title":1974},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1976,"title":1977},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1979,"title":1980},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1982,"title":1983},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":1985,"title":1986},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1988,"title":1989},"\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":1991,"title":1992},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":1994,"title":1995},"\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":1997,"title":1998},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2000,"title":2001},"\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":2003,"title":2004},"\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":2006,"title":2007},"\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":2009,"title":2010},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2012,"title":2013},"\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":2015,"title":2016},"\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":2018,"title":2019},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2021,"title":2022},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2024,"title":2025},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2027,"title":2028},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2030,"title":2031},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":2033,"title":2034},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2036,"title":2037},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2039,"title":2040},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2042,"title":2043},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2045,"title":2046},"\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":2048,"title":2049},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2051,"title":2052},"\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":2054,"title":2055},"\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":2057,"title":2058},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2060,"title":2061},"\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":2063,"title":2064},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2066,"title":2067},"\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":2069,"title":2070},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2072,"title":2073},"\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":2075,"title":2076},"\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":2078,"title":2079},"\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":2081,"title":2082},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2084,"title":2085},"\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":2087,"title":2088},"\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":2090,"title":2091},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",1789717744838]