--- title: "Dagens CSS: :focus-visible" url: "https://www.bekk.christmas/post/2024/20/dagens-css-focus-visible" authors: ["Einar Afiouni"] published: "2024-12-20" updated: "2024-12-17T14:51:12Z" language: "nb-NO" type: "article" tags: ["CSS"] keywords: ["css"] series: "Dagens CSS" --- # Dagens CSS: :focus-visible I dagens CSS skal vi se på pseudoklassen `:focus-visible` Lenge har man kunnet bruke `:focus` til å stile hvordan fokus vises synlig på elementer. Dette er en fin måte å synliggjøre hvor man er på siden hvis man driver med for eksempel tastaturnavigasjon og et krav i disse dager med tanke på universell utforming. Ulempen med `:focus` derimot har vært at den viser fokus selv når man ikke ønsker det, for eksempel at man trykker på en knapp med musepekeren. I teorien har knappen fokus, men man ønsker ikke nødvendigvis å vise de stilene i det tilfellet. Det er her `:focus-visible` kommer inn i bildet. Den fungerer på mange måter likt som `:focus` bare at den bruker litt mer logikk på å bestemme om fokus-stilene skal vises eller ikke. For eksempel viser den fokusstiler om man bruker tastaturet til å navigere og trykke på en knapp, men ikke om man bruker musepekeren. [CodePen](https://codepen.io/iernie/pen/zxONeOw) Dette gjør det litt enklere å lage fine stiler som også tilfredstiller UU-krav, men som ikke vises altfor aggresivt. Mange har tidligere kanskje til og med skrudd av fokusstiler nettopp fordi de var “stygge”, men med `:focus-visible` kan vi få både pose og sekk! Og det beste av alt er at denne har vært godt støttet siden 2022. ## Relevante lenker anbefalt av forfatteren - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)