[{"data":1,"prerenderedAt":1709},["ShallowReactive",2],{"page-\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries":3,"content-all-pages":1447},{"id":4,"title":5,"body":6,"description":1426,"extension":1427,"meta":1428,"navigation":644,"path":1443,"seo":1444,"stem":1445,"__hash__":1446},"content\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries\u002Findex.md","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"type":7,"value":8,"toc":1415},"minimark",[9,13,28,34,63,68,71,162,179,199,327,330,334,338,349,352,371,375,378,571,1138,1141,1145,1159,1170,1196,1203,1211,1279,1296,1300,1318,1322,1334,1355,1364,1373,1377,1411],[10,11,5],"h1",{"id":12},"pointer-and-hover-media-queries-gating-affordances-by-input-capability",[14,15,16,17,22,23,27],"p",{},"A card component reveals its \"edit\" and \"delete\" buttons when you hover it. On a laptop this reads as clean and uncluttered. On a phone it reads as a card with no controls at all, because there is no hover state to enter and the buttons never appear. The narrow problem this page solves is deciding, in CSS, whether the current input device can hover and how precise it is — and structuring the stylesheet so that a device which cannot hover never loses functionality. This page is part of ",[18,19,21],"a",{"href":20},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002F","Hover & Focus State Design",", and it is the capability-detection layer underneath the effects covered in ",[18,24,26],{"href":25},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript\u002F","Smooth Hover Effects Without JavaScript",".",[14,29,30],{},[31,32,33],"strong",{},"What this page settles:",[35,36,37,41,49,52],"ul",{},[38,39,40],"li",{},"What each of the four interaction media features reports",[38,42,43,44,48],{},"Why ",[45,46,47],"code",{},"hover: hover"," is the correct test and touch detection is not",[38,50,51],{},"The default-visible pattern that cannot strand a touch user",[38,53,54,55,58,59,62],{},"Where ",[45,56,57],{},"any-hover"," and ",[45,60,61],{},"any-pointer"," are genuinely the right question",[64,65,67],"h2",{"id":66},"four-features-two-axes","Four features, two axes",[14,69,70],{},"Media Queries Level 4 defines four interaction media features, on two axes — can it hover, and how accurate is it:",[72,73,74,90],"table",{},[75,76,77],"thead",{},[78,79,80,84,87],"tr",{},[81,82,83],"th",{},"Feature",[81,85,86],{},"Values",[81,88,89],{},"Reports on",[91,92,93,112,131,146],"tbody",{},[78,94,95,101,109],{},[96,97,98],"td",{},[45,99,100],{},"hover",[96,102,103,106,107],{},[45,104,105],{},"none",", ",[45,108,100],{},[96,110,111],{},"the primary pointing device",[78,113,114,119,129],{},[96,115,116],{},[45,117,118],{},"pointer",[96,120,121,106,123,106,126],{},[45,122,105],{},[45,124,125],{},"coarse",[45,127,128],{},"fine",[96,130,111],{},[78,132,133,137,143],{},[96,134,135],{},[45,136,57],{},[96,138,139,106,141],{},[45,140,105],{},[45,142,100],{},[96,144,145],{},"any available pointing device",[78,147,148,152,160],{},[96,149,150],{},[45,151,61],{},[96,153,154,106,156,106,158],{},[45,155,105],{},[45,157,125],{},[45,159,128],{},[96,161,145],{},[14,163,164,166,167,170,171,174,175,178],{},[45,165,47],{}," means the primary pointing device can put the cursor over an element without activating it and keep it there. ",[45,168,169],{},"pointer: fine"," means that device can point at a small area accurately — a mouse, a trackpad, a precise stylus. ",[45,172,173],{},"pointer: coarse"," means it cannot, which covers fingers but also TV remotes, D-pads and game controllers. ",[45,176,177],{},"pointer: none"," means there is no pointing device at all, which is the case for a keyboard-only or screen-reader-driven environment on some platforms.",[14,180,181,182,185,186,188,189,58,192,195,196,198],{},"The ",[45,183,184],{},"any-"," variants are queried against the union of all available devices, and ",[45,187,61],{}," in particular can match more than one value at once: a touchscreen laptop with a mouse matches both ",[45,190,191],{},"any-pointer: coarse",[45,193,194],{},"any-pointer: fine",". That is the whole reason the pair exists — the plain features force a single answer about the primary device, and the ",[45,197,184],{}," features describe the full set.",[200,201,207,208,207,212,207,216,207,223,207,229,207,233,207,237,207,243,207,253,207,256,207,262,207,264,207,267,207,269,207,273,207,276,207,278,207,280,207,282,207,284,207,286,207,290,207,294,207,296,207,298,207,300,207,302,207,304,207,308,207,311,207,313,207,315,207,317,207,319,207,322],"svg",{"viewBox":202,"role":203,"ariaLabel":204,"xmlns":205,"style":206},"0 0 720 330","img","What three device classes report for the four interaction media features","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[209,210,211],"title",{},"Interaction media feature values by device class",[213,214,215],"desc",{},"A grid showing the values reported by hover, pointer, any-hover and any-pointer on a desktop with a mouse, a touch phone, and a hybrid laptop.",[217,218,222],"text",{"x":219,"y":220,"style":221},"360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","What each device class reports",[217,224,228],{"x":225,"y":226,"style":227},"277","70","text-anchor:middle;fill:currentColor;font:600 13px sans-serif","mouse desktop",[217,230,232],{"x":231,"y":226,"style":227},"450","touch phone",[217,234,236],{"x":235,"y":226,"style":227},"623","laptop + touch",[217,238,242],{"x":239,"y":240,"style":241},"185","120","text-anchor:end;fill:currentColor;font:12px ui-monospace,monospace","(hover)",[244,245],"rect",{"x":246,"y":247,"width":248,"height":249,"rx":250,"fill":251,"opacity":252},"195","90","165","48","6","#7aa2ff","0.26",[217,254,100],{"x":225,"y":240,"style":255},"text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace",[244,257],{"x":258,"y":247,"width":248,"height":249,"rx":250,"fill":105,"stroke":259,"strokeWidth":260,"opacity":261},"368","currentColor","1.5","0.5",[217,263,105],{"x":231,"y":240,"style":255},[244,265],{"x":266,"y":247,"width":248,"height":249,"rx":250,"fill":251,"opacity":252},"541",[217,268,100],{"x":235,"y":240,"style":255},[217,270,272],{"x":239,"y":271,"style":241},"172","(pointer)",[244,274],{"x":246,"y":275,"width":248,"height":249,"rx":250,"fill":251,"opacity":252},"142",[217,277,128],{"x":225,"y":271,"style":255},[244,279],{"x":258,"y":275,"width":248,"height":249,"rx":250,"fill":105,"stroke":259,"strokeWidth":260,"opacity":261},[217,281,125],{"x":231,"y":271,"style":255},[244,283],{"x":266,"y":275,"width":248,"height":249,"rx":250,"fill":251,"opacity":252},[217,285,128],{"x":235,"y":271,"style":255},[217,287,289],{"x":239,"y":288,"style":241},"224","(any-hover)",[244,291],{"x":246,"y":292,"width":248,"height":249,"rx":250,"fill":251,"opacity":293},"194","0.14",[217,295,100],{"x":225,"y":288,"style":255},[244,297],{"x":258,"y":292,"width":248,"height":249,"rx":250,"fill":105,"stroke":259,"strokeWidth":260,"opacity":261},[217,299,105],{"x":231,"y":288,"style":255},[244,301],{"x":266,"y":292,"width":248,"height":249,"rx":250,"fill":251,"opacity":293},[217,303,100],{"x":235,"y":288,"style":255},[217,305,307],{"x":239,"y":306,"style":241},"276","(any-pointer)",[244,309],{"x":246,"y":310,"width":248,"height":249,"rx":250,"fill":251,"opacity":293},"246",[217,312,128],{"x":225,"y":306,"style":255},[244,314],{"x":258,"y":310,"width":248,"height":249,"rx":250,"fill":105,"stroke":259,"strokeWidth":260,"opacity":261},[217,316,125],{"x":231,"y":306,"style":255},[244,318],{"x":266,"y":310,"width":248,"height":249,"rx":250,"fill":251,"opacity":293},[217,320,321],{"x":235,"y":306,"style":255},"fine + coarse",[217,323,326],{"x":219,"y":324,"style":325},"318","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.7","Only the any- features can report more than one value at a time.",[14,328,329],{},"Your own device is the most convincing example. This readout styles four rows, each highlighted by its own media query:",[331,332],"live-demo",{"name":333},"hf-pointer-capability-readout",[64,335,337],{"id":336},"why-capability-beats-detection","Why capability beats detection",[14,339,340,341,344,345,348],{},"The instinct is to ask \"is this a touch device?\" — usually via ",[45,342,343],{},"'ontouchstart' in window",", a ",[45,346,347],{},"navigator.maxTouchPoints"," check, or user-agent sniffing. All three answer a question that is not the one you have. The presence of a touchscreen tells you nothing about how the person is currently interacting: a convertible laptop has a touchscreen and a trackpad, a desktop monitor may be a touchscreen nobody touches, and a tablet may have a keyboard and mouse attached. A boolean about hardware cannot describe a session where the user picks up the mouse, puts it down, and taps the screen.",[14,350,351],{},"The media features describe capability rather than hardware category, and they are live. When the user attaches a mouse to a tablet the primary pointing device changes, the media query re-evaluates, and the styles follow — no listener, no reflow of your own code, no stale flag captured at page load. That is a different class of correctness from feature detection performed once in an entry script.",[14,353,354,355,357,358,362,363,366,367,370],{},"The second, subtler argument is about failure direction. A ",[45,356,47],{}," query fails ",[359,360,361],"em",{},"closed",": an engine that does not support interaction media features, or a device it cannot classify, simply does not match the block. If you write your stylesheet so the block inside ",[45,364,365],{},"@media (hover: hover)"," only ever ",[359,368,369],{},"removes"," a permanently visible affordance, the unmatched case leaves the control visible — the safe outcome. Touch detection in script fails open: a mis-detection hides the control and the user is stuck.",[64,372,374],{"id":373},"complete-working-implementation","Complete working implementation",[14,376,377],{},"A file list where each row has a delete action. On hovering devices the action fades in on hover; everywhere else it is simply always there. Note the order: the visible state is the default, and the hiding lives inside the query.",[379,380,385],"pre",{"className":381,"code":382,"language":383,"meta":384,"style":384},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Cul class=\"list\">\n  \u003Cli class=\"item\">\n    \u003Cspan class=\"item__name\">Q3-forecast.numbers\u003C\u002Fspan>\n    \u003Cbutton class=\"item__action\" type=\"button\">Delete\u003C\u002Fbutton>\n  \u003C\u002Fli>\n  \u003Cli class=\"item\">\n    \u003Cspan class=\"item__name\">brand-guidelines.pdf\u003C\u002Fspan>\n    \u003Cbutton class=\"item__action\" type=\"button\">Delete\u003C\u002Fbutton>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n","html","",[45,386,387,413,430,452,482,492,507,527,552,561],{"__ignoreMap":384},[388,389,392,396,399,403,406,410],"span",{"class":390,"line":391},"line",1,[388,393,395],{"class":394},"suds8","\u003C",[388,397,35],{"class":398},"sne4z",[388,400,402],{"class":401},"s-5SL"," class",[388,404,405],{"class":394},"=",[388,407,409],{"class":408},"sT6z2","\"list\"",[388,411,412],{"class":394},">\n",[388,414,416,419,421,423,425,428],{"class":390,"line":415},2,[388,417,418],{"class":394},"  \u003C",[388,420,38],{"class":398},[388,422,402],{"class":401},[388,424,405],{"class":394},[388,426,427],{"class":408},"\"item\"",[388,429,412],{"class":394},[388,431,433,436,438,440,442,445,448,450],{"class":390,"line":432},3,[388,434,435],{"class":394},"    \u003C",[388,437,388],{"class":398},[388,439,402],{"class":401},[388,441,405],{"class":394},[388,443,444],{"class":408},"\"item__name\"",[388,446,447],{"class":394},">Q3-forecast.numbers\u003C\u002F",[388,449,388],{"class":398},[388,451,412],{"class":394},[388,453,455,457,460,462,464,467,470,472,475,478,480],{"class":390,"line":454},4,[388,456,435],{"class":394},[388,458,459],{"class":398},"button",[388,461,402],{"class":401},[388,463,405],{"class":394},[388,465,466],{"class":408},"\"item__action\"",[388,468,469],{"class":401}," type",[388,471,405],{"class":394},[388,473,474],{"class":408},"\"button\"",[388,476,477],{"class":394},">Delete\u003C\u002F",[388,479,459],{"class":398},[388,481,412],{"class":394},[388,483,485,488,490],{"class":390,"line":484},5,[388,486,487],{"class":394},"  \u003C\u002F",[388,489,38],{"class":398},[388,491,412],{"class":394},[388,493,495,497,499,501,503,505],{"class":390,"line":494},6,[388,496,418],{"class":394},[388,498,38],{"class":398},[388,500,402],{"class":401},[388,502,405],{"class":394},[388,504,427],{"class":408},[388,506,412],{"class":394},[388,508,510,512,514,516,518,520,523,525],{"class":390,"line":509},7,[388,511,435],{"class":394},[388,513,388],{"class":398},[388,515,402],{"class":401},[388,517,405],{"class":394},[388,519,444],{"class":408},[388,521,522],{"class":394},">brand-guidelines.pdf\u003C\u002F",[388,524,388],{"class":398},[388,526,412],{"class":394},[388,528,530,532,534,536,538,540,542,544,546,548,550],{"class":390,"line":529},8,[388,531,435],{"class":394},[388,533,459],{"class":398},[388,535,402],{"class":401},[388,537,405],{"class":394},[388,539,466],{"class":408},[388,541,469],{"class":401},[388,543,405],{"class":394},[388,545,474],{"class":408},[388,547,477],{"class":394},[388,549,459],{"class":398},[388,551,412],{"class":394},[388,553,555,557,559],{"class":390,"line":554},9,[388,556,487],{"class":394},[388,558,38],{"class":398},[388,560,412],{"class":394},[388,562,564,567,569],{"class":390,"line":563},10,[388,565,566],{"class":394},"\u003C\u002F",[388,568,35],{"class":398},[388,570,412],{"class":394},[379,572,576],{"className":573,"code":574,"language":575,"meta":384,"style":384},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }\n\n.item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.7rem 0.8rem;\n  border: 1px solid #cbd5e1;\n  border-radius: 8px;\n}\n\n.item__action {\n  border: 1px solid #cbd5e1;\n  border-radius: 6px;\n  padding: 0.35rem 0.7rem;\n  background: transparent;\n  font: 400 0.8rem\u002F1 system-ui, sans-serif;\n  cursor: pointer;\n}\n\n\u002F* The default is VISIBLE. Nothing is hidden until we have proof the device\n   can hover, so an unclassified device or an old engine keeps the control. *\u002F\n@media (hover: hover) {\n  .item__action {\n    opacity: 0;\n    transition: opacity 0.18s ease;\n  }\n  \u002F* Two reveal conditions: pointer hover, and focus anywhere inside the row.\n     Without the second, a keyboard user would tab to an invisible button. *\u002F\n  .item:hover .item__action,\n  .item:focus-within .item__action {\n    opacity: 1;\n  }\n}\n\n\u002F* Precision, not hover: a coarse pointer needs a bigger target even on a\n   device that can hover, such as a stylus-driven tablet. *\u002F\n@media (pointer: coarse) {\n  .item__action {\n    min-height: 44px;\n    padding-inline: 1rem;\n  }\n}\n\n\u002F* Honour the motion preference for the fade itself. *\u002F\n@media (prefers-reduced-motion: reduce) {\n  .item__action { transition-duration: 0.01ms; }\n}\n","css",[45,577,578,640,646,654,667,679,691,705,724,744,758,764,769,777,794,807,826,839,869,881,886,891,898,904,922,930,942,962,968,974,980,992,1002,1013,1018,1023,1028,1034,1040,1048,1055,1070,1084,1089,1094,1099,1105,1113,1133],{"__ignoreMap":384},[388,579,580,583,586,589,592,594,597,600,602,605,607,610,612,614,616,619,621,624,626,629,631,633,637],{"class":390,"line":391},[388,581,582],{"class":401},".list",[388,584,585],{"class":394}," { ",[388,587,588],{"class":401},"list-style",[388,590,591],{"class":394},": ",[388,593,105],{"class":401},[388,595,596],{"class":394},"; ",[388,598,599],{"class":401},"margin",[388,601,591],{"class":394},[388,603,604],{"class":401},"0",[388,606,596],{"class":394},[388,608,609],{"class":401},"padding",[388,611,591],{"class":394},[388,613,604],{"class":401},[388,615,596],{"class":394},[388,617,618],{"class":401},"display",[388,620,591],{"class":394},[388,622,623],{"class":401},"grid",[388,625,596],{"class":394},[388,627,628],{"class":401},"gap",[388,630,591],{"class":394},[388,632,261],{"class":401},[388,634,636],{"class":635},"sHUrx","rem",[388,638,639],{"class":394},"; }\n",[388,641,642],{"class":390,"line":415},[388,643,645],{"emptyLinePlaceholder":644},true,"\n",[388,647,648,651],{"class":390,"line":432},[388,649,650],{"class":401},".item",[388,652,653],{"class":394}," {\n",[388,655,656,659,661,664],{"class":390,"line":454},[388,657,658],{"class":401},"  display",[388,660,591],{"class":394},[388,662,663],{"class":401},"flex",[388,665,666],{"class":394},";\n",[388,668,669,672,674,677],{"class":390,"line":484},[388,670,671],{"class":401},"  align-items",[388,673,591],{"class":394},[388,675,676],{"class":401},"center",[388,678,666],{"class":394},[388,680,681,684,686,689],{"class":390,"line":494},[388,682,683],{"class":401},"  justify-content",[388,685,591],{"class":394},[388,687,688],{"class":401},"space-between",[388,690,666],{"class":394},[388,692,693,696,698,701,703],{"class":390,"line":509},[388,694,695],{"class":401},"  gap",[388,697,591],{"class":394},[388,699,700],{"class":401},"1",[388,702,636],{"class":635},[388,704,666],{"class":394},[388,706,707,710,712,715,717,720,722],{"class":390,"line":529},[388,708,709],{"class":401},"  padding",[388,711,591],{"class":394},[388,713,714],{"class":401},"0.7",[388,716,636],{"class":635},[388,718,719],{"class":401}," 0.8",[388,721,636],{"class":635},[388,723,666],{"class":394},[388,725,726,729,731,733,736,739,742],{"class":390,"line":554},[388,727,728],{"class":401},"  border",[388,730,591],{"class":394},[388,732,700],{"class":401},[388,734,735],{"class":635},"px",[388,737,738],{"class":401}," solid",[388,740,741],{"class":401}," #cbd5e1",[388,743,666],{"class":394},[388,745,746,749,751,754,756],{"class":390,"line":563},[388,747,748],{"class":401},"  border-radius",[388,750,591],{"class":394},[388,752,753],{"class":401},"8",[388,755,735],{"class":635},[388,757,666],{"class":394},[388,759,761],{"class":390,"line":760},11,[388,762,763],{"class":394},"}\n",[388,765,767],{"class":390,"line":766},12,[388,768,645],{"emptyLinePlaceholder":644},[388,770,772,775],{"class":390,"line":771},13,[388,773,774],{"class":401},".item__action",[388,776,653],{"class":394},[388,778,780,782,784,786,788,790,792],{"class":390,"line":779},14,[388,781,728],{"class":401},[388,783,591],{"class":394},[388,785,700],{"class":401},[388,787,735],{"class":635},[388,789,738],{"class":401},[388,791,741],{"class":401},[388,793,666],{"class":394},[388,795,797,799,801,803,805],{"class":390,"line":796},15,[388,798,748],{"class":401},[388,800,591],{"class":394},[388,802,250],{"class":401},[388,804,735],{"class":635},[388,806,666],{"class":394},[388,808,810,812,814,817,819,822,824],{"class":390,"line":809},16,[388,811,709],{"class":401},[388,813,591],{"class":394},[388,815,816],{"class":401},"0.35",[388,818,636],{"class":635},[388,820,821],{"class":401}," 0.7",[388,823,636],{"class":635},[388,825,666],{"class":394},[388,827,829,832,834,837],{"class":390,"line":828},17,[388,830,831],{"class":401},"  background",[388,833,591],{"class":394},[388,835,836],{"class":401},"transparent",[388,838,666],{"class":394},[388,840,842,845,847,850,852,854,857,859,862,864,867],{"class":390,"line":841},18,[388,843,844],{"class":401},"  font",[388,846,591],{"class":394},[388,848,849],{"class":401},"400",[388,851,719],{"class":401},[388,853,636],{"class":635},[388,855,856],{"class":394},"\u002F",[388,858,700],{"class":401},[388,860,861],{"class":401}," system-ui",[388,863,106],{"class":394},[388,865,866],{"class":401},"sans-serif",[388,868,666],{"class":394},[388,870,872,875,877,879],{"class":390,"line":871},19,[388,873,874],{"class":401},"  cursor",[388,876,591],{"class":394},[388,878,118],{"class":401},[388,880,666],{"class":394},[388,882,884],{"class":390,"line":883},20,[388,885,763],{"class":394},[388,887,889],{"class":390,"line":888},21,[388,890,645],{"emptyLinePlaceholder":644},[388,892,894],{"class":390,"line":893},22,[388,895,897],{"class":896},"sLBg1","\u002F* The default is VISIBLE. Nothing is hidden until we have proof the device\n",[388,899,901],{"class":390,"line":900},23,[388,902,903],{"class":896},"   can hover, so an unclassified device or an old engine keeps the control. *\u002F\n",[388,905,907,910,913,915,917,919],{"class":390,"line":906},24,[388,908,909],{"class":635},"@media",[388,911,912],{"class":394}," (",[388,914,100],{"class":401},[388,916,591],{"class":394},[388,918,100],{"class":401},[388,920,921],{"class":394},") {\n",[388,923,925,928],{"class":390,"line":924},25,[388,926,927],{"class":401},"  .item__action",[388,929,653],{"class":394},[388,931,933,936,938,940],{"class":390,"line":932},26,[388,934,935],{"class":401},"    opacity",[388,937,591],{"class":394},[388,939,604],{"class":401},[388,941,666],{"class":394},[388,943,945,948,951,954,957,960],{"class":390,"line":944},27,[388,946,947],{"class":401},"    transition",[388,949,950],{"class":394},": opacity ",[388,952,953],{"class":401},"0.18",[388,955,956],{"class":635},"s",[388,958,959],{"class":401}," ease",[388,961,666],{"class":394},[388,963,965],{"class":390,"line":964},28,[388,966,967],{"class":394},"  }\n",[388,969,971],{"class":390,"line":970},29,[388,972,973],{"class":896},"  \u002F* Two reveal conditions: pointer hover, and focus anywhere inside the row.\n",[388,975,977],{"class":390,"line":976},30,[388,978,979],{"class":896},"     Without the second, a keyboard user would tab to an invisible button. *\u002F\n",[388,981,983,986,989],{"class":390,"line":982},31,[388,984,985],{"class":401},"  .item:hover",[388,987,988],{"class":401}," .item__action",[388,990,991],{"class":394},",\n",[388,993,995,998,1000],{"class":390,"line":994},32,[388,996,997],{"class":401},"  .item:focus-within",[388,999,988],{"class":401},[388,1001,653],{"class":394},[388,1003,1005,1007,1009,1011],{"class":390,"line":1004},33,[388,1006,935],{"class":401},[388,1008,591],{"class":394},[388,1010,700],{"class":401},[388,1012,666],{"class":394},[388,1014,1016],{"class":390,"line":1015},34,[388,1017,967],{"class":394},[388,1019,1021],{"class":390,"line":1020},35,[388,1022,763],{"class":394},[388,1024,1026],{"class":390,"line":1025},36,[388,1027,645],{"emptyLinePlaceholder":644},[388,1029,1031],{"class":390,"line":1030},37,[388,1032,1033],{"class":896},"\u002F* Precision, not hover: a coarse pointer needs a bigger target even on a\n",[388,1035,1037],{"class":390,"line":1036},38,[388,1038,1039],{"class":896},"   device that can hover, such as a stylus-driven tablet. *\u002F\n",[388,1041,1043,1045],{"class":390,"line":1042},39,[388,1044,909],{"class":635},[388,1046,1047],{"class":394}," (pointer: coarse) {\n",[388,1049,1051,1053],{"class":390,"line":1050},40,[388,1052,927],{"class":401},[388,1054,653],{"class":394},[388,1056,1058,1061,1063,1066,1068],{"class":390,"line":1057},41,[388,1059,1060],{"class":401},"    min-height",[388,1062,591],{"class":394},[388,1064,1065],{"class":401},"44",[388,1067,735],{"class":635},[388,1069,666],{"class":394},[388,1071,1073,1076,1078,1080,1082],{"class":390,"line":1072},42,[388,1074,1075],{"class":401},"    padding-inline",[388,1077,591],{"class":394},[388,1079,700],{"class":401},[388,1081,636],{"class":635},[388,1083,666],{"class":394},[388,1085,1087],{"class":390,"line":1086},43,[388,1088,967],{"class":394},[388,1090,1092],{"class":390,"line":1091},44,[388,1093,763],{"class":394},[388,1095,1097],{"class":390,"line":1096},45,[388,1098,645],{"emptyLinePlaceholder":644},[388,1100,1102],{"class":390,"line":1101},46,[388,1103,1104],{"class":896},"\u002F* Honour the motion preference for the fade itself. *\u002F\n",[388,1106,1108,1110],{"class":390,"line":1107},47,[388,1109,909],{"class":635},[388,1111,1112],{"class":394}," (prefers-reduced-motion: reduce) {\n",[388,1114,1116,1118,1120,1123,1125,1128,1131],{"class":390,"line":1115},48,[388,1117,927],{"class":401},[388,1119,585],{"class":394},[388,1121,1122],{"class":401},"transition-duration",[388,1124,591],{"class":394},[388,1126,1127],{"class":401},"0.01",[388,1129,1130],{"class":635},"ms",[388,1132,639],{"class":394},[388,1134,1136],{"class":390,"line":1135},49,[388,1137,763],{"class":394},[331,1139],{"name":1140},"hf-hover-gated-reveal",[64,1142,1144],{"id":1143},"the-technique-that-makes-it-work","The technique that makes it work",[14,1146,1147,1148,1151,1152,1158],{},"The load-bearing decision is not which media feature to use — it is which side of the query the hiding goes on. Written the other way round, as a permanently hidden control revealed inside ",[45,1149,1150],{},"@media (hover: none)",", every failure mode strands the user: an engine that does not implement the feature, a device the platform reports as unknown, a stylesheet loaded with the media attribute stripped. Written as ",[31,1153,1154,1155],{},"visible by default, hidden only under ",[45,1156,1157],{},"(hover: hover)",", every one of those failures produces a cluttered but fully functional interface.",[14,1160,1161,1162,1165,1166,1169],{},"This is progressive enhancement applied to input capability rather than to feature support, and it composes with ",[45,1163,1164],{},"@supports"," reasoning in the same way: assume the least capable environment, then subtract. It also has a practical consequence for review — you can audit a stylesheet for this pattern by grepping for ",[45,1167,1168],{},"hover: none",", since a well-structured sheet rarely needs it.",[14,1171,181,1172,1175,1176,1179,1180,1183,1184,1187,1188,1191,1192,1195],{},[45,1173,1174],{},"opacity","-based hide matters too. ",[45,1177,1178],{},"display: none"," inside the hover block would remove the button from the accessibility tree and from the tab order, so ",[45,1181,1182],{},":focus-within"," could never fire — there would be nothing to focus. ",[45,1185,1186],{},"opacity: 0"," keeps the element focusable, which is what lets the keyboard reveal work at all. If you need the control to be non-interactive while hidden, ",[45,1189,1190],{},"visibility: hidden"," is the correct middle ground, but then you must restore ",[45,1193,1194],{},"visibility"," in the same rules that restore opacity.",[64,1197,1199,1200,1202],{"id":1198},"variation-an-any-hover-fallback-for-hybrid-devices","Variation: an ",[45,1201,57],{}," fallback for hybrid devices",[14,1204,1205,1207,1208,1210],{},[45,1206,100],{}," describes only the primary device, and platforms do not always designate the one the user is holding. On a convertible where the OS reports touch as primary, a user with a mouse plugged in matches ",[45,1209,1168],{}," and gets the always-visible layout — correct but slightly cluttered. If you would rather trust the presence of any hovering device:",[379,1212,1214],{"className":573,"code":1213,"language":575,"meta":384,"style":384},"\u002F* Hide only when a hovering device exists somewhere on the system, even if\n   it is not the primary one. More generous, slightly riskier. *\u002F\n@media (any-hover: hover) {\n  .item__action { opacity: 0; }\n  .item:hover .item__action,\n  .item:focus-within .item__action { opacity: 1; }\n}\n",[45,1215,1216,1221,1226,1237,1251,1259,1275],{"__ignoreMap":384},[388,1217,1218],{"class":390,"line":391},[388,1219,1220],{"class":896},"\u002F* Hide only when a hovering device exists somewhere on the system, even if\n",[388,1222,1223],{"class":390,"line":415},[388,1224,1225],{"class":896},"   it is not the primary one. More generous, slightly riskier. *\u002F\n",[388,1227,1228,1230,1233,1235],{"class":390,"line":432},[388,1229,909],{"class":635},[388,1231,1232],{"class":394}," (any-hover: ",[388,1234,100],{"class":401},[388,1236,921],{"class":394},[388,1238,1239,1241,1243,1245,1247,1249],{"class":390,"line":454},[388,1240,927],{"class":401},[388,1242,585],{"class":394},[388,1244,1174],{"class":401},[388,1246,591],{"class":394},[388,1248,604],{"class":401},[388,1250,639],{"class":394},[388,1252,1253,1255,1257],{"class":390,"line":484},[388,1254,985],{"class":401},[388,1256,988],{"class":401},[388,1258,991],{"class":394},[388,1260,1261,1263,1265,1267,1269,1271,1273],{"class":390,"line":494},[388,1262,997],{"class":401},[388,1264,988],{"class":401},[388,1266,585],{"class":394},[388,1268,1174],{"class":401},[388,1270,591],{"class":394},[388,1272,700],{"class":401},[388,1274,639],{"class":394},[388,1276,1277],{"class":390,"line":509},[388,1278,763],{"class":394},[14,1280,1281,1282,1284,1285,1287,1288,1290,1291,1295],{},"The tradeoff is real: ",[45,1283,57],{}," will hide the control on a tablet whose only hovering device is a stylus the user rarely picks up. As a rule, use ",[45,1286,100],{}," for hiding functionality and ",[45,1289,57],{}," only for decorative refinements. Where the control is genuinely important, do not hide it on either — and where it is small, check it against the rules in ",[18,1292,1294],{"href":1293},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility\u002F","Target Size and Pointer Accessibility"," before deciding a coarse pointer can reach it.",[64,1297,1299],{"id":1298},"browser-support","Browser support",[14,1301,1302,1303,106,1305,106,1307,58,1309,1311,1312,1314,1315,1317],{},"The interaction media features have very broad support: ",[45,1304,100],{},[45,1306,118],{},[45,1308,57],{},[45,1310,61],{}," are all available across every current engine and have been for years, so anything evergreen handles all four. Because an unsupporting engine simply fails to match, the default-visible structure described above is itself the fallback and no ",[45,1313,1164],{}," guard is needed. One caveat worth testing for: a small number of older Android browsers reported ",[45,1316,47],{}," incorrectly, which is another reason not to put functionality behind the query.",[64,1319,1321],{"id":1320},"faq","FAQ",[14,1323,1324,1330,1331,1333],{},[31,1325,1326,1327,1329],{},"Why use ",[45,1328,1157],{}," instead of detecting touch support?","\nTouch detection answers whether a touchscreen exists, not whether the person is using one. Hybrid laptops have both, and users switch input mid-session. The ",[45,1332,100],{}," media feature describes the primary pointing device's capability and re-evaluates live, so the styling follows the actual input.",[14,1335,1336,1344,1346,1347,1349,1350,1352,1353,27],{},[31,1337,1338,1339,58,1341,1343],{},"What is the difference between ",[45,1340,100],{},[45,1342,57],{},"?",[45,1345,100],{}," reports the capability of the primary pointing device, while ",[45,1348,57],{}," reports whether any available pointing device can hover. A touchscreen laptop with a mouse attached typically matches both, but a tablet with an occasional stylus may match ",[45,1351,57],{}," without matching ",[45,1354,100],{},[14,1356,1357,1363],{},[31,1358,1359,1360,1362],{},"Does ",[45,1361,173],{}," always mean a touchscreen?","\nNo. It means the primary pointing device has limited accuracy, which covers fingers, some styluses, TV remotes and game controllers. It is a statement about precision, not about the hardware category, which is exactly why it is the right thing to test.",[14,1365,1366,1369,1370,1372],{},[31,1367,1368],{},"Should hover-revealed controls be hidden on desktop?","\nOnly if they are also revealed on focus. Hiding a control behind hover makes it unreachable by keyboard, so pair every hover reveal with ",[45,1371,1182],{}," on the same container, and keep the control permanently visible wherever hover is unavailable.",[64,1374,1376],{"id":1375},"related","Related",[35,1378,1379,1384,1394,1399,1404],{},[38,1380,1381,1383],{},[18,1382,21],{"href":20}," — the parent guide on interactive state styling.",[38,1385,1386,1393],{},[18,1387,1389,1392],{"href":1388},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns\u002F",[1390,1391],"focus-within",{}," Form Patterns"," — the keyboard half of every hover reveal.",[38,1395,1396,1398],{},[18,1397,26],{"href":25}," — the effects these queries gate.",[38,1400,1401,1403],{},[18,1402,1294],{"href":1293}," — sizing targets once you know the pointer is coarse.",[38,1405,1406,1410],{},[18,1407,1409],{"href":1408},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries\u002F","Responsive Navigation Without Media Queries"," — where capability queries and size queries divide the work.",[1412,1413,1414],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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}",{"title":384,"searchDepth":415,"depth":415,"links":1416},[1417,1418,1419,1420,1421,1423,1424,1425],{"id":66,"depth":415,"text":67},{"id":336,"depth":415,"text":337},{"id":373,"depth":415,"text":374},{"id":1143,"depth":415,"text":1144},{"id":1198,"depth":415,"text":1422},"Variation: an any-hover fallback for hybrid devices",{"id":1298,"depth":415,"text":1299},{"id":1320,"depth":415,"text":1321},{"id":1375,"depth":415,"text":1376},"Gate hover-only affordances with @media (hover: hover) and (pointer: coarse), understand any-hover and any-pointer, and stop sniffing for touch support.","md",{"pageTitle":1429,"datePublished":1430,"dateModified":1430,"faq":1431},"hover and pointer Capability Media Queries","2026-07-20",[1432,1435,1438,1441],{"q":1433,"a":1434},"Why use (hover: hover) instead of detecting touch support?","Touch detection answers whether a touchscreen exists, not whether the person is using one. Hybrid laptops have both, and users switch input mid-session. The hover media feature describes the primary pointing device's capability and re-evaluates live, so the styling follows the actual input.",{"q":1436,"a":1437},"What is the difference between hover and any-hover?","hover reports the capability of the primary pointing device, while any-hover reports whether any available pointing device can hover. A touchscreen laptop with a mouse attached typically matches both, but a tablet with an occasional stylus may match any-hover without matching hover.",{"q":1439,"a":1440},"Does pointer: coarse always mean a touchscreen?","No. It means the primary pointing device has limited accuracy, which covers fingers, some styluses, TV remotes and game controllers. It is a statement about precision, not about the hardware category, which is exactly why it is the right thing to test.",{"q":1368,"a":1442},"Only if they are also revealed on focus. Hiding a control behind hover makes it unreachable by keyboard, so pair every hover reveal with :focus-within on the same container, and keep the control permanently visible wherever hover is unavailable.","\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries",{"title":5,"description":1426},"css-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries\u002Findex","rquXF3OO3Z_QyEXotvdDOLTrRIN8cbXJIKo1ZACGaz0",[1448,1451,1454,1457,1460,1463,1466,1469,1472,1475,1478,1481,1484,1487,1490,1493,1496,1499,1502,1505,1508,1511,1514,1517,1520,1523,1524,1527,1530,1533,1536,1539,1542,1545,1548,1551,1554,1557,1560,1563,1566,1569,1572,1575,1578,1581,1584,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1619,1622,1625,1628,1631,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661,1664,1667,1670,1673,1676,1679,1682,1685,1688,1691,1694,1697,1700,1703,1706],{"path":1449,"title":1450},"\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":1452,"title":1453},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1455,"title":1456},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1458,"title":1459},"\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":1461,"title":1462},"\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":1464,"title":1465},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1467,"title":1468},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1470,"title":1471},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1473,"title":1474},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1476,"title":1477},"\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":1479,"title":1480},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1482,"title":1483},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1485,"title":1486},"\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":1488,"title":1489},"\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":1491,"title":1492},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1494,"title":1495},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1497,"title":1498},"\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":1500,"title":1501},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1503,"title":1504},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1506,"title":1507},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1509,"title":1510},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1512,"title":1513},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1515,"title":1516},"\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":1518,"title":1519},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1521,"title":1522},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1443,"title":5},{"path":1525,"title":1526},"\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":1528,"title":1529},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1531,"title":1532},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1534,"title":1535},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1537,"title":1538},"\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":1540,"title":1541},"\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":1543,"title":1544},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1546,"title":1547},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1549,"title":1550},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1552,"title":1553},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1555,"title":1556},"\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":1558,"title":1559},"\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":1561,"title":1562},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1564,"title":1565},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1567,"title":1568},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1570,"title":1571},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1573,"title":1574},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1576,"title":1577},"\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":1579,"title":1580},"\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":1582,"title":1583},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":856,"title":1585},"Modern CSS Layouts & Micro-Interactions",{"path":1587,"title":1588},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1590,"title":1591},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1593,"title":1594},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1596,"title":1597},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1599,"title":1600},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1602,"title":1603},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1605,"title":1606},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1608,"title":1609},"\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":1611,"title":1612},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1614,"title":1615},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1617,"title":1618},"\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":1620,"title":1621},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1623,"title":1624},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1626,"title":1627},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1629,"title":1630},"\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":1632,"title":1633},"\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":1635,"title":1636},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1638,"title":1639},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1641,"title":1642},"\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":1644,"title":1645},"\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":1647,"title":1648},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1650,"title":1651},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1653,"title":1654},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1656,"title":1657},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":1659,"title":1660},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1662,"title":1663},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1665,"title":1666},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1668,"title":1669},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1671,"title":1672},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1674,"title":1675},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1677,"title":1678},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1680,"title":1681},"\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":1683,"title":1684},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1686,"title":1687},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1689,"title":1690},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1692,"title":1693},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1695,"title":1696},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1698,"title":1699},"\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":1701,"title":1702},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1704,"title":1705},"\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":1707,"title":1708},"\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",1784566157849]