[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fthe-secret-focus-in-css":3},{"id":4,"title":5,"body":6,"date":116,"description":117,"extension":118,"head":119,"imageUrl":92,"meta":120,"navigation":121,"ogImage":119,"path":122,"robots":119,"schemaOrg":119,"seo":123,"sitemap":124,"stem":125,"__hash__":126},"articles\u002Farticles\u002F23.The-secret-focus-in-css.md","The Secret Focus in CSS",{"type":7,"value":8,"toc":113},"minimark",[9,13,26,29,43,49,55,71,83,89,100,110],[10,11,5],"h1",{"id":12},"the-secret-focus-in-css",[14,15,16,17,21,22,25],"p",{},"Not that kind of focus. This is about the difference between ",[18,19,20],"code",{},":focus"," and ",[18,23,24],{},":focus-visible",".",[14,27,28],{},"Most controls react similarly when clicked or tabbed to, but there is an important difference:",[30,31,32,38],"ol",{},[33,34,35,37],"li",{},[18,36,20],{}," applies whenever an element receives focus (mouse or keyboard).",[33,39,40,42],{},[18,41,24],{}," appears when focus indication is needed, typically during keyboard navigation.",[14,44,45,46,48],{},"With ",[18,47,20],{},", users can see a ring even after mouse click.",[14,50,51,52,54],{},"Here is how ",[18,53,20],{}," behaves:",[56,57,61],"v-image",{":hasBorder":58,":rounded":58,"alt":59,"src":60},"true","Focus example 1","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-example-1.png",[62,63,65],"template",{"v-slot:description":64},"",[14,66,67,68],{},"Focus state using ",[69,70],"focus",{},[56,72,75],{":hasBorder":58,":rounded":58,"alt":73,"src":74},"Focus example 2","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-example-2.png",[62,76,77],{"v-slot:description":64},[14,78,79,80,82],{},"Another ",[69,81],{}," behavior example",[14,84,85,86,88],{},"Now with ",[18,87,24],{},":",[56,90,93],{":hasBorder":58,":rounded":58,"alt":91,"src":92},"Focus-visible example 1","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-visible-1.png",[62,94,95],{"v-slot:description":64},[14,96,67,97],{},[98,99],"focus-visible",{},[56,101,104],{":hasBorder":58,":rounded":58,"alt":102,"src":103},"Focus-visible example 2","\u002Fimg\u002Fsecret-focus-css\u002Ffocus-visible-2.png",[62,105,106],{"v-slot:description":64},[14,107,79,108,82],{},[98,109],{},[14,111,112],{},"Small details like this are noticeable in real usage and improve perceived quality.",{"title":64,"searchDepth":114,"depth":114,"links":115},2,[],"2026-02-04T10:00:00+04:00","Why :focus-visible is often better than :focus for interaction polish and accessibility, with visual comparisons.\n","md",null,{},true,"\u002Farticles\u002Fthe-secret-focus-in-css",{"title":5,"description":117},{"loc":122},"articles\u002F23.The-secret-focus-in-css","R-sm16j0U2GKlkf9SDzB-3QRiWPtN3gzlpVAet5lF-A"]